/* Raio Y — sistema visual do CBNet Hub.
   Tokens copiados do cbnethub/DESIGN.md §3 na íntegra, nomes canônicos.
   Nunca copiar cor de outro módulo: foi assim que o hub chegou em jul/2026 com
   três verdes e três convenções de nome convivendo. */

/* Poppins vendorada — DESIGN.md §4. NUNCA CDN: a CSP é font-src 'self' e o
   Google Fonts é bloqueado. Só o subset LATIN e só dois pesos (15 KB somados);
   qualquer font-weight fora de 500/600 vira negrito sintético. */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('vendor/poppins-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('vendor/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens: tema escuro (padrão) ─────────────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg:            #061423;
  --surface:       rgba(255,255,255,.045);
  --surface-2:     rgba(255,255,255,.03);
  --border:        rgba(255,255,255,.10);
  --text:          #eaf2f8;
  --text-muted:    #93a7ba;
  --accent:        #2fd15a;
  --accent-text:   #2fd15a;  /* no escuro é igual ao --accent; declarado mesmo
                                assim pro CSS não precisar de condicional */
  --on-accent:     #061423;
  --danger:        #ff6b7a;
  --warning:       #ffb020;
  --on-danger:     #061423;  /* INVERTE no claro — ver DESIGN.md §3 */
  --on-warning:    #061423;
  --warning-text:  #ffb020;
}

/* ── Tokens: tema claro ───────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:            #eaeff6;
  --surface:       #ffffff;
  --surface-2:     #dde5ef;
  --border:        #ccd7e4;
  --text:          #0f1c2b;
  --text-muted:    #54637a;
  --accent:        #22a847;
  --accent-text:   #147233;  /* o verde de marca dá 2,02:1 sobre branco:
                                inutilizável como texto. Cor cheia é
                                preenchimento; para pintar tipo, use -text */
  --on-accent:     #061423;
  --danger:        #b3352f;
  --warning:       #b7791f;
  --on-danger:     #ffffff;
  --on-warning:    #061423;
  --warning-text:  #8a5a12;
}

/* Widgets NATIVOS no esquema do tema (DESIGN.md §3.2): a lista aberta do
   <select>, o date picker, a barra de rolagem. Sem isto o UA assume claro. */
:root { color-scheme: dark }
[data-theme="light"] { color-scheme: light }

/* Barra de rolagem tematizada (DESIGN.md §3.1). Duas declarações porque
   nenhuma cobre todo mundo: scrollbar-* é o padrão (Firefox, Chromium 121+),
   ::-webkit-scrollbar atende Safari e Chromium antigo. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent }
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: 999px }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 70%, transparent) }

/* Token OPACO na <option>: no Windows o Chrome desenha o popup a partir do
   fundo do <select>, que é translúcido nos nossos módulos — composto sobre a
   base branca do UA, continua branco. */
select option { background-color: var(--bg); color: var(--text) }

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

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }

html, body {
  margin: 0;
  height: 100%;
  /* P-032: nada pode empurrar a página na horizontal dentro do iframe */
  max-width: 100%;
  overflow-x: hidden;
}

body {
  /* Sem topbar próprio — quem desenha o topo é o hub (MODULE_CONTRACT §1) */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  /* Sem transição de cor aqui: DESIGN.md §5 manda animar SOMENTE transform e
     opacity, porque são as que a GPU compõe sem recalcular layout —
     background-color e color repintam a cada quadro. A troca de tema é
     instantânea de propósito, e fica melhor assim: cor interpolando entre dois
     temas borra o texto durante a transição. */
}

h1, h2, h3 { font-weight: 600; margin: 0 0 .5rem }
h1 { font-size: 1.5rem }
h2 { font-size: 1.15rem }
p  { margin: 0 0 .75rem }
a  { color: var(--accent-text) }

.hidden { display: none !important }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* min-height:0 é o que permite um filho rolável encolher dentro do flex —
     sem isso o conteúdo estoura o container em vez de rolar (P-032) */
  min-height: 0;
  padding: 1.25rem;
  gap: 1rem;
}

.cabecalho { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap }
.cabecalho .sub { color: var(--text-muted); font-size: .875rem }

.cartao {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}

.rotulo { color: var(--text-muted); font-size: .8125rem; margin-bottom: .25rem }

/* ── Controles ────────────────────────────────────────────────────────────── */
.botao, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* P-031: o alvo cresce SÓ no toque, nunca na regra base — engordar o controle
   no desktop também é o anti-padrão que a ficha reprova, e custaria densidade
   justamente nas telas densas que chegam no B3 (tabelas de conexões/contratos).
   O sinal certo é (hover:none) and (pointer:coarse): largura de tela não é
   proxy de toque — nem todo mobile é estreito, nem toda tela estreita é toque.
   A fonte ≥16px vem junto aqui: abaixo disso o Safari dá zoom ao focar o campo
   (pior ainda dentro de iframe), e no desktop ela não precisa mudar. */
