/* ==========================================================================
   Selecto Impulso — identidad corporativa
   Estructura tomada de la propuesta «portal de clientes», con la paleta y el
   logotipo de la marca: verde y azul en lugar del dorado de la propuesta.
   ========================================================================== */

:root {
    /* Marca */
    --si-navy: #16264f;
    --si-navy-700: #223a72;
    --si-navy-500: #34509a;
    --si-green: #35a76a;
    --si-green-dark: #2b8d59;
    --si-green-soft: #7fd6a4;
    --si-blue: #4f5bd5;
    --si-blue-dark: #3f49b4;

    /* Texto */
    --si-ink: #1b2233;
    --si-muted: #5c6478;

    /* Superficies */
    --si-bg: #f2f4f9;
    --si-surface: #f7f8fd;
    --si-paper: #ffffff;
    --si-mint: #e6f5ec;
    --si-lavender: #ecedfb;
    --si-border: #dde2ee;

    /* Semánticos */
    --si-danger: #c9424d;
    --si-danger-soft: #fbeaec;
    --si-warning: #a3701a;
    --si-warning-soft: #fdf3e2;
    --si-success: var(--si-green-dark);
    --si-success-soft: var(--si-mint);

    /* Formas */
    --si-radius: 14px;
    --si-radius-lg: 20px;
    --si-radius-pill: 999px;
    --si-shadow: 0 1px 2px rgba(22, 38, 79, .04), 0 12px 32px -16px rgba(22, 38, 79, .22);
    --si-shadow-lg: 0 18px 48px -16px rgba(22, 38, 79, .34);

    --si-gradient: linear-gradient(90deg, var(--si-green) 0%, var(--si-blue) 100%);

    --si-font: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --si-font-display: "Fraunces", "Georgia", "Times New Roman", serif;
    --si-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--si-font);
    color: var(--si-ink);
    background: var(--si-bg);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--si-font-display);
    font-weight: 600;
    color: var(--si-navy);
    letter-spacing: -.01em;
    margin: 0 0 .5rem;
}

a {
    color: var(--si-blue);
    text-decoration: none;
}

a:hover {
    color: var(--si-blue-dark);
}

.si-mono {
    font-family: var(--si-font-mono);
}

.si-shell {
    width: min(1180px, 100% - 4rem);
    margin-inline: auto;
}

/* ------------------------------ Botones ---------------------------------- */

.si-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .75rem 1.4rem;
    border: 1.5px solid transparent;
    border-radius: var(--si-radius-pill);
    font: inherit;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.si-btn:active {
    transform: scale(.97);
}

.si-btn:disabled {
    opacity: .4;
    pointer-events: none;
}

.si-btn--primary {
    background: var(--si-gradient);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(79, 91, 213, .55);
}

.si-btn--primary:hover {
    color: #fff;
    box-shadow: 0 12px 26px -8px rgba(79, 91, 213, .6);
}

.si-btn--navy {
    background: var(--si-navy);
    color: #fff;
}

.si-btn--navy:hover {
    background: var(--si-navy-700);
    color: #fff;
}

.si-btn--solid {
    background: var(--si-green);
    color: #fff;
}

.si-btn--solid:hover {
    background: var(--si-green-dark);
    color: #fff;
}

.si-btn--ghost {
    background: transparent;
    border-color: var(--si-navy);
    color: var(--si-navy);
}

.si-btn--ghost:hover {
    background: var(--si-navy);
    color: #fff;
}

.si-btn--quiet {
    background: #fff;
    border-color: var(--si-border);
    color: var(--si-navy);
}

.si-btn--quiet:hover {
    border-color: var(--si-blue);
    color: var(--si-blue);
}

.si-btn--danger {
    background: var(--si-danger);
    color: #fff;
}

.si-btn--danger:hover {
    background: #ab353f;
    color: #fff;
}

.si-btn--lg {
    padding: .95rem 1.9rem;
    font-size: 1rem;
}

.si-btn--sm {
    padding: .4rem .9rem;
    font-size: .85rem;
}

.si-btn--icon {
    padding: .45rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
}

.si-btn--block {
    width: 100%;
}

/* ------------------------------ Encabezado ------------------------------- */

.si-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(242, 244, 249, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--si-border);
}

.si-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1rem 0;
}

.si-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-left: auto;
}

.si-nav__link {
    color: var(--si-muted);
    font-weight: 600;
    font-size: .91rem;
    transition: color .15s;
}

.si-nav__link:hover,
.si-nav__link.active {
    color: var(--si-navy);
}

.si-header__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.si-header__user {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 14rem;
    padding: .35rem .8rem;
    border-radius: var(--si-radius-pill);
    background: var(--si-paper);
    border: 1px solid var(--si-border);
    color: var(--si-muted);
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.si-header__user svg {
    width: .95rem;
    height: .95rem;
    flex: 0 0 auto;
}

/* El botón de salir vive en un formulario POST; que no rompa la fila de acciones. */
.si-logout-form {
    display: inline-flex;
    margin: 0;
}

/* --------------------------------- Logo ---------------------------------- */

.si-logo {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.si-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.si-logo__name {
    font-family: var(--si-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--si-navy);
}

.si-logo__name em {
    font-style: normal;
    color: var(--si-green);
}

.si-logo__tag {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .68rem;
    color: var(--si-muted);
    margin-top: .3rem;
}

.si-logo__tag::before,
.si-logo__tag::after {
    content: "";
    height: 1px;
    width: 1rem;
    background: var(--si-green);
    opacity: .6;
}

.si-logo--sm .si-logo__name {
    font-size: 1rem;
}

.si-logo--sm .si-logo__tag {
    display: none;
}

/* ------------------------------- Secciones -------------------------------- */

.si-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--si-green-dark);
    margin-bottom: 1rem;
}

