/* ═══════════════════════════════════════════════════════════════
   Z-INDEX HIERARCHY — Single source of truth for all layers.
   ─────────────────────────────────────────────────────────────
   RULE: Every z-index in the app MUST use these variables.
         Never hardcode z-index values in other CSS files.
         Changing a value here updates the entire app safely.

   Layer stack (bottom → top):
     content (0) < scrollbar (50) < sidebar (80)
     < topbar (100) < modal (1000) < back-header (1001) < hamburger-dropdown (1002)
     < toast (9999) < hint (100000)

   ARCHITECTURE (v0.12.88 — Voltar is ALWAYS above modals):
     The fixed-top "Voltar" button MUST remain clickable even when
     a regular modal is open (user reported dead clicks when modals
     covered the back header at the old z-index 101).
     Full-screen overlays (live-scoring, TV mode, player stats) still
     sit above everything — they provide their own close buttons.
     #hamburger-dropdown is a SIBLING of <header class="topbar">.
     Hamburger dropdown stays above back-header so menu shows on top.
     DO NOT add --z-back-header-lowered (removed in v0.10.24).
     See tests.html "Z-Index Hierarchy" for automated guards.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --z-content:              0;
  --z-bracket-scrollbar:   50;
  --z-sidebar:             80;
  --z-topbar:             100;
  --z-modal:             1000;
  --z-back-header:       1001;   /* ABOVE modal so Voltar is clickable at all times */
  --z-hamburger-dropdown: 1002;  /* ABOVE back-header so menu shows on top          */
  --z-toast:             9999;
  --z-hint:            100000;
}

/* ═══════════════════════════════════════════════════════════════
   TEMAS — Variáveis CSS para todos os componentes
   Ordem de ciclagem: dark → light → sunset → ocean
   ═══════════════════════════════════════════════════════════════ */

/* v0.17.25: paleta Apple HIG. 4 temas — 2 light + 2 dark — cada um com
   identidade própria mas todos atingindo WCAG AAA pra texto principal.
   Cores systemColors oficiais da Apple onde aplicável.

   Mapping:
   - Noturno (dark) — Apple Dark Mode: systemBlue accent on systemGray6 dark
   - Claro (light) — Apple Light Mode: systemBlue accent on white
   - Pôr do Sol (light warm) — sépia/cream com amber-700 accent (modo leitura)
   - Oceano (dark navy) — preserva identidade cyan/teal sobre navy profundo
*/

