/* ============================================================
   Central de Ofertas — Money Milhas
   Structural styles. Stateful / tokenised colours (status chips,
   switches, health tones) are applied inline from src/tokens.js,
   mirroring the design's own architecture.
   ============================================================ */

/* Bebas Kai — fonte oficial de títulos da Money Milhas.
   Dharma Type, SIL Open Font License 1.1 (ver fonts/OFL.txt).
   Servida do próprio projeto: não é distribuída pelo Google Fonts. */
@font-face {
  font-family: 'Bebas Kai';
  src:
    url('../fonts/BebasKai.woff2') format('woff2'),
    url('../fonts/BebasKai.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Títulos e números grandes. Nunca em texto corrido — o resto é Abel. */
  --font-display: 'Bebas Kai', Impact, sans-serif;

  /* Cores de estado da marca. Só comunicam estado — nunca decoração,
     nunca botão que não seja de ação destrutiva. As variantes de texto
     com contraste ficam em src/tokens.js. */
  --mm-success: #12b76a;
  --mm-warning: #f5a524;
  --mm-danger: #e5484d;

  /* Dourado: exclusivo do selo "Melhor 6M". Nada mais na tela pode ser
     dourado — por isso mora aqui, num lugar só, e não escrito à mão. */
  --gold-line: #c9a84c;
  --gold-glow: rgba(201, 168, 76, 0.8);
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Abel', system-ui, sans-serif;
  background: #0a0a1a;
}
/* Keeps the overscroll gutter in the right tone — .bg-layer covers the viewport,
   but the canvas behind it shows through on rubber-band scroll. */
body.mm-light {
  background: #f8fbff;
}
* {
  box-sizing: border-box;
}
/* ⚠ ESTE AZUL NÃO SERVE PARA TEXTO NO TEMA CLARO: `--accent` (#0fa6fd) sobre o
   cartão claro (#f7fbff) dá 2,56 de contraste, e o mínimo legível é 4,5. No
   escuro está bom (7,89). Os dois links que a tela tem hoje — `.link-externo` e
   `.pub-detail-link` — vestem `--fg2` por cima disto, de propósito.

   Link novo que confiar nesta linha nasce apagado no claro, e ninguém percebe
   porque no escuro fica bonito. Veja os dois acima antes de escrever o terceiro. */
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  filter: brightness(1.15);
}
button {
  font-family: inherit;
  cursor: pointer;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 10px;
}

/* Anel de foco — todo botão da tela é personalizado, então sem isto quem
   navega por teclado não enxerga onde está. `:focus-visible` só aparece na
   navegação por teclado, não no clique de mouse. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
/* `input` entrou em 2026-08-21, com o primeiro campo de digitar da tela — o da
   busca por nome. Sem ele, o único lugar onde se digita seria o único sem
   anel de foco. */
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* No menu lateral o fundo é navy nos dois temas: o azul claro da marca
   contrasta melhor ali do que o azul do tema claro. */
.sidebar a:focus-visible,
.sidebar button:focus-visible {
  outline-color: #23c9ff;
}

/* --- Motion ------------------------------------------------- */
@keyframes starTwinkle {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes mmSlide {
  from {
    transform: translateX(28px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes mmSpin {
  from {
    transform: rotateX(-16deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-16deg) rotateY(360deg);
  }
}
@keyframes mmFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes mmOrbit {
  from {
    transform: rotateX(74deg) rotate(0deg);
  }
  to {
    transform: rotateX(74deg) rotate(360deg);
  }
}

/* --- Theme scopes -------------------------------------------- */

/* ⚠ `color-scheme` NÃO É UM TOKEN A MAIS — é o único jeito de contar ao
   NAVEGADOR em que tema a página está, e ele precisa saber porque há pedaços
   que quem pinta é ele, não a nossa folha de estilo.

   O pedaço que denunciou isso, em 2026-08-22: a lista que abre quando se
   clica num filtro. As nossas cores mandam no botão fechado, e ele ficava
   perfeito; a lista aberta é desenhada pelo navegador, que sem esta linha
   assume tema claro e pinta o fundo de branco. O texto de dentro herda o
   `--fg2`, que no escuro é quase branco. Branco no branco: ilegível.

   Por isso ela mora AQUI, junto das cores com que tem de concordar, e não
   numa regra solta: quem trocar a paleta de um tema vê esta linha na mesma
   tela. É a mesma ideia do princípio #17 — só que o par que faltava não era
   entre os dois temas, era entre a nossa paleta e a do navegador. Os 33
   tokens estavam pareados, e nenhum deles cobria isto.

   Vale também para o resto do que o navegador pinta sozinho: barras de
   rolagem nativas, o "x" do campo de busca e a marca de seleção do texto. */
:root,
.mm-dark {
  color-scheme: dark;
  --page-bg: linear-gradient(135deg, #0a0a1a 0%, #0d1b3e 38%, #1a0a2e 68%, #0a1628 100%);
  --stars: 1;
  --sidebar-bg: rgba(10, 10, 30, 0.72);
  --sidebar-blur: blur(22px);
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-blur: blur(12px);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-soft: rgba(255, 255, 255, 0.06);
  --fg1: #ffffff;
  --fg2: rgba(255, 255, 255, 0.72);
  --fg3: rgba(255, 255, 255, 0.5);
  --fg4: rgba(255, 255, 255, 0.35);
  --accent: #23c9ff;
  --accent-soft-bg: rgba(35, 201, 255, 0.12);
  --accent-soft-border: rgba(35, 201, 255, 0.5);
  --accent-soft-fg: #7dd3fc;
  /* A LARANJA DE ATENÇÃO COMO TEXTO. O `--mm-warning` cru é o tom da marca e
     serve de borda e de ícone; em TEXTO pequeno ele não tem contraste, e a §12
     manda usar a variante derivada da própria cor — nunca improvisar outro tom.
     Estes dois valores são o `onDark` e o `onLight` de `src/tokens.js`, sem
     invenção nenhuma. */
  --warn-fg: #f8c471;
  /* O par escuro do vermelho de estado — o `onLight`/`onDark` de
     `src/tokens.js`. O tom cru (`--mm-danger`) serve de BORDA e some como
     texto pequeno: a §12 manda usar a variante derivada, nunca improvisar
     outro tom. Nasceu com a fatia 2 do lote de banners, para a frase de
     recusa de um cartão ter cor de erro E ser legível. */
  --danger-fg: #ee888b;
  --grad-head: linear-gradient(100deg, #ffffff, #23c9ff);
  --btn-on-grad: #04121f;
  --shadow-lg: 0 20px 48px -24px rgba(0, 0, 0, 0.9);
  --shadow-md: 0 14px 32px -20px rgba(0, 0, 0, 0.85);
  --inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --thead-bg: rgba(13, 27, 62, 0.85);
  --hero-bg: linear-gradient(
    120deg,
    rgba(15, 166, 253, 0.22),
    rgba(26, 10, 46, 0.35) 55%,
    rgba(255, 255, 255, 0.04)
  );
  --hero-glow: rgba(35, 201, 255, 0.42);
  --gold-bg: rgba(201, 168, 76, 0.16);
  --gold-fg: #f0d98a;
  --row-hover: rgba(255, 255, 255, 0.05);
  --scroll-thumb: rgba(255, 255, 255, 0.14);
  --logo-tile: #0b1020;
  --dash: rgba(255, 255, 255, 0.24);
  /* O fundo da lista que abre num filtro. OPACO de propósito: as outras
     superfícies do tema escuro são brancos translúcidos, que só funcionam
     porque há o fundo da página por baixo. Dentro de uma lista aberta pelo
     navegador não há fundo nosso nenhum — um branco a 5% ali vira quase
     branco, e o texto quase branco por cima some. */
  --menu-bg: #131c33;
}

/* A CLASSE DO TEMA MORA NO `body`, e a raiz precisa concordar com ela.
   Sem esta regra, o `html` continuaria dizendo "escuro" — herdado do `:root`
   acima — enquanto o corpo diz "claro", e o que o navegador pinta na RAIZ (a
   barra de rolagem da página e a faixa que aparece quando se puxa além do
   fim) sairia escuro numa tela clara. */
:root:has(body.mm-light) {
  color-scheme: light;
}

.mm-light {
  color-scheme: light;
  --page-bg: linear-gradient(160deg, #f8fbff 0%, #eef5fc 55%, #f8f8f8 100%);
  --stars: 0;
  --sidebar-bg: #2d3047;
  --sidebar-blur: none;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --surface: #ffffff;
  --surface-2: #f7fbff;
  --surface-blur: none;
  --border: #dde8f5;
  --border-strong: #cde7fa;
  --border-soft: #eef4fb;
  --fg1: #1a1a2e;
  --fg2: #2e4057;
  --fg3: #7a7a7a;
  --fg4: #9aa7b6;
  --accent: #0fa6fd;
  --accent-soft-bg: #e9f5ff;
  --accent-soft-border: #cde7fa;
  --accent-soft-fg: #0b7bbd;
  /* O par claro do `--warn-fg` — o `onLight` de `src/tokens.js`. Sem ele, o
     tema claro herdaria o tom do escuro e o aviso sumiria no branco: é o
     princípio #17 na versão que só aparece no modo que ninguém testa. */
  --warn-fg: #875b14;
  /* O par claro do `--danger-fg` — o `onLight` de `src/tokens.js`. */
  --danger-fg: #952f32;
  --grad-head: linear-gradient(100deg, #2d3047, #0fa6fd);
  --btn-on-grad: #ffffff;
  --shadow-lg: 0 12px 30px -16px rgba(15, 23, 42, 0.28);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.07);
  --inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --thead-bg: #f7fbff;
  --hero-bg: linear-gradient(120deg, #e4f3ff 0%, #ffffff 58%, #f7fbff 100%);
  --hero-glow: rgba(15, 166, 253, 0.3);
  --gold-bg: #faf0d2;
  --gold-fg: #6b5312;
  --row-hover: #f7fbff;
  --scroll-thumb: #dde8f5;
  --logo-tile: #ffffff;
  --dash: #c8d6e6;
  --menu-bg: #ffffff;
}

/* --- Shell ---------------------------------------------------- */
.app {
  display: flex;
  min-height: 100vh;
  isolation: isolate;
  color: var(--fg1);
}
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--page-bg);
}
.stars-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--stars);
  animation: starTwinkle 5s ease-in-out infinite alternate;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1px 1px at 27% 62%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 28%, rgba(35, 201, 255, 0.9), transparent 60%),
    radial-gradient(1px 1px at 55% 78%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 68% 12%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1.4px 1.4px at 76% 54%, rgba(35, 201, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 88% 32%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 93% 72%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 34% 88%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 61% 40%, rgba(255, 255, 255, 0.5), transparent 60%);
}

/* --- Sidebar --------------------------------------------------- */
.sidebar {
  width: 246px;
  flex: 0 0 246px;
  background: var(--sidebar-bg);
  backdrop-filter: var(--sidebar-blur);
  -webkit-backdrop-filter: var(--sidebar-blur);
  border-right: 1px solid var(--sidebar-border);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  color: #ffffff;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px;
}
.brand-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(150deg, #23c9ff, rgba(15, 166, 253, 0.2));
  box-shadow: 0 0 22px rgba(35, 201, 255, 0.35);
}
.brand-logo img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  background: var(--logo-tile);
}
.brand-text {
  line-height: 1;
}
.brand-name {
  font-size: 17px;
  letter-spacing: 0.2px;
}
.brand-name .money {
  color: #23c9ff;
}
.brand-name .milhas {
  color: #ffffff;
}
.brand-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  padding: 10px;
  font-size: 15px;
  transition:
    background 180ms,
    box-shadow 180ms;
}
.nav-btn svg {
  flex: 0 0 16px;
}
.nav-btn--program {
  gap: 10px;
  padding: 9px 10px;
}
.nav-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding: 16px 10px 6px;
}
.nav-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}
.nav-name {
  flex: 1;
}
.nav-meta {
  font-size: 12px;
  color: #23c9ff;
}
.nav-gap {
  height: 12px;
}

