/* ── orion · padrao.css ─────────────────────────────────────────────────
   Camada do padrão dos apps de /srv por cima do Basecoat 1.0.2.
   Ordem no <head>:  basecoat/basecoat.css → orion/padrao.css → marca/marca.css

   - O Basecoat põe os componentes em @layer components. Este arquivo fica
     FORA de @layer, então qualquer regra daqui vence o Basecoat, seja qual
     for a especificidade. Por isso só há seletores com classe própria (ou
     com a classe do componente); nunca `button {}`, `a {}`, `h2 {}` soltos.
   - Cores: só aqui (neutros e estados) e no marca.css (cor do app). Tela
     de app não usa hex: usa os tokens abaixo.
   - Claro = neutros do Basecoat. Escuro = neutros do Orion (superfícies
     cinza levantadas sobre fundo quase preto, texto gelo).
   ─────────────────────────────────────────────────────────────────────── */

@import url('fontes.css');   /* Space Grotesk + IBM Plex Mono, servidas pelo app */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Escala de texto */
  --texto-titulo:  1.5rem;     /* 24px · h1 da página, peso 600 */
  --texto-secao:   1rem;       /* 16px · h2 de seção, título de card, peso 600 */
  --texto-corpo:   .875rem;    /* 14px · corpo, tabela, campo (= text-sm do Basecoat) */
  --texto-legenda: .75rem;     /* 12px · legenda, rótulo de grupo, sobretítulo */
  --texto-mono:    .8125rem;   /* 13px · CPF/CNPJ, código, id */

  /* Espaço (passo de 4px) */
  --esp-1: .25rem;  --esp-2: .5rem;  --esp-3: .75rem;  --esp-4: 1rem;
  --esp-5: 1.5rem;  --esp-6: 2rem;   --esp-7: 3rem;

  /* Medidas */
  --radius: .625rem;                       /* base 10px → botão/campo 8px (md), card e diálogo 14px (xl), badge pílula */
  --largura-max: 1920px;                   /* teto do conteúdo e do cabeçalho */
  --largura-estreita: 56rem;               /* .pagina-estreita (leitura, formulário longo) */
  --largura-hub: 70rem;                    /* .hub */
  --gutter: clamp(1rem, 2.5vw, 2rem);      /* 16px no celular → 32px de 1280px para cima */
  --topo-altura: 3.5rem;                   /* cabeçalho de 56px */
  --painel-largura: 30rem;                 /* 480px */
  --painel-largura-larga: 45rem;           /* 720px */

  /* Estados (o Basecoat só tem destructive) */
  --sucesso: #059669;  --sucesso-texto: #065f46;
  --alerta:  #d97706;  --alerta-texto:  #92400e;

  /* Fundo da página ≠ --background: o Basecoat usa --background também no botão
     outline e no campo, que precisam continuar brancos dentro do card. No claro a
     página é cinza e o card branco (como no Orion), para o card ter borda à vista. */
  --fundo-pagina: #f0f1f3;
  --topo-fundo: rgb(255 255 255 / .88);
  --veu: rgb(10 10 12 / .35);
  --sombra-painel: -12px 0 40px rgb(0 0 0 / .14);

  /* Marca: padrão neutro até o marca.css do app carregar */
  --marca-texto: var(--primary);
  --marca-suave: var(--muted);
}

:root.dark {
  --background: #0a0a0c;
  --foreground: #e8e8ea;
  --card: #272727;            --card-foreground: #e8e8ea;
  --popover: #2e2e2e;         --popover-foreground: #e8e8ea;
  --secondary: #363636;       --secondary-foreground: #e8e8ea;
  --muted: #2e2e2e;           --muted-foreground: #9a9aa4;
  --accent: #363636;          --accent-foreground: #e8e8ea;
  --destructive: #f87171;
  --border: #3a3a3a;
  --input: #3a3a3a;
  --sidebar: #111114;         --sidebar-foreground: #e8e8ea;
  --sidebar-accent: #2e2e2e;  --sidebar-accent-foreground: #e8e8ea;
  --sidebar-border: #2b2b2b;

  --sucesso: #34d399;  --sucesso-texto: #34d399;
  --alerta:  #fbbf24;  --alerta-texto:  #fbbf24;

  --fundo-pagina: #0a0a0c;
  --topo-fundo: rgb(10 10 12 / .86);
  --veu: rgb(0 0 0 / .6);
  --sombra-painel: -12px 0 40px rgb(0 0 0 / .55);
}

