/* public/css/tema.css — EL TEMA LIMA de ssmac (Fase T1, 29 sep 2026).
   Fuente visual: el diseño de indicadores aprobado por Jorge en Claude Design
   (~/kit-seguridad/diseno-indicadores.dc.html) y su implementacion en preview-indicadores.css.
   Objetivo: UNA identidad (la paleta de expedientes que ya usa el login) para toda la app.

   COMO FUNCIONA. Dos capas, documentadas en docs/TEMA.md:
   1) REMAPEO DE TOKENS bajo html[data-tema="lima"]: Broadsheet esta escrito contra variables
      (--color-*, --font-*, --radius-*), asi que re-tonificar los tokens re-viste TODOS sus
      componentes sin tocarlos. Broadsheet se retira AL FINAL de la migracion, no antes.
   2) COMPONENTES NUEVOS con prefijo t- (t-marca, t-chip, t-card, ...): la gramatica del tablero
      de indicadores, para ir migrando pantalla por pantalla (T2). Sin prefijo chocarian con
      .chip/.tab/.num que ya existen en app.css.

   CONTRASTE AA: el lima #D2D960 SOLO como fondo o sobre oscuro; sobre claro, el texto usa
   #7C8329 (4.6:1 sobre blanco) o mas oscuro. Los numeros usan Geist con tabular-nums (no hay
   Geist Mono en el servidor). */
@font-face{font-family:'Geist';src:url('/public/fonts/geist-var-latin.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap;}

/* ── 1. Tokens propios del tema (siempre disponibles) ─────────────── */
:root{
  --t-ink:#2A2623;         /* tinta / fondo oscuro de la marca */
  --t-lima:#D2D960;        /* acento lima: SOLO fondo o sobre oscuro */
  --t-lima-2:#C2CA49;      /* lima :hover */
  --t-oliva:#7C8329;       /* el acento legible sobre claro (AA) */
  --t-oliva-2:#5E6420;     /* enlaces :hover / enfasis */
  --t-blanco:#FAF9F8;      /* texto sobre oscuro */
  --t-carta:#FFFFFF;       /* tarjetas */
  --t-fondo:#F1EFEC;       /* fondo de pagina */
  --t-suave:#F7F5F2;       /* fondos suaves dentro de tarjetas */
  --t-tinta-2:#4A433E; --t-tinta-3:#6E655F;              /* textos secundarios sobre claro */
  --t-gris-3:#8B837C; --t-gris-4:#B4ADA6; --t-gris-5:#D5D0CB;  /* apagados (los 2 ultimos: SOLO sobre oscuro) */
  --t-borde:#E5E1DC; --t-borde-2:#D9D3CC; --t-borde-3:#F0ECE7;
  --t-rojo:#9C3A1E;        /* alerta / vencido sobre claro */
  --t-ambar:#9C5A1E;       /* aviso sobre claro */
  --t-ambar-claro:#F0C27A; /* aviso sobre oscuro */
  /* Colores por CLASE de evento (los del diseño aprobado) */
  --t-cl-f:#5A1A0E; --t-cl-d:#8E3219; --t-cl-c:#C0592A; --t-cl-a:#E0A23F;
  --t-cl-pa:#B9C03A; --t-cl-hpi:#4A433E; --t-cl-nm:#9A938C; --t-cl-lpi:#CFC9C2;
  /* Niveles SSMAC: rampa por LUMINOSIDAD (no solo tono): de claro a oscurisimo.
     HOY los colores vigentes viven en la BASE (niveles_riesgo): estos tokens son la propuesta
     para cuando la migracion decida moverlos; no se leen todavia. */
  --t-nivel-minimo:#D2D960; --t-nivel-bajo:#B9C03A; --t-nivel-medio:#E0A23F;
  --t-nivel-elevado:#C0592A; --t-nivel-grave:#8E3219;
  --t-sombra-carta:0 1px 2px rgba(42,38,35,.06),0 8px 24px rgba(42,38,35,.05);
}

/* ── 2. Remapeo de los tokens de Broadsheet ───────────────────────── */
html[data-tema="lima"]{
  --color-bg:var(--t-fondo);
  --color-surface:var(--t-carta);
  --color-text:var(--t-ink);
  --color-accent:var(--t-oliva);          /* sobre claro SIEMPRE el oliva, nunca el lima */
  --color-accent-2:var(--t-rojo);         /* lo que era magenta (abiertos/vencidos) pasa a arcilla */
  --color-divider:var(--t-borde);
  --color-neutral-100:#FAF9F8; --color-neutral-200:#F1EFEC; --color-neutral-300:#E5E1DC;
  --color-neutral-400:#D5D0CB; --color-neutral-500:#B4ADA6; --color-neutral-600:#8B837C;
  --color-neutral-700:#6E655F; --color-neutral-800:#4A433E; --color-neutral-900:#2A2623;
  --color-accent-100:#F6F8E3; --color-accent-200:#ECF0C4; --color-accent-300:#DEE698;
  --color-accent-400:#D2D960; --color-accent-500:#B9C03A; --color-accent-600:#99A32E;
  --color-accent-700:#7C8329; --color-accent-800:#5E6420; --color-accent-900:#3F4416;
  --color-accent-2-100:#FBEFE9; --color-accent-2-200:#F4D9CC; --color-accent-2-300:#E8B49B;
  --color-accent-2-400:#D98A64; --color-accent-2-500:#C0592A; --color-accent-2-600:#A94A20;
  --color-accent-2-700:#9C3A1E; --color-accent-2-800:#7A2D17; --color-accent-2-900:#55200F;
  --font-heading:'Geist',-apple-system,'Segoe UI',sans-serif;
  --font-body:'Geist',-apple-system,'Segoe UI',sans-serif;
  --font-heading-weight:700;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(42,38,35,.10);
  --shadow-md:var(--t-sombra-carta);
  --shadow-lg:0 12px 32px rgba(42,38,35,.18);
  -webkit-font-smoothing:antialiased;
}
html[data-tema="lima"] .btn-primary{background:var(--t-lima);color:var(--t-ink);font-weight:700}
html[data-tema="lima"] .btn-primary:hover{background:var(--t-lima-2);color:var(--t-ink)}
html[data-tema="lima"] .btn-primary:active{background:var(--t-oliva);color:var(--t-blanco)}

/* ── 3. Componentes del tema (prefijo t-) ─────────────────────────── */
/* La marca: panel oscuro con las 4 capas de vetas lima (el mismo ::before del login). */
.t-marca{position:relative;background:var(--t-ink);color:var(--t-blanco);overflow:hidden}
.t-marca::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 80%,rgba(210,217,96,.07) 80.4%,transparent 81.2%),linear-gradient(180deg,transparent 87%,rgba(210,217,96,.09) 87.5%,transparent 88.6%),linear-gradient(180deg,transparent 93.5%,rgba(210,217,96,.11) 94.1%,transparent 95.5%),radial-gradient(120% 80% at 100% 0%,rgba(210,217,96,.14),transparent 60%)}
.t-marca>*{position:relative}

