/* Estilos base, mobile-first. Sin CDN: todo recurso vive en static/. */

:root {
  --texto: #1c1f23;
  --suave: #5b6470;
  --borde: #d6dae0;
  --fondo: #f6f7f9;
  --panel: #ffffff;
  --accion: #1f6feb;
  --peligro: #b42318;
  --ok: #15803d;
  --advertencia: #8a6100;
  --foco: #0b57d0;
  --radio: 10px;
  --sombra: 0 1px 2px rgb(16 24 40 / 7%), 0 4px 12px rgb(16 24 40 / 5%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;              /* 16px evita el zoom automático en iOS */
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.5;
}

a { color: var(--accion); text-underline-offset: .16em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

main { padding: 1rem; max-width: 900px; margin: 0 auto; }
h1 { margin: .15rem 0 .4rem; font-size: clamp(1.75rem, 6vw, 2.45rem); line-height: 1.15; }
h2 { margin: .25rem 0 .75rem; font-size: 1.15rem; }
small { display: block; color: var(--suave); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }

.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem; background: var(--panel); border-bottom: 1px solid var(--borde);
}
.barra nav { display: flex; align-items: center; gap: 1rem; }
.barra nav a[aria-current="page"] { color: var(--texto); font-weight: 700; text-decoration-thickness: 3px; }
.marca { font-weight: 600; text-decoration: none; color: var(--texto); }

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.25rem; box-shadow: var(--sombra);
}
.angosta { max-width: 380px; margin: 2rem auto; }

label { display: block; margin: .75rem 0 .25rem; font-weight: 500; }

input, select, textarea {
  width: 100%; padding: .7rem; font-size: 1rem;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff;
}
input:disabled, select:disabled, textarea:disabled { opacity: .7; cursor: not-allowed; }
.ayuda { color: var(--suave); font-size: .92rem; }

