/* Ciber-Scan. Paleta de Transformation Trends: navy, oro, fondo azulado.
   Tokens completos en :root; el modo oscuro sólo los redefine. Ningún color
   vive únicamente dentro de una media query. */
:root{
  --ground:#f8faff; --surface:#fff; --surface-2:#f1f5fc;
  --ink:#1e3d6e; --text:#2c3a4f; --muted:#65758c; --line:#dde5f0; --line-2:#c8d5e8;
  --oro:#f5b52a; --oro-ink:#7a5600;
  --rojo:#b42318; --rojo-bg:#fef3f2; --ambar:#b54708; --ambar-bg:#fffaeb;
  --verde:#067647; --verde-bg:#ecfdf3; --gris:#65758c; --gris-bg:#f1f5fc;
  --sombra:0 1px 2px rgba(30,61,110,.06), 0 8px 24px -12px rgba(30,61,110,.18);
  --r:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0c1626; --surface:#132238; --surface-2:#1a2b45;
  --ink:#e6eefb; --text:#c3d1e6; --muted:#8fa3bf; --line:#24374f; --line-2:#33495f;
  --oro-ink:#f5c96a;
  --rojo:#fda29b; --rojo-bg:#2b1412; --ambar:#fdb022; --ambar-bg:#2a1e08;
  --verde:#6ce9a6; --verde-bg:#0a2a1c; --gris:#8fa3bf; --gris-bg:#1a2b45;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--ground);color:var(--text);
  font:400 16px/1.6 "Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:Archivo,-apple-system,sans-serif;color:var(--ink);
  text-wrap:balance;margin:0;letter-spacing:-.015em}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
[hidden]{display:none!important}

.hoja{max-width:660px;margin:0 auto;padding:28px 20px 72px}
.marca{display:flex;align-items:center;gap:9px;margin-bottom:24px}
.marca b{font-family:Archivo,sans-serif;font-weight:700;font-size:15px;color:var(--ink)}
.marca .pt{width:7px;height:18px;background:var(--oro);border-radius:2px}
.marca small{color:var(--muted);font-size:12px;margin-left:auto;
  font-family:"JetBrains Mono",monospace}

h1.tit{font-size:clamp(22px,4vw,27px);font-weight:600;margin-bottom:9px;line-height:1.2}
.sub{color:var(--muted);margin:0 0 22px;max-width:52ch}
label.campo{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.input{width:100%;padding:12px 13px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--surface);color:var(--text);font:inherit;font-size:16px}
.input:focus-visible{outline:2px solid var(--oro);outline-offset:1px;border-color:var(--ink)}
.pista{font-size:13px;color:var(--muted);margin:7px 0 0}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
  border:none;padding:13px 22px;border-radius:7px;
  font:600 15px/1 "Source Sans 3",sans-serif;cursor:pointer;margin-top:20px}