.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  transition: background 180ms;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}
.theme-toggle-label {
  display: flex;
  align-items: center;
  gap: 9px;
}
.switch-mini {
  width: 36px;
  height: 20px;
  flex: 0 0 36px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}
.switch-mini .knob {
  position: absolute;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 180ms;
}
.robot-status {
  border-top: 1px solid var(--sidebar-border);
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mm-success);
  box-shadow: 0 0 12px var(--mm-success);
  animation: mmPulse 2.4s ease-in-out infinite;
}

/* --- Main ------------------------------------------------------ */
.main {
  flex: 1;
  min-width: 0;
  padding: 28px 32px 64px;
}

/* Shared surfaces */
.card {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  box-shadow: var(--shadow-md);
}
.card--pad {
  padding: 20px 22px 22px;
}
.card--flush {
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.card-head--bordered {
  padding: 17px 22px;
  border-bottom: 1px solid var(--border-soft);
}
.meta {
  font-size: 13px;
  color: var(--fg3);
}

.display-1,
.display-2,
.h-sec,
.h-sub {
  font-family: var(--font-display);
  margin: 0;
}
.display-1 {
  font-size: 56px;
  letter-spacing: 1px;
  line-height: 0.98;
}
.display-2 {
  font-size: 44px;
  letter-spacing: 1px;
  line-height: 1;
}
.h-sec {
  font-size: 22px;
  letter-spacing: 0.8px;
  color: var(--fg1);
}
.h-sub {
  font-size: 20px;
  letter-spacing: 0.8px;
  color: var(--fg1);
}
.gradient-text {
  background: var(--grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-intro {
  margin: 8px 0 20px;
  color: var(--fg3);
  font-size: 15px;
}

/* Buttons */
.btn-primary {
  border: 0;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 15px;
  background: linear-gradient(135deg, #23c9ff, #0fa6fd);
  color: var(--btn-on-grad);
  box-shadow: 0 12px 28px -12px rgba(35, 201, 255, 0.9);
  transition: box-shadow 180ms;
}
.btn-primary:hover {
  box-shadow: 0 16px 36px -12px rgba(35, 201, 255, 1);
}
.btn-hero {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 13px 24px;
  font-size: 16px;
  background: linear-gradient(135deg, #23c9ff, #0fa6fd);
  color: var(--btn-on-grad);
  box-shadow:
    0 12px 30px -10px rgba(35, 201, 255, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: box-shadow 180ms;
}
.btn-hero:hover {
  box-shadow: 0 16px 40px -10px rgba(35, 201, 255, 0.95);
}
.btn-soft {
  border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft-bg);
  color: var(--accent-soft-fg);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 15px;
}
.btn-ghost {
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--fg2);
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 14px;
}
.btn-ghost--lg {
  padding: 10px 18px;
  font-size: 15px;
  background: var(--surface);
}
.btn-ghost--sm {
  border-radius: 10px;
  padding: 6px 13px;
  font-size: 13px;
  background: var(--surface);
}
.btn-quiet {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg3);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 14px;
}
.btn-chip-add {
  font-size: 13px;
  border-radius: 9999px;
  padding: 5px 13px;
  background: var(--surface);
  color: var(--fg3);
  border: 1px dashed var(--dash);
}

/* --- Painel: hero --------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--hero-bg);
  box-shadow: var(--shadow-lg), var(--inset);
  padding: 30px 34px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  right: -90px;
  top: -150px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, var(--hero-glow), transparent 62%);
  filter: blur(12px);
  pointer-events: none;
}
.hero-orb {
  flex: 0 0 140px;
  height: 140px;
  perspective: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mmFloat 6s ease-in-out infinite;
}
.orb {
  position: relative;
  width: 112px;
  height: 112px;
  transform-style: preserve-3d;
  animation: mmSpin 14s linear infinite;
}
.orb-shell {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #23c9ff, #0fa6fd, #2d3047, #23c9ff);
  box-shadow:
    0 0 42px rgba(35, 201, 255, 0.5),
    inset 0 0 30px rgba(0, 0, 0, 0.45);
  transform: translateZ(9px);
}
.orb-core {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 28%,
    rgba(255, 255, 255, 0.55),
    rgba(15, 166, 253, 0.15) 45%,
    rgba(10, 10, 26, 0.9)
  );
  transform: translateZ(11px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.orb-core svg {
  opacity: 0.9;
}
.orb-orbit {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(35, 201, 255, 0.4);
  animation: mmOrbit 9s linear infinite;
}
.hero-copy {
  flex: 1;
  min-width: 260px;
  position: relative;
}
.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
}
.hero-title {
  margin: 6px 0 0;
}
.hero-sub {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--fg2);
  max-width: 520px;
}

/* --- Painel: health ------------------------------------------- */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  perspective: 900px;
}
.health-card {
  text-align: left;
  border-radius: 10px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-md), var(--inset);
  transform: rotateX(4deg);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms;
}
.health-card:hover {
  transform: rotateX(0deg) translateY(-4px);
}
.health-top {
  display: flex;
  align-items: center;
  gap: 9px;
}
.health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.health-name {
  font-size: 17px;
  color: var(--fg1);
  flex: 1;
}
.health-kind {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg4);
}
.health-label {
  font-size: 13px;
}
.health-source {
  font-size: 12px;
  color: var(--fg4);
}

/* --- Painel: KPIs --------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  padding: 18px 20px;
  box-shadow: var(--shadow-md), var(--inset);
}
.kpi-glow {
  position: absolute;
  width: 130px;
  height: 130px;
  right: -46px;
  bottom: -56px;
  border-radius: 50%;
}
.kpi-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  letter-spacing: 1px;
  margin-top: 8px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kpi-note {
  font-size: 13px;
  color: var(--fg3);
  margin-top: 4px;
}

/* --- Painel: banner + recent ---------------------------------- */
.banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-radius: 10px;
  box-shadow: var(--shadow-md), var(--inset);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.banner-body {
  flex: 1;
  min-width: 240px;
}
.banner-title {
  font-size: 17px;
  color: var(--fg1);
}
.banner-sub {
  font-size: 14px;
  color: var(--fg3);
  margin-top: 2px;
}

