/* ═══════════════════════════════════════════════════════════════
 *  style.css — verificación (público) + panel (admin)
 *  Móvil primero. Claro y oscuro automáticos.
 * ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#f4f6fa; --card:#ffffff; --tinta:#111826; --suave:#5b6577; --linea:#e3e7ee;
  --acc:#0e7f6d; --acc2:#0b6053; --ok:#0e9f6e; --duda:#c98a04; --mal:#d64545;
  --wa:#25d366; --sombra:0 2px 10px rgba(16,24,40,.06), 0 12px 28px rgba(16,24,40,.06);
  --r:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1420; --card:#161d2c; --tinta:#e9edf5; --suave:#9aa5b8; --linea:#26314a;
    --acc:#2dd4a7; --acc2:#1fae89; --ok:#34d399; --duda:#facc15; --mal:#f87171;
    --sombra:0 2px 10px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tinta);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:40px;
}
h1{font-size:1.45rem; margin:0 0 .4rem}
h2{font-size:1.15rem; margin:0 0 .6rem}
p{margin:.4rem 0 .9rem}
a{color:var(--acc)}
small{font-size:.82em}
.hide{display:none !important}
.muted{color:var(--suave)}
.centro{text-align:center}
.center{text-align:center}
.mini{font-size:.83rem; color:var(--suave)}

/* ── cabecera ─────────────────────────────────────────────── */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; background:var(--card); border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px}
.brand strong{display:block; line-height:1.15}
.brand small{display:block; color:var(--suave)}
.shield{font-size:1.5rem}
.link-mini{font-size:.86rem; text-decoration:none; padding:7px 11px; border:1px solid var(--linea); border-radius:99px}
.topright{display:flex; align-items:center; gap:10px}
.quien{font-size:.86rem; color:var(--suave)}

.wrap{max-width:640px; margin:0 auto; padding:16px}
.pie{max-width:640px; margin:8px auto 0; padding:0 16px; text-align:center; font-size:.78rem; color:var(--suave)}
.pie .build{display:block; margin-top:3px; opacity:.7; font-size:.72rem}
.quien .build{opacity:.65}