.t-kick{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--t-tinta-3)}
.t-num{font-variant-numeric:tabular-nums}
.t-sup{font-size:11px;color:#8B6A2E;border-bottom:1px dotted #B9956A}   /* nota de supuesto */
.t-card{background:var(--t-carta);border-radius:14px;padding:24px;box-shadow:var(--t-sombra-carta);min-width:0}
.t-titulo{font-size:22px;font-weight:700;margin-top:4px}

/* Chips oscuros (sobre .t-marca) y claros (sobre fondo de pagina) */
.t-chip{font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid rgba(210,217,96,.35);background:rgba(210,217,96,.06);color:var(--t-gris-5);cursor:pointer;min-height:36px;white-space:nowrap}
.t-chip:hover{border-color:var(--t-lima);color:var(--t-blanco)}
.t-chip-on{background:var(--t-lima);color:var(--t-ink);border-color:var(--t-lima)}
.t-chip-on:hover{color:var(--t-ink)}
.t-chipc{font-family:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--t-borde-2);background:var(--t-carta);color:var(--t-tinta-2);cursor:pointer;min-height:32px;white-space:nowrap}
.t-chipc-on{background:var(--t-ink);border-color:var(--t-ink);color:var(--t-blanco)}

/* Tabs sobre la marca */
.t-tab{font-family:inherit;font-size:14px;font-weight:600;background:none;border:0;color:var(--t-gris-4);cursor:pointer;padding:10px 2px;border-bottom:2px solid transparent;min-height:44px}
.t-tab:hover{color:var(--t-blanco)}
.t-tab-on{color:var(--t-lima);border-bottom-color:var(--t-lima)}

/* Botones */
.t-btn{font-family:inherit;font-size:15px;font-weight:700;padding:12px 22px;border-radius:8px;border:0;background:var(--t-lima);color:var(--t-ink);cursor:pointer;min-height:44px}
.t-btn:hover{background:var(--t-lima-2)}
.t-btn2{font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px;border:1px solid var(--t-borde-2);background:var(--t-carta);color:var(--t-ink);cursor:pointer;min-height:36px}
.t-btn2:hover{border-color:var(--t-ink)}

/* Formularios */
.t-lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t-tinta-3);margin-bottom:6px}
.t-inp{font-family:inherit;font-size:15px;padding:10px 12px;border-radius:8px;border:1px solid rgba(124,131,41,.3);background:var(--t-blanco);color:var(--t-ink);width:100%;min-height:44px;box-sizing:border-box}
.t-inp:focus{outline:none;box-shadow:0 0 0 3px rgba(210,217,96,.45);border-color:var(--t-oliva)}

/* Tablas y filas clicables */
.t-tabla{border-collapse:collapse;width:100%}
.t-tabla th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t-tinta-3);text-align:right;padding:10px 8px;border-bottom:1px solid var(--t-borde);white-space:nowrap}
.t-tabla td{font-size:13px;padding:9px 8px;border-bottom:1px solid var(--t-borde-3);text-align:right;white-space:nowrap}
.t-tabla th.l,.t-tabla td.l{text-align:left}
.t-fila{background:none;border:0;width:100%;text-align:left;font-family:inherit;color:inherit;cursor:pointer;padding:0;border-radius:10px}
.t-fila:hover{background:var(--t-suave)}

/* Avisos */
.t-toast{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--t-ink);color:var(--t-blanco);border-radius:12px;padding:14px 18px;font-size:14px}
.t-toast b{color:var(--t-lima)}
.t-badge-conf{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:rgba(224,162,63,.18);color:var(--t-ambar-claro)}
.t-punto{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:0}

/* ── 4. El shell con el tema (tanda 1 de la T2) ───────────────────── */
/* La cabecera oscura ocupa todo el ancho aunque viva dentro de .app-shell (sangrado completo). */
/* Sangrado completo con 50vw: 100vw INCLUYE la barra vertical clasica (17 px en Windows) y la cabecera sobresalia ~8 px
   con scroll horizontal (validacion B8-010, 30 sep 2026). html Y body recortan el eje X (si solo el body, su overflow se
   propaga al viewport como hidden y el desborde sigue existiendo): clip no crea contenedor de scroll
   (sticky y fixed siguen igual); hidden queda de respaldo para Safari < 16. tests/validacion/bloque8-front.js vigila que
   NINGUN otro elemento pase del ancho visible, para que el recorte no esconda desbordes reales. */
html[data-tema="lima"]{overflow-x:clip}   /* la raiz va al viewport; asi el body NO se propaga y recorta de verdad */
html[data-tema="lima"] body{overflow-x:hidden;overflow-x:clip}
html[data-tema="lima"] header.t-marca-shell{margin:0 calc(50% - 50vw) var(--space-6);padding:18px calc(50vw - 50% + var(--space-4)) 0}
html[data-tema="lima"] header.t-marca-shell .masthead-rule{background:rgba(210,217,96,.5);height:2px;margin-top:14px}
html[data-tema="lima"] header.t-marca-shell .masthead-thin{background:rgba(210,217,96,.18);height:1px;margin-top:3px}
html[data-tema="lima"] header.t-marca-shell .h1-shell{color:var(--t-blanco);letter-spacing:-.5px}
html[data-tema="lima"] header.t-marca-shell .t-acento{color:var(--t-lima)}
html[data-tema="lima"] header.t-marca-shell .text-muted{color:var(--t-gris-4)}
html[data-tema="lima"] header.t-marca-shell .navlink{color:var(--t-gris-4);font-weight:600;border-bottom:2px solid transparent;border-radius:0;padding:10px 2px}
html[data-tema="lima"] header.t-marca-shell .navlink:hover{color:var(--t-blanco);background:none}
html[data-tema="lima"] header.t-marca-shell .navlink[data-active="1"]{color:var(--t-lima);border-bottom-color:var(--t-lima);background:none}
html[data-tema="lima"] header.t-marca-shell .nav-toggle{background:rgba(210,217,96,.06);border:1px solid rgba(210,217,96,.35);color:var(--t-gris-5)}
html[data-tema="lima"] header.t-marca-shell .selector-proyecto .input{background:rgba(210,217,96,.06);border:1px solid rgba(210,217,96,.35);color:var(--t-blanco);border-radius:999px}
html[data-tema="lima"] header.t-marca-shell .selector-proyecto .input option{color:var(--t-ink);background:var(--t-blanco)}
html[data-tema="lima"] header.t-marca-shell .btn-ghost{color:var(--t-gris-5)}
html[data-tema="lima"] header.t-marca-shell .campana-btn{color:var(--t-gris-5)}
html[data-tema="lima"] header.t-marca-shell .campana-btn:hover{color:var(--t-blanco)}
html[data-tema="lima"] header.t-marca-shell .campana-badge{background:var(--t-lima);color:var(--t-ink);top:2px}   /* el padding del navlink baja el icono: el badge lo sigue */
html[data-tema="lima"] header.t-marca-shell .campana-panel{color:var(--t-ink)}

