/* Benefits Track Web — mismos tokens que la app nativa (theme.ts) */
:root {
  --accent:#4C8A3F; --accent-deep:#375F2C; --accent-soft:rgba(76,138,63,.10);
  --accent-off:#C7D8C0; --page:#F6F8F3; --card:#FFF; --soft:#EFF3EA;
  --border:#E2E7DD; --text:#25382C; --muted:#5C6B5F; --subtle:#96A199;
  --ring:rgba(76,138,63,.18); --danger:#A4243B; --amber:#E0A526;
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-pill:9999px;
  --mono:'Space Mono',ui-monospace,Menlo,monospace;
  --body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--page);color:var(--text);font-family:var(--body);
  -webkit-font-smoothing:antialiased;font-size:16px}
/* Evita el zoom automático de iOS al enfocar un input: pasa con fuentes <16px */
input,textarea,select,button{font-family:inherit;font-size:16px}
.wrap{max-width:560px;margin:0 auto;padding:0 20px 120px}
.hide{display:none!important}

.header{padding:40px 0 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.96px;text-transform:uppercase;color:var(--subtle)}
.title{font-family:var(--mono);font-weight:700;font-size:28px;line-height:1.1;letter-spacing:-.28px;margin:4px 0 0}

.field{display:flex;flex-direction:column;gap:6px;width:100%;margin-bottom:18px}
.label{display:flex;align-items:baseline;gap:6px;font-size:12px;font-weight:600;
  letter-spacing:.72px;text-transform:uppercase;color:var(--muted)}
.opt{font-size:11px;color:var(--subtle);text-transform:none;letter-spacing:0}
.hint{font-size:12px;color:var(--subtle)}
.err{font-size:12px;color:var(--danger)}

input[type=text],input[type=date],input[type=number],input[type=password],select,textarea{
  width:100%;border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);
  color:var(--text);padding:0 14px;height:52px;outline:none;transition:border-color .12s,box-shadow .12s}
textarea{height:auto;min-height:100px;padding:14px;line-height:1.5;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
::placeholder{color:var(--subtle)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:14px;display:inline-flex;align-items:center;
  gap:7px;cursor:pointer;transition:background .12s,border-color .12s}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

.btn{height:52px;width:100%;border:none;border-radius:var(--r-md);background:var(--accent);color:#fff;
  font-weight:600;font-size:14px;letter-spacing:.56px;text-transform:uppercase;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,background .12s}
.btn:active{transform:scale(.98);background:var(--accent-deep)}
.btn[disabled]{background:var(--accent-off);cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.sinben{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--card);cursor:pointer;margin-bottom:18px}
.sinben[aria-pressed=true]{background:var(--text);border-color:var(--text);color:#fff}
.sinben .t{font-size:14px;font-weight:600}
.sinben .s{font-size:12px;color:var(--subtle);margin-top:2px}
.sinben[aria-pressed=true] .s{color:rgba(255,255,255,.72)}
.sw{width:44px;height:26px;border-radius:var(--r-pill);background:var(--soft);border:1px solid var(--border);
  flex:0 0 auto;display:flex;align-items:center;padding:0 3px}
.sinben[aria-pressed=true] .sw{background:var(--accent);border-color:var(--accent);justify-content:flex-end}
.sw i{width:18px;height:18px;border-radius:50%;background:#fff;display:block}

.row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);
  cursor:pointer;text-align:left;width:100%;background:none;border-left:0;border-right:0;border-top:0}
.row:last-child{border-bottom:none}
.row .n{font-size:15px;font-weight:600}
.row .f{font-size:12px;font-weight:600;color:var(--accent);margin-top:2px}
.row .d{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.fotos{display:flex;flex-wrap:wrap;gap:8px}
.foto{position:relative;width:84px;height:84px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--border);background:var(--soft)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  background:var(--text);color:#fff;border:2px solid var(--page);cursor:pointer;line-height:1;padding:0}
.addfoto{width:84px;height:84px;border-radius:var(--r-sm);border:1.5px dashed var(--border);
  background:var(--card);cursor:pointer;font-size:22px;color:var(--accent)}
.dash{width:100%;min-height:88px;border:1.5px dashed var(--border);border-radius:var(--r-md);
  background:var(--card);cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;padding:16px;color:var(--accent);font-weight:600;font-size:14px}
.dash small{color:var(--subtle);font-weight:400}

.geo{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--accent-soft);
  border:1px solid var(--border);border-radius:var(--r-md);font-size:12px}
.geo .c{font-family:var(--mono);font-size:11px;color:var(--muted)}

.toast{position:fixed;left:20px;right:20px;bottom:20px;max-width:520px;margin:0 auto;padding:14px 16px;
  border-radius:var(--r-md);background:var(--text);color:#fff;font-size:14px;z-index:50;
  box-shadow:0 8px 24px rgba(37,56,44,.2)}
.toast.err{background:var(--danger)}
.aviso{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-md);font-size:13px;line-height:1.45;
  border:1px solid var(--amber);background:rgba(224,165,38,.08);margin-bottom:18px}
