/* =============================================================================
   DESIGN SYSTEM — guia rápido (leia antes de editar)
   -----------------------------------------------------------------------------
   FONTE ÚNICA DE VERDADE: tudo que é cor, espaço, tamanho, raio e dimensão fixa
   vive no :root abaixo. Nunca escreva valores soltos no resto do arquivo —
   crie/reutilize um token. (No JS, os gráficos Chart.js são a única exceção:
   recebem cores literais porque não enxergam variáveis CSS.)

   Espaçamento ...... escala 4pt: --space-1..8 (4→32px). Não use px avulso.
   Tipografia ....... --fs-2xs..--fs-display. Um tamanho por papel.
   Raio ............. --radius-sm/md/lg/pill.
   Cores ............ superfícies (--bg, --panel*), texto (--text, --muted),
                      marca (--accent*), semânticas (--green, --danger*).

   BADGES de status . cada situação da venda tem um par --badge-<x>-bg/-fg.
                      Para um status novo: adicione o par aqui + a classe
                      .badge-<x> (logo após as outras) + o mapeamento em
                      dashboard.js (EVENT_INFO / STATUS_FALLBACK).

   TABELA ao vivo ... --row-h define a altura FIXA da linha. As linhas de
                      skeleton usam a mesma altura, então não há salto de
                      layout (CLS) quando os dados reais chegam.

   SKELETON ......... .sk-bar (shimmer) é desenhado por renderSkeletonRows()
                      em dashboard.js no 1º carregamento. O shimmer já é
                      congelado pelo bloco prefers-reduced-motion no fim.

   ACESSIBILIDADE ... :focus-visible global (não remova foco sem substituto);
                      os filtros usam aria-expanded/haspopup/controls + Esc
                      (ver filters.js); animações respeitam prefers-reduced-motion.
   ========================================================================== */
:root {
  /* ---- Cores: superfícies e texto ---- */
  --bg: #0b1120;
  --panel: #151e32;
  --panel-2: #1e293b;
  --panel-3: #273449;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --disabled: #475569;

  /* ---- Cores: marca e semânticas ---- */
  --accent: #6366f1;
  --accent-soft: #312e81;
  --on-accent: #ffffff;
  --border: #2a3650;
  --green: #34d399;
  --danger: #f87171;        /* texto/valor em vermelho (reembolso, chargeback) */
  --danger-bg: #7f1d1d;
  --danger-fg: #fecaca;
  --danger-border: #b91c1c;

  /* ---- Badges de status (par fundo/texto por situação da venda) ---- */
  --badge-ok-bg: #064e3b;      --badge-ok-fg: #6ee7b7;   /* aprovada / concluída */
  --badge-info-bg: #1e3a8a;    --badge-info-fg: #bfdbfe; /* boleto gerado */
  --badge-pending-bg: #155e63; --badge-pending-fg: #a5f3fc; /* aguardando / pix gerado */
  --badge-warn-bg: #78350f;    --badge-warn-fg: #fde68a; /* pedido de reembolso / atrasado */
  --badge-refund-bg: #7c2d12;  --badge-refund-fg: #fed7aa; /* reembolso aprovado */
  --badge-muted-bg: #334155;   --badge-muted-fg: #cbd5e1; /* cancelada / expirada */
  --badge-neutro-bg: #3f3f5e;  --badge-neutro-fg: #ddd6fe; /* evento não mapeado */

  /* ---- Camadas translúcidas derivadas do accent ---- */
  --accent-glow: rgba(99, 102, 241, .12);
  --accent-hover: rgba(99, 102, 241, .10);
  --accent-ring: rgba(99, 102, 241, .55);
  --zebra: rgba(255, 255, 255, .02);

  /* ---- Escala de espaçamento (base 4pt) ---- */
  --space-1: .25rem;   /*  4 */
  --space-2: .5rem;    /*  8 */
  --space-3: .75rem;   /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-7: 1.75rem;  /* 28 */
  --space-8: 2rem;     /* 32 */

  /* ---- Raio ---- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Dimensões fixas ---- */
  --row-h: 44px;   /* altura fixa da linha na tabela ao vivo (estável no polling) */

  /* ---- Escala tipográfica ---- */
  --fs-2xs: .72rem;
  --fs-xs: .8rem;
  --fs-sm: .85rem;
  --fs-md: .9rem;
  --fs-lg: 1rem;
  --fs-xl: 1.15rem;
  --fs-2xl: 1.375rem;
  --fs-display: 1.75rem;

  /* ---- Elevação e foco ---- */
  --shadow: 0 12px 30px rgba(0, 0, 0, .35);
  --ring: 0 0 0 3px rgba(99, 102, 241, .5);

  /* ---- Movimento ---- */
  --t-fast: .12s ease;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--accent-glow), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Foco visível por teclado, consistente em todo elemento interativo. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Login ---- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-4); }