.recent-list {
  display: flex;
  flex-direction: column;
}
.recent-row {
  display: flex;
  gap: 18px;
  align-items: center;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  padding: 16px 22px;
  transition: background 160ms;
}
.recent-row:hover {
  background: var(--row-hover);
}
.mini-card {
  flex: 0 0 138px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-md);
}
.mini-card-cover {
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #23c9ff, #0fa6fd);
  box-shadow: 0 6px 18px -8px rgba(35, 201, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-on-grad);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.6px;
}
.mini-card-title {
  font-size: 11px;
  color: var(--fg2);
  line-height: 1.25;
}
.mini-card-meta {
  font-size: 10px;
  color: var(--fg4);
}
.recent-body {
  flex: 1;
  min-width: 0;
}
.recent-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.recent-title {
  font-size: 18px;
  color: var(--fg1);
}
.recent-detail {
  font-size: 14px;
  color: var(--fg3);
  margin-top: 4px;
}
.recent-right {
  text-align: right;
  flex: 0 0 150px;
}
.recent-dest {
  font-size: 14px;
  color: var(--fg2);
}
.recent-hour {
  font-size: 13px;
  color: var(--fg4);
}

.badge-gold {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-fg);
  background: var(--gold-bg);
  border: 1px solid var(--gold-line);
  border-radius: 9999px;
  padding: 3px 10px;
  box-shadow: 0 0 18px -4px rgba(201, 168, 76, 0.7);
}
.badge-gold--sm {
  font-size: 10px;
  padding: 2px 8px;
  white-space: nowrap;
  box-shadow: 0 0 16px -4px rgba(201, 168, 76, 0.7);
}

/* --- Programa -------------------------------------------------- */
.prog-head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--hero-bg);
  box-shadow: var(--shadow-lg), var(--inset);
  padding: 22px 26px;
  margin-bottom: 22px;
}
.prog-tile {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: linear-gradient(150deg, #23c9ff, #0fa6fd);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 26px;
  color: #ffffff;
  letter-spacing: 0.6px;
  box-shadow:
    0 14px 30px -16px rgba(35, 201, 255, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.prog-title {
  font-size: 42px;
}
.prog-body {
  flex: 1;
  min-width: 200px;
}
.prog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.chip-health {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  border-radius: 9999px;
  padding: 4px 12px;
}
.chip-health .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* A barra de abas passou a ter dois lados: as abas à esquerda e a chave do
   tipo à direita (nível 2 das três chaves, DECISOES D-31). No celular os dois
   lados empilham, e a chave fica embaixo das abas em vez de espremê-las. */
.tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
/* Grade, e não linha flexível: com o aviso do bot desligado dentro, o
   `flex-wrap` esticava a chave até a largura toda e jogava o rótulo para uma
   ponta e a chave para a outra. Aqui o par rótulo/chave fica sempre junto, e o
   aviso desce numa linha própria embaixo, alinhado à direita. */
.tab-key {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: end;
  gap: 4px 10px;
}
.tab-key-label {
  font-size: 13px;
  color: var(--fg3);
}
/* O aviso de que o bot do programa está desligado. Sem ele, a chave do tipo
   aparece ligada enquanto nada sai — e a tela estaria mentindo por omissão. */
.tab-key-note {
  font-size: 12px;
  color: var(--warn-fg, var(--fg4));
  grid-column: 1 / -1;
  text-align: right;
}

.tabs {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tab {
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: box-shadow 180ms;
}
.tab--plain {
  padding: 10px 18px;
}
.tab-state {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 9999px;
  padding: 2px 9px;
}

/* Discovered */
.disc-section {
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.disc-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.disc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 15px;
  flex-wrap: wrap;
}
.disc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px dashed var(--dash);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--fg4);
}
/* O nome da fila virou BOTÃO em 2026-08-22 (D-34): ele abre a gaveta. Como
   botão, ele traz consigo o fundo, a borda e o texto centrado do navegador —
   por isso as três linhas que os desligam. Sem elas a fila ganha três caixas
   cinzentas que não são de ninguém. */
.disc-body {
  flex: 1;
  min-width: 160px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
}
.disc-name {
  font-size: 16px;
  color: var(--fg1);
}
.disc-meta {
  font-size: 13px;
  color: var(--fg3);
}
.disc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-disc-primary {
  border: 0;
  background: linear-gradient(135deg, #23c9ff, #0fa6fd);
  color: var(--btn-on-grad);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 14px;
  box-shadow: 0 10px 24px -12px rgba(35, 201, 255, 0.9);
}

/* Table */
.table-wrap {
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 700px;
}
.table th {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--thead-bg);
}
.table th.is-sticky {
  position: sticky;
  right: 0;
  z-index: 2;
}
.table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: var(--fg3);
}
.td-promo {
  text-align: right;
}
.promo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.promo-value {
  font-variant-numeric: tabular-nums;
  font-size: 19px;
}
.td-validade {
  text-align: right;
  font-size: 14px;
  white-space: nowrap;
}
.td-actions {
  text-align: center;
  position: sticky;
  right: 0;
  z-index: 1;
}
.cell-name {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}
.logo-tile {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: var(--inset);
}
.cell-name-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cell-name-main {
  font-size: 16px;
}
.cell-name-sub {
  font-size: 12px;
  color: var(--fg4);
}
.spark {
  display: block;
  overflow: visible;
}
.spark-caption {
  font-size: 11px;
  color: var(--fg4);
  margin-top: 3px;
}
.switch {
  width: 44px;
  height: 25px;
  border-radius: 9999px;
  position: relative;
  transition: background 180ms;
  display: block;
  margin: 0 auto;
}
.switch .knob {
  position: absolute;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  transition: left 180ms;
}

/* Régua */
.regua-section {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
  padding: 20px 22px;
  margin-top: 20px;
}
/* O BLOCO DO LOTE (#129), logo abaixo da régua. Ele usa `.card .card--pad`,
   que é a superfície compartilhada da tela — só o afastamento é dele. Uma
   segunda caixa com borda, fundo e sombra escritas de novo seria a duplicação
   do princípio #17 na folha de estilo, e a que mais some: o par que falta só
   aparece no tema que ninguém testa. */
.lote-section {
  margin-top: 20px;
}
/* O cabeçalho da régua: título e a linha que diz de qual programa ela é.
   ⚠ ELE ERA UM `flex` COM DUAS COLUNAS até 2026-08-24, porque tinha um botão
     "Ajustar" à direita. O botão saiu — cada cartão tem o próprio lápis — e com
     ele saíram `.regua-head-texto` e `.regua-lapis`. Sobrou o espaçamento, que
     é o que separa o texto da grade. */
.regua-head {
  margin-bottom: 16px;
}
.regua-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
/* A caixa de ajustar, quando o lápis a abre, fica separada da grade acima. */
.regua-section .padrao-box {
  margin-top: 16px;
}
.regua-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--inset);
}
/* O rótulo do cartão passou a carregar o lápis daquela régua (2026-08-24). O
   nome ocupa o que sobra e o botão fica encostado à direita: alinhado ao lado
   do texto, "Transferência bonificada" empurraria o lápis para fora da linha. */
.regua-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--fg3);
}
/* O lápis do cartão é MENOR que o do cabeçalho e não tem rótulo: ali o nome da
   régua está do lado, e repeti-lo em quatro cartões vira ruído. O nome vai no
   `aria-label`, para quem usa leitor de tela ter a mesma informação.
   A área de toque é a de sempre — 32 px, o mínimo que um dedo acerta. */
.regua-lapis-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: -6px -6px -6px 0;
}
.regua-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.regua-value {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.6px;
}
.regua-value--sm {
  font-size: 30px;
}
.regua-unit {
  font-size: 14px;
  color: var(--fg3);
}

/* Empty states */
.empty-dashed {
  border-radius: 10px;
  border: 1px dashed var(--dash);
  background: var(--surface-2);
  padding: 48px 28px;
  text-align: center;
}
.empty-solid {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 48px 28px;
  text-align: center;
}
.empty-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.8px;
}
.empty-text {
  max-width: 470px;
  margin: 10px auto 20px;
  font-size: 15px;
  color: var(--fg3);
}
.empty-text--last {
  margin-bottom: 0;
}

/* --- A barra de filtros ---------------------------------------
   Nasceu na tela de fontes editoriais e desde 2026-08-21 é usada TAMBÉM pela
   tabela de parceiros. Por isso saiu de dentro do bloco "Fontes editoriais":
   mexer aqui mexe nas duas telas. */