.si-eyebrow::before {
    content: "";
    width: 1.2rem;
    height: 1.5px;
    background: var(--si-green);
}

.si-section {
    padding: 5rem 0;
}

.si-section-head {
    max-width: 34rem;
    margin-bottom: 3rem;
}

.si-section-head h2 {
    font-size: 2.05rem;
    line-height: 1.15;
}

/* --------------------------------- Hero ---------------------------------- */

.si-hero {
    padding: 5rem 0 5.5rem;
    position: relative;
    overflow: hidden;
}

.si-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 4rem;
    align-items: center;
}

.si-hero h1 {
    font-size: clamp(2.3rem, 4.4vw, 3.25rem);
    line-height: 1.06;
    max-width: 35rem;
}

.si-hero__lead {
    margin-top: 1.25rem;
    font-size: 1.09rem;
    line-height: 1.6;
    color: var(--si-muted);
    max-width: 29rem;
}

.si-hero__cta {
    display: flex;
    gap: .9rem;
    margin-top: 2.1rem;
    flex-wrap: wrap;
}

/* ------------------------------ Simulador -------------------------------- */

.si-calc {
    position: relative;
    background: var(--si-paper);
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
    box-shadow: var(--si-shadow);
    padding: 2rem;
}

.si-calc::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: var(--si-radius);
    padding: 1px;
    background: linear-gradient(135deg, var(--si-green), transparent 42%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.si-calc__title {
    font-size: .78rem;
    font-weight: 800;
    color: var(--si-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 1.4rem;
}

.si-calc__row {
    margin-bottom: 1.4rem;
}

.si-calc__row > label {
    display: flex;
    justify-content: space-between;
    font-size: .84rem;
    font-weight: 700;
    color: var(--si-muted);
    margin-bottom: .6rem;
}

.si-calc__row > label b {
    color: var(--si-navy);
    font-family: var(--si-font-mono);
    font-weight: 600;
}

.si-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 4px;
    background: linear-gradient(to right,
        var(--si-green) 0%,
        var(--si-green) var(--si-fill, 50%),
        var(--si-border) var(--si-fill, 50%),
        var(--si-border) 100%);
    outline: none;
    cursor: pointer;
}

.si-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--si-navy);
    border: 3px solid var(--si-green-soft);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(22, 38, 79, .35);
}

.si-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--si-navy);
    border: 3px solid var(--si-green-soft);
    cursor: pointer;
}

.si-pills {
    display: flex;
    gap: .5rem;
}

.si-pill {
    flex: 1;
    text-align: center;
    padding: .55rem 0;
    border-radius: var(--si-radius-pill);
    border: 1.5px solid var(--si-border);
    background: transparent;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    color: var(--si-muted);
    cursor: pointer;
    transition: all .15s;
}

.si-pill:hover {
    border-color: var(--si-blue);
    color: var(--si-blue);
}

.si-pill.active {
    background: var(--si-navy);
    border-color: var(--si-navy);
    color: #fff;
}

.si-calc__result {
    background: var(--si-navy);
    border-radius: 10px;
    padding: 1.35rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.si-calc__result .si-calc__label {
    font-size: .72rem;
    color: var(--si-green-soft);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.si-calc__result .si-calc__value {
    font-family: var(--si-font-mono);
    font-size: 1.7rem;
    color: #fff;
    font-weight: 600;
    margin-top: .35rem;
}

.si-calc__result .si-calc__aside {
    text-align: right;
    color: #b9c2dd;
    font-size: .74rem;
    line-height: 1.4;
}

.si-calc__fine {
    font-size: .72rem;
    color: var(--si-muted);
    margin-top: .8rem;
}

/* --------------------------------- Pasos --------------------------------- */

.si-steps {
    position: relative;
}

.si-steps__line {
    position: absolute;
    top: 1.7rem;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 0;
}

.si-steps__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.si-step__num {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--si-paper);
    border: 2px solid var(--si-green);
    color: var(--si-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--si-font-mono);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1.2rem;
}

.si-step:nth-child(even) .si-step__num {
    border-color: var(--si-blue);
}

.si-step h3 {
    font-size: 1.12rem;
    margin-bottom: .4rem;
}

.si-step p {
    font-size: .9rem;
    color: var(--si-muted);
    line-height: 1.6;
    margin: 0;
}

/* ------------------------------- Solicitud -------------------------------- */

.si-apply {
    padding: 0 0 6rem;
}

.si-apply__card {
    background: var(--si-paper);
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius-lg);
    box-shadow: var(--si-shadow);
    overflow: hidden;
}

.si-apply__head {
    padding: 2.2rem 2.75rem 0;
}

.si-apply__head h2 {
    font-size: 1.75rem;
}

.si-apply__head p {
    color: var(--si-muted);
    font-size: .95rem;
    margin-top: .4rem;
}

.si-tabs {
    display: flex;
    padding: 1.75rem 2.75rem 0;
    border-bottom: 1px solid var(--si-border);
    overflow-x: auto;
}

.si-tab {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 0 1.1rem;
    margin-right: 2.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    color: var(--si-muted);
    cursor: pointer;
    position: relative;
    top: 1px;
    white-space: nowrap;
}

.si-tab__dot {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--si-border);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-family: var(--si-font-mono);
    font-weight: 600;
    transition: all .2s;
}

