/* ═══════════════════ DOMUS — Material Design 3 Dark ═══════════════════ */
/* Based on Stitch export design system + Material You dark theme         */

/* ═══ TOKENS — direção C, "Sala de operação" ═══════════════════════════════
   Antes desta linha o painel escrevia 58 cores à mão, 463 vezes, e trocar uma
   delas era uma varredura. Aqui é uma linha.

   Só cinco valores mudaram em relação ao que estava no ar: --sup, --sup-2,
   --sup-3 (superfície mais rente ao fundo) e --ok/--erro (saem as cores de
   sistema do iOS). O ouro da marca não se mexeu.

   O que NÃO está aqui, de propósito: #0055A5 (TudoAzul), #FF7B00 (Smiles) e
   #E8114B (LATAM Pass). São marcas de terceiros ligadas ao dado de cada
   programa, não tema — se entrassem como token, alguém as "harmonizaria".

   Ver docs/specs/direcao-c-no-painel.md.                                     */
:root {
  /* marca */
  --ouro: #e9c176;
  --ouro-forte: #c5a059;
  --ouro-claro: #ffdea5;
  --sobre-ouro: #412d00;

  /* superfícies — do fundo para cima */
  --fundo: #0b151b;
  --sup-2: #0f181e;
  --sup: #131d23;
  --sup-3: #1b242b;
  --linha: #4e4639;

  /* texto — do mais forte para o mais fraco */
  --txt: #dae4ec;
  --txt-2: #d1c5b4;
  --txt-3: #9a8f80;
  --txt-forte: #ffffff;

  /* estado. Três, e só três: fechou, pede conferência, interrompeu.
     O âmbar é o mesmo ouro da marca de propósito — alerta neste painel pede
     CONFERÊNCIA, não conserto, e o vermelho fica para o que parou a operação. */
  --ok: #8fd3a6;
  --atencao: #e9c176;
  --erro: #e08585;
  --erro-txt: #ffb4ab;
  --erro-fundo: #7a2a2a;
  --info: #9db9c9;

  /* forma — quinze valores viraram três */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;

  /* respiro */
  --e-pagina: 18px 22px;
  /* O eixo horizontal tem nome proprio porque TRES seletores do mesmo
     componente precisam dele: .data-table th, .data-table td e a
     .data-table-toolbar. Antes o th e a barra usavam 20px literal e a celula
     14px — a coluna saia torta contra a propria borda da tabela. */
  --e-celula-x: 14px;
  --e-celula: 7px var(--e-celula-x);
  --e-gap: 12px;

  /* número: alinhado por dígito. Uma vírgula fora de lugar vira desalinhamento
     visível, em vez de um número plausível. */
  --f-num: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}


/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--fundo);
  color: var(--txt);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}
input, select, textarea, button { font-family: inherit; font-size: inherit; }
a { text-decoration: none; color: inherit; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linha); border-radius: var(--r-1); }
::-webkit-scrollbar-thumb:hover { background: var(--txt-3); }

/* ═══ MATERIAL SYMBOLS ═══ */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* ═══ LOGIN ═══ */
.login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed; inset: 0; z-index: 9999;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--fundo) 0%, var(--fundo) 50%, var(--sup-2) 100%);
}
.login-view::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(233,193,118,0.06) 0%, transparent 70%);
  border-radius: 50%;
}
.login-card {
  background: var(--sup);
  border: 1px solid rgba(233,193,118,0.12);
  border-radius: var(--r-3);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  position: relative;
  z-index: 1;
}
.login-logo { text-align: center; margin-bottom: 28px; }
.logo-icon {
  width: 48px; height: 48px;
  background: var(--ouro-forte);
  border-radius: var(--r-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sobre-ouro);
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(233,193,118,0.2);
}
.login-logo h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ouro);
  letter-spacing: -0.5px;
}
.login-subtitle {
  color: var(--txt-2);
  font-size: 0.8rem;
  margin-top: 2px;
  letter-spacing: 0.5px;
}
.login-hint {
  text-align: center;
  font-size: 0.7rem;
  color: var(--txt-3);
  margin-top: 18px;
}