.btn[disabled]{opacity:.5;cursor:progress}
.btn.oro{background:var(--oro);color:#3d2a00}
.btn.fantasma{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

/* límite 5: va arriba del semáforo, siempre */
.limite5{display:flex;gap:11px;padding:14px 16px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line);margin-bottom:22px;
  font-size:14.5px;line-height:1.5}
.limite5 .ic{color:var(--ink);font-weight:700;font-family:Archivo,sans-serif}
.limite5 b{color:var(--ink)}

.aviso{padding:13px 16px;border-radius:8px;background:var(--rojo-bg);
  border:1px solid var(--rojo);color:var(--rojo);font-size:14.5px;margin:16px 0 0}

/* consentimiento */
.consent{border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:17px 18px;margin-top:24px}
.consent h4{font-size:15px;font-weight:600;margin-bottom:9px}
.consent ul{margin:0 0 14px;padding-left:18px;font-size:14.5px;line-height:1.55}
.consent .no::marker{color:var(--rojo)}
.consent .si::marker{color:var(--verde)}
.acepta{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;
  padding-top:13px;border-top:1px solid var(--line);line-height:1.5;cursor:pointer}
.acepta input{margin:3px 0 0;width:17px;height:17px;flex:none;accent-color:var(--ink)}

/* código */
.digitos{display:flex;gap:9px;margin:8px 0 4px}
.digitos input{width:46px;height:56px;border:1px solid var(--line-2);border-radius:8px;
  text-align:center;font-family:"JetBrains Mono",monospace;font-size:24px;font-weight:500;
  color:var(--ink);background:var(--surface)}
.digitos input:focus-visible{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}

/* progreso e inventario */
.linea{display:flex;align-items:center;gap:11px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:15px}
.linea:last-child{border-bottom:none}
.linea .est{width:18px;flex:none;text-align:center;font-size:13px;font-weight:700;
  font-family:"JetBrains Mono",monospace}
.linea .ok{color:var(--verde)} .linea .run{color:var(--oro-ink)} .linea .esp{color:var(--line-2)}
.linea .dato{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:12.5px;
  color:var(--muted);text-align:right}
.linea.gris{color:var(--muted)}
.barra-prog{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;
  margin:20px 0 6px}
.barra-prog b{display:block;height:100%;background:var(--ink);border-radius:3px;
  transition:width .4s ease}

/* semáforo y hallazgos */
.semaforo{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:9px;
  border:1px solid var(--gris);background:var(--gris-bg);margin-bottom:10px}
.semaforo.verde{border-color:var(--verde);background:var(--verde-bg)}
.semaforo.amarillo{border-color:var(--ambar);background:var(--ambar-bg)}
.semaforo.rojo{border-color:var(--rojo);background:var(--rojo-bg)}
.semaforo .luz{width:13px;height:13px;border-radius:50%;background:var(--gris);flex:none}
.semaforo.verde .luz{background:var(--verde)}
.semaforo.amarillo .luz{background:var(--ambar)}
.semaforo.rojo .luz{background:var(--rojo)}
.semaforo b{display:block;font-family:Archivo,sans-serif;font-weight:700;color:var(--ink);
  font-size:16px}
.semaforo span{font-size:14.5px;color:var(--text)}

.seccion{margin-top:28px}
.seccion>h4{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px}

.hall{padding:16px 0;border-bottom:1px solid var(--line);display:flex;gap:14px}
.hall:last-of-type{border-bottom:none}
.tira{width:3px;border-radius:2px;flex:none;background:var(--gris)}
.tira.alta{background:var(--ambar)} .tira.critica{background:var(--rojo)}
.tira.media{background:var(--oro)}
.hall-cab{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.folio{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--muted)}
.pill{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px;
  border:1px solid var(--gris);color:var(--gris);background:var(--gris-bg)}
.pill.critica{background:var(--rojo-bg);color:var(--rojo);border-color:var(--rojo)}
.pill.alta{background:var(--ambar-bg);color:var(--ambar);border-color:var(--ambar)}
.puntaje{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--muted);
  margin-left:auto;font-variant-numeric:tabular-nums}
.hall h5{font-size:15.5px;font-weight:600;margin:0 0 5px}
.hall p{margin:0 0 5px;font-size:14.5px;line-height:1.55}
.hall .hacer{color:var(--ink);font-weight:600;font-size:14px}
.tecnico{margin-top:9px;font-family:"JetBrains Mono",monospace;font-size:11.5px;
  color:var(--muted);background:var(--surface-2);padding:8px 10px;border-radius:5px;
  overflow-x:auto;white-space:nowrap}
.nota-sev{font-size:13px;color:var(--muted);font-style:italic}

.mas{display:flex;align-items:center;gap:10px;padding:14px 16px;margin-top:14px;
  background:var(--surface-2);border:1px dashed var(--line-2);border-radius:8px;
  font-size:14.5px}
.mas b{color:var(--ink);font-family:Archivo,sans-serif}
.sinver{padding:14px 16px;background:var(--gris-bg);border:1px solid var(--line);
  border-radius:8px;font-size:14.5px;margin-top:4px}
.sinver div{display:flex;gap:9px;padding:3px 0}
.sinver .pie{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;display:block}
.cta-caja{margin-top:26px;padding:18px;border:1px solid var(--ink);border-radius:9px;
  background:var(--surface-2)}
.cta-caja h4{font-size:16px;font-weight:600;margin-bottom:6px}
.cta-caja p{margin:0;font-size:14.5px}
.pie-legal{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.5}
.no-firma{font-family:"JetBrains Mono",monospace;font-size:11.5px;margin-top:9px}

