/* ==========================================================================
   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.
*/
/* Los dos botones de la barra superior se ven igual y nunca coinciden: el del cajón sólo existe
   en el teléfono y el del colapso sólo en el escritorio. */
.si-menu-btn,
.si-colapsar-btn {
    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 {
    display: none;
}

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

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

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

/*
    La barra lateral escondida, para dejarle el ancho a la tabla y a los indicadores.

    De 961 px para arriba y nada más: por debajo la barra ya es un cajón y lo manda
    `si-admin--menu`, así que las dos reglas no se pisan nunca.

    `display: none` y no un ancho de cero por lo mismo que ya se documentó en el cajón: una barra
    de quince enlaces que sigue existiendo recibe el tabulador y la lee el lector de pantalla, y
    el usuario recorrería quince enlaces que no ve.
*/
@media (min-width: 961px) {
    .si-sin-menu .si-admin {
        grid-template-columns: minmax(0, 1fr);
    }

    .si-sin-menu .si-sidebar {
        display: none;
    }
}

.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);
}

/* Ni bien ni mal: algo que conviene saber antes de seguir. El ámbar es el mismo de «vence hoy». */
.si-alert--aviso {
    background: var(--si-warning-soft);
    color: var(--si-warning);
}

/* Los documentos que arma el sistema, encima de los que entregó el cliente. La raya los separa:
   son dos cosas distintas aunque vivan en la misma pestaña. */
.si-expediente {
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--si-border);
}

.si-expediente__titulo {
    font-size: 1rem;
    margin: 0;
}

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

/* El borde y el alto fijo dejan claro dónde se firma. touch-action impide que el dedo arrastre
   la página mientras se está trazando sobre el canvas. */
.si-lienzo-firma__lienzo {
    display: block;
    width: 100%;
    height: 190px;
    border: 1px dashed var(--si-border);
    border-radius: var(--si-radius);
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

.si-lienzo-firma__acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .6rem;
}

.si-firma-documento {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
    gap: 1rem;
}

.si-firma-documento__vista {
    width: 100%;
    min-height: 420px;
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
}

@media (max-width: 700px) {
    .si-lienzo-firma__acciones {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .si-firma-documento__vista {
        min-height: 280px;
    }
}

.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);
}

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

.si-fila--pagado {
    background: var(--si-success-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-table tbody tr.si-fila--pagado:hover {
    background: #d8eee2;
}

.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);
}

.si-punto--pagado {
    background: var(--si-success);
}

/* ---------------------------- 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);
}

/*
    La imagen se acota contra la ventana, no contra su contenedor.

    Antes decía `flex: 1` y confiaba en que la cadena de alturas llegara hasta aquí. No llegaba:
    el modal tiene max-height pero no height, así que el `height: 100%` del visor resolvía a auto
    y la imagen quedaba sin altura definida. Con eso el `object-fit: contain` no hacía nada —la
    caja ya tenía la proporción natural— y una foto vertical de teléfono se dibujaba a lo ancho
    con su alto real, recortada por el overflow del modal. Se veía la franja de arriba: fondo y el
    canto de la credencial.

    Un tope en vh no depende de que nadie más resuelva su altura.
*/
.si-visor__imagen {
    display: block;
    width: 100%;
    max-height: 62vh;
    object-fit: contain;
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
    background: var(--si-surface);

    /* La mayoría son fotos de credenciales tomadas con el teléfono: se ven enteras pero chicas,
       y el detalle está en abrirlas. El cursor lo anuncia. */
    cursor: zoom-in;
    transition: transform .15s ease;
}

/* Fotos de documentos giradas, que es lo normal cuando se toman de prisa. El giro es sólo de la
   vista: el archivo no se toca, y al cambiar de documento vuelve a cero. */
.si-visor__imagen[data-giro="90"] { transform: rotate(90deg); }
.si-visor__imagen[data-giro="180"] { transform: rotate(180deg); }
.si-visor__imagen[data-giro="270"] { transform: rotate(270deg); }

/* Al girar un cuarto, el alto pasa a ser ancho: sin esto la imagen girada se sale de la caja. */
.si-visor__imagen[data-giro="90"],
.si-visor__imagen[data-giro="270"] {
    max-height: 48vh;
}

/* 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 {
        min-height: 320px;
    }

    /* En pantalla chica la lista de documentos va arriba y deja menos sitio. */
    .si-visor__imagen {
        max-height: 46vh;
    }

    .si-visor__imagen[data-giro="90"],
    .si-visor__imagen[data-giro="270"] {
        max-height: 38vh;
    }
}

/* ------------------------------- 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;
    }

    /* En el teléfono no hay ancho que ganar escondiendo nada: la barra ya está escondida. */
    .si-colapsar-btn {
        display: none;
    }

    .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;
}

/* La cámara de la entrega. El visor manda en la modal: en un teléfono, lo que no se ve encuadrado
   se fotografía mal, y una foto mal encuadrada es una foto que hay que repetir con el cliente
   enfrente. */