/* ═══ FORM ELEMENTS ═══ */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--txt-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--linha);
  border-radius: var(--r-3);
  background: var(--sup-2);
  color: var(--txt);
  transition: all 0.2s;
}
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 1px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  /* O halo de box-shadow resolve na tela, mas some em alto contraste forcado,
     onde box-shadow nao e pintada. O outline abaixo e o que sobra la. */
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(233,193,118,0.1);
}
.form-group input::placeholder { color: var(--txt-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.login-error {
  color: var(--erro-txt);
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
  min-height: 18px;
}

/* ═══ BUTTONS ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--r-3);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s;
  letter-spacing: 0.2px;
}
.btn-primary {
  background: var(--ouro);
  color: var(--sobre-ouro);
}
.btn-primary:hover {
  background: var(--ouro-forte);
  box-shadow: 0 4px 12px rgba(233,193,118,0.25);
}
.btn-secondary {
  background: var(--sup-3);
  color: var(--txt);
  border: 1px solid var(--linha);
}
.btn-secondary:hover { background: var(--sup-3); }
.btn-danger {
  background: var(--erro-fundo);
  color: var(--erro-txt);
}
.btn-danger:hover { background: var(--erro-fundo); }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: var(--r-3); }
.btn-block { width: 100%; }

/* ═══ APP LAYOUT ═══ */
/* O display de #app-view mora no <style> inline do index.html — de propósito.
   Não recrie regras de display/.active aqui: este arquivo é cacheável e, quando
   vem stale, trava o usuário fora do app depois do login. */

/* ═══ SIDEBAR ═══ */
.sidebar {
  width: 280px;
  min-height: 100vh;
  background: var(--sup);
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 100;
  border-right: 1px solid var(--linha);
  box-shadow: 4px 0 24px rgba(0,0,0,0.15);
}
.sidebar-header {
  padding: 24px 20px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(78,70,57,0.3);
}
/* Marca da Domus PI. Substituiu o chip dourado com o glifo generico `domain`;
   a `.logo-icon` da tela de LOGIN continua existindo e nao foi tocada. */
.brand-mark {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: block;
}
.sidebar-title {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--ouro);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}
.sidebar-title-pi { color: var(--ouro-forte); }
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
}
.user-avatar {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--ouro), var(--ouro-forte));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sobre-ouro);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.user-info { display: flex; flex-direction: column; }
.user-name { color: var(--txt); font-size: 14px; font-weight: 600; }
.user-role { color: var(--txt-2); font-size: 12px; }
.sidebar-divider {
  height: 1px;
  background: rgba(78,70,57,0.3);
  margin: 4px 16px;
}
.sidebar-nav {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-radius: var(--r-3);
  color: var(--txt-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.2s;
}
.nav-item:hover {
  background: rgba(233,193,118,0.06);
  color: var(--txt);
}
.nav-item.active {
  background: rgba(233,193,118,0.1);
  color: var(--ouro);
  border-left: 3px solid var(--ouro);
  font-weight: 600;
}
.nav-item .material-symbols-outlined { font-size: 20px; }
.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(78,70,57,0.3);
}
.btn-generate {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(233,193,118,0.1);
  color: var(--ouro);
  border: 1px solid rgba(233,193,118,0.2);
  border-radius: var(--r-3);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s;
  margin-bottom: 12px;
}
.btn-generate:hover {
  background: rgba(233,193,118,0.15);
}
.sidebar-bottom-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-radius: var(--r-3);
  color: var(--txt-3);
  font-size: 13px;
  transition: all 0.2s;
}
.sidebar-link:hover {
  background: rgba(255,255,255,0.03);
  color: var(--txt-2);
}

/* ═══ MAIN CONTENT ═══ */
.main-content {
  flex: 1;
  margin-left: 280px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ═══ TOP BAR ═══ */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 64px;
  background: rgba(23,33,39,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.top-bar-left { display: flex; align-items: center; gap: 16px; }
.top-bar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ouro);
  letter-spacing: -0.2px;
}
/* Alinhada à direita porque a barra ficou com dois blocos, não três: os links
   e botões decorativos saíram. Centralizada, a busca ficaria no meio do espaço
   restante — visivelmente fora do centro da tela e sem nada equilibrando. */
.top-bar-center { flex: 1; display: flex; justify-content: flex-end; }
.search-box {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--txt-3);
  font-size: 18px;
}
.search-box input {
  width: 100%;
  padding: 8px 16px 8px 40px;
  background: var(--sup-3);
  border: 1px solid var(--linha);
  border-radius: var(--r-2);
  color: var(--txt);
  font-size: 13px;
  transition: all 0.2s;
}
.search-box input:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 1px;
}
.search-box input:focus {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(233,193,118,0.1);
}
.search-box input::placeholder { color: var(--txt-3); }

