/* ==========================================================================
   Radar XML RM - painel /admin
   Mesmo desenho do /admin do AprovacaoCompras (topbar branca, primaria
   indigo, fundo ardosia), em CSS proprio: sem CDN, compativel com a CSP.
   ========================================================================== */

:root {
  --primaria-50: #eef2ff;
  --primaria-100: #e0e7ff;
  --primaria-500: #6366f1;
  --primaria-600: #4f46e5;
  --primaria-700: #4338ca;

  --fundo: #f1f5f9;
  --superficie: #ffffff;
  --borda: #e2e8f0;
  --borda-forte: #cbd5e1;
  --texto: #0f172a;
  --texto-2: #475569;
  --texto-3: #64748b;
  --cabecalho-tabela: #f8fafc;

  --ok-fundo: #d1fae5;   --ok-texto: #065f46;
  --erro-fundo: #ffe4e6; --erro-texto: #9f1239;
  --aviso-fundo: #fef3c7; --aviso-texto: #92400e;
  --neutro-fundo: #e2e8f0; --neutro-texto: #334155;
  --info-fundo: #e0f2fe; --info-texto: #075985;
  --perigo: #e11d48;     --perigo-escuro: #be123c;

  --raio: 0.5rem;
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.06);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.5 var(--fonte);
}
a { color: var(--primaria-600); text-decoration: none; }
a:hover { color: var(--primaria-700); text-decoration: underline; }
h1 { font-size: 1.375rem; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 1rem; margin: 0 0 0.75rem; font-weight: 650; }
h3 { font-size: 0.875rem; margin: 1rem 0 0.5rem; font-weight: 650; color: var(--texto-2); }
p { margin: 0 0 0.5rem; }
code, .mono { font-family: var(--mono); font-size: 0.8125rem; }
.muted { color: var(--texto-3); }
.pequeno { font-size: 0.75rem; }
.direita { text-align: right; }
.nowrap { white-space: nowrap; }