.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
}
.select {
  font-family: inherit;
  font-size: 14px;
  color: var(--fg2);
  border-radius: 10px;
  padding: 8px 12px;
}
/* AS LINHAS DA LISTA ABERTA, escritas por extenso em vez de herdadas.
   O botão fechado é nosso e sempre esteve certo; a lista que abre é desenhada
   pelo navegador, e lá cada linha herdava só a COR DO TEXTO (quase branca no
   tema escuro) sobre um fundo que não é nosso. Dizendo as duas, o par não pode
   mais ficar pela metade — que é o princípio #17 aplicado a uma superfície que
   nós não pintamos. */
.select option {
  background: var(--menu-bg);
  color: var(--fg2);
}
/* O campo de digitar da busca. `min-width: 0` e `flex` porque no celular ele é
   o único item elástico da barra: sem isso ele mantém a largura própria do
   navegador e empurra a barra para fora da tela. */
.filters-search {
  font-family: inherit;
  font-size: 14px;
  color: var(--fg2);
  border-radius: 10px;
  padding: 8px 12px;
  flex: 1 1 180px;
  min-width: 0;
}
.filters-search::placeholder {
  color: var(--fg4);
}
.filters-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--fg3);
}

/* --- Fontes editoriais ---------------------------------------- */

.pub-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pub-card {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.pub-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 16px 18px;
  transition: background 160ms;
}
.pub-head:hover {
  background: var(--row-hover);
}
.pub-icon {
  overflow: hidden;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: var(--accent-soft-bg);
  border: 1px solid var(--accent-soft-border);
  color: var(--accent-soft-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.pub-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pub-title {
  font-size: 18px;
  color: var(--fg1);
  line-height: 1.25;
}
.pub-meta-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.pub-meta {
  font-size: 13px;
  color: var(--fg3);
}
.tag-chip {
  font-size: 12px;
  border-radius: 9999px;
  padding: 3px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg2);
}
.status-chip {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 9999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.status-chip--sm {
  font-size: 11px;
  padding: 3px 10px;
}
.dup-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
}
.dup-bar svg {
  color: var(--mm-warning);
  flex: 0 0 16px;
}
.dup-text {
  font-size: 14px;
  color: var(--fg1);
}
.group-block {
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.group-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  flex-wrap: wrap;
}
.group-label {
  font-size: 14px;
  color: var(--fg2);
}
.group-sources {
  font-size: 13px;
  color: var(--fg4);
  flex: 1;
}
.group-children {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px 14px;
}
.child-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 13px;
  background: var(--surface);
  flex-wrap: wrap;
}
.child-icon {
  overflow: hidden;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.child-title {
  flex: 1;
  min-width: 180px;
  font-size: 15px;
  color: var(--fg2);
}
.child-meta {
  font-size: 13px;
  color: var(--fg4);
}

.src-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.src-card {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  box-shadow: var(--shadow-md), var(--inset);
  overflow: hidden;
}
.src-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  flex-wrap: wrap;
}
.src-icon {
  overflow: hidden;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  background: var(--accent-soft-bg);
  border: 1px solid var(--accent-soft-border);
  color: var(--accent-soft-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.src-body {
  flex: 1;
  min-width: 200px;
}
.src-name {
  font-size: 19px;
  color: var(--fg1);
}
.src-feed {
  font-size: 13px;
  color: var(--fg4);
}
.src-health {
  display: flex;
  align-items: center;
  gap: 8px;
}
.src-health .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.src-health-label {
  font-size: 14px;
}
.src-stats {
  text-align: right;
  min-width: 160px;
}
.src-stats-main {
  font-size: 14px;
  color: var(--fg2);
}
.src-stats-sub {
  font-size: 13px;
  color: var(--fg4);
}
.src-switch {
  flex: 0 0 44px;
}
.src-config {
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.config-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 9px;
}
.config-label--spaced {
  margin: 16px 0 9px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chip-block {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  border-radius: 9999px;
  padding: 5px 8px 5px 12px;
  color: var(--fg1);
}
.chip-block button {
  border: 0;
  background: transparent;
  color: var(--fg3);
  display: flex;
  padding: 0;
}
.chip-interest {
  font-size: 13px;
  border-radius: 9999px;
  padding: 5px 12px;
  background: var(--accent-soft-bg);
  color: var(--accent-soft-fg);
  border: 1px solid var(--accent-soft-border);
}
.config-hint {
  font-size: 13px;
  color: var(--fg4);
  margin-top: 9px;
}
.destino-box {
  font-size: 16px;
  color: var(--fg1);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 10px 13px;
}
.mode-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mode-btn {
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 14px;
}
.src-actions-right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.btn-add {
  border: 0;
  border-radius: 10px;
  padding: 11px 20px;
  background: linear-gradient(135deg, #23c9ff, #0fa6fd);
  color: var(--btn-on-grad);
  font-size: 15px;
  box-shadow: 0 12px 28px -12px rgba(35, 201, 255, 0.9);
}

/* --- Destinos --------------------------------------------------- */
.dest-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 15px 19px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.dest-alert-text {
  flex: 1;
  min-width: 220px;
  font-size: 15px;
  color: var(--fg1);
}
.btn-alert {
  border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft-bg);
  color: var(--accent-soft-fg);
  border-radius: 10px;
  padding: 9px 17px;
  font-size: 14px;
}
.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
  perspective: 1000px;
}
.dest-card {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  padding: 19px 21px;
  box-shadow: var(--shadow-md), var(--inset);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms;
}
.dest-card:hover {
  transform: translateY(-5px);
  box-shadow:
    var(--shadow-lg),
    0 0 30px -12px rgba(35, 201, 255, 0.7);
}
.dest-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dest-name {
  font-size: 20px;
  color: var(--fg1);
}
.dest-members {
  font-size: 12px;
  color: var(--fg4);
}
.dest-handle {
  font-size: 13px;
  color: var(--fg4);
  margin-top: 3px;
}
.dest-section-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 16px 0 8px;
}
.chip {
  font-size: 13px;
  border-radius: 9999px;
  padding: 4px 12px;
}
/* A FICHINHA QUE CLICA (fatia 2d). O botão é só a área de clique: a pílula
   continua sendo o `.chip` de dentro, para a fichinha que clica e a que só se
   lê terem exatamente a mesma aparência. */
.chip-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  line-height: 0;
}
.chip-btn:disabled {
  cursor: default;
  opacity: 0.6;
}
.dest-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.dest-last {
  font-size: 13px;
  color: var(--fg4);
}
.btn-dest {
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--fg2);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
}
.cov-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 600px;
}
.cov-table th {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--thead-bg);
}
.cov-table th:last-child {
  text-align: right;
}
.cov-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.cov-tipo {
  font-size: 16px;
  color: var(--fg1);
}
.cov-grupos {
  font-size: 15px;
  color: var(--fg3);
}
.cov-status {
  text-align: right;
}

/* --- Fila de envio ---------------------------------------------- */

/* De onde o card veio (manual / lote / cron) e quantas tentativas gastou. Vai
   debaixo do nome, em cinza, porque é resposta de segunda pergunta: primeiro
   se lê QUAL card é, e só depois de onde ele veio. */
.fila-origem {
  display: block;
  font-size: 12px;
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
}

/* O erro de uma linha, na largura inteira debaixo dela. Não cabe numa coluna:
   ele é uma frase, e cortá-la esconderia justamente a parte que diz o que
   fazer. `word-break` porque mensagem de erro do Telegram vem sem espaços. */
.fila-erro {
  font-size: 13px;
  color: var(--fg3);
  padding: 0 18px 13px !important;
  border-bottom: 1px solid var(--border-soft);
  word-break: break-word;
}

/* Os botões de resolver, dentro da célula da direita. Menores que os da gaveta
   porque são vários numa linha de tabela — e com margem à esquerda para não
   colarem no selo da mensagem. */
.btn-mini {
  padding: 6px 12px;
  font-size: 13px;
  margin-left: 8px;
}

