/* Tokens canônicos — copiados de cbnethub/DESIGN.md §3, não improvisados. */
: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;
  --on-accent:     #061423;
  --danger:        #ff6b7a;
  --warning:       #ffb020;
  --on-danger:     #061423;
  --on-warning:    #061423;
  --warning-text:  #ffb020;
}

[data-theme="light"] {
  --bg:            #eaeff6;
  --surface:       #ffffff;
  --surface-2:     #dde5ef;
  --border:        #ccd7e4;
  --text:          #0f1c2b;
  --text-muted:    #54637a;
  --accent:        #22a847;
  --accent-text:   #147233;
  --on-accent:     #061423;
  --danger:        #b3352f;
  --warning:       #b7791f;
  --on-danger:     #ffffff;
  --on-warning:    #061423;
  --warning-text:  #8a5a12;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  src: url('vendor/poppins-500.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  src: url('vendor/poppins-600.woff2') format('woff2');
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
}

/* Barra de rolagem tematizada (DESIGN.md §3.1) — vale pra página e pra tudo
   que rola por dentro (aqui, o wrapper da tabela). */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent;
}
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: 8px; }
html::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px 24px;
  gap: 16px;
}

.titulo { font-size: 18px; font-weight: 600; margin: 0; }

.btn-icone {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
}
.btn-icone:hover { background: var(--surface-2); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.filtros label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.filtros select, .filtros input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  min-width: 130px;
}

.btn-primario {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  height: 32px;
}
.btn-primario:hover { filter: brightness(1.05); }

.aviso {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}
.aviso-erro { color: var(--danger); }

.tabela-wrap {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent;
}
.tabela-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.tabela-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: 8px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
thead th {
  position: sticky; top: 0;
  /* Mesmo motivo do .detalhe-box: --surface-2 é translúcido de propósito
     (pensado pra ficar sobre o --bg sólido da página), e o header STICKY
     tem linhas de dado rolando por baixo dele — sem opacidade real, o
     texto da linha por baixo vaza através do cabeçalho ao rolar. */
  background: linear-gradient(var(--surface-2), var(--surface-2)), var(--bg);
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
tbody tr:hover { background: var(--surface-2); }

.badge { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.badge-sucesso { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-text); }
.badge-erro { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }

.btn-detalhe {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.btn-detalhe:hover { background: var(--surface-2); }

.auth-error {
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.auth-error-box { text-align: center; max-width: 320px; }
.auth-error-icon { font-size: 40px; margin-bottom: 12px; }

.detalhe {
  position: fixed; inset: 0;
  background: color-mix(in srgb, black 55%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 10;
}
.detalhe-box {
  /* --surface é translúcido de propósito (DESIGN.md §3) — pensado pra ficar
     sobre o --bg sólido da PÁGINA. Aqui o modal flutua sobre o backdrop
     (também translúcido), então --surface sozinho deixava a tabela por
     baixo vazando através da caixa. Duas camadas de background: o
     gradiente replica o tom sutil de --surface, compositado sobre --bg
     sólido — mesmo efeito visual de um card normal, mas opaco de verdade. */
  background: linear-gradient(var(--surface), var(--surface)), var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 720px; width: 100%;
  max-height: 85vh;
  display: flex; flex-direction: column;
}
.detalhe-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.detalhe-topo h2 { font-size: 15px; margin: 0; font-weight: 600; }
.detalhe-corpo {
  padding: 16px 18px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent;
}
.detalhe-corpo::-webkit-scrollbar { width: 10px; height: 10px; }
.detalhe-corpo::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: 8px; }
.detalhe-corpo::-webkit-scrollbar-track { background: transparent; }
.detalhe-corpo h3 { font-size: 12px; color: var(--text-muted); margin: 16px 0 6px; text-transform: uppercase; }
.detalhe-corpo h3:first-child { margin-top: 0; }
.detalhe-corpo pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* ── Alvos de toque e anti-zoom iOS (P-031) — só aumenta no toque, nunca na regra base ── */
@media (hover: none) and (pointer: coarse) {
  .btn-icone, .btn-primario, .btn-detalhe { min-height: 44px; }
  .filtros select, .filtros input { font-size: 16px; min-height: 44px; }
}

/* ── Responsividade (P-032) ── */
@media (max-width: 640px) {
  .app { padding: 14px 16px; }
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros label { width: 100%; }
  .filtros select, .filtros input { width: 100%; }
}