/* ── 5. Los KPIs como franja oscura (gramatica del tablero) ───────── */
/* Dentro de la franja, los `var(--color-accent*)` que las vistas ponen EN LINEA se resuelven a
   los tonos legibles sobre oscuro: no hay que tocar cada vista. */
html[data-tema="lima"] .kpis{
  --color-accent:var(--t-lima);
  --color-accent-2:var(--t-cl-a);
  background:var(--t-ink);color:var(--t-blanco);border-radius:14px;
  padding:var(--space-4) var(--space-4);gap:1px;
  border:0 !important;
  background-image:linear-gradient(180deg,transparent 80%,rgba(210,217,96,.07) 80.4%,transparent 81.2%),radial-gradient(120% 80% at 100% 0%,rgba(210,217,96,.12),transparent 60%);
}
html[data-tema="lima"] .kpi-num{font-family:'Geist',sans-serif;font-weight:600;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:var(--t-blanco)}
html[data-tema="lima"] .kpi-et{color:var(--t-gris-4)}
html[data-tema="lima"] .kpis .text-muted{color:var(--t-gris-3)}

/* ── 6. Panorama y dashboards (tanda 2 de la T2) ──────────────────── */
/* Las pestanas del Panorama con la voz de los chips claros del tablero (.tab se queda como
   clase porque las suites la miden; el aspecto viene de aqui, no de Broadsheet). */
html[data-tema="lima"] .tabs{border-top:0;padding-top:0;gap:8px;margin:var(--space-2) 0 var(--space-5)}
html[data-tema="lima"] .tab{font-family:inherit;font-size:12px;font-weight:600;padding:6px 12px;min-height:32px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--t-borde-2);background:var(--t-carta);color:var(--t-tinta-2)}
html[data-tema="lima"] .tab:hover{border-color:var(--t-gris-4);color:var(--t-ink)}
html[data-tema="lima"] .tab[data-active="1"]{background:var(--t-ink);border-color:var(--t-ink);color:var(--t-blanco)}

/* Cabecera del dashboard: kicker + titulo + alcance en oliva */
html[data-tema="lima"] .dash-head{margin-bottom:var(--space-6)}
html[data-tema="lima"] .dash-head h2{font-size:26px;letter-spacing:-0.01em}
html[data-tema="lima"] .alcance{color:var(--t-oliva)}

/* Filtros: labels y campos con la gramatica del tablero (sin tocar las clases .field/.input
   que el resto de la app sigue usando: el alcance es SOLO la cabecera del panorama). */
html[data-tema="lima"] .dash-head .filtros label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t-tinta-3)}
html[data-tema="lima"] .dash-head .filtros .input{border:1px solid var(--t-borde-2);border-radius:10px;background-color:var(--t-carta)}
html[data-tema="lima"] .dash-head .filtros .input:focus{outline:none;border-color:var(--t-oliva);box-shadow:0 0 0 3px rgba(210,217,96,.35)}

/* Tablas de los dashboards: la voz de .t-tabla sin renombrar .tabla-dash (las suites la miden).
   Estos estilos NO dependen de Broadsheet: si broadsheet.css se retira, la tabla queda igual. */
html[data-tema="lima"] .tabla-dash,html[data-tema="lima"] .t-card .table{width:100%;border-collapse:collapse;font-size:13px}
html[data-tema="lima"] .tabla-dash th,html[data-tema="lima"] .t-card .table th{font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t-tinta-3);text-align:left;padding:10px 8px;border-bottom:1px solid var(--t-borde)}
html[data-tema="lima"] .tabla-dash td,html[data-tema="lima"] .t-card .table td{padding:9px 8px;border-bottom:1px solid var(--t-borde-3)}
html[data-tema="lima"] .tabla-dash th a,html[data-tema="lima"] .t-card .table th a{color:inherit;text-decoration:none}
html[data-tema="lima"] .tabla-dash th a:hover{color:var(--t-ink)}
html[data-tema="lima"] .tabla-dash tbody tr:hover,html[data-tema="lima"] .t-card .table tbody tr:hover{background:var(--t-suave)}
html[data-tema="lima"] .tabla-dash tfoot td{font-weight:700;border-top:2px solid var(--t-ink);border-bottom:0}

/* Tarjetas del panorama: los h3 de las columnas y las tarjetas-tabla */
html[data-tema="lima"] .grid-panorama .t-card h3{font-size:18px;font-weight:700}
html[data-tema="lima"] .t-card > .tabla-scroll{margin:-4px 0}
html[data-tema="lima"] details.t-card > summary{font-weight:600}
html[data-tema="lima"] .grafica.t-card{height:360px}
html[data-tema="lima"] .alerta-bloque .sec-label{color:var(--t-tinta-3)}
@media (max-width:600px){
  html[data-tema="lima"] .t-card{padding:16px}
  html[data-tema="lima"] .grafica.t-card{height:280px}
}

/* Correcciones de especificidad: las reglas de arriba (html[data-tema] ...) pesan mas que
   .tabla-dash th.num y que el modo tarjeta de .table-cards a <=900, asi que se reafirman aqui. */