.si-tab.active {
    color: var(--si-navy);
    border-bottom-color: var(--si-green);
}

.si-tab.active .si-tab__dot {
    background: var(--si-navy);
}

.si-tab.done .si-tab__dot {
    background: var(--si-green);
}

.si-apply__body {
    display: grid;
    grid-template-columns: 1fr 300px;
}

.si-apply__fields {
    padding: 2.2rem 2.75rem 2.75rem;
}

.si-panel {
    animation: si-fade .25s ease;
}

@keyframes si-fade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

.si-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.1rem;
}

.si-field {
    margin-bottom: 1.1rem;
}

.si-field--full {
    grid-column: 1 / -1;
}

.si-label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--si-muted);
    margin-bottom: .45rem;
}

.si-input,
.si-select {
    width: 100%;
    padding: .72rem .85rem;
    border-radius: 9px;
    border: 1.5px solid var(--si-border);
    font: inherit;
    font-size: .92rem;
    color: var(--si-ink);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.si-input:focus,
.si-select:focus {
    outline: none;
    border-color: var(--si-navy-500);
    box-shadow: 0 0 0 3px rgba(52, 80, 154, .12);
}

.si-input.invalid,
.si-select.invalid {
    border-color: var(--si-danger);
}

/* Para los que van dentro de un renglón de tabla: con el alto normal, dos desplegables estiran la
   fila al doble que las demás. El ancho mínimo evita que se encoja hasta no poder leer la opción. */
.si-select--sm {
    padding: .4rem .5rem;
    font-size: .85rem;
    min-width: 11rem;
}

.si-hint {
    display: block;
    font-size: .76rem;
    color: var(--si-muted);
    margin-top: .3rem;
}

.validation-message,
.si-error {
    display: block;
    color: var(--si-danger);
    font-size: .8rem;
    margin-top: .3rem;
}

.si-doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1.5px solid var(--si-border);
    border-radius: 10px;
    margin-bottom: .75rem;
}

.si-doc-row__name {
    font-size: .92rem;
    font-weight: 700;
}

.si-doc-row__sub {
    font-size: .78rem;
    color: var(--si-muted);
    margin-top: .1rem;
}

.si-doc-status {
    font-size: .7rem;
    font-weight: 800;
    padding: .35rem .7rem;
    border-radius: var(--si-radius-pill);
    background: var(--si-warning-soft);
    color: var(--si-warning);
    text-transform: uppercase;
    letter-spacing: .03em;
    border: none;
}

/* Palomita junto al nombre de cada archivo ya cargado. */
.si-doc-check {
    width: .85rem;
    height: .85rem;
    color: var(--si-green);
    vertical-align: -.1rem;
}

/* El InputFile va oculto dentro de un label con forma de botón. */
.si-doc-row label.si-btn {
    cursor: pointer;
}

.si-summary {
    background: var(--si-surface);
    border-left: 1px solid var(--si-border);
    padding: 2.2rem 2rem;
}

.si-summary h4 {
    font-family: var(--si-font);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--si-muted);
    margin-bottom: 1.1rem;
}

.si-summary__line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--si-border);
    font-size: .88rem;
}

.si-summary__line span:first-child {
    color: var(--si-muted);
}

.si-summary__line span:last-child {
    font-family: var(--si-font-mono);
    font-weight: 600;
    color: var(--si-navy);
    text-align: right;
}

.si-summary__line--total span:last-child {
    color: var(--si-green-dark);
    font-size: 1rem;
}

.si-terms {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .85rem;
    color: var(--si-muted);
    margin: 1.25rem 0 1.4rem;
}

.si-terms input {
    margin-top: .25rem;
    accent-color: var(--si-green);
}

.si-apply__nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 2.75rem 2.5rem;
}

/* Confirmación de envío */

.si-success {
    padding: 4rem 2.75rem;
    text-align: center;
}

.si-success__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--si-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.si-success__icon svg {
    width: 1.9rem;
    height: 1.9rem;
}

.si-success h3 {
    font-size: 1.5rem;
}

.si-success p {
    color: var(--si-muted);
    margin-top: .6rem;
    font-size: .95rem;
}

.si-track-id {
    display: inline-block;
    margin-top: 1.25rem;
    padding: .65rem 1.25rem;
    border-radius: var(--si-radius-pill);
    background: var(--si-navy);
    color: var(--si-green-soft);
    font-family: var(--si-font-mono);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .04em;
}

/* Credenciales que sólo se muestran una vez, al enviar la solicitud. */
.si-credenciales {
    max-width: 26rem;
    margin: 1.5rem auto 0;
    padding: 1.25rem 1.5rem;
    border: 1.5px dashed var(--si-green);
    border-radius: var(--si-radius);
    background: var(--si-mint);
    text-align: left;
}

.si-credenciales h4 {
    font-family: var(--si-font);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--si-green-dark);
    margin: 0 0 .6rem;
}

.si-credenciales p {
    font-size: .85rem;
    margin: 0 0 .9rem;
    color: var(--si-ink);
}

.si-credenciales dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem 1rem;
    margin: 0;
    align-items: baseline;
}

.si-credenciales dt {
    font-size: .78rem;
    color: var(--si-muted);
}

.si-credenciales dd {
    margin: 0;
    font-weight: 600;
    color: var(--si-navy);
    word-break: break-all;
}

.si-credenciales__clave {
    font-size: 1.15rem;
    letter-spacing: .06em;
}

.si-credenciales__nota {
    font-size: .78rem;
    color: var(--si-muted);
    margin: .9rem 0 0;
}

