@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root {
  --concreto:#DFE3E0; --papel:#F6F7F5; --tinta:#151A18; --pizarra:#5D6B64;
  --senal:#E8A31B; --conforme:#1C7A59; --desvio:#B94429; --linea:#C6CDC8;
}

html, body { margin:0; padding:0; }
body {
  font-family:'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background:var(--concreto); color:var(--tinta);
  min-height:100vh; padding-bottom:80px;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
h1,h2,h3 { margin:0; letter-spacing:-0.025em; font-weight:600; }
p { margin:0; }
img { display:block; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid var(--tinta); outline-offset:2px;
}

.wrap { max-width:520px; margin:0 auto; padding:0 16px; }
.h8{height:8px}.h10{height:10px}.h14{height:14px}.h18{height:18px}.h22{height:22px}.h26{height:26px}

.barra { position:sticky; top:0; z-index:20; background:var(--concreto);
  border-bottom:1px solid var(--linea); padding:14px 0 12px; }
.barra-in { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.marca { font-size:19px; font-weight:800; letter-spacing:-0.04em; }
.quien { font-size:13px; color:var(--pizarra); }

.tarjeta { background:var(--papel); border:1px solid var(--linea); border-radius:4px; overflow:hidden; }
.zona-btn { display:block; width:100%; text-align:left; margin-bottom:12px; padding:0; }
.zona-foto { width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--linea); }
.zona-pie { padding:11px 13px 13px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.zona-nombre { font-size:17px; font-weight:600; line-height:1.2; }
.zona-area { font-size:12.5px; color:var(--pizarra); margin-top:2px; }

.cinta { height:7px; background:repeating-linear-gradient(-45deg, var(--senal) 0 9px, #2A2E2C 9px 18px); }
.cinta-ok { height:7px; background:var(--conforme); }

.regla-g { position:relative; height:22px; }
.regla-linea { position:absolute; top:11px; left:0; right:0; height:2px; background:var(--linea); }
.regla-fill { position:absolute; top:11px; left:0; height:2px; background:var(--tinta); }
.regla-umbral { position:absolute; top:4px; width:2px; height:16px; background:var(--pizarra); }
.regla-aguja { position:absolute; top:0; width:3px; height:22px; background:var(--tinta); }
.medidor-pie { display:flex; justify-content:space-between; font-size:11px; color:var(--pizarra); margin-top:2px; }

.num { font-size:34px; font-weight:800; letter-spacing:-0.05em; line-height:1; }
.num-sm { font-size:22px; font-weight:800; letter-spacing:-0.04em; }

.btn { display:block; width:100%; padding:15px; border-radius:3px; font-size:15.5px; font-weight:600;
  background:var(--tinta); color:var(--papel); text-align:center; }
.btn:active { transform:translateY(1px); }
.btn-sec { background:transparent; color:var(--tinta); border:1.5px solid var(--tinta); }
.btn-tenue { background:transparent; color:var(--pizarra); border:1px solid var(--linea); font-weight:500; }
.btn-peligro { background:transparent; color:var(--desvio); border:1px solid var(--linea); font-weight:500; }
.btn[disabled] { opacity:.45; pointer-events:none; }

.campo { width:100%; padding:12px; font-size:16px; font-family:inherit; background:var(--papel);
  border:1px solid var(--linea); border-radius:3px; color:var(--tinta); }
textarea.campo { resize:vertical; }
label.et { display:block; font-size:13px; color:var(--pizarra); margin-bottom:5px; }

.item { display:flex; gap:9px; padding:11px 0; border-bottom:1px solid var(--linea); font-size:14.5px; line-height:1.4; }
.item:last-child { border-bottom:none; }
.bullet { width:6px; height:6px; background:var(--tinta); flex:none; margin-top:7px; }

.accion { display:flex; gap:11px; padding:13px 0; border-bottom:1px solid var(--linea); align-items:flex-start; }
.accion:last-child { border-bottom:none; }
.accion-n { flex:none; width:23px; height:23px; border-radius:50%; background:var(--tinta); color:var(--papel);
  font-size:12.5px; font-weight:600; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.accion-t { font-size:15px; line-height:1.35; }

.nav { position:fixed; bottom:0; left:0; right:0; background:var(--papel); border-top:1px solid var(--linea); z-index:30; }
.nav-in { max-width:520px; margin:0 auto; display:flex; }
.nav button { flex:1; padding:13px 4px 18px; font-size:12.5px; color:var(--pizarra); font-weight:500;
  border-top:2px solid transparent; }
.nav button[data-on="1"] { color:var(--tinta); border-top-color:var(--tinta); font-weight:600; }

.hoja { position:fixed; inset:0; background:var(--concreto); z-index:40; overflow-y:auto; padding-bottom:50px; }
.hoja-barra { position:sticky; top:0; background:var(--concreto); border-bottom:1px solid var(--linea);
  padding:13px 0; display:flex; align-items:center; gap:12px; z-index:2; }
.cerrar { font-size:14px; font-weight:600; color:var(--pizarra); }

.fila { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%;
  padding:14px 0; border-bottom:1px solid var(--linea); text-align:left; }
.turno { font-size:12.5px; color:var(--pizarra); margin-top:2px; }
.pill { font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:99px; border:1px solid var(--linea);
  color:var(--pizarra); white-space:nowrap; }
.pill-hoy { background:var(--senal); border-color:var(--senal); color:#2A2E2C; }
.pill-tarde { background:var(--desvio); border-color:var(--desvio); color:#fff; }

.aviso { font-size:13.5px; color:var(--desvio); line-height:1.4; }
.sub { font-size:13.5px; color:var(--pizarra); line-height:1.5; }
.sec { font-size:12.5px; color:var(--pizarra); margin-bottom:8px; }

.carga { display:inline-block; width:14px; height:14px; border:2px solid var(--linea);
  border-top-color:var(--tinta); border-radius:50%; animation:gira .7s linear infinite; vertical-align:-2px; }
@keyframes gira { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .carga { animation-duration:3s; } }

/* editor de layout */
.lienzo { position:relative; width:100%; touch-action:none; user-select:none; border:1px solid var(--linea); }
.lienzo img { width:100%; }
.caja { position:absolute; border:2px solid var(--senal); background:rgba(232,163,27,.16); }
.caja-et { position:absolute; top:0; left:0; background:var(--senal); color:#2A2E2C;
  font-size:10.5px; font-weight:600; padding:1px 4px; white-space:nowrap; }
.caja-x { position:absolute; top:-1px; right:-1px; background:var(--tinta); color:var(--papel);
  width:19px; height:19px; font-size:12px; line-height:19px; text-align:center; }

.freq { display:flex; gap:8px; align-items:center; }
.freq input { width:74px; }
.freq select { flex:1; }

.ficha { background:#fff; }

/* comparación estándar vs actual */
.comparar { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.comparar figure { margin:0; }
.comparar img { width:100%; border:1px solid var(--linea); }
.comparar .lienzo { border:none; }
.comparar .lienzo img { border:1px solid var(--linea); }
.comparar .caja-et { font-size:8.5px; padding:0 2px; }
.comparar figcaption { font-size:11.5px; color:var(--pizarra); margin-top:4px; text-align:center; }