/* Dropdown de resultados da busca */
.search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  overflow: hidden;
  z-index: 200;
}
.search-results.show { display: block; }
.search-result {
  /* `flex` e nao `block` desde 27/08/2026: a busca passou a dizer de que TIPO e
     cada resultado, numa etiqueta a direita. Com `block` a etiqueta colava no
     fim do texto e a linha ficava com dois pesos disputando o mesmo lugar. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--txt);
  font-size: 13px;
  cursor: pointer;
}
/* O rotulo cede espaco antes da etiqueta: nome longo de custo corta com
   reticencias em vez de espremer a pilula, que tem `white-space: nowrap`. */
.search-rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O item da lista de busca ganhava so fundo e cor no foco — indistinguivel
   do hover do mouse, e invisivel em alto contraste. */
.search-result:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: -2px;
}
.search-result:hover,
.search-result:focus-visible {
  background: rgba(233,193,118,0.1);
  color: var(--ouro);
}
.search-empty {
  padding: 10px 16px;
  color: var(--txt-3);
  font-size: 13px;
}

/* Só para leitores de tela */
.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;
}
/* ═══ PAGES ═══ */
.page {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: var(--e-pagina);
  animation: fadeIn 0.25s ease;
}
.page.active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.page-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: -0.3px;
}
.page-subtitle {
  color: var(--txt-3);
  font-size: 13px;
  margin-top: 4px;
}

/* ═══ BENTO GRID ═══ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--e-gap);
}
.bento-grid-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-gap);
  margin-top: 20px;
}
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-6 { grid-column: span 6; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }

/* ═══ CARDS ═══ */
.card {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  padding: 16px 18px;
  transition: all 0.2s;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.card:hover {
  border-color: var(--txt-3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
/* Card que é link para o módulo: sem cara de link, mas com sinal de clicável. */
.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.card-link:hover { border-color: var(--ouro); transform: translateY(-2px); }
.card-link:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}
/* O rótulo do card. Existia no objeto JS desde o início, mas nunca era
   renderizado nem tinha estilo — cada card era um número sem legenda. */
.card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
/* Com rótulo, ícone e texto andam juntos à esquerda — space-between jogaria o
   rótulo para o canto oposto e a dupla deixaria de se ler como uma coisa só.
   Sem :has (navegador antigo), volta ao space-between e continua legível. */
.card-header:has(.card-label) {
  justify-content: flex-start;
  gap: 10px;
}
.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title .material-symbols-outlined { color: var(--ouro); font-size: 20px; }
.card-value {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: -0.5px;
  line-height: 1;
}
.card-hint {
  font-size: 12px;
  color: var(--txt-3);
  margin-top: 8px;
}
.card-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ouro);
}

/* ═══ STATS ROW ═══ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-gap);
  margin-bottom: 24px;
}
.stat-card {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat-icon {
  width: 42px; height: 42px;
  border-radius: var(--r-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon.gold { background: rgba(233,193,118,0.1); color: var(--ouro); }
.stat-icon.blue { background: rgba(30,120,220,0.1); color: var(--info); }
.stat-icon.green { background: rgba(52,199,89,0.1); color: var(--ok); }
.stat-icon.red { background: rgba(255,59,48,0.1); color: var(--erro); }
.stat-info { display: flex; flex-direction: column; }
.stat-value {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: var(--txt); }
.stat-label { font-size: 12px; color: var(--txt-3); margin-top: 2px; }

/* ═══ TABLES ═══ */
.data-table-wrapper {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.data-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Vertical proprio (uma barra pede mais ar que uma celula), horizontal
     amarrado ao mesmo token da celula. */
  padding: 12px var(--e-celula-x);
  background: var(--sup-2);
  border-bottom: 1px solid var(--linha);
}
.data-table-toolbar h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 8px;
}
.data-table-toolbar h3 .material-symbols-outlined { color: var(--ouro); font-size: 20px; }
.data-table-actions { display: flex; gap: 8px; }
.data-table-actions .btn { padding: 5px 12px; font-size: 12px; }
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  text-align: left;
  /* A MESMA densidade da celula: com `12px 20px` aqui e `--e-celula` embaixo, o
     texto do cabecalho recuava 20px da borda e o da celula 14px — a coluna saia
     torta contra a propria borda da tabela. Foi tokenizacao parcial em 24/08. */
  padding: var(--e-celula);
  background: var(--sup-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--txt-3);
  font-weight: 600;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.data-table td {
  padding: var(--e-celula);
  border-bottom: 1px solid rgba(78,70,57,0.3);
  font-size: 13px;
  color: var(--txt);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(233,193,118,0.02); }
.actions-cell { display: flex; gap: 6px; }

/* ═══ BADGES ═══ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  /* Pílula não quebra linha: "promoção recebida" tem o dobro do comprimento de
     "esperada" e, sem isto, parte no meio e deixa a coluna Pendência com linhas
     de alturas diferentes. A tabela já rola na horizontal (overflow-x:auto). */
  white-space: nowrap;
}
.badge-em_andamento { background: rgba(233,193,118,0.1); color: var(--ouro); }
.badge-concluido { background: rgba(52,199,89,0.1); color: var(--ok); }
.badge-pausado { background: rgba(255,59,48,0.1); color: var(--erro); }
/* Rotulo que e TIPO, nao estado: "Inativo" e um servico desligado de proposito,
   e desligado nao e falha. Sem esta classe o unico jeito de dizer "nao esta
   ligado" era o vermelho, que a regra logo abaixo reserva para outra coisa. */