:root, [data-theme="dark"] {
  /* NOTURNO — Apple Dark Mode */
  --bg-darker: #111114;        /* systemBackground dark — off-black, never pure #000 */
  --bg-dark: #1c1c1e;          /* systemGray6 dark */
  --bg-card: #2c2c2e;          /* systemGray5 dark */
  --bg-card-hover: #3a3a3c;    /* systemGray4 dark */

  --primary-color: #0a84ff;    /* systemBlue dark */
  --primary-hover: #5ac8fa;    /* systemTeal dark */
  --secondary-color: #bf5af2;  /* systemPurple dark */
  --secondary-hover: #d18df7;

  --text-main: #ebebf5;         /* secondaryLabel dark @ 100% */
  --text-muted: #98989d;        /* tertiaryLabel dark */
  --text-bright: #f2f2f7;       /* near-white — evita branco puro, melhor leitura em fundo escuro */

  --border-color: #38383a;      /* systemGray3 dark */
  --border-focus: #0a84ff;

  --danger-color: #ff453a;      /* systemRed dark */
  --success-color: #30d158;     /* systemGreen dark */
  --info-color: #0a84ff;

  /* Componentes */
  --btn-secondary-bg: #2c2c2e;
  --btn-secondary-text: #ebebf5;
  --btn-secondary-hover: #3a3a3c;
  --btn-danger-ghost-text: #ff6961;
  --btn-danger-ghost-bg: rgba(255,69,58,0.18);
  --btn-danger-ghost-border: rgba(255,69,58,0.4);
  --info-pill-bg: rgba(255,255,255,0.06);
  /* v2.7.77: info-box no escuro = scrim ESCURO (mais escuro que o card, segue a
     tonalidade) em vez de overlay branco — consistente com stat-box/config-box. */
  --info-box-bg: rgba(0,0,0,0.32);
  --stat-box-bg: rgba(255,255,255,0.05);
  --card-org-border: rgba(10,132,255,0.3);
  --card-part-border: rgba(191,90,242,0.3);

  /* v0.17.31: hero-box tokens — acompanham o tema (dark→dark, light→light),
     ligeiramente mais escuros que cards comuns pra dar destaque. */
  --hero-bg: linear-gradient(135deg, #1e3a8a 0%, #5b21b6 100%);
  --hero-text: #ffffff;
  --hero-text-soft: rgba(255,255,255,0.85);
  --hero-glass-bg: rgba(255,255,255,0.15);
  --hero-glass-bg-hover: rgba(255,255,255,0.25);
  --hero-glass-border: rgba(255,255,255,0.25);
  --hero-pill-active-bg: rgba(255,255,255,0.18);
  --hero-pill-active-border: rgba(255,255,255,0.35);
  --hero-pill-inactive-bg: rgba(0,0,0,0.12);
  --hero-pill-inactive-border: rgba(255,255,255,0.08);
  --hero-pill-glow: rgba(255,255,255,0.1);
}

[data-theme="light"] {
  /* CLARO — Apple Light Mode */
  --bg-darker: #f2f2f7;        /* systemGray6 */
  --bg-dark: #ffffff;          /* systemBackground */
  --bg-card: #ffffff;
  --bg-card-hover: #f9f9fb;

  --primary-color: #007aff;    /* systemBlue */
  --primary-hover: #0051d5;
  --secondary-color: #af52de;  /* systemPurple */
  --secondary-hover: #8e3ec4;

  --text-main: #1c1c1e;         /* near-black label */
  --text-muted: #6c6c70;        /* systemGray2 */
  --text-bright: #1c1c1e;       /* near-black — evita preto puro, idêntico ao text-main */

  --border-color: #d1d1d6;      /* systemGray4 */
  --border-focus: #007aff;

  --danger-color: #ff3b30;      /* systemRed */
  --success-color: #34c759;     /* systemGreen */
  --info-color: #007aff;

  /* Componentes */
  --btn-secondary-bg: #e5e5ea;  /* systemGray5 */
  --btn-secondary-text: #1c1c1e;
  --btn-secondary-hover: #d1d1d6;
  --btn-danger-ghost-text: #ff3b30;
  --btn-danger-ghost-bg: rgba(255,59,48,0.1);
  --btn-danger-ghost-border: rgba(255,59,48,0.3);
  --info-pill-bg: rgba(0,0,0,0.05);
  --info-box-bg: rgba(0,0,0,0.03);
  --stat-box-bg: rgba(0,0,0,0.04);
  --card-org-border: rgba(0,122,255,0.25);
  --card-part-border: rgba(175,82,222,0.25);

  /* v0.17.31: hero-box light — soft blue tint, dark text, slightly darker
     than white cards (#fff) to keep visual hierarchy. */
  --hero-bg: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
  --hero-text: #1c1c1e;
  --hero-text-soft: rgba(28,28,30,0.7);
  --hero-glass-bg: rgba(0,0,0,0.06);
  --hero-glass-bg-hover: rgba(0,0,0,0.12);
  --hero-glass-border: rgba(0,0,0,0.18);
  --hero-pill-active-bg: rgba(0,0,0,0.12);
  --hero-pill-active-border: rgba(0,0,0,0.28);
  --hero-pill-inactive-bg: rgba(0,0,0,0.04);
  --hero-pill-inactive-border: rgba(0,0,0,0.10);
  --hero-pill-glow: rgba(0,0,0,0.08);
}

[data-theme="sunset"] {
  /* PÔR DO SOL — light warm cream/sépia (modo leitura) com accent amber */
  --bg-darker: #f5efe6;        /* warm cream darker */
  --bg-dark: #faf6f0;          /* cream */
  --bg-card: #fffdf8;          /* near-white warm */
  --bg-card-hover: #f5efe6;

  --primary-color: #b45309;    /* amber-700 */
  --primary-hover: #92400e;    /* amber-800 */
  --secondary-color: #c2410c;  /* orange-700 */
  --secondary-hover: #9a3412;

  --text-main: #44403c;         /* warm gray-700 */
  --text-muted: #78716c;        /* warm gray-500 */
  --text-bright: #1c1917;       /* warm gray-900 */

  --border-color: #d6cfc4;      /* cream border */
  --border-focus: #b45309;

  --danger-color: #b91c1c;      /* red-700 */
  --success-color: #15803d;     /* green-700 */
  --info-color: #b45309;

  /* Componentes */
  --btn-secondary-bg: #ede5d6;  /* lighter cream */
  --btn-secondary-text: #44403c;
  --btn-secondary-hover: #d6cfc4;
  --btn-danger-ghost-text: #b91c1c;
  --btn-danger-ghost-bg: rgba(185,28,28,0.08);
  --btn-danger-ghost-border: rgba(185,28,28,0.25);
  /* v0.17.43: opacidade alta pra info/stat boxes em Sunset — antes
     rgba 0.05/0.06 ficavam quase invisíveis quando o card pai tinha
     overlay escuro de venue photo (dark teal sobre foto), e o texto
     warm-gray-700 sumia. Cream opaco com 88% garante que o box é
     lido tanto sobre bg cream da página quanto sobre overlay escuro. */
  --info-pill-bg: rgba(255,253,248,0.88);
  --info-box-bg: rgba(255,253,248,0.88);
  --stat-box-bg: rgba(255,253,248,0.88);
  --card-org-border: rgba(180,83,9,0.3);
  --card-part-border: rgba(194,65,12,0.3);

  /* v0.17.31: hero-box light cream — warm amber tint, dark text. */
  --hero-bg: linear-gradient(135deg, #fed7aa 0%, #fcd34d 100%);
  --hero-text: #1c1917;
  --hero-text-soft: rgba(28,25,23,0.7);
  --hero-glass-bg: rgba(0,0,0,0.06);
  --hero-glass-bg-hover: rgba(0,0,0,0.12);
  --hero-glass-border: rgba(0,0,0,0.18);
  --hero-pill-active-bg: rgba(0,0,0,0.12);
  --hero-pill-active-border: rgba(0,0,0,0.28);
  --hero-pill-inactive-bg: rgba(0,0,0,0.04);
  --hero-pill-inactive-border: rgba(0,0,0,0.10);
  --hero-pill-glow: rgba(0,0,0,0.08);
}

[data-theme="ocean"] {
  /* OCEANO — dark navy profundo com accent cyan/teal */
  --bg-darker: #0c1e35;        /* deep navy */
  --bg-dark: #122a42;
  --bg-card: #1c3d5e;
  --bg-card-hover: #244c75;

  --primary-color: #22d3ee;    /* cyan-400 */
  --primary-hover: #67e8f9;    /* cyan-300 */
  --secondary-color: #38bdf8;  /* sky-400 */
  --secondary-hover: #7dd3fc;

  --text-main: #cce7f4;         /* pale blue */
  --text-muted: #7fb3d0;
  --text-bright: #f0f9ff;

  --border-color: #2c5e85;
  --border-focus: #22d3ee;

  --danger-color: #fb7185;      /* rose-400 */
  --success-color: #34d399;     /* emerald-400 */
  --info-color: #22d3ee;

  /* Componentes */
  --btn-secondary-bg: #245478;
  --btn-secondary-text: #a5f3fc;
  --btn-secondary-hover: #2e6590;
  --btn-danger-ghost-text: #fda4af;
  --btn-danger-ghost-bg: rgba(251,113,133,0.18);
  --btn-danger-ghost-border: rgba(251,113,133,0.40);
  --info-pill-bg: rgba(10,40,70,0.50);
  --info-box-bg: rgba(10,40,70,0.40);
  --stat-box-bg: rgba(10,40,70,0.40);
  --card-org-border: rgba(34,211,238,0.35);
  --card-part-border: rgba(56,189,248,0.35);

  /* v0.17.31: hero-box ocean — deep navy/teal, white text. */
  --hero-bg: linear-gradient(135deg, #0e4d6b 0%, #1e3a5f 100%);
  --hero-text: #ffffff;
  --hero-text-soft: rgba(255,255,255,0.85);
  --hero-glass-bg: rgba(255,255,255,0.15);
  --hero-glass-bg-hover: rgba(255,255,255,0.25);
  --hero-glass-border: rgba(255,255,255,0.25);
  --hero-pill-active-bg: rgba(255,255,255,0.18);
  --hero-pill-active-border: rgba(255,255,255,0.35);
  --hero-pill-inactive-bg: rgba(0,0,0,0.20);
  --hero-pill-inactive-border: rgba(255,255,255,0.08);
  --hero-pill-glow: rgba(255,255,255,0.1);
}

:root {
  
  /* Tipografia */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Sombras e Efeitos */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-glow: 0 0 15px rgba(46, 160, 67, 0.4);
  
  /* Transições */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease;
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-darker);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  /* v1.6.16-beta: trava font scaling do sistema operacional.
     Sem isto, Android com "Tamanho de fonte" aumentado em
     Acessibilidade aplicava multiplicador sobre rem/em — fontes
     ficavam infladas e quebravam layouts calibrados (especialmente
     live scoring que tinha placar gigante não cabendo na tela em
     telas com font scaling acima de 100%). iOS Safari já ignora
     esse setting por default, mas Android Chrome aplicava.
     "none" trava em 100% (autor-defined sizes); "100%" tem mesmo
     efeito mas é a forma standard. Apps esportivos com UI
     calibrada milímetro precisam consistência cross-device. */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-bright);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-hover);
}

