/* HRTIC Asistencia v1.2 · estilos (marca: blanco, cian #009DDE, grafito #262325, Poppins)
   Escala de espacios: 4 · 8 · 12 · 16 · 20 · 24 · 32. Controles de 44 px de alto; en el celular, botones de marcación de 64 px. */
:root {
  --cian:#009DDE; --cian-osc:#0080b5; --cian-suave:#e6f5fc; --grafito:#262325; --gris:#5f6368; --gris-claro:#8a9096;
  --linea:#e4e7eb; --fondo:#f6f8fa; --blanco:#fff; --verde:#1a8a4a; --verde-suave:#e7f6ee; --ambar:#a8650a; --ambar-suave:#fff3df;
  --rojo:#b3261e; --rojo-suave:#fdecea; --radio:14px; --radio-peq:10px; --sombra:0 1px 2px rgba(38,35,37,.06), 0 1px 8px rgba(38,35,37,.04);
  --alto-control:44px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--fondo); color:var(--grafito); font-family:Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.45; }
a { color:var(--cian-osc); }
h1 { font-size:22px; line-height:1.25; margin:0 0 4px; font-weight:700; }
h2 { font-size:17px; line-height:1.3; margin:0; font-weight:600; }
h3 { font-size:15px; margin:0 0 8px; font-weight:600; }
p { margin:0 0 8px; }
.sub { color:var(--gris); font-size:13px; }
.pista { color:var(--gris); font-size:12.5px; margin:6px 0 0; }
.oculto { display:none !important; }
:focus-visible { outline:3px solid #8fd3f2; outline-offset:2px; }

/* ---------- estructura */
header.barra-sup { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:56px; padding:8px 20px; background:var(--blanco); border-bottom:1px solid var(--linea); }
.marca { display:flex; align-items:center; gap:10px; font-weight:700; white-space:nowrap; }
.marca img { width:28px; height:28px; border-radius:8px; }
.marca b { color:var(--cian); }
.marca span { color:var(--gris); font-weight:500; }
.contexto { display:flex; align-items:center; gap:12px; min-width:0; }
.contexto .emp { font-size:13px; color:var(--gris); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46vw; }
.contexto .emp b { color:var(--grafito); font-weight:600; }
main { max-width:1200px; margin:0 auto; padding:20px; }
main.angosto { max-width:560px; }
main.medio { max-width:760px; }
.titulo-seccion { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 16px; }
.titulo-seccion .sub { margin-top:2px; }

/* ---------- pestañas */
nav.tabs { position:sticky; top:56px; z-index:15; display:flex; gap:4px; overflow-x:auto; padding:8px 20px; background:var(--blanco);
  border-bottom:1px solid var(--linea); scrollbar-width:none; }
nav.tabs::-webkit-scrollbar { display:none; }
nav.tabs button { position:relative; display:inline-flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer;
  font:600 14px Poppins, sans-serif; color:var(--gris); padding:9px 14px; border-radius:999px; white-space:nowrap; }
nav.tabs button:hover { background:var(--fondo); }
nav.tabs button.activa { background:var(--cian-suave); color:var(--cian-osc); }
.globo { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--rojo); color:#fff; font-size:11.5px; font-weight:700; }

/* ---------- tarjetas */
.card { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:20px; margin-bottom:16px; }
.card > .cab { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.card > .cab .sub { margin-top:2px; }
.card.plano { box-shadow:none; }
.rejilla { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }
.persona { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.persona .nombre { font-weight:600; line-height:1.25; }
.persona .linea { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.marcas-mini { display:flex; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--gris); font-variant-numeric:tabular-nums; }
.alerta { color:var(--rojo); font-size:12.5px; }

/* ---------- indicadores */
.kpis { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); margin-bottom:16px; }
.kpi { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); padding:12px 16px; }
.kpi .v { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; }
.kpi .t { font-size:12.5px; color:var(--gris); }
.kpi.alerta-kpi .v { color:var(--rojo); }
.kpi.ok-kpi .v { color:var(--verde); }

/* ---------- formularios */
.form { display:grid; gap:14px 16px; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); align-items:end; }
.form.dos { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.campo { display:flex; flex-direction:column; gap:6px; min-width:0; }
.campo.ancho { grid-column:1 / -1; }
label { font-size:13px; font-weight:500; color:var(--grafito); }
input, select, textarea { width:100%; min-height:var(--alto-control); padding:10px 12px; border:1px solid #d5dade; border-radius:var(--radio-peq);
  background:#fff; color:var(--grafito); font:15px Poppins, sans-serif; }
input:focus, select:focus, textarea:focus { border-color:var(--cian); outline:none; box-shadow:0 0 0 3px rgba(0,157,222,.15); }
input[type=date], input[type=month], input[type=time] { font-variant-numeric:tabular-nums; }
textarea { min-height:80px; resize:vertical; }
.acciones-form { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.barra { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; }
.barra .campo { min-width:160px; }
.barra .espacio { flex:1; }

/* ---------- botones */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--alto-control); padding:0 18px; border:1px solid transparent;
  border-radius:var(--radio-peq); background:var(--cian); color:#fff; font:600 14.5px Poppins, sans-serif; cursor:pointer; white-space:nowrap;
  text-decoration:none; transition:background .15s; }
.btn:hover { background:var(--cian-osc); }
.btn.sec { background:#fff; color:var(--grafito); border-color:#d5dade; }
.btn.sec:hover { background:var(--fondo); }
.btn.ok { background:var(--verde); } .btn.ok:hover { background:#14703c; }
.btn.peligro { background:#fff; color:var(--rojo); border-color:#efc2bd; } .btn.peligro:hover { background:var(--rojo-suave); }
.btn.wa { background:#1f9d55; } .btn.wa:hover { background:#18804a; }
.btn.peq { min-height:34px; padding:0 12px; font-size:13px; border-radius:8px; }
.btn.ancho { width:100%; }
.btn.grande { min-height:64px; font-size:17px; border-radius:var(--radio); width:100%; }
.btn:disabled, .btn[aria-disabled=true] { background:#eef1f4; color:#a3a9b0; border-color:#eef1f4; cursor:not-allowed; }
.btn .ico { font-size:22px; line-height:1; }
.acciones { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.segmento { display:inline-flex; background:var(--fondo); border:1px solid var(--linea); border-radius:var(--radio-peq); padding:3px; gap:2px; }
.segmento button { border:0; background:none; min-height:36px; padding:0 14px; border-radius:8px; font:600 13.5px Poppins, sans-serif; color:var(--gris); cursor:pointer; }
.segmento button.activa { background:#fff; color:var(--cian-osc); box-shadow:0 1px 3px rgba(0,0,0,.08); }

/* ---------- avisos y estados */
.aviso { padding:12px 14px; border-radius:var(--radio-peq); margin:0 0 14px; font-size:14px; font-weight:500; border:1px solid transparent; }
.aviso:empty { display:none; }
.aviso.ok { background:var(--verde-suave); color:var(--verde); border-color:#c9ead7; }
.aviso.err { background:var(--rojo-suave); color:var(--rojo); border-color:#f4c7c2; }
.aviso.info { background:var(--cian-suave); color:#0b5677; border-color:#cbe9f7; }
.aviso.espera { background:var(--ambar-suave); color:var(--ambar); border-color:#f6dcb3; }
.chip { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:#eef1f4; color:var(--gris); white-space:nowrap; }
.chip.verde { background:var(--verde-suave); color:var(--verde); } .chip.ambar { background:var(--ambar-suave); color:var(--ambar); }
.chip.rojo { background:var(--rojo-suave); color:var(--rojo); } .chip.cian { background:var(--cian-suave); color:var(--cian-osc); }
.vacio { text-align:center; color:var(--gris); padding:24px 12px; font-size:14px; }
.clave-mostrar { font-size:26px; font-weight:700; letter-spacing:3px; color:var(--grafito); font-variant-numeric:tabular-nums; margin:4px 0; }
.carga { opacity:.55; pointer-events:none; }

/* ---------- tablas */
.tabla { overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio-peq); background:#fff; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--linea); vertical-align:middle; }
th { background:#f7f9fb; color:var(--gris); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:#fafcfd; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.hora { font-variant-numeric:tabular-nums; white-space:nowrap; text-align:center; } th.hora { text-align:center; }
td.nw { white-space:nowrap; }
td .sub { display:block; }
td.acc { text-align:right; white-space:nowrap; }
tr.total td { font-weight:600; background:#f7f9fb; }
details { margin-top:8px; } details summary { cursor:pointer; padding:6px 0; font-weight:500; font-size:14px; }
details ul { margin:4px 0 8px; padding-left:20px; color:var(--gris); font-size:13px; }

/* ---------- modal */
.modal { position:fixed; inset:0; z-index:50; background:rgba(38,35,37,.5); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal .caja { background:#fff; border-radius:var(--radio); padding:22px; max-width:440px; width:100%; max-height:92vh; overflow:auto; }
.modal .caja.grande { max-width:720px; }
.modal .caja h2 { margin-bottom:6px; }

/* ---------- app del trabajador (celular) */
body.app { background:#fff; padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
.saludo { margin:4px 0 0; }
.reloj { font-size:48px; font-weight:700; color:var(--cian); line-height:1.1; font-variant-numeric:tabular-nums; margin:6px 0 0; }
.botonera { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }
.botonera .btn.grande { flex-direction:column; gap:4px; min-height:84px; font-size:15px; padding:8px; white-space:normal; text-align:center; }
.lista { list-style:none; padding:0; margin:0; } .lista li { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--linea); }
.lista li:last-child { border-bottom:0; } .lista b { font-variant-numeric:tabular-nums; }
nav.abajo { position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:#fff;
  border-top:1px solid var(--linea); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); }
nav.abajo button { border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px; border-radius:12px;
  font:600 12px Poppins, sans-serif; color:var(--gris); cursor:pointer; }
nav.abajo button .ico { font-size:20px; line-height:1; }
nav.abajo button.activa { color:var(--cian-osc); background:var(--cian-suave); }
.modo { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gris); margin-top:8px; }
.dia { border:1px solid var(--linea); border-radius:var(--radio-peq); padding:12px 14px; margin-bottom:10px; background:#fff; }
.dia .cab-dia { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.dia .cab-dia b { text-transform:capitalize; }
.nav-fecha { display:flex; align-items:center; gap:8px; }
.nav-fecha .rango { font-weight:600; font-size:14px; min-width:0; text-align:center; flex:1; }
.escaner { position:relative; width:100%; aspect-ratio:1; background:#111; border-radius:var(--radio); overflow:hidden; margin:10px 0; }
.escaner video { width:100%; height:100%; object-fit:cover; }
.escaner .marco { position:absolute; inset:16%; border:3px solid rgba(255,255,255,.9); border-radius:18px; box-shadow:0 0 0 999px rgba(0,0,0,.25); }

/* ---------- equipo fijo */
.teclado { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:360px; margin:12px auto; }
.teclado button { min-height:64px; font:600 26px Poppins, sans-serif; border-radius:var(--radio); border:1px solid #d5dade; background:#fff; color:var(--grafito); cursor:pointer; }
.teclado button:active { background:var(--cian-suave); }
.pantalla-num { font-size:30px; letter-spacing:6px; text-align:center; min-height:46px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- pantalla QR (oficina) */
body.qr { background:#fff; }
.qr-envoltura { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; }
.qr-caja { width:min(62vh, 82vw); aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.qr-caja svg { width:100%; height:100%; }
.qr-codigo { font-size:clamp(28px, 5vw, 46px); font-weight:700; letter-spacing:8px; font-variant-numeric:tabular-nums; }
.qr-barra { width:min(62vh, 82vw); height:6px; background:var(--linea); border-radius:999px; overflow:hidden; }
.qr-barra div { height:100%; background:var(--cian); transition:width 1s linear; }

.pie { color:var(--gris-claro); font-size:12px; text-align:center; margin:24px 0 8px; }

/* ---------- pantallas chicas */
@media (max-width:640px) {
  main { padding:16px; }
  header.barra-sup { padding:8px 16px; }
  nav.tabs { padding:8px 12px; }
  .card { padding:16px; }
  h1 { font-size:20px; }
  .reloj { font-size:42px; }
  .contexto .emp { max-width:40vw; }
  .marca span { display:none; }
}

/* ---------- impresión (reporte del trabajador o del empleador) */
@media print {
  body { background:#fff; font-size:11px; padding:0 !important; }
  header.barra-sup, nav.tabs, nav.abajo, .no-imprimir, .barra .btn, .acciones-form { display:none !important; }
  main { max-width:none; padding:0; }
  .card, .kpi, .dia { box-shadow:none; break-inside:avoid; }
  .solo-imprimir { display:block !important; }
}
.solo-imprimir { display:none; }
.pila { display:grid; gap:10px; margin:16px 0; }
tr.inactivo td { color:var(--gris-claro); }
.centro { text-align:center; }
th.col-nombre, td.col-nombre { min-width:200px; }
td.col-nombre b { white-space:nowrap; }
td.acc .acciones { flex-wrap:nowrap; }
tr.con-nota td { border-bottom:0; }
tr.nota-fila td { padding-top:0; color:var(--gris); font-size:12.5px; }
tr.nota-fila:hover td { background:transparent; }
#tablaHor input { max-width:220px; }

/* ---------- v1.2: rostro, consentimiento, avisos, carga masiva, informe detallado */
.casilla { display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:500; cursor:pointer; }
.casilla input { width:20px; min-height:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--cian); }
.consentimiento { padding-left:20px; margin:12px 0; font-size:13.5px; color:var(--grafito); }
.consentimiento li { margin-bottom:6px; } .consentimiento li:first-child { font-weight:600; list-style:none; margin-left:-20px; }
.camara-rostro { position:relative; width:100%; aspect-ratio:3/4; max-height:56vh; background:#111; border-radius:var(--radio); overflow:hidden; margin:10px 0; }
.camara-rostro video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.camara-rostro .ovalo { position:absolute; left:18%; right:18%; top:12%; bottom:16%; border:3px solid rgba(255,255,255,.95); border-radius:50%;
  box-shadow:0 0 0 999px rgba(0,0,0,.35); }
.pasos { display:flex; gap:6px; list-style:none; padding:0; margin:8px 0; font-size:12px; color:var(--gris-claro); flex-wrap:wrap; }
.pasos li { padding:3px 10px; border-radius:999px; background:var(--fondo); }
.pasos li.hecho { background:var(--verde-suave); color:var(--verde); } .pasos li.ahora { background:var(--cian-suave); color:var(--cian-osc); font-weight:600; }
.guia { font-size:17px; font-weight:600; text-align:center; min-height:48px; margin:6px 0 10px; }
.campana { position:relative; border:1px solid #d5dade; background:#fff; border-radius:999px; min-width:40px; min-height:36px; cursor:pointer; font-size:17px; }
.campana .globo { position:absolute; top:-6px; right:-6px; }
.aviso-item { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--linea); }
.aviso-item:last-child { border-bottom:0; } .aviso-item.nuevo b { color:var(--cian-osc); }
.aviso-item .cuando { font-size:12px; color:var(--gris-claro); white-space:nowrap; margin-left:auto; }
.foto-revision { width:96px; height:auto; border-radius:8px; border:1px solid var(--linea); background:#f2f4f6; display:block; }
.banda { padding:10px 14px; border-radius:var(--radio-peq); margin:0 0 14px; font-size:13.5px; font-weight:500; }
.banda.demo { background:#262325; color:#fff; } .banda.vence { background:var(--ambar-suave); color:var(--ambar); border:1px solid #f6dcb3; }
tr.fila-error td { background:#fff7f6; } tr.fila-nuevo td:first-child { box-shadow:inset 3px 0 0 var(--verde); }
tr.fila-act td:first-child { box-shadow:inset 3px 0 0 var(--cian); }
.detalle-dia td { font-size:12.5px; } .detalle-dia .persona-sep td { background:#f7f9fb; font-weight:600; font-size:13px; }
.archivo { border:2px dashed #cfd6dc; border-radius:var(--radio); padding:18px; text-align:center; background:#fbfcfd; }
.archivo input[type=file] { min-height:auto; border:0; padding:8px 0; background:transparent; }
.nota-legal { font-size:12px; color:var(--gris); }
/* ---------- v1.3: tareo semanal, códigos por día y marcas omitidas */
.tareo td { font-size:12.5px; } .tareo td.codigo, .tareo th.codigo { text-align:center; padding-left:4px; padding-right:4px; min-width:34px; }
.tareo tr.persona-sep2 td { border-top:2px solid var(--linea); }
.cod { display:inline-block; min-width:26px; padding:2px 4px; border-radius:6px; font-weight:600; font-size:11.5px; background:var(--fondo); color:var(--gris); }
.cod-T { background:var(--verde-suave); color:var(--verde); } .cod-F, .cod-MI { background:var(--rojo-suave); color:var(--rojo); }
.cod-FE, .cod-V, .cod-DM, .cod-LG, .cod-P { background:var(--cian-suave); color:var(--cian-osc); }
.cod-FT, .cod-DT { background:#efe7fb; color:#5b2a9e; } .cod-SG, .cod-SU { background:var(--ambar-suave); color:var(--ambar); }
.cod-D, .cod-x { background:transparent; color:var(--gris-claro); }
.marca-declarada { display:inline-block; font-size:11px; color:var(--ambar); margin-left:4px; }

/* ---------- v1.4: enlaces largos (inspector, tablet, API), tablet facial e inspector */
.clave-mostrar.enlace-largo { font-size:13px; letter-spacing:0; word-break:break-all; font-weight:600; background:var(--fondo); border:1px solid var(--linea);
  border-radius:var(--radio-peq); padding:10px 12px; }
.tablet-cam { position:relative; width:100%; max-width:520px; margin:0 auto; border-radius:var(--radio); overflow:hidden; background:#000; aspect-ratio:4/3; }
.tablet-cam video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.tablet-cam .ovalo { position:absolute; inset:12% 26%; border:4px solid rgba(255,255,255,.85); border-radius:50%; pointer-events:none; }
.tablet-guia { text-align:center; font-size:20px; font-weight:600; margin:12px 0; min-height:30px; }
.tablet-nombre { text-align:center; font-size:28px; font-weight:700; margin:8px 0 4px; }
.tablet-reloj { font-size:56px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; color:var(--grafito); line-height:1.1; }
.consent-texto { max-height:40vh; overflow:auto; border:1px solid var(--linea); border-radius:var(--radio-peq); padding:12px; background:var(--fondo); font-size:13.5px; }
.consent-texto p { margin:0 0 8px; }
.insp-cab { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px 16px; margin:8px 0 0; font-size:14px; }
.insp-cab b { display:block; font-size:12px; color:var(--gris); font-weight:500; }
/* ---------- v1.6 · módulo «Personas»: documentos, firmas y subsecciones */
.pe-subs { display:flex; flex-wrap:wrap; max-width:100%; }
.pe-doc { border:1px solid var(--linea); border-radius:var(--radio-peq); padding:18px 20px; margin:12px 0; background:#fff; font-size:14px; line-height:1.55; text-align:justify; }
.pe-doc h3 { font-size:15px; margin:4px 0 2px; } .pe-doc h4 { font-size:13.5px; margin:12px 0 4px; font-weight:700; }
.pe-doc p { margin:0 0 8px; } .pe-doc table { width:100%; border-collapse:collapse; font-size:13px; }
.pe-doc th, .pe-doc td { border:1px solid var(--linea); padding:4px 6px; text-align:left; }
.pe-centro { text-align:center; }
.pe-firmas { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-top:28px; }
.pe-linea { border-top:1px solid var(--grafito); margin-bottom:4px; }
.pe-firmas-lista { background:var(--fondo); border-radius:var(--radio-peq); padding:8px 12px; margin:8px 0; }
.pe-huella { word-break:break-all; font-size:11.5px; }
.doc-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--linea); }
.doc-item:last-child { border-bottom:0; }
nav.abajo button { position:relative; } nav.abajo .globo { position:absolute; top:2px; right:14%; }

/* v1.7 · Planilla: en pantallas angostas (tablet vertical, celular) se ocultan columnas secundarias; el detalle las muestra */
@media (max-width: 900px) { .pl-opc { display:none; } }
/* v1.9 · Nine Box (panel «Desempeño») */
.ninebox { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.nb-celda { border:1px solid var(--linea); border-radius:var(--radio-peq); padding:8px; min-height:92px; background:var(--blanco); }
.nb-celda.nb-verde { background:var(--verde-suave); } .nb-celda.nb-cian { background:var(--cian-suave); }
.nb-celda.nb-ambar { background:var(--ambar-suave); } .nb-celda.nb-rojo { background:var(--rojo-suave); } .nb-celda.nb-neutro { background:var(--fondo); }
.nb-titulo { font-weight:600; font-size:13px; margin-bottom:6px; }
.nb-persona { display:inline-block; margin:2px; padding:3px 8px; border-radius:999px; border:1px solid var(--linea); background:var(--blanco);
  font:inherit; font-size:12px; cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 600px) { .nb-celda { min-height:70px; padding:6px; } .nb-titulo { font-size:12px; } }

/* ---------- v1.11 · Control: KPI con color, gráficos (dona, barras, apilada) y filtros */
.kpi.verde .v { color:var(--verde); } .kpi.ambar .v { color:var(--ambar); } .kpi.rojo .v { color:var(--rojo); } .kpi.cian .v { color:var(--cian-osc); }
.filtros { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filtros select { width:auto; min-width:180px; min-height:var(--alto-control); border:1px solid var(--linea); border-radius:var(--radio-peq); padding:0 12px;
  background:var(--blanco); font:inherit; color:var(--grafito); max-width:100%; }
.graficos { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); margin-bottom:16px; }
.grafico { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); padding:12px 16px; min-width:0; }
.grafico h3 { font-size:14px; margin:0 0 8px; }
.dona { display:flex; align-items:center; gap:14px; }
.dona svg { width:92px; height:92px; flex:none; transform:rotate(0deg); }
.dona-v { font-size:8px; font-weight:700; fill:var(--grafito); font-family:inherit; }
.dona-n { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.barras .fila { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 8px; align-items:center; font-size:12.5px; margin:0 0 8px; }
.barras .et { color:var(--gris); grid-column:1; grid-row:1; line-height:1.3; }
.barras b { text-align:right; font-variant-numeric:tabular-nums; grid-column:2; grid-row:1; }
.barras .barra { grid-column:1 / span 2; grid-row:2; }
.barra { height:10px; background:var(--fondo); border-radius:999px; overflow:hidden; }
.barra i { display:block; height:100%; border-radius:999px; }
.apilada { display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--fondo); margin:8px 0 4px; }
.apilada i { display:block; height:100%; }
.leyenda { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--gris); margin-top:6px; }
.leyenda span::before { content:""; display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; background:var(--c, var(--cian)); }
.card.compacta .tabla:empty { display:none; }
@media (max-width:520px) { .titulo-seccion .filtros { width:100%; } .filtros select { flex:1 1 160px; } .dona svg { width:76px; height:76px; } }

/* ---------- v1.11 · Clima y convivencia: encuesta en la app, código de seguimiento y listas */
.lista-pasos { margin:0; padding-left:20px; } .lista-pasos li { margin:4px 0; }
.encuesta .preg { padding:10px 0; border-bottom:1px solid var(--linea); }
.encuesta h3 { margin-top:16px; }
.escala { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.escala .opc { position:relative; display:inline-flex; }
.escala .opc input { position:absolute; opacity:0; width:1px; height:1px; }
.escala .opc span { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 10px; border:1px solid var(--linea);
  border-radius:10px; background:var(--blanco); font-weight:600; cursor:pointer; }
.escala .opc input:checked + span { background:var(--cian); border-color:var(--cian); color:#fff; }
.escala .opc input:focus-visible + span { outline:3px solid #8fd3f2; outline-offset:2px; }
.escala.texto .opc span { font-weight:500; font-size:14px; }
.codigo-seg { font:700 22px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:2px; margin:8px 0; user-select:all; }
.chip { white-space:nowrap; }
td.acc .acciones, td.acc > .btn { justify-content:flex-end; }
.tabla > ul.lista-pasos { padding:12px 16px 12px 34px; margin:0; }