/* Checador · reloj de pared de oficina: cifras grandes, tinta, un solo verde para "entrada". */
/* Anclaje: la tarjeta de cartón del reloj checador. Papel crema, tinta verde, la hora estampada.
   Un solo gesto: al marcar, la hora cae como sello en la tarjeta. */
:root{
  --bg:#F6F4EE; --surface:#FFFFFF; --sunk:#EEEBE2; --ink:#13201A; --muted:#5E6B63; --line:#DDD8CC;
  --brand:#0B6B45; --brand-h:#08573A; --brand-soft:#E2F0E8; --on-brand:#FFFFFF;
  --in:var(--brand); --on-in:var(--on-brand); --out:#13201A; --on-out:#F6F4EE;
  --warn:#9A5B00; --bad:#B42318; --ok:#0B6B45; --info:#2B59C3;
  --r:12px;
  --f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --f-marca:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-sello:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1411; --surface:#141D18; --sunk:#1B2620; --ink:#E8EFEA; --muted:#9AABA1; --line:#26332C;
  --brand:#3CC584; --brand-h:#5ED69B; --brand-soft:#16301F; --on-brand:#04130B; --out:#E8EFEA; --on-out:#0D1411;
  --warn:#F0B44C; --bad:#F47167; --ok:#3CC584; --info:#7EA2F5; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D1411; --surface:#141D18; --sunk:#1B2620; --ink:#E8EFEA; --muted:#9AABA1; --line:#26332C;
  --brand:#3CC584; --brand-h:#5ED69B; --brand-soft:#16301F; --on-brand:#04130B; --out:#E8EFEA; --on-out:#0D1411;
  --warn:#F0B44C; --bad:#F47167; --ok:#3CC584; --info:#7EA2F5; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.wrap{max-width:1040px;margin-inline:auto;padding-inline:16px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13px}
.label{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{margin:0;text-wrap:balance}
h2{font-family:var(--f-marca);font-size:20px;font-weight:700;letter-spacing:-.02em}
h3{font-size:15px}
a{color:inherit}

/* Barra superior */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand strong{font-family:var(--f-marca);font-size:18px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.15}
.brand strong em{font-style:normal;color:var(--brand)}
.brand span{font-size:12.5px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usr{display:flex;align-items:center;gap:8px}
.tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;border-radius:8px;padding:7px 12px;font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap}
.tabs button:hover{color:var(--ink);background:var(--sunk)}
.tabs button[aria-selected="true"]{background:var(--brand);color:var(--on-brand)}
.tabs .badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:99px;background:var(--bad);color:#fff;font-size:11.5px;line-height:18px;text-align:center}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 14px;font-weight:600;font-size:14px;text-decoration:none;min-height:40px}
.btn{transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.pri{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.btn.pri:hover{background:var(--brand-h);border-color:var(--brand-h);color:var(--on-brand)}
.btn.in{background:var(--in);color:var(--on-in);border-color:var(--in)}
.btn.in:hover{background:var(--brand-h);border-color:var(--brand-h);color:var(--on-brand)}
.btn.bad{color:var(--bad)}
.btn.bad:hover{border-color:var(--bad);color:var(--bad)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{min-height:32px;padding:5px 10px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sp{flex:1}

/* Tarjetas y listas */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.stack>*+*{margin-top:12px}
.sec{padding-block:20px 40px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);border-color:color-mix(in srgb,currentColor 40%,transparent)}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb,currentColor 40%,transparent)}
.pill.bad{color:var(--bad);border-color:color-mix(in srgb,currentColor 40%,transparent)}
.pill.info{color:var(--info);border-color:color-mix(in srgb,currentColor 40%,transparent)}
.pill.plain::before{display:none}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.kpi b{display:block;font-family:var(--f-marca);font-size:26px;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}

/* Tablero del día */
.gente{display:grid;gap:8px}
.per{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.7fr)) auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-align:left;width:100%}
.per:hover{border-color:var(--brand)}
.per .nm b{display:block}
.per .nm span{font-size:12.5px;color:var(--muted)}
.per .v{font-variant-numeric:tabular-nums;font-weight:600}
.per .v small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.per .v small.warn{color:var(--warn)}
@media (max-width:640px){
  .per{grid-template-columns:1fr 1fr 1fr;row-gap:8px}
  .per .nm{grid-column:1 / -1;display:flex;justify-content:space-between;gap:8px;align-items:center}
  .per .st{display:none}
}
@media (min-width:641px){ .per .nm .pill{display:none} }

/* Pantalla del empleado */
.reloj{text-align:center;padding:28px 0 8px}
.reloj .h{font-family:var(--f-marca);font-size:clamp(56px,17vw,96px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.reloj .h small{font-size:.38em;font-weight:600;color:var(--muted);letter-spacing:-.01em;margin-left:4px}
.reloj .f{color:var(--muted);margin-top:6px}
.mi-hoy{max-width:460px;margin:16px auto 0}
.linea{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.linea:last-child{border-bottom:0}
.linea b{font-variant-numeric:tabular-nums}
.marcar{display:block;width:100%;max-width:460px;margin:18px auto 0;border:0;border-radius:18px;padding:22px 16px;font-size:20px;font-weight:700;letter-spacing:-.01em;min-height:72px}
.marcar{transition:background-color .15s,transform .1s}
.marcar:active{transform:scale(.985)}
.marcar.in{background:var(--in);color:var(--on-in)}
.marcar.in:hover{background:var(--brand-h)}
.marcar.out{background:var(--out);color:var(--on-out)}
.marcar small{display:block;font-size:13px;font-weight:500;opacity:.8;margin-top:2px}
.dias{max-width:460px;margin:28px auto 0}
.dia{display:grid;grid-template-columns:88px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center;font-size:14px}
.dia .d{color:var(--muted)}

/* Hoja (diálogo inferior en móvil, centrado en escritorio) */
.velo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.hoja{position:fixed;z-index:41;left:0;right:0;bottom:0;max-height:92vh;overflow:auto;background:var(--surface);border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.2)}
@media (min-width:700px){.hoja{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:560px;border-radius:18px;max-height:88vh}}
.hoja-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.x{border:0;background:var(--sunk);border-radius:50%;width:32px;height:32px;font-size:18px;line-height:1;flex:none}
.cam{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:3/4;max-height:56vh;margin:0 auto}
.cam video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam .guia{position:absolute;inset:14% 18%;border:2px dashed rgba(255,255,255,.55);border-radius:50%}
.ok-grande{text-align:center;padding:18px 0 8px}


.ok-grande b{display:block;font-size:40px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.spin{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:g 0.8s linear infinite;margin:0 auto}
@keyframes g{to{transform:rotate(360deg)}}

/* Formularios */
.f{display:grid;gap:12px}
.fld{display:grid;gap:4px}
.fld>span{font-size:13px;font-weight:600}
.fld small{color:var(--muted);font-size:12.5px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],select,textarea{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 12px;min-height:42px}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--info);outline-offset:0;border-color:transparent}
.err{color:var(--bad);font-size:13px;font-weight:600}
.fld.mal input,.fld.mal select,.fld.mal textarea{border-color:var(--bad)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hor{display:grid;gap:6px}
.hor-r{display:grid;grid-template-columns:96px 1fr 1fr;gap:8px;align-items:center}
.hor-r label{display:flex;gap:8px;align-items:center;font-weight:600;font-size:14px}
.hor-r input[type=time]{min-height:38px;padding:6px 8px}
.hor-r input:disabled{opacity:.35}

/* Tablas */
.tbl-w{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;background:var(--sunk)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
tr.clic{cursor:pointer}
tr.clic:hover td{background:var(--sunk)}
.warn-t{color:var(--warn);font-weight:600}
.bad-t{color:var(--bad);font-weight:600}
.ok-t{color:var(--ok);font-weight:600}

.marca{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.marca:last-child{border-bottom:0}
.marca .ft{width:64px;height:64px;border-radius:10px;background:var(--sunk);object-fit:cover;display:grid;place-items:center;font-size:11px;color:var(--muted);text-align:center;border:0;padding:0;overflow:hidden}
.marca .ft img{width:100%;height:100%;object-fit:cover}
.anulada{opacity:.5;text-decoration:line-through}

.login{max-width:380px;margin:9vh auto 0}
.login .logo{display:block;margin-bottom:18px}
.login h1{font-family:var(--f-marca);font-weight:800}
.login h1 em{font-style:normal;color:var(--brand)}
.aviso{max-width:560px;margin:24px auto}
.aviso p,.aviso li{font-size:14.5px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;z-index:60;max-width:calc(100% - 32px)}
.foto-g{width:100%;border-radius:12px;display:block}
.menu{position:relative}

/* El sello: la hora marcada como en la tarjeta del checador */
.tarjeta{position:relative;max-width:300px;margin:4px auto 10px;border:1.5px solid var(--line);border-radius:6px;background:var(--bg);padding:12px 14px 14px;text-align:center}
.tarjeta .col{font-family:var(--f-sello);font-size:11px;letter-spacing:.18em;color:var(--muted);border-bottom:1px dashed var(--line);padding-bottom:6px;margin-bottom:10px}
.sello{display:inline-block;font-family:var(--f-sello);font-size:34px;line-height:1.1;color:var(--brand);transform:rotate(-2.5deg);padding:2px 10px;border:2px solid currentColor;border-radius:4px;animation:sello .32s cubic-bezier(.2,1.6,.4,1) both}
.sello.warn{color:var(--warn)}
@keyframes sello{from{transform:rotate(-8deg) scale(1.35);opacity:0}to{transform:rotate(-2.5deg) scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.sello{animation:none}.marcar,.btn{transition:none}}
.credito{padding:28px 16px 32px;text-align:center;font-size:12.5px}
.credito a{color:var(--muted);text-decoration:none;opacity:.72;transition:opacity .15s,color .15s}
.credito a:hover{opacity:1;color:var(--brand)}