/* --- Configurações ---------------------------------------------- */
.cfg-page {
  max-width: 840px;
}
.cfg-card {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
}
.cfg-card:last-child {
  margin-bottom: 0;
}
.cfg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cfg-theme-btns {
  display: flex;
  gap: 8px;
}
.cfg-theme-btn {
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 14px;
}
.cfg-text {
  margin: 0;
  font-size: 14px;
  color: var(--fg3);
}
.cfg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.cfg-row:last-child {
  border-bottom: 0;
}
.cfg-row-body {
  flex: 1;
  min-width: 220px;
}
.cfg-row-label {
  font-size: 16px;
  color: var(--fg1);
}
.cfg-row-hint {
  font-size: 13px;
  color: var(--fg4);
}
.cfg-row-value {
  font-size: 17px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Os horários do robô (D-56, fatia 4). SÓ LEITURA: não há botão aqui, e por
   isso também não há nada com estado de foco — o que houvesse precisaria de
   anel visível (§12). */
.hor-aviso {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--fg3);
}
.hor-programa {
  margin-bottom: 20px;
}
.hor-programa:last-of-type {
  margin-bottom: 0;
}
.hor-programa-nome {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--fg1);
  margin-bottom: 8px;
}
.hor-grupo {
  border-left: 2px solid var(--border);
  padding-left: 14px;
  margin-bottom: 12px;
}
.hor-grupo:last-child {
  margin-bottom: 0;
}
.hor-grupo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.hor-grupo-rotulo {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg4);
}
.hor-grupo-ultima {
  font-size: 13px;
  color: var(--fg4);
}
.hor-grupo-ultima.is-erro {
  color: var(--mm-danger);
}
.hor-job {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.hor-job:last-child {
  border-bottom: 0;
}
.hor-job-nome {
  flex: 1;
  min-width: 190px;
  font-size: 15px;
  color: var(--fg2);
}
.hor-job-obs {
  display: block;
  font-size: 12px;
  color: var(--fg4);
}
/* A ÚLTIMA RODADA DAQUELE JOB (D-64, fatia 3). Mesma caixa e mesmo tamanho da
   observação, para as duas lerem como legenda do nome — e não como uma segunda
   coluna disputando espaço com os horários. */
.hor-job-rodada {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg4);
  /* A mensagem de erro é a única coisa aqui que pode ser longa. Ela já vem
     cortada da tela, e isto é a rede embaixo: numa janela estreita ela quebra
     em vez de esticar a linha do job. */
  overflow-wrap: anywhere;
}
/* ⚠ AS CORES DE ESTADO SÓ COMUNICAM ESTADO (§12), e aqui são três de quatro: o
   quarto — "ainda sem registro" — fica no cinza do texto secundário de
   propósito. Ele não é bom nem ruim: é ausência de notícia, e pintá-lo de
   amarelo faria dezessete jobs recém-nascidos parecerem um problema. */
.hor-job-rodada.e-ok {
  color: var(--mm-success);
}
.hor-job-rodada.e-falhou {
  color: var(--mm-danger);
}
.hor-job-rodada.e-sumiu {
  color: var(--mm-warning);
}
.hor-job-horas {
  font-size: 15px;
  color: var(--accent);
  /* Coluna de número usa dígito de largura fixa, senão a grade dança quando o
     horário muda (§12). */
  font-variant-numeric: tabular-nums;
}
.hor-job-estado {
  min-width: 62px;
  text-align: right;
  font-size: 13px;
  color: var(--mm-success);
}
.hor-job-estado.is-pausado {
  color: var(--mm-warning);
}

.cfg-telegram {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cfg-telegram .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mm-success);
  box-shadow: 0 0 14px var(--mm-success);
}
.cfg-telegram-main {
  font-size: 16px;
  color: var(--fg1);
}
.cfg-telegram-sub {
  font-size: 14px;
  color: var(--fg3);
}

/* --- Drawers ------------------------------------------------------ */
.drawer-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 20, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(470px, 100%);
  border-left: 1px solid var(--border-strong);
  box-shadow: -18px 0 60px rgba(0, 0, 0, 0.35);
  overflow-y: auto;
  animation: mmSlide 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 22px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
}
.drawer-title {
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: 0.8px;
  color: var(--fg1);
  margin: 0;
}
.drawer-close {
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--fg3);
  border-radius: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-body {
  padding: 22px;
}
.drawer-body--stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.drawer-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 10px;
}
.drawer-label--spaced {
  margin: 24px 0 10px;
}
.note-box {
  border-radius: 10px;
  padding: 14px 16px;
}
.note-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 6px;
}
.note-text {
  font-size: 15px;
  color: var(--fg1);
}

.tg-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.tg-cover {
  background: linear-gradient(135deg, #23c9ff, #0fa6fd 60%, #2d3047);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--font-display);
}
.tg-cover--offer {
  height: 140px;
  font-size: 36px;
  letter-spacing: 1.2px;
  box-shadow: inset 0 -14px 30px rgba(0, 0, 0, 0.22);
}
.tg-cover--pub {
  height: 110px;
  font-size: 26px;
  letter-spacing: 1px;
}
.tg-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tg-body--pub {
  padding: 15px 17px;
  gap: 8px;
}
.tg-title {
  font-size: 20px;
  color: var(--fg1);
  line-height: 1.2;
}
.tg-title--pub {
  font-size: 17px;
  line-height: 1.25;
}
.tg-summary {
  font-size: 14px;
  color: var(--fg2);
  line-height: 1.45;
}
.tg-link {
  font-size: 13px;
  color: var(--fg4);
}
.tg-field {
  display: flex;
  gap: 10px;
  font-size: 15px;
}
.tg-field-label {
  color: var(--fg3);
  flex: 0 0 92px;
}
.tg-field-value {
  color: var(--fg2);
  flex: 1;
}

.compare {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 4px;
}
.compare-col {
  flex: 1;
}
.compare-label {
  font-size: 12px;
  color: var(--fg3);
}
.compare-value {
  font-family: var(--font-display);
  font-size: 27px;
  letter-spacing: 0.5px;
}
.compare-value--old {
  color: var(--fg4);
}
.compare-arrow {
  font-size: 20px;
  color: var(--accent);
}
.compare-badge {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-fg);
  background: var(--gold-bg);
  border: 1px solid var(--gold-line);
  border-radius: 9999px;
  padding: 3px 9px;
  text-align: center;
  max-width: 80px;
  line-height: 1.2;
  box-shadow: 0 0 18px -4px rgba(201, 168, 76, 0.75);
}

.chart-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 16px 18px 12px;
}
.chart-box svg {
  display: block;
  overflow: visible;
}
.months {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg4);
  margin-top: 8px;
}
.send-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.send-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
}
.send-group {
  font-size: 15px;
  color: var(--fg1);
}
.send-hour {
  font-size: 13px;
  color: var(--fg4);
}

/* UM DEGRAU DA ESCADA DE PREÇOS, na prévia da compra de pontos (fatia 3).

   Ela é filha da linha de cima — o produto —, e a indentação é o que diz isso
   sem precisar de outra caixa: "Compra de pontos" e, embaixo, os quatro degraus
   com o cupom de cada um. Sem o recuo, cinco linhas iguais na mesma lista
   pareceriam cinco ofertas, que é exatamente o contrário do que a compra faz. */
.send-row--sub {
  margin-left: 16px;
  padding: 8px 12px;
  background: transparent;
  /* Borda mais leve que a da linha-mãe: o degrau é detalhe dela, não outro
     objeto (as duas medidas saem dos tokens, como manda o CLAUDE.md §12). */
  border-color: var(--border-soft);
}
.send-row--sub .send-group {
  font-size: 13px;
  color: var(--fg4);
}

/* A TRILHA DA GAVETA — as três seções do #178.
   Ela reaproveita a linha da lista de envios (.send-row), e acrescenta só o que
   aquela não tinha: a pergunta ao lado do título, e a linha empilhada para o
   valor que não cabe em duas colunas. */

/* A PERGUNTA QUE A SEÇÃO RESPONDE, ao lado do título dela.
   Minúscula no meio de um título em maiúsculas: é o que a separa do título sem
   precisar de outra linha. */
.trilha-pergunta {
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg4);
  font-size: 11px;
}

/* ⚠ A LINHA EMPILHADA EXISTE POR CAUSA DE UM DEFEITO DE VERDADE. A linha comum
   é lado a lado, e a frase do PDF de onde saiu um número tem 70 letras ou mais:
   escrita à direita, ela sai da caixa e cai em cima do rótulo — que foi o que
   aconteceu em 25/08/2026 com o endereço do ícone dos blogs, nas 70 linhas.
   Aqui ela desce para a linha de baixo e usa a largura inteira. */