.login-card {
  background: var(--panel); padding: var(--space-8); border-radius: var(--radius-lg); width: 320px; max-width: 100%;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.login-card h1 { margin: 0 0 var(--space-1); font-size: var(--fs-2xl); }
.login-card .subtitle { margin: 0 0 var(--space-6); color: var(--muted); font-size: var(--fs-sm); }
.login-card label { display: block; margin-bottom: var(--space-4); font-size: var(--fs-sm); color: var(--muted); }
.login-card input {
  width: 100%; margin-top: var(--space-1); padding: var(--space-3);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.login-card input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

.alert { background: var(--danger-bg); color: var(--danger-fg); padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-size: var(--fs-sm); }

/* ---- Botões (componente único, reutilizado) ---- */
.btn-primary, .login-card button {
  background: var(--accent); color: var(--on-accent); border: 0;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 600; font-size: var(--fs-md);
  transition: filter var(--t-fast), transform var(--t-fast);
}
.login-card button { width: 100%; }
.btn-primary:hover, .login-card button:hover { filter: brightness(1.08); }
.btn-primary:active, .login-card button:active { transform: translateY(1px); filter: brightness(.96); }
.btn-ghost {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--fs-md); transition: color var(--t-fast), border-color var(--t-fast);
}
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }
.btn-ghost:active { transform: translateY(1px); }
/* Botão "Ativar notificações" (push): compacto, no cabeçalho do painel. */
.btn-push { font-size: var(--fs-sm); padding: var(--space-2) var(--space-4); white-space: nowrap; }
/* Estado desabilitado, válido para qualquer botão do design system. */
.btn-primary:disabled, .btn-ghost:disabled, .login-card button:disabled {
  opacity: .6; cursor: default; filter: none; transform: none;
}

/* ---- Rodapé: cotação do dólar + link Sair (ver .app-footer abaixo) ---- */
.logout { color: var(--muted); text-decoration: none; font-size: var(--fs-md); border-radius: var(--radius-sm); }
.logout:hover { color: var(--text); }
.usd-tag {
  display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
}
.usd-tag strong { color: var(--green); font-size: var(--fs-md); }
.usd-flag { font-size: var(--fs-md); }

/* ---- Toolbar / filtros: 4 colunas iguais, alinhadas com os 4 cards ---- */
.toolbar {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  /* Sem padding-top: o respiro de cima já vem da margin-bottom do painel acima.
     Assim o espaço acima dos filtros (20px) bate com o de baixo (padding-bottom),
     padronizando com o restante do layout (var(--space-5) entre seções). */
  padding: 0 var(--space-7) var(--space-5);
  align-items: center;
}
.toolbar > .date-field { min-width: 0; }
/* Texto do período alinhado à esquerda (chevron empurrado p/ direita). */
.toolbar > .date-field .date-trigger { width: 100%; justify-content: flex-start; }
.toolbar > .date-field .date-trigger .chev { margin-left: auto; }
.toolbar .date-field #date_label { text-align: left; }
/* Sem header: dá um respiro no topo do primeiro bloco. */
body > section:first-child { margin-top: var(--space-5); }

/* Rodapé: cotação do dólar + Sair, no fim da página. */
.app-footer {
  display: flex; align-items: center; justify-content: center; gap: var(--space-5);
  padding: var(--space-6) var(--space-7) var(--space-8); margin-top: var(--space-4);
  border-top: 1px solid var(--border); color: var(--muted);
}
/* ---- Seletor de data estilo Meta Ads ---- */
.date-field { position: relative; }
.date-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--fs-md); font-weight: 600;
  transition: border-color var(--t-fast);
}
.date-trigger:hover { border-color: var(--accent); }
.date-trigger .chev { color: var(--muted); }
.date-trigger svg { flex: none; }
.date-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.date-popover {
  position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 50;
  display: none; width: 240px; max-width: 96vw;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden;
}
.date-popover.open { display: block; }
/* Variante que abre para CIMA (usada no seletor de conta, no rodapé). */
.date-popover.up { top: auto; bottom: calc(100% + var(--space-2)); }
/* Seletor de conta no rodapé: largura confortável, alinhado com o dólar. */
.footer-field .date-trigger { font-weight: 600; }
/* Ancora o popover pela ESQUERDA do botão (no celular o botão fica na borda
   esquerda; ancorar pela direita fazia o menu vazar para fora da tela). */
.footer-field .date-popover {
  left: 0; right: auto;
  width: max-content; min-width: 150px; max-width: min(92vw, 260px);
}
/* Dropdowns da barra (Período/Produto/SRC/País): ao abrir, ocupam exatamente a
   largura do BOTÃO do filtro (não a caixa fixa de 240px, nem a barra toda). Como
   o campo é position:relative e o trigger ocupa 100% do campo, width:100% no
   popover = largura do botão. */
