/* Extraído del prototipo old-project/Gestión de R&S.html — no renombrar clases ni variables */
    :root{
      /* --- Identidad corporativa Renta Nacional (rojo carmín #d50032) --- */
      --brand:#d50032;--brand-dark:#a80028;--brand-soft:#fdeaef;
      --info:#35486b; /* azul secundario RNSV: SOLO acentos/badges informativos, nunca superficie */
      --bg:#eef2f7;--card:#fff;--line:#e2e8f0;--text:#1e293b;--muted:#64748b;--muted2:#94a3b8;
      /* --blue/--sky se remapean al rojo de marca: propagan el acento a KPIs, tabs, charts, links de acento.
         Se conservan los nombres (contrato del prototipo); solo cambia el VALOR. */
      --navy:#0c1f3d;--blue:var(--brand);--sky:var(--brand-dark);--green:#059669;--amber:#d97706;--red:#dc2626;--purple:#7c3aed;
      --soft-blue:#eff6ff;--soft-green:#dcfce7;--soft-amber:#fef3c7;--soft-red:#fee2e2;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.45}
    button,input,select,textarea{font-family:inherit}
    button{cursor:pointer}
    .app{min-height:100vh;display:flex;flex-direction:column}
    .hdr{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:white;padding:18px 24px}
    .hdr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
    .hdr-brand{display:flex;align-items:center;gap:14px}
    .hdr-logo{height:40px;width:auto;display:block;flex:0 0 auto}
    .title{font-size:20px;font-weight:850;letter-spacing:-.35px}
    .sub{font-size:12px;color:#ffe1e8;margin-top:3px}
    .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:10px;color:rgba(255,255,255,.9)}
    .tag{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-weight:700}
    .actions{display:flex;gap:8px;flex-wrap:wrap}
    .btn{border:0;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:700;transition:.15s;white-space:nowrap}
    .btn:hover{filter:brightness(.96);transform:translateY(-1px)}
    .btn-primary{background:var(--brand);color:white}.btn-green{background:#047857;color:white}.btn-red{background:var(--red);color:white}.btn-ghost{background:rgba(255,255,255,.13);color:white;border:1px solid rgba(255,255,255,.25)}.btn-light{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}.btn-blue{background:var(--info);color:white}.btn-amber{background:#b45309;color:white}
    .note{margin-top:12px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px;color:#ffeef2;font-size:12px}
    .tabs{display:flex;gap:0;background:white;border-bottom:1px solid var(--line);padding:0 24px;overflow-x:auto}
    .tab{border:0;background:white;color:var(--muted);padding:13px 15px;border-bottom:3px solid transparent;font-size:12px;font-weight:700;white-space:nowrap}
    .tab.active{color:var(--blue);border-bottom-color:var(--blue);background:#f8fafc}
    .filters{background:white;border-bottom:1px solid var(--line);padding:12px 24px}
    .filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
    .fi{min-width:135px;flex:1}
    .lbl{display:block;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800;font-size:10px;margin-bottom:4px}
    input,select,textarea{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:#f8fafc;color:var(--text);font-size:12px}
    textarea{min-height:70px;resize:vertical}
    .content{padding:20px 24px;flex:1}
    .grid-kpi{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:12px;margin-bottom:16px}
    .kpi{background:white;border:1px solid var(--line);border-radius:12px;padding:14px 15px;border-top:4px solid var(--blue)}
    .kpi .k-label{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:850;margin-bottom:6px}
    .kpi .k-value{font-size:25px;font-weight:900;color:var(--navy);line-height:1.1}
    .kpi .k-sub{font-size:10px;color:var(--muted);margin-top:4px}
    .layout-2{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-bottom:16px}.layout-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
    .card{background:white;border:1px solid var(--line);border-radius:13px;padding:17px 18px;margin-bottom:16px}
    .card-title{font-weight:850;color:var(--navy);font-size:14px;margin-bottom:10px}.card-sub{font-size:11px;color:var(--muted);margin-top:-5px;margin-bottom:10px}
    .table-wrap{overflow-x:auto;border-radius:10px;border:1px solid #edf2f7;background:white}
    table{width:100%;border-collapse:collapse}.wide{min-width:1150px}th{background:#f8fafc;color:var(--muted);font-size:10px;letter-spacing:.7px;text-transform:uppercase;text-align:left;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:9px 10px;border-bottom:1px solid #f1f5f9;font-size:11.5px;vertical-align:middle}tr:last-child td{border-bottom:0}
    .badge{display:inline-block;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:800;white-space:nowrap}.b-blue{background:var(--soft-blue);color:var(--info)}.b-green{background:var(--soft-green);color:#15803d}.b-amber{background:var(--soft-amber);color:#92400e}.b-red{background:var(--soft-red);color:#b91c1c}.b-gray{background:#f1f5f9;color:#64748b}.b-purple{background:#f3e8ff;color:#7e22ce}
    .progress{display:flex;align-items:center;gap:6px;min-width:95px}.bar{height:6px;background:#e2e8f0;border-radius:999px;flex:1;overflow:hidden}.fill{height:100%;background:var(--blue);border-radius:999px}.mini{font-size:10px;color:var(--muted)}
    .chart-bars{display:flex;flex-direction:column;gap:8px}.chart-row{display:grid;grid-template-columns:125px 1fr 40px;gap:8px;align-items:center}.chart-lbl{font-size:11px;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-bg{height:20px;background:#f1f5f9;border-radius:6px;overflow:hidden}.chart-fill{height:100%;border-radius:6px;background:var(--blue)}.chart-val{font-size:11px;font-weight:800;color:#475569;text-align:right}
    .alert{border-left:4px solid var(--amber);background:white;border-radius:10px;padding:12px 13px;margin-bottom:9px;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
    .alert.red{border-left-color:var(--red);background:#fff7f7}.alert.blue{border-left-color:var(--info);background:#f8fbff}.alert.green{border-left-color:var(--green);background:#f7fffb}
    .alert-title{font-weight:850;font-size:12px}.alert-meta{font-size:10px;color:var(--muted);margin-top:3px}.empty{padding:34px;text-align:center;color:var(--muted);background:white;border:1px dashed #cbd5e1;border-radius:12px}
    .modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:9999;overflow:auto;padding:24px}.modal.show{display:block}.modal-box{max-width:920px;background:white;border-radius:16px;margin:25px auto;padding:22px;box-shadow:0 20px 70px rgba(0,0,0,.28)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid #f1f5f9;padding-bottom:12px;margin-bottom:16px}.modal-title{font-size:17px;font-weight:900;color:var(--navy)}.modal-close{border:0;background:#f1f5f9;border-radius:8px;padding:7px 10px;color:#475569;font-weight:900}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.form-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.full{grid-column:1/-1}.footer-actions{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f1f5f9;margin-top:18px;padding-top:15px}.section-title{font-size:12px;font-weight:900;color:var(--blue);text-transform:uppercase;letter-spacing:.7px;margin:8px 0 2px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.timeline{display:flex;flex-direction:column;gap:8px}.step{display:flex;gap:9px;align-items:flex-start}.dot{width:16px;height:16px;border-radius:50%;background:#cbd5e1;flex:0 0 16px;margin-top:1px}.dot.done{background:var(--green)}.dot.now{background:var(--blue)}.step-name{font-size:11px;font-weight:800}.step-date{font-size:10px;color:var(--muted)}
    .login{min-height:100vh;display:grid;place-items:center;position:relative;background:linear-gradient(135deg,var(--brand),var(--brand-dark))}.login-card{width:min(420px,92vw);background:white;border-radius:18px;padding:28px;box-shadow:0 20px 80px rgba(0,0,0,.26)}.login-logo{display:block;height:50px;width:auto;margin:2px auto 20px}.login-title{font-size:22px;font-weight:900;color:var(--navy);margin-bottom:5px}.login-sub{color:var(--muted);font-size:12px;margin-bottom:18px}.hint{font-size:11px;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px;margin-top:12px}
    .toast{position:fixed;right:18px;bottom:18px;background:#0f172a;color:white;border-radius:10px;padding:12px 14px;font-size:12px;font-weight:700;z-index:10000;display:none}.toast.show{display:block}
    /* === Extensiones Fase 5 (nuevas vistas) === */
    /* El prototipo usaba <button> para botones y tabs; la versión server-side
       usa <a> para navegar. Se anula el subrayado del user-agent para
       conservar la apariencia EXACTA del prototipo (misma paleta y radios). */
    a.btn,a.tab{text-decoration:none;display:inline-block;text-align:center}
    /* Foco visible corporativo (accesibilidad WCAG): anillo rojo suave de marca. */
    input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
    .btn:focus-visible,a.tab:focus-visible,.tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
    /* Banner de modo mock migrado desde estilo inline de base.html (ámbar = advertencia). */
    .mock-banner{background:var(--amber);color:white;text-align:center;font-weight:800;font-size:11px;letter-spacing:.6px;padding:6px 10px}
    /* Footer corporativo. .foot: sobre fondo claro (base.html, sticky al pie
       gracias a .app flex + .content flex:1). .foot-login: sobre gradiente rojo
       (páginas auth), texto claro con buen contraste. */
    .foot{text-align:center;font-size:11px;color:var(--muted);background:white;border-top:1px solid var(--line);padding:16px 24px}
    .foot-login{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:11px;color:rgba(255,255,255,.85);padding:14px 16px}
    /* Media queries del prototipo: SIEMPRE al final (Tarea 6). */
    @media(max-width:1100px){.grid-kpi{grid-template-columns:repeat(3,1fr)}.layout-2,.layout-3,.detail-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:680px){.grid-kpi{grid-template-columns:1fr}.content,.filters,.tabs,.hdr{padding-left:14px;padding-right:14px}.form-grid,.form-grid-2{grid-template-columns:1fr}.actions{width:100%}.actions .btn{flex:1}}

    /* ===================================================================== */
    /* Dashboard amigable — infografías para usuarios no técnicos.            */
    /* Aditivo: NO toca las clases/variables del prototipo. Semáforo = color  */
    /* + ícono + palabra (accesible); % como gauge/meter; conteos como número */
    /* hero; embudo con la mayor fuga resaltada. HTML/CSS/SVG inline, sin      */
    /* librerías (CSP). Superficies y contrastes validados contra la marca.   */
    /* ===================================================================== */
    :root{
      --sem-verde:#059669;--sem-amarillo:#d97706;--sem-rojo:#dc2626;--sem-neutro:#94a3b8;
      --sem-verde-bg:#dcfce7;--sem-verde-fg:#15803d;
      --sem-amarillo-bg:#fef3c7;--sem-amarillo-fg:#92400e;
      --sem-rojo-bg:#fee2e2;--sem-rojo-fg:#b91c1c;
      --sem-neutro-bg:#f1f5f9;--sem-neutro-fg:#64748b;
      --track:#eef2f7;
    }
    /* Contraste AA: .card-sub/.k-sub/.empty/.step-date usan --muted (#64748b
       ≈4.76:1) globalmente desde Fase M4 (T4.3); el parche antiguo limitado a
       .dash (.dash .card-sub,.dash .empty) se retiró por redundante. */
    /* Bloque narrativo (pregunta en lenguaje llano), con barra roja de marca. */
    .block-head{position:relative;padding-left:13px;margin:24px 2px 14px}
    .block-head::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:999px;background:var(--brand)}
    .block-head h2{font-size:16px;font-weight:850;color:var(--navy);letter-spacing:-.2px;line-height:1.2}
    .block-head .q{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px;display:block}
    /* Chip de estado: color + ícono + palabra (nunca color solo) */
    .sem-chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:800;white-space:nowrap;line-height:1.4}
    .sem-chip .ic{font-size:10px;line-height:1;font-weight:900}
    .sem-chip.is-verde{background:var(--sem-verde-bg);color:var(--sem-verde-fg)}
    .sem-chip.is-amarillo{background:var(--sem-amarillo-bg);color:var(--sem-amarillo-fg)}
    .sem-chip.is-rojo{background:var(--sem-rojo-bg);color:var(--sem-rojo-fg)}
    .sem-chip.is-neutro{background:var(--sem-neutro-bg);color:var(--sem-neutro-fg)}
    /* Ícono de ayuda (tooltip nativo con title=) */
    .hk-info{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--muted2);color:var(--muted);font-size:9px;font-weight:800;cursor:help;line-height:1;flex:0 0 auto}
    /* Grilla de titulares (Resumen) */
    .grid-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:6px}
    /* Tarjeta hero (número grande) con rail lateral de estado. Sin estado →
       acento de marca; con estado → semáforo. */
    .hero-kpi{position:relative;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 15px 14px 19px;display:flex;flex-direction:column;min-height:122px;overflow:hidden}
    .hero-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--brand)}
    .hero-kpi.is-verde::before{background:var(--sem-verde)}
    .hero-kpi.is-amarillo::before{background:var(--sem-amarillo)}
    .hero-kpi.is-rojo::before{background:var(--sem-rojo)}
    .hero-kpi.is-neutro::before{background:var(--sem-neutro)}
    .hk-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:850;display:flex;align-items:center;gap:6px;line-height:1.3}
    .hk-value{font-size:40px;font-weight:800;color:var(--navy);line-height:1;margin:5px 0 2px;letter-spacing:-1px}
    .hero-kpi.is-neutro .hk-value{color:var(--muted2)}
    .hk-sub{font-size:10.5px;color:var(--muted);line-height:1.35}
    .hk-foot{margin-top:auto;padding-top:10px}
    .hero-kpi.bare{min-height:auto;padding:12px 13px 12px 17px;border-radius:12px}
    .hero-kpi.bare .hk-value{font-size:26px;margin:4px 0 2px}
    /* Gauge semicircular (velocímetro) — solo los 2 % de salud. Zonas pastel
       verde/ámbar/rojo detrás del arco de valor; número en el hueco.
       pathLength=100 → stroke-dasharray es directamente "valor 100". */
    .gauge-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
    .gauge-grid .gauge+.gauge{border-left:1px solid var(--line);padding-left:6px}
    .gauge{display:flex;flex-direction:column;align-items:center;gap:5px;padding:2px}
    .gauge-arc{position:relative;width:100%;max-width:208px;margin:0 auto}
    .gauge-svg{display:block;width:100%;height:auto}
    .gauge-zone{fill:none;stroke-width:16;stroke-linecap:butt}
    .gauge-zone.z-rojo{stroke:var(--sem-rojo-bg)}
    .gauge-zone.z-amarillo{stroke:var(--sem-amarillo-bg)}
    .gauge-zone.z-verde{stroke:var(--sem-verde-bg)}
    .gauge-track{fill:none;stroke:var(--track);stroke-width:16;stroke-linecap:round}
    .gauge-fill{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .55s ease}
    .gauge.is-verde .gauge-fill{stroke:var(--sem-verde)}
    .gauge.is-amarillo .gauge-fill{stroke:var(--sem-amarillo)}
    .gauge.is-rojo .gauge-fill{stroke:var(--sem-rojo)}
    .gauge.is-neutro .gauge-fill{stroke:var(--sem-neutro)}
    .gauge-val{position:absolute;left:0;right:0;bottom:8%;text-align:center;font-size:30px;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-1px}
    .gauge.is-neutro .gauge-val{color:var(--muted2)}
    .gauge-ends{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:0 4px;font-size:9px;color:var(--muted);font-weight:800}
    .gauge-label{font-size:11.5px;font-weight:800;color:var(--text);text-align:center;line-height:1.25;display:flex;align-items:center;gap:5px;justify-content:center}
    .gauge-sub{font-size:10px;color:var(--muted);text-align:center}
    .gauge-foot{margin-top:1px}
    /* Meter lineal con estado (para % y para "días vs objetivo") */
    .meter{margin:0 0 13px}
    .meter+.meter{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
    .meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
    .meter-name{font-size:12px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:5px}
    .meter-num{font-size:18px;font-weight:800;color:var(--navy);white-space:nowrap}
    .meter-track{position:relative;height:11px;background:var(--track);border-radius:999px}
    .meter-fill{height:100%;border-radius:999px;background:var(--sem-neutro);transition:width .55s ease}
    .meter.is-verde .meter-fill{background:var(--sem-verde)}
    .meter.is-amarillo .meter-fill{background:var(--sem-amarillo)}
    .meter.is-rojo .meter-fill{background:var(--sem-rojo)}
    .meter-goal{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--navy);opacity:.5;border-radius:2px}
    .meter-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
    .meter-foot .g{font-size:10px;color:var(--muted)}
    /* Embudo infográfico (10 etapas; conversión entre etapas y mayor fuga) */
    .funnel-summary{font-size:12px;color:var(--muted);margin-bottom:13px;line-height:1.5}
    .funnel-summary b{color:var(--navy);font-weight:800}
    .funnel{display:flex;flex-direction:column}
    .funnel-step{display:grid;grid-template-columns:196px 1fr 44px 46px;align-items:center;gap:10px;padding:4px 8px;border-radius:9px}
    .funnel-step.is-leak{background:var(--sem-amarillo-bg);box-shadow:inset 0 0 0 1px #fde3b0}
    .fs-name{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;color:var(--text);min-width:0}
    .fs-name .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .fs-n{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:#f1f5f9;color:var(--muted);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
    .funnel-step.is-final .fs-n{background:var(--sem-verde-bg);color:var(--sem-verde-fg)}
    .funnel-step.is-final .fs-name{color:var(--sem-verde-fg)}
    .funnel-step.is-leak .fs-n{background:#fde68a;color:#92400e}
    .funnel-step.is-leak .fs-name{color:#92400e}
    .fs-track{min-width:0;display:flex}
    .fs-bar{height:22px;border-radius:6px;background:linear-gradient(180deg,var(--brand),var(--brand-dark));margin:0 auto;min-width:8px}
    .funnel-step.is-final .fs-bar{background:linear-gradient(180deg,#10b981,var(--sem-verde))}
    .funnel-step.is-leak .fs-bar{background:linear-gradient(180deg,#f59e0b,var(--sem-amarillo))}
    .fs-count{font-size:14px;font-weight:900;color:var(--navy);text-align:right}
    .funnel-step.is-final .fs-count{color:var(--sem-verde-fg)}
    .fs-pct{font-size:11px;font-weight:700;color:var(--muted);text-align:right}
    .funnel-drop{display:grid;grid-template-columns:196px 1fr 92px;gap:10px;padding:1px 8px}
    .funnel-conv{grid-column:2;justify-self:center;font-size:10px;color:var(--muted);font-weight:700}
    .funnel-conv b{color:var(--text);font-weight:800}
    .funnel-leak-tag{grid-column:2;justify-self:center;display:inline-flex;align-items:center;gap:5px;background:var(--sem-rojo-bg);color:var(--sem-rojo-fg);font-size:10px;font-weight:800;padding:2px 11px;border-radius:999px}
    /* Tira de mini-estadísticas (bloque psicolaboral compacto) */
    .stat-strip{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center}
    .stat-mini{display:flex;flex-direction:column;line-height:1.1}
    .stat-mini .n{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.5px}
    .stat-mini .l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:800;margin-top:3px}
    .stat-sep{align-self:stretch;width:1px;background:var(--line)}
    /* Acordeón "Detalle operativo" (nativo, sin JS) */
    .detalle{margin-top:18px}
    .detalle>summary{cursor:pointer;list-style:none;font-size:13px;font-weight:800;color:var(--brand);padding:11px 2px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line)}
    .detalle>summary::-webkit-details-marker{display:none}
    .detalle>summary::before{content:'\25B8';transition:transform .15s ease}
    .detalle[open]>summary::before{transform:rotate(90deg)}
    .detalle-body{padding-top:8px}
    /* Responsive de las infografías (mismos breakpoints del prototipo) */
    @media(max-width:1100px){.grid-hero{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:680px){
      .grid-hero{grid-template-columns:1fr}.hk-value{font-size:34px}
      .gauge-grid{grid-template-columns:1fr}.gauge-grid .gauge+.gauge{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:10px}
      .funnel-step{grid-template-columns:1fr 44px 46px;grid-template-areas:"name name name" "bar count pct";row-gap:4px}
      .fs-name{grid-area:name}.fs-track{grid-area:bar}.fs-count{grid-area:count}.fs-pct{grid-area:pct}
      .funnel-drop{grid-template-columns:1fr}.funnel-conv,.funnel-leak-tag{grid-column:1}
    }

    /* ===================================================================== */
    /* Sitio de estadísticas (analítica para gerencia). Aditivo; reutiliza    */
    /* block-head/hero-kpi/card/table del sistema. Barras neutras (azul       */
    /* secundario, es marca) y el cuello/cola crítica en rojo (emphasis).     */
    /* ===================================================================== */
    .scorecard{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:6px}
    /* Tornado: desglose de tiempos por etapa (barras horizontales) */
    .tornado{display:flex;flex-direction:column;gap:7px}
    .torn-row{display:grid;grid-template-columns:200px 1fr 56px 52px;align-items:center;gap:10px}
    .torn-label{font-size:11px;font-weight:700;color:var(--text);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;justify-content:flex-end;gap:6px}
    .torn-track{height:20px;background:var(--track);border-radius:6px;overflow:hidden}
    .torn-bar{height:100%;border-radius:6px;background:var(--info);min-width:2px;transition:width .4s ease}
    .torn-row.is-cuello .torn-bar{background:var(--sem-rojo)}
    .torn-val{font-size:12px;font-weight:900;color:var(--navy);text-align:right}
    .torn-n{font-size:10px;color:var(--muted);text-align:right}
    .torn-row.no-datos .torn-label,.torn-row.no-datos .torn-val{color:var(--muted2)}
    .torn-tag{background:var(--sem-rojo-bg);color:var(--sem-rojo-fg);font-size:9px;font-weight:800;padding:1px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
    /* Histograma de antigüedad (columnas verticales) */
    .histo{display:flex;align-items:flex-end;gap:12px;height:160px;padding-top:10px}
    .histo-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
    .histo-bar-wrap{flex:1;display:flex;align-items:flex-end;justify-content:center;width:100%}
    .histo-bar{width:100%;max-width:54px;background:var(--info);border-radius:6px 6px 0 0;min-height:3px;transition:height .4s ease}
    .histo-bar.is-rojo{background:var(--sem-rojo)}
    .histo-n{font-size:14px;font-weight:900;color:var(--navy)}
    .histo-label{font-size:9px;color:var(--muted);text-align:center;font-weight:700;line-height:1.2}
    /* Nota / aviso de calidad de datos o muestra pequeña */
    .stat-nota{font-size:11px;color:var(--muted);background:var(--sem-neutro-bg);border-radius:8px;padding:10px 12px;border-left:3px solid var(--muted2);line-height:1.45}
    .stat-nota b{color:var(--text);font-weight:850}
    @media(max-width:1100px){.scorecard{grid-template-columns:repeat(3,1fr)}.torn-row{grid-template-columns:150px 1fr 52px 48px}}
    @media(max-width:680px){
      .scorecard{grid-template-columns:1fr}
      .torn-row{grid-template-columns:1fr 44px 40px;grid-template-areas:"lbl lbl lbl" "bar val n";row-gap:3px}
      .torn-label{grid-area:lbl;justify-content:flex-start}.torn-track{grid-area:bar}.torn-val{grid-area:val}.torn-n{grid-area:n}
      .histo{gap:6px;height:130px}.histo-label{font-size:8px}
    }
    /* Filtro de fecha jerárquico (skill estandarizar-filtros-fecha): el rango
       de años son dos números lado a lado dentro del mismo .fi. */
    .ff-anios{display:flex;gap:6px}
    .ff-anios input{flex:1;min-width:0}
    /* Campos del alta traídos desde Entra ID: rellenados y bloqueados (no
       editables) al elegir una persona en el buscador (app.js). Señal visual de
       solo-lectura; borrar la búsqueda los reabre. */
    input.is-entra-locked{background:var(--bg);color:var(--muted);cursor:not-allowed}

    /* ===================================================================== */
    /* Fase M4 — Accesibilidad y UX (lote 1). Capa ADITIVA: no renombra        */
    /* clases ni variables del prototipo; solo agrega selectores nuevos.       */
    /* ===================================================================== */
    /* T4.2 — Toasts con categoría: borde izquierdo de color (verde = éxito,   */
    /* rojo = error). El toast por defecto (sin variante) conserva el fondo    */
    /* oscuro del prototipo; el color solo aporta refuerzo semántico + texto.  */
    .toast-ok{border-left:4px solid var(--green)}
    .toast-error{border-left:4px solid var(--red)}
    /* T4.7 — IDs de fila clicables (códigos/folios). La regla a.btn,a.tab de   */
    /* arriba NO cubre estos anchors; definimos aquí su color de marca y el     */
    /* subrayado en hover (afordancia de enlace sin depender solo del color).  */
    .id-ref{color:var(--blue);font-weight:600}
    a.id-ref{text-decoration:none}
    a.id-ref:hover,a.id-ref:focus-visible{text-decoration:underline}
    /* T4.9 — Empty state con identidad: isotipo + mensaje + CTA opcional. */
    .empty img{display:block;margin:0 auto 8px;height:28px;width:auto;opacity:.5}
    .empty-cta{margin-top:12px}
    /* T4.10 — Tablas altas con cabecera fija. .table-tall acota la altura y    */
    /* habilita scroll propio; el thead se fija (el th ya trae fondo #f8fafc).  */
    .table-tall{max-height:70vh;overflow:auto}
    .table-tall thead th{position:sticky;top:0;z-index:1}
    /* T4.11 — Botón SSO con logo Microsoft; campos del login mock sin inline. */
    .btn-sso{display:flex;gap:10px;align-items:center;justify-content:center}
    .btn-sso img{height:18px;width:18px;flex:0 0 auto}
    .login-field{margin-bottom:10px}

    /* ===================================================================== */
    /* Fase M4 — Accesibilidad y UX (lote 2). Capa ADITIVA (T4.1/T4.5).        */
    /* ===================================================================== */
    /* T4.5 — Estado de carga del modal: spinner CSS puro (sin imágenes ni     */
    /* librerías). Anillo neutro con el arco superior en rojo de marca girando */
    /* junto al texto "Cargando…" que trae el propio div.                      */
    .modal-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:48px 24px;color:var(--muted);font-size:13px;font-weight:700}
    .modal-loading::before{content:"";width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand);animation:rn-spin .7s linear infinite}
    @keyframes rn-spin{to{transform:rotate(360deg)}}

    /* ===================================================================== */
    /* Fase M4 — Accesibilidad y UX (lote 3 — T4.4). Jerarquía de encabezados. */
    /* .title y .card-title pasan a <h1>/<h2> por semántica (page-has-heading- */
    /* one + heading-order). Se neutraliza SOLO el margin del user-agent para  */
    /* que se vean idénticos: .title no define margin (el <div> tampoco tenía) */
    /* y .card-title ya trae margin-bottom:10px (más los inline, que ganan).   */
    /* ===================================================================== */
    h1.title{margin:0}
    h2.card-title{margin-top:0}

    /* ===================================================================== */
    /* Fase M4 — Accesibilidad y UX (lote 3 — T4.6). Design system: cabecera  */
    /* de card unificada (macro card_head), números tabulares alineados a la   */
    /* derecha y purga de estilos inline hacia clases reutilizables. Solo      */
    /* permanecen inline los valores CALCULADOS por dato de las macros del     */
    /* dashboard/infografías (anchos, stroke-dasharray, colores de KPI).       */
    /* ===================================================================== */
    .card-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
    .card-head.top{align-items:flex-start}
    .card-head .card-title{margin:0}
    .card-head .card-sub{margin:2px 0 0}
    td.num{text-align:right;font-variant-numeric:tabular-nums}
    .texto-detalle{color:var(--muted)}
    .lista-detalle{color:var(--muted);font-size:13px;margin:0;padding-left:18px}
    /* Utilidades de layout/espaciado: agrupan patrones inline repetidos (no    */
    /* calculados). Reemplazan ~60 estilos inline por clases reutilizables.     */
    .acciones{display:flex;gap:8px;align-items:center}
    .form-inline{display:inline}
    .form-inline-flex{display:inline-flex;gap:8px;align-items:center}
    .chk{display:flex;gap:8px;align-items:center;font-size:12px}
    .chk input{width:auto}
    .pre-line{white-space:pre-line}
    .grid-kpi-4{grid-template-columns:repeat(4,1fr)}
    .fila-centro{display:flex;justify-content:center}
    .min-w-280{min-width:280px}
    .btn-block{width:100%}
    /* Card de mensaje centrada (páginas de error 4xx/5xx). */
    .card-msg{max-width:520px;margin:60px auto;text-align:center}
    .card-msg p{color:var(--muted);margin-bottom:16px}
    /* Escala de espaciado mínima para inline sueltos (márgenes puntuales). */
    .mt-6{margin-top:6px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}
    .mb-3{margin-bottom:3px}.mb-12{margin-bottom:12px}

    /* ===================================================================== */
    /* Fase M5 — Listados a escala. Capa ADITIVA (T5.1.3/T5.2.3): orden por    */
    /* columnas y paginación server-side. NO reasigna variables. Recordar:     */
    /* --blue/--sky son el ROJO de marca (--info es el azul real) y el texto   */
    /* tenue usa --muted (#64748b, ≈4.76:1 sobre blanco → AA).                 */
    /* ===================================================================== */
    /* T5.1.3 — Cabecera ordenable: el <th> conserva su tipografía; el <a>     */
    /* hereda color/mayúsculas y agrega el afijo ↑/↓ (activa) o ⇅ (ordenable   */
    /* inactiva, tenue para no competir con la etiqueta). Hover/focus en rojo  */
    /* de marca, coherente con los anchors .id-ref de M4 (afordancia de link   */
    /* sin depender solo del color: el afijo refuerza el estado).              */
    .th-orden{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;font:inherit;letter-spacing:inherit;text-transform:inherit}
    .th-orden:hover,.th-orden:focus-visible{color:var(--brand)}
    .th-orden:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
    .th-orden .th-ind{font-size:10px;font-weight:800;opacity:.35}
    .th-orden.is-activa{color:var(--brand)}
    .th-orden.is-activa .th-ind{opacity:1}
    /* T5.2.3 — Paginación: barra centrada, rótulo al medio y los .btn a los    */
    /* lados (foco visible por la regla .btn:focus-visible del prototipo). El   */
    /* rótulo en --muted (AA). Solo se renderizan los enlaces navegables.       */
    .pagination{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:16px}
    .pag-info{font-size:12px;color:var(--muted);font-weight:700;text-align:center}

    /* ===================================================================== */
    /* Sitio de administración de alertas (/admin/alertas). Capa ADITIVA:      */
    /* reutiliza card/card_head/tabla/badge/.chk/.filter-row del sistema y NO   */
    /* reasigna variables (--blue/--sky = ROJO de marca; --info = azul real;    */
    /* texto tenue = --muted → AA). El estado SIEMPRE se comunica con color +   */
    /* palabra: semáforo con etiqueta textual y badges con texto. Sin scroll    */
    /* horizontal (tablas wide=False + .table-wrap con overflow propio).        */
    /* ===================================================================== */
    /* Semáforo operativo de los jobs: la "luz" es color decorativo; la PALABRA */
    /* ("Operativo"/"Atrasado") es el significado accesible (nunca solo color). */
    .semaforo{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;line-height:1.4}
    .semaforo .luz{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
    .semaforo.is-ok{color:var(--sem-verde-fg)}
    .semaforo.is-ok .luz{background:var(--sem-verde)}
    .semaforo.is-alerta{color:var(--sem-rojo-fg)}
    .semaforo.is-alerta .luz{background:var(--sem-rojo)}
    /* Tres tarjetas de estado operativo de los jobs. */
    .jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .job-tile{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:var(--card)}
    .job-tile h3{font-size:12px;font-weight:850;color:var(--navy);margin:0 0 9px}
    .job-meta{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:9px}
    .job-meta strong{color:var(--text);font-weight:800}
    /* Umbrales editables: rejilla de formularios individuales (uno por clave);  */
    /* cada uno = campo (crece) + botón Guardar alineado al pie del input.       */
    .umbrales-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .umbral-form{display:flex;gap:8px;align-items:flex-end}
    .umbral-form .fi{flex:1;min-width:0}
    /* Configuración por regla: interruptores + Guardar en una fila que envuelve.*/
    .regla-form{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
    .regla-badges{display:flex;flex-wrap:wrap;gap:6px}
    /* Barra de filtros embebida en la tarjeta del consolidado (no la barra      */
    /* global .filters): mismos controles .fi/.lbl sin el fondo de barra.        */
    .filtros-inline{margin-bottom:14px}
    /* Resumen de grupos (chips texto+total) y lista de alertas activas. */
    .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
    .alertas-lista{display:flex;flex-direction:column;gap:9px}
    .alert-sev{margin-right:7px}
    @media(max-width:1100px){.jobs-grid{grid-template-columns:1fr}.umbrales-grid{grid-template-columns:1fr}}

    /* ===================================================================== */
    /* Fase M7 — Analítica avanzada (sitio de estadísticas). Capa ADITIVA al   */
    /* final: reutiliza card/stat-strip/tabla/badge/hero-kpi del sistema y NO  */
    /* reasigna variables (--blue/--sky = ROJO de marca; --info = azul real;   */
    /* texto tenue = --muted → AA). El estado SIEMPRE se comunica con color +  */
    /* texto: los deltas llevan glifo (▲/▼/=) y las celdas del mapa de calor    */
    /* muestran el número; nunca solo color. Escala de semáforo --sem-*.        */
    /* ===================================================================== */
    /* T7.5 — Delta comparativo (vs. período anterior). Discreto, en su propia */
    /* línea bajo el número; color por SENTIDO (verde=mejora, rojo=empeora,     */
    /* gris=neutro/igual). Los *-fg del semáforo cumplen AA sobre blanco.       */
    .delta{display:block;margin-top:4px;font-size:10px;font-weight:800;letter-spacing:.2px;line-height:1.3;text-transform:none}
    .delta.is-verde{color:var(--sem-verde-fg)}
    .delta.is-rojo{color:var(--sem-rojo-fg)}
    .delta.is-neutro{color:var(--muted)}
    /* Fichas destacadas (desiertos/cancelados de cobertura): número grande +   */
    /* rótulo, con variante de alerta/aviso en el pastel del semáforo.          */
    .stat-hi{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
    .stat-hi .tile{flex:1;min-width:130px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--card)}
    .stat-hi .tile .n{display:block;font-size:20px;font-weight:900;color:var(--navy);letter-spacing:-.4px;line-height:1}
    .stat-hi .tile .l{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:800;margin-top:5px}
    .stat-hi .tile.is-alerta{background:var(--sem-rojo-bg);border-color:#f4c7c7}
    .stat-hi .tile.is-alerta .n,.stat-hi .tile.is-alerta .l{color:var(--sem-rojo-fg)}
    .stat-hi .tile.is-warn{background:var(--sem-amarillo-bg);border-color:#f0d69a}
    .stat-hi .tile.is-warn .n,.stat-hi .tile.is-warn .l{color:var(--sem-amarillo-fg)}
    /* T7.6 — Mapa de calor de cohortes (sin librerías): color de celda por     */
    /* tramo (más % cerrado = más verde) con el número SIEMPRE visible; la      */
    /* celda censurada ('—') queda neutra. Escala --sem-*.                      */
    .heat-table td.heat{text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
    td.heat.h-alto{background:var(--sem-verde-bg);color:var(--sem-verde-fg)}
    td.heat.h-medio{background:var(--sem-amarillo-bg);color:var(--sem-amarillo-fg)}
    td.heat.h-bajo{background:var(--sem-rojo-bg);color:var(--sem-rojo-fg)}
    td.heat.is-cens{color:var(--muted2)}
    @media(max-width:680px){.stat-hi .tile{min-width:100%}}

    /* ===================================================================== */
    /* Alertas de gestión enlazadas (dashboard T6.4). Capa ADITIVA: la tarjeta */
    /* .alert es ahora un <a> block que hereda color y quita el subrayado; el   */
    /* hover/foco la eleva sutilmente. El borde por severidad (.alert.red/…) lo */
    /* sigue dando la regla base. focus-visible con anillo de marca para AT.    */
    a.alert-link{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:box-shadow .12s ease,transform .12s ease,border-color .12s ease}
    a.alert-link:hover{box-shadow:0 6px 18px rgba(15,23,42,.12);transform:translateY(-1px)}
    a.alert-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
    a.alert-link .alert-title{text-decoration:underline;text-decoration-color:transparent}
    a.alert-link:hover .alert-title,a.alert-link:focus-visible .alert-title{text-decoration-color:currentColor}

    /* ===================================================================== */
    /* Detalle de solicitud — rediseño (capa ADITIVA). NO renombra clases ni  */
    /* variables (--blue/--sky = ROJO de marca; --info = azul real; el texto  */
    /* tenue usa --muted → AA). Tres zonas: encabezado con badges, metadatos  */
    /* como pares etiqueta/valor (.meta-grid reusa .lbl en los <dt>) y una    */
    /* zona de gestión separada con paneles "Gestión" y "Decisión".           */
    /* ===================================================================== */
    /* Badges bajo el título (estado + prioridad), en fila que envuelve. */
    .badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 4px}
    /* Metadatos: definition list en grilla fluida; cada par apila dt/dd.
       auto-fit reparte los pares en el ancho disponible (sin media query). */
    .meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 20px;margin:10px 0 2px;padding:12px 16px;background:#f8fafc;border:1px solid var(--line);border-radius:10px}
    .meta-grid>div{min-width:0}
    .meta-grid dt{margin-bottom:3px}
    .meta-grid dd{margin:0;font-size:12.5px;font-weight:700;color:var(--text);overflow-wrap:break-word}
    /* Zona de gestión: separada de la parte informativa por una línea fina.  */
    .gestion-zona{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
    .gestion-grid{display:grid;grid-template-columns:1fr;gap:14px}
    .gestion-grid.dos{grid-template-columns:1.25fr 1fr}
    /* Panel interno (card suave): los controles pasan a fondo blanco para    */
    /* no fundirse con el fondo #f8fafc del panel.                            */
    .gestion-panel{border:1px solid var(--line);border-radius:12px;background:#f8fafc;padding:14px 15px}
    .gestion-panel input,.gestion-panel select,.gestion-panel textarea{background:#fff}
    .gestion-titulo{font-size:12px;font-weight:900;color:var(--navy);text-transform:uppercase;letter-spacing:.7px;margin:0 0 10px}
    .gestion-hint{font-size:11px;color:var(--muted);line-height:1.5;margin:-4px 0 10px}
    .gestion-acciones{display:flex;justify-content:flex-end;margin-top:10px}
    /* Alternativa de decisión (rechazo) bajo la acción principal: separador  */
    /* punteado; el input de motivo queda contenido al ancho del panel.       */
    .gestion-alt{margin-top:14px;padding-top:12px;border-top:1px dashed #cbd5e1}
    /* Responsive (mismos breakpoints del prototipo, al final del bloque). */
    @media(max-width:1100px){.gestion-grid.dos{grid-template-columns:1fr}}
    @media(max-width:680px){.gestion-acciones{justify-content:stretch}.gestion-acciones .btn{flex:1}}