/* ============================================================
   PRAEVIS — Seguridad y Salud en el Trabajo
   Grafito + amarillo de seguridad · mobile-first
   ============================================================ */

/* Archivo, del linaje DIN (la norma alemana de rotulación industrial).
   Va como archivo propio y no desde un servicio ajeno: en planta la señal es
   mala y una fuente que no baja cambia cómo se ve todo. `swap` deja leer con
   la del sistema mientras llega. */
@font-face {
  font-family: Archivo;
  src: url('/fuentes/Archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  /* La paleta de la aplicación no es la del logotipo, y es a propósito. El
     ámbar de marca (#C07A15) funciona impreso y en el pico del logo, pero
     llevado a toda la interfaz —botones, elegidos, gráficos— apaga la pantalla:
     leído en planta, de día y con el brillo del celular peleando contra el sol,
     lo apagado se pierde. Acá manda el amarillo de seguridad, el mismo de los
     carteles, y los estados van vivos. El logotipo conserva su ámbar. */
  --cement:     #ECEAE3;   /* fondo */
  --graphite:   #1A1C20;   /* tinta / bordes / barra */
  --yellow:     #F4B400;   /* acento (seguridad) */
  --yellow-dk:  #d89e00;
  --obs:        #0E7A5F;   /* observación */
  --inc:        #D0392B;   /* incidente */
  --warn:       #E08600;
  --surface:    #FFFFFF;
  --muted:      #6b7078;
  --muted-2:    #4b5058;
  --line-soft:  #c9c6bd;

  --radius:     4px;
  --radius-sm:  3px;
  --font: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* El atributo hidden siempre gana: las clases con display (flex/grid/inline-block)
   pisarían la regla del navegador y el elemento quedaría visible. */
[hidden] { display: none !important; }
body {
  font-family: var(--font);
  color: var(--graphite);
  background: var(--cement);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: clip;               /* evita scroll horizontal accidental */
}

/* ── Barra superior ──────────────────────────────────────── */
.appbar {
  background: var(--graphite);
  color: #fff;
  padding: 14px 18px;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--yellow);
}
.appbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.appbar h1 {
  font-size: .92rem; font-weight: 700; margin: 0;
  text-transform: uppercase; letter-spacing: .04em;
}
.appbar .sub {
  font-size: .64rem; margin: 2px 0 0; color: #9aa0ab;
  text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: 7px;
}
/* El logotipo en la barra: versión corta en negativo, que el fondo es
   grafito. Va contenido en altura porque Archivo es más ancha que la fuente
   del sistema y, sin techo, el encabezado se comía media pantalla de celular. */
.appbar .logo {
  height: 20px; width: auto; flex-shrink: 0;
  display: block;
}
@media (min-width: 720px) { .appbar .logo { height: 26px; } }
.appbar .logo + .titulos { border-left: 1px solid rgba(255,255,255,.22); padding-left: 12px; }
.appbar .spacer { flex: 1; }
.badge {
  font-size: .68rem; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-sm);
  background: rgba(244,180,0,.16); color: var(--yellow); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono);
}

/* ── Layout ──────────────────────────────────────────────── */
.container { max-width: 1180px; margin: 0 auto; padding: 18px; }
.narrow { max-width: 640px; }

/* ── Tarjetas ────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.card h2 { font-size: .82rem; margin: 0; text-transform: uppercase; letter-spacing: .08em; }
.card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--cement); }
.card-title h2 { margin: 0; }

/* ── Formulario ──────────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field > label {
  display: block; font-size: .72rem; font-weight: 700;
  color: var(--muted-2); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .06em;
}
.field .hint { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: .74rem; }

/* `password` va en la lista desde que existe la pantalla de ingreso: sin él,
   el campo del PIN se dibujaba con su ancho intrínseco —veinte caracteres— y
   se salía de la tarjeta. */
input[type="text"], input[type="datetime-local"], input[type="date"],
input[type="password"], select, textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font: inherit;
  color: var(--graphite);
  background: #fff;
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color .12s, box-shadow .12s;
}
textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(244,180,0,.25);
}

/* Tipo de reporte — selector destacado (dato clave) */
.card-tipo { border-left: 5px solid var(--yellow); }
.card-tipo .field > label { display: flex; align-items: center; }
.tipo-select {
  font-size: 1.1rem;
  font-weight: 700;
  min-height: 58px;
  padding: 14px 16px;
}
.tipo-select:invalid { color: var(--muted); font-weight: 600; }
.req {
  font-size: .6rem; font-weight: 800; letter-spacing: .08em;
  color: #7a5b00; background: #fbf3d8; border: 1px solid var(--warn);
  padding: 3px 8px; border-radius: 999px; margin-left: 8px;
}

/* Identidad / historial */
.ident-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--graphite); border-radius: var(--radius);
  padding: 8px 8px 8px 14px; margin-bottom: 14px; font-size: .85rem;
}
.ident-who strong { text-transform: none; }
.edit-banner {
  background: #fbf3d8; border: 1px solid var(--warn); color: #7a5b00;
  border-radius: var(--radius); padding: 11px 14px; margin-bottom: 14px; font-size: .86rem; font-weight: 600;
}
.overlay { position: fixed; inset: 0; background: rgba(15,17,20,.6); display: grid; place-items: center; z-index: 200; padding: 20px; }
.modal {
  background: var(--surface); border: 1px solid var(--graphite); border-top: 4px solid var(--yellow);
  border-radius: var(--radius); padding: 22px; max-width: 420px; width: 100%;
}
.modal h2 { margin: 0 0 6px; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; }
.modal-sub { margin: 0 0 16px; color: var(--muted); font-size: .88rem; }
.ident-label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); margin-bottom: 7px; }
.ident-error { margin-top: 9px; font-size: .84rem; color: var(--inc); font-weight: 600; }
.modal-lg { max-width: 520px; max-height: 88vh; overflow-y: auto; }

