/* Motor Bom de Teste — app web: computador primeiro (menu lateral), celular e tablet com menu inferior */
:root{
  --papel:#f6f4ee;--papel-2:#ebe7dc;--superficie:#fffdf8;--tinta:#14201b;--suave:#5a655f;--linha:#d5d0c3;
  --verde:#0f7a5a;--sobre-verde:#fff;--verde-claro:#d6efe4;--amarelo:#ffc23d;--amarelo-claro:#fff1c7;
  --alerta:#b23a26;--alerta-claro:#f6dcd6;--lateral:#14201b;--lateral-tinta:#d9e2dd;--lateral-ativo:#1f322a;
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;--texto:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --raio:14px;--sombra:0 1px 2px rgba(20,32,27,.06),0 4px 16px rgba(20,32,27,.05);
}
@media (prefers-color-scheme:dark){:root{
  --papel:#0d1311;--papel-2:#1a2420;--superficie:#141c19;--tinta:#eef3ef;--suave:#9aa6a0;--linha:#2c3833;
  --verde:#3ec28f;--sobre-verde:#0d1311;--verde-claro:#173a2e;--amarelo-claro:#3a2f12;--alerta:#e2553d;--alerta-claro:#3a1d17;
  --lateral:#0a0f0d;--lateral-tinta:#c4d0ca;--lateral-ativo:#1a2420;--sombra:none;color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:15px/1.5 var(--texto)}
a{color:var(--verde)}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}
.num,td.num{font-variant-numeric:tabular-nums}

/* ---------- estrutura */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.lateral{background:var(--lateral);color:var(--lateral-tinta);padding:20px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.marca{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:800 1.15rem var(--display);padding:4px 8px}
.marca small{display:block;font:500 .72rem var(--texto);color:var(--lateral-tinta);letter-spacing:.04em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--lateral-tinta);text-decoration:none;font-weight:600}
.nav a:hover{background:var(--lateral-ativo);color:#fff}
.nav a[aria-current="page"]{background:var(--lateral-ativo);color:#fff;box-shadow:inset 3px 0 0 var(--amarelo)}
.nav svg{width:20px;height:20px;flex:none}
.nav .cont{margin-left:auto;background:var(--amarelo);color:#14201b;border-radius:999px;font-size:.72rem;padding:1px 8px;font-weight:700}
.estado{margin-top:auto;border:1px solid #2c3833;border-radius:12px;padding:12px;font-size:.82rem;display:flex;flex-direction:column;gap:6px}
.estado b{color:#fff}
.ponto{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#9aa6a0}
.ponto.ok{background:#3ec28f}.ponto.ruim{background:#e2553d}.ponto.teste{background:var(--amarelo)}
.conteudo{min-width:0;padding:24px 32px 64px;display:flex;flex-direction:column;gap:20px;max-width:1280px}
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topo h1{font:800 1.75rem/1.1 var(--display);margin:0;text-wrap:balance}
.topo p{margin:4px 0 0;color:var(--suave)}
.barra-movel,.abas-moveis{display:none}

/* ---------- blocos */
h2{font:700 1.15rem var(--display);margin:0}
.painel{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px;box-shadow:var(--sombra);min-width:0}
.painel>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.painel>header p{margin:2px 0 0;color:var(--suave);font-size:.88rem}
.grade-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;box-shadow:var(--sombra)}
.kpi b{display:block;font:800 1.7rem/1.1 var(--display);font-variant-numeric:tabular-nums}
.kpi span{color:var(--suave);font-size:.85rem}
.kpi.destaque{background:var(--verde);border-color:var(--verde);color:var(--sobre-verde)}
.kpi.destaque span{color:var(--sobre-verde);opacity:.85}
.faixa{padding:12px 16px;border-radius:12px;font-weight:600}
.faixa.ok{background:var(--verde-claro)}
.faixa.ruim{background:var(--alerta-claro);color:var(--alerta)}
.faixa.teste{background:var(--amarelo-claro)}
.vazio{color:var(--suave);padding:18px 4px;text-align:center}
.log{font-size:.86rem;color:var(--suave);display:flex;flex-direction:column;gap:6px}
.log b{color:var(--tinta);font-variant-numeric:tabular-nums}
.pill{display:inline-block;font-size:.74rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--papel-2);white-space:nowrap}
.pill.na_fila{background:var(--verde-claro)}.pill.publicada{background:var(--verde);color:var(--sobre-verde)}
.pill.pronta{background:var(--amarelo-claro)}.pill.erro,.pill.expirada{background:var(--alerta-claro);color:var(--alerta)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;background:var(--papel-2);padding:1px 6px;border-radius:6px}

/* ---------- tabelas (viram cartões no celular) */
.tabela{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linha);vertical-align:top}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--suave);font-weight:700}
tr:last-child td{border-bottom:0}
td small{color:var(--suave)}
.acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.acoes form{display:inline}
td.num{white-space:nowrap}
td .acoes{flex-wrap:nowrap}
td button,td .botao{padding:6px 12px;font-size:.84rem}

/* ---------- formulários e botões */
form.grade{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form.grade .cheia{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.9rem}
label small{font-weight:400;color:var(--suave)}
input,select,textarea{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--linha);background:var(--superficie);color:var(--tinta);min-width:0}
label.check{flex-direction:row;align-items:flex-start;gap:8px;font-weight:500}
label.check input{margin-top:4px}
button,.botao{font:inherit;font-weight:700;padding:9px 16px;border-radius:999px;border:1px solid transparent;background:var(--verde);color:var(--sobre-verde);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
button.leve,.botao.leve{background:var(--papel-2);color:var(--tinta)}
button.perigo{background:var(--alerta);color:#fff}
button:disabled{opacity:.55;cursor:default}
pre.msg{white-space:pre-wrap;background:var(--papel-2);padding:14px;border-radius:12px;font:14.5px/1.45 var(--texto);margin:0;overflow-wrap:anywhere}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.duas img{width:100%;border-radius:12px;border:1px solid var(--linha)}
.abas{display:flex;gap:6px;flex-wrap:wrap}
.abas a{padding:7px 14px;border-radius:999px;text-decoration:none;color:var(--tinta);background:var(--papel-2);font-weight:600;font-size:.88rem}
.abas a[aria-current="true"]{background:var(--tinta);color:var(--papel)}
.abas a[aria-current="true"] .pill{background:var(--amarelo);color:#14201b}
.cupons{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.cupons>div{border:1px solid var(--linha);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;font-size:.88rem}

/* ---------- tablet */
@media (max-width:1100px){
  .grade-2{grid-template-columns:1fr}
  .conteudo{padding:20px 22px 64px}
}
/* ---------- celular e tablet em pé: menu inferior */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .lateral{display:none}
  .barra-movel{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:5;
    padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--lateral);color:#fff}
  .barra-movel .marca{padding:0;font-size:1rem}
  .abas-moveis{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:5;
    background:var(--superficie);border-top:1px solid var(--linha);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .abas-moveis a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;font-weight:600;color:var(--suave);text-decoration:none;padding:4px 0;position:relative}
  .abas-moveis a[aria-current="page"]{color:var(--verde)}
  .abas-moveis svg{width:22px;height:22px}
  .abas-moveis .cont{position:absolute;top:0;right:22%;background:var(--amarelo);color:#14201b;border-radius:999px;font-size:.6rem;padding:0 5px;font-weight:700}
  .conteudo{padding:16px 16px 96px;gap:16px}
  .topo h1{font-size:1.4rem}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:10px 12px}.kpi b{font-size:1.35rem}
  .painel{padding:14px}
  form.grade,.duas{grid-template-columns:1fr}
  /* tabela -> cartões */
  table.cartoes thead{display:none}
  table.cartoes,table.cartoes tbody,table.cartoes tr,table.cartoes td{display:block;width:100%}
  table.cartoes tr{border:1px solid var(--linha);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--superficie)}
  table.cartoes td{border:0;padding:4px 0;display:flex;gap:10px;justify-content:space-between}
  table.cartoes td::before{content:attr(data-r);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);font-weight:700;flex:none}
  table.cartoes td.principal{font-weight:700;font-size:1rem}
  table.cartoes td.principal::before,table.cartoes td.botoes::before{content:none}
  table.cartoes td.botoes{justify-content:flex-start;flex-wrap:wrap;padding-top:8px}
  td .acoes{flex-wrap:wrap}
}
@media (prefers-reduced-motion:no-preference){button,.botao{transition:filter .15s}button:hover,.botao:hover{filter:brightness(1.06)}}