.send-row--empilhada {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.trilha-frase {
  font-size: 13px;
  color: var(--fg4);
  /* Frase de PDF vem com palavras longas e endereços: sem isto, uma delas
     empurra a caixa para fora da gaveta no celular (princípio #31). */
  overflow-wrap: anywhere;
  line-height: 1.45;
}

/* O ENDEREÇO DO REGULAMENTO, que é link e não texto.

   ⚠ O TEXTO NÃO É AZUL, e isto é medição, não gosto — a primeira escrita desta
     classe era azul e um teste reprovou na hora. Azul de marca sobre o cartão
     claro (`--accent` #0fa6fd sobre #f7fbff) dá 2,56 de contraste, quando o
     mínimo legível é 4,5; no escuro dá 7,89, que é o que faz o defeito passar
     despercebido por quem trabalha no tema escuro. O `--fg2` dá 10,2 e 8,5.

     O azul não sumiu: desceu para o sublinhado e para a seta, que são enfeite.
     É a mesma decisão do `.pub-detail-link` e do `.link-externo` (#68). */
.trilha-link {
  font-size: 13px;
  color: var(--fg2);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.trilha-link::after {
  content: ' ↗';
  color: var(--accent);
}

.pub-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pub-detail-title {
  font-size: 21px;
  color: var(--fg1);
  line-height: 1.25;
}
.pub-detail-meta {
  font-size: 14px;
  color: var(--fg3);
  margin-top: 8px;
}
.pub-detail-summary {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--fg2);
  line-height: 1.5;
}
/* O ENDEREÇO DO POST, na gaveta da publicação. Mesmo conserto do
   `.link-externo` logo abaixo, e pela mesma medição: azul de marca sobre o
   cartão claro (`--accent` #0fa6fd sobre #f7fbff) dá 2,56 de contraste, quando
   o mínimo legível é 4,5. O `--fg2` dá 10,2 no claro e 8,5 no escuro.

   O AZUL NÃO SUMIU — ele desceu para o sublinhado e para a seta, que são
   enfeite. O que diz "isto é um link" continua dito; o que se LÊ é que deixou
   de depender de uma cor que some. Quem quiser "devolver a cara de link"
   pintando o texto de azul reabre o buraco (PENDENCIAS #68, 2026-08-23). */
.pub-detail-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--fg2);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  /* O endereço é uma palavra só e comprida: sem isto ele estoura a gaveta no
     celular em vez de quebrar. */
  overflow-wrap: anywhere;
}
.pub-detail-link::after {
  content: ' ↗';
  color: var(--accent);
}
/* O link que LEVA EMBORA da tela — hoje só o da página do parceiro no site do
   programa. Ele veste o `btn-ghost` da gaveta e acrescenta só o que difere: a
   seta que diz "isto abre fora daqui".

   O TEXTO NÃO É AZUL, e isso é medição, não gosto. Azul de link sobre o cartão
   claro (`--accent` #0fa6fd sobre #f7fbff) dá contraste 2,56, quando o mínimo
   é 4,5 — some para quem enxerga pouco. O `--fg2` do `btn-ghost` dá 10,2 no
   claro e 8,5 no escuro. Quem quiser "deixar com cara de link" vai reabrir
   esse buraco: o azul fica na seta, que é enfeite, e não no que se lê.
   (O `.pub-detail-link`, logo acima, tinha o mesmo 2,56 e já foi consertado —
   este parêntese dizia que ele "ainda é azul", e isso deixou de ser verdade.) */
.link-externo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
}
.link-externo::after {
  content: '↗';
  font-size: 15px;
  color: var(--accent);
}
.drawer-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.drawer-actions .btn-primary,
.drawer-actions .btn-ghost {
  padding: 11px 18px;
  font-size: 15px;
}

/* --- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .app {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    flex: none;
    height: auto;
    position: static;
  }
  .main {
    padding: 20px 18px 48px;
  }
  .display-1 {
    font-size: 42px;
  }
  .hero {
    padding: 22px;
  }

  /* A régua subiu para o topo da tela do programa (DECISOES D-23). No
     computador ela é uma faixa fina de quatro cartões lado a lado; no celular,
     em coluna única, os quatro empilhados empurrariam a lista de parceiros
     para fora da primeira tela — resolveria o problema do Joselito no
     computador e criaria outro no celular.

     Duas colunas e número menor devolvem o espaço. Vale só quando ela está no
     topo: se um dia voltar para o fim, volta ao tamanho cheio sozinha. */
  .regua-section--topo .regua-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .regua-section--topo .regua-item {
    padding: 10px 12px;
  }
  .regua-section--topo .regua-value {
    font-size: 24px;
  }
  .regua-section--topo .regua-value--sm {
    font-size: 22px;
  }
  .regua-section--topo .regua-label,
  .regua-section--topo .regua-unit {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stars-layer,
  .hero-orb,
  .orb,
  .orb-orbit,
  .pulse-dot,
  .drawer {
    animation: none;
  }
  * {
    transition-duration: 1ms !important;
  }
}

/* ============================================================
   Peças que nasceram quando a tela passou a ler o banco de verdade
   (2026-08-21). Cor e medida saem das variáveis, nunca escritas à mão
   (CLAUDE.md, seção 12).
   ============================================================ */

/* O logo do parceiro. Vem da fonte agora; antes eram só duas letras. */
/* A imagenzinha do blog, dentro de qualquer uma das tres caixinhas de fonte.
   `cover` porque o banner e retangular e a caixa e quadrada: cortar pelas
   bordas mostra o meio do desenho, enquanto `contain` deixaria duas faixas
   vazias. O `overflow: hidden` que segura o corte esta nas caixas. */
.fonte-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  /* A maioria dos logos vem em PNG com fundo transparente, desenhado para
     fundo claro. Sem isto, no tema escuro, boa parte some. */
  background: #ffffff;
  padding: 3px;
}

/* A segunda pontuação, a do clube (DECISOES D-22).
   Fica visivelmente MENOR e mais apagada que o número da maioria, de
   propósito: quem bate o olho tem que ler primeiro o valor que vale para
   todo mundo, que é o que a régua usa. Inverter o peso aqui seria repetir
   na tela o erro que o D-22 veio consertar. */
.promo-clube {
  font-size: 12px;
  color: var(--fg4);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.compare-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--fg4);
  font-variant-numeric: tabular-nums;
}

/* A linha da fila de decisão passou a ter logo no lugar da interrogação. */
.disc-row > .logo-tile {
  flex: 0 0 auto;
}

/* --- A pontuação padrão informada por você, na gaveta ----------
   Ela é a única coisa da gaveta que se ESCREVE, e não se lê: o bloco tem borda
   e fundo próprios para não se confundir com os retratos ao redor. */
.padrao-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px;
}
.padrao-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.padrao-campo {
  font-family: inherit;
  font-size: 15px;
  color: var(--fg1);
  border-radius: 10px;
  padding: 9px 12px;
  /* Curto de propósito: é um número de um ou dois dígitos, e um campo largo
     convida a escrever frase onde só cabe número. */
  flex: 0 1 130px;
  min-width: 0;
}
/* O "+" DA MARGEM, e ele mora FORA do campo de propósito: dentro, seria
   apagável, e "2" sozinho lê como o piso velho ("publica quem dá 2 pontos"),
   que o D-28 aposentou. A margem é uma distância — o sinal é o que diz isso. */
.margem-sinal {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
  line-height: 1;
}
.margem-campo {
  /* Mais curto que o do padrão: aqui cabe "2" ou "2,5", nunca mais que isso. */
  flex: 0 1 92px;
}
/* A unidade por extenso ao lado do campo. Ela quebra em duas linhas no celular
   em vez de espremer o campo — por isso o `flex-basis` grande com `flex-grow`. */
.margem-unidade {
  flex: 1 1 190px;
  font-size: 13px;
  color: var(--fg3);
  line-height: 1.35;
}
.padrao-hoje {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--fg3);
}
.padrao-aviso {
  margin-top: 14px;
  /* Borda e fundo vêm dos tokens, escritos na hora: cor de estado mora em
     src/tokens.js e muda com o tema (seção 12 do CLAUDE.md). */
  border-radius: 10px;
  padding: 12px;
}
.padrao-aviso-titulo {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--fg1);
  margin-bottom: 6px;
}
.padrao-aviso-texto {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--fg2);
}
.padrao-aviso-texto--fim {
  margin: 10px 0 0;
  color: var(--fg3);
}
.padrao-ok {
  margin-top: 12px;
  font-size: 13px;
}

/* OS TRÊS GRUPOS de um post de blog, na gaveta da publicação (fatia 5).

   ⚠ O BOTÃO RECUSADO CONTINUA DESENHADO, apagado, com o motivo ao lado — e é
     por isso que a linha é uma grade de duas colunas que quebra no celular, e
     não um botão solto. Botão que some é a pior resposta possível: a pessoa
     procura o que existia ontem e não descobre que foi ela quem desligou. */
.rota-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rota-motivo {
  flex: 1 1 220px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--fg3);
}
.rota-jafoi {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--fg3);
}
/* AS CAIXINHAS DE MARCAR GRUPO — fatia 7 do #145, 2026-08-30.

   ⚠ A LINHA VIROU `label`, e é o que faz o NOME ser clicável junto com a
     caixinha. Uma caixinha de 18 pixels é alvo que se erra no celular, e errar
     aqui é marcar o grupo errado — o único engano desta tela que não se
     desmanda depois (D-02).

   ⚠ E O GRUPO RECUSADO CONTINUA DESENHADO, apagado, com o motivo ao lado. É a
     mesma regra dos botões que estavam aqui antes: sumir faz a pessoa procurar
     o que existia ontem, sem descobrir que foi ela quem desligou. */
.rota-linha--marca {
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
}
.rota-linha--marca input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.rota-linha--marca input:disabled {
  cursor: not-allowed;
}
.rota-nome {
  font-size: 15px;
  color: var(--fg1);
}
.rota-linha--marca input:disabled ~ .rota-nome {
  color: var(--fg4);
}
/* O TEXTO EXATO que vai sair, na caixa de confirmação.

   Fonte de largura fixa, e quebra de linha preservada, de propósito: é o único
   lugar da tela onde o que se lê TEM de ser byte a byte o que o Telegram
   recebe — a legenda vai em HTML, e um espaço a mais muda o que chega. Reescrito com a
   fonte do resto da tela, um espaço a mais ou uma quebra a menos passariam sem
   ninguém ver — e é justamente isso que esta caixa existe para mostrar. */