.badge-neutra { background: var(--sup-3); color: var(--txt-3); }
/* Alerta pede CONFERÊNCIA, não conserto — por isso âmbar e não vermelho. A
   variação de 600.000 numa conta costuma ser promoção em lote, e o vermelho
   nesta coluna dizia "algo quebrou" numa rodada que terminou perfeita. O
   vermelho fica reservado para o que interrompeu a operação: login caído,
   conta desconectada. Se tudo é vermelho, nada é. */
.badge-alerta { background: rgba(233,193,118,0.1); color: var(--ouro); }

/* Pílula que também é BOTÃO: os filtros de estado da Conciliação por Lote.
   Ela não inventa cor nenhuma — herda a pílula do estado que representa, e o
   desligado só perde opacidade. Um filtro que mudasse de cor ao ser desligado
   ensinaria que a cor significa "ligado", quando neste painel ela significa
   "que tipo de coisa é esta". */
.badge.lote-chip {
  user-select: none;
  transition: opacity 0.15s, outline-color 0.15s;
  outline: 1px solid transparent;
}
.badge.lote-chip:hover { opacity: 1; outline-color: var(--linha); }
.badge.lote-chip:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 1px;
}

/* ═══ MAPA DE INTERAÇÃO ═══
   O SVG tem largura fixa de 1000 no viewBox e um min-width real: abaixo disso
   o texto de 9,5px vira borrão, e um infográfico ilegível é pior que a lista
   que ele resume. Em tela estreita a caixa rola na horizontal em vez de
   encolher o desenho — rolar é um incômodo, não conseguir ler é uma perda. */
.mapa-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--txt-3);
  font-weight: 600;
  margin: 26px 0 10px;
}
.mapa-caixa {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  padding: 14px;
  background: var(--sup-2);
}
.mapa-svg { width: 100%; height: auto; min-width: 800px; display: block; }

/* ═══ AGENTES — uma linha por agente, detalhe atrás de um clique ═══
   O <summary> é a linha resumida: ícone, nome, papel e horário. O resto abre
   embaixo. O marcador nativo do <details> fica: ele é o que anuncia que a linha
   abre, e substituí-lo por um ícone próprio custaria CSS para reconstruir um
   affordance que o navegador já dá pronto. */
.agente-linha { border-bottom: 1px solid rgba(78,70,57,0.3); }
.agente-linha:last-child { border-bottom: none; }
.agente-linha summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  list-style-position: outside;
  transition: background 0.12s ease;
}
.agente-linha summary::-webkit-details-marker { color: var(--txt-3); }
.agente-linha summary:hover { background: rgba(233,193,118,0.05); }
.agente-linha summary:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: -2px;
}
.agente-linha[open] summary { background: rgba(233,193,118,0.04); }
.agente-icone { font-size: 20px; color: var(--ouro); }
.agente-nome { font-weight: 600; color: var(--txt); font-size: 13.5px; }
/* Empurra o horário para a direita: os quatro horários alinhados numa coluna
   é o que deixa "a que horas cada um roda" legível de relance. */
.agente-quando {
  margin-left: auto;
  font-size: 12px;
  color: var(--txt-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agente-papel { font-size: 11px; padding: 2px 10px; }
.agente-detalhe { padding: 2px 18px 16px 46px; }
.agente-detalhe p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--txt-2);
  margin: 0 0 10px;
}
.agente-detalhe p strong { color: var(--ouro); }

/* Linha de tabela que leva a outro lugar. O cursor e o realce no hover são o
   que anuncia que ela é clicável — sem isso vira funcionalidade escondida, que
   é o mesmo que não existir. O foco visível não é enfeite: quem chega por
   teclado precisa saber em que linha está antes de apertar Enter. */
.linha-clicavel { cursor: pointer; transition: background 0.12s ease; }
.linha-clicavel:hover { background: rgba(233,193,118,0.06); }
.linha-clicavel:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: -2px;
  background: rgba(233,193,118,0.06);
}

/* ═══ BALÃO DE REPOSITÓRIO ═══
   Cartão clicável dentro da ferramenta de IA: nome do repo, a descrição dele e
   o aviso de que é privado. O clique sai para o GitHub, que é quem decide se a
   pessoa entra — o painel não guarda cópia nem link de download. */
