/* ============================================================================
   Sistema visual — 7 de Agosto Patria Milagro
   ----------------------------------------------------------------------------
   El encargo vive en el mundo del TALONARIO: boletas preimpresas, folios
   consecutivos, una mesa que entrega tacos numerados y unas puertas que los
   revisan. De ahí sale todo:

   · La perforación (.perf) reemplaza al borde redondeado como divisor. Es el
     gesto que define una boleta de papel y aquí separa secciones.
   · Los números mandan: folios, códigos y horas van en monoespaciada, como
     impresos en la colilla; las cifras grandes en condensada de señalización,
     que es como se rotula una puerta de estadio.
   · Radios de 2-3px, no de 14: esto se parece más a algo impreso que a una
     tarjeta de app.
   · Reglas y filas en vez de cajas. Una caja por dato convierte cualquier
     pantalla en el mismo dashboard de siempre.

   Tema claro único, por decisión: se opera de día en una mesa y de noche en
   una puerta con el veredicto a pantalla completa, que lleva su propio color.
   ========================================================================== */

@font-face{font-family:'Shoulders'; src:url('fuentes/bigshoulders-800.woff2') format('woff2'); font-weight:800; font-display:swap}
@font-face{font-family:'Plex'; src:url('fuentes/plexsans-400.woff2') format('woff2'); font-weight:400; font-display:swap}
@font-face{font-family:'Plex'; src:url('fuentes/plexsans-600.woff2') format('woff2'); font-weight:600; font-display:swap}
@font-face{font-family:'PlexMono'; src:url('fuentes/plexmono-500.woff2') format('woff2'); font-weight:500; font-display:swap}

:root{
  color-scheme:light;

  /* Neutros con sesgo azul: un gris puro se siente heredado, no elegido. */
  --tinta:#0F1621;
  --tinta-2:#59636F;
  --tinta-3:#8C949E;
  --fondo:#E8EBEF;
  --sup:#FFFFFF;
  --linea:#C7CFD8;
  --linea-fuerte:#0F1621;

  /* La bandera, con disciplina: azul = estructura, amarillo = única acción,
     rojo = solo error. Nunca los tres compitiendo por atención. */
  --azul:#003893;
  --amarillo:#F5C400;
  --rojo:#B3121C;

  /* Semánticos, separados del acento. */
  --ok:#0B7A4B;
  --warn:#9A5B00;
  --no:#B3121C;

  --display:'Shoulders',Impact,'Haettenschweiler',sans-serif;
  --texto:'Plex',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --dato:'PlexMono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

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

body{
  font-family:var(--texto);
  font-size:15px;
  line-height:1.5;
  color:var(--tinta);
  background:var(--fondo);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

/* Grano de papel: apenas perceptible, para que el fondo no se lea como un
   relleno plano de pantalla. */
body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hoja{position:relative; z-index:1; max-width:720px; margin:0 auto; padding:0 18px calc(40px + env(safe-area-inset-bottom))}

/* ── Cabecera ─────────────────────────────────────────────────────────────
   Bloque de identificación, como el encabezado de una hoja de control. */
.cabecera{padding:26px 0 0}
.eyebrow{
  font-family:var(--dato); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul); font-weight:500;
}
.titulo{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(34px,10vw,58px); line-height:.86; letter-spacing:.01em;
  margin-top:8px; text-wrap:balance;
}
.meta{font-family:var(--dato); font-size:12px; color:var(--tinta-2); margin-top:10px; letter-spacing:.02em}

/* ── Perforación: el divisor de este proyecto ──────────────────────────── */
.perf{
  height:12px; margin:18px 0;
  background-image:radial-gradient(circle at center, var(--linea) 1.7px, transparent 1.9px);
  background-size:11px 11px; background-position:center;
  background-repeat:repeat-x;
}
.perf-tinta{background-image:radial-gradient(circle at center, var(--tinta) 1.7px, transparent 1.9px)}

/* ── Marcadores: reglas, no tarjetas ──────────────────────────────────── */
.marcadores{display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--linea-fuerte)}
.marcador{padding:14px 0 16px; border-bottom:1px solid var(--linea)}
.marcador + .marcador{border-left:1px solid var(--linea); padding-left:14px}
.marcador .n{
  font-family:var(--display); font-weight:800; font-size:clamp(30px,9vw,46px); line-height:.9;
  font-variant-numeric:tabular-nums; display:block;
}
.marcador .et{
  font-family:var(--dato); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-2); margin-top:7px; display:block;
}
.marcador.destacado .n{color:var(--azul)}