.envio-legenda {
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg1);
  white-space: pre-wrap;
  word-break: break-word;
  /* A legenda pode ter mil caracteres. Sem teto, a caixa empurra os botões de
     confirmar para fora da tela — e o que fica visível é só metade do texto. */
  max-height: 260px;
  overflow-y: auto;
}

/* A linha de contexto quando ela vem ANTES do que se pode fazer, e não depois:
   nos blocos de decisão a frase explica, e o botão vem em seguida. */
.padrao-hoje--topo {
  margin: 0 0 12px;
}

/* O botão de trazer de volta, na coluna presa à direita. `nowrap` porque sem
   ele o rótulo quebra em três linhas no celular e a linha da tabela fica com
   três dedos de altura — a coluna presa é estreita por natureza, já que foi
   desenhada para uma chave do tamanho de um comprimido. */
.btn-voltar {
  white-space: nowrap;
}

/* --- O banner do Telegram, na gaveta ----------------------------
   A faixa de cima do cartão "Como sai no Telegram" deixou de ser um retângulo
   azul com o nome do programa: quando o parceiro tem banner, ela mostra a
   imagem que vai mesmo na mensagem. O fundo aparece por baixo de PNG com
   transparência — sem ele, um banner de fundo claro some no tema escuro. */
.tg-cover-img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface-2);
}

/* O campo de arquivo fica ESCONDIDO, não sumido: `display:none` o tiraria do
   alcance do teclado, e aí não haveria como escolher imagem sem mouse. Assim o
   rótulo ao lado é o botão, e o campo continua alcançável pelo Tab — o anel de
   foco aparece em volta do rótulo, pela regra logo abaixo. */
.banner-arquivo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.banner-botao {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
/* O anel de foco do campo escondido aparece em volta do RÓTULO, que é o que
   se vê. Por isso o campo vem ANTES do rótulo no HTML: sem essa ordem, o CSS
   não tem como alcançar o vizinho de trás, e quem usa teclado tabularia para
   um campo invisível sem nenhum sinal na tela. */
.banner-arquivo:focus-visible + .banner-botao {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.banner-regra {
  font-size: 13px;
  color: var(--fg3);
}

/* A recusa do servidor, dentro do bloco que a pediu. Ela mora aqui porque o
   aviso do alto da tela fica ATRÁS da gaveta aberta — e pedido recusado que
   ninguém vê se parece com botão que não funciona. A cor vem do tema, pela
   variante de contraste da cor de perigo (seção 12 do CLAUDE.md). */
.padrao-erro {
  margin: 12px 0 0;
  font-size: 13px;
}

/* --- A fila de recém-descobertos, recolhida (PENDENCIAS #55) ----
   A barra fica sempre: aberta ou fechada, o número e o aviso continuam à
   mostra, na cor de atenção. Recolher esconde a LISTA, nunca o fato de haver
   gente esperando decisão — senão o conserto da rolagem viraria um esconderijo,
   e 18 parceiros parariam de existir para quem olha a tela. */
.disc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 13px;
}
.disc-bar-texto {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
/* Fechada, a barra é a seção inteira: a margem de baixo dela sobraria como um
   degrau vazio entre a barra e a régua. */
.disc-section--fechada {
  padding: 13px 20px;
}
.disc-section--fechada .disc-bar {
  margin-bottom: 0;
}

/* A marca de "sem banner composto", na linha de baixo do nome do parceiro.
   Ela divide o espaço com a categoria (hoje vazia nos dois programas) e por
   isso entra como bloco próprio: sem isso, nome de loja comprido e o aviso
   brigariam pela mesma linha no celular. A cor vem do tema, escrita ali —
   é cor de ESTADO, e muda com o tema (seção 12 do CLAUDE.md). */
.sem-banner {
  display: block;
}

/* A marca de "este parceiro tem régua própria", na mesma linha de baixo do
   nome. Bloco pelo mesmo motivo da de cima: nas raras linhas que têm as duas,
   elas se empilham em vez de brigar pela largura no celular. A cor vem do tema,
   escrita ali — é o azul da interface, não cor de estado: não há nada pendente
   numa exceção que você mesmo gravou. */
.regua-propria {
  display: block;
}

/* --- A prévia do banner composto (gaveta do parceiro) -----------
   Ela mostra o arquivo em TAMANHO REAL: 400 x 100, os mesmos pixels que vão
   para o Telegram. Por isso a largura é fixa em 400 e não em porcentagem —
   uma prévia esticada mentiria sobre o que foi montado. Na gaveta do celular,
   onde 400 não cabe, `max-width` encolhe e a proporção se mantém.

   ⚠ SEM CARTÃO PRÓPRIO, e não é economia de enfeite: a gaveta tem 470 px, e
     cada moldura aninhada come padding dos dois lados. Com mais uma borda e
     mais um recheio em volta, sobravam 359 px para uma imagem de 400 — a prévia
     aparecia encolhida bem na frente da frase que promete tamanho real. */
.previa-box {
  margin-top: 14px;
}
/* A imagem AVANÇA SOBRE O RECHEIO DO CARTÃO, os 14 px de cada lado. É o que
   faz caberem os 400 px de verdade numa gaveta de 470: sem isso sobram 385, e
   a prévia sai encolhida logo abaixo da frase que promete tamanho real. Só a
   imagem avança — os botões e a legenda continuam alinhados com o resto. */
.previa-img {
  display: block;
  width: 400px;
  max-width: calc(100% + 28px);
  margin: 0 -14px;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.previa-cores {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
/* Bolinha, e não quadrado: é a cor DO CÍRCULO que ela escolhe. Círculo é uma
   das duas exceções aos cantos de 10 px (seção 12 do CLAUDE.md). */
.cor-opcao {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  padding: 0;
}
.cor-opcao--atual {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cor-opcao:focus-visible,
.cor-livre:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cor-livre {
  width: 34px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: none;
  cursor: pointer;
}
.previa-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* --- As barras de aviso do alto do miolo ------------------------
   A idade do quadro (PENDENCIAS #48) e o resultado da varredura (#47). As duas
   são a MESMA barra da fila de recém-descobertos, com botões à direita em vez
   de um só. Sem margem no topo: são a primeira coisa do miolo, e a seção já
   traz o próprio recheio.

   O NOME É GENÉRICO DE PROPÓSITO. Enquanto ele dizia "quadro-velho", a segunda
   barra tinha duas saídas e as duas ruins: copiar estas sete linhas, ou
   vestir-se com o nome de outra coisa. Princípio #17, pago na hora em que
   custava nada. */
.aviso-barra {
  margin-bottom: 16px;
}
.aviso-barra-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- A tranca da tela (PENDENCIAS #119) ------------------------ */

/* ⚠ ELA OCUPA A TELA INTEIRA, e não é enfeite: enquanto não há crachá, não há
   retrato nenhum para desenhar atrás. Uma caixa flutuando sobre um painel vazio
   se leria como "o banco não tem nada", que é o oposto da verdade. */
.tranca-fundo {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tranca-caixa {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.tranca-marca {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.5px;
  color: var(--fg1);
}
.tranca-texto {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--fg3);
}
.tranca-campo {
  font-family: inherit;
  font-size: 14px;
  color: var(--fg2);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}
.tranca-campo::placeholder {
  color: var(--fg4);
}
.tranca-botao {
  width: 100%;
  justify-content: center;
}
.tranca-erro {
  margin: 0;
  font-size: 13px;
  color: var(--fg1);
  border-radius: 10px;
  padding: 10px 12px;
}

/* A chave de pausar um job (fatia 2 do #135). A linha alinha pela BASE das
   letras, e um botao alinhado assim flutua acima do texto — por isso ele
   volta a alinhar pelo centro, sozinho. */
.hor-job .switch {
  align-self: center;
  flex: 0 0 auto;
}

/* Mudar horário (fatia 4 do #135) */
.hor-job-mudar {
  align-self: center;
  flex: 0 0 auto;
}
.hor-fichas {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 260px;
}
.hor-ficha {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 14px;
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
}
.hor-ficha-x {
  border: 0;
  background: none;
  color: var(--fg3);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 999px;
}
.hor-ficha-x:hover {
  color: var(--mm-danger);
}
.hor-ficha-vazio {
  font-size: 14px;
  color: var(--fg4);
}
.hor-nova {
  width: 66px;
  font-family: inherit;
  font-size: 14px;
  color: var(--fg2);
  border-radius: 10px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
}
/* A caixa ocupa a linha inteira: ela é a conversa sobre este job, e nao cabe
   espremida entre as colunas. */
.hor-caixa {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
}
.hor-caixa-texto {
  margin: 0;
  flex: 1 1 240px;
  font-size: 13px;
  color: var(--fg2);
}
.hor-caixa-alerta {
  flex: 1 0 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--fg1);
}

/* ===========================================================================
   A GRADE DA CAIXA — o cartão do privado, na tela de Destinos (#150-B fatia 3)
   ===========================================================================

   ⚠ TODA COR E MEDIDA SAI DOS TOKENS, sem exceção. Este bloco desenha um
     controle que decide o que vai para os grupos, e um tom escrito à mão aqui
     apareceria certo no tema claro e sumiria no escuro — que é o modo em que o
     Joselito usa a tela (princípio #17: o par que falta só aparece no modo que
     ninguém testa). */
.cx-wrap {
  overflow-x: auto;
  margin: 4px 0 2px;
}
.cx-grade {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
.cx-grade th,
.cx-grade td {
  padding: 4px 6px;
  text-align: center;
}
.cx-th {
  color: var(--fg3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  white-space: nowrap;
}
.cx-prog {
  color: var(--fg2);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  padding-right: 10px;
}

/* O CHIP DO QUADRO DE RELANCE — "o que sai daqui?", no Painel.

   ⚠ A COR VEM DE `t.rotuloChip`, escrita no atributo `style` pela tela. Aqui
     ficam só a FORMA e o espaçamento: cor de estado escrita neste arquivo
     apareceria certa num tema e sumiria no outro, que é o bug silencioso do
     princípio #17.

   ⚠ `white-space: nowrap` É O QUE MANTÉM O QUADRO LEGÍVEL: "Cai no seu privado"
     quebrado em três linhas faria a tabela crescer e as células deixarem de se
     comparar de relance, que é a única coisa que este quadro existe para fazer.
     Quando não couber, quem rola é o `.cx-wrap`, nunca a página. */
.q-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.5;
}

/* A MARCA DE LEITURA ATRASADA — o TERCEIRO eixo do quadro (PENDENCIAS #205).

   ⚠ ELA É UM EIXO À PARTE, e por isso é uma BOLINHA e não uma cor de chip. A cor
     do chip responde "o que sai daqui?" e não pode mudar por causa disto; esta
     responde outra coisa: "este dado ainda é de hoje?".

   ⚠ A COR VEM DO TOKEN, escrita no atributo `style` pela tela, como a do chip.
     Amarelo escrito aqui apareceria certo num tema e sumiria no outro.

   ⚠ ELA NÃO QUEBRA A ROLAGEM DA TABELA: são 6 px mais um respiro de 5, dentro da
     mesma célula, e quem rola continua sendo o `.cx-wrap`. O chip ao lado segue
     `nowrap` — a bolinha não o faz quebrar linha porque a célula inteira é uma
     linha só de `inline-block`.

   ⚠ E ELA NÃO CARREGA INFORMAÇÃO SOZINHA. A frase "fora da nuvem, atrasada" está
     escrita no chip, ao lado. Uma marca que fosse a ÚNICA pista dependeria de
     dica ao passar o mouse, e no celular não há mouse (seção 31) — foi por isso
     que as faltas viraram lista embaixo da tabela, e não tooltip. */
.q-atraso {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

/* O QUE FALTA, embaixo da tabela — em lista, e não como dica ao passar o mouse:
   no celular não há mouse (seção 31). */
.q-faltas {
  margin-top: 12px;
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.q-falta {
  color: var(--fg2);
  font-size: 12px;
  line-height: 1.5;
}
.q-falta b {
  color: var(--fg1);
}
.cx-canto {
  width: 1%;
}
.cx-cel {
  width: 44px;
}
/* A célula clicável. Quadrada e de cantos de 10 px, como todo o resto —
   círculo e pílula são as duas únicas exceções da marca, e nenhuma é esta. */
.cx-btn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg1);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 160ms,
    border-color 160ms;
}
.cx-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
}
.cx-btn:disabled {
  cursor: default;
  opacity: 0.5;
}
.cx-btn--on {
  background: var(--accent-soft-bg);
  border-color: var(--accent-soft-border);
  color: var(--accent-soft-fg);
}
/* ⚠ O QUE MUDOU E NÃO FOI GRAVADO É MARCADO, e a marca é a borda tracejada —
   não a cor. Cor sozinha diria "atenção", e as três cores de estado deste
   projeto só comunicam estado (em dia, atrasado, parado). "Ainda não gravei"
   não é nenhum dos três: é rascunho, e rascunho se desenha com traço. */
.cx-btn--mudou {
  border-style: dashed;
  border-color: var(--accent);
}
/* ⚠ O TERCEIRO ESTADO: LIGADO SEM NINGUÉM SABER PUBLICAR.

   Aqui a cor de estado é o certo, e não a exceção. A marca dá à laranja um
   papel só — "atrasado, esperando decisão" —, e é exatamente o que este par é:
   ele está aceso no banco, não publica nada, e espera a decisão de sair. Não é
   decoração, e é a única cor de estado desta grade.

   ⚠ VEM DEPOIS DO `--on` E DO `--mudou` DE PROPÓSITO. Os três têm a mesma
     especificidade, então quem ganha é quem vem por último: a célula oca fica
     laranja mesmo acesa, e mantém o traço pontilhado quando foi marcada — o
     desenho de "oca, e você já pediu para tirar". */
/* ⚠ A BORDA USA O TOM CRU DA MARCA E O TEXTO USA A VARIANTE, e a divisão não é
   capricho: borda não precisa de contraste de leitura, texto precisa. O `✓` e
   o aviso são texto pequeno — no tema claro, `#f5a524` sobre branco fica quase
   ilegível (§12). */
.cx-btn--oco {
  background: var(--surface-2);
  border-color: var(--mm-warning);
  color: var(--warn-fg);
}
.cx-aviso {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--warn-fg);
}
.cx-vazia {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: var(--fg4);
  cursor: help;
}
.hor-caixa-botoes {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---------- COMPOR OS QUE FALTAM: o botão e a folha de contato ------------- */

.compor-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.compor-texto {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg3);
  max-width: 62ch;
}
/* Os sem logo saem em cor de atenção porque é isso que eles são: um pedaço do
   trabalho que o botão NÃO faz, e que fica esperando você. */
.compor-sobra {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--warn-fg);
}
.compor-botao {
  flex: 0 0 auto;
}

.folha-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.folha-conta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--fg3);
  font-variant-numeric: tabular-nums;
}
/* Enquanto anda, o contador muda a cada volta. Dígito de largura fixa (acima)
   impede a linha de dançar, e o acento diz que ainda não acabou. */
.folha-conta--andando {
  color: var(--accent);
}
.folha-promessa {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg4);
}

.folha-bloco {
  margin-top: 22px;
  border-radius: 10px;
}
.folha-bloco--falha {
  padding: 14px 16px;
}
.folha-titulo {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg3);
}
.folha-falhas {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg2);
}
.folha-falha-nome {
  font-weight: 600;
  color: var(--fg1);
}