/* ── Base ───────────────────────────────────────────────────────────────── */

html, body { background-color: var(--fundo-pagina); }
body {
  font-size: var(--texto-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* O select do Basecoat marca o placeholder com esta classe; o CSS dele não a traz. */
.text-muted-foreground, .texto-suave { color: var(--muted-foreground); }

/* O CSS compilado da 1.0.2 não traz .sr-only (só aparece dentro de outro seletor). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

.num  { text-align: end; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: var(--texto-mono); font-variant-numeric: tabular-nums; }
.legenda { font-size: var(--texto-legenda); color: var(--muted-foreground); }

/* ── Página ─────────────────────────────────────────────────────────────── */

.pagina {
  width: min(100% - 2 * var(--gutter), var(--largura-pagina, var(--largura-max)));
  margin-inline: auto;
  padding-block: var(--esp-6) var(--esp-7);
  display: grid;
  gap: var(--esp-5);
  align-content: start;
}
.pagina > * { min-width: 0; }
.pagina-estreita { --largura-pagina: var(--largura-estreita); }
.hub             { --largura-pagina: var(--largura-hub); }

.pagina-cabecalho {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--esp-3) var(--esp-4);
}
.pagina-cabecalho h1 {
  margin: 0; font-size: var(--texto-titulo); line-height: 1.25; font-weight: 600;
  letter-spacing: -0.02em; text-wrap: balance;
}
.pagina-cabecalho .subtitulo { margin: var(--esp-1) 0 0; color: var(--muted-foreground); }
.rotulo {
  display: block; margin-bottom: var(--esp-1);
  font: 500 var(--texto-legenda)/1.2 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--marca-texto);
}

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }

.secao-titulo { margin: 0; font-size: var(--texto-secao); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }

