/* =========================================================
   CLEOMED AI — HOJA DE ESTILOS
   Estilo: Minimalismo clinico + Bento + Aurora + Glass en el chrome
   Paleta de marca: Azul Profundo #1A2980 · Turquesa #26D0CE
   Regla de color: el gradiente se reserva para la marca y el banner
   de la Historia. Todo lo demas es solido. El turquesa es ACENTO.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root, :root[data-theme="claro"] {
    --bg: #EDF1F8;
    --aurora-1: rgba(38, 208, 206, .30);
    --aurora-2: rgba(26, 41, 128, .20);
    --aurora-3: rgba(120, 160, 255, .26);
    --reticula: none;
    --texto: #0E1A3C;
    --texto-suave: #64748B;
    --texto-tenue: #94A3B8;
    --superficie: rgba(255, 255, 255, .86);
    --superficie-2: rgba(247, 249, 252, .78);
    --borde: #E2E8F0;
    --borde-fuerte: #CBD5E1;
    --separador: #EDF1F7;
    --sombra-1: 0 1px 2px rgba(16, 30, 70, .04), 0 1px 3px rgba(16, 30, 70, .06);
    --sombra-2: 0 1px 2px rgba(16, 30, 70, .04), 0 8px 24px rgba(16, 30, 70, .08);
    --sombra-3: 0 1px 2px rgba(16, 30, 70, .05), 0 18px 48px rgba(16, 30, 70, .12);
    --primario: #1A2980;
    --primario-hover: #2233A0;
    --acento: #26D0CE;
    --acento-suave: rgba(38, 208, 206, .14);
    --barra: #14215E;
    --barra-texto: #FFFFFF;
    --glass: rgba(255, 255, 255, .72);
    --glass-borde: rgba(255, 255, 255, .85);
    --fondo-input: #FFFFFF;
    --borde-input: #DCE3EE;
    --ok-bg: rgba(34, 197, 94, .12);
    --ok-texto: #15803D;
    --aviso-bg: rgba(245, 158, 11, .14);
    --aviso-texto: #92610A;
    --error-bg: rgba(220, 60, 60, .10);
    --error-texto: #B3261E;
    --info-bg: rgba(56, 189, 248, .14);
    --info-texto: #0369A1;
}

    :root[data-theme="oscuro"] {
        --bg: #060B1C;
        --aurora-1: rgba(38, 208, 206, .20);
        --aurora-2: rgba(62, 99, 221, .30);
        --aurora-3: rgba(150, 90, 220, .16);
        --reticula: linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.020) 1px, transparent 1px);
        --texto: #E8EEFB;
        --texto-suave: #8CA0C4;
        --texto-tenue: #64769C;
        --superficie: rgba(18, 26, 56, .70);
        --superficie-2: rgba(255, 255, 255, .045);
        --borde: rgba(255, 255, 255, .09);
        --borde-fuerte: rgba(255, 255, 255, .16);
        --separador: rgba(255, 255, 255, .06);
        --sombra-1: 0 1px 2px rgba(0, 0, 0, .30);
        --sombra-2: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 28px rgba(0, 0, 0, .38);
        --sombra-3: 0 1px 2px rgba(0, 0, 0, .35), 0 22px 56px rgba(0, 0, 0, .48);
        --primario: #3A4CC4;
        --primario-hover: #4A5CD8;
        --acento: #4FD8D6;
        --acento-suave: rgba(79, 216, 214, .16);
        --barra: rgba(13, 20, 48, .82);
        --barra-texto: #E8EEFB;
        --glass: rgba(255, 255, 255, .06);
        --glass-borde: rgba(255, 255, 255, .12);
        --fondo-input: rgba(255, 255, 255, .045);
        --borde-input: rgba(255, 255, 255, .13);
        --ok-bg: rgba(34, 197, 94, .14);
        --ok-texto: #6EE7A8;
        --aviso-bg: rgba(245, 158, 11, .14);
        --aviso-texto: #FCD34D;
        --error-bg: rgba(243, 60, 60, .14);
        --error-texto: #FF9C9C;
        --info-bg: rgba(56, 189, 248, .14);
        --info-texto: #7DD3FC;
    }

/* ---------- 2. BASE ---------- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--texto);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

    /* ---------- 3. FONDO AURORA (halos DENTRO de la pantalla) ---------- */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(1100px 820px at 8% 2%, var(--aurora-2), transparent 62%), radial-gradient(1250px 900px at 94% 10%, var(--aurora-1), transparent 64%), radial-gradient(1100px 850px at 48% 106%, var(--aurora-3), transparent 62%);
    }

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: var(--reticula);
        background-size: 48px 48px;
        opacity: .55;
    }

/* ---------- 4. BARRA SUPERIOR (glass chrome) ---------- */
.barra {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0;
    background: var(--barra);
    color: var(--barra-texto);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 8px 28px rgba(8, 16, 50, .22);
}

.barra-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.marca {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--barra-texto);
    text-decoration: none;
    flex-shrink: 0;
}

    .marca .ai {
        font-size: 20px;
        color: #26D0CE;
        margin-left: 5px;
    }