.repo-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  background: rgba(233,193,118,0.04);
  text-decoration: none;
  transition: all 0.2s;
}
.repo-chip:hover {
  border-color: var(--ouro);
  background: rgba(233,193,118,0.08);
}
.repo-chip-icon { color: var(--ouro); font-size: 20px; }
.repo-chip-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.repo-chip-nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  overflow-wrap: anywhere;
}
.repo-chip-desc { font-size: 12px; color: var(--txt-3); }
.repo-chip-nota { font-size: 11px; color: var(--ouro); }
.repo-chip-go { color: var(--txt-3); font-size: 18px; }
.repo-chip:hover .repo-chip-go { color: var(--ouro); }
/* Ferramenta cadastrada sem link: mesmo balão, sem convite ao clique. */
.repo-chip-off { border-style: dashed; background: transparent; }
.repo-chip-off .repo-chip-icon { color: var(--txt-3); }


/* ═══ MILES ═══ */
.miles-program-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.linha-lista {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(78,70,57,0.3);
}
.linha-lista:last-child { border-bottom: none; }
.linha-nome { font-weight: 500; color: var(--txt); font-size: 13px; }
.linha-valor {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; color: var(--txt); }

/* ═══ MODALS ═══ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal.show { display: flex; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,15,21,0.8);
  backdrop-filter: blur(4px);
}
.modal-content {
  position: relative;
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  padding: 28px;
  width: 520px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal-header h3 { font-size: 18px; font-weight: 700; color: var(--txt); }
.modal-close {
  background: none;
  border: none;
  color: var(--txt-3);
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--txt); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

/* ═══ EMPTY STATE ═══ */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--txt-3);
}
.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.empty-state p { font-size: 14px; }


/* ═══ MILES SUMMARY CARDS ═══ */
.miles-summary-card {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.miles-summary-card::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.04;
  background: var(--ouro);
}
.miles-summary-card .program-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ouro);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.miles-summary-card .program-tier {
  font-size: 11px;
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 16px;
}
.miles-summary-card .balance {
  font-size: 34px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: -0.5px;
  line-height: 1;
}

/* Etiqueta de versão, quando a ferramenta tem uma. */
.tool-version {
  font-size: 11px;
  color: var(--txt-3);
  background: var(--sup-3);
  padding: 2px 8px;
  border-radius: var(--r-1);
  margin-left: 6px;
}




/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .col-span-3 { grid-column: span 6; }
  .col-span-4, .col-span-6, .col-span-8 { grid-column: span 12; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sidebar { width: 60px; }
  /* A largura do alvo, que a primeira medicao de 24/08 nao viu por so olhar
     altura. A conta: 60px de barra menos 1px de borda = 59px de caixa de
     conteudo (box-sizing: border-box); menos o padding de 12px de cada lado da
     .sidebar-nav sobravam 35px de alvo, contra os 44px que o dedo pede — e o
     glifo de 20px transbordava 9px do conteudo util, 12px no item ativo, que
     ainda perde 3px para a borda esquerda.
     Com 7px de recuo lateral sobram 45px, e o item ganha respiro horizontal
     proprio. O padding VERTICAL de 12px nao se mexe: e ele que da os 44px de
     altura (12+12+20). */
  .sidebar-nav { padding: 12px 7px; }
  .sidebar-header .sidebar-title,
  .sidebar-user,
  .sidebar-divider,
  .nav-item span:not(.material-symbols-outlined),
  .btn-generate span:not(.material-symbols-outlined),
  .sidebar-link span:not(.material-symbols-outlined) { display: none; }
  .sidebar-header { justify-content: center; padding: 16px 8px; }
  .nav-item { justify-content: center; padding: 12px 4px; }
  .sidebar-footer { padding: 12px 7px; }
  .btn-generate { justify-content: center; }
  .sidebar-link { justify-content: center; padding: 10px; }
  .main-content { margin-left: 60px; }
  .page { padding: 20px 16px; }
  .top-bar { padding: 0 16px; }
  .top-bar-center { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .bento-grid-secondary { grid-template-columns: 1fr; }
}

/* ─── Tabela com rolagem própria ───────────────────────────────────────────
   Usada no "Saldo e consumo diário", que pode trazer 14 dias e empurrava o
   resto da página para muito longe. Rolar dentro do bloco mantém o quadro do
   tamanho de uma tela.

   O cabeçalho é fixo porque a coluna que mais importa — o custo — é a mais
   distante do nome do dia: rolando sem cabeçalho, o número perde o rótulo
   exatamente onde ele é dinheiro. O fundo é o mesmo de `.data-table th`, e
   precisa ser opaco, senão as linhas passam por baixo e se sobrepõem ao
   texto do cabeçalho. */
.tabela-rolavel { max-height: 420px; overflow-y: auto; }
.tabela-rolavel thead th { position: sticky; top: 0; z-index: 1; background: var(--sup-2); }

/* ═══ FOCO VISÍVEL — a rede que faltava ═══════════════════════════════════════
   Medido em 24/08: 26 regras de `:hover` contra 6 blocos que tratavam foco, para
   ~59 elementos clicáveis. O painel avisava o mouse onde ele estava duas vezes e
   meia mais do que avisava o teclado — e é pelo teclado que se percorre uma
   tabela de conferência.

   Duas armadilhas de cascata, as duas medidas antes de escrever:

   `:where(...)` estava fora de questão: ele nasce com especificidade ZERO e seria
   derrotado por todas as regras `:hover`/`:focus` já existentes — a regra pareceria
   certa no arquivo e não pintaria nada na tela. Por isso a lista abaixo vai com
   especificidade real.

   `!important` também: ele atropelaria `.card-link`, `.agente-linha summary` e
   `.linha-clicavel`, que usam `outline-offset` NEGATIVO de propósito, para o
   contorno não vazar da linha da tabela. Esta regra é um piso, não um teto —
   quem já tem tratamento próprio continua mandando.                            */
a[href]:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}