/* Utilitários */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.d-flex { display: flex; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.full-width { width: 100%; }

/* Scrollbar Bonita */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark); 
}
::-webkit-scrollbar-thumb {
  background: var(--bg-card-hover); 
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-color);
}

/* ── Light theme overrides for inline styles ────────────────────────────── */
/* v2.6.28: cards COM foto de local (.card-has-photo) ficam de FORA — senão o
   `background:!important` cobre a foto e o texto vira escuro no tema claro. */
[data-theme="light"] .card:not(.card-has-photo) {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

[data-theme="light"] .card:not(.card-has-photo) h4,
[data-theme="light"] .card:not(.card-has-photo) h3,
[data-theme="light"] .card:not(.card-has-photo) h2 {
  color: var(--text-bright) !important;
}

/* v0.17.31: hero-box agora usa --hero-* tokens definidos por tema (linhas
   58-99). Light themes têm gradient soft (claro) com texto escuro; dark
   themes mantêm gradient escuro com texto branco. Slightly darker que
   cards comuns pra preservar hierarquia visual. */
.hero-box {
  background: var(--hero-bg) !important;
  color: var(--hero-text) !important;
  filter: none !important;
}

/* v0.17.52: removido o override de v0.17.47 que forçava tokens dark
   nesses overlays. Pedido do usuário: "na partida casual o fundo está
   sempre escuro. deveria respeitar o tema escolhido pelo usuário."
   O bg dos overlays agora usa var(--bg-darker) (theme-aware) em vez
   de #0a0e1a hardcoded. Como bg respeita tema, os tokens de texto
   (--text-main, --text-bright) também devem respeitar — voltam a ser
   herdados naturalmente do tema ativo. Light themes ficam com bg cream
   + texto warm-gray; dark themes ficam com bg navy + texto branco. */
#casual-match-overlay,
#live-scoring-overlay {
  /* Em light themes (Claro/Pôr do Sol), os tints rgba(255,255,255,...)
     usados nos cards/elementos internos ficam invisíveis sobre bg cream.
     Override com tints dark equivalentes via attribute selector. Cobre
     os 4 valores mais comuns usados no overlay. */
}
[data-theme="light"] #casual-match-overlay [style*="rgba(255,255,255,0.04)"],
[data-theme="light"] #live-scoring-overlay [style*="rgba(255,255,255,0.04)"],
[data-theme="sunset"] #casual-match-overlay [style*="rgba(255,255,255,0.04)"],
[data-theme="sunset"] #live-scoring-overlay [style*="rgba(255,255,255,0.04)"] {
  background: rgba(0,0,0,0.05) !important;
}
[data-theme="light"] #casual-match-overlay [style*="rgba(255,255,255,0.02)"],
[data-theme="light"] #live-scoring-overlay [style*="rgba(255,255,255,0.02)"],
[data-theme="sunset"] #casual-match-overlay [style*="rgba(255,255,255,0.02)"],
[data-theme="sunset"] #live-scoring-overlay [style*="rgba(255,255,255,0.02)"] {
  background: rgba(0,0,0,0.03) !important;
}

[data-theme="light"] .topbar {
  background: var(--bg-dark);
  border-bottom-color: var(--border-color) !important;
}

[data-theme="light"] .badge {
  border: 1px solid var(--border-color);
}