/* ------------------------------ Seguimiento ------------------------------- */

.si-dash {
    padding: 0 0 6rem;
}

.si-dash__card {
    background: var(--si-navy);
    border-radius: var(--si-radius-lg);
    padding: 3rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.si-dash__card::after {
    content: "";
    position: absolute;
    right: -5rem;
    top: -5rem;
    width: 17rem;
    height: 17rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(53, 167, 106, .3), transparent 70%);
}

.si-dash__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    margin-bottom: 3rem;
}

.si-dash__top h2 {
    color: #fff;
    font-size: 1.6rem;
}

.si-dash__top p {
    color: #aeb8d4;
    font-size: .9rem;
    margin: .4rem 0 0;
}

.si-track-pill {
    font-family: var(--si-font-mono);
    font-size: .78rem;
    background: rgba(255, 255, 255, .09);
    padding: .5rem .9rem;
    border-radius: var(--si-radius-pill);
    color: var(--si-green-soft);
}

.si-lookup {
    display: flex;
    gap: .6rem;
    align-items: center;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.si-lookup .si-input {
    max-width: 16rem;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
    font-family: var(--si-font-mono);
}

.si-lookup .si-input::placeholder {
    color: #8590b0;
}

.si-lookup .si-input:focus {
    border-color: var(--si-green-soft);
    box-shadow: 0 0 0 3px rgba(127, 214, 164, .2);
}

.si-dash__msg {
    position: relative;
    z-index: 1;
    color: #aeb8d4;
    font-size: .88rem;
    margin-bottom: 2rem;
}

.si-timeline {
    position: relative;
    z-index: 1;
}

.si-timeline__track {
    position: relative;
    height: 2px;
    background: rgba(255, 255, 255, .14);
    margin: 0 1.5rem 1.75rem;
    border-radius: 2px;
}

.si-timeline__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    background: var(--si-green);
    border-radius: 2px;
    transition: width .5s ease;
}

.si-timeline__nodes {
    display: flex;
    justify-content: space-between;
}

.si-tnode {
    flex: 1;
    text-align: center;
    position: relative;
}

.si-tnode__circle {
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    margin: 0 auto .9rem;
    position: relative;
    top: -2.2rem;
    border: 3px solid var(--si-navy);
}

.si-tnode.done .si-tnode__circle {
    background: var(--si-green);
}

.si-tnode.current .si-tnode__circle {
    background: var(--si-green-soft);
    box-shadow: 0 0 0 5px rgba(127, 214, 164, .25);
}

.si-tnode__label {
    font-size: .84rem;
    font-weight: 700;
}

.si-tnode__date {
    font-size: .72rem;
    color: #8590b0;
    margin-top: .25rem;
    font-family: var(--si-font-mono);
}

/* -------------------------------- Confianza ------------------------------- */

.si-trust {
    padding: 0 0 6rem;
}

.si-trust__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.si-trust__card {
    padding: 2rem;
    background: var(--si-paper);
    border: 1px solid var(--si-border);
    border-radius: 16px;
}

.si-trust__card h3 {
    font-size: 1.05rem;
    margin-bottom: .5rem;
}

.si-trust__card p {
    font-size: .88rem;
    color: var(--si-muted);
    line-height: 1.6;
    margin: 0;
}

/* --------------------------- Iconos circulares ---------------------------- */

.si-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--si-mint);
    color: var(--si-green-dark);
}

.si-icon--blue {
    background: var(--si-lavender);
    color: var(--si-blue);
}

.si-icon--lg {
    width: 3.2rem;
    height: 3.2rem;
}

.si-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.si-icon--lg svg {
    width: 1.55rem;
    height: 1.55rem;
}

/* --------------------------------- Footer --------------------------------- */

.si-footer {
    border-top: 1px solid var(--si-border);
    padding: 3rem 0;
}

.si-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.si-footer__tag {
    font-family: var(--si-font-display);
    font-style: italic;
    color: var(--si-navy-700);
    font-size: .92rem;
}

.si-footer__legal {
    font-size: .72rem;
    color: var(--si-muted);
    max-width: 32rem;
    line-height: 1.6;
}

.si-footer__links {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.si-footer__links a {
    color: var(--si-muted);
    font-size: .82rem;
}

.si-footer__links a:hover {
    color: var(--si-navy);
}

/* ==========================================================================
   Área administrativa
   ========================================================================== */

.si-admin {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--si-surface);
}

.si-sidebar {
    background: var(--si-navy);
    color: #cdd5e8;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.si-sidebar__brand {
    padding: .25rem 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 1rem;
}

.si-sidebar__brand .si-logo__name {
    color: #fff;
}

.si-sidebar__brand .si-logo__name em {
    color: var(--si-green-soft);
}

.si-sidebar__group {
    padding: .35rem 1.25rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #7f8bb0;
    margin-top: .85rem;
}

.si-sidebar__link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 1.25rem;
    color: #cdd5e8;
    font-size: .9rem;
    border-left: 3px solid transparent;
}

.si-sidebar__link:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.si-sidebar__link.active {
    background: rgba(53, 167, 106, .16);
    border-left-color: var(--si-green);
    color: #fff;
    font-weight: 600;
}

.si-sidebar__link svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    opacity: .9;
}

.si-sidebar__badge {
    margin-left: auto;
    background: var(--si-green);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: var(--si-radius-pill);
}

.si-sidebar__footer {
    margin-top: auto;
    padding: 1rem 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .75rem;
    color: #7f8bb0;
}