.nav-enlaces {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.nav-enlace {
    display: inline-block;
    text-decoration: none;
    color: var(--barra-texto);
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    opacity: .72;
    transition: background .15s ease, opacity .15s ease, border-color .15s ease;
}

    .nav-enlace:hover {
        opacity: 1;
        background: rgba(255, 255, 255, .10);
    }

    .nav-enlace.activo {
        opacity: 1;
        background: rgba(255, 255, 255, .16);
        border-color: rgba(255, 255, 255, .22);
    }

.barra-der {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-salir {
    display: inline-block;
    text-decoration: none;
    color: var(--barra-texto);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    opacity: .88;
    transition: background .15s ease, opacity .15s ease;
}

    .btn-salir:hover {
        opacity: 1;
        background: rgba(255, 255, 255, .12);
    }

.btn-tema {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: transparent;
    color: var(--barra-texto);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .88;
    transition: background .15s ease, opacity .15s ease;
}

    .btn-tema:hover {
        opacity: 1;
        background: rgba(255, 255, 255, .12);
    }

    .btn-tema svg {
        width: 19px;
        height: 19px;
    }

:root[data-theme="claro"] .btn-tema .ic-sol {
    display: none;
}

:root[data-theme="oscuro"] .btn-tema .ic-luna {
    display: none;
}

/* ---------- 5. CONTENIDO ---------- */
.contenido {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px 24px 70px;
}

/* ---------- 6. TIPOGRAFIA Y SALUDO ---------- */
.saludo {
    margin-bottom: 26px;
}

    .saludo h1 {
        margin: 0 0 6px;
        font-size: 31px;
        font-weight: 800;
        letter-spacing: -.7px;
        line-height: 1.15;
    }

    .saludo .sub {
        margin: 0;
        color: var(--texto-suave);
        font-size: 14.5px;
    }

.saludo-fila {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.seccion-titulo {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.2px;
    margin: 0 0 16px;
}

/* ---------- 7. TARJETAS (glass al minimo, legibilidad clinica) ---------- */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 18px;
    box-shadow: var(--sombra-2);
    padding: 26px;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* ---------- 8. DASHBOARD (4 tarjetas iguales, 2x2) ---------- */
.grid-resumen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.tarjeta.resumen {
    padding: 22px 24px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.resumen-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.resumen-etiqueta {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--texto-suave);
    letter-spacing: .6px;
    text-transform: uppercase;
    line-height: 1.4;
}

.resumen-marca {
    width: 4px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.marca-celeste {
    background: linear-gradient(180deg, #26D0CE, rgba(38, 208, 206, .30));
}

.marca-verde {
    background: linear-gradient(180deg, #22C55E, rgba(34, 197, 94, .30));
}

.marca-ambar {
    background: linear-gradient(180deg, #F59E0B, rgba(245, 158, 11, .30));
}

.marca-rojo {
    background: linear-gradient(180deg, #EF4444, rgba(239, 68, 68, .30));
}

.resumen-valor {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.numero-grande {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.resumen-pie {
    font-size: 12.5px;
    color: var(--texto-suave);
}

.numero-etiqueta {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-suave);
    margin-top: 8px;
}

/* ---------- 9. BOTONES ---------- */
.btn-primario {
    display: inline-block;
    border: none;
    cursor: pointer;
    text-decoration: none;
    background: var(--primario);
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
    padding: 13px 26px;
    border-radius: 11px;
    box-shadow: var(--sombra-1);
    transition: background .14s ease, box-shadow .14s ease, transform .1s ease;
}

    .btn-primario:hover {
        background: var(--primario-hover);
        box-shadow: var(--sombra-2);
        transform: translateY(-1px);
    }

    .btn-primario:active {
        transform: translateY(0);
        box-shadow: var(--sombra-1);
    }

.btn-secundario {
    display: inline-block;
    border: 1px solid var(--borde);
    cursor: pointer;
    text-decoration: none;
    background: var(--superficie);
    color: var(--texto);
    font-weight: 700;
    font-size: 13.5px;
    padding: 12px 22px;
    border-radius: 11px;
    transition: border-color .14s ease, background .14s ease;
}

    .btn-secundario:hover {
        border-color: var(--acento);
        background: var(--superficie-2);
    }

.btn-ancho {
    width: 100%;
}

/* ---------- 10. FORMULARIOS ---------- */
.campo {
    margin-bottom: 18px;
}

    .campo label {
        display: block;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--texto-suave);
        letter-spacing: .2px;
        margin-bottom: 7px;
    }

    .campo input,
    .campo select,
    .campo textarea {
        width: 100%;
        padding: 13px 16px;
        font-size: 15px;
        color: var(--texto);
        background: var(--fondo-input);
        border: 1.5px solid var(--borde-input);
        border-radius: 11px;
        outline: none;
        font-family: inherit;
        resize: vertical;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .campo input:focus,
        .campo select:focus,
        .campo textarea:focus {
            border-color: var(--acento);
            box-shadow: 0 0 0 4px var(--acento-suave);
        }

.grid-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 0 18px;
}

.panel-extra {
    margin: 10px 0 22px;
}

    .panel-extra summary {
        cursor: pointer;
        font-weight: 700;
        font-size: 14px;
        color: var(--primario);
        padding: 10px 0;
        user-select: none;
    }

:root[data-theme="oscuro"] .panel-extra summary {
    color: var(--acento);
}

.nota-suave {
    font-size: 12.5px;
    color: var(--texto-suave);
}

.etiqueta-bloque {
    display: block;
    font-weight: 800;
    font-size: 13.5px;
    color: var(--primario);
    margin-bottom: 4px;
}

:root[data-theme="oscuro"] .etiqueta-bloque {
    color: var(--acento);
}

/* ---------- 11. MENSAJES Y BANNERS ---------- */
.banner {
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 22px;
    border: 1px solid transparent;
}

.banner-aviso {
    background: var(--aviso-bg);
    color: var(--aviso-texto);
    border-color: rgba(245, 158, 11, .28);
}

.banner-peligro {
    background: var(--error-bg);
    color: var(--error-texto);
    border-color: rgba(220, 60, 60, .28);
}

.mensaje-error {
    background: var(--error-bg);
    color: var(--error-texto);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13.5px;
    margin-bottom: 16px;
}

.mensaje-ok {
    background: var(--ok-bg);
    color: var(--ok-texto);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13.5px;
    margin-bottom: 16px;
}

.enlace {
    color: var(--primario);
    font-weight: 700;
    text-decoration: none;
}

:root[data-theme="oscuro"] .enlace {
    color: var(--acento);
}

/* ---------- 12. LOGIN ---------- */
.auth-fondo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-tarjeta {
    width: 100%;
    max-width: 430px;
    background: var(--glass);
    border: 1px solid var(--glass-borde);
    border-radius: 22px;
    box-shadow: var(--sombra-3);
    padding: 42px 38px 36px;
    backdrop-filter: blur(30px) saturate(170%);
    -webkit-backdrop-filter: blur(30px) saturate(170%);
}

.auth-logo {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.4px;
    margin-bottom: 24px;
}

    .auth-logo .ai {
        font-size: 28px;
        color: #26D0CE;
        margin-left: 6px;
    }

.auth-tarjeta h1 {
    margin: 0 0 4px;
    font-size: 23px;
    letter-spacing: -.4px;
}

.auth-sub {
    margin: 0 0 24px;
    color: var(--texto-suave);
    font-size: 13.5px;
}

/* ---------- 13. DIRECTORIO ---------- */
.buscador-row {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    align-items: center;
}

    .buscador-row input,
    .buscador-row select {
        flex: 1;
        min-width: 240px;
        padding: 13px 16px;
        font-size: 15px;
        color: var(--texto);
        background: var(--fondo-input);
        border: 1.5px solid var(--borde-input);
        border-radius: 11px;
        outline: none;
        font-family: inherit;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .buscador-row input:focus,
        .buscador-row select:focus {
            border-color: var(--acento);
            box-shadow: 0 0 0 4px var(--acento-suave);
        }

.pac-fila {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 12px;
    border-bottom: 1.5px solid var(--separador);
}

    .pac-fila:last-child {
        border-bottom: none;
    }

a.pac-fila {
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    transition: background .12s ease;
}

    a.pac-fila:hover {
        background: var(--superficie-2);
    }

.pac-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .3px;
    background: var(--primario);
}

.pac-datos {
    flex: 1;
    min-width: 0;
}

.pac-nombre {
    font-weight: 700;
    font-size: 15px;
}

.pac-detalle {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-top: 3px;
}

.badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 7px;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-pendiente {
    background: var(--aviso-bg);
    color: var(--aviso-texto);
}

.badge-confirmada {
    background: var(--ok-bg);
    color: var(--ok-texto);
}

.badge-asistio {
    background: var(--info-bg);
    color: var(--info-texto);
}

.badge-cancelada {
    background: var(--error-bg);
    color: var(--error-texto);
}

.badge-otro {
    background: var(--separador);
    color: var(--texto-suave);
}

.badge-compartido {
    background: var(--info-bg);
    color: var(--info-texto);
}

.paginacion {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 22px;
}

    .paginacion a,
    .paginacion span {
        padding: 9px 18px;
        border-radius: 10px;
        background: var(--superficie-2);
        border: 1px solid var(--borde);
        color: var(--texto);
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
    }

    .paginacion .actual {
        background: var(--primario);
        border-color: transparent;
        color: #fff;
    }

/* ---------- 14. AGENDA ---------- */
.tarjeta-filtros {
    padding: 18px 22px;
    margin-bottom: 18px;
}

.agenda-filtros {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.filtro {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    flex: 1;
}

    .filtro span {
        font-size: 12px;
        font-weight: 700;
        color: var(--texto-suave);
        letter-spacing: .2px;
    }

    .filtro select {
        width: 100%;
        padding: 12px 16px;
        font-size: 15px;
        color: var(--texto);
        background: var(--fondo-input);
        border: 1.5px solid var(--borde-input);
        border-radius: 11px;
        outline: none;
        font-family: inherit;
    }

        .filtro select:focus {
            border-color: var(--acento);
            box-shadow: 0 0 0 4px var(--acento-suave);
        }

.agenda-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}

.agenda-tab {
    text-decoration: none;
    font-weight: 700;
    font-size: 13.5px;
    padding: 11px 24px;
    border-radius: 11px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    color: var(--texto);
    transition: border-color .14s ease, background .14s ease;
}

    .agenda-tab:hover {
        border-color: var(--acento);
    }

    .agenda-tab.activo {
        background: var(--primario);
        border-color: transparent;
        color: #fff;
        box-shadow: var(--sombra-1);
    }

.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.cal-flecha {
    text-decoration: none;
    font-size: 20px;
    font-weight: 800;
    color: var(--texto);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    transition: border-color .14s ease;
}

    .cal-flecha:hover {
        border-color: var(--acento);
    }

.cal-titulo {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.cal-cab {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

    .cal-cab span {
        text-align: center;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--texto-tenue);
        letter-spacing: .4px;
        text-transform: uppercase;
    }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal-dia {
    text-decoration: none;
    color: var(--texto);
    background: var(--superficie-2);
    border: 1.5px solid transparent;
    border-radius: 11px;
    min-height: 72px;
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color .14s ease, background .14s ease;
}

    .cal-dia:hover {
        border-color: var(--acento);
        background: var(--superficie);
    }

    .cal-dia.fuera {
        opacity: .38;
    }

    .cal-dia.hoy {
        border-color: var(--acento);
        background: var(--superficie);
        box-shadow: 0 0 0 3px var(--acento-suave);
    }

.cal-num {
    font-size: 13.5px;
    font-weight: 700;
}

.cal-puntos {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

    .cal-puntos i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
    }

.sem-dia {
    border-bottom: 1.5px solid var(--separador);
    padding: 12px 0;
}

    .sem-dia:last-child {
        border-bottom: none;
    }

.sem-cab {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primario);
    text-transform: capitalize;
    letter-spacing: .2px;
    margin-bottom: 8px;
}

:root[data-theme="oscuro"] .sem-cab {
    color: var(--acento);
}

.sem-cab.hoy {
    color: var(--acento);
}

.cita {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 6px;
    border-bottom: 1.5px solid var(--separador);
}

    .cita:last-child {
        border-bottom: none;
    }

.cita-hora {
    font-size: 15.5px;
    font-weight: 800;
    min-width: 56px;
    font-variant-numeric: tabular-nums;
}

.cita-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .3px;
    flex-shrink: 0;
}

.cita-datos {
    flex: 1;
    min-width: 0;
}

.cita-nombre {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cita-detalle {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cita-compacta {
    padding: 9px 4px;
    border-bottom: none;
}

.cita-bloque {
    border-bottom: 1.5px solid var(--separador);
    padding: 6px 0 10px;
}

    .cita-bloque:last-child {
        border-bottom: none;
    }

    .cita-bloque .cita {
        border-bottom: none;
    }

    .cita-bloque.ofuscada {
        opacity: .68;
    }

.cita-nota {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-top: 5px;
    font-style: italic;
}

.cita-acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
    padding-left: 72px;
}

.acc-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}

    .acc-form select {
        padding: 9px 14px;
        font-size: 13px;
        color: var(--texto);
        background: var(--fondo-input);
        border: 1.5px solid var(--borde-input);
        border-radius: 10px;
        outline: none;
        font-family: inherit;
    }

.cita-acciones .btn-secundario {
    padding: 9px 18px;
    font-size: 12.5px;
}

.acciones-form {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 22px;
    flex-wrap: wrap;
}

.agenda-vacia {
    text-align: center;
    color: var(--texto-suave);
    font-style: italic;
    padding: 26px 0 8px;
    font-size: 14px;
}

/* ---------- 15. HISTORIA CLINICA ---------- */
.hist-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: linear-gradient(120deg, #14215E 0%, #1A2980 52%, #1B93A6 100%);
    color: #fff;
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 16px 40px rgba(16, 30, 70, .24);
}

.hist-banner-izq {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.hist-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 17px;
    color: #14215E;
    background: rgba(255, 255, 255, .92);
}

.hist-etiqueta {
    font-size: 10.5px;
    letter-spacing: .8px;
    text-transform: uppercase;
    opacity: .78;
}

.hist-nombre {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.2;
}

.hist-sub {
    font-size: 12.5px;
    opacity: .88;
    margin-top: 3px;
}

.hist-banner-der {
    text-align: right;
    min-width: 0;
}

.hist-etiqueta-alergia {
    font-size: 10.5px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #FFD79A;
    font-weight: 700;
}

.hist-alergia {
    font-size: 15px;
    font-weight: 800;
    color: #FFD79A;
    overflow-wrap: anywhere;
}

.cons-fila {
    display: block;
    text-decoration: none;
    color: var(--texto);
    padding: 14px 12px;
    border-bottom: 1.5px solid var(--separador);
    border-radius: 12px;
    transition: background .12s ease;
}

    .cons-fila:hover {
        background: var(--superficie-2);
    }

    .cons-fila:last-child {
        border-bottom: none;
    }

.cons-fecha {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primario);
    letter-spacing: .2px;
}

:root[data-theme="oscuro"] .cons-fecha {
    color: var(--acento);
}

.cons-motivo {
    font-size: 14.5px;
    font-weight: 600;
    margin-top: 4px;
}

.cons-diag {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-top: 3px;
}

.det-campo {
    margin-bottom: 16px;
}

.det-etiqueta {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 5px;
}

.det-texto {
    font-size: 15px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.det-destacado {
    font-weight: 700;
    color: var(--primario);
}

:root[data-theme="oscuro"] .det-destacado {
    color: var(--acento);
}

.vitales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
    gap: 12px;
}

.vital {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 13px;
    padding: 12px 14px;
}

    .vital span {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: var(--texto-tenue);
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 4px;
    }

    .vital b {
        font-size: 16px;
        font-variant-numeric: tabular-nums;
    }

.centrado-acciones {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.acciones-clinicas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* ---------- 16. NUEVA CONSULTA ---------- */
.bloque-paciente {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 15px;
    padding: 18px;
    margin-bottom: 22px;
}

.gen-diag {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 15px;
    padding: 16px;
    margin-bottom: 20px;
}

    .gen-diag input[type="text"],
    .gen-diag textarea {
        width: 100%;
        padding: 13px 16px;
        font-size: 14.5px;
        color: var(--texto);
        background: var(--superficie);
        border: 1.5px solid var(--borde-input);
        border-radius: 11px;
        outline: none;
        font-family: inherit;
        resize: vertical;
    }

    .gen-diag textarea {
        font-weight: 700;
    }

.gen-diag-botones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0;
}

    .gen-diag-botones button {
        border: 1px solid var(--borde);
        cursor: pointer;
        font-weight: 700;
        font-size: 12.5px;
        padding: 10px 20px;
        border-radius: 10px;
        color: var(--texto);
        background: var(--superficie);
        transition: border-color .14s ease;
    }

        .gen-diag-botones button:hover {
            border-color: var(--acento);
        }

        .gen-diag-botones button.peligro {
            color: var(--error-texto);
            border-color: rgba(220, 60, 60, .30);
            background: var(--error-bg);
        }

.check-cita {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 10px;
}

    .check-cita input[type="checkbox"] {
        width: 19px;
        height: 19px;
        accent-color: var(--acento);
    }

    .check-cita label {
        font-weight: 700;
        font-size: 14px;
    }

/* ---------- 17. PARACLINICOS ---------- */
.modo-radio {
    display: flex;
    gap: 24px;
    align-items: center;
    margin: 6px 0 20px;
    flex-wrap: wrap;
}

    .modo-radio label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
    }

    .modo-radio input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--acento);
    }

.perfil-bloque {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 15px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.perfil-fila {
    display: grid;
    grid-template-columns: 1fr 130px 90px;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--separador);
}

    .perfil-fila:last-child {
        border-bottom: none;
    }

.perfil-nombre {
    font-size: 13.5px;
    font-weight: 600;
}

.perfil-fila input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--texto);
    background: var(--superficie);
    border: 1.5px solid var(--borde-input);
    border-radius: 10px;
    outline: none;
    font-family: inherit;
}

.perfil-unidad {
    font-size: 12.5px;
    color: var(--texto-suave);
}

.tabla-lab {
    width: 100%;
}

.tabla-lab-cab {
    display: grid;
    grid-template-columns: 130px 1fr 170px;
    gap: 10px;
    background: var(--primario);
    color: #fff;
    border-radius: 11px;
    padding: 12px 16px;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.tabla-lab-fila {
    display: grid;
    grid-template-columns: 130px 1fr 170px;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1.5px solid var(--separador);
    font-size: 14px;
    align-items: center;
}

    .tabla-lab-fila:last-child {
        border-bottom: none;
    }

.lab-examen {
    font-weight: 700;
}

.lab-valor {
    font-weight: 800;
    color: var(--primario);
    font-variant-numeric: tabular-nums;
}

:root[data-theme="oscuro"] .lab-valor {
    color: var(--acento);
}

.grafica-caja {
    margin-top: 18px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 15px;
    padding: 12px;
}

.grafica-svg {
    width: 100%;
    height: auto;
    display: block;
}

.grafica-vacia {
    text-align: center;
    color: var(--texto-suave);
    font-style: italic;
    padding: 30px 0;
}

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width: 780px) {
    .barra-inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px;
    }

    .nav-enlaces {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .nav-enlace {
        padding: 8px 15px;
        white-space: nowrap;
    }

    .contenido {
        padding: 24px 16px 60px;
    }

    .saludo h1 {
        font-size: 25px;
        letter-spacing: -.5px;
    }

    .numero-grande {
        font-size: 34px;
    }
}

@media (max-width: 640px) {
    .grid-resumen {
        grid-template-columns: 1fr;
    }

    .tabla-lab-cab {
        display: none;
    }

    .tabla-lab-fila {
        grid-template-columns: 1fr;
        gap: 4px;
        border: 1px solid var(--borde);
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .perfil-fila {
        grid-template-columns: 1fr 100px;
    }

    .perfil-unidad {
        grid-column: 1 / -1;
    }

    .cita-acciones {
        padding-left: 0;
    }
}
/* ---------- 19. SELECTOR DE UMBRAL EN LA TARJETA ---------- */
.resumen-form {
    margin: 0;
}

.resumen-pie select {
    border: 1px solid var(--borde);
    background: var(--superficie-2);
    color: var(--primario);
    font-weight: 800;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 7px;
    outline: none;
    margin: 0 2px;
    transition: border-color .14s ease;
}

    .resumen-pie select:hover {
        border-color: var(--acento);
    }

:root[data-theme="oscuro"] .resumen-pie select {
    color: var(--acento);
}

/* ---------- 20. VACUNAS PAI ---------- */
.vac-lista {
    display: flex;
    flex-direction: column;
}

.vac-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1.5px solid var(--separador);
    flex-wrap: wrap;
}

    .vac-fila:last-child {
        border-bottom: none;
    }

.vac-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 7px;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 84px;
    text-align: center;
}