#date_popover, #product_id_popover, #origin_popover, #country_popover {
  width: 100%; max-width: none;
}

.dp-presets {
  list-style: none; margin: 0; padding: var(--space-2);
  background: var(--panel-2);
}
.dp-presets li {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--fs-sm); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-presets li:hover { background: var(--panel-3); color: var(--text); }
.dp-presets li:focus-visible { outline: none; background: var(--panel-3); color: var(--text); box-shadow: var(--ring); }
.dp-presets li.active { background: var(--accent-soft); color: var(--on-accent); font-weight: 600; }

/* ---- Cards: 4 colunas iguais, alinhadas com os filtros ---- */
.cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4); padding: 0 var(--space-7) var(--space-5);
}
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.card:hover { transform: translateY(-2px); border-color: var(--accent); }
.card-primary {
  background: linear-gradient(135deg, rgba(99, 102, 241, .22), rgba(21, 30, 50, .4));
  border-color: var(--accent);
}
.card-label { color: var(--muted); font-size: var(--fs-xs); }
.card-value { font-size: var(--fs-display); font-weight: 700; line-height: 1.1; }
.card-value.danger { color: var(--danger); }   /* reembolso / chargeback em vermelho */
.card-primary .card-value { color: var(--green); }
.card-foot { color: var(--muted); font-size: var(--fs-2xs); }

/* ---- Grid de gráficos (2 por linha) ---- */
.grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4); padding: 0 var(--space-7);
}
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5); margin: 0 var(--space-7) var(--space-5);
}
.grid .panel { margin: 0; }
.panel h2 { font-size: var(--fs-lg); margin: 0 0 var(--space-4); color: var(--text); }
.chart-box { position: relative; height: 280px; }
/* Linha de tendência (30 dias): mais baixa e larga que os gráficos do grid. */
.trend-box { height: 220px; }

/* ---- Tabela ---- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }
.empty { color: var(--muted); text-align: center; padding: var(--space-6); }
.badge { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; }
.badge-ok      { background: var(--badge-ok-bg);      color: var(--badge-ok-fg); }      /* aprovada / concluída */
.badge-info    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }    /* boleto gerado */
.badge-pending { background: var(--badge-pending-bg); color: var(--badge-pending-fg); } /* aguardando / pix gerado */
.badge-warn    { background: var(--badge-warn-bg);    color: var(--badge-warn-fg); }    /* pedido de reembolso / atrasado */
.badge-refund  { background: var(--badge-refund-bg);  color: var(--badge-refund-fg); }  /* reembolso aprovado */
.badge-danger  { background: var(--danger-bg);        color: var(--danger-fg); }        /* chargeback */
.badge-muted   { background: var(--badge-muted-bg);   color: var(--badge-muted-fg); }   /* cancelada / expirada */
.badge-neutro  { background: var(--badge-neutro-bg);  color: var(--badge-neutro-fg); }  /* evento não mapeado */

/* Bolinha de cor por produto na tabela */
.prod-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; flex: none; }

/* ---- Tabela ao vivo: recolhida mostra só as 10 primeiras linhas ---- */
#tabela_vendas.collapsed tbody tr:nth-child(n+11) { display: none; }
.show-more {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; margin-top: var(--space-3);
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--fs-sm); font-weight: 600;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.show-more:hover { color: var(--text); border-color: var(--accent); }
.show-more .chev { transition: transform var(--t-fast); }
.show-more .chev.up { transform: rotate(180deg); }

/* ---- Cabeçalho do painel + busca ---- */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.panel-head h2 { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--accent-ring); animation: pulse 2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.search-box {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0 var(--space-3); height: 38px;
  flex: 0 1 360px; max-width: 100%; color: var(--muted);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-box:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.search-box svg { flex: none; }
.search-box input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  background: transparent; border: 0; outline: 0; color: var(--text); font-size: var(--fs-sm);
}
.search-box input::placeholder { color: var(--muted); }
/* Remove o fundo branco/amarelo do autofill do navegador. */
.search-box input:-webkit-autofill,
.search-box input:-webkit-autofill:hover,
.search-box input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset;
  box-shadow: 0 0 0 1000px var(--panel-2) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}
.search-box button {
  flex: none; background: transparent; border: 0; color: var(--muted); cursor: pointer;
  font-size: var(--fs-lg); line-height: 1; border-radius: var(--radius-sm);
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
}
.search-box button:hover { color: var(--text); }