/* Light theme: fix text colors in views */
[data-theme="light"] .text-muted,
[data-theme="light"] [style*="color:var(--text-muted)"] {
  color: var(--text-muted) !important;
}

/* ─── v2.4.47: "Encolher tudo junto" — escala proporcional à largura ────────
 * Quase todo o app usa `rem` (4400+ font-sizes), então controlar o font-size
 * da RAIZ escala TUDO junto e proporcionalmente, em qualquer aparelho —
 * mesma ideia do placar ao vivo (tamanhos amarrados ao viewport).
 *
 *  font-size = BASE_FLUIDA  ×  var(--ui-scale)
 *
 * BASE_FLUIDA = clamp(piso, 3.74vw, teto). 3.74vw ancora o iPhone Pro Max
 *   (~430px viewport → ~16px, o tamanho aprovado pelo dono) e escala
 *   PROPORCIONALMENTE pra baixo em telas menores — assim um aparelho menor
 *   mostra as MESMAS proporções, só que menor (como o placar):
 *     320px (SE) ≈ 13px (piso) · 360px (Android comum) ≈ 13.5px ·
 *     390px (iPhone comum) ≈ 14.6px · 430px (Pro Max) ≈ 16px ·
 *     ≥454px (Pro Max+/tablet/desktop) ≈ 17px (teto, não explode).
 *   Trade-off aceito: telefones menores que o Pro Max ficam com texto menor
 *   (proporcional), em troca de consistência de proporção entre aparelhos.
 * --ui-scale = controle do USUÁRIO (slider no perfil, 0.8–1.3). Padrão 1.
 *   Persistido em localStorage (instantâneo) + perfil (vale em todo dispositivo).
 *   Quem achar pequeno num aparelho menor pode subir o slider.
 * O zoom do placar ao vivo / da chave é um sistema SEPARADO, em cima disto.
 * O fix de auto-zoom do iOS (inputs em 16px) fica intacto — não usa rem. */
html {
  font-size: calc(clamp(13px, 3.74vw, 17px) * var(--ui-scale, 1));
}

/* Smooth theme transition */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scroll FIXO e ESTÁVEL em re-render (regra do dono): o app restaura o scroll
 * explicitamente (soft-refresh/_autoKeepScroll/_rerenderBracket). O scroll
 * anchoring NATIVO do browser ajusta o scroll por conta própria quando o DOM
 * acima do viewport muda → briga com os restores e gera "pulinho" de ~1 linha
 * a cada clique que re-renderiza. Desligado: só o app mexe no scroll. */
html {
  overflow-anchor: none;
}

body, .topbar, .card {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ─── iOS input auto-zoom fix ─────────────────────────────────────────
 * Safari no iPhone dá zoom automático quando o usuário toca num input
 * cujo font-size é menor que 16px. Isso cortava o layout inteiro (topbar
 * saindo da tela, modais truncadas). A contramedida padrão é forçar
 * font-size:16px em TODOS os campos editáveis em devices touch — o zoom
 * só dispara abaixo desse limiar.
 *
 * Usamos @media (hover: none) + (pointer: coarse) para pegar iOS/Android
 * sem afetar layout desktop (onde 14px fica bonito em inputs compactos).
 */
@media (hover: none) and (pointer: coarse) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Boot skeleton — pintado no FCP, removido quando o router monta a view.
   Adicionado em v0.17.62 pra reduzir LCP no mobile slow-4G (era 9.8s,
   alvo <4s). Ver docs/beta-readiness.md item #6 e docs/lighthouse/README.md.
   ═══════════════════════════════════════════════════════════════════ */
.skeleton-block {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  width: 100%;
  box-sizing: border-box;
}

[data-theme="light"] .skeleton-block,
[data-theme="sunset"] .skeleton-block {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.skeleton-shimmer {
  position: relative;
  overflow: hidden;
}

.skeleton-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  transform: translateX(-100%);
}

[data-theme="light"] .skeleton-shimmer::after,
[data-theme="sunset"] .skeleton-shimmer::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 50%,
    transparent 100%
  );
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Dot pulsante na topbar enquanto perfil carrega */
@keyframes pulseDot {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Respeita reduced-motion: usuários com prefers-reduced-motion não veem
   a animação shimmer, só o background sólido — comunica loading sem irritar. */
@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer::after {
    animation: none;
  }
}

/* Screen-reader only: visualmente escondido mas lido por leitores de tela.
   Útil pra headings que existem por estrutura semântica mas não fazem parte
   do design visual. Padrão recomendado pelo WAI (https://www.w3.org/TR/wai-aria-practices-1.2/). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* == v2.1.88: Contraste de TEXTO no TEMA CLARO (hex + rgb) ==============
   Pasteis/cinzas-claros inline (do tema escuro) viram texto ilegivel sobre
   branco no tema Claro. Remapeia pra tom escuro de mesma cor. Cobre as DUAS
   formas no atributo style: hex do innerHTML (color:#a5b4fc) E o rgb que o
   navegador grava quando a cor e setada via JS element.style (color: rgb(
   165, 180, 252)). Seletores casam SO `color:` standalone (^/;/espaco),
   nunca background-color/border-color. SO afeta o tema Claro. */