.vac-badge-aplicada {
    background: var(--ok-bg);
    color: var(--ok-texto);
}

.vac-badge-pendiente {
    background: var(--aviso-bg);
    color: var(--aviso-texto);
}

.vac-badge-programada {
    background: var(--info-bg);
    color: var(--info-texto);
}

.vac-badge-opcional {
    background: var(--separador);
    color: var(--texto-suave);
}

.vac-badge-anual {
    background: var(--info-bg);
    color: var(--info-texto);
}

.vac-info {
    flex: 1;
    min-width: 200px;
}

.vac-titulo {
    font-size: 14.5px;
    font-weight: 700;
}

.vac-estado {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-top: 3px;
}

.vac-acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

.vac-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

    .vac-form input[type="date"] {
        padding: 9px 12px;
        font-size: 13px;
        color: var(--texto);
        background: var(--fondo-input);
        border: 1.5px solid var(--borde-input);
        border-radius: 10px;
        outline: none;
        font-family: inherit;
    }

        .vac-form input[type="date"]:focus {
            border-color: var(--acento);
            box-shadow: 0 0 0 4px var(--acento-suave);
        }

    .vac-form .btn-secundario {
        padding: 9px 16px;
        font-size: 12.5px;
    }

.btn-peligro {
    color: var(--error-texto);
    border-color: rgba(220, 60, 60, .28);
    background: var(--error-bg);
}

    .btn-peligro:hover {
        border-color: var(--error-texto);
        background: var(--error-bg);
    }

@media (max-width: 640px) {
    .vac-fila {
        align-items: flex-start;
    }

    .vac-acciones {
        width: 100%;
    }

    .vac-form {
        flex-wrap: wrap;
    }
}

/* ---------- 21. NAVEGACION MOVIL (la Web es para telefonos) ---------- */
.nav-inferior {
    display: none;
}

@media (max-width: 780px) {
    /* La barra de enlaces del escritorio desaparece: en el telefono
       la navegacion vive abajo, al alcance del pulgar. */
    .nav-enlaces {
        display: none;
    }

    .barra-inner {
        flex-wrap: nowrap;
        padding: 10px 16px;
        gap: 10px;
    }

    .marca {
        font-size: 18px;
    }

        .marca .ai {
            font-size: 18px;
        }

    .btn-salir {
        padding: 8px 14px;
        font-size: 12.5px;
    }

    .btn-tema {
        width: 36px;
        height: 36px;
    }

    .nav-inferior {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        background: var(--superficie);
        border-top: 1px solid var(--borde);
        box-shadow: 0 -6px 22px rgba(16, 30, 70, .10);
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
        backdrop-filter: blur(22px) saturate(165%);
        -webkit-backdrop-filter: blur(22px) saturate(165%);
    }

    .nav-inf-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: var(--texto-suave);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .2px;
        padding: 7px 0;
        transition: color .14s ease;
    }

        .nav-inf-item svg {
            width: 22px;
            height: 22px;
        }

        .nav-inf-item.activo {
            color: var(--primario);
        }

    :root[data-theme="oscuro"] .nav-inf-item.activo {
        color: var(--acento);
    }

    /* Espacio para que la barra inferior no tape el contenido */
    .contenido {
        padding-bottom: 96px;
    }

    /* El dashboard se queda en 2x2 tambien en el telefono:
       cuatro tarjetas simples caben bien y evitan un scroll largo. */
    .grid-resumen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .tarjeta.resumen {
        padding: 16px;
        min-height: 112px;
    }

    .numero-grande {
        font-size: 30px;
        letter-spacing: -1px;
    }

    .resumen-etiqueta {
        font-size: 10.5px;
    }

    .resumen-pie {
        font-size: 11.5px;
    }
}

/* ---------- 22. VACUNAS: FORMULARIO LIBRE ---------- */
.vac-agregar {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1.5px solid var(--separador);
}

.vac-form-libre {
    display: block;
}

/* ---------- 23. CURVAS OMS ---------- */
.oms-botones {
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.oms-leyenda {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 12.5px;
    color: var(--texto-suave);
}

    .oms-leyenda span {
        display: flex;
        align-items: center;
        gap: 7px;
    }

.oms-color {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}

.oms-nota {
    margin: 14px 0 0;
}

@media (max-width: 640px) {
    .oms-botones .agenda-tab {
        flex: 1;
        min-width: 44%;
        text-align: center;
        padding: 10px 12px;
        font-size: 12.5px;
    }

    .oms-leyenda {
        gap: 10px;
        font-size: 11.5px;
    }
}

/* ---------- 24. MI PERFIL ---------- */
.recurso-caja {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 18px;
    margin: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.recurso-img {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
    display: block;
}

.acciones-form input[type="file"] {
    flex: 1;
    min-width: 200px;
    font-size: 13.5px;
    color: var(--texto-suave);
    padding: 10px 12px;
    background: var(--fondo-input);
    border: 1.5px solid var(--borde-input);
    border-radius: 11px;
    font-family: inherit;
}

@media (max-width: 640px) {
    .acciones-form input[type="file"] {
        width: 100%;
    }

    .acciones-form .btn-primario {
        width: 100%;
    }
}

/* ---------- 25. PERFIL: SELECTORES ---------- */
.campo select {
    width: 100%;
    padding: 13px 16px;
    font-size: 15px;
    color: var(--texto);
    background: var(--fondo-input);
    border: 1.5px solid var(--borde-input);
    border-radius: 11px;
    outline: none;
    font-family: inherit;
}

    .campo select:focus {
        border-color: var(--acento);
        box-shadow: 0 0 0 4px var(--acento-suave);
    }

/* ---------- 26. RECIPE ---------- */
.rec-item {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.rec-item-cab {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.rec-tipo {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--acento);
    background: var(--acento-suave);
    padding: 4px 10px;
    border-radius: 7px;
    flex-shrink: 0;
}

.rec-desc {
    font-size: 14.5px;
    font-weight: 700;
}

.rec-item input[type="text"] {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    color: var(--texto);
    background: var(--superficie);
    border: 1.5px solid var(--borde-input);
    border-radius: 11px;
    outline: none;
    font-family: inherit;
}

    .rec-item input[type="text"]:focus {
        border-color: var(--acento);
        box-shadow: 0 0 0 4px var(--acento-suave);
    }

/* ---------- 27. SELECTOR DE FORMATO DE IMPRESIÓN ---------- */
.formato-impresion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 14px 0 20px;
}

.formato-opcion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--superficie-2);
    border: 1.5px solid var(--borde-input);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}

    .formato-opcion:hover {
        border-color: var(--acento);
    }

    .formato-opcion input[type="radio"] {
        width: 20px;
        height: 20px;
        accent-color: var(--acento);
        margin-top: 2px;
        flex-shrink: 0;
    }

    .formato-opcion span {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .formato-opcion b {
        font-size: 14.5px;
        font-weight: 800;
    }

    .formato-opcion small {
        font-size: 12.5px;
        color: var(--texto-suave);
        line-height: 1.45;
    }

    /* Resalta la opción elegida */
    .formato-opcion:has(input[type="radio"]:checked) {
        border-color: var(--acento);
        background: var(--acento-suave);
    }

/* ---------- 28. CONTRASTE DE DESPLEGABLES (arreglo global) ---------- */
/* Los navegadores pintan la lista desplegable con su propio estilo,
   ignorando el tema. Forzamos colores legibles siempre. */
select option {
    background: #FFFFFF;
    color: #0E1A3C;
}

/* ---------- 29. RECIPE COMPACTO ---------- */
.rec-lista {
    margin-bottom: 18px;
}

.rec-item {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.rec-desc {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 7px;
}

.rec-item input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--texto);
    background: var(--superficie);
    border: 1.5px solid var(--borde-input);
    border-radius: 10px;
    outline: none;
    font-family: inherit;
}

    .rec-item input[type="text"]:focus {
        border-color: var(--acento);
        box-shadow: 0 0 0 4px var(--acento-suave);
    }