.si-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.si-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: #fff;
    border-bottom: 1px solid var(--si-border);
}

.si-topbar__spacer {
    margin-left: auto;
}

/*
    El botón del cajón y su velo no existen en el escritorio, donde la barra lateral es una
    columna fija: los enciende el media query de 960 px y nada más. Se declaran aquí, y no allá
    dentro, para que el velo esté siempre fuera del flujo —es hijo de una retícula— y para que
    girar el teléfono a horizontal no deje una capa transparente tapando la pantalla.
*/
.si-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
    background: var(--si-paper);
    color: var(--si-navy);
    cursor: pointer;
}

.si-menu-btn:hover {
    background: var(--si-surface);
}

.si-menu-btn svg {
    width: 22px;
    height: 22px;
}

.si-sidebar__velo {
    display: none;
    position: fixed;
    inset: 0;
    /* Por debajo del cajón y muy por debajo de los modales, que viven en 1000. */
    z-index: 55;
    background: rgba(22, 38, 79, .45);
}

.si-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .88rem;
    color: var(--si-ink);
}

.si-avatar {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--si-gradient);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
}

.si-content {
    padding: 2rem;
    flex: 1;
}

.si-page-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.si-page-head h1 {
    font-size: 1.6rem;
    margin: 0;
}

.si-page-head p {
    margin: .3rem 0 0;
    color: var(--si-muted);
    font-size: .9rem;
}

.si-page-head__actions {
    margin-left: auto;
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

/* --------------------------------- Cards ---------------------------------- */

.si-card {
    background: #fff;
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
    box-shadow: var(--si-shadow);
}

.si-card + .si-card {
    margin-top: 1.5rem;
}

.si-card__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--si-border);
    flex-wrap: wrap;
}

.si-card__head h2 {
    font-family: var(--si-font);
    font-size: 1.02rem;
    margin: 0;
}

.si-card__body {
    padding: 1.25rem;
}

.si-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.si-stat {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
    box-shadow: var(--si-shadow);
}

.si-stat__value {
    font-family: var(--si-font-mono);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--si-navy);
    line-height: 1.1;
}

.si-stat__label {
    font-size: .8rem;
    color: var(--si-muted);
}

/* Variantes de alarma para la cartera. El color sólo aparece cuando hay algo que mirar: un
   indicador en rojo permanente deja de leerse a la semana. */
.si-stat--alerta {
    border-color: var(--si-danger);
    background: var(--si-danger-soft);
}

.si-stat__value--rojo {
    color: var(--si-danger);
}

.si-icon--rojo {
    background: var(--si-danger-soft);
    color: var(--si-danger);
}

/* Ámbar, para lo que vence hoy: todavía no es un problema, así que no va en rojo. Es el mismo
   color del renglón y del chip de «Vence hoy», para que las tres cosas se lean como una. */
.si-stat__value--ambar {
    color: var(--si-warning);
}

.si-icon--ambar {
    background: var(--si-warning-soft);
    color: var(--si-warning);
}

/* Tarjeta con algo vencido dentro. Sólo el borde: rellenar una tarjeta entera de rojo compite
   con los datos que lleva. */
.si-card--alerta {
    border-color: var(--si-danger);
}

/* -------------------------------- Tablas ---------------------------------- */

.si-table-wrap {
    overflow-x: auto;
}

.si-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.si-table th {
    text-align: left;
    padding: .8rem 1.25rem;
    background: var(--si-surface);
    color: var(--si-muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    border-bottom: 1px solid var(--si-border);
    white-space: nowrap;
}

.si-table td {
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--si-border);
    vertical-align: middle;
}

.si-table tbody tr:last-child td {
    border-bottom: none;
}

.si-table tbody tr:hover {
    background: #fafbff;
}

.si-table__id {
    color: var(--si-muted);
    font-family: var(--si-font-mono);
    font-size: .82rem;
    white-space: nowrap;
}

.si-table__num {
    font-family: var(--si-font-mono);
    text-align: right;
    white-space: nowrap;
}

/* Calendario de pagos: muchas filas y todas numéricas, conviene compactarlo. */
.si-table--amortizacion th,
.si-table--amortizacion td {
    padding: .45rem .9rem;
    font-size: .84rem;
}

.si-table--amortizacion tfoot td {
    border-top: 2px solid var(--si-border);
    background: var(--si-surface);
    font-weight: 700;
    color: var(--si-navy);
}

.si-table--amortizacion tbody tr:last-child td {
    border-bottom: 1px solid var(--si-border);
}

.si-table__actions {
    width: 8rem;
    text-align: right;
    white-space: nowrap;
}

.si-table__actions .si-btn {
    margin-left: .35rem;
}

.si-empty {
    padding: 3rem 1.25rem;
    text-align: center;
    color: var(--si-muted);
}

.si-empty svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--si-border);
    margin-bottom: .75rem;
}

/* -------------------------------- Etiquetas -------------------------------- */

.si-chip {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: var(--si-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.si-chip--neutro {
    background: var(--si-lavender);
    color: var(--si-blue-dark);
}

.si-chip--aviso {
    background: var(--si-warning-soft);
    color: var(--si-warning);
}

.si-chip--ok {
    background: var(--si-mint);
    color: var(--si-green-dark);
}

.si-chip--error {
    background: var(--si-danger-soft);
    color: var(--si-danger);
}

.si-tag {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: var(--si-radius-pill);
    background: var(--si-surface);
    border: 1px solid var(--si-border);
    font-size: .74rem;
    color: var(--si-muted);
    font-family: var(--si-font-mono);
}

/* -------------------------------- Búsqueda -------------------------------- */

.si-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 22rem;
}

.si-search svg {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--si-muted);
    pointer-events: none;
}