html[data-tema="lima"] .tabla-dash th.num,html[data-tema="lima"] .tabla-dash td.num,html[data-tema="lima"] .t-card .table th.num,html[data-tema="lima"] .t-card .table td.num{text-align:right}
@media (max-width:900px){
  html[data-tema="lima"] .tabla-dash th.num,html[data-tema="lima"] .tabla-dash td.num,html[data-tema="lima"] .t-card .table th.num,html[data-tema="lima"] .t-card .table td.num{text-align:left}
  html[data-tema="lima"] .table-cards.tabla-dash td,html[data-tema="lima"] .t-card .table-cards td{border:0;padding:4px 0}
  html[data-tema="lima"] .table-cards.tabla-dash tbody tr:hover,html[data-tema="lima"] .t-card .table-cards tbody tr:hover{background:transparent}
  html[data-tema="lima"] .table-cards.tabla-dash tfoot td{border-top:0}
}

/* ── 7. Hallazgos: lista, detalle y formulario (tanda 3 de la T2) ── */
/* Contadores de la lista: baldosas oscuras que son a la vez filtros rapidos (?rapido=). */
html[data-tema="lima"] .lr-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,132px));gap:1px;background:color-mix(in srgb,var(--t-lima) 18%,transparent);border-radius:12px;overflow:hidden}
html[data-tema="lima"] .lr-tile{display:block;padding:12px 14px;background:var(--t-ink);color:var(--t-blanco);text-decoration:none;min-width:0}
html[data-tema="lima"] .lr-tile:hover{background:color-mix(in srgb,var(--t-ink) 88%,var(--t-lima))}
html[data-tema="lima"] .lr-on,html[data-tema="lima"] .lr-on:hover{background:var(--t-lima);color:var(--t-ink)}
html[data-tema="lima"] .lr-et{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-tema="lima"] .lr-n{display:block;font-size:24px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
@media (max-width:900px){ html[data-tema="lima"] .lr-tiles{grid-template-columns:repeat(2,minmax(0,1fr));width:100%} }

/* Detalle: baldosas de contexto oscuras + dos columnas con lateral pegajoso */
html[data-tema="lima"] .det-tiles{position:relative;overflow:hidden;border:0;border-radius:14px;background:var(--t-ink);color:var(--t-blanco);padding:16px 20px;gap:var(--space-6) var(--space-8)}
html[data-tema="lima"] .det-tiles::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 100% 0%,rgba(210,217,96,.14),transparent 60%)}
html[data-tema="lima"] .det-tiles>*{position:relative}
html[data-tema="lima"] .det-tiles .meta-k{color:var(--t-gris-4)}
html[data-tema="lima"] .det-tiles .meta-v .text-muted{color:var(--t-gris-3)}
html[data-tema="lima"] .det-tiles .track{background:rgba(250,249,248,.14)}
html[data-tema="lima"] .det-tiles .track>span{background:var(--t-lima)}
html[data-tema="lima"] .det-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--space-6);align-items:start}
html[data-tema="lima"] .det-main{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
html[data-tema="lima"] .det-lado{display:flex;flex-direction:column;gap:var(--space-6);min-width:0;position:sticky;top:var(--space-4)}
@media (max-width:1000px){
  html[data-tema="lima"] .det-grid{grid-template-columns:1fr}
  html[data-tema="lima"] .det-lado{position:static}
}
html[data-tema="lima"] .det-pes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
html[data-tema="lima"] .det-pes>div{text-align:center;padding:12px 6px;background:var(--t-suave);border-radius:10px}
html[data-tema="lima"] .det-puntaje{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:12px;padding:12px 16px;border-radius:10px;background:var(--t-ink);color:var(--t-blanco)}
html[data-tema="lima"] .det-falta{margin-bottom:var(--space-3);padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--t-ambar-claro) 30%,var(--t-carta));color:var(--t-ambar);font-size:13px;line-height:1.45}
html[data-tema="lima"] .det .acciones-detalle{flex-direction:column;align-items:stretch}
html[data-tema="lima"] .det .acciones-detalle .btn{text-align:center;justify-content:center}

/* Formulario interno: indice lateral con anclas + secciones como tarjetas */
html[data-tema="lima"] .formh-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-6);align-items:start}
html[data-tema="lima"] .form-indice{position:sticky;top:var(--space-4);display:flex;flex-direction:column;gap:4px}
html[data-tema="lima"] .form-indice a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--t-ink);font-size:14px;font-weight:600}
html[data-tema="lima"] .form-indice a:hover{background:var(--t-carta)}
html[data-tema="lima"] .fi-n{font-size:11px;font-weight:700;color:var(--t-oliva);width:20px}
html[data-tema="lima"] .fi-lock{margin-left:auto;font-size:11px;font-weight:400;color:var(--t-gris-3)}
@media (max-width:1000px){ html[data-tema="lima"] .formh-grid{grid-template-columns:1fr} html[data-tema="lima"] .form-indice{display:none} }
html[data-tema="lima"] .seccion-form{scroll-margin-top:var(--space-4)}
html[data-tema="lima"] .form-sub{font-size:20px;font-weight:700;margin:-6px 0 var(--space-3)}
html[data-tema="lima"] .seccion-ssmac{border:2px solid var(--t-ink);padding:24px}
html[data-tema="lima"] .formh .form-actions{background:var(--t-fondo);padding-bottom:var(--space-3)}

/* Los pasos del avance con la voz del tablero: hecho = lima suave, activo = tinta con lima */
html[data-tema="lima"] .step{border-radius:0}
html[data-tema="lima"] .step:first-child{border-radius:10px 0 0 10px}
html[data-tema="lima"] .step:last-child{border-radius:0 10px 10px 0}
html[data-tema="lima"] .step:has(input:checked){background:var(--t-ink);color:var(--t-lima);border-color:var(--t-ink)}
html[data-tema="lima"] .step:has(~ .step input:checked){background:color-mix(in srgb,var(--t-lima) 24%,var(--t-blanco));border-color:var(--t-borde-2);color:var(--t-oliva-2)}
html[data-tema="lima"] .t-card .form-actions{background:transparent;position:static}

/* Detalle: las 6 baldosas (Departamento · Lugar · Responsable · Compromiso · Reportó · Avance)
   en rejilla; a <1000 px, de dos en dos. "vencido" en ambar claro (legible sobre la tinta). */