/* acuse y pasos de la última pantalla */
.acuse{display:flex;gap:13px;padding:15px 17px;border-radius:9px;
  background:var(--verde-bg);border:1px solid var(--verde);margin-bottom:24px}
.acuse .ic{color:var(--verde);font-weight:700;flex:none}
.acuse b{display:block;font-family:Archivo,sans-serif;color:var(--ink);font-size:16px}
.sig{list-style:none;counter-reset:s;margin:4px 0 0;padding:0}
.sig li{counter-increment:s;display:grid;grid-template-columns:26px minmax(0,1fr);
  gap:13px;padding:17px 0;border-bottom:1px solid var(--line)}
.sig li:last-child{border-bottom:none}
.sig li::before{content:counter(s);font-family:Archivo,sans-serif;font-weight:700;
  font-size:12px;color:var(--ink);border:1.5px solid var(--line-2);border-radius:50%;
  width:26px;height:26px;display:grid;place-items:center;margin-top:1px}
.sig h5{font-size:16px;font-weight:600;margin:0 0 5px}
.sig p{margin:0;font-size:14.5px;line-height:1.55}
.paga{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--oro-ink);
  border:1px solid var(--oro);border-radius:4px;padding:2px 7px;margin-left:7px}
.foto{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.foto>div{padding:14px 16px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface)}
.foto>div:last-child{border-style:dashed;border-color:var(--oro)}
.foto h6{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.foto p{margin:0;font-size:14.5px;line-height:1.5}
@media (max-width:560px){.foto{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* En pantalla angosta el dato de la derecha se parte en dos renglones y deja
   el nombre de la revisión apretado contra el borde. Se apila. */
@media (max-width:480px){
  .linea{flex-wrap:wrap;align-items:flex-start}
  /* el nombre se queda junto a la palomita aunque ocupe dos renglones; sin
     esto un texto largo salta solo a la línea de abajo y deja la palomita
     huérfana arriba */
  .linea .est + span{flex:1 1 0;min-width:0}
  .linea .dato{margin-left:29px;width:100%;text-align:left;padding-top:2px}
  .hall-cab .puntaje{margin-left:0;width:100%}
}

/* El botón de WhatsApp es un <a> de verdad (abre otra app), así que hay que
   quitarle el subrayado que trae por ser enlace. */
a.btn{text-decoration:none}

/* el registro que hay que publicar */
.registro{margin:10px 0 4px;border:1px solid var(--line-2);border-radius:9px;
  overflow:hidden;background:var(--surface)}
.registro > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;
  padding:12px 15px;border-bottom:1px solid var(--line);align-items:baseline}
.registro > div:last-child{border-bottom:none}
.registro dt{font-size:13px;font-weight:600;color:var(--ink)}
.registro dd{margin:0;font-family:"JetBrains Mono",monospace;font-size:13.5px;
  color:var(--ink);word-break:break-all}
.registro small{display:block;color:var(--muted);font-size:12px;margin-top:4px;
  font-family:"Source Sans 3",sans-serif;word-break:normal;line-height:1.45}
.copiar{float:right;font:600 12px/1 "Source Sans 3",sans-serif;color:var(--oro-ink);
  background:transparent;border:1px solid var(--oro);border-radius:4px;
  padding:3px 9px;margin-left:10px;cursor:pointer}
.copiar:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
@media (max-width:480px){.registro > div{grid-template-columns:1fr;gap:3px}}

/* las tres respuestas de «ya lo publiqué» */
.resp{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;
  border-radius:8px;font-size:14.5px;line-height:1.5;border:1px solid var(--line);
  margin-top:16px}
.resp .ic{font-family:"JetBrains Mono",monospace;font-weight:700;flex:none}
.resp b{color:var(--ink)}
.resp.si{background:var(--verde-bg);border-color:var(--verde)}
.resp.si .ic{color:var(--verde)}
.resp.esperando{background:var(--ambar-bg);border-color:var(--ambar)}
.resp.esperando .ic{color:var(--ambar)}
.resp.nose{background:var(--gris-bg)}
.resp.nose .ic{color:var(--gris)}