@media (hover: none) and (pointer: coarse) {
  .botao, input, select, textarea {
    min-height: 44px;
    font-size: 16px;
  }
}

input, select, textarea {
  width: 100%;
  max-width: 100%;
  padding: .5rem .75rem;
  background: var(--surface-2);
  color: var(--text);
}

input:focus-visible, select:focus-visible, textarea:focus-visible, .botao:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 44px;
  padding: .5rem 1.1rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s;
}
.botao:hover { filter: brightness(1.08) }
.botao:disabled { opacity: .5; cursor: not-allowed }

/* ── Estado de erro de autenticação ───────────────────────────────────────── */
.aviso-cheio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  text-align: center;
}
.aviso-cheio .caixa {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  max-width: 26rem;
}
.aviso-cheio .icone { font-size: 2.5rem; margin-bottom: .5rem }
.aviso-cheio p { color: var(--text-muted); margin: 0 }

@media (max-width: 600px) {
  .app { padding: 1rem .875rem }
  h1 { font-size: 1.25rem }
}

/* ── Busca ────────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.busca { display: flex; gap: .625rem; flex-wrap: wrap }
.busca input { flex: 1 1 18rem; min-width: 0 }   /* min-width:0 impede o input
   de impor largura mínima e estourar o flex no celular (P-032) */
.busca .botao { flex: 0 0 auto }

.estado:empty { display: none }
.estado {
  padding: .625rem .875rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}
.estado.erro     { color: var(--danger);       border-color: var(--danger) }
.estado.atencao  { color: var(--warning-text); border-color: var(--warning-text) }

/* ── Faixa de bloqueio ────────────────────────────────────────────────────── */
/* Preenchimento com --danger e texto com --on-danger, que INVERTE entre os
   temas (DESIGN.md §3): claro no escuro, escuro no claro. Um valor fixo aqui
   reprovaria em AA num dos dois. */
.faixa-bloqueio {
  background: var(--danger);
  color: var(--on-danger);
  padding: .75rem 1rem;
  border-radius: 10px;
  font-weight: 600;
}

/* ── Cadastro ─────────────────────────────────────────────────────────────── */
.dados {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: .375rem 1rem;
  margin: 0;
}
.dados dt { color: var(--text-muted); font-size: .8125rem }
.dados dd { margin: 0; overflow-wrap: anywhere }  /* endereço longo quebra em
   vez de empurrar a grade (P-032) */
.aviso-inline { color: var(--warning-text) }

.contagem { color: var(--text-muted); font-weight: 500; font-size: .875rem }

/* ── Tabelas ──────────────────────────────────────────────────────────────── */
/* A tabela rola DENTRO do .rolagem — a página nunca rola na horizontal.
   min-width no table é o que força a barra em vez de espremer coluna a ponto
   de o MAC quebrar no meio (P-032). */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch }
table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .875rem }
th, td { padding: .5rem .625rem; text-align: left; border-bottom: 1px solid var(--border) }
th { color: var(--text-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase;
     letter-spacing: .02em; background: var(--surface-2); position: sticky; top: 0 }
tbody tr:last-child td { border-bottom: 0 }
td.vazio { color: var(--text-muted); text-align: center; padding: 1.25rem }

/* Linha bloqueada: cor de fundo sutil + a tag faz o trabalho de sinalizar.
   Cor sozinha não pode ser o único indicador — quem não distingue vermelho lê
   a palavra "Bloqueada" na coluna de situação. */
.linha-bloqueada td { background: color-mix(in srgb, var(--danger) 12%, transparent) }

.tag {
  display: inline-block; padding: .125rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.tag.ok      { background: var(--accent);  color: var(--on-accent) }
.tag.atencao { background: var(--warning); color: var(--on-warning) }
.tag.ruim    { background: var(--danger);  color: var(--on-danger) }

#resultado { display: flex; flex-direction: column; gap: 1rem }

@media (max-width: 600px) {
  .dados { grid-template-columns: 1fr; gap: .125rem }
  .dados dd { margin-bottom: .5rem }
}

/* ── Abas ─────────────────────────────────────────────────────────────────── */
/* role="tablist" com botões de verdade: teclado (setas/Home/End) e leitor de
   tela funcionam sem JS extra além da troca de foco. */
.abas {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--border);
  /* Em tela estreita as abas rolam em vez de espremer ou quebrar (P-032) */
  overflow-x: auto;
}
.aba {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-muted);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  padding: .625rem 1rem;
  cursor: pointer;
  white-space: nowrap;
}
.aba:hover { color: var(--text) }
.aba[aria-selected="true"] {
  color: var(--accent-text);      /* -text: o verde cheio não passa em AA como tipo no claro */
  border-bottom-color: var(--accent-text);
}
.aba:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px }

@media (hover: none) and (pointer: coarse) {
  .aba { min-height: 44px }
}

.painel { display: flex; flex-direction: column; gap: 1rem }