html[data-tema="lima"] .det-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.3fr);align-items:start}
html[data-tema="lima"] .det-tiles>div{min-width:0!important}
html[data-tema="lima"] .det-tiles .meta-v{overflow-wrap:anywhere}
html[data-tema="lima"] .det-vencido{font-size:12px;font-weight:700;color:var(--t-ambar-claro);white-space:nowrap}
@media (max-width:1000px){ html[data-tema="lima"] .det-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── 8. Publico / QR (tanda 4 de la T2): movil primero ────────────── */
/* Controles de 48 px minimo y texto de 16 px en campos (iOS no hace zoom al enfocar). */
html[data-tema="lima"] .qr{max-width:600px}
html[data-tema="lima"] .qr-marca{position:relative;overflow:hidden;margin:0 calc(50% - 50vw) var(--space-4);padding:22px max(20px,calc(50vw - 280px)) 24px;background:var(--t-ink);color:var(--t-blanco)}
html[data-tema="lima"] .qr-marca::before,html[data-tema="lima"] .qr-oscuro::before,html[data-tema="lima"] .qr-modal::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 80%,color-mix(in srgb,var(--t-lima) 7%,transparent) 80.4%,transparent 81.2%),linear-gradient(180deg,transparent 93.5%,color-mix(in srgb,var(--t-lima) 11%,transparent) 94.1%,transparent 95.5%),radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--t-lima) 16%,transparent),transparent 60%)}
html[data-tema="lima"] .qr-marca>*,html[data-tema="lima"] .qr-oscuro>*,html[data-tema="lima"] .qr-modal>*{position:relative}
html[data-tema="lima"] .qr-marca-fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
html[data-tema="lima"] .qr-logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;letter-spacing:3px;font-size:15px;color:var(--t-lima)}
html[data-tema="lima"] .qr-paso{font-size:11px;color:var(--t-gris-4);letter-spacing:.1em;text-transform:uppercase;text-align:right}
html[data-tema="lima"] .qr-kick{color:var(--t-gris-4);margin-top:20px}
html[data-tema="lima"] .qr-h1{margin:8px 0 0;font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.8px;color:var(--t-blanco)}
html[data-tema="lima"] .qr-sub{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--t-gris-5)}
html[data-tema="lima"] .qr-nota{margin:0 0 var(--space-3)}

/* Proyecto elegido: panel oscuro con placa, como en la cabecera del diseño */
html[data-tema="lima"] .qr-proyecto{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;padding:10px 12px;border-radius:14px;background:var(--t-ink);border:1px solid color-mix(in srgb,var(--t-lima) 30%,transparent);color:var(--t-blanco)}
html[data-tema="lima"] .qr-placa{flex:none;width:40px;height:40px;border-radius:8px;background:var(--t-lima);color:var(--t-ink);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
html[data-tema="lima"] .qr-proyecto-k{font-size:11px;color:var(--t-gris-4);letter-spacing:.08em;text-transform:uppercase}
html[data-tema="lima"] .qr-proyecto .pe-nombre{font-size:16px;font-weight:600;overflow-wrap:anywhere}
html[data-tema="lima"] .qr-cambiar{margin-left:auto;flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 8px;font-size:15px;font-weight:600;color:var(--t-lima)}

/* Tarjetas y campos */
html[data-tema="lima"] .qr-form{gap:14px;padding-bottom:calc(var(--qr-barra,120px) + env(safe-area-inset-bottom,0px) + 16px)}
html:has(.qr-barra){scroll-padding-bottom:calc(var(--qr-barra,120px) + 16px)}
html[data-tema="lima"] .qr-card{padding:20px;border-radius:16px;display:flex;flex-direction:column;gap:16px}
html[data-tema="lima"] .qr-card .sec-label{margin:0}
html[data-tema="lima"] .qr-h2{font-size:20px;font-weight:700;margin:-12px 0 0}
html[data-tema="lima"] .qr-texto{margin:-6px 0 0;font-size:14px;line-height:1.5;color:var(--t-tinta-2)}
html[data-tema="lima"] .qr .field>label,html[data-tema="lima"] .qr .fieldset-chips legend,html[data-tema="lima"] .qr-lbl{display:block;font-size:14px;font-weight:600;color:var(--t-ink);margin-bottom:6px}
html[data-tema="lima"] .qr-opc{font-weight:400;color:var(--t-tinta-3)}
html[data-tema="lima"] .qr .input{font-size:16px;min-height:48px;padding:12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--t-oliva) 30%,transparent);background-color:var(--t-blanco);color:var(--t-ink);width:100%;box-sizing:border-box}
html[data-tema="lima"] .qr .input:focus{outline:none;border-color:var(--t-oliva);box-shadow:0 0 0 3px color-mix(in srgb,var(--t-lima) 45%,transparent)}
html[data-tema="lima"] .qr .input-error{border-color:var(--t-rojo)}
html[data-tema="lima"] .qr .campo-error{font-size:13px;font-weight:600;color:var(--t-rojo);margin-top:6px}
html[data-tema="lima"] .qr .campo-error[hidden]{display:none}
html[data-tema="lima"] .qr-ayuda{font-size:13px;color:var(--t-tinta-3);margin-top:6px;line-height:1.4}

/* Nivel de riesgo percibido: 2 x 2, radio real + :has (sin JS funciona igual) */
html[data-tema="lima"] .qr-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html[data-tema="lima"] .qr-chips .chip{display:flex;align-items:center;font-size:15px;font-weight:600;padding:12px 14px;border-radius:12px;border:1px solid var(--t-borde-2);background:var(--t-carta);color:var(--t-ink);min-height:48px;line-height:1.2}
html[data-tema="lima"] .qr-chips .chip:has(input:checked){background:var(--t-ink);border-color:var(--t-ink);color:var(--t-blanco)}
html[data-tema="lima"] .qr-punto{flex:none;width:10px;height:10px;border-radius:50%;margin-right:8px;background:var(--t-gris-4)}
html[data-tema="lima"] .qr-chips .chip:nth-child(1) .qr-punto{background:var(--t-oliva)}
html[data-tema="lima"] .qr-chips .chip:nth-child(2) .qr-punto{background:var(--t-cl-pa)}
html[data-tema="lima"] .qr-chips .chip:nth-child(3) .qr-punto{background:var(--t-cl-a)}
html[data-tema="lima"] .qr-chips .chip:nth-child(4) .qr-punto{background:var(--t-cl-c)}