/* ═══ MOVIMENTO REDUZIDO ══════════════════════════════════════════════════════
   Quem pede menos movimento no sistema operacional recebia tudo igual: 15
   declarações `transition`, uma `animation` e o `@keyframes fadeIn` que desliza
   toda troca de página.

   Desligar animação costuma ter um risco: elemento que só aparecia via `opacity`
   fica invisível. Aqui esse risco NÃO existe, e dá para provar — o único
   `opacity: 0` do projeto está dentro do próprio `@keyframes fadeIn`. Nenhuma
   outra regra parte de opacity 0, visibility hidden ou transform de entrada.

   `!important` é justificado aqui, e só aqui: a preferência da pessoa vence
   qualquer regra de componente, inclusive as que vierem depois desta.           */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* A página aparece inteira, sem deslizar. Sem isto ela ainda faria o passo de
     6px em 0,01ms — rápido demais para ver, mas é um salto, não uma ausência. */
  .page.active {
    animation: none !important;
  }
}

/* ═══ ALVO DE TOQUE ═══════════════════════════════════════════════════════════
   Calculado em 24/08 (`tools/test-alvo-de-toque.mjs`): sete controles do painel
   ficavam abaixo dos 44px que o dedo precisa — o menor deles, a caixa de marcar
   rotina, tinha 22px, metade do necessário.

   Elevar todos a 44px em toda parte estava fora de questão: a direção C acabou
   de apertar a densidade de propósito, e engordar botão no desktop desfaria
   justamente o que ela foi fazer. `pointer: coarse` separa as duas coisas — o
   mouse continua com a densidade de instrumento, o dedo ganha o alvo.

   `min-height` em vez de mais padding: os controles já são flex com
   `align-items: center`, então a altura cresce sem mover o conteúdo de lugar.  */
@media (pointer: coarse) {
  .btn,
  .btn-sm,
  .data-table-actions .btn,
  .nav-item,
  .sidebar-link,
  .btn-generate {
    min-height: 44px;
  }

  /* O X de fechar modal é o toque mais difícil da tela: 30px, num canto. */
  .modal-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

}


/* ═══ NOTÍCIAS DE PROMOÇÕES ═══════════════════════════════════════════════
   Vigia de Promoções Domus. Só tokens — nenhuma cor literal aqui.

   As cores de marca de terceiro (Smiles #FF7B00, LATAM Pass #E8114B, TudoAzul
   #0055A5, Livelo, Esfera) continuam FORA dos tokens, pela razão escrita no topo
   deste arquivo: são dado ligado ao programa, não tema. Quando entrarem, entram
   como ponto por programa, no molde de .miles-program-dot — nunca como fundo,
   borda ou texto de componente.                                              */

.promo-bloco { margin-bottom: var(--e-gap); }

/* A ROLAGEM DO HISTORICO. Tres cartoes visiveis e o resto por rolagem interna:
   com doze encerradas o bloco empurrava a tabela de Fontes para fora da tela.

   `--promo-rolagem-max` e' 3 x a altura de um cartao (82px medidos em
   09/09/2026, com o titulo em duas linhas) mais uma fresta, para a quarta linha
   aparecer CORTADA. Cortada de proposito: uma borda limpa no fim do terceiro
   cartao parece o fim da lista, e ai o recorte esconde em vez de conter.

   Sem desvanecimento na base. Ele pareceria mais fino e velaria conteudo real,
   e quem precisa saber que ha mais ja leu a contagem no cabecalho. */