/* Resumen de revisión previa al envío */
.resumen { border-top: 1px solid var(--cement); }
.resumen .fila {
  display: grid; grid-template-columns: 118px 1fr; gap: 6px 12px;
  padding: 9px 0; border-bottom: 1px solid var(--cement); align-items: baseline;
}
.resumen .k {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted-2);
}
.resumen .v { font-size: .9rem; }
.resumen .v.fuerte { font-weight: 700; }
.resumen .v.vacio { color: var(--muted); font-style: italic; font-size: .84rem; }
.modal-acciones { display: flex; gap: 10px; margin-top: 18px; }
.modal-acciones .btn { flex: 1; width: auto; }

@media (max-width: 420px) {
  .resumen .fila { grid-template-columns: 1fr; gap: 2px; }
}

/* Administración de listas */
/* ── Índice de secciones (administración) ────────────────── */
/* Todas las listas a la vista con su cuenta y sus pendientes; abajo se abre
   solo la elegida. Antes era un scroll largo donde no se veía qué había. */
.secciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 9px; margin-bottom: 18px;
}
.seccion {
  cursor: pointer; font: inherit; text-align: left;
  background: var(--surface); border: 1px solid var(--graphite);
  border-radius: var(--radius); padding: 11px 13px;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  align-items: baseline; transition: background .12s, border-color .12s;
}
.seccion:hover { background: #fffdf6; border-color: var(--yellow); }
.seccion b {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.2; min-width: 0;
}
.seccion .n {
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums; justify-self: end;
}
.seccion .pend {
  grid-column: 1 / -1; font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #7a5b00;
  background: #fbf3d8; border: 1px solid var(--warn);
  border-radius: 999px; padding: 2px 7px; justify-self: start; margin-top: 3px;
}
/* La elegida se pinta llena, como el resto de lo seleccionable en la app. */
.seccion.on { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.seccion.on:hover { background: var(--graphite); }
.seccion.on .n { color: rgba(255,255,255,.7); }
.seccion.on .pend { background: var(--yellow); border-color: var(--yellow); color: var(--graphite); }

/* Las listas de UPM, en modo consulta */
.fija { padding: 11px 0; border-top: 1px solid var(--cement); }
.fija:first-child { border-top: none; padding-top: 0; }
.fija h3 {
  margin: 0 0 4px; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted-2);
}
.fija h3 span { font-family: var(--mono); color: var(--muted); margin-left: 5px; }
.fija p { margin: 0; font-size: .84rem; color: var(--graphite); line-height: 1.5; }

.cat-help { margin: -4px 0 14px; color: var(--muted); font-size: .84rem; }
/* En el celular no entran tres controles en una línea: que bajen solos. */
.cat-add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cat-add input { flex: 1; min-width: 150px; }
/* También el desplegable: sin un mínimo se comprime hasta mostrar una letra. */
.cat-add select { flex: 1; min-width: 165px; }
.cat-add .btn { flex-shrink: 0; }
/* Resultado de la búsqueda: dice si lo escrito ya está antes de agregarlo. */
.busq-aviso {
  font-size: .8rem; color: var(--muted-2); margin: -6px 0 12px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: #f4f2ec; border: 1px solid var(--line-soft);
}
.busq-aviso.ya { background: #fbf3d8; border-color: var(--warn); color: #7a5b00; font-weight: 600; }

.cat-list { display: flex; flex-direction: column; }
.cat-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--cement);
}
.cat-row.off { opacity: .55; }
.cat-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.cat-usos { font-family: var(--mono); font-size: .7rem; color: var(--muted); text-align: right; white-space: nowrap; }

/* Las acciones acompañan: el que manda visualmente es el nombre. */
.cat-actions { grid-column: 1 / -1; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.cat-actions .btn {
  padding: 0; min-height: 0; font-size: .78rem; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--muted);
  background: none; border: none; border-radius: 0;
}
.cat-actions .btn:hover { background: none; color: var(--graphite); text-decoration: underline; }
.cat-actions .btn.danger-text:hover { color: var(--inc); }
/* Unir dos que son la misma. Se abre dentro de la fila —no en una ventana que
   tape la lista— y ocupa el ancho entero: en el celular, elegir contra cuál se
   une con un desplegable apretado en una esquina es pedir un error. */