.si-camara__visor {
    position: relative;
    background: #0c1428;
    border-radius: var(--si-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.si-camara__visor--sin {
    aspect-ratio: auto;
    min-height: 120px;
    background: var(--si-surface-2, #f4f6fb);
}

.si-camara__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.si-camara__aviso {
    position: absolute;
    margin: 0;
    padding: 0 1rem;
    text-align: center;
    font-size: .9rem;
    color: #fff;
}

.si-camara__visor--sin .si-camara__aviso {
    position: static;
    color: var(--si-ink);
}

.si-camara__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .7rem;
}

/* El input va escondido pero sigue siendo el que recibe el clic, a través de su etiqueta: así
   conserva el selector del sistema y no hace falta abrirlo con JavaScript. */
.si-camara__archivo {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.si-camara__tira {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: .8rem 0 0;
    padding: 0;
}

.si-camara__tomada {
    position: relative;
    width: 86px;
}

.si-camara__tomada img {
    display: block;
    width: 100%;
    border-radius: calc(var(--si-radius) * .7);
    border: 1px solid var(--si-border);
}

/* Grande para el pulgar: se aprieta en un teléfono, con prisa y a una mano. */
.si-camara__descartar {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: var(--si-navy);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.si-camara__sinubicacion {
    display: block;
    margin-top: .2rem;
    font-size: .64rem;
    text-align: center;
    color: var(--si-muted);
}

.si-entrega {
    margin-top: 1.4rem;
}

.si-entrega__galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .8rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.si-entrega__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--si-radius);
    border: 1px solid var(--si-border);
}

.si-entrega__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .35rem;
    font-size: .75rem;
    color: var(--si-muted);
}

/* Los documentos del crédito, un renglón cada uno. Antes era una tira de botones que se envolvía,
   y al pasar a la segunda línea dejaba de verse qué estado pertenecía a qué documento. */
.si-papeles {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
    overflow: hidden;
}

.si-papel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    padding: .7rem .9rem;
}

.si-papel + .si-papel {
    border-top: 1px solid var(--si-border);
}

.si-papel__que {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    /* Empuja las acciones al extremo y absorbe el espacio sobrante. */
    flex: 1 1 14rem;
}

.si-papel__nombre {
    font-weight: 600;
    color: var(--si-navy);
}

/* El estado como texto y no como píldora: deja de competir con los botones, y así cabe la fecha
   —que es lo que de verdad se quiere saber— en vez de esconderla en el título. */
.si-papel__estado {
    font-size: .8rem;
    color: var(--si-muted);
}

.si-papel__ok {
    color: var(--si-success, #2d7d46);
    font-weight: 700;
}

.si-papel__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

/* Anular va como enlace y no como botón: es la acción más rara y la única que no se deshace, así
   que no debe pesar lo mismo que descargar. En rojo sólo al apuntarla, para que se note lo que es
   sin gritar desde el renglón. */
.si-papel__anular {
    border: none;
    background: none;
    padding: .2rem;
    font: inherit;
    font-size: .8rem;
    color: var(--si-muted);
    text-decoration: underline;
    cursor: pointer;
}

.si-papel__anular:hover,
.si-papel__anular:focus-visible {
    color: var(--si-danger);
}

@media (max-width: 560px) {
    /* En el teléfono las acciones bajan a su propio renglón: apretadas contra el nombre quedaban
       dos columnas estrechas y ninguna se leía bien. */
    .si-papel__acciones {
        margin-left: 0;
        width: 100%;
    }
}

/* El contador de la pestaña de Desembolso cuenta lo que FALTA, al revés que los de Referencias y
   Documentos, que cuentan lo que hay. Mismo tamaño para que la tira no baile, distinto color para
   que no se lean igual. */
.si-tab__cuenta--pendiente {
    background: var(--si-warning-soft);
    color: var(--si-warning);
}

/* Con cuatro pestañas la tira ya no cabe en un teléfono, y desplazarse de lado esconde justo la
   última —«Desembolso», que es a donde se va a entregar el dinero—. Envolver a dos renglones es
   preferible: ocupa un poco más de alto pero no esconde nada, y en una pantalla táctil nadie
   descubre que una tira se arrastra si no se le nota. */
@media (max-width: 760px) {
    /* Dos por renglón, en rejilla y no envolviendo a ojo. Envolviendo dependía de lo que midiera
       cada etiqueta: con «Documentos 3» y «Desembolso 3» faltaban dos píxeles y se iban a tres
       renglones. Con la rejilla siempre son dos y dos, aunque un contador llegue a dos cifras o
       alguien renombre una pestaña. */
    .si-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow-x: visible;
        padding: 1rem 1rem 0;
    }

    .si-tab {
        margin-right: 0;
        padding-bottom: .7rem;
        padding-top: .35rem;
    }
}

/* La contraseña recién puesta, para leerla en voz alta o copiarla sin equivocarse. Monoespaciada
   y separada del resto porque es lo único de esa ventana que hay que transcribir bien. */
.si-clave {
    display: inline-block;
    padding: .25rem .6rem;
    border: 1px solid var(--si-border);
    border-radius: calc(var(--si-radius) * .6);
    background: var(--si-surface-2, #f4f6fb);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem;
    letter-spacing: .04em;
    user-select: all;
}