/* ═══════════════════════════════════════════════════════════════════
   Sistema de diseño (docs/Diseno.md) con la identidad de Convivia (marketing/identidad.md):
   petróleo + coral + menta + arena. Claro y oscuro, Inter + Plus Jakarta Sans,
   iconos lineales (Lucide) y gráficas SVG propias. Sin frameworks ni CDN.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────── Fuentes autoalojadas (OFL, wwwroot/fuentes/app) ───────────── */
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("fuentes/app/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("fuentes/app/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("fuentes/app/jakarta-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ───────────── Tokens: modo claro ───────────── */
:root {
    color-scheme: light;
    /* Marca */
    --marca: #0E4D4A;          /* petróleo: 9.6:1 con blanco */
    --marca-2: #0A2F2E;        /* hover / profundo */
    --marca-3: #E7F5EE;        /* tinte menta */
    --marca-4: #CFEBDD;        /* menta (bordes activos) */
    --sobre-marca: #ffffff;
    --acento: #C24B27;         /* coral oscuro: 4.6:1 con blanco (botones) */
    --acento-2: #FCE5DB;
    --acento-3: #9A3A1C;
    --sobre-acento: #ffffff;
    --degradado-marca: linear-gradient(135deg, #0A2F2E 0%, #0E4D4A 55%, #2E7D74 100%);
    --degradado-cobre: linear-gradient(135deg, #C24B27, #E8673F);

    /* Superficies */
    --fondo: #F7F3EC;          /* arena suave */
    --superficie: #ffffff;
    --superficie-2: #f8fafb;
    --superficie-3: #eef2f4;
    --superficie-hover: #f2f6f7;
    --linea: #e1e7ea;
    --linea-2: #edf1f3;
    --borde-campo: #c5cfd4;    /* 1.6:1 decorativo; el foco lleva anillo */
    --borde-fuerte: #7b8a91;   /* 3.4:1 (controles del portal) */
    --velo: rgba(10, 20, 26, .5);

    /* Texto */
    --texto: #13211F;          /* tinta */
    --texto-2: #3F504D;        /* 8.6:1 sobre blanco */
    --texto-3: #5B6B68;        /* 5.6:1 sobre blanco, 5.1:1 sobre fondo */
    --texto-inv: #ffffff;

    /* Estados (texto sobre su fondo -2 ≥ 4.5:1) */
    --ok: #137a52;   --ok-2: #e3f5ec;   --ok-3: #0d5c3d;
    --aviso: #a35a05; --aviso-2: #fdf1dc; --aviso-3: #6f3e04;
    --error: #c0362c; --error-2: #fde8e5; --error-3: #8b1e16;
    --info: #1f5fb8; --info-2: #e5eefb;  --info-3: #163f78;
    --morado: #6a3fc9; --morado-2: #efe9fd;
    --neutro: #4b5863; --neutro-2: #eceff1;

    /* Gráficas (paleta categórica validada en claro y oscuro) */
    --g1: #2E7D74; --g2: #E8673F; --g3: #6a5acd; --g4: #2f9e6e; --g5: #c2457a; --g6: #8a9399;
    --g-rejilla: #e7ecef; --g-eje: #6b7880;

    /* Forma */
    --radio-1: 6px; --radio-2: 9px; --radio: 14px; --radio-3: 18px; --radio-4: 24px; --pildora: 999px;
    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-7: 32px; --e-8: 48px;
    --sombra-1: 0 1px 2px rgba(16, 32, 40, .06);
    --sombra: 0 1px 2px rgba(16, 32, 40, .05), 0 2px 8px rgba(16, 32, 40, .05);
    --sombra-3: 0 4px 10px rgba(16, 32, 40, .06), 0 12px 32px rgba(16, 32, 40, .08);
    --sombra-2: 0 20px 60px rgba(10, 22, 30, .22), 0 4px 14px rgba(10, 22, 30, .1);
    --anillo: 0 0 0 3px rgba(14, 77, 74, .25);

    /* Tipografía */
    --fuente: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --fuente-tit: "Plus Jakarta Sans", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
    --t-xs: 12px; --t-sm: 13px; --t-base: 14px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 24px; --t-3xl: 30px;

    /* Movimiento */
    --curva: cubic-bezier(.2, .7, .2, 1);
    --rapido: .14s; --medio: .22s;

    --barra-fondo: rgba(247, 243, 236, .86);
    --ancho-menu: 264px;
    --alto-barra: 60px;
}

/* ───────────── Tokens: modo oscuro ─────────────
   Automático con prefers-color-scheme (salvo que la persona eligió «Claro» en /accesibilidad),
   forzado con html.tema-oscuro, y local con .zona-oscura (caseta de noche). */
@media (prefers-color-scheme: dark) {
    :root:not(.tema-claro):not(.alto-contraste) {
        color-scheme: dark;
        --marca: #6FCDB4; --marca-2: #A3E2D0; --marca-3: #10302C; --marca-4: #1A4A44; --sobre-marca: #04201C;
        --acento: #F2916D; --acento-2: #3B1E14; --acento-3: #F7B9A2; --sobre-acento: #2A0F05;
        --degradado-marca: linear-gradient(135deg, #0A2F2E 0%, #0E4D4A 60%, #1F6A61 100%);
        --fondo: #0b1216; --superficie: #111b20; --superficie-2: #152228; --superficie-3: #1a2a31; --superficie-hover: #182830;
        --linea: #22343c; --linea-2: #1b2b32; --borde-campo: #36505a; --borde-fuerte: #6f8c97; --velo: rgba(0, 0, 0, .62);
        --texto: #e7eef1; --texto-2: #b3c3ca; --texto-3: #93a6ae; --texto-inv: #0b1216;
        --ok: #4cc58f; --ok-2: #10291f; --ok-3: #8fe0bb;
        --aviso: #f0b04d; --aviso-2: #2d2210; --aviso-3: #f7cf8f;
        --error: #f27b70; --error-2: #331513; --error-3: #f8b2ab;
        --info: #73a8f2; --info-2: #12233b; --info-3: #b0cdf7;
        --morado: #a78bfa; --morado-2: #221a3a; --neutro: #b3c3ca; --neutro-2: #1d2c33;
        --g1: #6FCDB4; --g2: #F2916D; --g3: #9d8cf0; --g4: #4cc58f; --g5: #ec7aa8; --g6: #8b9ca3;
        --g-rejilla: #1e2f36; --g-eje: #93a6ae;
        --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
        --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25);
        --sombra-3: 0 6px 16px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .3);
        --sombra-2: 0 24px 70px rgba(0, 0, 0, .6);
        --anillo: 0 0 0 3px rgba(111, 205, 180, .35);
        --barra-fondo: rgba(11, 18, 22, .86);
    }
    :root:not(.tema-claro):not(.alto-contraste) .btn.ok, :root:not(.tema-claro):not(.alto-contraste) .btn.peligro { color: #0b1216; }
    :root:not(.tema-claro):not(.alto-contraste) .en .en-enlace, :root:not(.tema-claro):not(.alto-contraste) .en .en-llamar a { color: var(--texto); }
}
:root.tema-oscuro:not(.alto-contraste), :root.caseta-noche:not(.alto-contraste), .zona-oscura {
    color-scheme: dark;
    --marca: #6FCDB4; --marca-2: #A3E2D0; --marca-3: #10302C; --marca-4: #1A4A44; --sobre-marca: #04201C;
    --acento: #F2916D; --acento-2: #3B1E14; --acento-3: #F7B9A2; --sobre-acento: #2A0F05;
    --degradado-marca: linear-gradient(135deg, #0A2F2E 0%, #0E4D4A 60%, #1F6A61 100%);
    --fondo: #0b1216; --superficie: #111b20; --superficie-2: #152228; --superficie-3: #1a2a31; --superficie-hover: #182830;
    --linea: #22343c; --linea-2: #1b2b32; --borde-campo: #36505a; --borde-fuerte: #6f8c97; --velo: rgba(0, 0, 0, .62);
    --texto: #e7eef1; --texto-2: #b3c3ca; --texto-3: #93a6ae; --texto-inv: #0b1216;
    --ok: #4cc58f; --ok-2: #10291f; --ok-3: #8fe0bb;
    --aviso: #f0b04d; --aviso-2: #2d2210; --aviso-3: #f7cf8f;
    --error: #f27b70; --error-2: #331513; --error-3: #f8b2ab;
    --info: #73a8f2; --info-2: #12233b; --info-3: #b0cdf7;
    --morado: #a78bfa; --morado-2: #221a3a; --neutro: #b3c3ca; --neutro-2: #1d2c33;
    --g1: #6FCDB4; --g2: #F2916D; --g3: #9d8cf0; --g4: #4cc58f; --g5: #ec7aa8; --g6: #8b9ca3;
    --g-rejilla: #1e2f36; --g-eje: #93a6ae;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25);
    --sombra-3: 0 6px 16px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .3);
    --sombra-2: 0 24px 70px rgba(0, 0, 0, .6);
    --anillo: 0 0 0 3px rgba(111, 205, 180, .35);
    --barra-fondo: rgba(11, 18, 22, .86);
}
:root.tema-oscuro:not(.alto-contraste) .btn.ok, :root.tema-oscuro:not(.alto-contraste) .btn.peligro,
:root.caseta-noche:not(.alto-contraste) .btn.ok, :root.caseta-noche:not(.alto-contraste) .btn.peligro { color: #0b1216; }
:root.tema-oscuro:not(.alto-contraste) .en .en-enlace, :root.tema-oscuro:not(.alto-contraste) .en .en-llamar a { color: var(--texto); }
.zona-oscura { background: var(--fondo); color: var(--texto); }

/* ───────────── Base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0; font-family: var(--fuente); font-size: var(--t-base); line-height: 1.55; color: var(--texto);
    background: var(--fondo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility;
}
a { color: var(--marca); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--fuente-tit); margin: 0 0 .5em; line-height: 1.22; letter-spacing: -.015em; color: var(--texto); }
h1 { font-size: 1.75rem; font-weight: 750; letter-spacing: -.025em; }
h2 { font-size: 1.12rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 680; }
p { margin: 0 0 .8em; }
code, .mono { font-family: var(--mono); font-size: .9em; }
code { background: var(--superficie-3); padding: 1px 6px; border-radius: 5px; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 18px 0; }
img { max-width: 100%; }
::selection { background: var(--marca-4); color: var(--texto); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 6px; }
.num, .kpi-valor, .saldo-grande, .renglon-monto, .total-pagar b { font-variant-numeric: tabular-nums; }

/* Iconos lineales del sprite */
.i { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: .95em; height: .95em; }
.i-lg { width: 1.4em; height: 1.4em; }
.i-xl { width: 1.9em; height: 1.9em; stroke-width: 1.75; }
.i-texto { font-style: normal; }

/* ───────────── Estructura con menú lateral ───────────── */
.app { display: flex; min-height: 100vh; }
.menu {
    width: var(--ancho-menu); flex-shrink: 0; background: var(--superficie); color: var(--texto-2); display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; z-index: 40; border-right: 1px solid var(--linea);
}
.menu-cab { padding: 16px 14px 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.menu-marca { display: flex; align-items: center; gap: 10px; padding: 2px 4px; color: var(--texto); }
.menu-marca .logo, .logo {
    width: 34px; height: 34px; border-radius: 10px; background: var(--degradado-marca); flex-shrink: 0;
    display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 16px; font-family: var(--fuente-tit);
    box-shadow: 0 4px 12px rgba(14, 77, 74, .28), inset 0 1px 0 rgba(255,255,255,.25);
}
.logo svg { width: 22px; height: 22px; }
.menu-marca b { font-size: 16.5px; font-family: var(--fuente-tit); letter-spacing: -.01em; font-weight: 750; }
.menu-marca small { display: block; font-size: 11px; color: var(--texto-3); letter-spacing: .02em; }

.selector-prop {
    background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 12px; min-height: 52px;
    padding: 8px 10px; color: var(--texto); cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit;
    transition: border-color var(--rapido), background var(--rapido), box-shadow var(--rapido);
}
.selector-prop:hover { border-color: var(--marca-4); background: var(--superficie-hover); }
.selector-prop[aria-expanded=true] { border-color: var(--marca); box-shadow: var(--anillo); }
.selector-prop .punto { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.selector-prop .prop-insignia {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: #fff;
    font-weight: 800; font-size: 13px; font-family: var(--fuente-tit); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.selector-prop span { flex: 1; min-width: 0; }
.selector-prop b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.selector-prop small { font-size: 11.5px; color: var(--texto-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selector-prop .i { color: var(--texto-3); }
.selector-lista {
    background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 6px; max-height: 340px; overflow: auto;
    box-shadow: var(--sombra-3); animation: caer var(--medio) var(--curva);
}
.selector-lista input[type=search] { margin: 2px 0 6px; }
.selector-lista .menu-item { color: var(--texto); }

.menu-buscar {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 0 10px; border-radius: 10px; font: inherit; font-size: 13px;
    color: var(--texto-3); background: var(--superficie-2); border: 1px solid var(--linea); cursor: pointer; text-align: left;
}
.menu-buscar:hover { border-color: var(--marca-4); color: var(--texto-2); }
.menu-buscar span { flex: 1; }
kbd, .kbd {
    font-family: var(--fuente); font-size: 11px; font-weight: 600; color: var(--texto-3); background: var(--superficie);
    border: 1px solid var(--linea); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; line-height: 1.5;
}

.menu nav { padding: 4px 10px 18px; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.menu-grupo {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); padding: 16px 10px 6px; font-weight: 700;
}
.menu-sec { margin-top: 6px; }
.menu-sec > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; border-radius: 8px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); padding: 9px 10px 6px; font-weight: 700; user-select: none;
}
.menu-sec > summary::-webkit-details-marker { display: none; }
.menu-sec > summary:hover { color: var(--texto); }
.menu-sec > summary .i { transition: transform var(--rapido); width: 14px; height: 14px; margin-left: auto; }
.menu-sec:not([open]) > summary .i { transform: rotate(-90deg); }
.menu-sec > summary .badge { margin-left: auto; }
.menu-sec[open] > summary .badge { display: none; }
.menu-sec > summary .badge + .i { margin-left: 4px; }
.menu-item {
    position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: 36px; border-radius: 9px;
    color: var(--texto-2); font-size: 13.6px; font-weight: 500; margin: 1px 0; transition: background var(--rapido), color var(--rapido);
}
.menu-item:hover { background: var(--superficie-hover); text-decoration: none; color: var(--texto); }
.menu-item.active { background: var(--marca-3); color: var(--marca); font-weight: 650; }
.menu-item.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--marca); }
.menu-item .ico { width: 20px; display: inline-grid; place-items: center; font-size: 15px; flex-shrink: 0; color: var(--texto-3); }
.menu-item:hover .ico, .menu-item.active .ico { color: inherit; }
.menu-item .ico .i { width: 18px; height: 18px; }
.menu-item .badge { margin-left: auto; }
.menu-pie {
    padding: 12px 18px; font-size: 11.5px; color: var(--texto-3); border-top: 1px solid var(--linea); display: flex; gap: 8px; align-items: center;
}

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra {
    height: var(--alto-barra); display: flex; align-items: center; gap: 12px; padding: 0 24px;
    background: var(--barra-fondo); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 30;
}
.barra-titulo { flex: 1; min-width: 0; font-size: 13px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.barra-titulo b { color: var(--texto); font-weight: 650; }
.barra-titulo a { color: var(--texto-2); display: inline-flex; align-items: center; min-height: 28px; }
.barra-titulo .sep { color: var(--linea); }
.barra-titulo .sep .i { width: 14px; height: 14px; color: var(--texto-3); }
.barra-acciones { display: flex; align-items: center; gap: 6px; }
.btn-menu { display: none; }
.campana, .barra .btn-icono {
    position: relative; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; color: var(--texto-2);
    background: transparent; border: 1px solid transparent; transition: background var(--rapido), color var(--rapido);
}
.campana:hover, .barra .btn-icono:hover { background: var(--superficie-3); color: var(--texto); text-decoration: none; }
.campana .badge { position: absolute; top: 1px; right: -2px; box-shadow: 0 0 0 2px var(--fondo); }
.usuario { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; border-radius: 12px; color: var(--texto); border: 1px solid transparent; }
.usuario:hover { background: var(--superficie-3); text-decoration: none; }
.usuario small { display: block; color: var(--texto-3); font-size: 11.5px; line-height: 1.25; }
.usuario b { font-size: 13px; line-height: 1.25; display: block; font-weight: 650; }
.avatar {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--degradado-marca); color: #fff;
    font-weight: 700; font-size: 12.5px; flex-shrink: 0; letter-spacing: .02em;
}
.avatar.grande { width: 56px; height: 56px; font-size: 19px; }
.contenido { padding: 28px 32px 64px; max-width: 1440px; width: 100%; margin: 0 auto; animation: entrar var(--medio) var(--curva); }
.velo { display: none; }

/* ───────────── Paleta de comandos (Ctrl+K) ───────────── */
.cmdk-fondo { position: fixed; inset: 0; background: var(--velo); z-index: 100; backdrop-filter: blur(3px); animation: aparecer var(--rapido); }
.cmdk {
    position: fixed; z-index: 101; top: 12vh; left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 24px));
    background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra-2); overflow: hidden;
    animation: caer var(--medio) var(--curva);
}
.cmdk-entrada { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linea); color: var(--texto-3); }
.cmdk-entrada input[type=search] { border: 0 !important; box-shadow: none !important; padding: 4px 0; font-size: 16px; background: transparent; min-height: 0; }
.cmdk-res { max-height: min(56vh, 460px); overflow-y: auto; padding: 8px; }
.cmdk-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); padding: 10px 10px 4px; font-weight: 700; }
.cmdk-res a {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--texto); font-size: 14px;
}
.cmdk-res a .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-2); flex-shrink: 0; }
.cmdk-res a small { color: var(--texto-3); margin-left: auto; font-size: 12px; }
.cmdk-res a:hover, .cmdk-res a:focus-visible, .cmdk-res a.primero { background: var(--marca-3); text-decoration: none; outline: none; }
.cmdk-res a:hover .ico, .cmdk-res a:focus-visible .ico, .cmdk-res a.primero .ico { background: var(--marca); color: var(--sobre-marca); }
.cmdk-pie { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--texto-3); background: var(--superficie-2); flex-wrap: wrap; }
.cmdk-vacio { padding: 26px; text-align: center; color: var(--texto-3); }