.aviso.dup{border-color:var(--amber)}
.ok{width:96px;height:96px;border-radius:50%;background:var(--accent);margin:0 auto 28px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;
  animation:pop .4s cubic-bezier(.2,0,0,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.center{text-align:center}
.mono{font-family:var(--mono)}
.sub{font-size:13px;color:var(--muted)}

/* ─── Ficha por banco: añadidos de benefitstrack2 ───────────────────────── */
.bloque{margin:28px 0 8px}
.bloque h2{font-family:var(--mono);font-size:18px;margin:0 0 4px;letter-spacing:-.2px}
.bloque .s{font-size:12px;color:var(--subtle);margin:0 0 14px}

.banco{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:14px;margin-bottom:10px}
.banco.resuelto{border-color:var(--accent-off)}
.banco .nom{font-size:15px;font-weight:600;margin-bottom:10px}

/* Tri-estado SI/NO/NC: tres botones del mismo ancho, pulgar cómodo */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tri button{min-height:46px;border:1px solid var(--border);background:var(--card);
  border-radius:var(--r-md);font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;
  transition:background .12s,border-color .12s,color .12s}
.tri button[aria-pressed=true][data-v=si]{background:var(--accent);border-color:var(--accent);color:#fff}
.tri button[aria-pressed=true][data-v=no]{background:var(--text);border-color:var(--text);color:#fff}
.tri button[aria-pressed=true][data-v=nc]{background:var(--subtle);border-color:var(--subtle);color:#fff}

.detalle-si{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.detalle-si .label{margin-bottom:6px}
.detalle-si textarea{min-height:70px}
.mini{display:flex;flex-wrap:wrap;gap:6px}
.mini button{min-height:38px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--border);
  background:var(--card);font-size:13px;color:var(--text);cursor:pointer}
.mini button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

.barra-nc{position:sticky;top:0;z-index:10;background:var(--page);padding:10px 0 12px;
  margin-bottom:4px;border-bottom:1px solid var(--border)}
.btn.nc{background:var(--subtle);height:46px}
.btn.nc:active{background:var(--muted)}
.progreso{font-size:12px;color:var(--subtle);text-align:center;margin-top:6px}

/* ─── Ojo para revelar la clave ──────────────────────────────────────────── */
.conclave{position:relative}
/* Hueco a la derecha para que el texto no quede debajo del botón */
.conclave input{padding-right:54px}
.ojo{position:absolute;right:2px;top:0;height:52px;width:50px;padding:0;border:0;
  background:none;color:var(--subtle);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.ojo:hover{color:var(--muted)}
.ojo[aria-pressed=true]{color:var(--accent)}
.ojo svg{width:22px;height:22px;display:block}