.si-search .si-input {
    padding-left: 2.25rem;
}

/* -------------------------------- Alertas --------------------------------- */

.si-alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1.1rem;
    border-radius: 12px;
    font-size: .88rem;
    margin-bottom: 1.25rem;
}

.si-alert svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    margin-top: .1rem;
}

.si-alert--ok {
    background: var(--si-success-soft);
    color: var(--si-success);
}

.si-alert--error {
    background: var(--si-danger-soft);
    color: var(--si-danger);
}

.si-alert--warn {
    background: var(--si-warning-soft);
    color: var(--si-warning);
}

.si-alert__close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    opacity: .6;
    padding: 0;
}

.si-alert__close:hover {
    opacity: 1;
}

/* -------------------------------- Modales --------------------------------- */

.si-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(22, 38, 79, .45);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.si-modal {
    width: min(480px, 100%);
    background: #fff;
    border-radius: var(--si-radius-lg);
    box-shadow: var(--si-shadow-lg);
    /* El tope de altura va en la base y no sólo en la variante ancha: sin él, un modal que crece
       —el de pago, con su recargo y su liquidación— empuja los botones fuera de la pantalla y
       deja al operador sin forma de guardar ni cancelar. */
    max-height: 90vh;
    overflow-y: auto;
    animation: si-modal-in .18s ease-out;
}

/* Para formularios de una columna que se han quedado apretados en 480. */
.si-modal--medio {
    width: min(640px, 100%);
}

.si-modal--ancho {
    width: min(860px, 100%);
}

@keyframes si-modal-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .si-modal,
    .si-panel {
        animation: none;
    }

    .si-sidebar {
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}

.si-modal__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--si-border);
}

.si-modal__head h2 {
    font-family: var(--si-font);
    font-size: 1.05rem;
    margin: 0;
}

.si-modal__body {
    padding: 1.5rem;
}

.si-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1rem 1.5rem;
    background: var(--si-surface);
    border-top: 1px solid var(--si-border);
    flex-wrap: wrap;
}

/* ------------------------- Instalar la aplicación ------------------------- */

.si-instalar {
    margin-top: 1rem;
}

.si-instalar-ios {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-top: 1.25rem;
    padding: .85rem 1rem;
    max-width: 26rem;
    background: var(--si-paper);
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
}

.si-instalar-ios strong {
    font-size: .9rem;
}

.si-instalar-ios p {
    margin: .15rem 0 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--si-muted);
}

/*
    La aplicación instalada no tiene barra del navegador, así que nada protege al contenido del
    notch ni de la barra de gestos. Estas dos reglas sólo aplican ahí: en una pestaña normal el
    navegador ya se encarga y env() vale cero.
*/
@media (display-mode: standalone) {
    .si-topbar,
    .si-sidebar,
    .si-nav {
        padding-top: env(safe-area-inset-top);
    }

    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* El rebote elástico al llegar al final delata que es una página web dentro de un marco. */
    html {
        overscroll-behavior-y: none;
    }
}

/* ------------------- Pestañas del expediente del crédito ------------------ */

.si-tabs {
    display: flex;
    gap: .25rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--si-border);
    overflow-x: auto;
}

.si-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem .9rem;
    border: none;
    background: none;
    color: var(--si-muted);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    /* La línea de la pestaña activa se dibuja encima del borde de la barra, por eso el -1px. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.si-tab:hover {
    color: var(--si-ink);
}

.si-tab--activa {
    color: var(--si-navy);
    border-bottom-color: var(--si-navy);
}

.si-tab__cuenta {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: var(--si-radius-pill);
    background: var(--si-lavender);
    color: var(--si-blue-dark);
    font-size: .72rem;
}

.si-subtitulo {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--si-muted);
    margin: 1.25rem 0 .5rem;
}

.si-subtitulo:first-child {
    margin-top: 0;
}

/* --------------------- Vencimientos en la cartera ------------------------- */

/*
    Naranja el que vence hoy, rojo el que ya se pasó.

    Sólo una barra a la izquierda y un fondo muy tenue, no la fila entera de color: la columna de
    atraso ya trae su importe en rojo, y dos rojos compitiendo en el mismo renglón dejan de señalar
    nada. La barra se ve de reojo recorriendo la tabla, que es para lo que sirve.
*/
.si-fila--hoy td:first-child {
    box-shadow: inset 3px 0 0 var(--si-warning);
}

.si-fila--hoy {
    background: var(--si-warning-soft);
}

.si-fila--vencido td:first-child {
    box-shadow: inset 3px 0 0 var(--si-danger);
}

.si-fila--vencido {
    background: var(--si-danger-soft);
}

/* El hover de .si-table los tapaba: aquí el color del renglón manda. */
.si-table tbody tr.si-fila--hoy:hover {
    background: #fbeccd;
}

.si-table tbody tr.si-fila--vencido:hover {
    background: #f7dde0;
}

.si-leyenda {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-right: .75rem;
}

.si-punto {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    display: inline-block;
}

.si-punto--hoy {
    background: var(--si-warning);
}

.si-punto--vencido {
    background: var(--si-danger);
}

/* ---------------------------- Reporte de cartera -------------------------- */