/* ---------- 30. FORMATO DE IMPRESIÓN COMPACTO ---------- */
.formato-impresion {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 20px;
}

.formato-opcion {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    background: var(--superficie-2);
    border: 1.5px solid var(--borde-input);
    border-radius: 11px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    transition: border-color .14s ease, background .14s ease;
}

    .formato-opcion:hover {
        border-color: var(--acento);
    }

    .formato-opcion input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--acento);
        flex-shrink: 0;
    }

    .formato-opcion:has(input[type="radio"]:checked) {
        border-color: var(--acento);
        background: var(--acento-suave);
    }

/* ---------- 31. CUADRÍCULA DE ACCIONES CLÍNICAS ---------- */
.acciones-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.accion-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 6px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 14px;
    text-decoration: none;
    color: var(--texto);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    transition: border-color .14s ease, background .14s ease;
}

    .accion-card:hover {
        border-color: var(--acento);
    }

    .accion-card svg {
        width: 24px;
        height: 24px;
        color: var(--primario);
        flex-shrink: 0;
    }

:root[data-theme="oscuro"] .accion-card svg {
    color: var(--acento);
}

.accion-card.destacada {
    background: var(--primario);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--sombra-1);
}

    .accion-card.destacada svg {
        color: #fff;
    }

@media (max-width: 420px) {
    .acciones-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- 32. INFORME: SECCIONES ---------- */
.inf-secciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.inf-seccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 12px;
    flex-wrap: wrap;
}

.inf-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

    .inf-check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--acento);
        flex-shrink: 0;
    }

/* ---------- 33. DOCUMENTOS EMITIDOS ---------- */
.emi-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1.5px solid var(--separador);
    flex-wrap: wrap;
}

    .emi-fila:last-child {
        border-bottom: none;
    }

.emi-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 7px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 92px;
    text-align: center;
}

.emi-recipe {
    background: var(--acento-suave);
    color: var(--primario);
}

:root[data-theme="oscuro"] .emi-recipe {
    color: var(--acento);
}

.emi-reposo {
    background: var(--aviso-bg);
    color: var(--aviso-texto);
}

.emi-constancia {
    background: var(--info-bg);
    color: var(--info-texto);
}

.emi-informe {
    background: var(--ok-bg);
    color: var(--ok-texto);
}

.emi-epicrisis {
    background: var(--separador);
    color: var(--texto-suave);
}

.emi-otro {
    background: var(--separador);
    color: var(--texto-suave);
}

.emi-datos {
    flex: 1;
    min-width: 180px;
}

.emi-nombre {
    font-size: 14.5px;
    font-weight: 700;
}

.emi-detalle {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-top: 3px;
}

.emi-codigo {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primario);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

:root[data-theme="oscuro"] .emi-codigo {
    color: var(--acento);
}

.emi-acciones {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

    .emi-acciones form {
        margin: 0;
    }

    .emi-acciones .btn-secundario,
    .emi-acciones .btn-primario {
        padding: 9px 18px;
        font-size: 12.5px;
    }

.emi-aviso {
    font-size: 11.5px;
    color: var(--texto-tenue);
    font-style: italic;
}

@media (max-width: 640px) {
    .emi-fila {
        align-items: flex-start;
    }

    .emi-acciones {
        width: 100%;
    }
}
/* ---------- 34. COORDENADAS DE IMPRESIÓN ---------- */
.coord-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: 0 14px;
    margin-bottom: 8px;
}

    .coord-grid .campo {
        margin-bottom: 12px;
    }

    .coord-grid label {
        font-size: 11.5px;
    }

    .coord-grid input {
        padding: 10px 12px;
        font-size: 14px;
    }
/* ---------- 35. PAGINA PUBLICA DE VERIFICACION ---------- */
.verif-caja {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.verif-marca {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.4px;
    text-align: center;
    margin-bottom: 28px;
    color: var(--primario);
}

:root[data-theme="oscuro"] .verif-marca {
    color: var(--acento);
}

.verif-marca .ai {
    color: #26D0CE;
    margin-left: 5px;
}

.verif-titulo {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    text-align: center;
    margin: 0 0 10px;
}

.verif-sub {
    font-size: 14.5px;
    color: var(--texto-suave);
    text-align: center;
    line-height: 1.5;
    margin: 0 0 26px;
}

.verif-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .verif-form input {
        width: 100%;
        padding: 16px 18px;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 3px;
        color: var(--texto);
        background: var(--fondo-input);
        border: 1.5px solid var(--borde-input);
        border-radius: 14px;
        outline: none;
        font-family: inherit;
        font-variant-numeric: tabular-nums;
    }

        .verif-form input:focus {
            border-color: var(--acento);
            box-shadow: 0 0 0 4px var(--acento-suave);
        }

.verif-ok {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: var(--ok-bg);
    color: var(--ok-texto);
    border-radius: 16px;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 22px;
}

    .verif-ok svg {
        width: 26px;
        height: 26px;
        flex-shrink: 0;
    }

.verif-ficha {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 18px;
    box-shadow: var(--sombra-2);
    padding: 20px 22px;
    margin-bottom: 18px;
}

.verif-campo {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--separador);
    flex-wrap: wrap;
}

    .verif-campo:last-child {
        border-bottom: none;
    }

    .verif-campo span {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--texto-suave);
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .verif-campo b {
        font-size: 14.5px;
        text-align: right;
        overflow-wrap: anywhere;
    }

.verif-resumen {
    background: var(--acento-suave);
    color: var(--primario);
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 18px;
}

:root[data-theme="oscuro"] .verif-resumen {
    color: var(--acento);
}

.verif-seccion {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 12px;
}

.verif-detalle {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 18px;
    box-shadow: var(--sombra-2);
    padding: 18px 22px;
    margin-bottom: 18px;
}

.verif-linea {
    padding: 10px 0;
    border-bottom: 1px solid var(--separador);
}

    .verif-linea:last-child {
        border-bottom: none;
    }

    .verif-linea span {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--texto-tenue);
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .verif-linea p {
        margin: 5px 0 0;
        font-size: 14.5px;
        line-height: 1.5;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

.verif-nota {
    font-size: 12.5px;
    color: var(--texto-suave);
    line-height: 1.55;
    text-align: center;
    margin: 0 0 22px;
}
/* ---------- 36. CLEO (botón flotante + panel) ---------- */
/* El botón de CLEO vive en el lugar más visible de la app, en
   teléfono y en PC. Cuando llegue el chat, el botón no cambia:
   solo cambia lo que hay dentro del panel. */

.fab-cle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 25;
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 19px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #1A2980 0%, #26D0CE 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 12px 30px rgba(26, 41, 128, .40);
    transition: transform .14s ease, box-shadow .14s ease;
}

    .fab-cle:hover {
        transform: translateY(-2px);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .30) inset, 0 16px 36px rgba(26, 41, 128, .46);
    }

    .fab-cle:active {
        transform: scale(.94);
    }

    .fab-cle svg {
        width: 27px;
        height: 27px;
    }

/* ---------- Fondo oscuro ---------- */
.cleo-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(8, 16, 50, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

    .cleo-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

/* ---------- Panel de CLEO ---------- */
.cleo-panel {
    position: fixed;
    z-index: 31;
    background: var(--superficie);
    box-shadow: 0 -12px 40px rgba(8, 16, 50, .28);
    padding: 10px 16px 22px;
    transform: translateY(110%);
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    left: 0;
    right: 0;
    bottom: 0;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    max-height: 82vh;
    overflow-y: auto;
}

    .cleo-panel.visible {
        transform: translateY(0);
    }

.cleo-asita {
    width: 42px;
    height: 4px;
    border-radius: 4px;
    background: var(--borde-fuerte);
    margin: 4px auto 16px;
}

.cleo-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cleo-identidad {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cleo-avatar {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #1A2980 0%, #26D0CE 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset;
}

    .cleo-avatar svg {
        width: 24px;
        height: 24px;
    }

.cleo-nombre {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.1;
}

.cleo-rol {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-top: 2px;
}

.cleo-cerrar {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 11px;
    background: var(--superficie-2);
    color: var(--texto-suave);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .cleo-cerrar svg {
        width: 18px;
        height: 18px;
    }

.cleo-aviso {
    background: var(--acento-suave);
    color: var(--primario);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 16px;
}

:root[data-theme="oscuro"] .cleo-aviso {
    color: var(--acento);
}

.cleo-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cleo-accion {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 16px;
    text-decoration: none;
    color: var(--texto);
    transition: border-color .14s ease, background .14s ease;
}

    .cleo-accion:hover,
    .cleo-accion:active {
        border-color: var(--acento);
        background: var(--acento-suave);
    }

.cleo-accion-icono {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--primario);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

:root[data-theme="oscuro"] .cleo-accion-icono {
    background: var(--acento);
    color: #0E1A3C;
}

.cleo-accion-icono svg {
    width: 22px;
    height: 22px;
}

.cleo-accion-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

    .cleo-accion-texto b {
        font-size: 14.5px;
        font-weight: 800;
    }

    .cleo-accion-texto small {
        font-size: 12px;
        color: var(--texto-suave);
        line-height: 1.35;
    }

/* ---------- Ajustes en teléfono ---------- */
@media (max-width: 780px) {
    /* El botón de CLEO sube para no chocar con la barra inferior */
    .fab-cle {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        right: 18px;
        width: 56px;
        height: 56px;
    }
}

/* ---------- Ajustes en PC: el panel se centra como modal ---------- */
@media (min-width: 781px) {
    .cleo-panel {
        left: 50%;
        right: auto;
        bottom: 50%;
        transform: translate(-50%, 50%) scale(.94);
        opacity: 0;
        pointer-events: none;
        width: 100%;
        max-width: 460px;
        border-radius: 22px;
        padding: 20px 22px 22px;
        max-height: 80vh;
        transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
    }

        .cleo-panel.visible {
            transform: translate(-50%, 50%) scale(1);
            opacity: 1;
            pointer-events: auto;
        }

    .cleo-asita {
        display: none;
    }
}
/* ---------- 37. REGISTRO Y TÉRMINOS ---------- */
.auth-pie {
    margin-top: 22px;
    text-align: center;
    font-size: 13.5px;
}

.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 20px;
    cursor: pointer;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--texto-suave);
}

    .auth-check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--acento);
        flex-shrink: 0;
        margin-top: 2px;
    }

    .auth-check a {
        color: var(--primario);
        font-weight: 700;
        text-decoration: none;
    }