/* Topbar ------------------------------------------------------------------ */
.topbar { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.topbar-conteudo {
  max-width: 80rem; margin: 0 auto; padding: 0.625rem 1rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 0.5rem; color: var(--texto); font-weight: 650; }
.marca:hover { text-decoration: none; color: var(--texto); }
.marca-icone {
  width: 2rem; height: 2rem; border-radius: 0.375rem; background: var(--primaria-600);
  color: #fff; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em;
}
img.marca-icone { display: block; object-fit: cover; background: #020617; }
.marca-sub { color: var(--texto-3); font-weight: 500; }
/* Marca do produto (telas de login): ícone do radar em imagem + nome em texto, em painel escuro
   como o da arte. O nome não vem da imagem: reduzido, o texto da arte se deforma. */
.logo-produto {
  display: flex; align-items: center; justify-content: center; gap: 0.625rem;
  max-width: 22rem; margin: 0 auto 1rem; padding: 0.75rem 1rem 0.75rem 0.5rem; border-radius: 0.5rem;
  background: linear-gradient(90deg, #000 0%, #000 30%, #071537 100%);
}
.logo-produto img { width: 4.5rem; height: 4.5rem; flex: none; border-radius: 0.75rem; }
.logo-produto-nome {
  display: flex; flex-direction: column; line-height: 0.95; font-weight: 800; font-style: italic;
  letter-spacing: -0.02em; font-size: 2rem;
}
.logo-produto-nome .radar { color: #e2e8f0; }
.logo-produto-nome .xml { color: #38bdf8; text-shadow: 0 0 0.75rem rgba(56, 189, 248, 0.55); }
.nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.nav a { padding: 0.375rem 0.75rem; border-radius: 0.375rem; color: var(--texto-2); font-weight: 500; }
.nav a:hover { background: var(--fundo); text-decoration: none; }
.nav a.ativo { background: var(--primaria-50); color: var(--primaria-700); }
.topbar-usuario { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; color: var(--texto-2); }

/* Estrutura ----------------------------------------------------------------- */
.conteudo { max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.rodape { text-align: center; color: var(--texto-3); font-size: 0.75rem; padding: 1.5rem 1rem; }
.grade-2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-cards { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.25rem; }
.coluna-inteira { grid-column: 1 / -1; }
.pilha { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (max-width: 900px) {
  .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .grade-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cartoes ------------------------------------------------------------------- */
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1.25rem; min-width: 0;
}
.cartao-numero .rotulo { margin-bottom: 0.25rem; }
.cartao-numero .valor { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.cartao-numero.ok .valor { color: var(--ok-texto); }
.cartao-numero.erro .valor { color: var(--erro-texto); }
.cartao-titulo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.cartao-titulo h2 { margin: 0; }
.lista-dados { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 0.75rem; }
.lista-dados dt { color: var(--texto-3); }
.lista-dados dd { margin: 0; }

/* Formularios --------------------------------------------------------------- */
.rotulo { display: block; font-size: 0.75rem; font-weight: 500; color: var(--texto-2); margin-bottom: 0.25rem; }
.campo {
  width: 100%; padding: 0.4375rem 0.625rem; border: 1px solid var(--borda-forte); border-radius: 0.375rem;
  background: #fff; color: var(--texto); font: inherit;
}
.campo:focus { outline: 2px solid var(--primaria-500); outline-offset: -1px; border-color: var(--primaria-500); }
.campo[disabled] { background: var(--fundo); color: var(--texto-3); }
textarea.campo { min-height: 4.5rem; resize: vertical; }
.campo-cor { width: 3rem; height: 2.25rem; padding: 0.125rem; }
.campo-curto { width: 5rem; padding: 0.25rem 0.5rem; }
.linha-campos { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-bottom: 0.75rem; }
.linha-campos .largo { grid-column: span 2; }
.grupo { margin-bottom: 0.75rem; }
.checagem { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--texto-2); margin-right: 1rem; }
.acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; }
.erro-campo { color: var(--perigo-escuro); font-size: 0.8125rem; }
fieldset { border: 1px dashed var(--borda-forte); border-radius: var(--raio); padding: 0.75rem; margin: 0 0 0.75rem; }
legend { padding: 0 0.375rem; color: var(--texto-2); font-weight: 600; font-size: 0.8125rem; }
details { margin: 0.75rem 0; }
summary { cursor: pointer; color: var(--primaria-600); font-weight: 500; }
form.inline { display: inline; }

/* Botoes -------------------------------------------------------------------- */
.botao, .botao-sec, .botao-perigo, .botao-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding: 0.4375rem 0.875rem; border-radius: 0.375rem; font: inherit; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap;
}
.botao { background: var(--primaria-600); color: #fff; }
.botao:hover { background: var(--primaria-700); color: #fff; text-decoration: none; }
.botao-sec { background: #fff; color: var(--texto); border-color: var(--borda-forte); }
.botao-sec:hover { background: var(--fundo); text-decoration: none; color: var(--texto); }
.botao-perigo { background: var(--perigo); color: #fff; }
.botao-perigo:hover { background: var(--perigo-escuro); }
.botao-link { background: none; border: none; color: var(--primaria-600); padding: 0.125rem 0.25rem; font-weight: 500; }
.botao-link:hover { text-decoration: underline; }
.botao-link.perigo { color: var(--perigo-escuro); }
.botao-pequeno { padding: 0.25rem 0.5rem; font-size: 0.75rem; }

/* Pilulas ------------------------------------------------------------------- */
.pilula { display: inline-block; border-radius: 999px; padding: 0.0625rem 0.5rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.pilula.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.pilula.erro { background: var(--erro-fundo); color: var(--erro-texto); }
.pilula.aviso { background: var(--aviso-fundo); color: var(--aviso-texto); }
.pilula.neutro { background: var(--neutro-fundo); color: var(--neutro-texto); }
.pilula.info { background: var(--info-fundo); color: var(--info-texto); }

/* Avisos (flash) -------------------------------------------------------------- */
.flash { border-radius: var(--raio); padding: 0.75rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; word-break: break-word; }
.flash.sucesso { background: var(--ok-fundo); color: var(--ok-texto); border-color: #a7f3d0; }
.flash.erro { background: var(--erro-fundo); color: var(--erro-texto); border-color: #fecdd3; }
.flash.aviso { background: var(--aviso-fundo); color: var(--aviso-texto); border-color: #fde68a; }

/* Tabelas --------------------------------------------------------------------- */
.tabela-rolagem { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--cabecalho-tabela); color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.6875rem; font-weight: 600; text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--borda);
}
tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
tbody tr:hover { background: var(--cabecalho-tabela); }
td.vazio { text-align: center; color: var(--texto-3); padding: 1.5rem; }
.sub { display: block; color: var(--texto-3); font-size: 0.75rem; font-family: var(--mono); }
.detalhe-json { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acao-falha { color: var(--perigo-escuro); font-weight: 600; }

/* Login ------------------------------------------------------------------------ */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.tela-login .cartao { width: 100%; max-width: 24rem; }
.tela-login .marca { justify-content: center; margin-bottom: 1rem; }
.qr { display: block; width: 12rem; height: 12rem; margin: 0.75rem auto; background: #fff; padding: 0.5rem; border: 1px solid var(--borda); border-radius: var(--raio); }
.segredo { display: block; text-align: center; font-family: var(--mono); background: var(--fundo); padding: 0.5rem; border-radius: 0.375rem; word-break: break-all; }
.campo-codigo { text-align: center; font-size: 1.375rem; letter-spacing: 0.4em; font-family: var(--mono); }

/* Identidade visual: previa ---------------------------------------------------- */
.previa-login { border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; text-align: center; background: var(--fundo); }
.previa-login .faixa { height: 0.375rem; border-radius: 999px; margin-bottom: 0.75rem; background: var(--primaria-600); }
.previa-login img { max-height: 3rem; max-width: 100%; }

/* Pagina inicial publica -------------------------------------------------------- */
.inicio { min-height: 100vh; display: grid; place-items: center; padding: 1rem; text-align: center; }
.inicio .cartao { max-width: 32rem; }