@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ===== identidade visual ND · manual v1.0 ===== */
:root{
  --preto:#141414;          /* Preto Tatame */
  --vermelho:#E31E24;       /* Vermelho Faixa — acento, só onde há ação */
  --vermelho-esc:#C4161C;
  --papel:#EFEDEA;          /* Cinza Tatame */
  --kimono:#FFFFFF;         /* Branco Kimono */
  --ink2:#2E2C29; --ink3:#55524E; --ink4:#8C8880; --linha:#DAD6D0; --linha2:#C9C4BC;
  --azul:#1E5AA8; --roxa:#6B4FA0; --marrom:#7A4A26; --branca:#F1EEE9; --ponta:#141414;
  --ok:#2E7D32; --alerta:#8A6608; --erro:#B3372B;
  --rotulo:#6B6761;   /* rótulos sobre fundo claro — contraste AA */
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Barlow',system-ui,sans-serif;background:var(--papel);color:var(--preto);min-height:100vh;font-size:15px;line-height:1.55;
  background-image:
    repeating-linear-gradient(0deg,rgba(20,20,20,.03) 0 1px,transparent 1px 36px),
    repeating-linear-gradient(90deg,rgba(20,20,20,.03) 0 1px,transparent 1px 36px); /* malha do tatame 36px */
}
button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--vermelho);outline-offset:2px}
select,input[type=text],input[type=number],textarea{font-family:'Barlow',sans-serif;font-size:15px;padding:12px 14px;border:1.5px solid var(--linha2);border-radius:4px;background:#fff;width:100%;color:var(--preto)}

/* tipografia do sistema */
.display{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
.mono{font-family:'JetBrains Mono',monospace}

.topbar{background:var(--preto);color:#fff;padding:16px 16px 0;border-bottom:6px solid var(--preto);position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(90deg,var(--preto) 0 78%,var(--vermelho) 78% 92%,var(--preto) 92%)} /* barra de faixa · ponta vermelha */
.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand .logo{width:38px;height:25px;color:#fff;flex-shrink:0}
.brand h1{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;font-size:20px;text-transform:uppercase;line-height:1}
.brand small{font-family:'JetBrains Mono',monospace;color:var(--ink4);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.roles{display:flex;gap:4px;margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.roles button{white-space:nowrap;flex-shrink:0}
.roles button{font-family:'JetBrains Mono',monospace;color:#A5A199;padding:14px 16px;min-height:46px;font-weight:500;font-size:11px;letter-spacing:.12em;border-radius:0;text-transform:uppercase;border-top:2px solid transparent}
.roles button.on{background:var(--papel);color:var(--preto);border-top:2px solid var(--vermelho)}
.wrap{max-width:960px;margin:0 auto;padding:20px 14px 90px}
.phone{max-width:430px;margin:0 auto;padding-bottom:112px}

.card{background:var(--kimono);border:1px solid var(--linha);border-radius:6px;padding:16px;margin-bottom:12px}
.card h2{font-family:'JetBrains Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--rotulo);font-weight:500;margin-bottom:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--vermelho);color:#fff;font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:14px 20px;border-radius:4px;width:100%;font-size:15px;transition:transform .06s,background .15s}
.btn:active{transform:scale(.98)}
.btn:hover{background:var(--vermelho-esc)}
.btn.sec{background:#fff;color:var(--preto);border:2px solid var(--preto)}
.btn.sec:hover{background:var(--papel)}
.btn.mini{width:auto;padding:11px 14px;min-height:44px;font-size:12px;border-radius:3px}
.btn.verde{background:var(--preto)}.btn.verde:hover{background:var(--ink2)}   /* ação secundária escura */
.btn.vermelho{background:#fff;color:var(--vermelho);border:2px solid var(--vermelho)} /* destrutiva: contorno */
.btn.vermelho:hover{background:#FBEBEB}
.btn:disabled{opacity:.55;cursor:default}
.tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:2px;white-space:nowrap}
.tag.ativa{background:#E4EFE5;color:var(--ok)}
.tag.atraso{background:#F5EBD4;color:var(--alerta)}
.tag.suspensa{background:#FBE7E6;color:var(--erro)}
.tag.cancelada{background:#E6E2DC;color:var(--ink3)}
.tag.neutra{background:#EDEAE6;color:var(--ink3)}
.tag.personal{background:#EDE6F5;color:var(--roxa)}
.tag.cat{background:#E8EEF6;color:var(--azul)}
.tag.wellhub{background:#E3F1EC;color:#0B6B4F}
.tag.totalpass{background:#E7EDFA;color:#1B3E8F}
.tag.kid{background:#F3E9DF;color:var(--marrom)}
.tag.alerta-img{background:#FBE7E6;color:var(--erro)}
.auth-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--linha)}
.auth-item:last-child{border-bottom:none}
.auth-item .txt{flex:1;min-width:0}
.auth-item .tit{font-weight:600;font-size:15px}
.auth-item .exp{font-size:12.5px;color:var(--ink3);margin-top:2px}
.sw{width:56px;height:32px;border-radius:16px;background:var(--linha2);position:relative;flex-shrink:0;transition:background .15s;border:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw.on{background:var(--ok)}
.sw.on::after{transform:translateX(24px)}
.mini-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rotulo);font-weight:500}
.conc{display:flex;align-items:center;gap:10px;padding:11px 6px;border-bottom:1px solid var(--linha);font-size:14px}
.conc:last-child{border-bottom:none}
.conc.diverg{background:#FBEBEB}
.muted{color:var(--ink3);font-size:13px}
.big{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:28px;line-height:1.08}
.big.nocaps{text-transform:none}

/* faixa como barra de progresso — grafismo central da marca */
.belt{position:relative;height:24px;border-radius:3px;display:flex;overflow:hidden;border:1px solid rgba(20,20,20,.18)}
.belt.mini-b{height:16px}
.belt .body{flex:1;position:relative}
.belt .fill{position:absolute;inset:0;width:0;background:rgba(255,255,255,.35);mix-blend-mode:overlay;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.belt .tip{width:26%;background:var(--ponta);display:flex;align-items:center;justify-content:space-evenly;padding:0 5px}
.belt .grau{width:4px;height:100%;background:#fff;border-radius:0;opacity:.22}
.belt .grau.on{opacity:1}
.belt-label{display:flex;justify-content:space-between;margin-top:8px;font-size:13px}
.belt-label b{font-weight:700}
.belt-label .mono-lbl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.jorn{display:flex;flex-direction:column;gap:10px}
.jorn .step{display:flex;align-items:center;gap:12px}
.jorn .step .belt{flex:1}
.jorn .step .st{width:112px;flex-shrink:0;font-size:12px;font-weight:600}
.jorn .step.futura{opacity:.42}
.jorn .step.atual .st{color:var(--vermelho)}
.jorn .step.feita .st{color:var(--ok)}

.av{width:44px;height:44px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:900;color:#fff;font-size:15px;flex-shrink:0;position:relative}
.av::after{content:"";position:absolute;bottom:-3px;left:0;right:0;height:5px;border-radius:0 0 3px 3px;background:var(--bcolor,#999);border:1px solid rgba(20,20,20,.25)}
.av img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:block}
.av.g{width:72px;height:72px;font-size:24px}
.foto-box{display:flex;align-items:center;gap:14px;margin:10px 0}
.foto-box .acao{flex:1}
input[type=file]{display:none}

.row{display:flex;align-items:center;gap:10px;padding:12px 6px;border-bottom:1px solid var(--linha)}
.row:last-child{border-bottom:none}
.row .info{flex:1;min-width:0}
.row .nome{font-weight:600;font-size:16px}
.row .sub{font-size:12px;color:var(--ink3)}
.row.suspensa .nome{color:var(--erro)}
.row.cancelada{opacity:.55}
.row.click{cursor:pointer}
.row.click:hover{background:#FBFAF8}
.row.topo{background:rgba(227,30,36,.05);border-left:3px solid var(--vermelho);padding-left:8px}
.chk{width:50px;height:50px;border-radius:4px;border:2px solid var(--linha2);display:flex;align-items:center;justify-content:center;font-size:20px;color:transparent;transition:all .12s;flex-shrink:0;background:#fff}
.chk.on{background:var(--preto);border-color:var(--preto);color:#fff}
.search{width:100%;padding:12px 14px;border:1.5px solid var(--linha2);border-radius:4px;font-family:'Barlow',sans-serif;font-size:15px;background:#fff}
.contador{position:sticky;bottom:10px;background:var(--preto);color:#fff;border-radius:6px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;margin-top:14px;box-shadow:0 8px 24px rgba(20,20,20,.28);gap:8px}
.contador b{font-family:'Archivo',sans-serif;font-size:24px;font-weight:900}
.contador .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4)}
.contador .btn{width:auto;padding:10px 14px;font-size:13px}
.contador .btn.ghost{background:transparent;color:var(--ink4);border:1.5px solid var(--ink2)}

.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--preto);border-top:none;display:flex;justify-content:space-around;align-items:flex-end;padding:9px 6px calc(10px + env(safe-area-inset-bottom));z-index:40}
.bottomnav::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--preto) 0 80%,var(--vermelho) 80% 93%,var(--preto) 93%)}
.bottomnav button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;min-height:50px;padding-top:4px;color:#A5A199;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.1em;flex:1;text-transform:uppercase}
.bottomnav button .ic{font-size:19px;line-height:1}
.bottomnav button.on{color:#fff}
.bottomnav button.on .ic{color:var(--vermelho)}
.bottomnav button.central .ic{width:54px;height:54px;border-radius:50%;background:var(--vermelho);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;margin-top:-30px;box-shadow:0 6px 16px rgba(20,20,20,.35);border:4px solid var(--preto)}
.bottomnav button.central.on .ic{background:var(--vermelho)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:var(--kimono);border:1px solid var(--linha);border-radius:6px;padding:14px}
.kpi .n{font-family:'Archivo',sans-serif;font-size:28px;font-weight:900;letter-spacing:-.02em}
.kpi .l{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--rotulo);font-weight:500;margin-top:3px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--rotulo);font-weight:500;text-align:left;padding:8px 6px;border-bottom:2px solid var(--preto)}
td{padding:10px 6px;border-bottom:1px solid var(--linha);vertical-align:middle}
.num{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-weight:500;font-size:13px}
.link{color:var(--vermelho);cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.lock{background:#EDEAE6;border:1.5px dashed var(--linha2);border-radius:6px;padding:16px;text-align:center;color:var(--ink3);font-weight:600}

.grade-scroll{overflow-x:auto;margin:0 -4px}
.tbl-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
.tbl-scroll table{min-width:520px}
.grade{border-collapse:collapse;min-width:760px;width:100%}
.grade th{background:var(--preto);color:#fff;padding:8px 6px;font-size:10px;border:1px solid #2a2a2a;text-align:center;border-bottom:2px solid var(--preto);line-height:1.5}
.grade th small{font-weight:400;color:var(--ink4);font-size:9px;letter-spacing:.08em}
.grade td{border:1px solid var(--linha);padding:7px 5px;font-size:12px;font-weight:600;text-align:center;background:#fff;line-height:1.5}
.grade td.hora{background:var(--preto);color:#fff;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px}
.grade td.vazio{background:#EDEAE6;color:#C9C4BC}
.grade td.fds{background:#F7F5F1}
.grade td.edit{cursor:pointer}
.grade td.edit:hover{background:#FBEBEB;outline:2px solid var(--vermelho);outline-offset:-2px}
.grade td .m-nogi{color:var(--roxa)}
.grade td .m-kids{color:var(--marrom)}
.grade td .m-esp{color:var(--ok)}
.legenda{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--ink3)}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

.toast{pointer-events:none;position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(80px);background:var(--preto);color:#fff;padding:13px 20px;border-radius:4px;font-weight:600;opacity:0;transition:all .35s cubic-bezier(.2,.8,.2,1);z-index:60;max-width:90vw;text-align:center;border-left:4px solid var(--vermelho)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.overlay{position:fixed;inset:0;background:rgba(20,20,20,.6);display:none;align-items:flex-end;justify-content:center;z-index:50;padding:14px;overflow:auto}
.sheet .fechar-x{position:absolute;top:10px;right:12px;font-size:26px;line-height:1;color:var(--ink3);padding:6px 10px}
.sheet{position:relative}
.overlay.show{display:flex}
.sheet{background:#fff;border-radius:8px;padding:22px;width:100%;max-width:460px;animation:up .25s cubic-bezier(.2,.8,.2,1);max-height:90vh;overflow:auto;border-top:4px solid var(--preto)}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.sheet h3{font-family:'Archivo',sans-serif;font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px}
.sheet label{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--rotulo);margin:14px 0 6px}
.multi{border:1.5px solid var(--linha2);border-radius:4px;max-height:220px;overflow:auto}
.multi .opt{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--linha);cursor:pointer;font-weight:600}
.multi .opt:last-child{border-bottom:none}
.multi .opt .box{width:22px;height:22px;border-radius:3px;border:2px solid var(--linha2);display:flex;align-items:center;justify-content:center;color:transparent;font-size:14px;flex-shrink:0}
.multi .opt.sel .box{background:var(--preto);border-color:var(--preto);color:#fff}
.multi .opt .fx{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink4);font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.pix{border:2px dashed var(--linha2);border-radius:6px;padding:16px;text-align:center;margin:14px 0}
.pix .qr{font-size:44px;letter-spacing:2px}
.banner{background:#F5EBD4;border:1px solid #E3CD9A;color:var(--alerta);border-radius:4px;padding:12px 14px;font-weight:600;font-size:14px;margin-bottom:12px;border-left:4px solid var(--alerta)}
.banner.info{background:#EDEAE6;border-color:var(--linha2);color:var(--ink2);border-left-color:var(--preto)}
.banner.ok{background:#E4EFE5;border-color:#BFDCC2;color:var(--ok);border-left-color:var(--ok)}
.hidden{display:none!important}
#telaLogin{position:fixed;inset:0;background:var(--preto);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
#telaLogin .box{width:100%;max-width:420px}
#telaLogin h2{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;color:#fff;font-size:26px;letter-spacing:-.02em;margin:18px 0 4px}
#telaLogin p.sub{color:#A5A199;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
#telaLogin .conta{display:flex;align-items:center;gap:12px;width:100%;background:#1E1E1E;border:1px solid #2E2C29;border-radius:6px;padding:14px;margin-bottom:8px;text-align:left;color:#fff}
#telaLogin .conta:hover{background:#262626;border-color:var(--vermelho)}
#telaLogin .conta .txt{flex:1;min-width:0}
#telaLogin .conta .nm{font-weight:700;font-size:15px}
#telaLogin .conta .pf{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#A5A199;margin-top:2px}
#telaLogin .nota{color:#8C8880;font-size:12.5px;margin-top:18px;line-height:1.5}
.passo{display:none}.passo.on{display:block}
.wz-barra{display:flex;gap:4px;margin-bottom:16px}
.wz-barra i{flex:1;height:4px;border-radius:2px;background:var(--linha2)}
.wz-barra i.on{background:var(--vermelho)}
.sair{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#A5A199;padding:14px 10px}
.subtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.subtabs button{font-family:'JetBrains Mono',monospace;padding:12px 14px;min-height:44px;border-radius:3px;border:1.5px solid var(--linha2);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:#fff;color:var(--ink3)}
.subtabs button.on{background:var(--preto);color:#fff;border-color:var(--preto)}
.acesso{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.acesso select{width:auto;padding:7px 10px;font-size:12px;border-radius:3px}
.pres-item{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--linha);font-size:14px;gap:8px}
.pres-item:last-child{border-bottom:none}
.chip-list{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:#EDEAE6;border:1px solid var(--linha);border-radius:3px;padding:5px 10px;font-size:13px;font-weight:600}
.chip.m{background:#EDE6F5;border-color:#D5C5EA;color:var(--roxa)}
.filtro-chamada{display:flex;gap:6px;margin:10px 0 0;flex-wrap:wrap;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--rotulo)}
.filtro-chamada button{border:1.5px solid var(--linha2);background:#fff;border-radius:3px;padding:9px 12px;min-height:40px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:500}
.filtro-chamada button.on{background:var(--preto);color:#fff;border-color:var(--preto)}
.selo{display:flex;flex-direction:column;align-items:center;gap:4px;background:#EDEAE6;border:1.5px solid var(--linha);border-radius:4px;padding:10px 6px;flex:1;min-width:64px}
.selo.on{background:#fff;border-color:var(--preto)}
.selo .ic{font-size:19px}
.selo .n{font-family:'Archivo',sans-serif;font-weight:900;font-size:15px}
.selo.on .n{color:var(--vermelho)}
.selo .l{font-family:'JetBrains Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--rotulo);font-weight:500}
.fin-destaque{display:flex;justify-content:space-between;align-items:center;background:#F5EBD4;border:1px solid #E3CD9A;border-radius:4px;padding:12px 14px;margin-bottom:10px;border-left:4px solid var(--alerta)}
.fin-destaque.ok{background:#E4EFE5;border-color:#BFDCC2;border-left-color:var(--ok)}
/* confirmação de check-in — único momento em que o vermelho domina */
.redblock{background:var(--vermelho);color:#fff;border-radius:6px;padding:22px 18px;text-align:center}
.redblock .t{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:22px;line-height:1.1}
.redblock .s{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:8px;opacity:.9}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}