:root[data-theme="oscuro"] .auth-check a {
    color: var(--acento);
}

.terminos-caja {
    max-width: 720px;
}

.terminos-texto {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--texto-suave);
}

    .terminos-texto h3 {
        font-size: 14.5px;
        font-weight: 800;
        color: var(--primario);
        margin: 20px 0 8px;
    }

:root[data-theme="oscuro"] .terminos-texto h3 {
    color: var(--acento);
}

.terminos-texto p {
    margin: 0 0 10px;
}

.terminos-cierre {
    font-weight: 700;
    color: var(--texto);
    margin-top: 18px !important;
}

.auth-tarjeta select {
    width: 100%;
    padding: 13px 16px;
    font-size: 15px;
    color: var(--texto);
    background: var(--fondo-input);
    border: 1.5px solid var(--borde-input);
    border-radius: 11px;
    outline: none;
    font-family: inherit;
}

    .auth-tarjeta select:focus {
        border-color: var(--acento);
        box-shadow: 0 0 0 4px var(--acento-suave);
    }
/* ---------- 38. RECUPERAR CONTRASEÑA ---------- */
.auth-pie-suave {
    margin-top: 12px;
    font-size: 13px;
    color: var(--texto-suave);
}

.campo-codigo {
    text-align: center;
    font-size: 22px !important;
    font-weight: 800;
    letter-spacing: 8px;
    font-variant-numeric: tabular-nums;
}
/* ---------- 39. SECRETARIAS ---------- */
.sec-encontrada {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--acento-suave);
    border: 1px solid var(--acento);
    border-radius: 14px;
    margin: 16px 0;
}

.sec-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    background: var(--primario);
}

:root[data-theme="oscuro"] .sec-avatar {
    background: var(--acento);
    color: #0E1A3C;
}

.sec-datos {
    flex: 1;
    min-width: 0;
}

.sec-nombre {
    font-size: 15px;
    font-weight: 800;
}

.sec-detalle {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-top: 3px;
}

.sec-subtitulo {
    font-size: 14px;
    font-weight: 800;
    margin: 18px 0 10px;
}

.sec-sedes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.sec-sede {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--superficie-2);
    border: 1.5px solid var(--borde-input);
    border-radius: 12px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color .14s ease, background .14s ease;
    flex-wrap: wrap;
}

    .sec-sede:hover {
        border-color: var(--acento);
    }

    .sec-sede input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--acento);
        flex-shrink: 0;
    }

    .sec-sede.ya {
        opacity: .6;
        cursor: not-allowed;
        background: var(--separador);
    }

    .sec-sede small {
        font-size: 11px;
        color: var(--texto-suave);
        font-weight: 700;
        width: 100%;
        margin-left: 28px;
    }

.sec-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1.5px solid var(--separador);
    flex-wrap: wrap;
}

    .sec-fila:last-child {
        border-bottom: none;
    }

    .sec-fila form {
        margin: 0;
        flex-shrink: 0;
    }

    .sec-fila .btn-secundario {
        padding: 9px 18px;
        font-size: 12.5px;
    }
/* ---------- 40. PANEL DE SECRETARÍA ---------- */
/* En teléfono, la barra inferior de la secretaria tiene 3 items
   (sin Perfil): se reparten el ancho por igual. */
@media (max-width: 780px) {
    .nav-inferior .nav-inf-item {
        flex: 1;
    }
}
/* ---------- 41. FINANZAS ---------- */
.fin-tabs {
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.fin-subtitulo {
    font-size: 14px;
    font-weight: 800;
    margin: 22px 0 12px;
    padding-top: 18px;
    border-top: 1.5px solid var(--separador);
}

.fin-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 4px;
    border-bottom: 1.5px solid var(--separador);
    flex-wrap: wrap;
}

    .fin-fila:last-child {
        border-bottom: none;
    }

    .fin-fila form {
        margin: 0;
        flex-shrink: 0;
    }

    .fin-fila .btn-secundario {
        padding: 9px 18px;
        font-size: 12.5px;
    }

.fin-datos {
    flex: 1;
    min-width: 160px;
}

.fin-nombre {
    font-size: 14.5px;
    font-weight: 700;
}

.fin-detalle {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-top: 3px;
}

.fin-sede {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

    .fin-sede .fin-nombre {
        font-size: 15px;
        font-weight: 800;
    }

    .fin-sede .fin-detalle {
        margin-bottom: 14px;
    }

.fin-sede-form .acciones-form {
    margin-top: 4px;
}

@media (max-width: 780px) {
    /* Con 5 botones en la barra inferior, se ajusta el tamaño */
    .nav-inf-item {
        font-size: 9.5px;
        padding: 6px 0;
    }

        .nav-inf-item svg {
            width: 20px;
            height: 20px;
        }

    .fin-tabs .agenda-tab {
        flex: 1;
        min-width: 30%;
        text-align: center;
        padding: 10px 8px;
        font-size: 12px;
    }
}
/* ---------- 42. MOVIMIENTOS (cobros, gastos, caja) ---------- */
.mov-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1.5px solid var(--separador);
    flex-wrap: wrap;
}

    .mov-fila:last-child {
        border-bottom: none;
    }

    .mov-fila form {
        margin: 0;
        flex-shrink: 0;
    }

    .mov-fila .btn-secundario {
        padding: 9px 16px;
        font-size: 12.5px;
    }

.mov-datos {
    flex: 1;
    min-width: 170px;
}

.mov-nombre {
    font-size: 14.5px;
    font-weight: 700;
}

.mov-detalle {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-top: 3px;
}

.mov-nota {
    font-size: 11.5px;
    color: var(--texto-tenue);
    margin-top: 4px;
    font-style: italic;
}

.mov-pendiente {
    color: var(--aviso-texto);
    font-style: normal;
    font-weight: 700;
}

.mov-montos {
    text-align: right;
    flex-shrink: 0;
}