button {
  margin-top: 1rem; padding: .75rem 1.1rem; font-size: 1rem;
  min-height: 44px;             /* objetivo táctil cómodo con una mano */
  border: 0; border-radius: 8px; background: var(--accion); color: #fff;
  cursor: pointer;
}
button:hover { filter: brightness(.92); }
button:disabled { opacity: .6; cursor: not-allowed; }
button.enlace {
  margin: 0; padding: 0; min-height: auto;
  background: none; color: var(--accion); text-decoration: underline;
}
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .7rem 1rem; border-radius: 8px;
  background: var(--accion); color: #fff; text-decoration: none; font-weight: 600;
}
button.secundario, .boton.secundario { background: #e8eef5; color: #17324d; }
button.peligro, .boton.peligro { background: var(--peligro); color: #fff; }
.archivo-boton { margin-top: 0; cursor: pointer; }

.aviso { padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--borde); }
.aviso-danger { background: #fdeceb; border-color: #f3b7b3; color: var(--peligro); }
.aviso-success { background: #e9f7ef; border-color: #a9dcbe; color: var(--ok); }
.aviso-warning { background: #fdf6e3; border-color: #ecd9a0; color: #8a6100; }
.aviso-info { background: #edf5ff; border-color: #b8d6ff; color: #174b82; }

/* Las tablas se desplazan dentro de su caja; la página nunca a lo ancho. */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .6rem; text-align: left; border-bottom: 1px solid var(--borde); }
th { color: var(--suave); font-size: .85rem; text-transform: uppercase; }
.numero { text-align: right; font-variant-numeric: tabular-nums; }
.sin-padding { padding: 0; }
.titulo-acciones { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 1.25rem; }
.titulo-acciones.compacto { margin: 0 0 1rem; }
.titulo-acciones form, .titulo-acciones button { margin: 0; }
.sobrelinea { margin: 0; color: var(--accion); font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.migas { color: var(--suave); font-size: .9rem; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0 0 1rem; }
.kpi { display: flex; flex-direction: column; gap: .1rem; padding: 1rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel); color: var(--texto); text-decoration: none; }
.kpi strong { font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--suave); font-size: .85rem; }
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.rejilla-tarjetas a { color: var(--texto); text-decoration: none; }
.sucursal-card h2, .estacion-card h2 { margin-top: .45rem; }
.sucursal-card p, .estacion-card p { margin-bottom: 0; color: var(--suave); }
.codigo { color: var(--accion); font-weight: 750; }
.estado { display: inline-flex; align-items: center; width: fit-content; padding: .22rem .5rem; border-radius: 999px; background: #e8eef5; color: #29445f; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.estado-completado { background: #e9f7ef; color: var(--ok); }
.estado-completa, .estado-cerrado { background: #e9f7ef; color: var(--ok); }
.estado-pendiente { background: #fdf6e3; color: var(--advertencia); }
.estado-en_proceso, .estado-abierto { background: #edf5ff; color: #174b82; }
.estado-pendiente_documento { background: #fdf6e3; color: var(--advertencia); }
.lista-enlaces { display: flex; flex-direction: column; padding: .25rem 1rem; }
.lista-enlaces > a, .fila-historial { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--borde); color: var(--texto); text-decoration: none; }
.lista-enlaces > :last-child { border-bottom: 0; }
.vacio { padding: 1.4rem; border: 1px dashed var(--borde); border-radius: var(--radio); color: var(--suave); text-align: center; }
.detalle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.detalle-grid div { min-width: 0; }
dt { color: var(--suave); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.formulario { max-width: 680px; }
.formulario-busqueda { max-width: 680px; }
.filtros-historial {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem; margin-bottom: 1rem;
}
.filtros-historial label { margin-top: 0; }
.filtro-texto { grid-column: span 2; }
.filtro-acciones { display: flex; align-items: end; gap: .75rem; }
.filtro-acciones button { margin: 0; }
.campo-accion { display: flex; gap: .5rem; }
.campo-accion button { margin: 0; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.secciones { margin-top: 1rem; }
.scanner { margin: .8rem 0; padding: .8rem; border: 1px solid var(--borde); border-radius: 8px; background: #f8fafc; }
/* html5-qrcode crea su propio <video> dentro de este contenedor. */
.scanner-lector { margin-bottom: .6rem; border-radius: 7px; overflow: hidden; background: #111; }
.scanner-lector video { display: block; width: 100%; max-height: 330px; object-fit: cover; }
.scanner-lector img { display: none; }
.scanner-estado { margin: .35rem 0 .7rem; color: var(--suave); }
.scanner-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.scanner-acciones button { margin: 0; }
.texto-peligro { color: var(--peligro); }
.movimiento-linea { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--borde); }
.seccion-edicion { margin-top: 1rem; }
.bodega-equipo { margin-bottom: .8rem; }
.cambio-equipo { margin-bottom: .8rem; }
.scanner-compacto { flex: 1 1 250px; margin: 0; }
.contacto-card details { margin-top: .8rem; }
.cambio-grupo { padding-top: .75rem; }
.cambio-grupo + .cambio-grupo { margin-top: 1rem; border-top: 2px solid var(--borde); }
.cambio-grupo h3 { margin: 0; color: var(--accion); }
details > summary { cursor: pointer; font-weight: 700; }
.firma-canvas {
  display: block; width: 100%; height: 180px;
  border: 2px solid var(--borde); border-radius: 8px; background: #fff;
  touch-action: none; cursor: crosshair;
}
.firma-canvas:focus { outline: 3px solid var(--foco); outline-offset: 2px; }
.firma-acciones { display: flex; justify-content: flex-end; }
.firma-acciones button { margin-top: .6rem; }
.boton-ancho { width: 100%; margin-bottom: 2rem; }
.grupo-botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.documento-previo { display: block; width: 100%; max-height: 70vh; object-fit: contain; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.confirmacion-revision { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .7rem; margin: 1.25rem 0; padding: 1rem; border: 2px solid var(--advertencia); border-radius: var(--radio); background: #fffaf0; }
.confirmacion-revision input { width: 1.3rem; height: 1.3rem; margin: .1rem 0 0; }
fieldset { margin: 1rem 0 0; padding: 0; border: 0; }

/* Barra pegajosa sin franja transparente por la que pase el contenido. */
.acciones-pegajosas {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin: 0; padding: .65rem 0;
  background: var(--fondo); border-bottom: 1px solid var(--borde);
}
.acciones-pegajosas button { margin-top: 0; }

/* El diálogo conserva acciones accesibles aun con teclado móvil abierto. */
dialog {
  width: min(36rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem); overflow: auto;
  padding: 0; color: var(--texto); background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 16px 48px rgb(16 24 40 / 22%);
}
dialog::backdrop { background: rgb(16 24 40 / 58%); }
.dialogo-contenido { padding: 1rem; }
.dialogo-acciones {
  position: sticky; bottom: 0;
  display: flex; justify-content: flex-end; gap: .75rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--borde);
}
.dialogo-acciones button { margin-top: 0; }
body:has(dialog[open]) { overflow: hidden; }

/* ── Avance del conteo ──────────────────────────────────────────────────────
   Un segmento por equipo esperado en vez de una barra con porcentaje: se ve
   "3 de 4" sin leer el número, y no necesita style="width:%" en línea, que la
   CSP (style-src 'self') bloquea. El color lo decide `senal`, calculado en
   services/conteos.py, no aquí. */
.avance { margin: 0 0 1.25rem; }
.avance-barra { display: flex; gap: 3px; margin: .5rem 0 .35rem; }
.segmento {
  flex: 1 1 0; min-width: 4px; height: 8px; border-radius: 999px;
  background: var(--borde);
}
.segmento-lleno { background: var(--senal, var(--accion)); }
.avance-texto { margin: 0; color: var(--suave); font-size: .92rem; }
.avance-texto strong { color: var(--texto); font-variant-numeric: tabular-nums; }

.avance-completa { --senal: var(--ok); }
.avance-en_proceso { --senal: var(--accion); }
/* Ámbar más vivo que --advertencia, que es un tono pensado para texto y sobre
   una barra se ve apagado. El texto conserva el oscuro por contraste. */
.avance-atencion { --senal: #d97706; }
.avance-pendiente { --senal: var(--borde); }
.texto-atencion { color: var(--advertencia); font-weight: 700; }

/* En la rejilla de estaciones el color también entra por el borde izquierdo,
   para distinguirlas de un vistazo sin depender solo del color del segmento. */
.estacion-card.avance-completa { border-left: 4px solid var(--ok); }
.estacion-card.avance-en_proceso { border-left: 4px solid var(--accion); }
.estacion-card.avance-atencion { border-left: 4px solid #d97706; }
.estacion-card .avance-barra { margin: .6rem 0 .5rem; }

/* ── Revisión a la vista ────────────────────────────────────────────────── */
.lista-revision { list-style: none; margin: 0; padding: 0; }
.revision-item { border-bottom: 1px solid var(--borde); }
.revision-item:last-child { border-bottom: 0; }
.revision-item > label,
.revision-item > .revision-datos {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem; min-height: 56px; cursor: pointer;
}
.revision-item > .revision-datos { cursor: default; }
.revision-item input[type="checkbox"] {
  flex: none; width: 26px; height: 26px; accent-color: var(--ok); cursor: pointer;
}
.revision-item input[type="checkbox"]:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.revision-datos { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.revision-datos strong { font-size: 1.05rem; }
.revision-datos small { color: var(--suave); overflow-wrap: anywhere; }
.revision-item:has(input:checked) { background: #f2fbf5; }
.revision-hecha .revision-datos strong { color: var(--ok); }
.revision-falta .revision-datos strong { color: var(--advertencia); }
.revision-nota { color: var(--ok); font-weight: 600; }
.revision-alerta { color: var(--advertencia); font-weight: 600; }

@media (max-width: 640px) {
  .barra { align-items: flex-start; flex-direction: column; }
  .barra nav { flex-wrap: wrap; width: 100%; }
  .angosta { margin: 1rem auto; }
  th, td { padding: .75rem .55rem; }
  dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .dialogo-acciones { justify-content: stretch; }
  .dialogo-acciones button { flex: 1; }
  .titulo-acciones { align-items: flex-start; flex-direction: column; }
  .titulo-acciones .boton { width: 100%; }
  .grupo-botones { width: 100%; }
  .grupo-botones .boton { flex: 1 1 100%; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .rejilla-tarjetas, .dos-columnas, .detalle-grid { grid-template-columns: 1fr; }
  .filtros-historial { grid-template-columns: 1fr; }
  .filtro-texto { grid-column: auto; }
  .campo-accion { align-items: stretch; flex-direction: column; }
  .campo-accion button { width: 100%; }
  .fila-historial { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}