/* ---- Tabela estilo planilha ---- */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
table.excel { font-size: var(--fs-xs); }
table.excel thead th {
  position: sticky; top: 0; background: var(--panel-3); color: var(--muted);
  font-weight: 600; text-transform: uppercase; font-size: var(--fs-2xs); letter-spacing: .4px;
  padding: var(--space-2) var(--space-3); white-space: nowrap;
}
table.excel td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
/* Altura de linha FIXA: a tabela não "pula" quando o polling troca os dados
   nem quando o skeleton dá lugar ao conteúdo real. */
table.excel tbody tr { height: var(--row-h); }
table.excel tbody tr:nth-child(even) { background: var(--zebra); }
table.excel tbody tr:hover { background: var(--accent-hover); }
table.excel .nowrap { white-space: nowrap; }
table.excel .money { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Código HP: nome longo cortado com reticências (completo no hover/title). */
table.excel .hp-cell { max-width: 110px; }
table.excel .hp { font-family: ui-monospace, "Cascadia Code", monospace; font-size: var(--fs-2xs); color: var(--muted); display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* Produto: bolinha + nome na MESMA linha; nome longo cortado com reticências. */
table.excel .prod-cell { max-width: 180px; white-space: nowrap; }
table.excel .prod-name { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* XCOD: coluna estreita (mostra só os 6 primeiros; completo no hover/title). */
table.excel .xcod { font-family: ui-monospace, "Cascadia Code", monospace; font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }
/* Comprador: nome longo cortado com reticências (completo no hover/title). */
table.excel .buyer-cell { max-width: 150px; }
table.excel .buyer-name { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* E-mail: igual ao comprador — corta com reticências (completo no hover/title). */
table.excel .email-cell { max-width: 160px; }
table.excel .email { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ---- Skeleton de carregamento (tabela ao vivo, antes do 1º fetch) ---- */
.sk-bar {
  display: inline-block; height: 10px; width: 70%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 37%, var(--panel-2) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease infinite;
}
@keyframes sk-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* (O bloco prefers-reduced-motion no fim do arquivo já congela o shimmer.) */

/* Telas médias: filtros e cards caem JUNTOS para 2 colunas (continuam alinhados). */
@media (max-width: 920px) {
  .toolbar, .cards { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .toolbar { padding: var(--space-4); }
  .cards { padding: 0 var(--space-4) var(--space-4); }
  .grid { padding: 0 var(--space-4); }
  .panel { margin: 0 var(--space-4) var(--space-4); }
  .date-popover { width: min(96vw, 240px); }
  .search-box { min-width: 0; width: 100%; }
}

/* Telas estreitas: 1 coluna (filtros e cards continuam alinhados). */
@media (max-width: 520px) {
  .toolbar, .cards { grid-template-columns: 1fr; }
  .card-value { font-size: var(--fs-xl); }
}

/* Celular / PWA: só a tabela + os cards (de HOJE). Busca, filtros e gráficos
   ficam só no computador. Os inputs ocultos de data continuam existindo dentro
   da toolbar escondida, travados no preset padrão "Hoje" — então os cards
   mostram o dia de hoje sem o usuário poder mudar no celular.

   2 condições (OR):
   - largura ≤640px: celular em pé (retrato).
   - landscape + altura ≤640px + toque: celular DEITADO (a largura passa de 640,
     mas continua sendo um telefone). O manifest já trava o PWA instalado em
     "portrait"; isto cobre o navegador, onde o manifest não vale. `pointer: coarse`
     evita pegar um desktop com a janela baixa. */
@media (max-width: 640px),
       (orientation: landscape) and (max-height: 640px) and (pointer: coarse) {
  .grid { display: none; }
  #trend_panel { display: none; }   /* tendência só no PC */
  .search-box { display: none; }
  .toolbar { display: none; }

  /* Só o card de Faturamento Líquido fica visível no celular. */
  .cards { grid-template-columns: 1fr; }
  .cards .card:not(.card-primary) { display: none; }

  /* No celular, o card de Faturamento Líquido fica ACIMA da tabela de vendas
     (no PC a ordem normal é mantida). Como ele passa a ser o 1º bloco visível,
     herda o respiro do topo que normalmente é do painel da tabela. */
  body { display: flex; flex-direction: column; }
  /* padding-bottom: 0 evita somar com a margin-top do painel da tabela — assim o
     espaço entre o card e a tabela (20px) bate com o respiro do topo. */
  .cards { order: -1; margin-top: var(--space-5); padding-bottom: 0; }
}

/* ---- Toast de erro (feedback de falha de rede / API) ---- */
.toast {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translate(-50%, 1rem);
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--danger-bg); color: var(--danger-fg);
  border: 1px solid var(--danger-border);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  box-shadow: var(--shadow); font-size: var(--fs-sm); font-weight: 600;
  max-width: min(92vw, 440px); z-index: 100;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.toast::before { content: "⚠"; font-size: var(--fs-lg); line-height: 1; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Respeita usuários que pediram menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card:hover { transform: none; }
}