/* ── tarjetas ─────────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--linea); border-radius:var(--r);
  padding:20px; box-shadow:var(--sombra); margin-bottom:16px;
}

/* ── barra de pasos ───────────────────────────────────────── */
.pasos{display:flex; list-style:none; margin:0 0 14px; padding:0; gap:6px; visibility:hidden}
.pasos li{flex:1; text-align:center; font-size:.72rem; color:var(--suave)}
.pasos i{
  display:block; margin:0 auto 4px; width:26px; height:26px; line-height:24px; border-radius:50%;
  border:2px solid var(--linea); font-style:normal; font-size:.78rem; font-weight:700; background:var(--card);
}
.pasos li.on i{border-color:var(--acc); color:var(--acc)}
.pasos li.on{color:var(--tinta)}
.pasos li.done i{background:var(--acc); border-color:var(--acc); color:#fff}

/* ── formularios ──────────────────────────────────────────── */
.fld{display:block; margin:0 0 14px}
.fld > span{display:block; font-size:.85rem; font-weight:600; margin-bottom:5px}
.fld input, .fld select, .fld textarea, .barra-busca input, .barra-busca select, .nota textarea{
  width:100%; padding:12px 13px; font-size:16px; color:var(--tinta);
  background:var(--bg); border:1.5px solid var(--linea); border-radius:11px; outline:none;
  font-family:inherit;
}
.fld input:focus, .fld select:focus, .fld textarea:focus{border-color:var(--acc)}
.row{display:flex; gap:10px}
.row .fld{flex:1}
.row .fld.sm{flex:0 0 108px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; margin:14px 0}
.check input{margin-top:3px; width:20px; height:20px; accent-color:var(--acc)}

/* ── botones ──────────────────────────────────────────────── */
.btn{
  display:inline-block; width:100%; padding:14px 18px; border:0; border-radius:12px; cursor:pointer;
  background:var(--acc); color:#fff; font-size:1rem; font-weight:700; font-family:inherit;
  text-align:center; text-decoration:none;
}
.btn:hover{background:var(--acc2)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--tinta); border:1.5px solid var(--linea)}
.btn.ok{background:var(--ok)}
.btn.peligro{background:transparent; color:var(--mal); border:1.5px solid var(--mal)}
.btn.wa{background:var(--wa); color:#04301a}
.btn.sm{width:auto; padding:9px 14px; font-size:.88rem}
.acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.acciones .btn{flex:1; min-width:140px}

/* ── avisos ───────────────────────────────────────────────── */
.err{
  background:color-mix(in srgb, var(--mal) 12%, transparent); color:var(--mal);
  border:1px solid color-mix(in srgb, var(--mal) 35%, transparent);
  padding:11px 13px; border-radius:11px; font-size:.9rem; margin:10px 0;
}
.err-soft{background:var(--bg); border:1px dashed var(--linea); color:var(--suave);
  padding:11px 13px; border-radius:11px; font-size:.88rem; margin:10px 0}
.aviso{
  background:color-mix(in srgb, var(--acc) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  padding:12px 14px; border-radius:12px; font-size:.88rem; margin:14px 0;
}
.lista{padding-left:1.1rem; margin:.6rem 0 1rem}
.lista li{margin:.3rem 0}
.lista.chica{font-size:.9rem}
.big-ico{font-size:3rem; text-align:center; line-height:1; margin:6px 0 10px}
.folio{
  background:var(--bg); border:1px dashed var(--acc); border-radius:12px;
  padding:12px; text-align:center; margin:14px 0;
}
.folio small{display:block; color:var(--suave); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em}
.folio b{font-size:1.6rem; letter-spacing:.12em}

/* ── documento: dos capturas ──────────────────────────────── */
.shots{display:flex; gap:10px; margin:10px 0}
.shot{
  flex:1; background:var(--bg); border:1.5px dashed var(--linea); border-radius:14px;
  padding:10px; text-align:center; position:relative; min-height:160px;
  display:flex; flex-direction:column; justify-content:space-between; gap:8px;
}
.shot.listo{border-style:solid; border-color:var(--acc)}
.shot .ph{color:var(--suave); font-size:.78rem; padding:8px 0}
.shot .ph span{display:block; font-size:1.6rem}
.shot .ph b{display:block; color:var(--tinta); font-size:.9rem; margin-top:3px}
.shot img{width:100%; border-radius:9px; display:block; margin-bottom:6px}
.shot.listo .ph{display:none}
.shot.cargando::after{
  content:"Analizando…"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); color:#fff; border-radius:13px; font-size:.85rem;
}
.estado-ia{font-size:.86rem; padding:0; margin:6px 0}
.estado-ia ul.tips{margin:6px 0 8px; padding-left:1.1rem; color:var(--suave); font-size:.84rem}
.estado-ia ul.tips li{margin:.2rem 0}
.estado-ia .btn{margin-top:4px}
.estado-ia.buscando{color:var(--suave)}
.estado-ia.bien{color:var(--ok)}
.estado-ia.mal{color:var(--mal)}
.estado-ia.manual{color:var(--duda)}

/* ── cámara / prueba de vida ──────────────────────────────── */
.camwrap{
  position:relative; background:#000; border-radius:16px; overflow:hidden;
  aspect-ratio:3/4; max-height:58vh; margin:10px auto; display:flex; justify-content:center;
}
.camwrap video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.oval{
  position:absolute; top:8%; left:50%; transform:translateX(-50%);
  width:64%; height:76%; border:3px dashed rgba(255,255,255,.7); border-radius:50%;
  pointer-events:none;
}
.reto{
  position:absolute; left:10px; right:10px; bottom:20px; text-align:center;
  background:rgba(0,0,0,.62); color:#fff; padding:10px 12px; border-radius:12px;
  font-weight:700; font-size:1rem; backdrop-filter:blur(3px);
}
.reto small{display:block; font-weight:400; font-size:.8rem; opacity:.88; margin-top:3px}
.barra{position:absolute; left:0; right:0; bottom:0; height:5px; background:rgba(255,255,255,.2)}
.barra i{display:block; height:100%; width:100%; background:var(--acc); transition:width .12s linear}
.retos{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.chip{
  font-size:.78rem; padding:5px 10px; border-radius:99px;
  border:1px solid var(--linea); color:var(--suave); background:var(--bg);
}
.chip.act{border-color:var(--acc); color:var(--acc); font-weight:700}
.chip.ok{border-color:var(--ok); color:var(--ok)}

/* ── medidor de parecido ──────────────────────────────────── */
.medidor{height:12px; background:var(--bg); border:1px solid var(--linea); border-radius:99px; overflow:hidden; margin:12px 0 4px}
.medidor i{display:block; height:100%; background:var(--suave)}
.medidor.ok i{background:var(--ok)}
.medidor.duda i{background:var(--duda)}
.medidor.mal i{background:var(--mal)}
.big-ico.ok{filter:none}

/* ═══════════════ PANEL ═══════════════ */
body.adm{padding-bottom:60px}
.login{max-width:400px; margin:8vh auto; padding:16px}
.login .brand{justify-content:center; margin-bottom:12px}

.stats{display:flex; gap:10px; overflow-x:auto; padding:14px 16px 4px; max-width:1100px; margin:0 auto}
.tile{
  flex:0 0 auto; min-width:104px; background:var(--card); border:1px solid var(--linea);
  border-radius:14px; padding:12px 14px; box-shadow:var(--sombra);
}
.tile b{display:block; font-size:1.5rem; line-height:1.1}
.tile span{font-size:.76rem; color:var(--suave)}
.tile.ok b{color:var(--ok)} .tile.mal b{color:var(--mal)} .tile.esp b{color:var(--acc)}
.tile.aviso-link{color:var(--duda); font-size:.84rem; display:flex; align-items:center; min-width:250px}

.tabs{display:flex; gap:6px; overflow-x:auto; padding:12px 16px; max-width:1100px; margin:0 auto}
.tabs button{
  flex:0 0 auto; padding:9px 14px; border-radius:99px; border:1px solid var(--linea);
  background:var(--card); color:var(--suave); font:inherit; font-size:.88rem; cursor:pointer;
}
.tabs button.on{background:var(--acc); border-color:var(--acc); color:#fff; font-weight:700}
.tabs button i{font-style:normal; background:rgba(0,0,0,.15); padding:1px 7px; border-radius:99px; margin-left:5px; font-size:.8rem}

.barra-busca{display:flex; gap:8px; padding:0 16px 12px; max-width:1100px; margin:0 auto}
.barra-busca input{flex:1}
.barra-busca select{flex:0 0 190px}

.lista-sol{max-width:1100px; margin:0 auto; padding:0 16px; display:grid; gap:14px}
@media(min-width:900px){ .lista-sol{grid-template-columns:1fr 1fr} }

.sol{
  background:var(--card); border:1px solid var(--linea); border-left:5px solid var(--suave);
  border-radius:var(--r); padding:16px; box-shadow:var(--sombra);
}
.sol.ok{border-left-color:var(--ok)}
.sol.duda{border-left-color:var(--duda)}
.sol.mal{border-left-color:var(--mal)}
.sol.resuelta{opacity:.6}
.sol > header{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px}
.sol header small{display:block; color:var(--suave); font-size:.78rem}
.badge{font-size:.72rem; padding:4px 9px; border-radius:99px; border:1px solid var(--linea); color:var(--suave); white-space:nowrap}
.badge.ok{color:var(--ok); border-color:var(--ok)}
.badge.duda{color:var(--duda); border-color:var(--duda)}
.badge.mal{color:#fff; background:var(--mal); border-color:var(--mal); font-weight:700}

.fotos{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:10px 0}
.foto{margin:0; position:relative}
.foto img{width:100%; height:88px; object-fit:cover; border-radius:9px; cursor:zoom-in; background:var(--bg); display:block}
.foto figcaption{font-size:.68rem; color:var(--suave); text-align:center; margin-top:2px}
.foto.sin{
  height:88px; border:1px dashed var(--linea); border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:.68rem; color:var(--suave); text-align:center;
}

.datos{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; font-size:.85rem; margin:10px 0}
.datos > div span{display:block; font-size:.7rem; color:var(--suave); text-transform:uppercase; letter-spacing:.05em}
.match{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.pill{font-size:.76rem; padding:4px 10px; border-radius:99px; background:var(--bg); border:1px solid var(--linea); color:var(--suave)}
.pill.ok{color:var(--ok); border-color:var(--ok)}
.pill.duda{color:var(--duda); border-color:var(--duda)}
.pill.mini{font-size:.68rem}
.motivos{margin:8px 0; padding-left:1.1rem; font-size:.84rem; color:var(--mal)}
.motivos li{margin:.15rem 0}
.nota{margin:10px 0; font-size:.85rem}
.nota summary{cursor:pointer; color:var(--suave)}
.nota textarea{margin:8px 0; min-height:70px}
.resultado-acc{margin-top:10px; padding:11px 13px; border-radius:11px; font-size:.86rem; background:var(--bg); border:1px solid var(--linea)}
.resultado-acc.ok{border-color:var(--ok)}
.resultado-acc.mal{border-color:var(--mal); color:var(--mal)}
.resultado-acc .msg{background:var(--card); border:1px dashed var(--linea); padding:9px; border-radius:9px; margin:8px 0; font-size:.82rem}

.cargando-box,.vacio{
  text-align:center; color:var(--suave); padding:40px 16px; background:var(--card);
  border:1px dashed var(--linea); border-radius:var(--r); grid-column:1/-1;
}
.vacio span{display:block; font-size:2rem; margin-bottom:6px}
.paginador{display:flex; justify-content:center; align-items:center; gap:12px; padding:18px; font-size:.88rem; color:var(--suave)}
.paginador button{padding:8px 14px; border-radius:99px; border:1px solid var(--linea); background:var(--card); color:var(--tinta); cursor:pointer; font:inherit}
.paginador button:disabled{opacity:.4; cursor:default}

.tabla-wrap{grid-column:1/-1; overflow-x:auto}
.tabla{width:100%; border-collapse:collapse; font-size:.85rem; min-width:640px}
.tabla th,.tabla td{text-align:left; padding:9px 8px; border-bottom:1px solid var(--linea); vertical-align:top}
.tabla th{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--suave)}

.visor{position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:60; display:flex; align-items:center; justify-content:center; padding:20px}
.visor img{max-width:100%; max-height:100%; border-radius:10px}
.visor .cerrar{position:absolute; top:14px; right:16px; background:transparent; border:0; color:#fff; font-size:1.6rem; cursor:pointer}

/* ── alertas y vínculos ───────────────────────────────────── */
.alertona{
  max-width:1100px; margin:10px auto 0; padding:12px 16px;
  background:color-mix(in srgb, var(--mal) 14%, transparent);
  border:1px solid var(--mal); border-radius:12px; font-size:.9rem;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.alertona .btn{width:auto; margin-left:auto}

.vinculos{
  margin:10px 0; padding:10px 12px; border-radius:12px;
  background:var(--bg); border:1px solid var(--linea);
}
.vinculos.grave{border-color:var(--mal); background:color-mix(in srgb, var(--mal) 8%, transparent)}
.vinculos > b{display:block; font-size:.86rem; margin-bottom:8px}
.vinculos.grave > b{color:var(--mal)}
.vinc{display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--linea); font-size:.85rem}
.vinc:first-of-type{border-top:0}
.vinc .ico{font-size:1.2rem; flex:0 0 auto}
.vinc > div{flex:1; min-width:0}
.vinc small{display:block; color:var(--suave); font-size:.76rem}
.vinc .btn{flex:0 0 auto}

.clan{
  border:1px solid var(--linea); border-radius:14px; padding:12px; margin:12px 0; background:var(--bg);
}
.clan.grave{border-color:var(--mal); background:color-mix(in srgb, var(--mal) 7%, transparent)}
.clan-cab{display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:.88rem; gap:8px}
.clan.grave .clan-cab{color:var(--mal)}
.clan-cab span{font-weight:400; font-size:.76rem; color:var(--suave)}
.lazos{display:flex; flex-wrap:wrap; gap:5px; margin:8px 0}

pre.detalle{
  background:var(--bg); border:1px solid var(--linea); border-radius:10px; padding:10px 12px;
  font-size:.8rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; margin:8px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--tinta);
}

/* el panel de ajustes usa el ancho completo de la grilla */
#lista > .card{grid-column:1/-1}
#lista > .acciones,#lista > .resultado-acc{grid-column:1/-1}