/* ───────────── Encabezado de página ───────────── */
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.encabezado h1 { margin: 0; }
.encabezado h1 .i { color: var(--marca); }
.encabezado .sub { color: var(--texto-2); margin: 4px 0 0; font-size: 14px; }
.encabezado .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.miga { font-size: 12.5px; color: var(--texto-3); margin-bottom: 6px; font-weight: 500; }
.miga a { color: var(--texto-3); }
.miga a:hover { color: var(--marca); }

/* ───────────── Botones ───────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; min-height: 38px; border-radius: 10px; border: 1px solid transparent;
    background: var(--marca); color: var(--sobre-marca); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap;
    transition: background var(--rapido), box-shadow var(--rapido), transform .06s, border-color var(--rapido), color var(--rapido);
    text-decoration: none; line-height: 1.3; box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn:hover { background: var(--marca-2); text-decoration: none; color: var(--sobre-marca); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; box-shadow: var(--anillo); }
.btn:disabled, .btn.deshabilitado { opacity: .5; cursor: not-allowed; transform: none; }
.btn.sec { background: var(--superficie); color: var(--texto); border-color: var(--linea); box-shadow: var(--sombra-1); }
.btn.sec:hover { background: var(--superficie-hover); border-color: var(--borde-campo); color: var(--texto); }
.btn.acento { background: var(--acento); color: var(--sobre-acento); }
.btn.acento:hover { background: var(--acento-3); color: #fff; }
.btn.ok { background: var(--ok); color: #fff; }
.btn.ok:hover { background: var(--ok-3); }
.btn.peligro { background: var(--error); color: #fff; }
.btn.peligro:hover { background: var(--error-3); }
.btn.fantasma { background: transparent; color: var(--marca); border-color: transparent; box-shadow: none; }
.btn.fantasma:hover { background: var(--marca-3); color: var(--marca); }
.btn.chico { padding: 5px 10px; min-height: 30px; font-size: 12.5px; border-radius: 8px; gap: 5px; }
.btn.grande { padding: 12px 22px; min-height: 48px; font-size: 15px; border-radius: 12px; }
.btn.bloque { width: 100%; }
.btn .badge { background: rgba(255,255,255,.22); color: inherit; }
.btn.sec .badge { background: var(--acento); color: #fff; }
.btn-icono {
    background: none; border: 0; cursor: pointer; font-size: 16px; width: 34px; height: 34px; border-radius: 9px; color: var(--texto-2);
    display: inline-grid; place-items: center; transition: background var(--rapido), color var(--rapido); text-decoration: none;
}
.btn-icono:hover { background: var(--superficie-3); color: var(--texto); text-decoration: none; }
.grupo-btn { display: inline-flex; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: var(--superficie-3); padding: 3px; gap: 2px; }
.grupo-btn button { border: 0; background: none; padding: 6px 13px; font: inherit; font-size: 13px; cursor: pointer; color: var(--texto-2); border-radius: 7px; font-weight: 550; }
.grupo-btn button:hover { color: var(--texto); }
.grupo-btn button + button { border-left: 0; }
.grupo-btn button.activo { background: var(--superficie); color: var(--texto); font-weight: 650; box-shadow: var(--sombra); }

/* ───────────── Tarjetas y rejillas ───────────── */
.tarjeta {
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px 22px; box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: 16px; }
.rejilla > .tarjeta + .tarjeta, .rejilla > * > .tarjeta:first-child { margin-top: 0; }
.tarjeta.plana { box-shadow: none; }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tarjeta-cab h2, .tarjeta-cab h3 { margin: 0; }
.tarjeta-cab h2 { font-size: 1.02rem; }
.tarjeta-cab .sub { color: var(--texto-3); font-size: 12.5px; }
.tarjeta-cab > a.chico { font-weight: 600; }
.rejilla { display: grid; gap: 18px; }
.rejilla.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla.auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rejilla.auto-chica { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.span2 { grid-column: span 2; }
.mt { margin-top: 18px; } .mt2 { margin-top: 28px; } .mb { margin-bottom: 18px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.crece { flex: 1; min-width: 0; }
.derecha { text-align: right; }
.centro { text-align: center; }
.tenue { color: var(--texto-3); }
.suave { color: var(--texto-2); }
.chico { font-size: 12.5px; }
.negrita { font-weight: 650; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rojo { color: var(--error); } .verde { color: var(--ok); } .ambar { color: var(--aviso); }
.oculto { display: none !important; }

/* ───────────── KPIs ───────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi {
    --kpi-color: var(--marca); --kpi-fondo: var(--marca-3);
    position: relative; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px 15px;
    box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; gap: 2px; min-width: 0;
    transition: border-color var(--rapido), box-shadow var(--rapido), transform var(--rapido);
}
.kpi.ok { --kpi-color: var(--ok); --kpi-fondo: var(--ok-2); }
.kpi.aviso { --kpi-color: var(--aviso); --kpi-fondo: var(--aviso-2); }
.kpi.error { --kpi-color: var(--error); --kpi-fondo: var(--error-2); }
.kpi.acento { --kpi-color: var(--acento); --kpi-fondo: var(--acento-2); }
.kpi.info { --kpi-color: var(--info); --kpi-fondo: var(--info-2); }
.kpi-cab { display: flex; align-items: center; gap: 10px; }
.kpi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--kpi-fondo); color: var(--kpi-color); flex-shrink: 0; }
.kpi-ico .i { width: 18px; height: 18px; }
.kpi-etq { font-size: 12.5px; color: var(--texto-2); font-weight: 600; letter-spacing: .005em; min-width: 0; line-height: 1.3; }
.kpi-etq .i { color: var(--kpi-color); }
.kpi-estado { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--kpi-color); box-shadow: 0 0 0 4px var(--kpi-fondo); flex-shrink: 0; }
.kpi-valor { font-size: 1.75rem; font-weight: 750; font-family: var(--fuente-tit); margin-top: 6px; letter-spacing: -.03em; line-height: 1.15; }
.kpi-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 2px; }
.kpi-det { font-size: 12.5px; color: var(--texto-3); }
.kpi-spark { margin-left: auto; flex-shrink: 0; color: var(--kpi-color); }
.kpi-pie > div { min-width: 0; }
.kpi-link { position: absolute; inset: 0; border-radius: inherit; }
.kpi-link:focus-visible { outline-offset: -2px; }
.kpi:has(.kpi-link):hover { border-color: var(--marca-4); box-shadow: var(--sombra-3); transform: translateY(-1px); }
.tendencia {
    display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 650; padding: 1px 7px 1px 5px; border-radius: var(--pildora);
    background: var(--neutro-2); color: var(--neutro); white-space: nowrap;
}
.tendencia .i { width: 13px; height: 13px; }
.tendencia.buena { background: var(--ok-2); color: var(--ok-3); }
.tendencia.mala { background: var(--error-2); color: var(--error-3); }

/* ───────────── Tablas ───────────── */
.tabla-caja {
    overflow: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra-1);
    max-height: var(--alto-tabla, none);
}
.tabla-caja.alta { --alto-tabla: min(70vh, 720px); }
.tarjeta .tabla-caja { border: 0; border-radius: 0; margin: 0 -22px; box-shadow: none; }
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tabla th {
    text-align: left; font-weight: 650; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3);
    padding: 11px 14px; border-bottom: 1px solid var(--linea); background: var(--superficie-2); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.tabla th:first-child, .tabla td:first-child { padding-left: 22px; }
.tabla th:last-child, .tabla td:last-child { padding-right: 22px; }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--linea-2); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background var(--rapido); }
.tabla tbody tr:hover { background: var(--superficie-hover); }
.tabla tr.clic { cursor: pointer; }
.tabla tr.sel, .tabla tr.sel:hover { background: var(--marca-3) !important; box-shadow: inset 3px 0 0 var(--marca); }
.tabla tfoot td { font-weight: 700; background: var(--superficie-2); border-top: 1px solid var(--linea); position: sticky; bottom: 0; }
.tabla .acc { white-space: nowrap; text-align: right; }
.tabla .sub { display: block; color: var(--texto-3); font-size: 12px; }
.tabla.compacta td, .tabla.compacta th { padding: 8px 10px; }
.tabla.compacta th:first-child, .tabla.compacta td:first-child { padding-left: 4px; }
.tabla.compacta th:last-child, .tabla.compacta td:last-child { padding-right: 4px; }
.tabla-caja .tabla.compacta th:first-child, .tabla-caja .tabla.compacta td:first-child { padding-left: 16px; }
.tabla-caja .tabla.compacta th:last-child, .tabla-caja .tabla.compacta td:last-child { padding-right: 16px; }
.tabla td .btn.chico { min-height: 28px; }