/* Indigo */
[data-theme="light"] [style^="color:#a5b4fc"],
[data-theme="light"] [style*=";color:#a5b4fc"],
[data-theme="light"] [style*=" color:#a5b4fc"],
[data-theme="light"] [style^="color: #a5b4fc"],
[data-theme="light"] [style*=";color: #a5b4fc"],
[data-theme="light"] [style*=" color: #a5b4fc"],
[data-theme="light"] [style^="color: rgb(165, 180, 252)"],
[data-theme="light"] [style*=";color: rgb(165, 180, 252)"],
[data-theme="light"] [style*=" color: rgb(165, 180, 252)"],
[data-theme="light"] [style^="color:#818cf8"],
[data-theme="light"] [style*=";color:#818cf8"],
[data-theme="light"] [style*=" color:#818cf8"],
[data-theme="light"] [style^="color: #818cf8"],
[data-theme="light"] [style*=";color: #818cf8"],
[data-theme="light"] [style*=" color: #818cf8"],
[data-theme="light"] [style^="color: rgb(129, 140, 248)"],
[data-theme="light"] [style*=";color: rgb(129, 140, 248)"],
[data-theme="light"] [style*=" color: rgb(129, 140, 248)"],
[data-theme="light"] [style^="color:#c7d2fe"],
[data-theme="light"] [style*=";color:#c7d2fe"],
[data-theme="light"] [style*=" color:#c7d2fe"],
[data-theme="light"] [style^="color: #c7d2fe"],
[data-theme="light"] [style*=";color: #c7d2fe"],
[data-theme="light"] [style*=" color: #c7d2fe"],
[data-theme="light"] [style^="color: rgb(199, 210, 254)"],
[data-theme="light"] [style*=";color: rgb(199, 210, 254)"],
[data-theme="light"] [style*=" color: rgb(199, 210, 254)"] {
  color: #4338ca !important;
}
/* Violeta */
[data-theme="light"] [style^="color:#a78bfa"],
[data-theme="light"] [style*=";color:#a78bfa"],
[data-theme="light"] [style*=" color:#a78bfa"],
[data-theme="light"] [style^="color: #a78bfa"],
[data-theme="light"] [style*=";color: #a78bfa"],
[data-theme="light"] [style*=" color: #a78bfa"],
[data-theme="light"] [style^="color: rgb(167, 139, 250)"],
[data-theme="light"] [style*=";color: rgb(167, 139, 250)"],
[data-theme="light"] [style*=" color: rgb(167, 139, 250)"],
[data-theme="light"] [style^="color:#c4b5fd"],
[data-theme="light"] [style*=";color:#c4b5fd"],
[data-theme="light"] [style*=" color:#c4b5fd"],
[data-theme="light"] [style^="color: #c4b5fd"],
[data-theme="light"] [style*=";color: #c4b5fd"],
[data-theme="light"] [style*=" color: #c4b5fd"],
[data-theme="light"] [style^="color: rgb(196, 181, 253)"],
[data-theme="light"] [style*=";color: rgb(196, 181, 253)"],
[data-theme="light"] [style*=" color: rgb(196, 181, 253)"],
[data-theme="light"] [style^="color:#8b5cf6"],
[data-theme="light"] [style*=";color:#8b5cf6"],
[data-theme="light"] [style*=" color:#8b5cf6"],
[data-theme="light"] [style^="color: #8b5cf6"],
[data-theme="light"] [style*=";color: #8b5cf6"],
[data-theme="light"] [style*=" color: #8b5cf6"],
[data-theme="light"] [style^="color: rgb(139, 92, 246)"],
[data-theme="light"] [style*=";color: rgb(139, 92, 246)"],
[data-theme="light"] [style*=" color: rgb(139, 92, 246)"] {
  color: #6d28d9 !important;
}
/* Roxo */
[data-theme="light"] [style^="color:#d8b4fe"],
[data-theme="light"] [style*=";color:#d8b4fe"],
[data-theme="light"] [style*=" color:#d8b4fe"],
[data-theme="light"] [style^="color: #d8b4fe"],
[data-theme="light"] [style*=";color: #d8b4fe"],
[data-theme="light"] [style*=" color: #d8b4fe"],
[data-theme="light"] [style^="color: rgb(216, 180, 254)"],
[data-theme="light"] [style*=";color: rgb(216, 180, 254)"],
[data-theme="light"] [style*=" color: rgb(216, 180, 254)"],
[data-theme="light"] [style^="color:#c084fc"],
[data-theme="light"] [style*=";color:#c084fc"],
[data-theme="light"] [style*=" color:#c084fc"],
[data-theme="light"] [style^="color: #c084fc"],
[data-theme="light"] [style*=";color: #c084fc"],
[data-theme="light"] [style*=" color: #c084fc"],
[data-theme="light"] [style^="color: rgb(192, 132, 252)"],
[data-theme="light"] [style*=";color: rgb(192, 132, 252)"],
[data-theme="light"] [style*=" color: rgb(192, 132, 252)"],
[data-theme="light"] [style^="color:#a855f7"],
[data-theme="light"] [style*=";color:#a855f7"],
[data-theme="light"] [style*=" color:#a855f7"],
[data-theme="light"] [style^="color: #a855f7"],
[data-theme="light"] [style*=";color: #a855f7"],
[data-theme="light"] [style*=" color: #a855f7"],
[data-theme="light"] [style^="color: rgb(168, 85, 247)"],
[data-theme="light"] [style*=";color: rgb(168, 85, 247)"],
[data-theme="light"] [style*=" color: rgb(168, 85, 247)"] {
  color: #7e22ce !important;
}
/* Verde */
[data-theme="light"] [style^="color:#4ade80"],
[data-theme="light"] [style*=";color:#4ade80"],
[data-theme="light"] [style*=" color:#4ade80"],
[data-theme="light"] [style^="color: #4ade80"],
[data-theme="light"] [style*=";color: #4ade80"],
[data-theme="light"] [style*=" color: #4ade80"],
[data-theme="light"] [style^="color: rgb(74, 222, 128)"],
[data-theme="light"] [style*=";color: rgb(74, 222, 128)"],
[data-theme="light"] [style*=" color: rgb(74, 222, 128)"],
[data-theme="light"] [style^="color:#86efac"],
[data-theme="light"] [style*=";color:#86efac"],
[data-theme="light"] [style*=" color:#86efac"],
[data-theme="light"] [style^="color: #86efac"],
[data-theme="light"] [style*=";color: #86efac"],
[data-theme="light"] [style*=" color: #86efac"],
[data-theme="light"] [style^="color: rgb(134, 239, 172)"],
[data-theme="light"] [style*=";color: rgb(134, 239, 172)"],
[data-theme="light"] [style*=" color: rgb(134, 239, 172)"],
[data-theme="light"] [style^="color:#22c55e"],
[data-theme="light"] [style*=";color:#22c55e"],
[data-theme="light"] [style*=" color:#22c55e"],
[data-theme="light"] [style^="color: #22c55e"],
[data-theme="light"] [style*=";color: #22c55e"],
[data-theme="light"] [style*=" color: #22c55e"],
[data-theme="light"] [style^="color: rgb(34, 197, 94)"],
[data-theme="light"] [style*=";color: rgb(34, 197, 94)"],
[data-theme="light"] [style*=" color: rgb(34, 197, 94)"] {
  color: #15803d !important;
}
/* Esmeralda/teal */
[data-theme="light"] [style^="color:#34d399"],
[data-theme="light"] [style*=";color:#34d399"],
[data-theme="light"] [style*=" color:#34d399"],
[data-theme="light"] [style^="color: #34d399"],
[data-theme="light"] [style*=";color: #34d399"],
[data-theme="light"] [style*=" color: #34d399"],
[data-theme="light"] [style^="color: rgb(52, 211, 153)"],
[data-theme="light"] [style*=";color: rgb(52, 211, 153)"],
[data-theme="light"] [style*=" color: rgb(52, 211, 153)"],
[data-theme="light"] [style^="color:#6ee7b7"],
[data-theme="light"] [style*=";color:#6ee7b7"],
[data-theme="light"] [style*=" color:#6ee7b7"],
[data-theme="light"] [style^="color: #6ee7b7"],
[data-theme="light"] [style*=";color: #6ee7b7"],
[data-theme="light"] [style*=" color: #6ee7b7"],
[data-theme="light"] [style^="color: rgb(110, 231, 183)"],
[data-theme="light"] [style*=";color: rgb(110, 231, 183)"],
[data-theme="light"] [style*=" color: rgb(110, 231, 183)"],
[data-theme="light"] [style^="color:#10b981"],
[data-theme="light"] [style*=";color:#10b981"],
[data-theme="light"] [style*=" color:#10b981"],
[data-theme="light"] [style^="color: #10b981"],
[data-theme="light"] [style*=";color: #10b981"],
[data-theme="light"] [style*=" color: #10b981"],
[data-theme="light"] [style^="color: rgb(16, 185, 129)"],
[data-theme="light"] [style*=";color: rgb(16, 185, 129)"],
[data-theme="light"] [style*=" color: rgb(16, 185, 129)"],
[data-theme="light"] [style^="color:#5eead4"],
[data-theme="light"] [style*=";color:#5eead4"],
[data-theme="light"] [style*=" color:#5eead4"],
[data-theme="light"] [style^="color: #5eead4"],
[data-theme="light"] [style*=";color: #5eead4"],
[data-theme="light"] [style*=" color: #5eead4"],
[data-theme="light"] [style^="color: rgb(94, 234, 212)"],
[data-theme="light"] [style*=";color: rgb(94, 234, 212)"],
[data-theme="light"] [style*=" color: rgb(94, 234, 212)"],
[data-theme="light"] [style^="color:#2dd4bf"],
[data-theme="light"] [style*=";color:#2dd4bf"],
[data-theme="light"] [style*=" color:#2dd4bf"],
[data-theme="light"] [style^="color: #2dd4bf"],
[data-theme="light"] [style*=";color: #2dd4bf"],
[data-theme="light"] [style*=" color: #2dd4bf"],
[data-theme="light"] [style^="color: rgb(45, 212, 191)"],
[data-theme="light"] [style*=";color: rgb(45, 212, 191)"],
[data-theme="light"] [style*=" color: rgb(45, 212, 191)"] {
  color: #047857 !important;
}
/* Azul */
[data-theme="light"] [style^="color:#60a5fa"],
[data-theme="light"] [style*=";color:#60a5fa"],
[data-theme="light"] [style*=" color:#60a5fa"],
[data-theme="light"] [style^="color: #60a5fa"],
[data-theme="light"] [style*=";color: #60a5fa"],
[data-theme="light"] [style*=" color: #60a5fa"],
[data-theme="light"] [style^="color: rgb(96, 165, 250)"],
[data-theme="light"] [style*=";color: rgb(96, 165, 250)"],
[data-theme="light"] [style*=" color: rgb(96, 165, 250)"],
[data-theme="light"] [style^="color:#93c5fd"],
[data-theme="light"] [style*=";color:#93c5fd"],
[data-theme="light"] [style*=" color:#93c5fd"],
[data-theme="light"] [style^="color: #93c5fd"],
[data-theme="light"] [style*=";color: #93c5fd"],
[data-theme="light"] [style*=" color: #93c5fd"],
[data-theme="light"] [style^="color: rgb(147, 197, 253)"],
[data-theme="light"] [style*=";color: rgb(147, 197, 253)"],
[data-theme="light"] [style*=" color: rgb(147, 197, 253)"],
[data-theme="light"] [style^="color:#3b82f6"],
[data-theme="light"] [style*=";color:#3b82f6"],
[data-theme="light"] [style*=" color:#3b82f6"],
[data-theme="light"] [style^="color: #3b82f6"],
[data-theme="light"] [style*=";color: #3b82f6"],
[data-theme="light"] [style*=" color: #3b82f6"],
[data-theme="light"] [style^="color: rgb(59, 130, 246)"],
[data-theme="light"] [style*=";color: rgb(59, 130, 246)"],
[data-theme="light"] [style*=" color: rgb(59, 130, 246)"] {
  color: #1d4ed8 !important;
}
/* Sky */
[data-theme="light"] [style^="color:#38bdf8"],
[data-theme="light"] [style*=";color:#38bdf8"],
[data-theme="light"] [style*=" color:#38bdf8"],
[data-theme="light"] [style^="color: #38bdf8"],
[data-theme="light"] [style*=";color: #38bdf8"],
[data-theme="light"] [style*=" color: #38bdf8"],
[data-theme="light"] [style^="color: rgb(56, 189, 248)"],
[data-theme="light"] [style*=";color: rgb(56, 189, 248)"],
[data-theme="light"] [style*=" color: rgb(56, 189, 248)"],
[data-theme="light"] [style^="color:#7dd3fc"],
[data-theme="light"] [style*=";color:#7dd3fc"],
[data-theme="light"] [style*=" color:#7dd3fc"],
[data-theme="light"] [style^="color: #7dd3fc"],
[data-theme="light"] [style*=";color: #7dd3fc"],
[data-theme="light"] [style*=" color: #7dd3fc"],
[data-theme="light"] [style^="color: rgb(125, 211, 252)"],
[data-theme="light"] [style*=";color: rgb(125, 211, 252)"],
[data-theme="light"] [style*=" color: rgb(125, 211, 252)"] {
  color: #0369a1 !important;
}
/* Ciano */
[data-theme="light"] [style^="color:#67e8f9"],
[data-theme="light"] [style*=";color:#67e8f9"],
[data-theme="light"] [style*=" color:#67e8f9"],
[data-theme="light"] [style^="color: #67e8f9"],
[data-theme="light"] [style*=";color: #67e8f9"],
[data-theme="light"] [style*=" color: #67e8f9"],
[data-theme="light"] [style^="color: rgb(103, 232, 249)"],
[data-theme="light"] [style*=";color: rgb(103, 232, 249)"],
[data-theme="light"] [style*=" color: rgb(103, 232, 249)"],
[data-theme="light"] [style^="color:#22d3ee"],
[data-theme="light"] [style*=";color:#22d3ee"],
[data-theme="light"] [style*=" color:#22d3ee"],
[data-theme="light"] [style^="color: #22d3ee"],
[data-theme="light"] [style*=";color: #22d3ee"],
[data-theme="light"] [style*=" color: #22d3ee"],
[data-theme="light"] [style^="color: rgb(34, 211, 238)"],
[data-theme="light"] [style*=";color: rgb(34, 211, 238)"],
[data-theme="light"] [style*=" color: rgb(34, 211, 238)"],
[data-theme="light"] [style^="color:#06b6d4"],
[data-theme="light"] [style*=";color:#06b6d4"],
[data-theme="light"] [style*=" color:#06b6d4"],
[data-theme="light"] [style^="color: #06b6d4"],
[data-theme="light"] [style*=";color: #06b6d4"],
[data-theme="light"] [style*=" color: #06b6d4"],
[data-theme="light"] [style^="color: rgb(6, 182, 212)"],
[data-theme="light"] [style*=";color: rgb(6, 182, 212)"],
[data-theme="light"] [style*=" color: rgb(6, 182, 212)"] {
  color: #0e7490 !important;
}
/* Ambar/laranja */
[data-theme="light"] [style^="color:#fbbf24"],
[data-theme="light"] [style*=";color:#fbbf24"],
[data-theme="light"] [style*=" color:#fbbf24"],
[data-theme="light"] [style^="color: #fbbf24"],
[data-theme="light"] [style*=";color: #fbbf24"],
[data-theme="light"] [style*=" color: #fbbf24"],
[data-theme="light"] [style^="color: rgb(251, 191, 36)"],
[data-theme="light"] [style*=";color: rgb(251, 191, 36)"],
[data-theme="light"] [style*=" color: rgb(251, 191, 36)"],
[data-theme="light"] [style^="color:#f59e0b"],
[data-theme="light"] [style*=";color:#f59e0b"],
[data-theme="light"] [style*=" color:#f59e0b"],
[data-theme="light"] [style^="color: #f59e0b"],
[data-theme="light"] [style*=";color: #f59e0b"],
[data-theme="light"] [style*=" color: #f59e0b"],
[data-theme="light"] [style^="color: rgb(245, 158, 11)"],
[data-theme="light"] [style*=";color: rgb(245, 158, 11)"],
[data-theme="light"] [style*=" color: rgb(245, 158, 11)"],
[data-theme="light"] [style^="color:#fb923c"],
[data-theme="light"] [style*=";color:#fb923c"],
[data-theme="light"] [style*=" color:#fb923c"],
[data-theme="light"] [style^="color: #fb923c"],
[data-theme="light"] [style*=";color: #fb923c"],
[data-theme="light"] [style*=" color: #fb923c"],
[data-theme="light"] [style^="color: rgb(251, 146, 60)"],
[data-theme="light"] [style*=";color: rgb(251, 146, 60)"],
[data-theme="light"] [style*=" color: rgb(251, 146, 60)"] {
  color: #b45309 !important;
}
/* Vermelho */
[data-theme="light"] [style^="color:#f87171"],
[data-theme="light"] [style*=";color:#f87171"],
[data-theme="light"] [style*=" color:#f87171"],
[data-theme="light"] [style^="color: #f87171"],
[data-theme="light"] [style*=";color: #f87171"],
[data-theme="light"] [style*=" color: #f87171"],
[data-theme="light"] [style^="color: rgb(248, 113, 113)"],
[data-theme="light"] [style*=";color: rgb(248, 113, 113)"],
[data-theme="light"] [style*=" color: rgb(248, 113, 113)"],
[data-theme="light"] [style^="color:#fca5a5"],
[data-theme="light"] [style*=";color:#fca5a5"],
[data-theme="light"] [style*=" color:#fca5a5"],
[data-theme="light"] [style^="color: #fca5a5"],
[data-theme="light"] [style*=";color: #fca5a5"],
[data-theme="light"] [style*=" color: #fca5a5"],
[data-theme="light"] [style^="color: rgb(252, 165, 165)"],
[data-theme="light"] [style*=";color: rgb(252, 165, 165)"],
[data-theme="light"] [style*=" color: rgb(252, 165, 165)"],
[data-theme="light"] [style^="color:#ef4444"],
[data-theme="light"] [style*=";color:#ef4444"],
[data-theme="light"] [style*=" color:#ef4444"],
[data-theme="light"] [style^="color: #ef4444"],
[data-theme="light"] [style*=";color: #ef4444"],
[data-theme="light"] [style*=" color: #ef4444"],
[data-theme="light"] [style^="color: rgb(239, 68, 68)"],
[data-theme="light"] [style*=";color: rgb(239, 68, 68)"],
[data-theme="light"] [style*=" color: rgb(239, 68, 68)"] {
  color: #b91c1c !important;
}
/* Cinza quase-branco (corpo) */
[data-theme="light"] [style^="color:#e2e8f0"],
[data-theme="light"] [style*=";color:#e2e8f0"],
[data-theme="light"] [style*=" color:#e2e8f0"],
[data-theme="light"] [style^="color: #e2e8f0"],
[data-theme="light"] [style*=";color: #e2e8f0"],
[data-theme="light"] [style*=" color: #e2e8f0"],
[data-theme="light"] [style^="color: rgb(226, 232, 240)"],
[data-theme="light"] [style*=";color: rgb(226, 232, 240)"],
[data-theme="light"] [style*=" color: rgb(226, 232, 240)"],
[data-theme="light"] [style^="color:#cbd5e1"],
[data-theme="light"] [style*=";color:#cbd5e1"],
[data-theme="light"] [style*=" color:#cbd5e1"],
[data-theme="light"] [style^="color: #cbd5e1"],
[data-theme="light"] [style*=";color: #cbd5e1"],
[data-theme="light"] [style*=" color: #cbd5e1"],
[data-theme="light"] [style^="color: rgb(203, 213, 225)"],
[data-theme="light"] [style*=";color: rgb(203, 213, 225)"],
[data-theme="light"] [style*=" color: rgb(203, 213, 225)"],
[data-theme="light"] [style^="color:#f1f5f9"],
[data-theme="light"] [style*=";color:#f1f5f9"],
[data-theme="light"] [style*=" color:#f1f5f9"],
[data-theme="light"] [style^="color: #f1f5f9"],
[data-theme="light"] [style*=";color: #f1f5f9"],
[data-theme="light"] [style*=" color: #f1f5f9"],
[data-theme="light"] [style^="color: rgb(241, 245, 249)"],
[data-theme="light"] [style*=";color: rgb(241, 245, 249)"],
[data-theme="light"] [style*=" color: rgb(241, 245, 249)"],
[data-theme="light"] [style^="color:#f3f4f6"],
[data-theme="light"] [style*=";color:#f3f4f6"],
[data-theme="light"] [style*=" color:#f3f4f6"],
[data-theme="light"] [style^="color: #f3f4f6"],
[data-theme="light"] [style*=";color: #f3f4f6"],
[data-theme="light"] [style*=" color: #f3f4f6"],
[data-theme="light"] [style^="color: rgb(243, 244, 246)"],
[data-theme="light"] [style*=";color: rgb(243, 244, 246)"],
[data-theme="light"] [style*=" color: rgb(243, 244, 246)"],
[data-theme="light"] [style^="color:#ede9fe"],
[data-theme="light"] [style*=";color:#ede9fe"],
[data-theme="light"] [style*=" color:#ede9fe"],
[data-theme="light"] [style^="color: #ede9fe"],
[data-theme="light"] [style*=";color: #ede9fe"],
[data-theme="light"] [style*=" color: #ede9fe"],
[data-theme="light"] [style^="color: rgb(237, 233, 254)"],
[data-theme="light"] [style*=";color: rgb(237, 233, 254)"],
[data-theme="light"] [style*=" color: rgb(237, 233, 254)"],
[data-theme="light"] [style^="color:#dbeafe"],
[data-theme="light"] [style*=";color:#dbeafe"],
[data-theme="light"] [style*=" color:#dbeafe"],
[data-theme="light"] [style^="color: #dbeafe"],
[data-theme="light"] [style*=";color: #dbeafe"],
[data-theme="light"] [style*=" color: #dbeafe"],
[data-theme="light"] [style^="color: rgb(219, 234, 254)"],
[data-theme="light"] [style*=";color: rgb(219, 234, 254)"],
[data-theme="light"] [style*=" color: rgb(219, 234, 254)"] {
  color: #334155 !important;
}
/* Cinza-azulado fraco */
[data-theme="light"] [style^="color:#94a3b8"],
[data-theme="light"] [style*=";color:#94a3b8"],
[data-theme="light"] [style*=" color:#94a3b8"],
[data-theme="light"] [style^="color: #94a3b8"],
[data-theme="light"] [style*=";color: #94a3b8"],
[data-theme="light"] [style*=" color: #94a3b8"],
[data-theme="light"] [style^="color: rgb(148, 163, 184)"],
[data-theme="light"] [style*=";color: rgb(148, 163, 184)"],
[data-theme="light"] [style*=" color: rgb(148, 163, 184)"] {
  color: #64748b !important;
}