/* Telas de entrada do Max (SaaS). Tokens do Guia visual P2 (Arte Slime); desenho aprovado na prévia 14a6d00, com o painel V2 (Alan, 04/11/2026).
   Sem nada de fora e sem estilo na página (CSP estrita): tudo aqui. */
:root{
  --fonte:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"SF Pro Text",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --fs-tela:22px; --lh-tela:28px; --fs-secao:16px; --lh-secao:24px; --fs-corpo:14px; --lh-corpo:20px; --fs-sec:13px; --lh-sec:18px; --fs-leg:12px; --lh-leg:16px;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e6:24px; --e8:32px; --e12:48px;
  --r-ctl:8px; --r-cartao:12px;
  --ctl:32px; --ctl-forte:36px; --topo:48px; --toque:20px;
  --t-rapido:120ms; --t-base:180ms; --curva-entra:cubic-bezier(.2,.8,.2,1); --curva-sai:cubic-bezier(.4,0,1,1);
}
[data-tema="claro"]{ --fundo:#F6F7F9; --sup:#FFFFFF; --sup2:#EEF1F5; --borda:#D9DEE5; --texto:#161B22; --suave:#4A5568; --acento:#1F5FA8; --acento-tinta:#E3EDF9; --sobre-acento:#FFFFFF; --sucesso:#1B6B3A; --alerta:#8A4B00; --erro:#B3261E; color-scheme:light; }
[data-tema="escuro"]{ --fundo:#0F141A; --sup:#161D26; --sup2:#1E2733; --borda:#2B3644; --texto:#EEF2F7; --suave:#A9B4C2; --acento:#7FB2F0; --acento-tinta:#1A2B42; --sobre-acento:#0F141A; --sucesso:#7FD79B; --alerta:#F2B66B; --erro:#FF9A92; color-scheme:dark; }
[data-tema="azul"]{ --fundo:#0B1A33; --sup:#12274A; --sup2:#1A3360; --borda:#2A4677; --texto:#EEF3FA; --suave:#B4C3DA; --acento:#7FB2F0; --acento-tinta:#1E3A6B; --sobre-acento:#0B1A33; --sucesso:#7FD79B; --alerta:#F2B66B; --erro:#FF9A92; color-scheme:dark; }
/* no celular e no toque, controles e links de 44 */
/* e a letra dos campos com 16 px: com menos, o Safari do iPhone dá zoom ao tocar (sem tirar o zoom de quem precisa) */
@media (max-width:899px),(pointer:coarse){ :root{ --ctl:44px; --ctl-forte:44px; --toque:44px; --fs-campo:16px; } }

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{height:100dvh;display:flex;flex-direction:column;overflow:hidden;font:var(--fs-corpo)/var(--lh-corpo) var(--fonte);-webkit-font-smoothing:antialiased;background:var(--fundo);color:var(--texto)}
button,input{font:inherit;color:inherit}
/* o app em tela cheia no celular (viewport-fit=cover): nada embaixo da ilha, do recorte nem da barrinha de baixo */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
h1:focus{outline:none}
.sem-js{margin:var(--e6);color:var(--texto)}

/* sem a faixa do alto nas telas com o painel (o nome já está em cima do Max; Alan, 04/11). Telas sem o painel (dentro do produto):
   o cabeçalho mínimo, só com a ação (Sair), sem faixa nem nome */
.topo-min{flex:none;height:40px;display:flex;align-items:center;justify-content:flex-end;padding:0 var(--e4)}
.topo-min[hidden]{display:none}

/* o meio: no computador, o painel da marca à esquerda (painel_marca.css) e o formulário à direita; sem o painel, só o formulário */
.ent-meio{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ent-meio.so{display:flex;justify-content:center}
.ent-meio .pm[hidden]{display:none}
.ent-dir{display:flex;justify-content:center;align-items:safe center;padding:var(--e6);min-height:0;overflow-y:auto}
.ent-meio.so .ent-dir{flex:1 1 auto}
@media (max-width:899px){
  .topo-min{height:44px}
  .ent-meio{display:flex;flex-direction:column}
  .ent-dir{flex:1 1 auto;align-items:flex-start;padding:var(--e4)}
}

h1{font-size:var(--fs-tela);line-height:var(--lh-tela);font-weight:600;margin:0 0 var(--e2)}
.sub{color:var(--suave);font-size:var(--fs-sec);line-height:var(--lh-sec);margin:0 0 var(--e6)}
.passo{font-size:var(--fs-leg);line-height:var(--lh-leg);color:var(--suave);margin:0 0 var(--e2)}
.campo{display:grid;gap:var(--e1);margin:0 0 var(--e4)}
.campo label{font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:600}
.campo .ajuda{font-size:var(--fs-leg);line-height:var(--lh-leg);color:var(--suave)}
.campo .ajuda.ruim{color:var(--erro)}
.campo .ajuda:empty{display:none}
/* o campo mede 36 (44 no toque): a borda fica por dentro */
.entrada{display:flex;align-items:center;height:var(--ctl-forte);box-shadow:inset 0 0 0 1px var(--borda);border-radius:var(--r-ctl);background:var(--sup);padding:0 var(--e3);gap:var(--e2)}
.entrada:focus-within{box-shadow:inset 0 0 0 2px var(--acento)}
.entrada.ruim{box-shadow:inset 0 0 0 1px var(--erro)}
.entrada.ruim:focus-within{box-shadow:inset 0 0 0 2px var(--erro)}
.entrada input{flex:1;min-width:0;border:0;background:none;outline:none;height:var(--ctl-forte);font-size:var(--fs-campo,var(--fs-corpo))}
.entrada input::placeholder{color:var(--suave)}
.entrada input:disabled,.entrada input[readonly]{color:var(--suave)}
.entrada.codigo input{letter-spacing:.4em;font-variant-numeric:tabular-nums;font-size:18px}
.mostrar{border:0;background:none;color:var(--acento);font-size:var(--fs-sec);cursor:pointer;padding:0 var(--e1);height:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);height:var(--ctl);padding:0 var(--e3);border:1px solid var(--borda);border-radius:var(--r-ctl);background:transparent;color:var(--texto);cursor:pointer;font-weight:600;font-size:var(--fs-sec);transition:transform var(--t-rapido) var(--curva-sai)}
.btn.forte{height:var(--ctl-forte);width:100%;background:var(--acento);border-color:var(--acento);color:var(--sobre-acento);font-size:var(--fs-corpo)}
.btn:disabled{cursor:default;opacity:.7}
.btn.forte:disabled{opacity:.6}
[data-mov="animado"] .btn:not(:disabled):active{transform:scale(.98)}
/* links de texto: área de toque de 44 no celular, por padding, sem mudar o desenho */
.link{display:inline-flex;align-items:center;min-height:var(--toque);border:0;background:none;padding:calc((var(--toque) - 20px) / 2) 4px;margin:calc((20px - var(--toque)) / 2) -4px;color:var(--acento);cursor:pointer;font-size:var(--fs-sec);text-decoration:underline;text-underline-offset:3px}
.linha-links{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--e2);margin-top:var(--e4);font-size:var(--fs-sec)}
.linha-links.centro{justify-content:center}
.marcar{display:flex;align-items:flex-start;gap:var(--e2);font-size:var(--fs-sec);line-height:var(--lh-sec);margin:0 0 var(--e4);cursor:pointer}
.marcar input{width:16px;height:16px;margin:1px 0 0;accent-color:var(--acento)}
.leg{font-size:var(--fs-leg);line-height:var(--lh-leg);color:var(--suave)}
.leg.abaixo{margin:var(--e3) 0 0}
.leg.status{margin:var(--e2) 0 0}
.prov{display:inline-block;margin-left:4px;padding:0 4px;border:1px dashed var(--alerta);border-radius:4px;color:var(--alerta);font-size:var(--fs-leg);line-height:var(--lh-leg)}
/* avisos: sempre escritos, com um traço de apoio; a cor nunca é a única informação */
.aviso{display:flex;gap:var(--e2);align-items:flex-start;padding:var(--e3);border-radius:var(--r-ctl);margin:0 0 var(--e4);font-size:var(--fs-sec);line-height:var(--lh-sec)}
.aviso svg{flex:none;width:18px;height:18px}
.aviso b{display:block;font-weight:600;margin-bottom:2px}
.aviso.erro{background:color-mix(in srgb,var(--erro) 14%,var(--sup));border-left:3px solid var(--erro)}
.aviso.erro svg{color:var(--erro)}
.aviso.alerta{background:color-mix(in srgb,var(--alerta) 14%,var(--sup));border-left:3px solid var(--alerta)}
.aviso.alerta svg{color:var(--alerta)}
.aviso.sucesso{background:color-mix(in srgb,var(--sucesso) 14%,var(--sup));border-left:3px solid var(--sucesso)}
.aviso.sucesso svg{color:var(--sucesso)}
.aviso .btn{margin-top:var(--e2)}
.regras{list-style:none;padding:0;margin:var(--e1) 0 0;display:grid;gap:2px;font-size:var(--fs-leg);line-height:var(--lh-leg);color:var(--suave)}
.regras li::before{content:"○ "}
.regras li.cumpre{color:var(--sucesso)} .regras li.cumpre::before{content:"✓ "}
.regras li.falta{color:var(--erro)} .regras li.falta::before{content:"✕ "}
/* Configurações › Segurança: cada item com o estado escrito */
.item{border-top:1px solid var(--borda);padding:var(--e4) 0 var(--e2)}
.item h2{font-size:var(--fs-secao);line-height:var(--lh-secao);font-weight:600;margin:0}
.item .estado{margin:var(--e1) 0;font-weight:600;font-size:var(--fs-sec)}
.item .leg{margin:0 0 var(--e3)}
/* Configurações › Aparência: escolhas com o estado escrito (o marcado e a linha "Guardado") */
.opcoes{border:0;margin:0 0 var(--e4);padding:0;display:grid;gap:var(--e2)}
.opcoes.linha{grid-template-columns:repeat(3,minmax(0,1fr))}
.opcoes legend{font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:600;padding:0;margin:0 0 var(--e2)}
.opcao{display:flex;align-items:center;gap:var(--e3);min-height:var(--ctl-forte);padding:var(--e2) var(--e3);border-radius:var(--r-ctl);box-shadow:inset 0 0 0 1px var(--borda);background:var(--sup);cursor:pointer;font-size:var(--fs-corpo)}
.opcao:has(input:checked){box-shadow:inset 0 0 0 2px var(--acento)}
.opcao input{margin:0;width:16px;height:16px;flex:none;accent-color:var(--acento)}
.opcao b{font-weight:600}
.opcao .leg{display:block}
/* 2FA */
.qr-bloco{display:flex;gap:var(--e4);align-items:center;margin:0 0 var(--e4)}
.qr{flex:none;width:136px;height:136px;border:1px solid var(--borda);border-radius:var(--r-ctl);shape-rendering:crispEdges}
@media (max-width:899px){ .qr-bloco{flex-direction:column;align-items:flex-start} }
.chave{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;margin:0 0 var(--e4)}
.chave code,.reservas code{font:600 14px/20px var(--mono);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.chave code{background:var(--sup2);padding:2px var(--e2);border-radius:6px;word-break:break-all}
.passos-app{margin:0 0 var(--e4);padding-left:20px;font-size:var(--fs-sec);line-height:var(--lh-sec)}
.passos-app li{margin:0 0 var(--e1)}
.reservas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2) var(--e4);padding:var(--e3) var(--e4);margin:0 0 var(--e3);border:1px solid var(--borda);border-radius:var(--r-cartao);background:var(--sup)}
.botoes{display:flex;gap:var(--e2);flex-wrap:wrap;margin:0 0 var(--e4)}
.vazio{display:grid;justify-items:center;text-align:center;gap:var(--e2)}
.vazio .sub{margin:0}
.vazio + .btn.forte,.vazio + .aviso{margin-top:var(--e4)}
/* o movimento das telas e do painel está em painel_marca.css (Animado, Reduzido e Desligado) */