/* ───────────── Formularios ───────────── */
.form { display: grid; gap: 16px; }
.form.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form .todo { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .etq { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.campo .ayuda { font-size: 12px; color: var(--texto-3); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=time],
input[type=tel], input[type=search], input[type=month], input[type=url], select, textarea, .input {
    font: inherit; font-size: 14px; padding: 8px 12px; min-height: 40px; border: 1px solid var(--borde-campo); border-radius: 10px; background: var(--superficie); color: var(--texto);
    width: 100%; min-width: 0; transition: border-color var(--rapido), box-shadow var(--rapido), background var(--rapido);
    box-shadow: var(--sombra-1);
}
input::placeholder, textarea::placeholder { color: var(--texto-3); opacity: .85; }
input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) { border-color: var(--borde-fuerte); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: var(--anillo); }
input:disabled, select:disabled, textarea:disabled { background: var(--superficie-3); color: var(--texto-3); cursor: not-allowed; }
input[aria-invalid=true], .invalid, .modified.invalid { border-color: var(--error); }
select {
    appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
select[multiple] { background-image: none; padding-right: 12px; }
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
input[type=checkbox], input[type=radio] { accent-color: var(--marca); }
.check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; font-size: 13.5px; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--marca); flex-shrink: 0; }
.check small { display: block; color: var(--texto-3); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.filtros {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radio);
    background: var(--superficie); border: 1px solid var(--linea);
}
.filtros .campo { min-width: 150px; }
.filtros .buscar { flex: 1; min-width: 200px; }
.validacion, .validation-message { color: var(--error); font-size: 12.5px; }
.seccion-form {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--marca); font-weight: 750; grid-column: 1 / -1; margin-top: 10px;
    padding-bottom: 6px; border-bottom: 1px solid var(--linea);
}
input[type=file] { font-size: 13px; color: var(--texto-2); }
input[type=file]::file-selector-button {
    font: inherit; font-weight: 600; margin-right: 10px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--linea); background: var(--superficie-3); color: var(--texto); cursor: pointer;
}
.zona-archivo {
    border: 1.5px dashed var(--borde-campo); border-radius: 14px; padding: 20px; text-align: center; background: var(--superficie-2); color: var(--texto-2);
    position: relative; cursor: pointer; transition: border-color var(--rapido), background var(--rapido);
}
.zona-archivo:hover, .zona-archivo:focus-within { border-color: var(--marca); background: var(--marca-3); }
.zona-archivo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zona-archivo .ico { font-size: 26px; color: var(--marca); }

/* ───────────── Chips, insignias, estados ───────────── */
.chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--pildora); font-size: 12px; font-weight: 600;
    white-space: nowrap; line-height: 1.55; border: 1px solid transparent;
}
.chip .i { width: 13px; height: 13px; }
.chip-gris { background: var(--neutro-2); color: var(--neutro); }
.chip-verde { background: var(--ok-2); color: var(--ok-3); }
.chip-ambar { background: var(--aviso-2); color: var(--aviso-3); }
.chip-rojo { background: var(--error-2); color: var(--error-3); }
.chip-azul { background: var(--info-2); color: var(--info-3); }
.chip-morado { background: var(--morado-2); color: var(--morado); }
.chip-marca { background: var(--marca-3); color: var(--marca); }
.chip-cobre { background: var(--acento-2); color: var(--acento-3); }
.chip.con-punto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge {
    display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: var(--pildora); background: var(--acento);
    color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.badge.rojo { background: var(--error); color: #fff; }
.badge .i { width: 11px; height: 11px; }
.punto-estado { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--texto-3); flex-shrink: 0; vertical-align: 1px; }
.punto-estado.verde { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-2); }
.punto-estado.ambar { background: #e59a1c; box-shadow: 0 0 0 3px var(--aviso-2); }
.punto-estado.rojo { background: var(--error); box-shadow: 0 0 0 3px var(--error-2); }
.punto-estado.azul { background: var(--info); box-shadow: 0 0 0 3px var(--info-2); }
.punto-estado.gris { background: var(--texto-3); }

/* ───────────── Alertas y avisos flotantes ───────────── */
.alerta {
    display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 13.5px; border: 1px solid;
    animation: entrar var(--medio) var(--curva);
}
.alerta > span:first-child { font-weight: 700; display: inline-grid; place-items: center; }
.alerta > span:first-child .i { width: 18px; height: 18px; }
.alerta > div { flex: 1; min-width: 0; }
.alerta-error { background: var(--error-2); color: var(--error-3); border-color: color-mix(in srgb, var(--error) 30%, transparent); }
.alerta-ok { background: var(--ok-2); color: var(--ok-3); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.alerta-aviso { background: var(--aviso-2); color: var(--aviso-3); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); }
.alerta-info { background: var(--info-2); color: var(--info-3); border-color: color-mix(in srgb, var(--info) 28%, transparent); }
.alerta a { color: inherit; font-weight: 650; text-decoration: underline; }
.alerta-x { background: none; border: 0; cursor: pointer; color: inherit; opacity: .7; border-radius: 6px; display: inline-grid; place-items: center; padding: 2px; }
.alerta-x:hover { opacity: 1; background: rgba(0,0,0,.06); }
.nota { background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--texto-2); }
.nota b { color: var(--texto); }

/* Avisos flotantes (Alertas): en la administración bajan a la esquina; en el portal se quedan en su lugar (docs/Usabilidad.md). */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: grid; gap: 10px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toasts .alerta { pointer-events: auto; margin: 0; box-shadow: var(--sombra-3); background-clip: padding-box; animation: toast-entrar .3s var(--curva); }
.toasts .alerta-ok { animation: toast-entrar .3s var(--curva), toast-salir .4s ease 7s forwards; }
.toasts .alerta-ok:hover { animation: toast-entrar .3s var(--curva); }
@keyframes toast-entrar { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toast-salir { to { opacity: 0; transform: translateY(8px); visibility: hidden; } }
.portal .toasts { position: static; width: auto; pointer-events: auto; display: block; }
.portal .toasts .alerta { margin-bottom: 14px; box-shadow: none; animation: none; }

/* ───────────── Modal ───────────── */
.modal-fondo { position: fixed; inset: 0; background: var(--velo); z-index: 90; backdrop-filter: blur(3px); animation: aparecer var(--rapido); }
.modal {
    position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100vw - 24px));
    max-height: calc(100vh - 40px); background: var(--superficie); border-radius: 18px; box-shadow: var(--sombra-2); display: flex; flex-direction: column;
    animation: subir var(--medio) var(--curva); border: 1px solid var(--linea);
}
.modal.modal-grande { width: min(980px, calc(100vw - 24px)); }
.modal.modal-chico { width: min(440px, calc(100vw - 24px)); }
.modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linea); }
.modal-cab h2 { margin: 0; font-size: 1.08rem; display: flex; align-items: center; gap: 8px; }
.modal-cab h2 .i { color: var(--marca); }
.modal-cuerpo { padding: 20px; overflow-y: auto; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--linea); background: var(--superficie-2); border-radius: 0 0 18px 18px; flex-wrap: wrap; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translate(-50%, -47%) scale(.98); } }
@keyframes caer { from { opacity: 0; transform: translate(var(--tx, 0), -6px); } }
.cmdk { --tx: -50%; }
@keyframes entrar { from { opacity: 0; transform: translateY(4px); } }

/* ───────────── Pestañas ───────────── */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 20px; overflow-x: auto; scrollbar-width: thin; }
.pestanas a, .pestanas button {
    padding: 10px 14px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--texto-3); cursor: pointer; font-weight: 550;
    border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; border-radius: 8px 8px 0 0;
    transition: color var(--rapido), background var(--rapido);
}
.pestanas a:hover, .pestanas button:hover { color: var(--texto); text-decoration: none; background: var(--superficie-hover); }
.pestanas .activa { color: var(--marca); border-bottom-color: var(--marca); font-weight: 650; }

/* ───────────── Vacío, carga, esqueletos ───────────── */
.vacio { text-align: center; padding: 36px 20px; color: var(--texto-2); display: flex; flex-direction: column; align-items: center; }
.vacio-icono { margin-bottom: 10px; }
.vacio-titulo { font-weight: 700; color: var(--texto); font-size: 15.5px; margin-bottom: 4px; font-family: var(--fuente-tit); }
.vacio p { max-width: 460px; margin: 0 auto .8em; }
.ilustracion { width: 132px; height: 104px; display: block; }
.ilustracion .il-fondo { fill: var(--marca-3); }
.ilustracion .il-tarjeta { fill: var(--superficie); stroke: var(--linea); }
.ilustracion .il-linea { fill: var(--superficie-3); }
.ilustracion .il-acento { fill: var(--acento); opacity: .85; }
.ilustracion .il-marca { fill: var(--marca); }
.ilustracion .il-chispa { fill: var(--acento); }
.ilustracion .il-ico { color: var(--marca); }
.ilustracion.listo .il-fondo { fill: var(--ok-2); }
.ilustracion.listo .il-ico, .ilustracion.listo .il-marca { color: var(--ok); fill: var(--ok); }
.cargando { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 56px 20px; color: var(--texto-3); }
.spinner { width: 18px; height: 18px; border: 2.5px solid var(--linea); border-top-color: var(--marca); border-radius: 50%; animation: girar .7s linear infinite; display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }
.esqueleto { display: grid; gap: 16px; }
.esq {
    border-radius: 10px; min-height: 14px;
    background: linear-gradient(90deg, var(--superficie-3) 0%, var(--superficie-2) 40%, var(--superficie-3) 80%);
    background-size: 300% 100%; animation: brillo 1.4s ease-in-out infinite;
}
.esq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.esq-kpi { height: 112px; border-radius: var(--radio); }
.esq-tit { height: 30px; width: min(320px, 60%); }
.esq-tabla { height: 260px; border-radius: var(--radio); }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ───────────── Lista y línea de tiempo ───────────── */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { padding: 12px 0; border-bottom: 1px solid var(--linea-2); display: flex; gap: 12px; align-items: flex-start; }
.lista > li:last-child { border-bottom: 0; }
.lista .ico {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--marca-3); color: var(--marca); flex-shrink: 0; font-size: 17px;
}
.lista .ico .i { width: 18px; height: 18px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--linea); }
.linea-tiempo li { position: relative; padding: 0 0 16px 14px; }
.linea-tiempo li::before { content: ""; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--marca); }
.linea-tiempo li.interno::before { border-color: var(--aviso); }
.linea-tiempo .meta { font-size: 12px; color: var(--texto-3); }

/* ───────────── Kanban ───────────── */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.kanban-col { background: var(--superficie-3); border-radius: 14px; padding: 10px; min-height: 200px; border: 1px solid var(--linea-2); }
.kanban-col.arrastrando { background: var(--marca-3); outline: 2px dashed var(--marca); }
.kanban-cab { display: flex; justify-content: space-between; align-items: center; padding: 3px 5px 10px; font-weight: 700; font-size: 13px; }
.kanban-tarjeta {
    background: var(--superficie); border-radius: 11px; padding: 11px 12px; margin-bottom: 9px; box-shadow: var(--sombra-1);
    border: 1px solid var(--linea); cursor: grab; font-size: 13px; border-left: 3px solid var(--linea); transition: box-shadow var(--rapido), transform var(--rapido);
}
.kanban-tarjeta:hover { box-shadow: var(--sombra-3); transform: translateY(-1px); }
.kanban-tarjeta.p-Urgente { border-left-color: var(--error); } .kanban-tarjeta.p-Alta { border-left-color: #e5891c; }
.kanban-tarjeta.p-Media { border-left-color: var(--info); } .kanban-tarjeta.p-Baja { border-left-color: var(--texto-3); }
.kanban-tarjeta .tit { font-weight: 600; margin: 3px 0 6px; line-height: 1.35; }
.kanban-tarjeta .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; color: var(--texto-3); font-size: 12px; }