.mov-bruto {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mov-gasto {
    color: var(--error-texto);
}

.mov-divisa {
    font-size: 12px;
    color: var(--texto-suave);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.mov-neto {
    font-size: 11.5px;
    color: var(--texto-tenue);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Caja del día ---------- */
.caja-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 12px;
    margin: 18px 0 8px;
}

.caja-caja {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 15px;
    padding: 14px 16px;
}

    .caja-caja span {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: var(--texto-tenue);
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 6px;
    }

    .caja-caja b {
        display: block;
        font-size: 22px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }

    .caja-caja small {
        display: block;
        font-size: 11.5px;
        color: var(--texto-suave);
        margin-top: 5px;
    }

.caja-gasto {
    color: var(--error-texto);
}

.caja-final {
    background: var(--acento-suave);
    border-color: var(--acento);
}

:root[data-theme="oscuro"] .caja-final {
    background: rgba(79, 216, 214, .10);
}
/* ---------- 43. TASA DEL DÍA Y AJUSTES ---------- */
/* Separa la tarjeta de finanzas de la de agenda */
.grid-resumen {
    margin-bottom: 22px;
}

.tarjeta + .tarjeta {
    margin-top: 18px;
}

/* Las tarjetas DENTRO de una cuadricula no llevan ese margen:
   si no, la 2a y 4a bajan y la cuadricula se ve descuadrada. */
.grid-resumen > .tarjeta {
    margin-top: 0;
}

/* Separacion entre una tarjeta y una cuadricula que venga despues
   (la agenda seguida de las tarjetas de finanzas). */
.tarjeta + .grid-resumen {
    margin-top: 18px;
}

/* Formulario de la tasa dentro de la tarjeta del dashboard */
.tasa-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

    .tasa-form input {
        flex: 1;
        min-width: 0;
        padding: 9px 12px;
        font-size: 14px;
        color: var(--texto);
        background: var(--fondo-input);
        border: 1.5px solid var(--borde-input);
        border-radius: 10px;
        outline: none;
        font-family: inherit;
        font-variant-numeric: tabular-nums;
    }

        .tasa-form input:focus {
            border-color: var(--acento);
            box-shadow: 0 0 0 4px var(--acento-suave);
        }

    .tasa-form .btn-secundario {
        padding: 9px 16px;
        font-size: 12.5px;
        flex-shrink: 0;
    }

/* Aviso de la tasa en Movimientos */
.tarjeta-tasa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.tasa-etiqueta {
    font-size: 12px;
    font-weight: 700;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.tasa-valor {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* ---------- 44. REPORTES ---------- */
.rep-fila {
    display: grid;
    grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 2fr) minmax(90px, auto);
    gap: 14px;
    align-items: center;
    padding: 12px 4px;
    border-bottom: 1.5px solid var(--separador);
}

    .rep-fila:last-child {
        border-bottom: none;
    }

.rep-datos {
    min-width: 0;
}

.rep-nombre {
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rep-detalle {
    font-size: 11.5px;
    color: var(--texto-suave);
    margin-top: 3px;
}

.rep-barra {
    height: 8px;
    background: var(--separador);
    border-radius: 999px;
    overflow: hidden;
}

.rep-barra-relleno {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1A2980, #26D0CE);
    min-width: 4px;
    transition: width .3s ease;
}

.rep-montos {
    text-align: right;
    flex-shrink: 0;
}

.rep-monto {
    font-size: 14.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.rep-porcentaje {
    font-size: 11.5px;
    color: var(--texto-suave);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .rep-fila {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }

    .rep-barra {
        grid-column: 1 / -1;
        order: 3;
    }
}
/* ---------- 45. REPORTES PREMIUM ---------- */
.rep-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

    .rep-cab .seccion-titulo {
        margin-bottom: 4px;
    }

.rep-toggle {
    display: flex;
    gap: 4px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 11px;
    padding: 3px;
    flex-shrink: 0;
}

.rep-toggle-op {
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--texto-suave);
    padding: 7px 14px;
    border-radius: 8px;
    transition: background .14s ease, color .14s ease;
}

    .rep-toggle-op.activo {
        background: var(--primario);
        color: #fff;
    }

:root[data-theme="oscuro"] .rep-toggle-op.activo {
    background: var(--acento);
    color: #0E1A3C;
}

.rep-variacion {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
}

    .rep-variacion.positiva {
        background: var(--ok-bg);
        color: var(--ok-texto);
    }

    .rep-variacion.negativa {
        background: var(--error-bg);
        color: var(--error-texto);
    }

/* ---------- Donas ---------- */
.rep-donas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 18px;
}

.dona-caja {
    display: flex;
    justify-content: center;
    padding: 10px 0 18px;
}

.dona-svg {
    width: 100%;
    max-width: 260px;
    height: auto;
    display: block;
}

.dona-leyenda {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dona-item {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--separador);
}

    .dona-item:last-child {
        border-bottom: none;
    }

.dona-color {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

.dona-nombre {
    font-size: 13.5px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.dona-monto {
    font-size: 13.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.dona-porcentaje {
    font-size: 12px;
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
    min-width: 44px;
    text-align: right;
}

@media (max-width: 640px) {
    .dona-item {
        grid-template-columns: 14px 1fr auto;
    }

    .dona-porcentaje {
        grid-column: 2 / -1;
        text-align: left;
        min-width: 0;
    }
}
/* ---------- 46. ESTRATEGIAS DE CLEO ---------- */
.est-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 7px;
    margin-bottom: 8px;
}

.est-activa {
    background: var(--info-bg);
    color: var(--info-texto);
}

.est-lograda {
    background: var(--ok-bg);
    color: var(--ok-texto);
}

.est-cerrada {
    background: var(--separador);
    color: var(--texto-suave);
}

.est-tarjeta {
    margin-bottom: 16px;
}

.est-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.est-cab-izq {
    min-width: 0;
    flex: 1;
}

.est-nombre {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.est-meta {
    font-size: 12.5px;
    color: var(--texto-suave);
    margin-top: 4px;
}

.est-porcentaje {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    color: var(--primario);
    line-height: 1;
}

:root[data-theme="oscuro"] .est-porcentaje {
    color: var(--acento);
}

.est-porcentaje.lograda {
    color: var(--ok-texto);
}

.est-barra {
    height: 12px;
    background: var(--separador);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
}

.est-barra-relleno {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1A2980, #26D0CE);
    min-width: 4px;
    transition: width .4s cubic-bezier(.22, 1, .36, 1);
}

    .est-barra-relleno.lograda {
        background: linear-gradient(90deg, #16A34A, #22C55E);
    }

.est-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.est-avance {
    font-size: 13px;
    font-weight: 700;
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
}

.est-acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

    .est-acciones form {
        margin: 0;
    }

    .est-acciones .btn-secundario {
        padding: 9px 16px;
        font-size: 12.5px;
    }

/* ---------- Detalle ---------- */
.est-detalle-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.est-titulo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
    margin: 0 0 4px;
}

.est-descripcion {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto);
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.est-progreso {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

.est-progreso-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .est-progreso-cab span {
        font-size: 12px;
        font-weight: 700;
        color: var(--texto-suave);
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .est-progreso-cab b {
        font-size: 24px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

.est-progreso-pie {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: var(--texto-suave);
    flex-wrap: wrap;
    margin-top: 8px;
}

.est-marcar {
    margin-bottom: 6px;
}

.est-boton-sumar {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    padding: 14px 28px;
}

    .est-boton-sumar svg {
        width: 20px;
        height: 20px;
    }

.est-marca {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1.5px solid var(--separador);
    flex-wrap: wrap;
}

    .est-marca:last-child {
        border-bottom: none;
    }

    .est-marca form {
        margin: 0;
        flex-shrink: 0;
    }

    .est-marca .btn-secundario {
        padding: 8px 14px;
        font-size: 12px;
    }

.est-marca-datos {
    flex: 1;
    min-width: 150px;
}

.est-marca-fecha {
    font-size: 13px;
    font-weight: 700;
}

.est-marca-nota {
    font-size: 12px;
    color: var(--texto-suave);
    margin-top: 3px;
}

.est-marca-monto {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
/* ---------- 47. EXCEDENTE Y ESTRATEGIAS EN REPORTES ---------- */
.est-excedente {
    display: inline-block;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 10px;
    background: var(--ok-bg);
    color: var(--ok-texto);
}

.est-reporte {
    border-color: var(--acento);
}

.est-reporte-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

    .est-reporte-cab .seccion-titulo {
        margin-bottom: 4px;
    }

.est-reporte-kpi {
    text-align: right;
    flex-shrink: 0;
}

.est-reporte-numero {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.est-reporte-monto {
    font-size: 13px;
    font-weight: 700;
    color: var(--ok-texto);
    margin-top: 3px;
}

@media (max-width: 640px) {
    .est-reporte-kpi {
        text-align: left;
    }
}
/* ---------- 48. BARRA DE ESTRATEGIA LOGRADA EN REPORTES ---------- */
.rep-barra-relleno.lograda {
    background: linear-gradient(90deg, #16A34A, #22C55E);
}
/* ---------- 49. CUENTAS POR COBRAR ---------- */
.cobro-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--aviso-bg);
    border: 1px solid rgba(245, 158, 11, .30);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

    .cobro-total span {
        font-size: 12px;
        font-weight: 700;
        color: var(--aviso-texto);
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .cobro-total b {
        font-size: 22px;
        font-weight: 800;
        color: var(--aviso-texto);
        font-variant-numeric: tabular-nums;
    }
/* ---------- 50. GASTOS FIJOS ---------- */
.gf-estado {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 11px;
    border-radius: 7px;
    margin-top: 7px;
    letter-spacing: .3px;
}

.gf-pendiente {
    background: var(--aviso-bg);
    color: var(--aviso-texto);
}

.gf-pagado {
    background: var(--ok-bg);
    color: var(--ok-texto);
}
/* ---------- 51. GASTOS FIJOS: PAGO Y AVISO ---------- */
.gf-fila {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

.gf-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.gf-datos {
    flex: 1;
    min-width: 180px;
}

.gf-cab form {
    margin: 0;
    flex-shrink: 0;
}

.gf-cab .btn-secundario {
    padding: 9px 16px;
    font-size: 12.5px;
}

.gf-pagar {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1.5px solid var(--separador);
}

    .gf-pagar .acciones-form,
    .gf-pagar button {
        margin-top: 4px;
    }

/* Aviso de gastos fijos en el dashboard */
.banner-gastos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--aviso-bg);
    color: var(--aviso-texto);
    border-color: rgba(245, 158, 11, .30);
}

    .banner-gastos .btn-secundario {
        padding: 9px 18px;
        font-size: 12.5px;
        flex-shrink: 0;
    }
/* ---------- 52. CLEO: CHAT Y PALETA ---------- */
/* El panel ahora tiene: cabecera, barra de uso, paleta de acciones,
   chat con burbujas y barra de entrada. */

.cleo-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 88vh;
}

/* ---------- Barra de uso (estilo Gemini) ---------- */
.cleo-uso {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 12px 14px;
}

.cleo-uso-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

    .cleo-uso-cab span {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--texto-suave);
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .cleo-uso-cab b {
        font-size: 14px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

.cleo-uso-barra {
    height: 8px;
    background: var(--separador);
    border-radius: 999px;
    overflow: hidden;
}

.cleo-uso-relleno {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1A2980, #26D0CE);
    min-width: 3px;
    transition: width .4s ease;
}

    .cleo-uso-relleno.uso-bajo {
        background: linear-gradient(90deg, #1A2980, #26D0CE);
    }

    .cleo-uso-relleno.uso-medio {
        background: linear-gradient(90deg, #F59E0B, #FCD34D);
    }

    .cleo-uso-relleno.uso-alto {
        background: linear-gradient(90deg, #EF4444, #F87171);
    }

    .cleo-uso-relleno.uso-agotado {
        background: #EF4444;
    }

.cleo-uso-pie {
    font-size: 11.5px;
    color: var(--texto-suave);
    margin-top: 7px;
}

/* ---------- Paleta de acciones (chips) ---------- */
.cleo-acciones {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.cleo-chip {
    border: 1px solid var(--borde);
    background: var(--superficie-2);
    color: var(--texto);
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
    white-space: nowrap;
}

    .cleo-chip:hover {
        border-color: var(--acento);
        background: var(--acento-suave);
    }

/* ---------- Chat ---------- */
.cleo-chat {
    flex: 1;
    min-height: 180px;
    max-height: 46vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 4px 2px;
}

.cleo-burbuja {
    display: flex;
    max-width: 88%;
}

.cleo-burbuja-cleo {
    align-self: flex-start;
}

.cleo-burbuja-medico {
    align-self: flex-end;
}

.cleo-burbuja-texto {
    font-size: 13.5px;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 15px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cleo-burbuja-cleo .cleo-burbuja-texto {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-bottom-left-radius: 5px;
}

.cleo-burbuja-medico .cleo-burbuja-texto {
    background: var(--primario);
    color: #fff;
    border-bottom-right-radius: 5px;
}

:root[data-theme="oscuro"] .cleo-burbuja-medico .cleo-burbuja-texto {
    background: var(--acento);
    color: #0E1A3C;
}

.cleo-pensando .cleo-burbuja-texto {
    font-style: italic;
    color: var(--texto-suave);
}

/* ---------- Barra de entrada ---------- */
.cleo-input {
    display: flex;
    gap: 8px;
    align-items: center;
    border-top: 1px solid var(--separador);
    padding-top: 12px;
}

    .cleo-input input {
        flex: 1;
        min-width: 0;
        padding: 12px 16px;
        font-size: 14.5px;
        color: var(--texto);
        background: var(--fondo-input);
        border: 1.5px solid var(--borde-input);
        border-radius: 999px;
        outline: none;
        font-family: inherit;
    }

        .cleo-input input:focus {
            border-color: var(--acento);
            box-shadow: 0 0 0 4px var(--acento-suave);
        }

.cleo-enviar {
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #1A2980 0%, #26D0CE 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 8px 20px rgba(26, 41, 128, .30);
    transition: transform .12s ease;
}

    .cleo-enviar:hover {
        transform: scale(1.05);
    }

    .cleo-enviar svg {
        width: 20px;
        height: 20px;
    }

@media (min-width: 781px) {
    .cleo-chat {
        min-height: 220px;
        max-height: 50vh;
    }
}

/* ---------- 53. CLEO: BOTON DE ACCION EN EL CHAT ---------- */
.cleo-burbuja {
    flex-direction: column;
    gap: 8px;
}

.cleo-burbuja-cleo {
    align-items: flex-start;
}

.cleo-burbuja-medico {
    align-items: flex-end;
}

.cleo-accion-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 11px;
    background: var(--primario);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--sombra-1);
    transition: background .14s ease, transform .1s ease;
}

    .cleo-accion-btn:hover {
        background: var(--primario-hover);
        transform: translateY(-1px);
    }

:root[data-theme="oscuro"] .cleo-accion-btn {
    background: var(--acento);
    color: #0E1A3C;
}
/* ---------- 54. CLEO: RESPUESTAS RAPIDAS ---------- */
.cleo-opciones {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.cleo-opcion {
    border: 1px solid var(--acento);
    background: var(--acento-suave);
    color: var(--primario);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .14s ease;
}

    .cleo-opcion:hover {
        background: var(--acento);
        color: #fff;
    }

:root[data-theme="oscuro"] .cleo-opcion {
    color: var(--acento);
}

    :root[data-theme="oscuro"] .cleo-opcion:hover {
        color: #0E1A3C;
    }
/* ---------- 55. DICTADO DE CONSULTA ---------- */
.dictado-zona {
    position: sticky;
    top: 62px;
    z-index: 8;
    margin-bottom: 14px;
}

.dictado-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--superficie);
    border: 1px solid var(--acento);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: var(--sombra-2);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.dictado-acciones {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.dictado-icono {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #1A2980 0%, #26D0CE 100%);
}

    .dictado-icono svg {
        width: 18px;
        height: 18px;
    }

.dictado-barra input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    font-size: 15px;
    color: var(--texto);
    background: var(--fondo-input);
    border: 1.5px solid var(--borde-input);
    border-radius: 11px;
    outline: none;
    font-family: inherit;
}

    .dictado-barra input:focus {
        border-color: var(--acento);
        box-shadow: 0 0 0 4px var(--acento-suave);
    }

.dictado-btn {
    border: none;
    cursor: pointer;
    background: var(--primario);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    font-family: inherit;
    padding: 11px 20px;
    border-radius: 11px;
    flex-shrink: 0;
    transition: background .14s ease;
}

    .dictado-btn:hover {
        background: var(--primario-hover);
    }

    .dictado-btn:disabled {
        opacity: .6;
        cursor: default;
    }

.dictado-btn-suave {
    background: var(--superficie-2);
    color: var(--texto);
    border: 1px solid var(--borde);
}

    .dictado-btn-suave:hover {
        background: var(--acento-suave);
    }

.dictado-aviso {
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13.5px;
    margin-top: 8px;
    background: var(--info-bg);
    color: var(--info-texto);
    box-shadow: var(--sombra-1);
}

.dictado-aviso-error {
    background: var(--error-bg);
    color: var(--error-texto);
}

@keyframes dictadoFlash {
    0% {
        background-color: var(--acento-suave);
        box-shadow: 0 0 0 4px var(--acento-suave);
    }

    100% {
        background-color: var(--fondo-input);
        box-shadow: none;
    }
}

.dictado-destello {
    animation: dictadoFlash 1.3s ease-out;
}

@media (max-width: 780px) {
    .dictado-zona {
        top: 56px;
    }

    .dictado-barra {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px;
        padding: 9px 10px;
        min-width: 0;
    }

    .dictado-icono {
        grid-column: 1;
        grid-row: 1;
        width: 30px;
        height: 30px;
    }

    .dictado-barra input {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        padding: 10px 12px;
        font-size: 14px;
    }

    .dictado-acciones {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        gap: 6px;
    }

    .dictado-btn {
        padding: 9px 13px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .dictado-chip {
        font-size: 11px;
        padding: 8px 10px;
        flex-shrink: 0;
    }
}
/* ---------- 58. AUDITORIA SEMIOLOGICA ---------- */
.aud-reporte {
    background: var(--acento-suave);
    color: var(--primario);
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 18px;
}

:root[data-theme="oscuro"] .aud-reporte {
    color: var(--acento);
}

.aud-sugerencia {
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--superficie-2);
}

.aud-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.45;
}

    .aud-check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--acento);
        flex-shrink: 0;
        margin-top: 2px;
    }

    .aud-check small {
        display: block;
        font-size: 12px;
        color: var(--texto-suave);
        margin-top: 3px;
    }

.aud-propuesta {
    margin-top: 10px;
    padding: 11px 14px;
    background: var(--fondo-input);
    border: 1px solid var(--borde-input);
    border-radius: 11px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--texto);
}
/* ---------- 56. CHIPS DE COMANDOS DEL DICTADO ---------- */
.dictado-chip {
    border: 1px solid var(--acento);
    background: var(--acento-suave);
    color: var(--primario);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background .14s ease;
}

    .dictado-chip:hover {
        background: var(--acento);
        color: #fff;
    }

:root[data-theme="oscuro"] .dictado-chip {
    color: var(--acento);
}

    :root[data-theme="oscuro"] .dictado-chip:hover {
        color: #0E1A3C;
    }

@media (max-width: 780px) {
    .dictado-chip {
        font-size: 11.5px;
        padding: 8px 11px;
    }
}
/* ---------- 57. PLANTILLAS DEL DICTADO ---------- */
.plantilla-campo {
    margin-bottom: 18px;
}

.plantilla-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

    .plantilla-cab label {
        margin-bottom: 0;
        font-size: 13px;
        font-weight: 800;
        color: var(--primario);
        letter-spacing: .2px;
    }

:root[data-theme="oscuro"] .plantilla-cab label {
    color: var(--acento);
}

.plantilla-limpiar {
    border: none;
    background: transparent;
    color: var(--error-texto);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 7px;
    transition: background .14s ease;
}

    .plantilla-limpiar:hover {
        background: var(--error-bg);
    }

.plantilla-campo textarea {
    width: 100%;
    padding: 13px 16px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo-input);
    border: 1.5px solid var(--borde-input);
    border-radius: 11px;
    outline: none;
    font-family: inherit;
    resize: vertical;
}

    .plantilla-campo textarea:focus {
        border-color: var(--acento);
        box-shadow: 0 0 0 4px var(--acento-suave);
    }
/* ---------- 60. PANEL DEL PLAN INTELIGENTE ---------- */
.plan-panel {
    background: var(--superficie);
    border: 1.5px solid var(--acento);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: var(--sombra-2);
}

.plan-panel-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

    .plan-panel-cab .seccion-titulo {
        margin-bottom: 0;
    }

.plan-cerrar {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 10px;
    background: var(--superficie-2);
    color: var(--texto-suave);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .plan-cerrar svg {
        width: 16px;
        height: 16px;
    }

.plan-intencion {
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 12px;
    background: var(--superficie-2);
}

.plan-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.45;
}

    .plan-check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--acento);
        flex-shrink: 0;
        margin-top: 2px;
    }

    .plan-check b {
        font-weight: 800;
    }

    .plan-check small {
        display: block;
        font-size: 12px;
        color: var(--texto-suave);
        margin-top: 3px;
    }

        .plan-check small.plan-incompleta {
            color: var(--aviso-texto);
            font-weight: 700;
        }

.plan-items {
    margin-top: 9px;
    padding-left: 28px;
    font-size: 13px;
    color: var(--texto-suave);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .plan-items {
        padding-left: 0;
    }
}
.plan-entrada {
    width: 100%;
    margin-top: 10px;
    padding: 10px 13px;
    font-size: 13.5px;
    color: var(--texto);
    background: var(--fondo-input);
    border: 1.5px solid var(--borde-input);
    border-radius: 10px;
    outline: none;
    font-family: inherit;
}

    .plan-entrada:focus {
        border-color: var(--acento);
        box-shadow: 0 0 0 4px var(--acento-suave);
    }
/* ---------- 61. CHIPS DE DATOS PRECARGADOS ---------- */
.borrador-zona {
    background: var(--acento-suave);
    border: 1.5px solid var(--acento);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.borrador-titulo {
    font-size: 12px;
    font-weight: 800;
    color: var(--primario);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}

:root[data-theme="oscuro"] .borrador-titulo {
    color: var(--acento);
}

.borrador-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.borrador-form {
    margin: 0;
}

.borrador-chip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    border: 1px solid var(--acento);
    background: var(--superficie);
    color: var(--texto);
    font-family: inherit;
    padding: 11px 16px;
    border-radius: 12px;
    cursor: pointer;
    max-width: 320px;
    transition: background .14s ease, transform .1s ease;
}

    .borrador-chip:hover {
        background: var(--acento);
        color: #fff;
        transform: translateY(-1px);
    }

    .borrador-chip b {
        font-size: 13.5px;
        font-weight: 800;
    }

    .borrador-chip small {
        font-size: 11.5px;
        opacity: .8;
        line-height: 1.35;
    }

@media (max-width: 640px) {
    .borrador-chip {
        max-width: 100%;
        width: 100%;
    }

    .borrador-chips {
        flex-direction: column;
    }
}
/* ===== 62. RECIPE: QUITAR ITEM ===== */
.rec-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.rec-quitar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borde, #d8dde6);
    border-radius: 9px;
    background: transparent;
    color: #8a94a6;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

    .rec-quitar:hover {
        color: #c62828;
        border-color: #c62828;
        background: rgba(198, 40, 40, .07);
    }

    .rec-quitar svg {
        width: 16px;
        height: 16px;
    }
/* ===== 63. BANDEJA DE RETENCION ===== */
.ret-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.ret-check {
    display: flex;
    align-items: flex-end;
}

    .ret-check label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: .92rem;
        cursor: pointer;
    }

.ret-conteo {
    margin: 6px 4px 12px;
    font-size: .95rem;
    color: #5a6577;
}

.ret-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ret-item {
    border: 1px solid var(--borde, #d8dde6);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--superficie, #fff);
}

.ret-cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.ret-nombre {
    font-weight: 600;
    font-size: 1.02rem;
}

.ret-detalle {
    font-size: .86rem;
    color: #7a8496;
    margin-top: 2px;
}

.ret-tiempo {
    font-size: .84rem;
    font-weight: 600;
    color: #c62828;
    white-space: nowrap;
}

.ret-dx {
    font-size: .88rem;
    color: #4a5568;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(26, 41, 128, .05);
    border-radius: 8px;
}

.ret-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    background: #25D366;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s;
}

    .btn-wa:hover {
        background: #1eb356;
    }

.btn-mini {
    padding: 7px 12px;
    font-size: .85rem;
}

.ret-tel {
    font-size: .86rem;
    color: #7a8496;
}

.ret-sin-tel {
    font-size: .86rem;
    color: #b0b8c6;
    font-style: italic;
}
/* ===== 64. BANDEJA DE RETENCION: FILTROS PLEGABLES Y VISTA PREVIA ===== */
.ret-avanzados {
    margin-top: 14px;
    border-top: 1px solid var(--borde, #e4e8ef);
    padding-top: 12px;
}

    .ret-avanzados summary {
        cursor: pointer;
        font-size: .92rem;
        font-weight: 600;
        color: #1A2980;
        padding: 4px 0;
        list-style: none;
    }

        .ret-avanzados summary::-webkit-details-marker {
            display: none;
        }

        .ret-avanzados summary::before {
            content: '+ ';
            font-weight: 700;
        }

    .ret-avanzados[open] summary::before {
        content: '− ';
    }

    .ret-avanzados .ret-filtros {
        margin-top: 12px;
    }

.ret-mensaje {
    font-size: .88rem;
    color: #4a5568;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(37, 211, 102, .07);
    border-left: 3px solid #25D366;
    border-radius: 8px;
    white-space: pre-wrap;
}

/* En pantallas pequenas la vista previa se oculta: el medico ya la vera
   dentro de WhatsApp, y asi la lista no suma scroll. */
@media (max-width: 720px) {
    .ret-mensaje {
        display: none;
    }
}
/* ===== 65. PLANTILLAS DE RETENCION ===== */
.ret-plantilla-fila {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--borde, #eef1f6);
    flex-wrap: wrap;
}

    .ret-plantilla-fila:last-child {
        border-bottom: none;
    }

.ret-plantilla-texto {
    flex: 1 1 260px;
    min-width: 0;
}

    .ret-plantilla-texto .nota-suave {
        margin-top: 4px;
        white-space: pre-wrap;
    }

.ret-plantilla-acciones {
    display: flex;
    gap: 8px;
    align-items: center;
}
/* ===== 66. NAVEGACION INFERIOR: DISTRIBUCION FLEXIBLE ===== */
/* OJO: NO se fuerza "display: flex" aqui. La barra inferior solo se
   muestra en el telefono; el CSS original ya la oculta en PC. */
.nav-inferior .nav-inf-item {
    flex: 1 1 0;
    min-width: 0;
}

    .nav-inferior .nav-inf-item svg {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
    }

    .nav-inferior .nav-inf-item span {
        font-size: .6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
/* ===== 70. PLANES, MI PLAN Y MURO CORDIAL ===== */
.plan-tarjeta {
    background: linear-gradient(135deg, #1A2980 0%, #26409b 100%);
    color: #fff;
    border: none;
}

.plan-cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.plan-etiqueta {
    font-size: .82rem;
    opacity: .78;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.plan-nombre {
    font-size: 1.7rem;
    font-weight: 700;
    margin-top: 2px;
}

.plan-estado {
    font-size: .84rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.plan-activo {
    background: rgba(38, 208, 206, .22);
    color: #7ff0ee;
}

.plan-porvencer {
    background: rgba(255, 193, 7, .22);
    color: #ffd970;
}

.plan-vencido {
    background: rgba(244, 67, 54, .24);
    color: #ff9a92;
}

.plan-datos {
    display: flex;
    gap: 28px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.plan-dato span {
    display: block;
    font-size: .8rem;
    opacity: .78;
}

.plan-dato b {
    font-size: 1.1rem;
}

/* ===== MURO CORDIAL ===== */
.bloq-tarjeta {
    text-align: center;
    padding: 34px 22px;
}

.bloq-icono {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(38, 208, 206, .13);
    color: #26D0CE;
}

    .bloq-icono svg {
        width: 30px;
        height: 30px;
    }

.bloq-titulo {
    font-size: 1.2rem;
    margin: 0 0 10px;
}

.bloq-texto {
    color: #5a6577;
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.55;
}

.bloq-acciones {
    justify-content: center;
    margin-top: 22px;
}

/* ===== 67. LECTURA DE LABORATORIOS POR FOTO ===== */
.escaneo-tabla {
    margin-top: 14px;
    border: 1px solid var(--borde, #e4e8ef);
    border-radius: 10px;
    overflow: hidden;
}

.escaneo-cab,
.escaneo-fila {
    display: grid;
    grid-template-columns: 34px 2fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
}

.escaneo-cab {
    background: rgba(26, 41, 128, .05);
    font-size: .8rem;
    font-weight: 600;
    color: #4a5568;
}

.escaneo-fila {
    border-top: 1px solid var(--borde, #eef1f6);
}

    .escaneo-fila input[type="text"] {
        width: 100%;
        padding: 6px 8px;
        font-size: .88rem;
        border: 1px solid var(--borde, #d8dde6);
        border-radius: 8px;
        background: transparent;
    }

@media (max-width: 620px) {
    .escaneo-cab,
    .escaneo-fila {
        grid-template-columns: 28px 1.6fr 1fr 1fr;
        gap: 6px;
        padding: 6px 8px;
    }

        .escaneo-fila input[type="text"] {
            font-size: .82rem;
            padding: 5px 6px;
        }
}
/* ===== 68. HISTORIAL DE LABORATORIOS AGRUPADO POR PERFIL ===== */
.lab-grupo {
    margin-bottom: 16px;
    border: 1px solid var(--borde, #e4e8ef);
    border-radius: 12px;
    overflow: hidden;
}

.lab-grupo-cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(26, 41, 128, .06);
}

.lab-grupo-nombre {
    font-weight: 600;
    font-size: .95rem;
    color: #1A2980;
}

.lab-grupo-fecha {
    font-size: .84rem;
    color: #7a8496;
    white-space: nowrap;
}

.lab-grupo .tabla-lab {
    border: none;
    border-radius: 0;
}

.tabla-lab-perfil .tabla-lab-fila {
    grid-template-columns: 2fr 1fr;
}

#SecSueltos {
    margin-top: 6px;
}
/* ===== 69. BOTON DE PERFIL EN LA BARRA SUPERIOR ===== */
.btn-perfil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: inherit;
    opacity: .82;
    transition: opacity .15s, background .15s;
}

    .btn-perfil:hover,
    .btn-perfil.activo {
        opacity: 1;
        background: rgba(255, 255, 255, .14);
    }

    .btn-perfil svg {
        width: 20px;
        height: 20px;
    }
/* ===== 71. PAGINA DE PLANES ===== */
.planes-banner {
    background: rgba(38, 208, 206, .12);
    border: 1px solid rgba(38, 208, 206, .3);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: .92rem;
    color: #1A2980;
    margin-bottom: 18px;
}

.planes-banner-actual {
    background: rgba(26, 41, 128, .07);
    border-color: rgba(26, 41, 128, .18);
}

.planes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.plan-card {
    position: relative;
    border: 1px solid var(--borde, #d8dde6);
    border-radius: 14px;
    padding: 22px 18px 18px;
    background: var(--superficie, #fff);
    display: flex;
    flex-direction: column;
}

.plan-card-destacada {
    border-color: #26D0CE;
    box-shadow: 0 6px 22px rgba(38, 208, 206, .16);
}

.plan-card-actual {
    border-color: #1A2980;
    box-shadow: 0 6px 22px rgba(26, 41, 128, .12);
}

.plan-card-cinta {
    position: absolute;
    top: -11px;
    left: 18px;
    background: #26D0CE;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}

.plan-cinta-actual {
    background: #1A2980;
}

.plan-card-nombre {
    font-size: 1.28rem;
    font-weight: 700;
    color: #1A2980;
}

.plan-card-lema {
    font-size: .86rem;
    color: #7a8496;
    margin-top: 2px;
    min-height: 34px;
}

.plan-card-precio {
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.plan-card-moneda {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1A2980;
}

.plan-card-monto {
    font-size: 2.1rem;
    font-weight: 700;
    color: #1A2980;
    line-height: 1;
}

.plan-card-periodo {
    font-size: .9rem;
    color: #7a8496;
    margin-left: 2px;
}

.plan-card-anual {
    font-size: .82rem;
    color: #5a6577;
    margin-top: 4px;
}

.plan-card-ahorro {
    display: inline-block;
    background: rgba(38, 208, 206, .15);
    color: #0f8f8d;
    font-weight: 600;
    font-size: .74rem;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 4px;
}

.plan-card-creditos {
    margin-top: 12px;
    font-size: .84rem;
    font-weight: 600;
    color: #4a5568;
    padding: 7px 10px;
    background: rgba(26, 41, 128, .05);
    border-radius: 8px;
}

.plan-card-lista {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    flex: 1;
}

    .plan-card-lista li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: .86rem;
        padding: 5px 0;
        line-height: 1.4;
    }

    .plan-card-lista svg {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        margin-top: 2px;
    }

.plan-si {
    color: #3d4757;
}

    .plan-si svg {
        color: #26D0CE;
    }

.plan-no {
    color: #a8b0bd;
}

    .plan-no svg {
        color: #c9cfd8;
    }

.plan-card-botones {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.plan-card-boton {
    flex: 1 1 0;
    text-align: center;
    padding: 10px 8px;
    font-size: .88rem;
}

.plan-card-boton-actual {
    margin-top: 16px;
    text-align: center;
    padding: 10px;
    font-size: .88rem;
    font-weight: 600;
    color: #1A2980;
    background: rgba(26, 41, 128, .08);
    border-radius: 10px;
}

/* ===== TABLA COMPARATIVA ===== */
.planes-tabla {
    margin-bottom: 18px;
}

.comp-tabla {
    margin-top: 8px;
    font-size: .86rem;
}

.comp-fila {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--borde, #eef1f6);
    align-items: center;
}

    .comp-fila:last-child {
        border-bottom: none;
    }

.comp-cab {
    font-weight: 700;
    font-size: .8rem;
    color: #4a5568;
    border-bottom: 2px solid var(--borde, #d8dde6);
}

.comp-funcion {
    color: #3d4757;
}

.comp-col {
    text-align: center;
    font-weight: 600;
}

.comp-si {
    color: #0f8f8d;
}

.comp-no {
    color: #c9cfd8;
}

.comp-separador {
    border-top: 2px solid var(--borde, #eef1f6);
}

@media (max-width: 620px) {
    .comp-fila {
        grid-template-columns: 1.6fr .8fr .8fr .8fr;
        font-size: .78rem;
        gap: 4px;
    }

    .comp-cab {
        font-size: .72rem;
    }

    .plan-card-monto {
        font-size: 1.9rem;
    }
}

/* ===== FAQ ===== */
.planes-faq {
    border-bottom: 1px solid var(--borde, #eef1f6);
    padding: 10px 0;
}

    .planes-faq:last-child {
        border-bottom: none;
    }

    .planes-faq summary {
        cursor: pointer;
        font-weight: 600;
        font-size: .92rem;
        color: #1A2980;
        list-style: none;
        padding: 2px 0;
    }

        .planes-faq summary::-webkit-details-marker {
            display: none;
        }

        .planes-faq summary::before {
            content: '+ ';
            font-weight: 700;
        }

    .planes-faq[open] summary::before {
        content: '− ';
    }

    .planes-faq p {
        margin: 8px 0 2px;
        font-size: .88rem;
        color: #5a6577;
        line-height: 1.55;
    }

.planes-pie {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
/* ===== 72. RESULTADO DEL PAGO ===== */
.pago-tarjeta {
    text-align: center;
    padding: 36px 22px;
}

.pago-icono {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .pago-icono svg {
        width: 32px;
        height: 32px;
    }

.pago-ok .pago-icono {
    background: rgba(38, 208, 206, .14);
    color: #0f8f8d;
}

.pago-alerta .pago-icono {
    background: rgba(255, 193, 7, .16);
    color: #c79100;
}

.pago-titulo {
    font-size: 1.3rem;
    margin: 0 0 10px;
}

.pago-texto {
    color: #5a6577;
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.55;
}

.pago-acciones {
    justify-content: center;
    margin-top: 22px;
}

.pago-spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto 18px;
    border: 4px solid rgba(26, 41, 128, .12);
    border-top-color: #1A2980;
    border-radius: 50%;
    animation: pago-girar 0.9s linear infinite;
}

@keyframes pago-girar {
    to {
        transform: rotate(360deg);
    }
}