/* ==========================================================================
   Estilos das telas CONECTADAS (modo local-api). Usa as variáveis do design
   system de site.css (cores, raios, fontes). Adiciona apenas: selo de modo,
   estados de carregando/erro, layout do checkout, caixa de revelar key e
   tabelas das ferramentas dev. Reaproveita .badge/.notice/.btn/.simple.
   ========================================================================== */

/* Selo de modo (dados locais de teste). */
.c-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-px, monospace); font-size: .74rem; line-height: 1.2;
  padding: 8px 12px; border-radius: var(--r-sm, 8px);
  border: 1px solid var(--line, #333); margin: 0 0 16px;
}
.c-badge::before { content: "●"; font-size: .7em; }
.c-badge--local { color: var(--cyan, #4dd); border-color: color-mix(in srgb, var(--cyan, #4dd) 45%, transparent); background: color-mix(in srgb, var(--cyan, #4dd) 8%, transparent); }
.c-badge--demo { color: var(--gold, #db3); border-color: color-mix(in srgb, var(--gold, #db3) 45%, transparent); background: color-mix(in srgb, var(--gold, #db3) 8%, transparent); }

/* Estados de carregando / erro / vazio. */
.c-loading { color: var(--muted, #999); padding: 24px 0; text-align: center; }
.c-error {
  border: 1px solid color-mix(in srgb, var(--danger, #e55) 50%, transparent);
  background: color-mix(in srgb, var(--danger, #e55) 8%, transparent);
  color: var(--text, #eee); border-radius: var(--r-md, 12px); padding: 16px; text-align: center;
}
.c-error .btn { margin-top: 12px; }
.c-empty { color: var(--muted, #999); padding: 18px 0; text-align: center; }

/* Checkout: resumo do plano + formulário. */
.checkout-wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.checkout-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .checkout-grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.checkout-resumo { border: 1px solid var(--line, #333); border-radius: var(--r-md, 12px); padding: 18px; background: var(--panel, #1a1a1a); }
.checkout-resumo .preco { font-family: var(--font-px, monospace); font-size: 1.6rem; color: var(--gold, #db3); margin: 6px 0; }
.checkout-form .campo { display: block; margin: 0 0 14px; }
.checkout-form .campo > span { display: block; font-size: .88rem; color: var(--muted, #999); margin-bottom: 6px; }
.checkout-form input[type=text], .checkout-form input[type=email] {
  width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: var(--r-sm, 8px);
  border: 1px solid var(--line, #333); background: var(--bg, #111); color: var(--text, #eee); font: inherit;
}
.checkout-form input[aria-invalid=true] { border-color: var(--danger, #e55); }
.checkout-form .erro { display: block; color: var(--danger, #e55); font-size: .82rem; min-height: 1em; margin-top: 4px; }
.checkout-form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted, #ccc); margin: 6px 0 14px; }
.pedido-resultado { border: 1px solid var(--line, #333); border-radius: var(--r-md, 12px); padding: 18px; margin-top: 20px; }
.pedido-resultado .ref { font-family: var(--font-px, monospace); }

/* Caixa de revelar key (portal/admin) — exibição única, some ao ocultar. */
.key-reveal { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.key-reveal code { font-family: var(--font-px, monospace); font-size: 1rem; padding: 8px 12px; border: 1px dashed var(--gold, #db3); border-radius: var(--r-sm, 8px); color: var(--gold, #db3); user-select: all; }
.key-timer { font-size: .8rem; color: var(--muted, #999); }

/* Ferramentas dev — cabeçalho de aviso e tabelas de ações. */
.dev-aviso { border: 1px dashed var(--warn, #db3); border-radius: var(--r-md, 12px); padding: 12px 16px; margin: 0 0 18px; color: var(--warn, #db3); font-size: .9rem; }
.dev-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dev-actions .btn { padding: 6px 12px; font-size: .82rem; }

/* Admin conectado — KPIs e cartões. */
.c-kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0 0 22px; }
.c-kpi { border: 1px solid var(--line, #333); border-radius: var(--r-md, 12px); padding: 16px; background: var(--panel, #16181d); }
.c-kpi .v { font-family: var(--font-px, monospace); font-size: 1.5rem; display: block; }
.c-kpi .l { color: var(--muted, #999); font-size: .82rem; display: block; margin-top: 4px; }
.c-section h2 { margin: 0 0 14px; }
/* Tabelas largas rolam dentro do próprio quadro — a página nunca ganha scroll horizontal
   (ex.: Licenças/Auditoria em 768px). Só rola quando a tabela excede a largura disponível. */
.c-tblwrap { overflow-x: auto; max-width: 100%; }
/* Para o .c-tblwrap poder rolar, a coluna de conteúdo e a seção precisam poder encolher
   abaixo da largura do conteúdo (min-width:0). A coluna implícita 'auto' do grid .conteudo
   crescia até a tabela mais larga e empurrava a página; minmax(0,1fr) a limita ao espaço
   disponível. Escopo restrito ao painel conectado (não altera o admin estático aprovado). */
.app-conectado .conteudo { grid-template-columns: minmax(0, 1fr); }
.app-conectado .c-section { min-width: 0; }
.c-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.c-toolbar input[type=search], .c-toolbar input[type=text] { padding: 9px 11px; border-radius: var(--r-sm, 8px); border: 1px solid var(--line, #333); background: var(--bg, #111); color: var(--text, #eee); font: inherit; }

/* --- Portal conectado: selo de ambiente (homologação), modo suporte, form de reembolso --- */
.c-badge--homolog { color: var(--cyan, #4dd); border-color: color-mix(in srgb, var(--cyan, #4dd) 45%, transparent); background: color-mix(in srgb, var(--cyan, #4dd) 8%, transparent); }
.btn-support { margin-left: 10px; font-size: .82rem; padding: 6px 12px; }
.btn-support[aria-pressed="true"] { border-color: var(--gold, #db3); color: var(--gold, #db3); }
/* Selects, textarea e formulário de cancelamento/reembolso no MESMO tema (inputs escuros). */
.app-conectado select, .app-conectado textarea, .reemb-form select, .reemb-form textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: var(--r-sm, 8px);
  border: 1px solid var(--line, #333); background: var(--bg, #111); color: var(--text, #eee); font: inherit;
}
.app-conectado select:focus-visible, .app-conectado textarea:focus-visible { outline: 2px solid var(--cyan, #4dd); outline-offset: 1px; }
.reemb-form textarea { min-height: 64px; resize: vertical; }
.reemb-form .reemb-fields label { font-size: .85rem; color: var(--muted, #9aa); margin-top: 2px; }
.reemb-item.bloco { border: 1px solid var(--line, #333); border-radius: var(--r-sm, 8px); background: color-mix(in srgb, var(--bg, #111) 92%, transparent); }

/* Comprovante imprimível (portal): imprime só o cabeçalho do comprovante + o histórico. */
.print-only { display: none; }
@media print {
  body { background: #fff; }
  body * { visibility: hidden; }
  #comprovante-cab, #comprovante-cab *, #bloco-compras, #bloco-compras * { visibility: visible; }
  #bloco-compras { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 0; }
  #comprovante-cab.print-only { display: block; }
  #btn-comprovante { display: none; }
}