.promo-rolagem-ativa {
  /* A ALTURA NAO MORA AQUI, e a tentativa de fixa-la em px durou uma medicao.
     O mesmo cartao mede 214px numa janela estreita e 130px a 1600 de largura --
     o texto reflui, e "tres cartoes" em pixels e' verdade em uma largura so.
     Quem sabe a altura de tres cartoes e' o DOM depois de renderiza-los, entao
     `promocoesAlturaDaRolagem_` a mede e escreve o `max-height` inline. */
  overflow-y: auto;
  /* A rolagem para NESTE bloco: sem isto, chegar ao fim da lista continua
     rolando a pagina atras dela, e o dono perde o lugar onde estava. */
  overscroll-behavior: contain;
}

/* A BARRA E' PARA SER VISTA. Uma barra invisivel num bloco recortado esconde
   que ha mais -- que e' exatamente o que este recorte nao pode fazer. */
.promo-rolagem-ativa::-webkit-scrollbar { width: 10px; }
.promo-rolagem-ativa::-webkit-scrollbar-track { background: rgba(78,70,57,0.18); }
.promo-rolagem-ativa::-webkit-scrollbar-thumb {
  background: rgba(197,160,89,0.42);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.promo-rolagem-ativa::-webkit-scrollbar-thumb:hover { background: rgba(197,160,89,0.68); background-clip: padding-box; }
/* Firefox, que nao tem os pseudo-elementos acima. */
.promo-rolagem-ativa { scrollbar-width: thin; scrollbar-color: rgba(197,160,89,0.42) rgba(78,70,57,0.18); }

/* A canária. Ela vem ANTES da lista no HTML, e é por isso que não tem
   margin-top: o que separa ela do cabeçalho da página é o margin-bottom de lá. */
.promo-canaria {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--sup);
  /* Borda no tom de erro, fundo no tom da superfície: o aviso precisa saltar
     sem virar um bloco vermelho que ninguém consegue ler. */
  border: 1px solid var(--erro-fundo);
  border-radius: var(--r-3);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.promo-canaria .material-symbols-outlined {
  color: var(--erro);
  font-size: 22px;
  flex-shrink: 0;
}
.promo-canaria-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--erro-txt);
  margin-bottom: 5px;
}
.promo-canaria-texto { font-size: 13px; color: var(--txt-2); }
.promo-canaria-texto strong { color: var(--txt); font-weight: 600; }

/* Uma promoção. Quatro colunas: o número, o corpo, o prazo e a fonte. */
.promo-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(78,70,57,0.3);
}
.promo-item:last-child { border-bottom: none; }
.promo-item:hover { background: rgba(233,193,118,0.02); }