/* DUAS COLUNAS NO COMPUTADOR, UMA NO CELULAR. O banner tem 400 de largura e não
   encolhe: julgar um banner de 400x100 numa miniatura é julgar outra coisa. Por
   isso a coluna tem o tamanho dele, e a grade quebra sozinha quando não cabem
   duas. */
.folha-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .folha-grade {
    grid-template-columns: 1fr;
  }
}

.folha-cartao {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
/* O contorno de atenção separa os marcados sem precisar de outro bloco visual:
   dentro do grupo "precisam do seu olho", cada cartão continua se anunciando. */
.folha-bloco--olhar .folha-cartao {
  border-color: var(--mm-warning);
}
/* O banner sai no tamanho real, e nunca esticado. `height: auto` junto com o
   `max-width` mantém a proporção quando a tela é estreita demais para os 400. */
.folha-banner {
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.folha-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.folha-nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg1);
}
.folha-cores {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.folha-motivo {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--warn-fg);
}

/* ---------- a folha: subir os marcados (fatia 2) --------------------------- */

.folha-acoes {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  align-items: flex-start;
}

/* A MARCA DE APROVADO. Quadrada de propósito: a §12 reserva o círculo e a
   pílula para outros papéis, e caixa de marcar é quadrada em todo lugar. */
.folha-marca {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.folha-marca[aria-checked='true'] {
  border-color: var(--accent);
}
/* Quem já subiu não é mais uma escolha: é um fato. Some o cursor e a cor passa
   a ser a de sucesso, que na §12 só comunica estado — e é exatamente isso. */
.folha-marca--subiu {
  cursor: default;
  border-color: var(--mm-success);
  color: var(--mm-success);
}
.folha-marca:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* O CARTÃO QUE JÁ SUBIU ganha a borda de sucesso; o que falhou, a de perigo.
   As duas vêm DEPOIS da borda de atenção do bloco "precisam do seu olho", para
   o resultado de subir vencer o aviso de conferir — quem já subiu não precisa
   mais ser conferido. */
.folha-bloco .folha-cartao--subiu {
  border-color: var(--mm-success);
}
.folha-bloco .folha-cartao--erro {
  border-color: var(--mm-danger);
}
/* O DESMARCADO NÃO SOME NEM FICA CINZA: ele continua à vista, com o banner
   inteiro, porque desmarcar não é apagar — é dizer "este não vai agora". A
   borda tracejada é o que diferencia sem esconder. */
.folha-cartao--fora {
  border-style: dashed;
}
.folha-erro {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--danger-fg);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}