/* ═══════════════════════════════════════════════════════════
   Estilo comum das telas.

   Sem bundler, igual ao MCD completo. As cores ficam em CSS vars porque
   white-label troca cor por loja — quando as configuracoes por tenant
   entrarem, é só sobrescrever :root com o que vier do /api/config.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#0f0f0f; --surface:#1a1a1a; --border:#2a2a2a;
  --accent:#e8c96d; --accent2:#c9a84c;
  --text:#e8e8e8; --muted:#888;
  --ok:#4caf78; --danger:#e05555; --warn:#e09a30;
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}

/* Coluna central das telas de entrada (login, cadastro) */
.centro{
  display:flex; align-items:flex-start; justify-content:center;
  min-height:100vh; padding:24px 16px;
}
.caixa{width:100%; max-width:420px}

h1{font-size:22px; margin:0 0 4px}
h2{font-size:16px; margin:0 0 12px; font-weight:600}
.sub{color:var(--muted); font-size:14px; margin:0 0 24px}

/* ── Formulário ─────────────────────────────────────────── */
label{display:block; font-size:13px; color:var(--muted); margin:16px 0 6px}

input{
  width:100%; padding:13px 14px; background:var(--surface);
  border:1px solid var(--border); border-radius:8px; color:var(--text);
  /* 16px não é estética: abaixo disso o iOS dá zoom sozinho ao focar,
     e a tela inteira sai do lugar. */
  font-size:16px;
}
input:focus{outline:none; border-color:var(--accent)}

button{
  width:100%; padding:15px; border:0; border-radius:8px;
  font-size:16px; font-weight:600; cursor:pointer;
  background:var(--accent); color:#1a1a1a;
}
button:hover:not(:disabled){background:var(--accent2)}
button:disabled{opacity:.5; cursor:default}
button.secundario{background:transparent; color:var(--text); border:1px solid var(--border)}
button.secundario:hover:not(:disabled){border-color:var(--accent); background:transparent}

.dica{font-size:12px; color:var(--muted); margin:6px 0 0}

/* ── Avisos ─────────────────────────────────────────────── */
.aviso{
  margin-top:16px; padding:12px 14px; border-radius:8px; font-size:14px;
  border:1px solid var(--border); background:var(--surface); display:none;
}
.aviso.erro{border-color:var(--danger); color:#ffb0b0}
.aviso.ok{border-color:var(--ok); color:#9fe0bd}
.aviso.alerta{border-color:var(--warn); color:#f0c890}

/* ── Cartões ────────────────────────────────────────────── */
.cartao{
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:16px; margin-bottom:12px;
}
.cartao.travado{opacity:.45}

.grade{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

.rodape{margin-top:24px; text-align:center; font-size:14px; color:var(--muted)}
.rodape a{color:var(--accent)}

/* ── Barra do topo ──────────────────────────────────────── */
/* overflow-x em vez de wrap: barra em flex-nowrap com mais itens do que
   cabem soma a largura de todos e vira a largura do documento — aí todo
   position:fixed da página centraliza numa largura falsa e sai da tela.
   Ver as armadilhas de celular no CLAUDE.md do MCD completo. */
.topo{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:var(--surface);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.topo::-webkit-scrollbar{display:none}
.topo > *{flex:0 0 auto; white-space:nowrap}
.topo .nome{font-weight:600; margin-right:auto; overflow:hidden; text-overflow:ellipsis}

.conteudo{max-width:760px; margin:0 auto; padding:20px 16px}

.sair{
  background:transparent; border:0; color:var(--muted);
  font-size:14px; cursor:pointer; padding:6px; width:auto;
}
.sair:hover{color:var(--text); background:transparent}

.selo{
  display:inline-block; padding:3px 9px; border-radius:99px;
  font-size:12px; font-weight:600;
}
.selo.ok{background:rgba(76,175,120,.15); color:var(--ok)}
.selo.alerta{background:rgba(224,154,48,.15); color:var(--warn)}
.selo.ruim{background:rgba(224,85,85,.15); color:var(--danger)}