/* MXS Consulta — painel de administração. Cores em variáveis; tema escuro pelo sistema. */
:root {
  color-scheme: light dark;
  --fundo: #f4f6f9; --cartao: #ffffff; --texto: #111827; --mudo: #6b7280; --linha: #e5e7eb;
  --principal: #2563eb; --principal-texto: #ffffff; --perigo: #dc2626; --ok: #059669; --aviso: #b45309;
  --suave-ok: #ecfdf5; --suave-perigo: #fef2f2; --suave-aviso: #fffbeb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0b1220; --cartao: #111a2e; --texto: #e5e7eb; --mudo: #94a3b8; --linha: #1f2a44;
    --principal: #3b82f6; --perigo: #f87171; --ok: #34d399; --aviso: #fbbf24;
    --suave-ok: #052e22; --suave-perigo: #3b0d0d; --suave-aviso: #3a2a05;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input { font: inherit; }
.centro { text-align: center; padding: 48px 16px; }
.mudo { color: var(--mudo); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

header { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--cartao); border-bottom: 1px solid var(--linha); }
header h1 { margin: 0; font-size: 16px; }
header nav { display: flex; gap: 4px; margin-left: 12px; }
header .direita { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.separador { padding: 6px 12px; border-radius: 8px; border: 0; background: transparent; color: var(--mudo); cursor: pointer; }
.separador.ativo { background: var(--fundo); color: var(--texto); font-weight: 600; }

main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.cartao h2 { margin: 0 0 4px; font-size: 15px; }
.cartao h3 { margin: 12px 0 6px; font-size: 13px; color: var(--mudo); text-transform: uppercase; letter-spacing: .03em; }
.topo { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.topo .acoes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.indicador .rotulo { font-size: 12px; color: var(--mudo); }
.indicador .valor { font-size: 15px; font-weight: 600; }

.botao { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--linha); background: var(--cartao); color: var(--texto); cursor: pointer; white-space: nowrap; }
.botao:hover { border-color: var(--mudo); }
.botao.principal { background: var(--principal); border-color: var(--principal); color: var(--principal-texto); }
.botao.perigo { color: var(--perigo); }
.botao:disabled { opacity: .5; cursor: default; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 12px; color: var(--mudo); }
.campo input, .campo select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); min-width: 0; }
.linha-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
th { font-size: 12px; color: var(--mudo); font-weight: 500; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-rolar { overflow-x: auto; }

.etiqueta { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--linha); }
.etiqueta.ok { color: var(--ok); background: var(--suave-ok); border-color: transparent; }
.etiqueta.perigo { color: var(--perigo); background: var(--suave-perigo); border-color: transparent; }
.etiqueta.aviso { color: var(--aviso); background: var(--suave-aviso); border-color: transparent; }
.mensagem { padding: 10px 12px; border-radius: 8px; margin: 8px 0; }
.mensagem.perigo { background: var(--suave-perigo); color: var(--perigo); }
.mensagem.aviso { background: var(--suave-aviso); color: var(--aviso); }
.mensagem.ok { background: var(--suave-ok); color: var(--ok); }

.login { max-width: 360px; margin: 10vh auto; }
.login .campo { margin-bottom: 10px; }
.login .botao { width: 100%; padding: 9px; }

dialog { border: 1px solid var(--linha); border-radius: 12px; background: var(--cartao); color: var(--texto); padding: 18px; width: min(760px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog h2 { margin: 0 0 8px; font-size: 16px; }
pre.saida { max-height: 60vh; overflow: auto; background: var(--fundo); padding: 10px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.chave { font-size: 15px; padding: 12px; background: var(--fundo); border-radius: 8px; word-break: break-all; user-select: all; }
.dialogo-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.pequeno { font-size: 12px; }
.subcartao { border-top: 1px solid var(--linha); margin-top: 12px; padding-top: 4px; }
textarea, select { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); }
textarea { width: 100%; resize: vertical; }
td textarea { min-height: 34px; }
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.botao { text-decoration: none; display: inline-block; }
tr.antiga td { opacity: .55; }
table.clicavel tbody tr { cursor: pointer; }
table.clicavel tbody tr:hover { background: var(--fundo); }
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 12px; }
.modulo { display: flex; gap: 6px; align-items: baseline; }
.conversa { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-height: 50vh; overflow: auto; }
.mensagem-conversa { padding: 8px 12px; border-radius: 10px; background: var(--fundo); max-width: 90%; }
.mensagem-conversa.suporte { align-self: flex-end; background: var(--suave-ok); }
.texto { white-space: pre-wrap; word-break: break-word; }
.anexos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.anexos img { max-height: 120px; border-radius: 6px; border: 1px solid var(--linha); }
.cartao.destaque { border-color: var(--ok); }
dialog { width: min(980px, calc(100vw - 32px)); }

@media (max-width: 640px) {
  header { flex-wrap: wrap; }
  header nav { margin-left: 0; }
}