/* Barra horizontal (filtros, ações). `.espaco` empurra o resto para a direita. */
.barra { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
[role="radiogroup"].barra { gap: var(--esp-2) var(--esp-5); }
.barra > .espaco { flex: 1; }
.barra > .input, .barra > .input-group { width: auto; flex: 0 1 18rem; min-width: 12rem; }
.barra > .field { width: auto; }   /* radios/checkboxes lado a lado (o .field do Basecoat é w-full) */

.pilha { display: grid; gap: var(--esp-4); align-content: start; }
.pilha > * { min-width: 0; }

/* Grades: 3 colunas → 2 (tablet, ≤1024px) → 1 (celular, ≤640px). */
.grade { display: grid; gap: var(--esp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade[data-colunas="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade[data-colunas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Campos de formulário em grade: 1 coluna; data-colunas="2" lado a lado. */
.form-grade { display: grid; gap: var(--esp-4); grid-template-columns: minmax(0, 1fr); }
.form-grade[data-colunas="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grade[data-colunas="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grade > .largo { grid-column: 1 / -1; }
.form-grade > .dobro { grid-column: span 2; }   /* só em data-colunas="3"; no celular volta a 1 */

/* Rodapé de ações de um formulário de página: fica grudado embaixo. */
.barra-acoes {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: flex-end; gap: var(--esp-2);
  padding: var(--esp-3) 0;
  background: color-mix(in oklab, var(--fundo-pagina) 88%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
.barra-acoes > .esquerda { margin-inline-end: auto; }

/* O .card do Basecoat corta o que vaza (overflow: hidden): dropdown, popover e select custom
   abertos dentro dele ficavam cortados. A imagem no topo continua arredondada por regra própria. */
.card { overflow: visible; }

/* Linha entre partes do card: o Basecoat dá o respiro de .border-b/.border-t, mas a 1.0.2 não traz a borda. */
.card > header.border-b { border-bottom: 1px solid var(--border); }
.card > footer.border-t { border-top: 1px solid var(--border); }

/* Rodapé de card com contagem à esquerda e paginação à direita. */
.card > footer.rodape-lista { justify-content: space-between; gap: var(--esp-3); color: var(--muted-foreground); }

/* Linha de tabela que abre o registro. */
.table tr[data-id] { cursor: pointer; }
.table td a { color: inherit; text-decoration: none; font-weight: 500; }
.table tr:hover td a, .table td a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.table td.acoes-linha { width: 1%; text-align: end; }

/* Selo de estado: complementa os data-variant do Basecoat. */
.badge[data-variant="sucesso"] { background: color-mix(in oklab, var(--sucesso) 14%, transparent); color: var(--sucesso-texto); }
.badge[data-variant="alerta"]  { background: color-mix(in oklab, var(--alerta) 16%, transparent);  color: var(--alerta-texto); }
.ponto { display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none; }
.ponto[data-cor="marca"]   { color: var(--primary); }
.ponto[data-cor="sucesso"] { color: var(--sucesso); }
.ponto[data-cor="alerta"]  { color: var(--alerta); }
.ponto[data-cor="perigo"]  { color: var(--destructive); }

/* ── Cabeçalho <orion-cabecalho> ────────────────────────────────────────── */

orion-cabecalho { display: block; position: sticky; top: 0; z-index: 40; }
.topo {
  height: var(--topo-altura);
  background: var(--topo-fundo);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topo-conteudo {
  width: min(100% - 2 * var(--gutter), var(--largura-max));
  height: 100%; margin-inline: auto;
  display: flex; align-items: center; gap: var(--esp-2);
}
.topo-marca {
  display: flex; align-items: center; gap: var(--esp-2); flex: none;
  color: var(--foreground); text-decoration: none; font-weight: 600; letter-spacing: -0.01em;
}
.topo-marca img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; }
.topo-divisor { width: 1px; height: 18px; margin-inline: var(--esp-1); background: var(--border); transform: rotate(18deg); flex: none; }
.topo-trilha { min-width: 0; }
.topo-trilha li { min-width: 0; }
.topo-trilha a, .topo-trilha span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.topo-trilha [aria-current="page"] { color: var(--foreground); }
.topo-espaco { flex: 1; }
.topo-acoes { display: flex; align-items: center; gap: var(--esp-2); }
.topo-usuario { margin-inline-start: var(--esp-1); cursor: pointer; }
.topo-usuario > span { font-size: var(--texto-legenda); font-weight: 600; }

/* ── Painel lateral <orion-painel> ──────────────────────────────────────── */

dialog.painel {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(var(--painel-largura), 100vw); max-width: 100vw;
  height: 100dvh; max-height: none;
  padding: 0; border: 0; border-inline-start: 1px solid var(--border);
  background: var(--card); color: var(--card-foreground);
  box-shadow: var(--sombra-painel);
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
}
dialog.painel[open] { display: flex; }
dialog.painel.aberto { transform: none; }
dialog.painel.larga { width: min(var(--painel-largura-larga), 100vw); }
dialog.painel::backdrop { background: var(--veu); backdrop-filter: blur(2px); opacity: 0; transition: opacity .32s; }
dialog.painel.aberto::backdrop { opacity: 1; }

.painel-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5); border-bottom: 1px solid var(--border);
}
.painel-topo h2 { margin: 0; font-size: 1.125rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.painel-rotulo { display: block; margin-bottom: 2px; font: 500 var(--texto-legenda)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marca-texto); }
.painel-subtitulo { margin: var(--esp-1) 0 0; color: var(--muted-foreground); }
.painel-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--esp-5); }
.painel-rodape {
  display: flex; justify-content: flex-end; gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-5); border-top: 1px solid var(--border);
}
.painel-rodape:empty { display: none; }
.painel-rodape > .esquerda { margin-inline-end: auto; }

/* ── Aviso avisar() (toast do Basecoat) ─────────────────────────────────── */

.toast[data-category="success"] .toast-content > svg { color: var(--sucesso); }
.toast[data-category="error"] .toast-content > svg { color: var(--destructive); }

/* ── Menu flutuante abrirMenu() (visual do dropdown do Basecoat) ────────── */

.menu-flutuante {
  position: fixed; z-index: 60; min-width: 11rem; max-width: 18rem;
  display: grid; padding: var(--esp-1);
  background: var(--popover); color: var(--popover-foreground);
  border-radius: calc(var(--radius) - 2px);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent), 0 4px 12px rgb(0 0 0 / .12);
}
.menu-flutuante .menu-titulo { padding: 6px 8px; font-size: var(--texto-legenda); color: var(--muted-foreground); }
.menu-flutuante .menu-titulo strong { display: block; color: var(--foreground); font-size: var(--texto-corpo); font-weight: 500; }
.menu-flutuante hr { margin: var(--esp-1) calc(-1 * var(--esp-1)); border: 0; border-top: 1px solid var(--border); }
.menu-flutuante [role="menuitem"] {
  display: flex; align-items: center; gap: var(--esp-2); width: 100%;
  padding: 6px 8px; border: 0; border-radius: calc(var(--radius) - 6px);
  background: none; color: inherit; font: inherit; font-size: var(--texto-corpo); text-align: start; cursor: default;
}
.menu-flutuante [role="menuitem"]:is(:hover, :focus-visible) { background: var(--muted); outline: none; }
.menu-flutuante [role="menuitem"][data-variant="destructive"] { color: var(--destructive); }
.menu-flutuante [role="menuitem"][data-variant="destructive"]:is(:hover, :focus-visible) { background: color-mix(in oklab, var(--destructive) 10%, transparent); }
.menu-flutuante svg { width: 16px; height: 16px; flex: none; }

/* ── Hub ────────────────────────────────────────────────────────────────── */

.modulos .item { background: var(--card); color: inherit; text-decoration: none; }
.modulos .item:hover { background: var(--card); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
.modulos .item > figure { width: 32px; height: 32px; margin: 0; border-radius: calc(var(--radius) - 2px); background: var(--marca-suave); color: var(--marca-texto); }
.modulos .item > figure svg { width: 16px; height: 16px; }
.modulos .item h3 { margin: 0; }
.modulos .item p { margin: 0; }
.modulos .item > aside { color: var(--muted-foreground); transition: transform .15s, color .15s; }
.modulos .item:hover > aside { transform: translateX(2px); color: var(--foreground); }

/* ── Responsivo ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .grade, .grade[data-colunas="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grade[data-colunas="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pagina { padding-block: var(--esp-5) var(--esp-6); gap: var(--esp-4); }
  .pagina-cabecalho h1 { font-size: 1.375rem; }
  .pagina-cabecalho > .acoes { width: 100%; }
  .grade, .grade[data-colunas], .form-grade[data-colunas] { grid-template-columns: minmax(0, 1fr); }
  .form-grade > .dobro { grid-column: auto; }
  .barra > .input, .barra > .input-group { flex: 1 1 100%; min-width: 0; }
  .topo-nome, .topo-divisor, .topo-trilha li:not(:last-child) { display: none; }
  dialog.painel, dialog.painel.larga { width: 100vw; border-inline-start: 0; }
  .painel-topo, .painel-corpo, .painel-rodape { padding-inline: var(--esp-4); }
  .painel-rodape, .barra-acoes { flex-wrap: wrap; }
  .painel-rodape > .btn, .barra-acoes > .btn { flex: 1 1 auto; }
  .painel-rodape > .esquerda, .barra-acoes > .esquerda { margin-inline-end: 0; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.painel, dialog.painel::backdrop, .modulos .item > aside { transition: none; }
}