/*
    Una tabla de sesenta y siete columnas. Se recorre a lo ancho, y por eso la columna del número
    de contrato se queda pegada a la izquierda: es el equivalente al panel congelado de la hoja de
    Excel, donde sin él uno acaba sin saber de quién es el renglón que está mirando.

    Sólo se fija esa columna y no las ocho primeras como en la hoja: pegar ocho se come media
    pantalla en un portátil, y el contrato solo ya basta para no perderse.
*/
.si-reporte {
    max-height: 70vh;
    overflow: auto;
}

.si-table--compacta {
    font-size: .8rem;
}

.si-table--compacta th,
.si-table--compacta td {
    padding: .45rem .7rem;
    white-space: nowrap;
}

/* El encabezado también se queda arriba: con cincuenta renglones, saber qué columna se está
   leyendo importa tanto como saber de quién es el renglón. */
.si-reporte thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.si-reporte__fija {
    position: sticky;
    left: 0;
    background: var(--si-paper);
    z-index: 1;
    /* Sin esto, el contenido que pasa por debajo se ve a través en el borde. */
    box-shadow: 1px 0 0 var(--si-border);
}

/* La esquina: es cabecera y es columna fija a la vez, así que necesita ganarles a las dos. */
.si-reporte thead .si-reporte__fija {
    z-index: 3;
    background: var(--si-surface);
}

.si-reporte tbody tr:hover .si-reporte__fija {
    background: #fafbff;
}

.si-reporte__totales td {
    position: sticky;
    bottom: 0;
    background: var(--si-lavender);
    font-weight: 700;
    border-top: 2px solid var(--si-border);
}

.si-reporte__totales .si-reporte__fija {
    background: var(--si-lavender);
    z-index: 2;
}

.si-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.si-num--rojo {
    color: var(--si-danger);
    font-weight: 700;
}

/* -------------------------- Avisos de pago (push) ------------------------- */

.si-notif {
    margin-bottom: 1.5rem;
}

/* El botón vive siempre en el árbol —el JavaScript necesita su referencia desde el primer
   render— así que se esconde con el atributo hidden. Hace falta la regla porque .si-btn trae
   su propio display, que le gana al del atributo. */
.si-notif__accion[hidden] {
    display: none;
}

.si-notif__texto {
    margin: 0 0 1rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--si-muted);
    max-width: 46rem;
}

.si-notif__aviso {
    margin: .85rem 0 0;
    font-size: .85rem;
    color: var(--si-success);
}

.si-notif__aviso--error {
    color: var(--si-danger);
}

/* --------------------------- Reparto de solicitudes ----------------------- */

/* Más ancha y más alta que las demás: aquí se hojea un PDF, y a 860 px un estado de cuenta
   o una identificación quedan ilegibles. */
.si-modal--visor {
    width: min(1080px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

/* El cuerpo es lo único que hace scroll; la cabecera y los controles de reparto quedan fijos
   para no tener que subir a buscar el botón de asignar. */
.si-modal--visor .si-modal__body {
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

/*
    El visor: lista a la izquierda, archivo a la derecha. Lo usan el modal de reparto y la pestaña
    de documentos del crédito, que son dos contextos de altura distinta —uno vive dentro de un
    modal que ya mide 92vh, el otro dentro de una tarjeta que mide lo que ocupe—. Por eso aquí va
    una altura mínima razonable y el modal la sobreescribe con la suya.
*/
.si-visor {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.25rem;
    min-height: 26rem;
}

.si-modal--visor .si-visor {
    height: 100%;
    min-height: 0;
}

.si-visor__lista {
    overflow-y: auto;
    /* Sólo vertical: cualquier desbordamiento horizontal aquí es un texto que hay que partir,
       no una barra que agregar. El hueco reservado evita que el contenido salte al aparecer. */
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding-right: .5rem;
}

/* Ficha en un solo eje: etiqueta chica encima, valor debajo. En dos columnas, la etiqueta se
   come el ancho y el valor se parte letra por letra. */
.si-reparto__ficha {
    margin: 0;
    font-size: .9rem;
}

.si-reparto__ficha dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--si-muted);
    margin-top: .7rem;
}

.si-reparto__ficha dt:first-child {
    margin-top: 0;
}

.si-reparto__ficha dd {
    margin: .1rem 0 0;
    overflow-wrap: anywhere;
}

.si-visor__titulo {
    font-family: var(--si-font);
    font-size: .95rem;
    margin: 1.25rem 0 .6rem;
}

.si-visor__docs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.si-visor__doc {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
    background: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.si-visor__doc:hover {
    border-color: var(--si-blue);
}

.si-visor__doc.es-activo {
    border-color: var(--si-blue);
    background: var(--si-surface);
}

/* Sin esto el SVG sale a su tamaño natural —unos 40 px— y cada documento ocupa tres renglones,
   así que con tres adjuntos la lista ya pide barra de desplazamiento. */
.si-visor__doc svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
}

.si-visor__doc span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.si-visor__doc span span {
    font-size: .78rem;
}

.si-visor__panel {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 0;
}

.si-visor__barra {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* El visor del navegador necesita alto explícito: un iframe sin él colapsa a 150 px. */
.si-visor__marco {
    flex: 1;
    min-height: 420px;
    width: 100%;
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
    background: var(--si-surface);
}

.si-visor__imagen {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: contain;
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
    background: var(--si-surface);
}

/* Los controles de reparto van alineados a la izquierda: son un formulario, no acciones de
   cierre, y empujarlos a la derecha los deja separados de sus etiquetas. Alineados abajo para
   que los dos desplegables compartan línea de base. */
.si-reparto__foot {
    justify-content: flex-start;
    align-items: flex-end;
    row-gap: .75rem;
}

.si-reparto__foot .si-field {
    min-width: 13rem;
    flex: 1 1 13rem;
}

/* Los botones al extremo opuesto de los campos, que es donde se les busca. */
.si-reparto__accion {
    margin-left: auto;
}

/* Renglón completo, encima de los campos. */
.si-reparto__todos {
    flex: 0 0 100%;
    max-width: none;
}

.si-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    color: var(--si-muted);
    cursor: pointer;
}

/* En pantallas angostas el visor pasa debajo de la lista en vez de competir por el ancho. */
@media (max-width: 900px) {
    .si-visor {
        grid-template-columns: minmax(0, 1fr);
        overflow-y: auto;
    }

    .si-visor__lista {
        overflow: visible;
    }

    .si-visor__marco,
    .si-visor__imagen {
        min-height: 320px;
    }
}

/* ------------------------------- Paginador -------------------------------- */

.si-pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--si-border);
    font-size: .85rem;
    color: var(--si-muted);
    flex-wrap: wrap;
}

