/* Lab Recovery — sistema de controle.
 * Dois temas na mesma folha: body.cli (cliente, escuro, celular primeiro) e
 * body.gest (gestao, claro, balcao e mesa). As cores de marca sao as do
 * cardapio: quente, frio, dourado. */
:root{
  --ink:#0B1116; --ink-2:#121B22; --ink-3:#1A2630; --line:#233039;
  --bone:#EAF2F4; --mute:#8FA3AD;
  --cold:#5FD4E8; --hot:#FF6A3D; --gold:#F2C14E; --ok:#4CD97B; --bad:#FF5C5C;
  --radius:14px;
  /* gestao (claro) */
  --g-bg:#F1F5F7; --g-card:#FFFFFF; --g-line:#D8E4EA; --g-text:#1C2B36; --g-mute:#6B7D89;
  --g-azul:#0B1E2D; --g-azul2:#123449; --g-ciano:#1BA8BC;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Sora',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.anton{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.tempbar{height:5px;background:linear-gradient(90deg,var(--hot) 0 38%,var(--cold) 62% 100%)}
.logo{font-family:'Anton',sans-serif;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:6px;align-items:center}
.logo .lab{color:#ff3b2f}
.mute{color:var(--mute)} .small{font-size:.85rem} .tiny{font-size:.75rem}
.hot{color:var(--hot)} .cold{color:var(--cold)} .gold{color:var(--gold)} .ok{color:var(--ok)} .bad{color:var(--bad)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1}
.mt{margin-top:14px} .mt2{margin-top:24px} .mb{margin-bottom:14px}
.center{text-align:center}

/* ---------------------------------------------------------------- cliente */
body.cli{background:var(--ink);color:var(--bone)}
.cli .wrap{max-width:560px;margin:0 auto;padding:18px 18px 90px}
.cli header.topo{display:flex;justify-content:space-between;align-items:center;padding:8px 0 18px}
.cli header.topo .quem{font-size:.8rem;color:var(--mute)}
.cli h1{font-family:'Anton',sans-serif;font-weight:400;font-size:2rem;text-transform:uppercase;line-height:1;margin-bottom:6px}
.cli h2{font-family:'Anton',sans-serif;font-weight:400;font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em;margin:22px 0 10px;color:var(--mute)}
.cli .card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px}
.cli .card.hl{border-color:var(--cold)} .cli .card.warn{border-left:3px solid var(--hot)} .cli .card.gold{border-color:var(--gold)}
.cli .big{font-family:'Anton',sans-serif;font-size:2.2rem;line-height:1}
.cli label{display:block;font-size:.8rem;font-weight:600;color:var(--mute);margin:12px 0 5px;letter-spacing:.04em;text-transform:uppercase}
.cli input,.cli select,.cli textarea{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--bone);border-radius:10px;padding:12px 14px;font-size:1rem}
.cli input:focus,.cli select:focus,.cli textarea:focus{outline:2px solid var(--cold);border-color:transparent}
.cli textarea{min-height:90px;resize:vertical}
.cli .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:999px;border:1px solid transparent;font-weight:700;text-decoration:none;background:var(--bone);color:var(--ink);transition:transform .15s}
.cli .btn:hover{transform:translateY(-1px)} .cli .btn:disabled{opacity:.5;cursor:default;transform:none}
.cli .btn.block{width:100%} .cli .btn.cold{background:var(--cold)} .cli .btn.hot{background:var(--hot);color:#fff}
.cli .btn.ghost{background:transparent;border-color:var(--line);color:var(--bone)}
.cli .btn.sm{padding:8px 14px;font-size:.85rem}
.cli .tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--cold);color:var(--ink)}
.cli .tag.hot{background:var(--hot);color:#fff} .cli .tag.gold{background:var(--gold)} .cli .tag.grey{background:var(--line);color:var(--bone)} .cli .tag.ok{background:var(--ok);color:var(--ink)}
.cli .nav{position:fixed;left:0;right:0;bottom:0;background:var(--ink-2);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.cli .nav a{color:var(--mute);text-decoration:none;font-size:.68rem;text-align:center;display:flex;flex-direction:column;gap:2px;align-items:center;padding:4px 8px;min-width:60px}
.cli .nav a span{font-size:1.2rem} .cli .nav a.ativo{color:var(--cold)}
.cli .lista{display:flex;flex-direction:column;gap:8px}
.cli .item{display:flex;gap:12px;align-items:center;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.cli .item .hora{font-family:'Anton',sans-serif;font-size:1.4rem;min-width:64px}
.cli .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.cli .slot{padding:10px 6px;border-radius:10px;border:1px solid var(--line);background:var(--ink-2);text-align:center;font-weight:700;color:var(--bone)}
.cli .slot.livre:hover,.cli .slot.sel{border-color:var(--cold);background:rgba(95,212,232,.12)}
.cli .slot.cheio{opacity:.35;cursor:default;text-decoration:line-through}
.cli .dias{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.cli .dia{flex:0 0 auto;min-width:58px;padding:8px 6px;border-radius:10px;border:1px solid var(--line);background:var(--ink-2);text-align:center;color:var(--bone)}
.cli .dia small{display:block;font-size:.65rem;color:var(--mute);text-transform:uppercase}
.cli .dia b{font-family:'Anton',sans-serif;font-size:1.2rem;font-weight:400}
.cli .dia.sel{border-color:var(--cold);background:rgba(95,212,232,.12)}
.cli .dia.fechado{opacity:.35}
.cli .aviso{font-size:.85rem;color:var(--mute);margin-top:8px}
.cli .msg{padding:10px 14px;border-radius:10px;font-size:.9rem;margin-top:12px}
.cli .msg.erro{background:rgba(255,92,92,.12);color:#ffb3b3;border:1px solid rgba(255,92,92,.35)}
.cli .msg.ok{background:rgba(76,217,123,.12);color:#b8f5cc;border:1px solid rgba(76,217,123,.35)}
.cli .check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;margin-top:12px}
.cli .check input{width:auto;margin-top:4px;accent-color:var(--cold)}
.cli .pergunta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.cli .pergunta .opts{display:flex;gap:6px}
.cli .pergunta .opts label{margin:0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;text-transform:none;font-size:.85rem;color:var(--bone);cursor:pointer}
.cli .pergunta .opts input{display:none}
.cli .pergunta .opts input:checked+span{color:var(--ink)}
.cli .pergunta .opts label:has(input:checked){background:var(--cold);border-color:var(--cold)}
.cli .pergunta .opts label.sim:has(input:checked){background:var(--hot);border-color:var(--hot)}
.cli .pergunta .opts label:has(input:checked) span{color:var(--ink)}
.cli .pergunta .opts label.sim:has(input:checked) span{color:#fff}
.cli .detalhe{margin:0 0 10px} .cli .detalhe input{padding:9px 12px;font-size:.9rem}
.cli .tabs{display:flex;gap:6px;margin-bottom:14px}
.cli .tabs button{flex:1;padding:10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mute);font-weight:700}
.cli .tabs button.ativo{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.cli .preco{font-family:'Anton',sans-serif;font-size:1.7rem}
.cli .preco small{font-family:'Sora',sans-serif;font-size:.75rem;color:var(--mute);display:block}
.cli .qrbox{background:#fff;border-radius:14px;padding:14px;display:inline-block}

/* ----------------------------------------------------------------- gestao */
body.gest{background:var(--g-bg);color:var(--g-text)}
.gest .layout{display:flex;min-height:100vh}
.gest .menu{width:220px;flex-shrink:0;background:var(--g-azul);color:#EAF2F4;display:flex;flex-direction:column;padding:18px 0}
.gest .menu .logo{padding:0 18px 14px;font-size:1.1rem}
.gest .menu .logo .rec{color:#fff}
.gest .menu nav{flex:1}
.gest .menu nav a{display:block;padding:11px 18px;color:#EAF2F4;text-decoration:none;font-size:.93rem;border-left:4px solid transparent}
.gest .menu nav a:hover{background:rgba(255,255,255,.07)}
.gest .menu nav a.ativo{background:rgba(53,195,214,.15);border-left-color:var(--cold);font-weight:700}
.gest .menu .rodape{padding:12px 18px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem}
.gest .menu .rodape .quem{color:var(--cold);margin-bottom:6px}
.gest .menu .rodape .papel{color:#8FA3AD;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.gest .menu .rodape button{margin-top:8px;background:none;border:1px solid rgba(255,255,255,.3);color:#EAF2F4;padding:5px 10px;border-radius:6px;font-size:.8rem}
.gest main{flex:1;padding:26px 30px;max-width:1200px;min-width:0}
.gest h1{font-size:1.5rem;color:var(--g-azul);margin-bottom:4px}
.gest h2{font-size:1.02rem;color:var(--g-azul2);margin:22px 0 10px}
.gest .desc{color:var(--g-mute);margin-bottom:18px;font-size:.93rem}
.gest .card{background:var(--g-card);border:1px solid var(--g-line);border-radius:12px;padding:16px 18px;margin-bottom:14px;box-shadow:0 3px 12px rgba(11,30,45,.05)}
.gest .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.gest .tile{background:var(--g-card);border:1px solid var(--g-line);border-radius:12px;padding:12px 14px}
.gest .tile .rot{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--g-mute);font-weight:700}
.gest .tile .val{font-size:1.6rem;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.gest .tile .sub{font-size:.76rem;color:var(--g-mute)}
.gest table{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--g-card)}
.gest th{text-align:left;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--g-mute);padding:8px 10px;border-bottom:1px solid var(--g-line)}
.gest td{padding:9px 10px;border-bottom:1px solid var(--g-line);vertical-align:middle}
.gest tr:last-child td{border-bottom:none}
.gest tr.clicavel{cursor:pointer} .gest tr.clicavel:hover td{background:#F6FAFB}
.gest .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gest .rolagem{overflow-x:auto}
.gest label{display:block;font-size:.8rem;font-weight:600;margin:10px 0 4px;color:var(--g-text)}
.gest input,.gest select,.gest textarea{width:100%;padding:9px 11px;border:1px solid var(--g-line);border-radius:8px;font-size:.95rem;background:#fff;color:var(--g-text)}
.gest input:focus,.gest select:focus,.gest textarea:focus{outline:2px solid var(--cold);border-color:transparent}
.gest textarea{min-height:70px;resize:vertical}
.gest .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid transparent;font-weight:600;font-size:.9rem;background:var(--g-azul);color:#fff;text-decoration:none}
.gest .btn:hover{background:var(--g-azul2)} .gest .btn:disabled{opacity:.5;cursor:default}
.gest .btn.sec{background:#fff;color:var(--g-text);border-color:var(--g-line)} .gest .btn.sec:hover{background:#F6FAFB}
.gest .btn.ok{background:#1F8A4C} .gest .btn.ok:hover{background:#166B3A}
.gest .btn.bad{background:#C2341D} .gest .btn.bad:hover{background:#982812}
.gest .btn.sm{padding:5px 10px;font-size:.8rem}
.gest .btn.ciano{background:var(--g-ciano)}
.gest .pill{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#E8F4F8;color:#0B5A66}
.gest .pill.agendado{background:#E8F4F8;color:#0B5A66} .gest .pill.presente{background:#FFF3E5;color:#9A4B00} .gest .pill.concluido{background:#E3F7EA;color:#166B3A}
.gest .pill.faltou{background:#FDE7E4;color:#982812} .gest .pill.cancelado,.gest .pill.cancelado_tarde,.gest .pill.encerrado{background:#EEF1F3;color:#5B6B75}
.gest .pill.pendente{background:#FFF6D6;color:#7A5A00} .gest .pill.ativo{background:#E3F7EA;color:#166B3A}
.gest .pill.round{background:#E8F4F8;color:#0B5A66} .gest .pill.corner{background:#EEF1F3;color:#3A4A55}
.gest .pill.alerta{background:#FDE7E4;color:#982812}
.gest .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.gest .msg{padding:9px 12px;border-radius:8px;font-size:.88rem;margin-top:10px}
.gest .msg.erro{background:#FDE7E4;color:#982812} .gest .msg.ok{background:#E3F7EA;color:#166B3A}
.gest .acoes{display:flex;gap:6px;flex-wrap:wrap}
.gest .grade{display:grid;gap:4px}
.gest .grade .celula{border:1px solid var(--g-line);border-radius:6px;padding:4px 6px;font-size:.78rem;min-height:38px;background:#fff}
.gest .grade .celula.livre{background:#F6FAFB;color:var(--g-mute)} .gest .grade .celula.cheia{background:#E8F4F8} .gest .grade .celula.bloq{background:#EEF1F3;color:#5B6B75}
.gest .grade .celula.passado{opacity:.5}
.gest .grade .cab{font-size:.72rem;font-weight:700;color:var(--g-mute);text-transform:uppercase;letter-spacing:.06em;padding:4px 6px}
.gest .busca{display:flex;gap:8px;margin-bottom:12px} .gest .busca input{flex:1}
.gest dialog{border:none;border-radius:12px;padding:0;max-width:560px;width:calc(100vw - 30px);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.gest dialog::backdrop{background:rgba(11,30,45,.55)}
.gest dialog .corpo{padding:20px 22px}
.gest dialog h3{font-size:1.05rem;color:var(--g-azul);margin-bottom:6px}
.gest .qrbox{background:#fff;border:1px solid var(--g-line);border-radius:12px;padding:14px;display:inline-block}
.gest .ficha-lista{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:.9rem}
.gest .ficha-lista .sim{color:#982812;font-weight:700}
.gest .login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--g-azul),var(--g-azul2) 60%,var(--g-ciano))}
.gest .login .cartao{background:#fff;padding:2.2rem;border-radius:16px;width:min(92vw,400px);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.gest .login .logo{justify-content:center;font-size:1.6rem} .gest .login .logo .rec{color:var(--g-azul)}
.gest .login .btn{width:100%;justify-content:center;margin-top:16px;padding:11px}
@media (max-width:820px){
  .gest .layout{flex-direction:column}
  .gest .menu{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px}
  .gest .menu .logo{padding:6px 10px}
  .gest .menu nav{display:flex;flex-wrap:wrap} .gest .menu nav a{padding:8px 10px;border-left:none;border-bottom:3px solid transparent;font-size:.85rem}
  .gest .menu nav a.ativo{border-bottom-color:var(--cold)}
  .gest .menu .rodape{border:none;padding:0 10px;display:flex;gap:10px;align-items:center;width:100%}
  .gest main{padding:16px}
}