/* ── Secciones ────────────────────────────────────────────────────────── */
.seccion{margin-top:30px}
.rotulo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--dato); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-2); padding-bottom:8px; border-bottom:2px solid var(--linea-fuerte);
}

/* ── Formulario ───────────────────────────────────────────────────────── */
.campo{display:block; margin-top:16px}
.campo > span{
  display:block; font-family:var(--dato); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-2); margin-bottom:6px;
}
input{
  width:100%; font:inherit; font-size:17px; padding:12px 13px; color:var(--tinta);
  background:var(--sup); border:1px solid var(--linea); border-radius:3px;
}
input:focus{outline:2px solid var(--azul); outline-offset:1px; border-color:var(--azul)}
input.dato{font-family:var(--dato); font-size:19px; letter-spacing:.06em; font-weight:500}
.par{display:grid; grid-template-columns:1fr 1fr; gap:12px}

button{
  font:inherit; font-weight:600; cursor:pointer; border-radius:3px; border:1px solid transparent;
  padding:13px 16px; background:var(--amarillo); color:var(--tinta); width:100%;
}
button:hover{filter:brightness(.96)}
button:focus-visible{outline:2px solid var(--azul); outline-offset:2px}
button:disabled{opacity:.45; cursor:default}
button.sec{background:var(--sup); border-color:var(--linea); color:var(--tinta)}
button.mini{width:auto; padding:6px 11px; font-size:12px; background:var(--sup); border-color:var(--linea)}
button.texto{width:auto; background:none; border:0; color:var(--tinta-2); text-decoration:underline; padding:6px 0; font-size:12px}

.aviso{font-size:13px; margin-top:10px; min-height:20px; line-height:1.5}
.aviso.mal{color:var(--no)}
.aviso.bien{color:var(--ok)}
.aviso.ojo{color:var(--warn)}

/* ── Registros: filas con franja de estado a la izquierda ─────────────── */
.registro{
  background:var(--sup); border:1px solid var(--linea); border-left:4px solid var(--tinta);
  border-radius:3px; padding:12px 14px; margin-top:8px;
}
.registro.viva{border-left-color:var(--amarillo)}
.registro .arriba{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.registro .quien{
  font-family:var(--display); font-weight:800; font-size:20px; text-transform:uppercase;
  letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.registro .cuanto{font-family:var(--display); font-weight:800; font-size:23px; font-variant-numeric:tabular-nums; flex:none}
.registro .rango{font-family:var(--dato); font-size:14px; color:var(--azul); margin-top:5px; letter-spacing:.04em}
.registro .abajo{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px;
  font-family:var(--dato); font-size:11px; color:var(--tinta-3);
}

.chip{
  font-family:var(--dato); font-size:10px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 8px; border-radius:2px; flex:none;
}
.chip.creada{background:#DEF0E6; color:var(--ok)}
.chip.editada{background:#FBEFD5; color:var(--warn)}
.chip.eliminada{background:#F6DFE0; color:var(--no)}

.vacio{
  font-size:13px; color:var(--tinta-2); background:var(--sup);
  border:1px dashed var(--linea); border-radius:3px; padding:20px; text-align:center; margin-top:8px;
}

/* ── Tablas de datos ──────────────────────────────────────────────────── */
.datos{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; margin-top:2px}
.datos th{
  font-family:var(--dato); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2); font-weight:500; text-align:right; padding:10px 6px;
  border-bottom:1px solid var(--linea);
}
.datos td{padding:11px 6px; border-bottom:1px solid var(--linea); text-align:right; font-size:14px}
.datos th:first-child,.datos td:first-child{text-align:left}
.datos .nom{font-family:var(--display); font-weight:800; font-size:17px; text-transform:uppercase}
.datos .cod{font-family:var(--dato); font-size:13px}
.datos .tenue{color:var(--tinta-2); font-family:var(--dato); font-size:12px}
.datos .pct{color:var(--ok); font-weight:600}

.enlace{margin-top:24px; font-family:var(--dato); font-size:13px}
.enlace a{
  color:var(--azul); text-decoration:none; font-weight:500;
  border-bottom:2px solid var(--amarillo); padding-bottom:2px;
}
.enlace a:hover{border-bottom-color:var(--azul)}
.pie{font-family:var(--dato); font-size:11px; color:var(--tinta-3); margin-top:26px; line-height:1.7}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}