:root{
  --verde:#00563e; --verde-hondo:#003f2d; --verde-linea:#1c6d55; --lima:#9dc41a; --lima-hondo:#86a915;
  --blanco:#ffffff; --negro:#111111; --gris:#5e615f; --gris-claro:#e7e9e8; --papel:#f6f7f6;
  --rojo:#ff8f7a; --rojo-papel:#b3261e; --ok-papel:#1d6b3a;
  --titulo:"Archivo Black","Arial Black",Impact,sans-serif;
  --texto:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tab-h:66px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0}
body{background:var(--verde);color:var(--blanco);font:400 16px/1.5 var(--texto);-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,.titulo{font-family:var(--titulo);font-weight:400;color:var(--lima);line-height:1.08;margin:0;letter-spacing:.005em}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--lima);outline-offset:2px}
.sheet :focus-visible{outline-color:var(--verde)}
[hidden]{display:none!important}

/* ---------- Estructura ---------- */
.topbar{position:sticky;top:0;z-index:20;background:var(--verde);border-bottom:1px solid var(--verde-linea);padding-top:env(safe-area-inset-top,0px);margin-top:calc(-1 * env(safe-area-inset-top,0px))}
.topbar .in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px}
.topbar .logo{height:34px;width:auto}
.topbar .who{margin-left:auto;font-size:14px;opacity:.85;text-align:right;line-height:1.25}
.main{max-width:1080px;margin:0 auto;padding:20px 18px calc(var(--tab-h) + 32px + env(safe-area-inset-bottom,0px))}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--verde-hondo);border-top:1px solid var(--verde-linea);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs button{flex:1;background:none;border:0;color:var(--blanco);opacity:.7;height:var(--tab-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12.5px;font-weight:600;cursor:pointer;position:relative}
.tabs button svg{width:24px;height:24px}
.tabs button[aria-current="page"]{opacity:1;color:var(--lima)}
.tabs .badge{position:absolute;top:8px;left:calc(50% + 6px);background:var(--lima);color:var(--verde-hondo);font-size:11px;font-weight:800;border-radius:99px;padding:1px 6px;min-width:18px}
@media (min-width:900px){
  .tabs{position:static;background:none;border:0;padding:0;gap:4px;margin-left:18px}
  .tabs button{flex:none;flex-direction:row;height:40px;padding:0 14px;border-radius:99px;font-size:15px;gap:8px}
  .tabs button svg{width:18px;height:18px}
  .tabs button[aria-current="page"]{background:var(--lima);color:var(--verde-hondo)}
  .tabs .badge{position:static;background:var(--verde-hondo);color:var(--lima)}
  .tabs button[aria-current="page"] .badge{background:var(--verde);color:var(--blanco)}
  .main{padding-bottom:48px}
}

/* ---------- Botones y campos ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:13px 20px;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;background:var(--lima);color:var(--verde-hondo);min-height:48px}
.btn:active{transform:translateY(1px)}
.btn.blanco{background:var(--blanco);color:var(--negro)}
.btn.linea{background:transparent;color:var(--blanco);border:1.5px solid rgba(255,255,255,.55)}
.btn.xl{width:100%;font-size:19px;padding:18px;min-height:62px;border-radius:16px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.sheet .btn.linea{color:var(--negro);border-color:#c9ccca}
.btn.oscuro{background:var(--negro);color:var(--blanco)}
.btn.verde{background:var(--verde);color:var(--blanco)}
.btn.peligro{background:transparent;color:var(--rojo-papel);border:1.5px solid var(--rojo-papel)}
.btn.chico{min-height:38px;padding:8px 14px;font-size:14px;border-radius:10px}

.field{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;min-width:0}
.field input,.field select,.field textarea{border:1.5px solid rgba(255,255,255,.4);background:rgba(0,0,0,.14);border-radius:12px;padding:12px 13px;font-size:16px;font-weight:400;width:100%;color:var(--blanco)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.55)}
.sheet .field{color:var(--gris)}
.sheet .field input,.sheet .field select,.sheet .field textarea{background:var(--blanco);border-color:#cfd3d1;color:var(--negro)}
.sheet .field input::placeholder,.sheet .field textarea::placeholder{color:#9a9e9c}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{opacity:.75}
.small{font-size:14px}

/* ---------- Apartado sobrio (blanco / negro) ---------- */
.sheet{background:var(--blanco);color:var(--negro);border-radius:18px;padding:20px}
.sheet h2,.sheet h3{color:var(--negro)}
.sheet .muted{color:var(--gris);opacity:1}
.sheet + .sheet{margin-top:14px}
.sheet hr{border:0;border-top:1px solid var(--gris-claro);margin:18px 0}

/* ---------- Pantalla de escaneo ---------- */
.scan-hero{display:grid;gap:16px}
@media (min-width:900px){.scan-hero{grid-template-columns:360px 1fr;align-items:start}}
.scan-hero h1{font-size:clamp(30px,8vw,44px)}
.cam{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:1}
.cam video{width:100%;height:100%;object-fit:cover}
.cam .frame{position:absolute;inset:16%;border:3px solid var(--lima);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.or{display:flex;align-items:center;gap:10px;font-size:14px;opacity:.7}
.or::before,.or::after{content:"";flex:1;border-top:1px solid rgba(255,255,255,.35)}

.marcador{border:2px solid var(--lima);border-radius:20px;padding:22px;position:relative;overflow:hidden}
.marcador .nombre{font-family:var(--titulo);font-size:clamp(22px,6vw,30px);color:var(--blanco);line-height:1.1}
.marcador .code{font-size:14px;opacity:.8;margin-top:4px}
.horas{display:flex;align-items:baseline;gap:10px;margin:18px 0 2px}
.horas .n{font-family:var(--titulo);font-size:clamp(88px,26vw,140px);line-height:.82;color:var(--lima)}
.horas .u{font-weight:700;font-size:18px}
.marcador.bajo .horas .n{color:var(--rojo)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:46px;padding:0 18px;border-radius:99px;border:1.5px solid rgba(255,255,255,.6);background:none;color:var(--blanco);font-weight:700;font-size:16px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--blanco);color:var(--verde-hondo);border-color:var(--blanco)}
.chip.otra{display:inline-flex;align-items:center;gap:4px;padding:0 12px}
.chip.otra input{width:62px;background:none;border:0;color:inherit;font-weight:700;font-size:16px;padding:6px 0}
.chip.otra input::placeholder{color:inherit;opacity:.7}
.aviso{border-radius:12px;padding:12px 14px;margin-top:12px;font-weight:600}
.aviso.ok{background:var(--lima);color:var(--verde-hondo)}
.aviso.err{background:#ffe3dd;color:var(--rojo-papel)}

/* ---------- Lista de clientes ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{border:1.5px solid var(--verde-linea);border-radius:16px;padding:14px}
.stat b{display:block;font-family:var(--titulo);font-weight:400;font-size:30px;color:var(--lima);line-height:1}
.stat span{font-size:13.5px;opacity:.85}
.search{position:relative}
.list{list-style:none;margin:12px 0 0;padding:0}
.list li{border-top:1px solid var(--gris-claro)}
.list li:first-child{border-top:0}
.list button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;padding:14px 4px;cursor:pointer}
.list button:focus-visible{outline:3px solid var(--verde);border-radius:8px}
.list .n{font-weight:700}
.list .s{font-size:13.5px;color:var(--gris)}
.list .h{grid-row:1/3;grid-column:2;align-self:center;text-align:right;font-family:var(--titulo);font-size:24px;line-height:1}
.list .h small{display:block;font-family:var(--texto);font-size:12px;color:var(--gris);font-weight:600}
.list .h.bajo{color:var(--rojo-papel)}
.list .inactivo{opacity:.45}
.empty{padding:26px 6px;text-align:center;color:var(--gris)}

/* ---------- Detalle ---------- */
.back{background:none;border:0;color:var(--blanco);font-weight:700;padding:6px 0;margin-bottom:10px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.detalle{display:grid;gap:14px}
@media (min-width:900px){.detalle{grid-template-columns:380px 1fr;align-items:start}}
.mov{list-style:none;margin:0;padding:0}
.mov li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:11px 0;border-top:1px solid var(--gris-claro);font-size:15px}
.mov li:first-child{border-top:0}
.mov .t{font-weight:600}
.mov .d{font-size:13px;color:var(--gris)}
.mov .v{grid-row:1/3;grid-column:2;align-self:center;font-weight:800}
.mov .v.mas{color:var(--ok-papel)} .mov .v.menos{color:var(--rojo-papel)}
.mov li.anulado{opacity:.45;text-decoration:line-through}
.mov .x{background:none;border:0;color:var(--gris);font-size:13px;text-decoration:underline;cursor:pointer;padding:0;justify-self:start}

/* ---------- Tarjeta digital ---------- */
.tarjeta{background:var(--blanco);color:var(--negro);border-radius:20px;padding:20px;display:grid;gap:14px;box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.tarjeta .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tarjeta .top img{height:40px;width:auto}
.tarjeta .qr{background:var(--blanco);width:100%;max-width:230px;margin:0 auto;aspect-ratio:1}
.tarjeta .qr svg{width:100%;height:100%;display:block}
.tarjeta .pie{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;border-top:2px solid var(--negro);padding-top:12px}
.tarjeta .pie .nm{font-family:var(--titulo);font-size:20px;line-height:1.1}
.tarjeta .pie .cd{font-size:14px;color:var(--gris);font-weight:600}
.tarjeta .pie .hh{font-family:var(--titulo);font-size:34px;line-height:1;color:var(--verde);text-align:right}
.tarjeta .pie .hh small{display:block;font-family:var(--texto);font-size:12px;color:var(--gris);font-weight:600}

/* ---------- Diálogos ---------- */
dialog{border:0;border-radius:20px;padding:0;width:min(520px,94vw);max-height:90vh;background:var(--blanco);color:var(--negro)}
dialog::backdrop{background:rgba(0,25,18,.6)}
dialog .in{padding:22px;display:grid;gap:14px}
dialog h3{font-size:24px;color:var(--negro)}
@media (max-width:560px){
  dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login .box{width:min(420px,100%);display:grid;gap:18px}
.login .box img{width:100%;max-width:340px;margin:0 auto 10px}

.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--negro);color:var(--blanco);padding:12px 18px;border-radius:12px;font-weight:600;z-index:60;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,.35)}
@media (min-width:900px){.toast{bottom:28px}}
@media (prefers-reduced-motion:no-preference){
  .entra{animation:entra .3s ease-out}
  @keyframes entra{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
}

.scan-hero>*,.detalle>*,.pub>*,.main>*{min-width:0}
.horas{flex-wrap:wrap}
.marcador .nombre,.tarjeta .nm{overflow-wrap:anywhere}
.check{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:14px;cursor:pointer}
.sheet .check{color:var(--negro)}
.logo-negro{display:block;aspect-ratio:900/216;background:#111;-webkit-mask:url(img/logo.png) center/contain no-repeat;mask:url(img/logo.png) center/contain no-repeat}
.tarjeta .top .logo-negro{height:40px}