.cat-fusion {
  grid-column: 1 / -1; margin-top: 8px; padding: 12px;
  background: var(--paper-2, #f6f4ef); border: 1px solid var(--cement); border-radius: 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.cat-fusion-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cat-fusion-linea label { font-size: .84rem; color: var(--muted); }
.cat-fusion select {
  flex: 1 1 200px; min-width: 0; min-height: 40px;
  font-size: .9rem; padding: 6px 10px;
  border: 1px solid var(--cement); border-radius: 6px; background: #fff;
}
/* Estos dos sí son botones de verdad y no texto: uno mueve reportes. */
.cat-fusion .btn { min-height: 40px; padding: 8px 14px; font-size: .8rem; }
.cat-fusion-resumen { font-size: .86rem; line-height: 1.45; }
.cat-fusion-resumen p { margin: 0 0 6px; }
.cat-fusion-resumen p:last-child { margin-bottom: 0; }
.cat-fusion-resumen b { color: var(--inc); }

.tag.soft.warn { background: #fbf3d8; color: #7a5b00; border-color: var(--warn); }
.danger-text { color: var(--inc); }
.cat-empty { color: var(--muted); font-size: .86rem; padding: 12px 0; }
.cat-cedula { font-family: var(--mono); font-size: .74rem; color: var(--muted); font-weight: 400; }

/* ── Panel del administrador ─────────────────────────────── */
.barra { height: 6px; background: var(--cement); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.barra i { display: block; height: 100%; background: var(--yellow); transition: width .3s; }

.paso { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--cement); }
.paso:first-of-type { border-top: none; }
.paso .n { width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; font-family: var(--mono); font-weight: 800; font-size: .78rem; background: var(--cement); color: var(--muted-2); }
.paso.hecho .n { background: var(--obs); color: #fff; }
.paso.activo .n { background: var(--yellow); color: var(--graphite); }
.paso b { display: block; font-size: .94rem; }
.paso span { font-size: .82rem; color: var(--muted); }
.paso.hecho b { color: var(--muted-2); }

.jornada { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--graphite); border-left: 5px solid var(--obs); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.jornada.cerrada { border-left-color: var(--inc); }
.jornada .estado { font-family: var(--mono); font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--obs); }
.jornada.cerrada .estado { color: var(--inc); }
.jornada b { display: block; font-size: .98rem; margin-top: 2px; }

.aviso-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aviso-fila .btn { flex-shrink: 0; }

/* Quién está reportando: dos números por persona, hoy y en toda la parada. */
.eq-encabezado, .eq-fila {
  display: grid; grid-template-columns: 1fr 54px 64px; gap: 10px;
  align-items: center; padding: 8px 0;
}
.eq-encabezado {
  border-bottom: 1px solid var(--graphite); padding-bottom: 6px;
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.eq-fila { border-top: 1px solid var(--cement); font-size: .9rem; }
.eq-encabezado .eq-n, .eq-fila .eq-n { text-align: right; }
.eq-fila .eq-n {
  font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted-2);
}
.eq-fila .eq-n.total { color: var(--graphite); }
/* Quien no cargó nada en toda la parada se marca: es el dato accionable. */
.eq-fila.sin .eq-nombre { color: var(--muted); }
.eq-fila.sin .eq-n { color: var(--warn); }
.eq-hoy { font-size: .68rem; color: var(--muted); font-family: var(--mono); }
.cat-help.aviso-suave {
  background: #fbf3d8; border: 1px solid var(--warn); color: #7a5b00;
  border-radius: var(--radius-sm); padding: 8px 10px;
}

.pendiente { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--cement); flex-wrap: wrap; }
.pendiente:first-child { border-top: none; }
.pendiente b { display: block; font-size: .94rem; }
.pendiente span { font-size: .78rem; color: var(--muted); font-family: var(--mono); }

.mini-fila { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid var(--cement); font-size: .85rem; flex-wrap: wrap; }
.mini-fila:first-child { border-top: none; }
.mf-txt { flex: 1; min-width: 170px; }
.mf-meta { font-family: var(--mono); font-size: .7rem; color: var(--muted); }

.atajos { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 16px; }
.atajo { background: var(--surface); border: 1px solid var(--graphite); border-radius: var(--radius); padding: 15px; text-decoration: none; color: inherit; display: block; transition: border-color .12s, background .12s; }
.atajo:hover { border-color: var(--yellow); background: #fffdf6; }
.atajo b { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.atajo span { font-size: .76rem; color: var(--muted); display: block; margin-top: 3px; }

/* ── Accesos ─────────────────────────────────────────────── */
.acceso { padding: 15px 0; border-top: 1px solid var(--cement); }
.acceso:first-of-type { border-top: none; padding-top: 0; }
.acceso-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.acceso-top b { font-size: .95rem; }
.link-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin: 10px 0 8px; }
.link-row code {
  flex: 1; min-width: 200px; font-family: var(--mono); font-size: .74rem;
  background: var(--cement); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 10px 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini { font-size: .78rem; color: var(--muted); margin: 6px 0 0; }

@media (min-width: 720px) {
  .atajos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
  .paso { grid-template-columns: 30px 1fr; gap: 10px; }
  .paso .btn { grid-column: 2; justify-self: start; }
}

/* Selector segmentado */
.segmented {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  background: #e5e3db;
  padding: 5px;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}
.segmented.cols-1 { grid-template-columns: minmax(0, 1fr); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 700; font-size: .84rem; color: var(--muted-2);
  text-align: center; user-select: none; text-transform: uppercase; letter-spacing: .04em;
  min-width: 0; transition: all .12s;
}
.segmented label:hover { background: #d9d7cf; }

/* Lo elegido se pinta lleno, no con un borde: en el celular, a un brazo de
   distancia y con guantes, un contorno fino no alcanza para ver qué se marcó. */
.segmented input:checked + label { background: var(--graphite); color: #fff; box-shadow: none; }
.segmented input:checked + label.tono-inc  { background: var(--inc); color: #fff; }
.segmented input:checked + label.tono-obs  { background: var(--obs); color: #fff; }
.segmented input:checked + label.tono-warn { background: var(--warn); color: var(--graphite); }
.segmented input:checked + label.tono-gris { background: var(--muted); color: #fff; }
.segmented input:focus-visible + label { outline: 3px solid rgba(244,180,0,.55); outline-offset: 1px; }

/* ── Formulario por pasos ────────────────────────────────── */

/* Antes de todo: qué se va a reportar */
.tipos { display: grid; gap: 12px; }
.tipo-card {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface); border: 1px solid var(--graphite);
  border-left: 5px solid var(--graphite); border-radius: var(--radius);
  padding: 16px; transition: border-color .12s, background .12s;
}
.tipo-card:hover { background: #fffdf6; }
.tipo-card.inc { border-left-color: var(--inc); }
.tipo-card.obs { border-left-color: var(--obs); }
.tipo-card.reu { border-left-color: var(--yellow); }
.tipo-card b { display: block; font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; }
.tipo-card span { display: block; color: var(--muted); font-size: .84rem; margin-top: 4px; }

/* Listo, quedó cargado */
.card-listo { text-align: center; border-left: 5px solid var(--obs); }
.listo-tick {
  width: 52px; height: 52px; margin: 4px auto 12px; border-radius: 50%;
  background: var(--obs); color: #fff; display: grid; place-items: center;
  font-size: 1.6rem; font-weight: 800;
}
.card-listo h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.listo-sub { color: var(--muted); font-size: .86rem; margin: 0 0 14px; }
.listo-cod {
  font-family: var(--mono); font-size: 1.35rem; font-weight: 800; letter-spacing: .02em;
  background: var(--cement); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 14px 10px; margin-bottom: 14px; user-select: all; word-break: break-all;
}

/* Dónde estoy del recorrido */
.pasos-head { margin-bottom: 14px; }
.pasos-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pasos-cuenta {
  font-family: var(--mono); font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
}
.paso-nav { display: flex; gap: 10px; }
.paso-nav .btn { flex: 1; width: auto; }

/* Listas largas: una opción por fila, tocable entera */
.opc-lista {
  border: 1.5px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
}
.opc { display: flex; align-items: center; border-top: 1px solid var(--cement); }
.opc:first-child { border-top: none; }
.opc input { position: absolute; opacity: 0; pointer-events: none; }
.opc label {
  flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 13px 14px; cursor: pointer; font-size: .92rem; line-height: 1.35;
}
.opc label::before {
  content: ''; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-soft); background: #fff;
}
.opc input:checked + label { background: #fffdf6; font-weight: 700; }
.opc input:checked + label::before { border-color: var(--graphite); border-width: 5px; }
.opc input:focus-visible + label { box-shadow: inset 0 0 0 2px var(--yellow); }
.opc label em { font-family: var(--mono); font-style: normal; font-size: .76rem; color: var(--muted); }

.ayuda {
  flex-shrink: 0; width: 30px; height: 30px; margin-right: 11px; cursor: pointer;
  border-radius: 50%; border: 1.5px solid var(--line-soft); background: #fff;
  font-weight: 800; font-size: .82rem; color: var(--muted-2);
}
.ayuda.on { background: var(--graphite); color: #fff; border-color: var(--graphite); }
.opc-ayuda {
  margin: 0; padding: 0 14px 13px 46px; font-size: .84rem;
  color: var(--muted-2); background: #fffdf6; line-height: 1.45;
}

/* Buscador de empresa */
.busq { margin-bottom: 8px; }
/* La lista de empresas crece: se le pone techo y se navega adentro, para que
   no empuje el resto del paso fuera de la pantalla. */
.opc-lista.scroll { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.otra-empresa {
  width: 100%; margin-top: 8px; text-align: center;
  border: 1.5px dashed var(--line-soft); border-radius: var(--radius-sm);
  color: var(--muted-2); font-size: .86rem; font-weight: 600;
  /* Sin mayúsculas ni espaciado extra: es una frase, y en mayúsculas se parte
     en dos líneas en un celular. */
  text-transform: none; letter-spacing: 0;
}
.otra-empresa:hover { border-color: var(--yellow); background: #fffdf6; color: var(--graphite); }
.opc-btn {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: #fff; border: none; border-top: 1px solid var(--cement); padding: 12px 14px;
}
.opc-lista .opc-btn:first-child { border-top: none; }
.opc-btn:hover { background: #fffdf6; }
.opc-btn b { display: block; font-size: .92rem; }
.opc-btn span { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.opc-btn.nueva b { color: var(--warn); }

/* Lo ya elegido, con el contratista que se deriva solo */
.elegida {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1.5px solid var(--graphite);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.elegida > div { flex: 1; min-width: 140px; }
.elegida b { display: block; font-size: .96rem; }
.elegida span { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* Selección múltiple */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600;
  background: #fff; color: var(--muted-2); border: 1.5px solid var(--line-soft);
  border-radius: 999px; padding: 10px 15px; min-height: 44px; transition: all .12s;
}
.chip:hover { border-color: var(--muted); }
.chip.on { background: var(--graphite); color: #fff; border-color: var(--graphite); }

/* Ayudas del paso */
.campo-nota { margin: -2px 0 12px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.sub-campo { margin-bottom: 14px; }
.sub-campo:last-child { margin-bottom: 0; }
.sub-campo > label {
  display: block; font-size: .72rem; font-weight: 700; color: var(--muted-2);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em;
}

/* Fotos */
.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 2px dashed var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  background: #f4f2ec;
  transition: all .12s;
}
.file-drop:hover { border-color: var(--yellow); background: #fbf3d8; color: var(--graphite); }
.file-drop .big { font-size: 1.6rem; font-weight: 800; color: var(--muted-2); }
.file-drop strong { text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.thumb {
  position: relative; width: 78px; height: 78px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--graphite); background: #e2e0d8;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.fotos-info { margin-top: 10px; font-size: .76rem; color: var(--muted-2); font-family: var(--mono); }
.thumb button {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
  border: none; border-radius: 50%; background: var(--graphite); color: #fff;
  cursor: pointer; font-size: .8rem; line-height: 1; display: grid; place-items: center;
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 800; cursor: pointer;
  padding: 14px 20px; border-radius: var(--radius-sm); min-height: 50px;
  background: var(--yellow); color: var(--graphite); border: 1.5px solid var(--graphite);
  width: 100%; text-transform: uppercase; letter-spacing: .05em;
  transition: transform .05s, background .12s;
}
.btn:hover { background: var(--yellow-dk); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--graphite); }
.btn.secondary:hover { background: #f4f2ec; }
.btn.ghost { background: transparent; color: var(--muted-2); border: none; width: auto; padding: 8px 12px; min-height: 0; letter-spacing: .04em; }
.btn.ghost:hover { background: #e5e3db; }
.btn.small { width: auto; padding: 9px 14px; min-height: 0; font-size: .76rem; }
.btn.danger { background: var(--inc); color: #fff; }
.btn.danger:hover { background: #b32d20; }

/* Mensajes */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140%);
  background: var(--graphite); color: #fff; padding: 13px 20px; border-radius: var(--radius-sm);
  border-left: 4px solid var(--yellow);
  font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
  z-index: 100; transition: transform .3s cubic-bezier(.2,.8,.2,1); max-width: 90vw;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.ok  { border-left-color: var(--obs); }
.toast.err { border-left-color: var(--inc); }

.alert {
  padding: 14px 16px; border-radius: var(--radius); font-size: .9rem;
  background: #fbf3d8; color: #7a5b00; border: 1px solid var(--warn); margin-bottom: 16px;
}
.alert.error { background: #fbe7e4; color: #8a1f16; border-color: var(--inc); }

/* ── Landing ─────────────────────────────────────────────── */
.hero { padding: 26px 0 12px; }
.hero h1 { font-size: 1.35rem; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .03em; }
.hero p { color: var(--muted); margin: 0; }
.tiles { display: grid; gap: 12px; margin-top: 8px; }
.tile {
  display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--graphite); border-radius: var(--radius);
  padding: 18px; transition: border-color .12s, background .12s;
}
.tile:hover { border-color: var(--yellow); background: #fffdf6; }
.tile .ic {
  width: 48px; height: 48px; border-radius: var(--radius-sm); display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 800; flex-shrink: 0; background: var(--graphite); color: var(--yellow);
}
.tile h3 { margin: 0 0 3px; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
.tile p { margin: 0; color: var(--muted); font-size: .85rem; }

/* ── Dashboard ───────────────────────────────────────────── */
/* Los KPIs ya no son cuatro fijos: que se acomoden solos según entren. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi {
  background: var(--surface); border: 1px solid var(--graphite); border-radius: var(--radius);
  padding: 15px 16px;
}
.kpi .num { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .lbl { font-size: .66rem; color: var(--muted-2); margin-top: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.kpi.inc { border-color: var(--inc); }
.kpi.inc .num { color: var(--inc); }
.kpi.obs .num { color: var(--obs); }

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.filters .full { grid-column: 1 / -1; }
.filters label { font-size: .64rem; font-weight: 700; color: var(--muted-2); display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .07em; }
.filters input, .filters select { min-height: 42px; padding: 8px 11px; font-size: .86rem; }

.charts { display: grid; grid-template-columns: 1fr; gap: 14px; }
.chart-card { background: var(--surface); border: 1px solid var(--graphite); border-radius: var(--radius); padding: 16px; }
.chart-card h3 { margin: 0 0 12px; font-size: .68rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: .1em; }
.chart-wrap { position: relative; height: 220px; }

/* Los de etiquetas largas (causas, días) piden el ancho completo. */
.charts .chart-card.wide { grid-column: 1 / -1; }
.chart-card.wide .chart-wrap { height: 260px; }

/* Aclaraciones al costado del título: de qué es cada color, sobre qué se cuenta. */
.ch-nota { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.ch-nota .pt { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: baseline; }
.ch-nota .pt.inc { background: var(--inc); }
.ch-nota .pt.am { background: var(--yellow); }

/* Un gráfico sin datos no se deja vacío: lo dice. */
.chart-wrap.sin-datos::after {
  content: 'Sin datos para estos filtros';
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--surface); color: var(--muted); font-size: .8rem;
}

/* ── Silueta del cuerpo ──────────────────────────────────── */
.silueta { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.sil-dibujo { flex: 0 0 auto; width: 190px; }
.sil-dibujo svg { width: 100%; height: auto; display: block; }
/* El contorno se dibuja siempre, aunque la zona no tenga casos: la figura
   tiene que leerse como un cuerpo, no como manchas sueltas.
   El relleno NO se define acá: lo pone el SVG según los datos, y una regla de
   CSS le ganaría al atributo del dibujo. */
.sil-dibujo svg [data-parte] { stroke: var(--graphite); stroke-width: 1.2; stroke-linejoin: round; }
.sil-dibujo svg [data-parte]:hover { stroke-width: 2; }

.sil-escala { display: flex; align-items: center; gap: 3px; margin-top: 10px; justify-content: center; }
.sil-escala i { width: 17px; height: 9px; border: 1px solid var(--line-soft); }
.sil-escala span { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.sil-datos { flex: 1; min-width: 190px; }
.sil-lista { list-style: none; margin: 0; padding: 0; }
.sil-lista li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .84rem; border-bottom: 1px solid var(--cement); }
.sil-lista li.cero { color: var(--muted); }
.sil-lista i { width: 12px; height: 12px; border: 1px solid var(--line-soft); border-radius: 2px; flex-shrink: 0; }
.sil-nom { flex: 1; }
.sil-n { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Múltiples, lesiones internas y otras: no son un lugar del cuerpo, así que
   se cuentan al costado en vez de pintarse sobre el dibujo. */
.sil-aparte { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.sil-aparte h4 {
  margin: 0 0 6px; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); font-weight: 700;
}
.silueta-vacia { color: var(--muted); font-size: .86rem; padding: 20px 0; text-align: center; }
.sil-nota {
  margin: 0 0 10px; font-size: .8rem; color: #7a5b00; line-height: 1.45;
  background: #fbf3d8; border: 1px solid var(--warn); border-radius: var(--radius-sm); padding: 8px 10px;
}

/* Filtro por tipo (historial propio): botones con la cuenta de cada uno. */
.filtro-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtro-chips .chip { min-height: 40px; padding: 8px 14px; }
.filtro-chips .chip b {
  font-family: var(--mono); font-size: .78rem; margin-left: 5px;
  opacity: .65; font-variant-numeric: tabular-nums;
}
.filtro-chips .chip.on b { opacity: .85; }

/* Listado de reportes */
/* Completar el contratista de varios reportes de una. Va pegado a la lista y
   no en una ventana aparte: lo que se ve abajo es exactamente lo que se toca. */
.completar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--graphite);
  border-left: 5px solid var(--warn); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 12px;
}
.completar > div { flex: 1; min-width: 150px; }
.completar b { display: block; font-size: .94rem; }
.completar span { font-size: .82rem; color: var(--muted); }
.completar select { max-width: 200px; }

.rep-list { display: grid; gap: 12px; }
.rep {
  background: var(--surface); border: 1px solid var(--graphite); border-radius: var(--radius);
  padding: 14px; border-left: 6px solid var(--obs);
}
.rep.inc { border-left-color: var(--inc); }
.rep.reu { border-left-color: var(--graphite); }
/* El código es como se llama el reporte en la conversación con UPM. */
.rep-cod { font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--muted-2); margin-bottom: 6px; }

/* Registro interno: el número que carga el cliente, no nosotros. */
.reg-int {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line-soft);
}
.reg-lbl {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.reg-val { font-family: var(--mono); font-size: .82rem; font-weight: 700; }
.reg-val.vacio { font-weight: 400; font-style: italic; color: var(--muted); }
.reg-input { flex: 1; min-width: 120px; max-width: 200px; min-height: 38px; padding: 7px 10px; font-family: var(--mono); font-size: .84rem; }
.reg-int .btn.small { min-height: 38px; }
.rep-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.tag { font-size: .64rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: .05em; }
.tag.obs { background: var(--obs); color: #fff; }
.tag.inc { background: var(--inc); color: #fff; }
.tag.reu { background: var(--graphite); color: #fff; }
.tag.soft { background: #e5e3db; color: var(--muted-2); border: 1px solid var(--line-soft); }
.rep-time { font-size: .72rem; color: var(--muted); margin-left: auto; font-family: var(--mono); }
.rep-body { font-size: .9rem; color: #24272c; }
.rep-body .row { display: flex; gap: 8px; margin-top: 5px; }
.rep-body .k { color: var(--muted-2); min-width: 108px; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding-top: 2px; }
.rep-fotos { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.rep-fotos a { display: block; width: 62px; height: 62px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--graphite); }
.rep-fotos img { width: 100%; height: 100%; object-fit: cover; }
.rep-actions { margin-top: 11px; display: flex; gap: 8px; }

.empty { text-align: center; color: var(--muted); padding: 40px 20px; border: 1px dashed var(--line-soft); border-radius: var(--radius); }
.empty .big { font-size: 1.4rem; font-weight: 800; color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em; }

.section-title { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.section-title .count { font-size: .74rem; color: var(--muted); font-weight: 700; font-family: var(--mono); }

.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 0 rgba(244,180,0,.6); animation: pulse 2s infinite; display: inline-block; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(244,180,0,.5); } 70% { box-shadow: 0 0 0 7px rgba(244,180,0,0); } 100% { box-shadow: 0 0 0 0 rgba(244,180,0,0); } }

@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ── Responsive (desktop) ────────────────────────────────── */
@media (min-width: 720px) {
  .charts { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .dash-grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
  .dash-grid .side { position: sticky; top: 80px; }
}

/* ── Reporte del día (documento imprimible) ──────────────── */
.toolbar {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--graphite); border-radius: var(--radius);
  padding: 14px; margin-bottom: 16px;
}
.toolbar .tb-field label { display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); margin-bottom: 5px; }
.toolbar .tb-field input { min-height: 44px; }
.toolbar .tb-spacer { flex: 1; }
.toolbar .btn { width: auto; }

.doc {
  background: #fff; border: 1px solid var(--graphite); border-radius: var(--radius);
  padding: 30px; max-width: 900px; margin: 0 auto;
}
.doc-head { border-bottom: 3px solid var(--yellow); padding-bottom: 16px; margin-bottom: 22px; }
.doc-brand { display: flex; align-items: center; gap: 14px; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); font-weight: 700; flex-wrap: wrap; }
.doc-logo { height: 62px; width: auto; display: block; }
.doc-brand span { padding-left: 14px; border-left: 1px solid var(--line-soft); }
.doc-title { font-size: 1.55rem; margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .02em; }
.doc-sub { font-size: 1rem; font-weight: 700; }
.doc-meta { font-size: .74rem; color: var(--muted); font-family: var(--mono); margin-top: 4px; }
.doc-cerrado {
  display: inline-block; margin-top: 8px; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: #fff; background: var(--inc);
  padding: 4px 10px; border-radius: 999px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.doc-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
.doc-section { margin-bottom: 26px; }
.doc-section > h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; margin: 0 0 16px; }
.doc-count { color: var(--muted); font-family: var(--mono); font-weight: 700; }
.doc-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.doc-chart { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px; }
.doc-chart h3 { font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2); margin: 0 0 8px; }
.doc .chart-wrap { height: 190px; }

.doc-list { display: flex; flex-direction: column; gap: 10px; }
.doc-item { border: 1px solid var(--line-soft); border-left: 5px solid var(--obs); border-radius: var(--radius-sm); padding: 12px 14px; break-inside: avoid; }
.doc-item.inc { border-left-color: var(--inc); }
.doc-item.reu { border-left-color: var(--graphite); }
.di-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.di-meta { font-size: .78rem; color: var(--muted-2); }
.di-time { margin-left: auto; font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.di-codes { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 7px; }
.di-cod { font-family: var(--mono); font-size: .7rem; font-weight: 700; color: var(--muted-2); }
.di-cod.interno { font-weight: 400; color: var(--muted); }
.di-body .row { display: flex; gap: 8px; margin-top: 4px; font-size: .86rem; }
.di-body .k { color: var(--muted-2); min-width: 108px; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding-top: 2px; }
.di-fotos { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.di-fotos a { display: block; width: 60px; height: 60px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--graphite); }
.di-fotos img { width: 100%; height: 100%; object-fit: cover; }
.doc-foot { border-top: 1px solid var(--line-soft); margin-top: 24px; padding-top: 12px; font-size: .72rem; color: var(--muted); text-align: center; }
.doc-foot b { color: var(--muted-2); letter-spacing: .04em; }
.doc-firma { display: block; margin-top: 3px; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; }

@media (min-width: 600px) { .doc-kpis { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } }

/* El PIN recién creado: se lee en voz alta y se pasa. Grande y espaciado
   porque se dicta de a un número. */
.pin-grande {
  font-family: var(--mono); font-size: 2.6rem; font-weight: 700;
  letter-spacing: .35em; text-align: center; padding: 18px 0 18px .35em;
  background: var(--cement); border-radius: var(--radius); margin-top: 6px;
}

/* Qué período se está mirando. Va arriba de los números y no en la columna de
   filtros: es la respuesta a "¿de cuándo son estos 1335?", y esa pregunta se
   hace mirando los números, no los filtros. */
.periodo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--graphite);
  border-left: 5px solid var(--yellow); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 14px;
}
.periodo-que { flex: 1; min-width: 0; }
.periodo-que b {
  display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
}
.periodo-que span {
  display: block; font-size: .78rem; color: var(--muted); margin-top: 2px;
  font-family: var(--mono);
}
.periodo-atajos { display: flex; gap: 6px; flex-shrink: 0; }
.periodo-atajos .chip {
  border: 1px solid var(--line-soft); background: var(--surface);
  border-radius: 999px; padding: 8px 14px; min-height: 40px;
  font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
  color: var(--muted-2); white-space: nowrap;
}
.periodo-atajos .chip:hover { border-color: var(--yellow); }
.periodo-atajos .chip.on {
  background: var(--graphite); color: #fff; border-color: var(--graphite);
}

/* Participantes de una reunión: una lista de personas, no un texto. Cada uno
   con su nombre grande y la empresa debajo, que es como se los reconoce, y la
   cruz de quitar a un pulgar de distancia. */
.parti-lista { display: flex; flex-direction: column; margin-bottom: 12px; }
.parti {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 10px 6px 10px 12px; margin-bottom: 6px;
}
.parti-quien { flex: 1; min-width: 0; }
.parti-quien b { display: block; font-size: .92rem; }
.parti-quien span { display: block; font-size: .76rem; color: var(--muted); margin-top: 1px; }
.parti-quien .parti-sin { color: var(--warn); }
.parti-x {
  flex-shrink: 0; width: 44px; min-height: 44px; border: none; background: none;
  color: var(--muted); font-size: 1.1rem; cursor: pointer; border-radius: var(--radius-sm);
}
.parti-x:hover { background: var(--cement); color: var(--inc); }
.parti-sug { max-height: 260px; overflow-y: auto; }

/* Dar de alta a alguien que no estaba: se le pregunta la empresa antes de
   sumarlo. Va enmarcado porque es una pregunta, no un campo más. */
.parti-alta {
  border: 1.5px solid var(--yellow); border-radius: var(--radius);
  background: #fffdf6; padding: 12px; margin-bottom: 12px;
}
.parti-alta-q { margin: 0 0 10px; font-size: .88rem; }
.parti-alta-q b { text-transform: none; }
.parti-alta [data-parti-emp-otra] { margin-top: 8px; }
.parti-alta .paso-nav { margin-top: 12px; }
.parti-alta [data-parti-sin-empresa] { margin-top: 8px; width: 100%; }

/* Traer los de la reunión anterior: es el atajo que evita reescribir a diez
   personas, así que va arriba de todo y se lee de un vistazo. */
.traer-ultima {
  width: 100%; margin-bottom: 12px; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.traer-ultima span {
  font-family: var(--mono); font-size: .7rem; color: var(--muted);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

/* El texto que acompaña a un "Otro": va pegado a la lista de opciones, con la
   misma sangría, para que se lea como parte de lo elegido y no como un campo
   más del paso. */
.otro-detalle { margin-top: 10px; }
.otro-detalle label {
  display: block; font-size: .72rem; font-weight: 700; color: var(--muted-2);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em;
}

/* Cuando lo escrito se parece a algo que ya está. Las candidatas van dentro
   de un marco propio para que se lean como una pregunta y no como la lista
   de siempre: acá hay que decidir, no elegir. */
.dudosa {
  border: 1.5px solid var(--warn); border-radius: var(--radius);
  background: #fffdf6; padding: 10px; margin-bottom: 12px;
}
.dudosa-q {
  margin: 0 0 8px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #7a5b00;
}
.dudosa .opc-btn { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); margin-bottom: 6px; }
.dudosa .opc-btn:last-child { margin-bottom: 0; }
.dudosa + .btn { margin-bottom: 4px; }

/* ── Pantalla de ingreso ──────────────────────────────────
   Fondo grafito y el logotipo grande: es lo primero que ve alguien de la
   aplicación, y la única pantalla donde la marca ocupa el lugar principal.
   Todo lo demás está a un pulgar de distancia. */
/* Flex y no grid con place-items: centrado así, el bloque se resuelve contra
   el ancho real —el de la pantalla menos el margen— y no contra su contenido.
   Con grid, los 380 px de máximo ganaban al margen y la pantalla se corría
   ocho píxeles a lo ancho. */
.entrar-body {
  background: var(--graphite); min-height: 100dvh; padding: 24px 18px;
  display: flex; align-items: center; justify-content: center;
}
.entrar { width: 100%; max-width: 380px; }
.entrar-logo { display: block; width: 100%; max-width: 300px; margin: 0 auto 10px; }
.entrar-contexto {
  text-align: center; color: #9aa0ab; font-size: .68rem; margin: 0 0 26px;
  text-transform: uppercase; letter-spacing: .12em;
}
.entrar form { background: var(--surface); border-radius: var(--radius); padding: 20px 18px 22px; }
.entrar-modo { margin-bottom: 14px; }
.entrar .field:last-of-type { margin-bottom: 20px; }
.entrar-pie { color: var(--muted); font-size: .78rem; text-align: center; margin: 18px 0 0; line-height: 1.5; }
.entrar .ident-error { margin: 0 0 12px; }
/* El PIN son cuatro dígitos: se escriben grandes y separados, que es como se
   leen de un vistazo cuando la pantalla tiene sol encima. */
.pin-input {
  font-size: 1.5rem; letter-spacing: .5em; text-align: center;
  font-family: var(--mono); padding-left: .5em;
}

/* ── El celular manda ─────────────────────────────────────
   Todo lo de acá abajo asume 390 px y una mano con guante. No es un ajuste
   para que "entre igual": es la forma en que se usa la aplicación. El tablero
   y el reporte del día se miran desde el celular tanto como desde el
   escritorio, y hasta acá desbordaban la pantalla.

   Los dos grid de gráficos van con minmax(0, …) siempre: sin eso el canvas
   impone su ancho, el grid se ensancha con él y la página entera se corre a
   lo ancho. Es la causa de que el reporte midiera 718 px en una pantalla de
   390. */
.doc-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 559px) {
  /* La barra. El título y el contexto van a una línea cada uno y se recortan
     si no entran; antes se partían en tres renglones y empujaban las acciones
     fuera de la pantalla. */
  .appbar { padding: 11px 14px; }
  .appbar-inner { gap: 10px; }
  /* El logotipo cede altura para que el nombre de la pantalla entre entero:
     con 20 px se comía 104 px de ancho y "Tablero de Seguridad" quedaba
     cortado. El mínimo de marca son 90 px de ancho — 17 px de alto da 88, así
     que acá va la versión corta, que no tiene descriptor y aguanta menos. */
  .appbar .logo { height: 17px; }
  .appbar h1 { font-size: .82rem; letter-spacing: .03em; }
  /* Lo que sobra del nombre de la pantalla cuando hay ancho. En el celular se
     va entero: vale más "Tablero" completo que "Tablero de Segu…" cortado. */
  .en-ancho { display: none; }
  .appbar .titulos { flex: 1; min-width: 0; }
  .appbar h1, .appbar .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appbar .sub { display: block; }
  .appbar .sub .live-dot { margin-right: 6px; }
  .appbar .logo + .titulos { padding-left: 10px; }
  .appbar .spacer { display: none; }
  /* El rol (`span.badge`) es informativo y se comía media barra: en el celular
     se va. La navegación (`a.badge`) queda, porque no hay otra forma de salir
     de la pantalla. */
  /* El período, en dos renglones: el texto a lo ancho y los atajos abajo. En
     una sola fila, "Todos los reportes cargados" se parte en tres líneas y los
     botones quedan apretados contra el borde. */
  .periodo { flex-direction: column; align-items: stretch; gap: 10px; }
  .periodo-atajos { justify-content: stretch; }
  .periodo-atajos .chip { flex: 1; padding: 8px 4px; }

  .appbar span.badge { display: none; }
  /* Dos acciones en la barra no entran en 390 px. Si la pantalla tiene por
     dónde volver, eso gana: salir es cosa de una vez cada noventa días, y
     desde el panel —la única sin "volver"— sigue estando. */
  .appbar-inner:has(a.badge) .appbar-salir { display: none; }
  /* El enlace de la barra es la única salida de la pantalla y medía 34 px:
     va a 40 como todo lo demás, centrado en vez de crecido por el padding. */
  .appbar a.badge {
    flex-shrink: 0; min-height: 40px; padding: 0 12px;
    display: inline-flex; align-items: center;
  }

  /* Nada por debajo de 40 px de alto. Es el mínimo que se acierta con guante
     puesto, y hasta acá los botones de cada fila median 28. */
  .btn.small, .cat-actions .btn, .rep-actions .btn,
  .reg-int .btn.small { min-height: 40px; padding: 10px 14px; }
  .cat-actions { gap: 4px; }
  .cat-row select, .reg-input { min-height: 44px; }

  /* Los encabezados de sección llevan acciones al costado (reporte del día,
     actualizar): en el celular no entran en la misma línea, así que bajan
     enteras en vez de asomar por el borde. */
  .section-title { flex-wrap: wrap; }
  .section-title .btn { flex: 1 1 auto; }

  /* Un gráfico por pantalla: dos de 170 px no se leen, y los números que
     tienen adentro dejan de entrar. */
  .doc-charts { grid-template-columns: 1fr; }
  .doc { padding: 18px 14px; }
  /* La barra de herramientas del reporte, en columna y a lo ancho: son las
     acciones más gordas de la pantalla (imprimir, cerrar el día). */
  .toolbar { flex-wrap: wrap; }
  .toolbar .btn { flex: 1 1 100%; }
}

/* ── Impresión / PDF ─────────────────────────────────────── */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  body { background: #fff; }
  body, .doc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
  .container { padding: 0; max-width: none; }
  .doc { border: none; border-radius: 0; padding: 0; max-width: none; }

  /* El detalle debe poder repartirse entre páginas: si se lo trata como un
     bloque indivisible, se va entero a la hoja siguiente y deja un hueco. */
  .doc-section { break-inside: auto; margin-bottom: 18px; }
  .doc-section > h2 { break-after: avoid; break-inside: avoid; }
  .doc-head { break-after: avoid; }

  /* Lo que sí no conviene partir al medio */
  .doc-kpis, .kpi, .doc-chart, .doc-item, .doc-foot { break-inside: avoid; }

  /* Los indicadores entran todos en una fila: uno suelto abajo se lee como si
     fuera otra cosa. Van más chicos para que quepan sin apretarse. */
  .doc-kpis { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .doc-kpis .kpi { padding: 10px 8px; }
  .doc-kpis .num { font-size: 1.4rem; }
  .doc-kpis .lbl { font-size: .54rem; letter-spacing: .05em; margin-top: 5px; }

  /* Reportes largos: la primera hoja queda como resumen y el detalle arranca limpio */
  .doc-section.salto-pagina { break-before: page; }

  /* En flex el corte entre páginas es irregular: en papel va como bloques */
  .doc-list { display: block; }
  .doc-item { margin-bottom: 8px; }

  /* Con menos de esto, la leyenda de las donas se sale de su recuadro. */
  .doc .chart-wrap { height: 172px; }

  /* La silueta va compacta: a tamaño de pantalla se lleva una hoja entera
     para mostrar una figura y nueve renglones. */
  .sil-dibujo { width: 118px; }
  .silueta { gap: 14px; }
  .sil-lista li { padding: 3px 0; font-size: .78rem; }
  .sil-aparte { margin-top: 9px; padding-top: 8px; }
  .silueta, .sil-dibujo, .sil-datos { break-inside: avoid; }
  .di-fotos a { width: 54px; height: 54px; }
  .doc-title { font-size: 1.4rem; }

  a { text-decoration: none; color: inherit; }
}