/* Casillas «Tomar foto»: sin JS se ven los inputs nativos; con JS la casilla es el boton */
html[data-tema="lima"] .qr-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 0}
html[data-tema="lima"] .qr-foto{position:relative;min-width:0}
html[data-tema="lima"] .qr-foto[hidden]{display:none}
html:not(.js)[data-tema="lima"] .qr-fotos{grid-template-columns:1fr}
html:not(.js)[data-tema="lima"] .qr-foto-tomar{display:none}
html.js[data-tema="lima"] .qr-foto{aspect-ratio:1}
html.js[data-tema="lima"] .qr-foto-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
html[data-tema="lima"] .qr-foto-tomar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;min-height:48px;box-sizing:border-box;border-radius:12px;border:2px dashed var(--t-cl-pa);background:color-mix(in srgb,var(--t-lima) 8%,var(--t-blanco));color:var(--t-oliva-2);font-size:12px;font-weight:600;cursor:pointer;margin:0}
html[data-tema="lima"] .qr-foto:has(input:focus-visible) .qr-foto-tomar{outline:3px solid var(--t-oliva);outline-offset:2px}
html[data-tema="lima"] .qr-foto[data-llena="1"] .qr-foto-tomar{display:none}
html[data-tema="lima"] .qr-foto-mini{position:absolute;inset:0;margin:0;border-radius:12px;overflow:hidden;background:var(--t-cl-lpi)}
html[data-tema="lima"] .qr-foto-mini img{width:100%;height:100%;object-fit:cover;display:block}
html[data-tema="lima"] .qr-foto-mini figcaption{position:absolute;left:6px;bottom:6px;font-size:11px;font-weight:600;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--t-ink) 80%,transparent);color:var(--t-blanco)}
html[data-tema="lima"] .qr-foto-quitar{position:absolute;top:0;right:0;width:48px;height:48px;border:0;background:transparent;cursor:pointer;font-size:0;color:transparent}
html[data-tema="lima"] .qr-foto-quitar::after{content:"\00d7";position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--t-ink) 80%,transparent);color:var(--t-blanco);font-size:18px;line-height:30px;text-align:center}
html[data-tema="lima"] .qr-foto-quitar:focus-visible::after{outline:3px solid var(--t-lima)}

/* Barra fija de Enviar: el hueco inferior del form (--qr-barra) evita que tape campos */
html[data-tema="lima"] .qr-barra{position:fixed;left:0;right:0;bottom:0;z-index:20;display:block;margin:0;padding:12px max(14px,calc(50vw - 286px)) calc(14px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--t-fondo) 97%,transparent);border-top:1px solid var(--t-borde)}
html[data-tema="lima"] .qr-barra .btn{width:100%;min-height:56px;font-size:17px;font-weight:800;border-radius:12px}
html[data-tema="lima"] .qr-faltan{font-size:13px;color:var(--t-tinta-3);text-align:center;margin:8px 0 0}
html[data-tema="lima"] .qr-faltan[hidden]{display:none}
html[data-tema="lima"] .qr-faltan[data-listo="1"]{color:var(--t-oliva-2);font-weight:600}
html[data-tema="lima"] .qr-pie{font-size:12px;color:var(--t-gris-3);text-align:center;margin:4px 0 0}

/* Modal de proyecto: pantalla oscura completa en el telefono, tarjeta oscura desde 600 px */
html[data-tema="lima"] .modal-proyecto{background:color-mix(in srgb,var(--t-ink) 70%,transparent)}
html[data-tema="lima"] .qr-modal{position:relative;overflow:hidden;background:var(--t-ink);color:var(--t-blanco);width:min(480px,100%);padding:28px 20px 24px;border-radius:16px;gap:0}
html[data-tema="lima"] .qr-modal .dialog-title{margin:10px 0 0;font-size:32px;line-height:1.08;font-weight:700;letter-spacing:-1px;color:var(--t-blanco)}
html[data-tema="lima"] .qr-modal .dialog-body{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--t-gris-5);opacity:1}
html[data-tema="lima"] .qr-modal-kick{margin-top:32px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lima)}
html[data-tema="lima"] .qr-modal .proyecto-opciones{display:flex;flex-direction:column;gap:10px;margin-top:24px}
html[data-tema="lima"] .qr-modal .btn-proyecto{display:flex;align-items:center;gap:16px;min-height:64px;padding:12px 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--t-lima) 25%,transparent);background:color-mix(in srgb,var(--t-blanco) 4%,transparent);color:var(--t-blanco);text-decoration:none}
html[data-tema="lima"] .qr-modal .btn-proyecto:hover{border-color:var(--t-lima);background:color-mix(in srgb,var(--t-lima) 8%,transparent)}
html[data-tema="lima"] .qr-modal .btn-proyecto:focus-visible{outline:3px solid var(--t-lima);outline-offset:2px}
html[data-tema="lima"] .qr-modal .bp-clave{flex:none;width:48px;height:48px;min-width:48px;border-radius:10px;background:var(--t-lima);color:var(--t-ink);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}
html[data-tema="lima"] .qr-modal .bp-nombre{font-size:17px;font-weight:600;color:var(--t-blanco)}
html[data-tema="lima"] .bp-flecha{margin-left:auto;flex:none;color:var(--t-gris-3)}
html[data-tema="lima"] .qr-modal-pie{display:flex;gap:10px;align-items:flex-start;margin:28px 0 0;font-size:13px;line-height:1.45;color:var(--t-gris-4)}
html[data-tema="lima"] .qr-modal-pie svg{flex:none;margin-top:1px;color:var(--t-lima)}
@media (max-width:600px){
  html[data-tema="lima"] .modal-proyecto{padding:0;place-items:stretch;background:var(--t-ink)}
  html[data-tema="lima"] .qr-modal{width:100%;min-height:100vh;min-height:100dvh;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
  html[data-tema="lima"] .qr-modal-pie{margin-top:auto;padding-top:28px}
}

/* Confirmacion y avisos: pantalla oscura completa con el folio en lima */
html:has(.qr-oscuro) body{background:var(--t-ink)}
html:has(.qr-oscuro) .app-shell{padding-bottom:0}
html[data-tema="lima"] .qr-oscuro{position:relative;overflow:hidden;box-sizing:border-box;margin:0 calc(50% - 50vw);max-width:none;min-height:100vh;min-height:100dvh;padding:28px max(22px,calc(50vw - 280px));background:var(--t-ink);color:var(--t-blanco);display:flex;flex-direction:column}
html[data-tema="lima"] .qr-gracias{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:64px}
html[data-tema="lima"] .qr-check{width:72px;height:72px;border-radius:50%;background:var(--t-lima);color:var(--t-ink);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
html[data-tema="lima"] .qr-gracias .qr-modal-kick{margin-top:0}
html[data-tema="lima"] .qr-folio-k{margin-top:34px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t-gris-4)}
html[data-tema="lima"] .qr-oscuro .folio-grande{margin-top:6px;font-size:64px;line-height:1;font-weight:800;letter-spacing:-2px;color:var(--t-lima);font-family:inherit}
html[data-tema="lima"] .qr-gracias-txt{margin:18px auto 0;max-width:320px;font-size:16px;line-height:1.5;color:var(--t-gris-5)}
html[data-tema="lima"] .qr-gracias-txt strong{color:var(--t-blanco)}
html[data-tema="lima"] .qr-chips-oscuro{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
html[data-tema="lima"] .qr-chips-oscuro span{font-size:13px;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--t-blanco) 6%,transparent);border:1px solid color-mix(in srgb,var(--t-lima) 25%,transparent)}
html[data-tema="lima"] .qr-gracias-pie{margin:auto 0 0;padding-top:40px;font-size:14px;line-height:1.5;color:var(--t-gris-4);text-align:center}
html[data-tema="lima"] .qr-pie-oscuro{margin-top:16px;color:var(--t-gris-3)}
@media (max-width:400px){ html[data-tema="lima"] .qr-oscuro .folio-grande{font-size:52px} }