/* ───────────── QR y pases ───────────── */
.qr-caja { background: #fff; border-radius: 16px; padding: 16px; display: inline-block; border: 1px solid var(--linea); }
.qr-caja img, .qr-caja svg { width: 220px; height: 220px; display: block; image-rendering: pixelated; }
.pase { max-width: 380px; margin: 0 auto; background: var(--superficie); border-radius: 24px; overflow: hidden; box-shadow: var(--sombra-2); text-align: center; }
.pase-cab { background: var(--degradado-marca); color: #fff; padding: 20px; }
.pase-cuerpo { padding: 20px; }
.codigo-corto { font-family: var(--mono); font-size: 26px; letter-spacing: .25em; font-weight: 700; color: var(--marca); }

/* ───────────── Caseta (guardia): alto contraste y modo noche ───────────── */
.caseta { max-width: 1100px; margin: 0 auto; --texto-3: var(--texto-2); }   /* guardia: textos secundarios con más contraste */
.caseta-de-noche .resultado-acceso.permitido { background: linear-gradient(140deg, #0f5c3c, #17804f); }
.caseta-de-noche .resultado-acceso.denegado { background: linear-gradient(140deg, #8c1f17, #b4342b); }
.caseta-de-noche .boton-caseta { border-color: #2c444d; }
.caseta-de-noche .boton-caseta .ico { background: #0f3a43; color: #7fdbe8; }
:root.caseta-noche .tema-sol { display: inline; } :root.caseta-noche .tema-luna { display: none; }
.caseta-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.boton-caseta {
    background: var(--superficie); border: 2px solid var(--linea); border-radius: 18px; padding: 22px 14px; text-align: center; cursor: pointer;
    font: inherit; box-shadow: var(--sombra); color: var(--texto); display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: border-color var(--rapido), transform var(--rapido), box-shadow var(--rapido); min-height: 132px; justify-content: center;
}
.boton-caseta:hover { border-color: var(--marca); text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra-3); }
.boton-caseta .ico { font-size: 34px; color: var(--marca); width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--marca-3); }
.boton-caseta .ico .i { width: 30px; height: 30px; stroke-width: 1.9; }
.boton-caseta b { font-size: 16px; }
.boton-caseta.principal-caseta { background: var(--degradado-marca); color: #fff; border-color: transparent; }
.boton-caseta.principal-caseta .ico { background: rgba(255,255,255,.16); color: #fff; }
.boton-caseta.principal-caseta small { color: rgba(255,255,255,.9); }
.resultado-acceso { border-radius: 20px; padding: 24px; text-align: center; color: #fff; box-shadow: var(--sombra-3); animation: entrar var(--medio) var(--curva); }
.resultado-acceso.permitido { background: linear-gradient(140deg, #13704a, #1f9a63); }
.resultado-acceso.denegado { background: linear-gradient(140deg, #a8261c, #d0443a); }
.resultado-acceso h2 { font-size: 1.8rem; margin: 4px 0; color: #fff; }
.resultado-acceso .i { width: 48px; height: 48px; stroke-width: 2.5; }
.lector { position: relative; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 4/3; max-width: 520px; margin: 0 auto; }
.lector video { width: 100%; height: 100%; object-fit: cover; }
.lector .marco { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.85); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.caseta-noche { display: flex; align-items: center; gap: 8px; }

/* ───────────── Portal del residente (estructura) ───────────── */
.portal-cab { background: var(--degradado-marca); color: #fff; position: relative; }
.portal-cab::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% -40%, rgba(255,255,255,.18), transparent 55%); pointer-events: none; }
.portal-cab .dentro { max-width: 1120px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.portal-cab a { color: #fff; }
.portal-cab .selector-prop { margin: 0; width: 100%; max-width: 360px; overflow: hidden; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.portal-cab .selector-prop:hover { background: rgba(255,255,255,.2); }
.portal-cab .selector-prop small, .portal-cab .selector-prop .i { color: rgba(255,255,255,.92); }
.portal-cab .menu-marca { color: #fff; }
.portal-cab .logo { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.portal-nav { background: var(--superficie); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 20; box-shadow: var(--sombra-1); }
.portal-nav .dentro { max-width: 1120px; margin: 0 auto; padding: 0 12px; display: flex; gap: 2px; overflow-x: auto; }
.portal-nav a { padding: 12px 13px; font-size: 13.5px; color: var(--texto-2); border-bottom: 3px solid transparent; white-space: nowrap; display: flex; gap: 8px; align-items: center; font-weight: 550; }
.portal-nav a .i { color: var(--texto-3); }
.portal-nav a:hover { color: var(--texto); text-decoration: none; }
.portal-nav a.active { color: var(--marca); border-bottom-color: var(--marca); font-weight: 700; }
.portal-nav a.active .i { color: var(--marca); }
.portal-cuerpo { max-width: 1120px; margin: 0 auto; padding: 24px 20px 90px; }
.navegacion-movil { display: none; }
.saldo-grande { font-size: 2.4rem; font-weight: 800; font-family: var(--fuente-tit); letter-spacing: -.03em; }
.tarjeta-unidad { display: block; color: var(--texto); border-left: 4px solid var(--marca); transition: box-shadow var(--rapido), transform var(--rapido); }
.tarjeta-unidad:hover { text-decoration: none; border-color: var(--acento); box-shadow: var(--sombra-3); transform: translateY(-2px); }

/* ───────────── Acceso / login ───────────── */
.acceso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--fondo); }
.acceso-arte {
    background: #072f38; color: #fff; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; position: relative; overflow: hidden;
    background-image:
        radial-gradient(circle at 100% 100%, rgba(225, 140, 80, .55), transparent 42%),
        radial-gradient(circle at 0% 0%, rgba(26, 160, 168, .45), transparent 45%),
        linear-gradient(160deg, #0a4b59, #062a33 70%);
}
.acceso-arte::before {
    content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
}
.acceso-arte > * { position: relative; z-index: 1; }
.acceso-arte .menu-marca { color: #fff; }
.acceso-arte .menu-marca small { color: rgba(255,255,255,.7); }
.acceso-arte .logo { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.acceso-arte h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.08; max-width: 540px; font-weight: 800; color: #fff; letter-spacing: -.035em; }
.acceso-arte h1 em { font-style: normal; color: #f2b183; }
.acceso-arte ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; max-width: 520px; }
.acceso-arte li { display: flex; gap: 12px; align-items: center; color: #d6e8ec; }
.acceso-arte li .i { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.acceso-maqueta {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 16px; max-width: 460px;
    backdrop-filter: blur(6px); box-shadow: 0 30px 60px rgba(0,0,0,.25); display: grid; gap: 12px;
}
.acceso-maqueta .am-fila { display: flex; gap: 10px; }
.acceso-maqueta .am-kpi { flex: 1; background: rgba(255,255,255,.1); border-radius: 12px; padding: 10px 12px; }
.acceso-maqueta .am-kpi small { display: block; font-size: 11px; color: rgba(255,255,255,.75); }
.acceso-maqueta .am-kpi b { font-size: 18px; font-family: var(--fuente-tit); }
.acceso-maqueta svg { width: 100%; height: 70px; display: block; }
.acceso-form { display: grid; place-items: center; padding: 40px 24px; }
.acceso-form .caja { width: min(410px, 100%); }
.acceso-form h2 { font-size: 1.5rem; }
.demo-usuarios { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--linea); }
.demo-usuarios form { display: inline; }
.demo-usuarios button { margin: 3px 3px 0 0; }

/* ───────────── Sitio público ───────────── */
.sitio-hero { color: #fff; padding: 70px 24px 60px; text-align: center; background-size: cover; background-position: center; }
.sitio-hero h1 { font-size: 2.6rem; color: #fff; }
.sitio-cuerpo { max-width: 1000px; margin: -30px auto 0; padding: 0 20px 60px; position: relative; }

/* ───────────── Barras de progreso / semáforos / gráficas sencillas ───────────── */
.barra-prog { height: 8px; background: var(--superficie-3); border-radius: 99px; overflow: hidden; }
.barra-prog > span { display: block; height: 100%; background: var(--marca); border-radius: 99px; transition: width .6s var(--curva); }
.barra-prog.verde > span { background: var(--ok); } .barra-prog.ambar > span { background: #e59a1c; } .barra-prog.rojo > span { background: var(--error); }
.grafica-barras { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 10px; }
.grafica-barras .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.grafica-barras .b { width: 100%; max-width: 38px; border-radius: 6px 6px 2px 2px; background: var(--g1); min-height: 2px; }
.grafica-barras .b.b2 { background: var(--g2); }
.grafica-barras .par { display: flex; gap: 3px; align-items: flex-end; width: 100%; justify-content: center; height: 100%; }
.grafica-barras .par .b { max-width: 18px; }
.grafica-barras .e { font-size: 11px; color: var(--texto-3); }
.leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--texto-2); flex-wrap: wrap; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--g1); vertical-align: -1px; }
.leyenda i.b2 { background: var(--g2); }

/* ───────────── Gráficas SVG (Components/Shared/Grafica*) ───────────── */
.grafica { position: relative; width: 100%; color: var(--texto-3); }
.grafica svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafica text { font-family: var(--fuente); font-size: 11px; fill: var(--g-eje); }
.grafica .g-rejilla { stroke: var(--g-rejilla); stroke-width: 1; shape-rendering: crispEdges; }
.grafica .g-cero { stroke: var(--borde-campo); stroke-width: 1; }
.grafica .g-barra { transition: opacity var(--rapido); }
.grafica .g-serie-0 { fill: var(--g1); stroke: var(--g1); color: var(--g1); }
.grafica .g-serie-1 { fill: var(--g2); stroke: var(--g2); color: var(--g2); }
.grafica .g-serie-2 { fill: var(--g3); stroke: var(--g3); color: var(--g3); }
.grafica .g-serie-3 { fill: var(--g4); stroke: var(--g4); color: var(--g4); }
.grafica .g-serie-4 { fill: var(--g5); stroke: var(--g5); color: var(--g5); }
.grafica .g-serie-5 { fill: var(--g6); stroke: var(--g6); color: var(--g6); }
.grafica .g-linea { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.grafica .g-area { stroke: none; opacity: .12; }
.grafica .g-punto { stroke: var(--superficie); stroke-width: 2; }
.grafica .g-grupo { outline: none; cursor: default; }
.grafica .g-grupo .g-hit { fill: transparent; stroke: none; }
.grafica .g-grupo:hover .g-hit, .grafica .g-grupo:focus-visible .g-hit { fill: var(--superficie-3); opacity: .6; }
.grafica:has(.g-grupo:hover) .g-barra, .grafica:has(.g-grupo:focus-visible) .g-barra { opacity: .55; }
.grafica .g-grupo:hover .g-barra, .grafica .g-grupo:focus-visible .g-barra { opacity: 1; }
.grafica .g-tip { opacity: 0; pointer-events: none; transition: opacity var(--rapido); }
.grafica .g-grupo:hover .g-tip, .grafica .g-grupo:focus-visible .g-tip, .grafica .g-seg:hover .g-tip, .grafica .g-seg:focus-visible .g-tip { opacity: 1; }
.grafica .g-tip rect { fill: var(--texto); }
.grafica .g-tip text { fill: var(--superficie); font-size: 11.5px; font-weight: 600; }
.grafica .g-tip text.g-tip-tit { font-weight: 700; opacity: .8; }
.grafica .g-seg { outline: none; transition: opacity var(--rapido); }
.grafica:has(.g-seg:hover) .g-seg:not(:hover), .grafica:has(.g-seg:focus-visible) .g-seg:not(:focus-visible) { opacity: .5; }
.grafica .g-dona-total { font-family: var(--fuente-tit); font-size: 22px; font-weight: 800; fill: var(--texto); }
.grafica .g-dona-etq { font-size: 11.5px; fill: var(--texto-3); }
.g-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--texto-2); }
.g-leyenda li { display: inline-flex; align-items: center; gap: 7px; }
.g-leyenda i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.g-leyenda b { color: var(--texto); font-weight: 650; font-variant-numeric: tabular-nums; }
.g-leyenda .g-serie-0 { background: var(--g1); } .g-leyenda .g-serie-1 { background: var(--g2); } .g-leyenda .g-serie-2 { background: var(--g3); }
.g-leyenda .g-serie-3 { background: var(--g4); } .g-leyenda .g-serie-4 { background: var(--g5); } .g-leyenda .g-serie-5 { background: var(--g6); }
.dona-caja { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dona-caja .grafica { width: 168px; flex-shrink: 0; }
.dona-caja .g-leyenda { flex-direction: column; margin: 0; flex: 1; min-width: 150px; gap: 9px; }
.dona-caja .g-leyenda li { justify-content: flex-start; }
.dona-caja .g-leyenda b { margin-left: auto; }
.sparkline { display: block; overflow: visible; }
.sparkline .s-linea { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sparkline .s-area { fill: currentColor; opacity: .12; stroke: none; }
.sparkline .s-fin { fill: currentColor; stroke: var(--superficie); stroke-width: 2; }

.estado-equipo { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie); }
.estado-equipo .ico { font-size: 22px; }

/* ───────────── Impresión (etiquetas QR, estados de cuenta) ───────────── */
.etiquetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.etiqueta-qr { border: 1.5px solid #222; border-radius: 12px; padding: 12px; text-align: center; break-inside: avoid; background: #fff; color: #111; }
.etiqueta-qr img { width: 150px; height: 150px; }
.etiqueta-qr b { display: block; font-size: 14px; }
.etiqueta-qr small { font-size: 11px; color: #444; }
@media print {
    :root { color-scheme: light; }
    .menu, .barra, .no-imprimir, .portal-nav, .portal-cab, .navegacion-movil, .toasts, .cmdk, .cmdk-fondo { display: none !important; }
    body { background: #fff; color: #000; }
    .contenido { padding: 0; max-width: none; animation: none; }
    .tarjeta, .kpi { box-shadow: none; border: 0; padding: 0; }
}

/* ───────────── Responsivo ───────────── */
@media (max-width: 1100px) {
    .rejilla.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rejilla.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contenido { padding: 24px 22px 60px; }
}
@media (max-width: 860px) {
    .menu { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform var(--medio) var(--curva); box-shadow: var(--sombra-2); width: min(300px, 86vw); }
    .app.menu-abierto .menu { transform: translateX(0); }
    .app.menu-abierto .velo { display: block; position: fixed; inset: 0; background: var(--velo); z-index: 35; animation: aparecer var(--rapido); }
    .btn-menu { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; font-size: 20px; cursor: pointer; border-radius: 10px; color: var(--texto); }
    .btn-menu:hover { background: var(--superficie-3); }
    .barra { padding: 0 10px; gap: 6px; }
    .barra-titulo .solo-ancho { display: none; }
    .contenido { padding: 18px 14px 80px; }
    .usuario .datos { display: none; }
    .usuario { padding: 3px; }
    .rejilla.c2, .rejilla.c3, .rejilla.c4, .form.c2, .form.c3 { grid-template-columns: minmax(0, 1fr); }
    .span2 { grid-column: auto; }
    .acceso { grid-template-columns: 1fr; }
    .acceso-arte { display: none; }
    .encabezado { align-items: flex-start; }
    .etiquetas { grid-template-columns: repeat(2, 1fr); }
    .portal-cuerpo { padding: 16px 14px 90px; }
    .navegacion-movil {
        display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: var(--superficie);
        border-top: 1px solid var(--linea); z-index: 50; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px rgba(0,0,0,.06);
    }
    .navegacion-movil a { display: flex; flex-direction: column; align-items: center; padding: 8px 2px 7px; font-size: 11px; color: var(--texto-2); gap: 2px; }
    .navegacion-movil a .ico { font-size: 19px; }
    .navegacion-movil a.active { color: var(--marca); font-weight: 600; }
    .portal-nav { display: none; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .kpi { padding: 14px; }
    .kpi-valor { font-size: 1.35rem; }
    .kpi-spark { display: none; }
    .saldo-grande { font-size: 2rem; }
    .tarjeta { padding: 16px; }
    .tarjeta .tabla-caja { margin: 0 -16px; }
    .tabla th:first-child, .tabla td:first-child { padding-left: 16px; }
    .tabla th:last-child, .tabla td:last-child { padding-right: 16px; }
    .toasts { right: 12px; left: 12px; bottom: 12px; width: auto; }
    .filtros { padding: 10px; }
    .filtros .campo, .filtros .buscar { min-width: 0; flex: 1 1 140px; }
}
@media (max-width: 420px) {
    .kpis { grid-template-columns: minmax(0, 1fr); }
    h1 { font-size: 1.45rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Atención: accesibilidad, portal sencillo, intercomunicador y calendario
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────── Utilidades de accesibilidad ───────────── */
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar-contenido { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--superficie); color: var(--marca); padding: 10px 16px; border-radius: 10px; font-weight: 700; box-shadow: var(--sombra-2); }
.saltar-contenido:focus { top: 8px; }
.solo-movil { display: none !important; }
.velo-transparente { position: fixed; inset: 0; z-index: 55; }

/* Botón "A A" y panel de preferencias */
.selector-accesible { position: relative; }
.btn-aa {
    display: inline-flex; align-items: center; justify-content: center; gap: 1px; height: 38px; min-width: 40px; padding: 0 9px; border-radius: 10px; cursor: pointer; font: inherit;
    font-weight: 800; color: var(--texto-2); background: transparent; border: 1px solid transparent;
}
.btn-aa:hover { background: var(--superficie-3); color: var(--texto); }
.portal .btn-aa { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); }
.portal .btn-aa:hover { background: rgba(255,255,255,.24); color: #fff; }
.desplegable-accesible { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(380px, calc(100vw - 24px)); color: var(--texto); padding: 14px 16px; box-shadow: var(--sombra-2); animation: caer var(--medio) var(--curva); }
.panel-accesible { display: grid; gap: 12px; }
.pa-titulo { font-weight: 700; margin-bottom: 6px; }
.pa-opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pa-op {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 64px; padding: 8px 6px; font: inherit; cursor: pointer;
    background: var(--superficie); color: var(--texto); border: 2px solid var(--linea); border-radius: 12px; font-weight: 800; transition: border-color var(--rapido), background var(--rapido);
}
.pa-op:hover { border-color: var(--marca-4); }
.pa-op .i { width: 22px; height: 22px; }
.pa-op small { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.pa-op.activa { border-color: var(--marca); background: var(--marca-3); box-shadow: inset 0 0 0 1px var(--marca); }
.pa-interruptor {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; cursor: pointer; min-height: 60px; padding: 10px 12px;
    background: var(--superficie); color: var(--texto); border: 2px solid var(--linea); border-radius: 12px;
}
.pa-interruptor:hover { border-color: var(--marca-4); }
.pa-interruptor small { display: block; color: var(--texto-2); font-size: 13px; }
.pa-ico { font-size: 22px; width: 30px; text-align: center; color: var(--marca); display: inline-grid; place-items: center; }
.pa-sw { flex-shrink: 0; width: 50px; height: 28px; border-radius: 99px; background: #8d979c; position: relative; transition: background var(--rapido); }
.pa-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left var(--rapido) var(--curva); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pa-sw.on { background: var(--ok); }
.pa-sw.on::after { left: 25px; }
.pa-listo { color: var(--ok); font-weight: 700; }

/* ───────────── Portal sencillo ───────────── */
.saludo { margin-bottom: 16px; }
.saludo h1 { font-size: 1.85rem; margin: 0; }
.titulo-seccion { font-size: 1.25rem; margin: 26px 0 12px; }
.mas-grupo { font-size: 1.15rem; margin: 26px 0 10px; }
.grande-texto { font-size: 15.5px; }
.estado-grande {
    display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 24px 26px; border-radius: 22px; margin-bottom: 18px;
    border: 2px solid var(--linea); background: var(--superficie); box-shadow: var(--sombra-3); position: relative; overflow: hidden;
}
.estado-grande::before {
    content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--eg-color, var(--marca)) 16%, transparent), transparent 70%); pointer-events: none;
}
.estado-grande > * { position: relative; }
.estado-grande .eg-titulo { font-size: 1.75rem; font-weight: 800; font-family: var(--fuente-tit); letter-spacing: -.02em; line-height: 1.25; }
.estado-grande .eg-titulo span { font-size: 1.2rem; font-weight: 600; color: var(--texto-2); }
.estado-grande .eg-sub { font-size: 15.5px; color: var(--texto-2); margin-top: 4px; }
.estado-grande .eg-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.estado-grande.al-corriente { --eg-color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-2); }
.estado-grande.al-corriente .eg-titulo { color: var(--ok-3); }
.estado-grande.pendiente { --eg-color: var(--acento); border-color: color-mix(in srgb, var(--acento) 40%, transparent); background: var(--acento-2); }
.estado-grande.atrasado { --eg-color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); background: var(--error-2); }
.estado-grande.atrasado .eg-sub:first-of-type { color: var(--error-3); font-weight: 600; }

.mosaicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.mosaicos.grandes { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.mosaico {
    position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 18px; color: var(--texto);
    background: var(--superficie); border: 2px solid var(--linea); box-shadow: var(--sombra); font-size: 15.5px; line-height: 1.3;
    transition: border-color var(--rapido), background var(--rapido), transform var(--rapido), box-shadow var(--rapido);
}
.mosaico:hover { border-color: var(--marca); text-decoration: none; background: var(--marca-3); transform: translateY(-2px); box-shadow: var(--sombra-3); }
.mosaico .ico {
    font-size: 30px; flex-shrink: 0; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--marca-3); color: var(--marca);
}
.mosaico .ico .i { width: 26px; height: 26px; stroke-width: 1.9; }
.mosaico:hover .ico { background: var(--marca); color: var(--sobre-marca); }
.mosaico b { display: block; }
.mosaico small { display: block; color: var(--texto-2); font-size: 13px; font-weight: 400; margin-top: 2px; }
.mosaicos.grandes .mosaico { flex-direction: column; justify-content: center; text-align: center; min-height: 140px; gap: 10px; font-size: 16px; }
.mosaicos.grandes .mosaico .ico { width: 64px; height: 64px; border-radius: 18px; }
.mosaicos.grandes .mosaico .ico .i { width: 32px; height: 32px; }
.mosaico-badge { height: auto; padding: 3px 9px; font-size: 12px; }
.portal-nav a .badge { margin-left: 2px; }
.navegacion-movil a .ico { position: relative; }
.navegacion-movil a .ico .badge { position: absolute; top: -4px; right: -14px; font-size: 10px; min-width: 17px; height: 17px; }

/* ───────────── Intercomunicador (chat) ───────────── */
.chat { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); min-height: 0; overflow: hidden; }
.chat-grande { height: calc(100vh - 290px); min-height: 440px; }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 16px; background: var(--superficie-2); display: flex; flex-direction: column; gap: 8px; }
.chat-bienvenida { text-align: center; color: var(--texto-2); margin: auto; max-width: 440px; font-size: 15.5px; }
.chat-dia { text-align: center; margin: 8px 0; }
.chat-dia span { display: inline-block; background: var(--superficie-3); color: var(--texto-2); font-size: 12.5px; font-weight: 600; padding: 3px 12px; border-radius: 99px; }
.burbuja { max-width: min(78%, 560px); padding: 10px 14px; border-radius: 18px; box-shadow: var(--sombra-1); font-size: 15px; line-height: 1.45; }
.burbuja.suya { align-self: flex-start; background: var(--superficie); border: 1px solid var(--linea); border-bottom-left-radius: 6px; }
.burbuja.mia { align-self: flex-end; background: var(--marca); color: var(--sobre-marca); border-bottom-right-radius: 6px; }
.burbuja.mia a:not(.btn) { color: inherit; text-decoration: underline; }
.burbuja.automatica { background: var(--info-2); color: var(--info-3); border: 1px dashed color-mix(in srgb, var(--info) 45%, transparent); }
.burbuja-autor { font-size: 12px; font-weight: 700; opacity: .85; margin-bottom: 2px; }
.burbuja-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja-foto { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; margin-top: 6px; object-fit: cover; }
.burbuja-hora { font-size: 11.5px; opacity: .85; text-align: right; margin-top: 4px; }
.chat-escribir { border-top: 1px solid var(--linea); padding: 12px; display: grid; gap: 10px; background: var(--superficie); }
.chat-escribir textarea { min-height: 70px; font-size: 16px; }
.chat-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.boton-archivo { position: relative; overflow: hidden; }
.boton-archivo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.adjunto-listo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--ok-2); color: var(--ok-3); border-radius: 10px; padding: 8px 12px; }
.respuestas-rapidas { display: flex; gap: 6px; flex-wrap: wrap; }
.respuestas-rapidas .chip { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; }

.chat-admin { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; height: calc(100vh - 300px); min-height: 520px; }
.chat-admin .chat { height: 100%; }
.bandeja { overflow-y: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 6px; }
.bandeja-item { display: block; width: 100%; text-align: left; font: inherit; color: var(--texto); background: none; border: 0; border-radius: 10px; padding: 10px 11px; cursor: pointer; border-bottom: 1px solid var(--linea-2); }
.bandeja-item:hover { background: var(--superficie-hover); }
.bandeja-item.activa { background: var(--marca-3); box-shadow: inset 3px 0 0 var(--marca); }
.bandeja-item.sin-leer b { color: var(--marca); }
.bandeja-vista { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.chat-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--linea); }
.chat-asignar { width: auto; min-width: 170px; }
.chat-vacio { margin: auto; }

/* ───────────── Horario semanal ───────────── */
.horario-semana { display: grid; gap: 6px; }
.horario-dia { display: grid; grid-template-columns: 140px 120px auto 120px; align-items: center; gap: 8px; }
.horario-dia input[type=time] { width: 120px; }

/* ───────────── Calendario de reservaciones ───────────── */
.cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal-mes { font-size: 1.05rem; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dsem { text-align: center; font-size: 12px; font-weight: 700; color: var(--texto-2); padding: 4px 0; }
.cal-dia {
    min-height: 74px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); padding: 4px; text-align: left; font: inherit;
    display: flex; flex-direction: column; gap: 2px; cursor: pointer; color: var(--texto); min-width: 0;
}
.cal-dia.vacio { border: 0; background: none; cursor: default; }
.cal-dia:hover:not(.vacio) { border-color: var(--marca); }
.cal-dia.pasado { background: var(--superficie-2); color: var(--texto-3); }
.cal-dia.hoy .cal-num { background: var(--marca); color: var(--sobre-marca); }
.cal-dia.sel { box-shadow: inset 0 0 0 2px var(--acento); border-color: var(--acento); }
.cal-num { font-weight: 700; font-size: 13px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.cal-evento { display: block; font-size: 11px; line-height: 1.3; padding: 1px 5px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-verde { background: var(--ok-2); color: var(--ok-3); }
.cal-cobre { background: var(--acento-2); color: var(--acento-3); }
.cal-ambar { background: var(--aviso-2); color: var(--aviso-3); }
.cal-gris, .cal-rojo { background: var(--neutro-2); color: var(--neutro); }
.leyenda i.cal-verde { background: var(--ok); } .leyenda i.cal-cobre { background: var(--acento); } .leyenda i.cal-ambar { background: #e59a1c; }
.cal-mas { font-size: 11px; color: var(--texto-2); }

/* ───────────── Preferencias: letra más grande ───────────── */
html.letra-grande body { zoom: 1.15; }
html.letra-muy-grande body { zoom: 1.3; }
html.letra-grande .menu { height: calc(100vh / 1.15); }
html.letra-muy-grande .menu { height: calc(100vh / 1.3); }
html.letra-grande .modal { max-height: calc((100vh - 40px) / 1.15); }
html.letra-muy-grande .modal { max-height: calc((100vh - 40px) / 1.3); }
html.letra-grande .chat-grande, html.letra-grande .chat-admin { height: calc((100vh - 300px) / 1.15); }
html.letra-muy-grande .chat-grande, html.letra-muy-grande .chat-admin { height: calc((100vh - 300px) / 1.3); min-height: 420px; }

/* ───────────── Preferencias: alto contraste (AA reforzado; siempre claro) ───────────── */
html.alto-contraste {
    color-scheme: light;
    --barra-fondo: rgba(255, 255, 255, .95);
    --marca: #003847; --marca-2: #00222c; --marca-3: #d4e6ea; --marca-4: #9cc3cc; --acento: #8f3f0c; --acento-2: #fbe3d2; --acento-3: #6a2d07;
    --fondo: #ffffff; --superficie: #ffffff; --superficie-2: #f4f4f4; --superficie-3: #ececec; --superficie-hover: #eef4f5;
    --linea: #5c5c5c; --linea-2: #8a8a8a; --borde-campo: #3a3a3a; --borde-fuerte: #000000;
    --texto: #000000; --texto-2: #1c1c1c; --texto-3: #333333;
    --ok: #0b5a33; --ok-3: #073d22; --aviso: #6b3b00; --aviso-3: #4d2a00; --error: #8f1109; --error-3: #6b0c06; --info: #0b3f78; --info-3: #082d56;
    --degradado-marca: linear-gradient(135deg, #003847, #00505f);
}
html.alto-contraste a:not(.btn):not(.menu-item):not(.mosaico):not(.boton-caseta) { text-decoration: underline; }
html.alto-contraste .tarjeta, html.alto-contraste .kpi, html.alto-contraste .mosaico, html.alto-contraste .boton-caseta,
html.alto-contraste input, html.alto-contraste select, html.alto-contraste textarea { border-width: 2px; border-color: #3a3a3a; }
html.alto-contraste .btn.sec { border: 2px solid #000; }
html.alto-contraste :focus-visible { outline: 3px solid #000; outline-offset: 3px; box-shadow: 0 0 0 5px #ffd400; }
html.alto-contraste .chip { border-color: currentColor; }
html.alto-contraste .menu { border-right: 2px solid #000; }
html.alto-contraste .menu-item { color: #000; }
html.alto-contraste .menu-item.active { background: #003847; color: #fff; }
html.alto-contraste .burbuja.suya { border: 2px solid #000; }

/* ───────────── Preferencias: modo fácil (objetivos táctiles ≥ 48 px) ───────────── */
html.modo-facil body { font-size: 16px; }
html.modo-facil .btn { min-height: 48px; padding: 11px 18px; font-size: 15.5px; }
html.modo-facil .btn.chico { min-height: 44px; padding: 8px 14px; font-size: 14.5px; }
html.modo-facil .btn-icono, html.modo-facil .campana, html.modo-facil .btn-aa { min-width: 48px; min-height: 48px; }
html.modo-facil input[type=text], html.modo-facil input[type=email], html.modo-facil input[type=password], html.modo-facil input[type=number],
html.modo-facil input[type=date], html.modo-facil input[type=time], html.modo-facil input[type=tel], html.modo-facil input[type=search],
html.modo-facil select, html.modo-facil textarea { min-height: 48px; font-size: 16px; }
html.modo-facil .check { font-size: 15.5px; align-items: center; min-height: 44px; }
html.modo-facil .check input { width: 24px; height: 24px; margin-top: 0; }
html.modo-facil .portal-nav a { padding: 15px 14px; font-size: 15.5px; }
html.modo-facil .navegacion-movil a { min-height: 60px; font-size: 13px; }
html.modo-facil .menu-item { min-height: 44px; font-size: 15px; }
html.modo-facil .avanzado { display: none !important; }
html.modo-facil .mosaicos.grandes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
html.modo-facil .mosaicos.grandes .mosaico { min-height: 156px; font-size: 18px; }
html.modo-facil .encabezado .sub, html.modo-facil .tenue, html.modo-facil .chico { font-size: 14.5px; }
html.modo-facil .tabla { font-size: 15px; }
html.modo-facil a, html.modo-facil button { touch-action: manipulation; }

@media (max-width: 860px) {
    .solo-movil { display: inline-flex !important; }
    .solo-escritorio { display: none !important; }
    .navegacion-movil { display: flex; }
    .navegacion-movil a { flex: 1; }
    .estado-grande { padding: 20px 18px; }
    .estado-grande .eg-titulo { font-size: 1.45rem; }
    .estado-grande .eg-acciones, .estado-grande .eg-acciones .btn { width: 100%; }
    .mosaicos.grandes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.modo-facil .mosaicos.grandes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chat-grande { height: calc(100vh - 330px); min-height: 380px; }
    .chat-admin { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .chat-admin .bandeja { max-height: 70vh; }
    .chat-admin .chat { height: calc(100vh - 220px); min-height: 420px; display: none; }
    .chat-admin.con-conversacion .chat { display: flex; }
    .chat-admin.con-conversacion .bandeja { display: none; }
    .burbuja { max-width: 88%; }
    .horario-dia { grid-template-columns: 1fr 100px auto 100px; }
    .horario-dia input[type=time] { width: 100%; }
    .cal-dia { min-height: 52px; }
    .cal-evento { font-size: 0; height: 6px; padding: 0; }
    .desplegable-accesible { position: fixed; right: 12px; left: 12px; top: 70px; width: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   Portal del condómino: legible para personas mayores (docs/Usabilidad.md)
   Todo va dentro de .portal (LayoutPortal) para no mover la administración.
   Letra base 18 px, objetivos táctiles ≥ 48 px (56 px en modo fácil), contraste AA,
   foco muy visible, un campo por renglón y ventanas a pantalla completa en el celular.
   ═══════════════════════════════════════════════════════════════════ */
.aa-texto { display: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .esq { animation: none; }
}

.portal {
    /* Cobre más oscuro (5.9:1 con letra blanca) y grises con AA reforzado. */
    --acento: #A8401F;
    --acento-3: #7E2F16;
    --texto-2: #3f4c56;
    --texto-3: #4f5d68;
    --borde-campo: #7b8a91;
    font-size: 18px; line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
    :root:not(.tema-claro):not(.alto-contraste) .portal { --acento: #e8925a; --acento-3: #f3b58c; --texto-2: #c3d0d6; --texto-3: #a9bac1; --borde-campo: #6f8c97; }
}
:root.tema-oscuro:not(.alto-contraste) .portal { --acento: #e8925a; --acento-3: #f3b58c; --texto-2: #c3d0d6; --texto-3: #a9bac1; --borde-campo: #6f8c97; }
html.alto-contraste .portal { --acento: #8f3f0c; --texto-2: #1c1c1c; --texto-3: #333333; --borde-campo: #3a3a3a; }
.portal h1 { font-size: 1.9rem; }
.portal h2 { font-size: 1.35rem; }
.portal h3 { font-size: 1.2rem; }
.portal :focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; box-shadow: 0 0 0 6px #ffd84d; border-radius: 8px; }
.portal-cuerpo a:not([class]) { text-decoration: underline; text-underline-offset: 3px; }

/* Encabezado */
.portal .portal-cab .dentro { padding: 10px 14px; gap: 10px; }
.portal .selector-prop { min-height: 52px; }
.portal .selector-prop b { font-size: 17px; }
.portal .selector-prop small { font-size: 14px; opacity: .95; }
.portal .barra-acciones { gap: 4px; }
.portal .cab-boton, .portal .btn-aa {
    position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 56px; min-height: 56px; padding: 4px 6px; border-radius: 12px; color: #fff; text-decoration: none; line-height: 1;
}
.portal .cab-boton:hover { background: rgba(255,255,255,.16); text-decoration: none; color: #fff; }
.portal .cab-boton small, .portal .btn-aa .aa-texto { display: block; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.portal .btn-aa { height: auto; border-color: rgba(255,255,255,.45); }
.portal .aa-letras { display: inline-flex; align-items: flex-end; gap: 1px; line-height: 1; }
.portal .cab-ico { position: relative; font-size: 22px; line-height: 1; }
.portal .cab-ico .i { width: 24px; height: 24px; }
.portal .cab-ico .badge { position: absolute; top: -9px; right: -16px; }
.portal .cab-boton .avatar { width: 30px; height: 30px; font-size: 12.5px; color: #0A2F2E; background: #fff; }
.portal .portal-cab .btn.chico { color: #fff; border: 1px solid rgba(255,255,255,.4); box-shadow: none; }
.portal .desplegable-accesible { font-size: 17px; }
.portal .portal-cab :focus-visible { outline-color: #fff; }

/* Menús */
.portal .portal-nav a { font-size: 17px; padding: 15px 14px; min-height: 56px; border-bottom-width: 3px; }
.portal .portal-nav a.active { background: var(--marca-3); }
.portal .portal-nav .dentro { flex-wrap: wrap; overflow: visible; }   /* sin opciones escondidas a la derecha */

/* Texto y controles */
.portal .btn { font-size: 17px; min-height: 48px; padding: 11px 18px; border-radius: 12px; }
.portal .btn.chico { font-size: 16px; min-height: 44px; padding: 8px 14px; }
.portal .btn.grande { font-size: 19px; min-height: 56px; padding: 14px 22px; }
.portal .btn-icono { min-width: 48px; min-height: 48px; font-size: 20px; }
.portal .alerta-x { min-width: 44px; min-height: 44px; font-size: 18px; opacity: .85; }
.portal-cuerpo .tenue, .portal-cuerpo .chico, .portal-cuerpo .suave { font-size: 16px; }
.portal-cuerpo small { font-size: 15.5px; }
.portal .encabezado .sub { font-size: 17px; }
.portal .alerta { font-size: 17px; padding: 14px 16px; border-width: 2px; }
.portal .nota { font-size: 16.5px; padding: 13px 16px; }
.portal .chip { font-size: 15px; padding: 3px 11px; }
.portal .chip .i { width: 16px; height: 16px; }
.portal .badge { font-size: 13px; min-width: 22px; height: 22px; }
.portal table.tabla { font-size: 16.5px; }
.portal .tabla th { font-size: 14px; }
.portal .tabla .sub { font-size: 15px; }
.portal .campo { gap: 7px; }
.portal .campo > label, .portal .etq { font-size: 17px; color: var(--texto); }
.portal .campo .ayuda { font-size: 15.5px; color: var(--texto-2); }
.portal input[type=text], .portal input[type=email], .portal input[type=password], .portal input[type=number], .portal input[type=date],
.portal input[type=datetime-local], .portal input[type=time], .portal input[type=tel], .portal input[type=search], .portal input[type=month],
.portal select, .portal textarea {
    font-size: 18px; min-height: 52px; padding: 12px 14px; border: 2px solid var(--borde-campo); border-radius: 12px;
}
.portal select { padding-right: 42px; background-size: 20px; }
.portal textarea { min-height: 120px; }
.portal .check { font-size: 17px; align-items: center; min-height: 48px; gap: 12px; }
.portal .check input { width: 26px; height: 26px; margin-top: 0; flex-shrink: 0; }
.portal .form { gap: 18px; }
.portal .form.c2, .portal .form.c3 { grid-template-columns: minmax(0, 1fr); }   /* un campo por renglón */
.portal .form .todo { grid-column: auto; }
.portal .lista > li { padding: 14px 0; }
.portal .lista .ico { width: 46px; height: 46px; font-size: 21px; border-radius: 13px; }
.portal .lista .ico .i { width: 22px; height: 22px; }
.portal .vacio { font-size: 17px; }
.portal .vacio-titulo { font-size: 19px; }
.portal .cargando { font-size: 18px; color: var(--texto-2); }
.portal .zona-archivo { padding: 26px 18px; font-size: 18px; border: 2px dashed var(--borde-campo); min-height: 120px; display: grid; place-items: center; gap: 6px; }
.portal .zona-archivo .ico { font-size: 36px; }
.portal .grupo-btn button { font-size: 17px; min-height: 52px; padding: 10px 16px; }
.portal .pestanas a, .portal .pestanas button { font-size: 17px; min-height: 52px; padding: 12px 16px; }
.portal .mosaico { font-size: 18px; min-height: 84px; }
.portal .mosaico small { font-size: 16px; }
.portal .mosaicos.grandes .mosaico { font-size: 18.5px; }
.portal .kpi-etq { font-size: 14.5px; }
.portal .kpi-det { font-size: 15px; }
.portal .modal-cab h2 { font-size: 1.3rem; }
.portal .modal-pie { flex-wrap: wrap; }
.portal .saludo .miga { font-size: 16px; color: var(--texto-2); }
.portal .estado-grande .eg-sub { font-size: 17.5px; }
.portal .grande-texto { font-size: 17.5px; }

/* Modo fácil en el portal: todavía más grande (objetivos de 56 px). */
html.modo-facil .portal .btn, html.modo-facil .portal .btn.chico { min-height: 56px; font-size: 18px; }
html.modo-facil .portal input[type=text], html.modo-facil .portal input[type=email], html.modo-facil .portal input[type=password],
html.modo-facil .portal input[type=number], html.modo-facil .portal input[type=date], html.modo-facil .portal input[type=datetime-local],
html.modo-facil .portal input[type=time], html.modo-facil .portal input[type=tel], html.modo-facil .portal input[type=search],
html.modo-facil .portal select { min-height: 58px; font-size: 19px; }
html.modo-facil .portal .check { min-height: 56px; }
html.modo-facil .portal .portal-nav a { min-height: 60px; font-size: 18px; }
html.modo-facil .portal-cuerpo .tenue, html.modo-facil .portal-cuerpo .chico, html.modo-facil .portal-cuerpo .suave { font-size: 16.5px; }
html.modo-facil .boton-xl { min-height: 64px; }

/* ───────────── Componentes del portal (Components/Portal) ───────────── */
.boton-xl {
    display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 12px 20px; border-radius: 16px;
    font: inherit; font-size: 19px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer;
    border: 2px solid transparent; color: var(--sobre-marca); background: var(--marca); box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 6px 16px rgba(11, 101, 119, .18);
    transition: filter var(--rapido), transform .06s, box-shadow var(--rapido);
}
.boton-xl.bloque { width: 100%; }
.boton-xl:hover { filter: brightness(1.08); text-decoration: none; color: var(--sobre-marca); }
.boton-xl:active { transform: translateY(1px); }
.boton-xl .bx-ico { font-size: 26px; line-height: 1; flex-shrink: 0; display: inline-grid; place-items: center; }
.boton-xl .bx-ico .i { width: 26px; height: 26px; }
.boton-xl .bx-texto { min-width: 0; }
.boton-xl .bx-texto b { display: block; }
.boton-xl .bx-texto small { display: block; font-size: 15.5px; font-weight: 500; opacity: .95; }
.boton-xl.bx-accion { background: var(--acento); color: var(--sobre-acento); box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 6px 16px rgba(154, 79, 36, .22); }
.boton-xl.bx-accion:hover { color: var(--sobre-acento); }
.boton-xl.bx-ok { background: var(--ok); color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.boton-xl.bx-peligro { background: var(--error); color: #fff; }
.boton-xl.bx-secundario { background: var(--superficie); color: var(--marca); border-color: var(--marca); box-shadow: none; }
.boton-xl.bx-secundario:hover { background: var(--marca-3); color: var(--marca); filter: none; }
.boton-xl:disabled { opacity: .55; cursor: not-allowed; filter: none; }
@media (prefers-color-scheme: dark) { :root:not(.tema-claro):not(.alto-contraste) .boton-xl.bx-ok { color: #06281a; } :root:not(.tema-claro):not(.alto-contraste) .boton-xl.bx-peligro { color: #2b0805; } }
:root.tema-oscuro:not(.alto-contraste) .boton-xl.bx-ok { color: #06281a; }
:root.tema-oscuro:not(.alto-contraste) .boton-xl.bx-peligro { color: #2b0805; }
.botones-apilados { display: grid; gap: 12px; }

.paso-a-paso { margin: 0 0 18px; }
.paso-regresar {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; margin-bottom: 12px; border-radius: 12px;
    border: 2px solid var(--linea); background: var(--superficie); color: var(--marca); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
.paso-regresar:hover { border-color: var(--marca); text-decoration: none; }
.paso-cuenta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.paso-num { font-weight: 700; color: var(--texto-2); font-size: 16.5px; }
.paso-puntos { display: flex; gap: 6px; }
.paso-puntos i { width: 30px; height: 8px; border-radius: 99px; background: var(--linea); }
.paso-puntos i.hecho { background: var(--ok); }
.paso-puntos i.actual { background: var(--marca); }
.paso-titulo { font-size: 1.55rem; margin: 8px 0 0; }
.paso-titulo:focus { outline: none; }

.mensaje-listo {
    text-align: center; max-width: 640px; margin: 10px auto 18px; padding: 32px 22px; border-radius: 24px; background: var(--ok-2);
    border: 2px solid color-mix(in srgb, var(--ok) 40%, transparent);
}
.mensaje-listo.espera { background: var(--aviso-2); border-color: color-mix(in srgb, var(--aviso) 40%, transparent); }
.mensaje-listo .ml-ico { font-size: 56px; line-height: 1; color: var(--ok); display: grid; place-items: center; }
.mensaje-listo .ml-ico .i { width: 72px; height: 72px; padding: 14px; border-radius: 50%; background: var(--superficie); box-shadow: var(--sombra); stroke-width: 2.2; }
.mensaje-listo.espera .ml-ico { color: var(--aviso); }
.mensaje-listo .ml-titulo { font-size: 1.7rem; margin: 14px 0 10px; }
.mensaje-listo .ml-titulo:focus { outline: none; }
.mensaje-listo .ml-texto { font-size: 18.5px; }
.mensaje-listo .ml-texto p { margin: 0 0 .6em; }
.mensaje-listo .ml-acciones { display: grid; gap: 12px; margin-top: 20px; }

.monto-grande .mg-etq { font-size: 17px; font-weight: 700; color: var(--texto-2); }
.monto-grande .mg-valor { font-size: clamp(2.2rem, 9vw, 3rem); font-weight: 800; font-family: var(--fuente-tit); font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.03em; }
.monto-grande.ok .mg-valor { color: var(--ok-3); }
.monto-grande.error .mg-valor { color: var(--error-3); }
.monto-grande .mg-det { font-size: 17px; color: var(--texto-2); margin-top: 4px; }

.ayuda-contextual {
    margin-top: 36px; padding: 20px 22px; border-radius: 20px; background: var(--superficie); border: 2px solid var(--linea);
    display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: var(--sombra);
}
.ayuda-contextual .ac-texto b { display: block; font-size: 19px; }
.ayuda-contextual .ac-texto span { color: var(--texto-2); }
.ayuda-contextual .ac-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.ayuda-contextual .boton-xl { min-width: 150px; font-size: 18px; }

/* Recorrido de bienvenida */
.tour-fondo { position: fixed; inset: 0; background: var(--velo); z-index: 120; }
.tour {
    position: fixed; z-index: 121; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 32px); overflow: auto; background: var(--superficie); color: var(--texto); border-radius: 24px; padding: 18px 22px 24px; box-shadow: var(--sombra-2);
}
.tour-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tour-cuenta { font-weight: 700; color: var(--texto-2); }
.tour-cerrar { font: inherit; font-size: 17px; font-weight: 700; min-height: 48px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--linea); background: var(--superficie); color: var(--marca); cursor: pointer; }
.tour-hola { font-size: 18px; margin: 12px 0 0; }
.tour-tarjeta { text-align: center; padding: 22px 6px 10px; }
.tour-ico { font-size: 72px; line-height: 1; color: var(--marca); display: grid; place-items: center; }
.tour-ico .i { width: 96px; height: 96px; padding: 20px; border-radius: 28px; background: var(--marca-3); stroke-width: 1.8; }
.tour-tarjeta h2 { font-size: 1.75rem; margin: 14px 0 8px; }
.tour-tarjeta h2:focus { outline: none; }
.tour-tarjeta p { font-size: 19px; color: var(--texto-2); margin: 0; }
.tour-puntos { display: flex; justify-content: center; gap: 8px; margin: 10px 0 18px; }
.tour-puntos i { width: 12px; height: 12px; border-radius: 99px; background: var(--linea); transition: width var(--medio) var(--curva); }
.tour-puntos i.actual { background: var(--marca); width: 30px; }
.tour-puntos i.hecho { background: var(--ok); }
.tour-acciones { display: grid; gap: 12px; }

/* Listas en tarjetas (en lugar de tablas anchas) */
.renglones { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.renglon { background: var(--superficie); border: 2px solid var(--linea); border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px; box-shadow: var(--sombra-1); }
.renglon-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.renglon-cab b { font-size: 18px; }
.renglon-monto { font-size: 20px; font-weight: 800; white-space: nowrap; font-family: var(--fuente-tit); }
.renglon-det { color: var(--texto-2); font-size: 16.5px; }
.renglon-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ver-mas { margin-top: 18px; border: 2px solid var(--linea); border-radius: 16px; background: var(--superficie); }
.ver-mas > summary { cursor: pointer; list-style: none; padding: 14px 18px; min-height: 56px; font-weight: 700; color: var(--marca); display: flex; align-items: center; gap: 10px; font-size: 18px; }
.ver-mas > summary::-webkit-details-marker { display: none; }
.ver-mas > summary::before { content: "＋"; font-size: 20px; }
.ver-mas[open] > summary::before { content: "－"; }
.ver-mas > .ver-mas-cuerpo { padding: 0 18px 18px; }
.opciones-pago { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.opcion-pago {
    display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 16px; font: inherit; font-size: 18px; text-align: left;
    background: var(--superficie); color: var(--texto); border: 2px solid var(--linea); cursor: pointer; transition: border-color var(--rapido), background var(--rapido);
}
.opcion-pago:hover { border-color: var(--marca-4); }
.opcion-pago .ico { font-size: 30px; color: var(--marca); display: inline-grid; place-items: center; }
.opcion-pago .ico .i { width: 30px; height: 30px; }
.opcion-pago b { display: block; }
.opcion-pago small { display: block; color: var(--texto-2); font-size: 15.5px; }
.opcion-pago[aria-pressed=true] { border-color: var(--marca); background: var(--marca-3); box-shadow: inset 0 0 0 2px var(--marca); }
.opcion-pago[aria-pressed=true] b::after { content: " ✓"; }
.total-pagar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--superficie-2); border: 2px solid var(--linea); margin: 14px 0; flex-wrap: wrap; }
.total-pagar b { font-size: 26px; font-family: var(--fuente-tit); }
.tipos-pase { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

@media (max-width: 860px) {
    .portal .portal-logo { display: none; }
    .portal-cuerpo { padding-bottom: 120px; }
    .portal .navegacion-movil a { font-size: 14px; font-weight: 600; min-height: 64px; justify-content: center; }
    .portal .navegacion-movil a .ico { font-size: 24px; }
    .portal .navegacion-movil a .ico .i { width: 25px; height: 25px; }
    .portal .navegacion-movil a.active { color: var(--marca); background: var(--marca-3); box-shadow: inset 0 3px 0 var(--marca); }
    html.modo-facil .portal .navegacion-movil a { min-height: 68px; font-size: 14.5px; }
    /* Ventanas a pantalla completa en el celular (nada de ventanitas flotantes). */
    .portal .modal, .portal .modal.modal-grande, .portal .modal.modal-chico, .portal .tour {
        top: 0; left: 0; right: 0; bottom: 0; transform: none; width: 100vw; height: 100vh; max-height: none; border-radius: 0; animation: none;
    }
    html.letra-grande .portal .modal, html.letra-grande .portal .tour { width: calc(100vw / 1.15); height: calc(100vh / 1.15); max-height: none; }
    html.letra-muy-grande .portal .modal, html.letra-muy-grande .portal .tour { width: calc(100vw / 1.3); height: calc(100vh / 1.3); max-height: none; }
    .portal .modal-cuerpo { flex: 1; }
    .portal .modal-pie { border-radius: 0; padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
    .portal .modal-pie .btn { flex: 1 1 100%; }
    .portal .tour { display: flex; flex-direction: column; }
    .portal .tour-tarjeta { flex: 1; display: flex; flex-direction: column; justify-content: center; }
    .ayuda-contextual .ac-botones { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
    .portal .encabezado .acciones { width: 100%; }
    .portal .encabezado .acciones .btn { flex: 1 1 auto; }
    .portal .kpis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .portal .portal-cab .dentro { padding: 8px 10px; gap: 6px; }
    .portal .cab-boton, .portal .btn-aa { min-width: 50px; }
    .portal h1 { font-size: 1.6rem; }
}
/* Detalles de pantallas del portal */
.estado-grande .eg-acciones { display: grid; gap: 10px; min-width: min(300px, 100%); }
.resumen-deuda { padding: 24px; }
.sin-borde { border: 0; padding: 0; margin: 0; min-width: 0; }
.sin-borde > legend { margin-bottom: 10px; padding: 0; }
.dias-semana { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.mensaje-listo .qr-caja { margin-top: 6px; }
.renglon-boton {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 4px; font: inherit; text-align: left;
    background: none; border: 0; color: var(--texto); cursor: pointer; flex-wrap: wrap; border-radius: 10px;
}
.renglon-boton:hover { background: var(--superficie-hover); }
.lista > li:has(> .renglon-boton) { padding: 0; }
.archivo-extra { display: inline-block; }
.archivo-extra > summary { cursor: pointer; color: var(--marca); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }

/* Entrar (login general): campos de 50 px y letra de 17 px (evita el zoom del celular). */
.acceso-form h1.acceso-titulo { font-size: 1.85rem; letter-spacing: -.03em; }
.acceso-form input[type=email], .acceso-form input[type=password] { font-size: 17px; min-height: 50px; }
.acceso-form .check { font-size: 15px; min-height: 44px; align-items: center; }
.acceso-form .check input { width: 22px; height: 22px; margin-top: 0; }

/* Caseta y Mi jornada (personal no técnico): controles de al menos 48 px y letra legible. */
.caseta .btn, .jornada .btn { min-height: 48px; font-size: 15.5px; }
.caseta input, .caseta select { min-height: 48px; font-size: 16px; }
.caseta .boton-caseta small { font-size: 13.5px; }
.caseta .tabla, .caseta .lista { font-size: 15px; }

/* Selector de tema (Ver mejor) */
.pa-temas { grid-template-columns: repeat(3, 1fr); }

@media print { .ayuda-contextual, .tour, .tour-fondo { display: none !important; } }

/* ───────────── Gráfica de barras / líneas (Grafica.razor) ───────────── */
.gb { margin: 0; }
.gb-marco { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--alto, 220px) auto; column-gap: 10px; }
.gb-y { position: relative; min-width: 40px; }
.gb-y span { position: absolute; right: 0; transform: translateY(50%); font-size: 11px; color: var(--g-eje); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gb-area { position: relative; }
.gb-linea-r { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--g-rejilla); }
.gb-linea-r.cero { border-top: 1px solid var(--borde-campo); }
.grafica .gb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gb-svg .g-linea { fill: none; stroke-width: 2.5; }
.gb-svg .g-linea.punteada { stroke-dasharray: 5 5; stroke-width: 2; }
.gb-svg .g-area { opacity: .13; stroke: none; }
.gb-cols { position: absolute; inset: 0; display: flex; }
.gb-col { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: center; outline: none; border-radius: 8px; }
.gb-col:hover, .gb-col:focus-visible { background: color-mix(in srgb, var(--superficie-3) 70%, transparent); }
.gb-col:focus-visible { box-shadow: inset 0 0 0 2px var(--marca); }
.gb-barras { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; width: 100%; padding: 0 14%; }
.gb-b { flex: 1; max-width: 26px; min-height: 2px; border-radius: 6px 6px 2px 2px; transition: height .5s var(--curva), opacity var(--rapido); }
.gb-b.g-serie-0 { background: var(--g1); } .gb-b.g-serie-1 { background: var(--g2); } .gb-b.g-serie-2 { background: var(--g3); }
.gb-b.g-serie-3 { background: var(--g4); } .gb-b.g-serie-4 { background: var(--g5); } .gb-b.g-serie-5 { background: var(--g6); }
.gb:has(.gb-col:hover) .gb-col:not(:hover) .gb-b { opacity: .5; }
.gb-col.destacada .gb-b { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px currentColor; }
.gb-guia { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--borde-campo); opacity: 0; }
.gb-col:hover .gb-guia, .gb-col:focus-visible .gb-guia { opacity: 1; }
.gb-punto { position: absolute; left: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, 50%); border: 2px solid var(--superficie); opacity: 0; transition: opacity var(--rapido); }
.gb-col:hover .gb-punto, .gb-col:focus-visible .gb-punto, .gb-col:last-child .gb-punto { opacity: 1; }
.gb-punto.g-serie-0 { background: var(--g1); } .gb-punto.g-serie-1 { background: var(--g2); } .gb-punto.g-serie-2 { background: var(--g3); }
.gb-tip {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); z-index: 5; pointer-events: none; opacity: 0;
    background: var(--texto); color: var(--superficie); border-radius: 10px; padding: 8px 10px; font-size: 12px; white-space: nowrap; box-shadow: var(--sombra-3);
    display: grid; gap: 3px; transition: opacity var(--rapido), transform var(--rapido);
}
.gb-col:hover .gb-tip, .gb-col:focus-visible .gb-tip { opacity: 1; transform: translate(-50%, 0); }
.gb-col:first-child .gb-tip { left: 0; transform: translate(0, 4px); }
.gb-col:first-child:hover .gb-tip, .gb-col:first-child:focus-visible .gb-tip { transform: translate(0, 0); }
.gb-col:last-child .gb-tip { left: auto; right: 0; transform: translate(0, 4px); }
.gb-col:last-child:hover .gb-tip, .gb-col:last-child:focus-visible .gb-tip { transform: translate(0, 0); }
.gb-tip > b { font-size: 11.5px; opacity: .8; }
.gb-tip span { display: flex; align-items: center; gap: 6px; }
.gb-tip span b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.gb-tip i { width: 8px; height: 8px; border-radius: 2px; }
.gb-tip i.g-serie-0 { background: var(--g1); } .gb-tip i.g-serie-1 { background: var(--g2); } .gb-tip i.g-serie-2 { background: var(--g3); }
.gb-x { grid-column: 2; display: flex; padding-top: 8px; }
.gb-x span { flex: 1; text-align: center; font-size: 11.5px; color: var(--g-eje); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.g-dona svg { width: 100%; height: auto; display: block; }
.g-dona .g-seg circle { transition: stroke-width var(--rapido); }
.g-dona .g-seg:hover circle, .g-dona .g-seg:focus-visible circle { stroke-width: 17; }
.g-dona .g-seg:focus-visible { outline: none; }

/* Carga: texto + esqueleto (solo en la administración) */
.cargando + .esqueleto-pagina { margin-top: -28px; }
.portal .esqueleto-pagina, .acceso .esqueleto-pagina { display: none; }

/* Botón de tema: luna en claro, sol en oscuro */
.tema-sol { display: none; }
:root.tema-oscuro:not(.alto-contraste) .tema-sol { display: inline; }
:root.tema-oscuro:not(.alto-contraste) .tema-luna { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not(.tema-claro):not(.alto-contraste) .tema-sol { display: inline; }
    :root:not(.tema-claro):not(.alto-contraste) .tema-luna { display: none; }
}

/* Tablero: cifras de resumen, ranking y rejilla de datos */
.resumen-cifras { display: flex; gap: 22px; flex-wrap: wrap; }
.resumen-cifras > div { display: grid; gap: 1px; }
.resumen-cifras .etq { font-size: 11.5px; color: var(--texto-3); font-weight: 600; }
.resumen-cifras b { font-size: 16px; font-family: var(--fuente-tit); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ranking li { display: grid; gap: 6px; min-width: 0; }
.ranking .crece { min-width: 0; }
.ranking .sub { display: block; color: var(--texto-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking .barra-prog { height: 6px; }
.datos-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.datos-rejilla > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linea-2); }
.datos-rejilla .i { grid-row: span 2; align-self: center; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--marca-3); color: var(--marca); }
.datos-rejilla .etq { font-size: 11.5px; color: var(--texto-3); font-weight: 600; line-height: 1.3; }
.datos-rejilla b { font-size: 18px; font-family: var(--fuente-tit); font-variant-numeric: tabular-nums; }

/* Mantenimiento: tarjetas de equipos con estado */
.equipo-tarjeta { position: relative; overflow: hidden; display: grid; gap: 12px; padding-top: 22px; transition: box-shadow var(--rapido), transform var(--rapido); }
.equipo-tarjeta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--estado, var(--marca)); }
.equipo-tarjeta:hover { box-shadow: var(--sombra-3); transform: translateY(-2px); }
.equipo-tarjeta.de-baja { opacity: .6; }
.eq-cab { display: flex; gap: 12px; align-items: flex-start; }
.eq-ico {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0;
    background: color-mix(in srgb, var(--estado, var(--marca)) 14%, var(--superficie)); color: var(--estado, var(--marca));
}
.eq-ico .i { width: 24px; height: 24px; }
.eq-nombre { font-weight: 700; font-size: 15px; color: var(--texto); display: block; line-height: 1.3; }
.eq-riesgo {
    --pct: 50; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; align-content: center; flex-shrink: 0; line-height: 1;
    background: radial-gradient(closest-side, var(--superficie) 76%, transparent 78% 100%), conic-gradient(var(--riesgo) calc(var(--pct) * 1%), var(--superficie-3) 0);
}
.eq-riesgo b { font-size: 14px; font-family: var(--fuente-tit); }
.eq-riesgo small { font-size: 9.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.eq-datos { border-top: 1px solid var(--linea-2); }
.eq-datos > li { padding: 7px 0; gap: 10px; align-items: center; }
.eq-datos > li > span:first-child { color: var(--texto-3); }

.logo .i { width: 20px; height: 20px; }
.contenido:focus, .portal-cuerpo:focus { outline: none; }
.kpi-valor-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.kpi-valor-fila .kpi-spark { margin-bottom: 4px; }

/* Mosaicos con color por tema (como los módulos de color de la competencia; el texto siempre acompaña al icono) */
.mosaicos .mosaico:nth-child(6n+2) .ico { background: var(--acento-2); color: var(--acento); }
.mosaicos .mosaico:nth-child(6n+3) .ico { background: var(--morado-2); color: var(--morado); }
.mosaicos .mosaico:nth-child(6n+4) .ico { background: var(--ok-2); color: var(--ok); }
.mosaicos .mosaico:nth-child(6n+5) .ico { background: var(--info-2); color: var(--info); }
.mosaicos .mosaico:nth-child(6n+6) .ico { background: var(--aviso-2); color: var(--aviso); }
.mosaicos .mosaico:hover .ico { background: var(--marca); color: var(--sobre-marca); }
.insignia-prop { width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 800; flex-shrink: 0; text-transform: uppercase; font-family: var(--fuente-tit); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.kpi-valor.v-medio { font-size: 1.5rem; }
.kpi-valor.v-largo { font-size: 1.3rem; letter-spacing: -.02em; }
.kpi-valor { white-space: nowrap; min-width: 0; }
.kpi-valor-fila .kpi-spark { flex-shrink: 1; min-width: 40px; }
.portal .portal-logo .logo { width: 44px; height: 44px; border-radius: 12px; }
.boton-caseta > .fila { width: 100%; justify-content: center; }
.boton-caseta > .fila input { flex: 1 1 auto; width: auto; min-width: 0; }
.eq-nombre { padding: 3px 0; min-height: 26px; }

/* ── Logotipo de la marca (componente LogoMarca) ── */
.logo.logo-marca, .menu-marca .logo.logo-marca { background: none; box-shadow: none; padding: 0; overflow: hidden; border-radius: 28%; }
.logo-marca svg, .logo-marca img { width: 100%; height: 100%; display: block; object-fit: contain; }
.portal-cab .logo.logo-marca, .acceso-arte .logo.logo-marca { background: none; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }

/* ── Etiquetas de estado de módulo (docs/negocio/EstadoModulos.md) ── */
.etapa { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; vertical-align: middle; }
.etapa.beta { background: #FFD27A; color: #3D2B00; }
.etapa.pronto { background: var(--neutro-2); color: var(--texto-2); }