.si-pager__controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ------------------------------- Utilidades ------------------------------- */

.si-spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: si-spin .7s linear infinite;
}

.si-spinner--ink {
    border-color: var(--si-border);
    border-top-color: var(--si-blue);
}

@keyframes si-spin {
    to {
        transform: rotate(360deg);
    }
}

.si-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3rem;
    color: var(--si-muted);
}

.si-muted {
    color: var(--si-muted);
}

.si-dl {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: .55rem 1rem;
    font-size: .9rem;
}

.si-dl dt {
    color: var(--si-muted);
}

.si-dl dd {
    margin: 0;
    font-weight: 600;
    color: var(--si-navy);
}

.si-plain {
    width: min(1100px, 100% - 2.5rem);
    margin: 2.5rem auto;
}

.si-plain .form-control {
    border-radius: 9px;
    padding: .7rem .85rem;
    border-color: var(--si-border);
}

.si-plain .btn-primary {
    background: var(--si-gradient);
    border: none;
    border-radius: var(--si-radius-pill);
    padding: .75rem 1.4rem;
    font-weight: 700;
}

.si-plain .btn-lg {
    border-radius: var(--si-radius-pill);
}

.si-plain h1,
.si-plain h2,
.si-plain h3 {
    font-family: var(--si-font-display);
}

/* -------------------- Aviso de error del circuito Blazor ------------------ */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    padding: .8rem 1.25rem;
    background: #fff6e0;
    color: #7a5410;
    border-top: 1px solid #f0dcae;
    box-shadow: 0 -2px 10px rgba(22, 38, 79, .12);
    font-size: .9rem;
}

#blazor-error-ui .reload {
    color: #7a5410;
    font-weight: 600;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 1rem;
    top: .7rem;
    cursor: pointer;
}

/* ------------------------------- Responsivo ------------------------------- */

@media (max-width: 1100px) {
    .si-trust__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .si-shell {
        width: min(1180px, 100% - 2.5rem);
    }

    .si-hero__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .si-steps__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .si-steps__line {
        display: none;
    }

    .si-apply__body {
        grid-template-columns: 1fr;
    }

    .si-summary {
        border-left: none;
        border-top: 1px solid var(--si-border);
    }

    .si-nav {
        display: none;
    }

    .si-admin {
        grid-template-columns: minmax(0, 1fr);
    }

    /* El cajón. Fuera de la pantalla mientras está cerrado y, sobre todo, «visibility: hidden»:
       un menú que sólo está corrido a la izquierda sigue recibiendo el tabulador y lo lee el
       lector de pantalla, así que el usuario recorrería quince enlaces invisibles. */
    .si-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: min(268px, 80vw);
        height: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .2s ease, visibility .2s;
        box-shadow: var(--si-shadow-lg);
    }

    .si-admin--menu .si-sidebar {
        transform: none;
        visibility: visible;
    }

    .si-menu-btn {
        display: inline-flex;
    }

    .si-sidebar__velo {
        display: block;
    }
}

@media (max-width: 640px) {
    .si-field-grid,
    .si-steps__grid {
        grid-template-columns: 1fr;
    }

    .si-apply__head,
    .si-tabs,
    .si-apply__fields,
    .si-apply__nav {
        padding-inline: 1.25rem;
    }

    .si-dash__card {
        padding: 1.75rem;
    }

    .si-content,
    .si-topbar {
        padding: 1.25rem;
    }

    .si-dl {
        grid-template-columns: 1fr;
    }

    .si-header__user {
        display: none;
    }

    /* La barra superior tiene ahora un botón más y en 360 px se partía en tres renglones.
       El título sobra —se está viendo el panel— y del usuario basta la inicial y el perfil;
       el correo completo está a un toque, en «Mi cuenta». */
    .si-topbar__titulo,
    .si-user__nombre {
        display: none;
    }
}

/* Texto largo de lectura: aviso de privacidad, términos y cualquier documento legal.
   El resto del sitio son tarjetas y tablas, así que estos ritmos no existían. */
.si-prose h3 {
    font-size: 1.02rem;
    margin: 1.75rem 0 .6rem;
    color: var(--si-navy);
}

.si-prose h3:first-child {
    margin-top: 0;
}

.si-prose p,
.si-prose li {
    line-height: 1.65;
    color: var(--si-ink);
}

.si-prose ul {
    margin: .6rem 0 1rem;
    padding-left: 1.2rem;
}

.si-prose li {
    margin-bottom: .35rem;
}

.si-prose .si-alert {
    margin: 1.25rem 0;
}