/* ── 9. Configuracion, notificaciones, cuenta y acceso (tanda 5 de la T2) ── */
/* Configuracion: la sub-navegacion con la voz de los chips claros; cada seccion es tarjeta. */
html[data-tema="lima"] .cfg .sub-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-4)}
html[data-tema="lima"] .cfg .sub-nav a{font-size:12px;font-weight:600;padding:6px 12px;min-height:32px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--t-borde-2);background:var(--t-carta);color:var(--t-tinta-2);text-decoration:none}
html[data-tema="lima"] .cfg .sub-nav a:hover{border-color:var(--t-gris-4);color:var(--t-ink)}
html[data-tema="lima"] .cfg-seccion.t-card{margin-bottom:var(--space-6)}
html[data-tema="lima"] .cfg-seccion>.sec-head .sec-label{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--t-oliva)}
html[data-tema="lima"] .t-card .table-niveles{width:100%}

/* Bienvenida y recuperacion: hermanas del login (banda oscura con la marca + tarjeta clara). */
html[data-tema="lima"] .acceso{max-width:520px;margin:var(--space-8) auto}
html[data-tema="lima"] .acceso-marca{position:relative;overflow:hidden;padding:24px 24px 28px;border-radius:16px 16px 0 0;background:var(--t-ink);color:var(--t-blanco)}
html[data-tema="lima"] .acceso-marca::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 80%,color-mix(in srgb,var(--t-lima) 7%,transparent) 80.4%,transparent 81.2%),linear-gradient(180deg,transparent 93.5%,color-mix(in srgb,var(--t-lima) 11%,transparent) 94.1%,transparent 95.5%),radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--t-lima) 16%,transparent),transparent 60%)}
html[data-tema="lima"] .acceso-marca>*{position:relative}
html[data-tema="lima"] .acceso-logo{display:flex;align-items:center;gap:10px}
html[data-tema="lima"] .acceso-logo b{display:block;color:var(--t-lima);letter-spacing:3px;font-size:15px}
html[data-tema="lima"] .acceso-logo small{display:block;color:var(--t-gris-4);font-size:10px;letter-spacing:.1em}
html[data-tema="lima"] .acceso-kick{margin:28px 0 6px;color:var(--t-lima)}
html[data-tema="lima"] .acceso-titulo{margin:0;font-size:28px;line-height:1.15;color:var(--t-blanco)}
html[data-tema="lima"] .acceso-caja{border-radius:0 0 16px 16px;padding:24px}
html[data-tema="lima"] .acceso-caja .input{min-height:48px;font-size:16px}
html[data-tema="lima"] .acceso-botones{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--space-2)}
@media (max-width:600px){ html[data-tema="lima"] .acceso{margin:var(--space-4) auto} html[data-tema="lima"] .acceso-titulo{font-size:24px} }
html[data-tema="lima"] .acceso-caja .field{margin-bottom:14px}

/* ── 10. Nivel vs estado (correccion de Jorge a la tanda 3) ───────── */
/* NIVEL: punto con el color de niveles_riesgo (de la BASE, en linea) + nombre, como el Panorama.
   ESTADO: chip NEUTRO, nunca con colores de riesgo: contorno mientras esta vivo, tinta cuando
   espera el V/B (pide accion), gris cuando es terminal. Asi Grave/Elevado y Abierto/Asignado
   dejan de compartir el mismo rosa. */
html[data-tema="lima"] .t-nivel{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;border:1px solid var(--t-borde-2);background:var(--t-carta);color:var(--t-ink);font-size:12px;font-weight:700;white-space:nowrap}
html[data-tema="lima"] .t-nivel .risk-dot{width:10px;height:10px;box-shadow:0 0 0 1px color-mix(in srgb,var(--t-ink) 18%,transparent)}
html[data-tema="lima"] .t-nivel[data-nivel=""] .risk-dot{box-shadow:inset 0 0 0 1.5px var(--t-gris-3)}
html[data-tema="lima"] .t-estado{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;border:1px solid var(--t-gris-4);background:transparent;color:var(--t-tinta-2);font-size:12px;font-weight:600;white-space:nowrap}
html[data-tema="lima"] .t-estado[data-estado-chip="PENDIENTE_VB"]{background:var(--t-ink);border-color:var(--t-ink);color:var(--t-lima)}
html[data-tema="lima"] .t-estado[data-estado-chip="CERRADO"],html[data-tema="lima"] .t-estado[data-estado-chip="RECHAZADO"],html[data-tema="lima"] .t-estado[data-estado-chip="DUPLICADO"]{background:var(--t-suave);border-color:var(--t-borde);color:var(--t-tinta-3)}

