/* MayaCom Horas - estilos (celular primero) */
:root{--bg:#F4F6F5;--ink:#1f2a29;--mut:#6b7775;--acc:#0F5F58;--acc2:#0d4f49;--in:#1E7F4F;--out:#B3541E;--line:#E1E7E5;}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%;}
[hidden]{display:none!important;}
main{padding:14px 14px calc(28px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto;}
button{font-family:inherit;}

/* ingreso */
.h-login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;}
.h-lcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 22px;max-width:380px;width:100%;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.06);}
.h-lcard img{border-radius:18px;}
.h-lcard h1{font-size:23px;margin:12px 0 6px;}
.h-lcard p{font-size:15px;color:#4c5856;margin:0 0 22px;line-height:1.4;}
.h-lcard small{display:block;font-size:12px;color:var(--mut);margin-top:20px;line-height:1.45;}
.h-gbtn{display:flex;justify-content:center;min-height:44px;}
.h-lmsg{font-size:14px;color:#A12A1C;margin-top:12px;min-height:1em;line-height:1.35;}
.h-lmsg.ok{color:#4c5856;}
.h-demo{background:#fff;border:1px solid #DADCE0;border-radius:22px;padding:11px 22px;font-size:15px;font-weight:600;color:#3c4043;cursor:pointer;}

/* barra superior */
.h-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:6px;background:var(--acc);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 10px 10px 16px;}
.h-ttl{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15;}
.h-ttl b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h-ttl span{font-size:12px;color:#cfe5e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h-ib{width:42px;height:42px;border:0;border-radius:21px;background:transparent;color:#fff;font-size:22px;cursor:pointer;}
.h-ib:active{background:rgba(255,255,255,.14);}
.h-ib.gira{animation:hGira .8s linear infinite;}
@keyframes hGira{to{transform:rotate(360deg);}}
.h-drop{position:fixed;right:10px;top:calc(60px + env(safe-area-inset-top));z-index:60;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);min-width:230px;}
.h-drop .who{display:flex;flex-direction:column;margin-bottom:12px;font-size:14px;}
.h-drop .who span{font-size:12px;color:var(--mut);}
.h-drop .h-b{width:100%;}
.h-off{background:#9A6400;color:#fff;font-size:13px;text-align:center;padding:8px 12px;}

/* tarjetas */
.h-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,.03);}
.h-hero{text-align:center;padding:20px 16px;}
.h-est{display:flex;flex-direction:column;gap:2px;margin-bottom:16px;}
.h-est small{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);}
.h-est b{font-size:26px;}
.h-est span{font-size:14px;color:var(--mut);}
.h-est.in b{color:var(--in);}
.h-est.out b{color:var(--out);}
.h-big{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:64px;border:0;border-radius:16px;background:var(--acc);color:#fff;font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(15,95,88,.28);}
.h-big:active{background:var(--acc2);transform:translateY(1px);}
.h-big[disabled]{opacity:.55;}
.h-hint{font-size:13px;color:var(--mut);margin-top:10px;}
.h-h2{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:20px 4px 8px;}
.h-vacio{color:var(--mut);text-align:center;font-size:14px;}
.h-dia{padding:12px 14px;}
.h-dh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.h-dh b{font-size:15px;}
.h-hs{margin-left:auto;font-size:14px;font-weight:600;color:var(--acc);}
.h-tag{font-size:11px;background:#EEF2F1;color:#4c5856;border-radius:10px;padding:2px 8px;}
.h-ml{display:flex;flex-direction:column;}
.h-m{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;padding:7px 0;border-top:1px solid #F0F3F2;font-size:14px;}
.h-m:first-child{border-top:0;}
.h-m i{width:9px;height:9px;border-radius:50%;flex:0 0 9px;align-self:center;}
.h-m i.in{background:var(--in);}
.h-m i.out{background:var(--out);}
.h-m b{font-size:15px;min-width:44px;}
.h-m span{color:#4c5856;}
.h-m em{font-style:normal;font-size:11px;background:#EEF2F1;border-radius:10px;padding:1px 7px;color:#4c5856;}
.h-m small{flex:1 1 100%;font-size:12px;color:#8a5a00;padding-left:17px;}
.h-m.anul b,.h-m.anul span{text-decoration:line-through;color:#9aa5a3;}
.h-pie{font-size:12px;color:var(--mut);text-align:center;margin:16px 8px;line-height:1.45;}

/* confirmar */
.h-conf{text-align:center;padding:20px 16px;}
.h-cloc{display:flex;flex-direction:column;gap:2px;margin-bottom:18px;}
.h-cloc small{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);}
.h-cloc b{font-size:24px;}
.h-cloc span{font-size:14px;color:var(--mut);}
.h-tipos{display:flex;gap:10px;margin-bottom:14px;}
.h-tipo{flex:1;display:flex;flex-direction:column;gap:4px;padding:16px 8px;border:2px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;color:var(--ink);}
.h-tipo b{font-size:20px;}
.h-tipo span{font-size:12px;color:var(--mut);}
.h-tipo.in.on{border-color:var(--in);background:#EAF6EF;}
.h-tipo.in.on b{color:var(--in);}
.h-tipo.out.on{border-color:var(--out);background:#FBEFE7;}
.h-tipo.out.on b{color:var(--out);}
.h-gps{font-size:13px;margin-bottom:16px;color:var(--mut);}
.h-gps .ok{color:var(--in);}
.h-gps .wa{color:#8a5a00;}
.h-vence{font-size:13px;color:var(--mut);margin:12px 0 4px;min-height:18px;}
.h-vence a{color:var(--acc);font-weight:600;}
.h-b{min-height:46px;padding:11px 18px;border:1px solid #cdd6d4;border-radius:12px;background:#fff;font-size:15px;color:var(--ink);cursor:pointer;}
.h-full{width:100%;margin-top:6px;}

/* resultado */
.h-res{text-align:center;padding:28px 18px;}
.h-ok{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:46px;color:#fff;background:var(--in);animation:hPop .35s ease-out;}
.h-res.out .h-ok{background:var(--out);}
@keyframes hPop{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}
.h-res>b{font-size:22px;display:block;}
.h-rh{font-size:48px;font-weight:700;margin:6px 0 2px;letter-spacing:.02em;}
.h-res>span{display:block;font-size:15px;color:var(--mut);margin-bottom:18px;}
.h-ral{background:#FFF7E6;border:1px solid #F5D9A0;color:#7a4f00;border-radius:12px;padding:10px 12px;font-size:14px;margin-bottom:16px;text-align:left;}
.h-ral small{display:block;font-size:12px;color:#8a6a2a;margin-top:4px;}

/* camara */
.h-cam{position:fixed;inset:0;z-index:100;background:#000;}
.h-cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.h-mira{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.h-mira i{width:min(72vw,72vh,340px);height:min(72vw,72vh,340px);border-radius:22px;box-shadow:0 0 0 9999px rgba(0,0,0,.45);border:3px solid rgba(255,255,255,.9);}
.h-camtop{position:absolute;left:0;right:0;top:0;padding:calc(18px + env(safe-area-inset-top)) 18px 14px;color:#fff;text-align:center;display:flex;flex-direction:column;gap:6px;}
.h-camtop b{font-size:18px;}
.h-camtop span{font-size:14px;color:#e6efed;line-height:1.35;}
.h-cambot{position:absolute;left:0;right:0;bottom:0;padding:14px 18px calc(22px + env(safe-area-inset-bottom));display:flex;gap:10px;justify-content:center;}
.h-cambot .h-b{min-width:140px;background:rgba(255,255,255,.95);}

/* aviso */
.h-toast{position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:200;background:#1f2a29;color:#fff;border-radius:12px;padding:12px 14px;font-size:14px;text-align:center;display:none;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.h-toast.err{background:#A12A1C;}
.h-toast.warn{background:#8a5a00;}