/* =====================================================
   style.css — Comandas
   Feito para usar com uma mão, em pé, no sol:
   alvos grandes, contraste alto, números tabulares.
   Fonte do sistema: abre na hora, mesmo sem internet.
   ===================================================== */

:root,
[data-theme="claro"] {
  --bg: #EEF1EF;
  --sup: #FFFFFF;
  --sup2: #E2E7E4;
  --tinta: #1E2A2F;
  --texto2: #56636A;
  --borda: #CDD5D1;
  --amarelo: #F2B705;
  --sobre-amarelo: #1E2A2F;
  --verde: #1C7543;
  --vermelho: #B3261E;
  --primario: #1E2A2F;
  --sobre-primario: #FFFFFF;
  --sombra: 0 1px 0 rgba(30, 42, 47, .12);
  --icone-fundo: #F1ECE2;
  color-scheme: light;
}

[data-theme="escuro"] {
  --bg: #12181B;
  --sup: #1B2327;
  --sup2: #263034;
  --tinta: #ECF0EE;
  --texto2: #9AA7AC;
  --borda: #34413F;
  --amarelo: #F2B705;
  --sobre-amarelo: #1E2A2F;
  --verde: #2E9E5B;
  --vermelho: #EF6A61;
  --primario: #E3E8E6;
  --sobre-primario: #12181B;
  --sombra: none;
  --icone-fundo: #2E383C;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  color: var(--tinta);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  overscroll-behavior-y: none;
}
body.travado { overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
[hidden] { display: none !important; }

svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Carregando e login ---------- */
.carregando {
  min-height: 100vh; display: grid; place-items: center;
  color: var(--texto2);
}

.tela-login {
  min-height: 100vh; display: grid; place-items: center;
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}
.cartao-login { width: 100%; max-width: 380px; }
.cartao-login h1 { font-size: 30px; margin: 12px 0 24px; letter-spacing: -.01em; }
.login-logo { border-radius: 18px; display: block; }
.erro-texto { color: var(--vermelho); min-height: 1.4em; margin: 4px 0 12px; font-size: 15px; }

/* ---------- Estrutura ---------- */
.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--bg);
}
.topo h1 { font-size: 24px; margin: 0; letter-spacing: -.01em; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto2); text-align: right; }
.status i { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); flex: none; }
.status[data-estado="sync"] i { background: var(--amarelo); }
.status[data-estado="off"] i { background: var(--vermelho); }
.status[data-estado="off"] { color: var(--tinta); font-weight: 600; }

main { padding: 4px 14px calc(96px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--sup);
  border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  min-height: 64px; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 12px; color: var(--texto2);
}
.nav-item.ativo { color: var(--tinta); font-weight: 700; }
.nav-item.ativo svg { stroke-width: 2.6; }