/* Detalle en una columna (<=1000 px, que incluye todo movil y tableta vertical): franja de
   contexto -> Acciones -> Evaluacion SSMAC -> resto. Las dos columnas se aplanan con
   display:contents y cada tarjeta toma su lugar con `order` (el HTML no cambia de orden, asi
   que el escritorio y los lectores de pantalla conservan el suyo). */
@media (max-width:1000px){
  html[data-tema="lima"] .det-grid{display:flex;flex-direction:column;gap:var(--space-6)}
  html[data-tema="lima"] .det-main,html[data-tema="lima"] .det-lado{display:contents}
  html[data-tema="lima"] .det-main>*,html[data-tema="lima"] .det-lado>*{order:3}
  html[data-tema="lima"] .det-acciones{order:1}
  html[data-tema="lima"] .det-eval{order:2}
}

/* ── 11. Indicadores: captura, detalle, horas hombre y Configuracion (fase I3) ── */
/* Movil primero: una columna, controles de 48 px y 16 px en campos; dos columnas desde 700 px. */
html[data-tema="lima"] .ic{max-width:1040px}
html[data-tema="lima"] .ic-sec{margin-bottom:var(--space-4)}
html[data-tema="lima"] .ic-sec .sec-label{margin-bottom:var(--space-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html[data-tema="lima"] .ic-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
@media (min-width:700px){ html[data-tema="lima"] .ic-grid{grid-template-columns:repeat(2,minmax(0,1fr))} html[data-tema="lima"] .ic-ancho{grid-column:1 / -1} }
html[data-tema="lima"] .ic-campo{margin:0;min-width:0}
html[data-tema="lima"] .ic .input,html[data-tema="lima"] .ic-centros-cfg .input{min-height:48px;font-size:16px}
html[data-tema="lima"] .ic-otro{margin-top:8px}
html[data-tema="lima"] .ic-otro[hidden]{display:none}
html[data-tema="lima"] .ic-ayuda{font-size:12px;margin-top:4px}
html[data-tema="lima"] .ic-deriva{display:flex;flex-direction:column;gap:6px;margin-top:var(--space-3);padding:12px 14px;border-radius:10px;background:var(--t-suave);font-size:14px}
html[data-tema="lima"] .ic-lta{font-weight:600;color:var(--t-oliva-2)}
html[data-tema="lima"] .ic-lta-si{color:var(--t-rojo)}
html[data-tema="lima"] .ic-sensible{border:1px dashed var(--t-ambar)}
html[data-tema="lima"] .ic-acciones .btn{min-height:48px}
html[data-tema="lima"] .ic-barra-tablero{display:flex;gap:10px;flex-wrap:wrap}
html[data-tema="lima"] .ic-barra-tablero .btn{min-height:44px}
html[data-tema="lima"] .ic-datos{display:grid;grid-template-columns:1fr;gap:10px 24px;margin:0}
@media (min-width:700px){ html[data-tema="lima"] .ic-datos:not(.ic-datos-1){grid-template-columns:repeat(2,minmax(0,1fr))} }
html[data-tema="lima"] .ic-datos dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t-tinta-3)}
html[data-tema="lima"] .ic-datos dd{margin:2px 0 0;font-size:15px;overflow-wrap:anywhere}
/* Horas hombre */
html[data-tema="lima"] .ic-rejilla td[data-estado="falta"]{color:var(--t-gris-3)}
html[data-tema="lima"] .ic-mes{margin-top:var(--space-4);scroll-margin-top:var(--space-4)}
html[data-tema="lima"] .ic-filas-hh{display:flex;flex-direction:column;gap:10px}
html[data-tema="lima"] .ic-fila-hh{display:grid;grid-template-columns:1fr;gap:8px;align-items:end;padding:12px 0;border-bottom:1px solid var(--t-borde-3)}
html[data-tema="lima"] .ic-fila-hh .field{margin:0}
html[data-tema="lima"] .ic-fila-hh .btn{min-height:48px}
@media (min-width:760px){ html[data-tema="lima"] .ic-fila-hh{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto} }
/* Configuracion -> Centros de indicadores */
html[data-tema="lima"] .ic-centros-cfg{display:flex;flex-direction:column;gap:14px}
html[data-tema="lima"] .ic-centro-cfg{display:grid;grid-template-columns:1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--t-borde-3)}
html[data-tema="lima"] .ic-centro-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html[data-tema="lima"] .ic-centro-campos .field{margin:0}
html[data-tema="lima"] .ic-supervisores{display:flex;flex-wrap:wrap;gap:8px 18px}
html[data-tema="lima"] .ic-supervisores .check{min-height:32px}
@media (min-width:900px){ html[data-tema="lima"] .ic-centro-cfg{grid-template-columns:220px minmax(0,1.2fr) minmax(0,1.6fr) auto;align-items:center} }
html[data-tema="lima"] .ic-mes-sum{cursor:pointer;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-height:32px}
html[data-tema="lima"] .ic-mes[open] .ic-mes-sum{margin-bottom:var(--space-2)}

/* ── 12. Acciones correctivas (fase I4b) ── */
html[data-tema="lima"] .ic-acciones-lista{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--space-3)}
html[data-tema="lima"] .ic-ac{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:10px 8px;border-bottom:1px solid var(--t-borde-3);text-decoration:none;color:var(--t-ink);border-radius:8px}
html[data-tema="lima"] .ic-ac:hover{background:var(--t-suave)}
html[data-tema="lima"] .ic-ac-folio{color:var(--t-oliva);font-size:13px}
html[data-tema="lima"] .ic-ac-cuerpo{display:flex;flex-direction:column;gap:2px;min-width:0}
html[data-tema="lima"] .ic-ac-desc{font-weight:600;font-size:14px;overflow-wrap:anywhere}
html[data-tema="lima"] .ic-ac-lado{grid-column:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html[data-tema="lima"] .ic-ac-lado .avance{flex:1;min-width:120px;max-width:220px}
@media (min-width:760px){ html[data-tema="lima"] .ic-ac{grid-template-columns:auto minmax(0,1fr) 260px} html[data-tema="lima"] .ic-ac-lado{grid-column:auto;justify-content:flex-end} }
html[data-tema="lima"] .ic-nueva-ac>summary{display:inline-flex;list-style:none;cursor:pointer}
html[data-tema="lima"] .ic-nueva-ac>summary::-webkit-details-marker{display:none}
html[data-tema="lima"] .campana-ac{margin-right:6px;font-size:10px;padding:1px 6px}