.promo-percentual { width: 92px; flex-shrink: 0; text-align: right; }
.promo-percentual-num {
  /* 26px é .card-value. 30px não existe neste sistema — a revisão do canvas
     pegou isso em 06/09, e o mesmo número aparecia em dois tamanhos. */
  font-size: 26px;
  font-weight: 700;
  color: var(--ouro);
  letter-spacing: -0.5px;
  line-height: 1;
}
.promo-percentual-rotulo {
  font-size: 11px;
  font-weight: 600;
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

.promo-corpo { flex: 1; min-width: 0; }
.promo-dupla {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.promo-programa { font-size: 15px; font-weight: 600; color: var(--txt); }
.promo-seta { color: var(--txt-3); }
.promo-especie { font-size: 13px; color: var(--txt-3); }
.promo-texto { font-size: 13px; color: var(--txt-3); }
/* A comparação histórica é derivada do histórico do painel, não lida da fonte —
   e o texto já diz isso. A cor a separa do fato apurado sem escondê-la. */
.promo-comparacao { font-size: 12px; color: var(--txt-2); margin-top: 4px; }

.promo-prazo { width: 168px; flex-shrink: 0; font-size: 13px; color: var(--txt); }
.promo-prazo .num, .promo-percentual-num, .promo-teto .num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
}
/* "prazo não declarado" é um estado, não um buraco: ele DIZ, em vez de sumir. */
.promo-sem-prazo { color: var(--txt-3); }
/* O motivo do encerramento ocupa o lugar do prazo numa promoção encerrada. Sem
   cor de estado: encerrada não é alerta nem erro — é fato consumado, e pintá-la
   de âmbar competiria com as que ainda pedem conferência. */
.promo-fim-motivo { color: var(--txt-3); }
.promo-teto { font-size: 12px; color: var(--txt-3); margin-top: 4px; }

.promo-fonte { width: 160px; flex-shrink: 0; text-align: right; font-size: 12px; }
.promo-fonte a { color: var(--ouro); }
.promo-fonte a:hover { color: var(--ouro-claro); text-decoration: underline; }

/* DOIS destinos, e eles não são equivalentes. O link da promoção é para onde o
   dono quer ir; o da fonte é o lastro que permite conferir a notícia. Peso e
   cor dizem isso sem precisar de rótulo — e empilhados, porque "Passageiro de
   Primeira" ao lado de "ir à promoção" não cabe em 160px. */
.promo-oficial { display: block; font-weight: 600; }
/* A seta marca que o link SAI do painel. Meio ponto abaixo da linha de base e
   um pouco menor: ela acompanha o texto, não compete com ele. */
.promo-sai { font-size: 0.85em; margin-left: 3px; opacity: 0.8; }
.promo-fonte-atrib { display: block; margin-top: 3px; font-size: 11px; }
.promo-fonte-atrib a { color: var(--txt-3); }
.promo-fonte-atrib a:hover { color: var(--ouro); }
/* Página oficial muda: quem recua é o LINK. Âmbar e ouro são a MESMA cor nesta
   paleta, por decisão registrada nos tokens — então pintar o aviso de âmbar ao
   lado de um link em ouro não distinguiria nada. Tirando o ouro e o peso do
   link, o âmbar do aviso passa a ser a única coisa marcada ali, e quem olha vê
   que aquele caminho está duvidoso ANTES de clicar. */
.promo-oficial-duvidoso { color: var(--txt-2); font-weight: 500; }
.promo-oficial-duvidoso:hover { color: var(--ouro); }

/* O aviso vem colado no link e ANTES do nome da fonte: aviso depois do que ele
   explica é aviso que ninguém lê. Âmbar, não vermelho — pede conferência, não
   parou nada: a promoção segue no ar até o prazo declarado passar. */
.promo-oficial-mudo {
  display: block;
  font-size: 11px;
  color: var(--atencao);
  margin-top: 2px;
}

.promo-saude { font-size: 12px; color: var(--txt-3); }
.promo-fonte-detalhe { color: var(--txt-3); }
.promo-truncado {
  /* Corte que abre em silêncio não é para-quedas, é alçapão: a contagem do
     descarte é renderizada, não só persistida. */
  font-size: 12px;
  color: var(--atencao);
  padding: 10px var(--e-celula-x);
}

@media (max-width: 900px) {
  /* Empilha antes de espremer: com quatro colunas num telefone, o percentual
     e o prazo brigam e o número vira ilegível — e número ilegível neste painel
     é pior que número ausente. */
  .promo-item { flex-wrap: wrap; }
  .promo-percentual { width: auto; text-align: left; }
  .promo-prazo, .promo-fonte { width: auto; text-align: left; }
}


/* ═══ MAPA DAS FONTES ═════════════════════════════════════════════════════
   O catálogo do que foi mapeado, e não só do que é lido. O que ficou de fora
   aparece com o motivo — ausência sem explicação parece esquecimento.         */

.mapa-fontes-porque {
  font-size: 12px;
  color: var(--txt-3);
  padding: 12px var(--e-celula-x);
  border-bottom: 1px solid rgba(78,70,57,0.3);
  /* O porquê vem ANTES da tabela, e não depois: aviso embaixo de tabela longa
     sai da tela, e quem já rolou até lá não precisava do aviso. */
  margin: 0;
}
.mapa-fontes-grupo td {
  font-size: 11px;
  font-weight: 600;
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--sup-2);
  padding: var(--e-celula);
}
.mapa-fontes-nome { font-weight: 600; white-space: nowrap; }
.mapa-fontes-nota { color: var(--txt-3); }

@media (max-width: 900px) {
  /* A nota é a coluna que pode encolher: nome e estado precisam caber. */
  .mapa-fontes-nota { font-size: 12px; }
}

/* O aviso do bloco de achadas. Vem ANTES dos cartoes pela regra medida em
   26/08: aviso embaixo de lista longa sai da tela, e quem ja rolou ate la nao
   precisava dele. Mesmos tokens do .mapa-fontes-porque, que resolve o mesmo
   problema no bloco de baixo. */
/* `promo-faixa-porque` e o aviso das faixas de 09/09/2026 (aguardando prova,
   expirou sem resposta). Classe PROPRIA e nao reuso da de cima: a guarda de
   tools/test-promocoes-vazio.mjs ancora na primeira ocorrencia da classe das
   achadas, e reusa-la fez o teste medir o bloco errado. */
.promo-achadas-porque,
.promo-faixa-porque {
  font-size: 12px;
  color: var(--txt-3);
  padding: 12px var(--e-celula-x);
  border-bottom: 1px solid rgba(78,70,57,0.3);
  margin: 0;
}
.promo-achadas-porque strong,
.promo-faixa-porque strong { color: var(--txt-2); }