/* ---------- Botões ---------- */
.btn {
  min-height: 50px; padding: 0 18px;
  border: 0; border-radius: 12px;
  font-weight: 650;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-grande { min-height: 58px; font-size: 18px; }
.btn-bloco { display: flex; width: 100%; margin: 10px 0; }
.btn-primario { background: var(--primario); color: var(--sobre-primario); }
.btn-secundario { background: var(--sup2); color: var(--tinta); }
.btn-sucesso { background: var(--verde); color: #fff; }
.btn-texto-perigo { background: none; color: var(--vermelho); min-height: 50px; }
.btn:active:not(:disabled) { transform: scale(.98); }

.btn-icone {
  width: 48px; height: 48px; flex: none;
  border: 0; border-radius: 12px; background: none;
  display: grid; place-items: center; font-size: 20px;
}
.btn-icone:active { background: var(--sup2); }

/* ---------- Campos ---------- */
.rotulo { display: block; margin: 12px 0; font-size: 15px; font-weight: 600; }
.rotulo small { display: block; font-weight: 400; color: var(--texto2); }
.campo {
  display: block; width: 100%; margin-top: 6px;
  min-height: 52px; padding: 12px 14px;
  border: 2px solid var(--borda); border-radius: 12px;
  background: var(--sup); font-size: 18px;
}
.campo:focus { border-color: var(--tinta); outline: none; }
textarea.campo { min-height: 90px; resize: vertical; line-height: 1.5; }
select.campo { appearance: auto; }
.check { display: flex; align-items: center; gap: 12px; min-height: 52px; font-weight: 600; }
.check input { width: 24px; height: 24px; accent-color: var(--verde); }

.linha-campo { display: flex; gap: 10px; align-items: flex-end; margin: 10px 0; }
.linha-campo > .campo, .linha-campo > .rotulo { flex: 1; margin-top: 0; margin-bottom: 0; }
.linha-campo > .btn { min-height: 52px; }

/* ---------- Textos de apoio ---------- */
.vazio { color: var(--texto2); text-align: center; padding: 18px 8px; margin: 0; }
.dica { color: var(--texto2); font-size: 14px; margin: 8px 2px 14px; }
.secao { font-size: 15px; color: var(--texto2); margin: 22px 2px 8px; font-weight: 650; }
.rotulo-grupo { font-weight: 700; margin: 18px 0 8px; }

/* ---------- Mesas ---------- */
.painel-aberto {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 4px 2px 12px; color: var(--texto2);
}
.painel-aberto strong { color: var(--tinta); font-size: 22px; }

.grade-mesas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 6px;
}
@media (min-width: 520px) { .grade-mesas { grid-template-columns: repeat(4, 1fr); } }

.mesa {
  min-height: 104px; padding: 10px 8px;
  border: 2px dashed var(--borda); border-radius: 16px;
  background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.mesa-num { font-size: 38px; font-weight: 800; line-height: 1; color: var(--texto2); letter-spacing: -.02em; }
.mesa-info { font-size: 13px; color: var(--texto2); }
.mesa-valor { font-size: 17px; font-weight: 750; }
.mesa.ocupada {
  border: 2px solid var(--amarelo);
  background: var(--amarelo);
  color: var(--sobre-amarelo);
  box-shadow: var(--sombra);
}
.mesa.ocupada .mesa-num,
.mesa.ocupada .mesa-info { color: var(--sobre-amarelo); }
.mesa:active { transform: scale(.97); }

.lista-balcao { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.chip-comanda {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 16px;
  border: 0; border-radius: 14px;
  background: var(--amarelo); color: var(--sobre-amarelo); font-weight: 650;
  text-align: left;
}
.chip-comanda small { font-weight: 400; opacity: .8; margin-left: 6px; }

/* ---------- Tela da comanda ---------- */
.tela-comanda {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.barra-comanda {
  display: flex; align-items: center; gap: 4px;
  padding: calc(6px + env(safe-area-inset-top)) max(6px, calc((100% - 972px) / 2)) 6px;
  background: var(--sup);
  border-bottom: 1px solid var(--borda);
}
.titulo-comanda {
  flex: 1; min-width: 0; min-height: 52px;
  border: 0; background: none; text-align: left; padding: 4px 6px;
  display: flex; flex-direction: column; justify-content: center;
}
.titulo-comanda strong { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titulo-comanda small { color: var(--texto2); font-size: 13px; }

.comanda-corpo { flex: 1; overflow-y: auto; padding: 12px 12px 20px; -webkit-overflow-scrolling: touch; }

.comanda-conteudo { max-width: 960px; margin: 0 auto; }

.secao-cat { font-size: 15px; font-weight: 700; color: var(--texto2); margin: 14px 2px 8px; }
.secao-cat:first-child { margin-top: 2px; }

.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (min-width: 700px) { .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }

.produto {
  position: relative;
  min-height: 112px; padding: 10px 12px 12px;
  border: 0; border-radius: 14px;
  background: var(--sup); box-shadow: var(--sombra);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left;
}
.produto:active { background: var(--sup2); transform: scale(.98); }
.produto .ilustra { width: 52px; height: 52px; }
.produto-texto { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.produto-nome { font-weight: 700; font-size: 17px; line-height: 1.2; }
.produto-preco { font-size: 14px; color: var(--texto2); }
.produto .badge { top: 10px; right: 10px; min-width: 32px; height: 32px; border-radius: 16px; font-size: 17px; }

/* Desenhos dos produtos */
svg.ilustra { flex: none; fill: none; stroke: none; }
.ilustra-fundo { fill: var(--icone-fundo); }
.badge {
  position: absolute; top: 8px; right: 8px;
  min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 14px; background: var(--tinta); color: var(--bg);
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
}

.lista-itens { display: flex; flex-direction: column; gap: 8px; }
.item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--sup);
}
.item-desc { min-width: 0; display: flex; flex-direction: column; }
.item-nome { font-weight: 650; }
.item-nome em { font-style: normal; color: var(--texto2); font-weight: 400; }
.item-desc small { color: var(--texto2); font-size: 14px; }
.item-desc b { color: var(--tinta); }

.stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.stepper button {
  width: 48px; height: 48px; border: 0; border-radius: 12px;
  background: var(--sup2); font-size: 24px; font-weight: 700;
  display: grid; place-items: center;
}
.stepper button svg { width: 20px; height: 20px; color: var(--vermelho); }
.stepper span { min-width: 30px; text-align: center; font-weight: 800; font-size: 19px; }
.stepper.grande span { min-width: 44px; font-size: 22px; }

.barra-total {
  display: flex; align-items: center; gap: 12px;
  padding: 10px max(12px, calc((100% - 960px) / 2)) calc(10px + env(safe-area-inset-bottom));
  background: var(--sup); border-top: 1px solid var(--borda);
}
.barra-total-valor { flex: 1; display: flex; flex-direction: column; }
.barra-total-valor small { color: var(--texto2); font-size: 13px; }
.barra-total-valor strong { font-size: 28px; line-height: 1.1; letter-spacing: -.01em; }
.barra-total .btn { flex: 1.3; }

/* ---------- Janela de baixo (sheet) ---------- */
.sheet-fundo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(10, 15, 18, .5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .18s ease;
}
.sheet-fundo.aberto { opacity: 1; }
.sheet {
  width: 100%; max-width: 640px; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  transform: translateY(24px); transition: transform .18s ease;
}
.sheet-fundo.aberto .sheet { transform: none; }
.sheet-alta { max-height: 95vh; }
.sheet-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 8px 4px 18px;
}
.sheet-topo h2 { font-size: 20px; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-corpo { overflow-y: auto; padding: 4px 16px calc(18px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }

.opcao {
  width: 100%; min-height: 60px; margin: 0 0 8px; padding: 8px 16px;
  border: 0; border-radius: 14px; background: var(--sup);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; font-weight: 600;
}
.opcao small { display: block; font-weight: 400; color: var(--texto2); font-size: 14px; }
.opcao span small { display: inline; margin-left: 6px; }
.opcao-perigo { color: var(--vermelho); }
.opcao:active { background: var(--sup2); }

.grade-opcoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opcao-grande {
  min-height: 70px; padding: 8px 12px;
  border: 2px solid transparent; border-radius: 14px; background: var(--sup);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
}
.opcao-grande small { font-weight: 400; color: var(--texto2); font-size: 14px; }
.opcao-grande.marcado { border-color: var(--tinta); background: var(--sup2); }

.grade-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mesa-mini {
  min-height: 58px; border: 2px dashed var(--borda); border-radius: 12px; background: transparent;
  font-size: 20px; font-weight: 800;
}
.mesa-mini:first-child { grid-column: span 4; font-size: 17px; }
.mesa-mini.ocupada { background: var(--amarelo); color: var(--sobre-amarelo); border: 2px solid var(--amarelo); }
.mesa-mini.marcado { outline: 3px solid var(--tinta); outline-offset: 1px; }

/* ---------- Fechamento ---------- */
.linha-valor {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 2px; color: var(--texto2);
}
.linha-valor strong, .linha-valor span:last-child { color: var(--tinta); }
.linha-valor.troco { font-size: 20px; padding-top: 12px; }
.linha-valor.troco strong { font-size: 28px; }
.linha-valor.caixa { margin-top: 14px; border-top: 1px solid var(--borda); font-weight: 600; }
.linha-valor.caixa strong { font-size: 22px; }

.total-grande {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 2px; border-top: 1px solid var(--borda); margin-top: 4px;
}
.total-grande span { font-weight: 600; }
.total-grande strong { font-size: 34px; letter-spacing: -.02em; }
.neg { color: var(--vermelho) !important; }

.ajuste { margin: 4px 0 8px; }
.ajuste summary { min-height: 44px; display: flex; align-items: center; color: var(--texto2); font-weight: 600; }

.seg { display: flex; gap: 6px; margin: 8px 0; padding: 4px; border-radius: 14px; background: var(--sup2); }
.seg button {
  flex: 1; min-height: 46px; border: 0; border-radius: 10px; background: transparent; font-weight: 650;
}
.seg button.marcado { background: var(--sup); box-shadow: var(--sombra); }
.seg-curto { flex: none; margin: 0; }
.seg-curto button { min-width: 56px; }

.grade-formas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grade-formas.tres { grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; }
.forma {
  min-height: 62px; border: 0; border-radius: 14px;
  background: var(--primario); color: var(--sobre-primario);
  font-size: 18px; font-weight: 700;
}
.forma:active { transform: scale(.97); }

.pag { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.pag-nome { flex: 1; font-weight: 700; }
.campo-valor { flex: 0 0 140px; margin: 0; text-align: right; }

.grade-notas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.grade-notas button {
  min-height: 54px; border: 2px solid var(--borda); border-radius: 12px; background: var(--sup);
  font-weight: 750; font-size: 17px;
}
.grade-notas button:active { background: var(--sup2); }

.falta { min-height: 1.4em; margin: 10px 2px 0; color: var(--vermelho); font-weight: 600; }

/* ---------- Avisos de preço ---------- */
.sem-preco { color: var(--vermelho) !important; font-weight: 650; }
.aviso {
  margin: 10px 0 0; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--vermelho) 12%, var(--sup)); color: var(--tinta); font-size: 15px;
}
.linha-modelo { cursor: pointer; }
.linha-modelo input { width: 26px; height: 26px; flex: none; accent-color: var(--verde); }

/* ---------- Listas (clientes, produtos, resumo) ---------- */
.lista { display: flex; flex-direction: column; gap: 6px; }
.linha-lista {
  width: 100%; min-height: 58px; padding: 8px 14px;
  border: 0; border-radius: 12px; background: var(--sup);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left;
}
.linha-lista > span { min-width: 0; display: flex; flex-direction: column; }
.linha-lista > .linha-texto { flex: 1; }
.linha-lista .ilustra-p { width: 42px; height: 42px; margin-left: -4px; }

.grade-desenhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-bottom: 6px; }
.desenho-op {
  min-height: 92px; padding: 6px 4px;
  border: 2px solid transparent; border-radius: 14px; background: var(--sup);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.desenho-op .ilustra { width: 48px; height: 48px; }
.desenho-op small { font-size: 12px; line-height: 1.15; color: var(--texto2); text-align: center; }
.desenho-op.marcado { border-color: var(--tinta); background: var(--sup2); }
.desenho-op.marcado small { color: var(--tinta); font-weight: 650; }
.linha-lista small { color: var(--texto2); font-size: 14px; }
.linha-lista b { flex: none; }
.linha-lista.estatica { min-height: 50px; }
.deve { color: var(--vermelho); }
.pagou { color: var(--verde); }

.linha-produto { display: flex; gap: 8px; align-items: center; }
.linha-produto .linha-lista { flex: 1; }
.linha-produto.inativo .linha-lista { opacity: .5; }

.interruptor {
  flex: none; width: 60px; height: 36px; border: 0; border-radius: 18px;
  background: var(--borda); position: relative;
}
.interruptor i {
  position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.interruptor.ligado { background: var(--verde); }
.interruptor.ligado i { transform: translateX(24px); }

.linha-ajuste { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 2px; }

/* ---------- Relatórios ---------- */
.seg-periodo { margin: 0 0 12px; }
.seg-periodo button { font-size: 15px; padding: 0 4px; }

.destaque {
  padding: 16px 18px; border-radius: 16px; background: var(--primario); color: var(--sobre-primario);
  display: flex; flex-direction: column; gap: 2px;
}
.destaque span { font-weight: 600; opacity: .85; }
.destaque strong { font-size: 40px; letter-spacing: -.02em; line-height: 1.1; }
.destaque small { opacity: .85; font-size: 14px; }

.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.numeros div { background: var(--sup); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; min-width: 0; }
.numeros small { color: var(--texto2); font-size: 13px; }
.numeros strong { font-size: 16px; white-space: nowrap; }

.grafico { position: relative; height: 220px; padding: 10px 8px 6px; border-radius: 14px; background: var(--sup); }
.dica-grafico { margin-top: -4px; }
.detalhe { margin-top: 10px; }
.detalhe summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--texto2); }

.pagamentos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--sup); }
.grafico-pizza { position: relative; width: 150px; height: 150px; flex: none; }
.lista-formas { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-formas div { display: flex; align-items: center; gap: 8px; }
.lista-formas i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.lista-formas span { flex: 1; }
.lista-formas small { width: 38px; text-align: right; color: var(--texto2); }
.lista-formas .desconto { padding-top: 6px; border-top: 1px solid var(--borda); color: var(--texto2); }
.lista-formas .desconto b { margin-right: 46px; color: var(--tinta); }

/* ---------- Aviso rápido ---------- */
.toast {
  position: fixed; left: 0; right: 0; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60;
  width: fit-content; max-width: calc(100% - 32px); margin: 0 auto; text-align: center;
  padding: 12px 18px; border-radius: 12px;
  background: var(--tinta); color: var(--bg); font-weight: 600;
  transform: translateY(12px); opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.mostrar { opacity: 1; transform: none; }
.toast.erro { background: var(--vermelho); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Conta, plano e cobrança ---------- */
.btn-texto { background: none; color: var(--texto2); min-height: 48px; font-weight: 600; }
.ok-texto { color: var(--verde) !important; }
.centro { text-align: center; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; }

.faixa-plano {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: calc(100% - 28px); max-width: 692px; margin: 0 auto 6px; padding: 10px 14px;
  border: 0; border-radius: 12px; text-align: left; font-size: 15px; font-weight: 600;
}
.faixa-plano b { flex: none; font-size: 14px; white-space: nowrap; }
.faixa-plano.amarela { background: var(--amarelo); color: var(--sobre-amarelo); }
.faixa-plano.vermelha { background: var(--vermelho); color: #fff; }

.status-plano { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--sup); font-weight: 650; }
.status-plano.fase-vencendo { background: var(--amarelo); color: var(--sobre-amarelo); }
.status-plano.fase-carencia,
.status-plano.fase-bloqueado { background: var(--vermelho); color: #fff; }
.cartao-plano { margin-top: 6px; }

.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.planos-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .planos-4 { grid-template-columns: repeat(4, 1fr); } }
.planos button {
  min-height: 78px; padding: 8px 4px; border: 2px solid transparent; border-radius: 14px; background: var(--sup);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.planos button strong { font-size: 15px; }
.planos button span { font-weight: 750; }
.planos button small { font-size: 12px; color: var(--texto2); }
.planos button.marcado { border-color: var(--tinta); background: var(--sup2); }

.pix { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--sup); text-align: center; }
.qr-pix { width: 200px; max-width: 100%; height: auto; image-rendering: pixelated; background: #fff; padding: 6px; border-radius: 10px; }
.pix-valor { font-size: 22px; font-weight: 800; margin: 8px 0; }
.pix-valor small { font-size: 15px; font-weight: 600; color: var(--texto2); }
.pix-codigo { font-size: 13px; font-family: ui-monospace, Menlo, Consolas, monospace; min-height: 70px; word-break: break-all; text-align: left; }
.pix .dica { margin-bottom: 0; }

.btn-whats { background: #1FA855; color: #fff; text-decoration: none; }
.campo-codigo { text-transform: uppercase; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; font-size: 22px; text-align: center; }

/* ---------- Painel do administrador ---------- */
.pagina-admin main { padding-bottom: 40px; }
.pagina-admin .topo .btn { min-height: 44px; text-decoration: none; white-space: nowrap; }
.seg-filtro button { font-size: 14px; }
.selo {
  flex: none; display: flex; flex-direction: column; align-items: flex-end;
  padding: 4px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; background: var(--sup2);
}
.selo small { font-weight: 400; font-size: 12px; color: inherit; opacity: .85; }
.selo-teste { background: color-mix(in srgb, #2A9DB0 20%, var(--sup)); }
.selo-ativo { background: color-mix(in srgb, var(--verde) 20%, var(--sup)); }
.selo-vencendo { background: var(--amarelo); color: var(--sobre-amarelo); }
.selo-carencia, .selo-bloqueado { background: var(--vermelho); color: #fff; }
.codigo-gerado {
  margin: 12px 0; padding: 16px; border-radius: 14px; background: var(--primario); color: var(--sobre-primario);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.codigo-gerado strong { font-size: 34px; }