/* =========================================================
   Mundo Play — Estilos principais
   Foco em acessibilidade (WCAG 2.1 AA)
   ========================================================= */

/* --- Variáveis --- */
:root {
  --mp-primary: #0d6efd;
  --mp-dark: #1a1a2e;
  --mp-focus-ring: 3px solid #ffc107;
  --mp-focus-offset: 2px;
}

/* --- Foco visível (WCAG 2.4.7) --- */
:focus-visible {
  outline: var(--mp-focus-ring);
  outline-offset: var(--mp-focus-offset);
  border-radius: 3px;
}

/* --- Botões nav-link no navbar (ex.: hambúrguer, informações do perfil):
   precisam ser <button> nativo pra Espaço funcionar em leitor de tela; some
   com o chrome padrão do navegador --- */
.navbar button.nav-link {
  background: none;
  border: 0;
}

/* --- Skip Links --- */
.skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 9999;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
}

/* --- Alto Contraste --- */
@media (prefers-contrast: high) {
  body {
    background: #000 !important;
    color: #fff !important;
  }
  .card {
    border: 2px solid #fff !important;
  }
  a { color: #ffff00 !important; }
  .btn-primary {
    background: #ffff00 !important;
    color: #000 !important;
    border-color: #ffff00 !important;
  }
}

/* --- Modo escuro do sistema --- */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
  .card {
    background-color: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
  }
  .list-group-item {
    background-color: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
  }

  /* Seções com fundo claro (utilitário .bg-light do Bootstrap, usado nas
     faixas alternadas da home -- ex. o bloco "Séries") continuam de
     propósito com fundo claro no modo escuro (é a alternância visual com
     as faixas escuras). O texto, porém, herdava a cor clara de `body`
     acima (pensada pra fundo escuro) e ficava quase ilegível sobre o
     fundo claro da própria seção -- ex.: título "Séries" da home,
     contraste medido em ~1.2:1 (WCAG AA pede pelo menos 3:1 pra texto
     grande). Corrigido escurecendo de volta o texto só dentro dessas
     seções. Ver seção 6.2 de analise_melhorias_mundo_play.md. */
  .bg-light {
    color: #212529;
  }
  .bg-light h1, .bg-light h2, .bg-light h3,
  .bg-light h4, .bg-light h5, .bg-light h6 {
    color: #212529;
  }

  /* O utilitário .text-muted do Bootstrap fixa uma cor cinza-escura com
     !important (pensada pra fundo claro), o que vence a cor clara que
     .card/.list-group-item definem acima pro modo escuro -- resultado:
     texto cinza-escuro sobre fundo quase preto, quase invisível (ex.: a
     sinopse do card de conteúdo expandido). Reforçado aqui com
     !important também, pra vencer o !important do Bootstrap, com um
     cinza médio que mantém a ideia de "texto secundário" mas com
     contraste adequado sobre o fundo escuro do card. */
  .card .text-muted,
  .list-group-item .text-muted {
    color: #adb5bd !important;
  }

  /* Mesmo problema do bloco acima, achado depois em produção (07/09): o
     rodapé (footer.bg-dark) tem listas de links com .text-muted
     (Categorias, Acessibilidade) que ficam fora de .card/.list-group-item,
     então a regra acima não os alcança -- medido ~1:1 de contraste
     (praticamente invisível sobre o fundo escuro do rodapé). Mesma
     correção, mesmo tom. Ver seção 6.2(c) de analise_melhorias_mundo_play.md. */
  footer .text-muted {
    color: #adb5bd !important;
  }

  /* =======================================================
     Redesenho visual (implementação real, out/2026) -- tokens
     e cores do protótipo aprovado pelo Filipe. Fica só dentro
     deste @media: por decisão dele, continua condicionado ao
     modo escuro do sistema (não é o padrão pra todo mundo
     ainda). Quem está no modo claro não vê nenhuma mudança
     desta seção em diante. Ver status de implementação no
     projeto pra detalhes e próximas fases (home, listagem,
     detalhe, player, painel). */
  :root {
    --mp-focus-ring: 3px solid #ffd76a;
    --mp2-bg: #121317;
    --mp2-surface: #1c1e24;
    --mp2-surface-2: #242730;
    --mp2-text: #f2f0ec;
    --mp2-muted: #aeb2be;
    --mp2-accent: #ff8a50;
    --mp2-accent-ink: #1a0e08;
    --mp2-link: #6fb6ff;
    --mp2-border: #2e313b;
  }

  body {
    background-color: var(--mp2-bg);
    color: var(--mp2-text);
    font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  }

  a {
    color: var(--mp2-link);
  }
  a:hover {
    color: #9acbff;
  }

  /* As correções de contraste de .text-muted logo acima (seção 6.2) só
     cobrem .card/.list-group-item/footer. Qualquer outro .text-muted solto
     na página (ex.: um parágrafo de apoio dentro de {% block conteudo %})
     continua caindo no cinza padrão do Bootstrap, que fica abaixo de 3:1
     sobre o novo fundo escuro. Generalizamos aqui; onde as regras de cima
     também batem (dentro de card/list-group-item/footer), a mais
     específica continua vencendo -- o tom é praticamente o mesmo. */
  .text-muted {
    color: var(--mp2-muted) !important;
  }

  /* A barra do logo/contador/notificações e o rodapé usam .bg-dark do
     Bootstrap (um cinza fixo, igual nos dois temas); no modo escuro do
     redesenho eles passam a usar a cor de "superfície" do novo tema, pra
     não sobrar um cinza Bootstrap genérico ao lado do resto da página.
     A navbar (menu principal) usa a cor de fundo da própria página, uma
     camada visual abaixo da superfície -- mesma lógica do protótipo. */
  .bg-dark {
    background-color: var(--mp2-surface) !important;
    border-color: var(--mp2-border);
  }
  #navegacao-principal.bg-dark {
    background-color: var(--mp2-bg) !important;
  }
  footer.bg-dark {
    background-color: var(--mp2-surface) !important;
  }

  .navbar-dark .navbar-nav .nav-link,
  .navbar-dark .navbar-brand {
    color: var(--mp2-text);
  }
  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link:focus-visible,
  .navbar-dark .navbar-nav button.nav-link:hover,
  .navbar-dark .navbar-nav button.nav-link:focus-visible {
    color: var(--mp2-text);
    background-color: var(--mp2-surface-2);
    border-radius: 8px;
  }

  .card,
  .list-group-item {
    background-color: var(--mp2-surface);
    border-color: var(--mp2-border);
    color: var(--mp2-text);
  }

  .btn-primary {
    background-color: var(--mp2-accent);
    border-color: var(--mp2-accent);
    color: var(--mp2-accent-ink);
  }
  .btn-primary:hover,
  .btn-primary:focus {
    background-color: #ff9d6c;
    border-color: #ff9d6c;
    color: var(--mp2-accent-ink);
  }

  .btn-outline-light {
    color: var(--mp2-text);
    border-color: var(--mp2-border);
  }
  .btn-outline-light:hover {
    background-color: var(--mp2-surface-2);
    color: var(--mp2-text);
    border-color: var(--mp2-border);
  }

  /* =======================================================
     Fase 2 -- home.html: faixas "claras" alternadas, grades de
     cards e botões secundários das seções. */

  /* As faixas "Séries" e "Avaliações do Portal" usam .bg-light do
     Bootstrap de propósito, pra alternar com as faixas escuras da
     home -- ver o comentário da correção de contraste logo acima
     (seção 6.2). No redesenho a página inteira é escura, sem
     alternância clara/escura, então essas faixas passam a usar a
     superfície do novo tema também; o texto volta a ser claro (a
     correção acima escurecia o texto pra ler sobre fundo claro --
     agora o fundo deixou de ser claro). */
  .bg-light {
    background-color: var(--mp2-surface) !important;
    color: var(--mp2-text);
  }
  .bg-light h1, .bg-light h2, .bg-light h3,
  .bg-light h4, .bg-light h5, .bg-light h6 {
    color: var(--mp2-text);
  }

  /* "Ver todos"/"Ver todas" no topo de cada grade da home. */
  .btn-outline-primary {
    color: var(--mp2-text);
    border-color: var(--mp2-border);
  }
  .btn-outline-primary:hover,
  .btn-outline-primary:focus {
    background-color: var(--mp2-surface-2);
    border-color: var(--mp2-border);
    color: var(--mp2-text);
  }

  /* Os cards de conteúdo (card_conteudo.html, usado nas grades da home
     e, nas próximas fases, em listagem/detalhe) usam .border-0 de
     propósito, contando só com a sombra pra se separar do fundo. No
     novo tema a superfície do card (--surface) é só um tom mais clara
     que o fundo da página (--bg) -- sem nenhuma borda eles quase se
     fundem com o fundo. Adicionada uma borda sutil só no modo escuro. */
  .card.border-0 {
    border: 1px solid var(--mp2-border) !important;
  }

  /* =======================================================
     Fase 3 -- listagem e detalhe (filmes/séries/novelas/desenhos/
     documentários): breadcrumb e paginação, que o Bootstrap desenha
     pensando em fundo claro por padrão (cor de texto/separador do
     breadcrumb e os "pills" da paginação vêm brancos). Reaproveitamos
     as próprias variáveis CSS do Bootstrap em vez de sobrescrever
     regra por regra. Cards, badges, list-group (episódios/capítulos)
     e botões já ficam cobertos pelas regras gerais das fases 1 e 2. */
  .breadcrumb {
    --bs-breadcrumb-divider-color: var(--mp2-muted);
    --bs-breadcrumb-item-active-color: var(--mp2-muted);
  }

  .pagination {
    --bs-pagination-bg: var(--mp2-surface-2);
    --bs-pagination-color: var(--mp2-text);
    --bs-pagination-border-color: var(--mp2-border);
    --bs-pagination-hover-bg: var(--mp2-surface);
    --bs-pagination-hover-color: var(--mp2-text);
    --bs-pagination-hover-border-color: var(--mp2-border);
    --bs-pagination-focus-bg: var(--mp2-surface);
    --bs-pagination-focus-color: var(--mp2-text);
    --bs-pagination-active-bg: var(--mp2-accent);
    --bs-pagination-active-border-color: var(--mp2-accent);
    --bs-pagination-active-color: var(--mp2-accent-ink);
    --bs-pagination-disabled-bg: var(--mp2-surface-2);
    --bs-pagination-disabled-color: var(--mp2-muted);
    --bs-pagination-disabled-border-color: var(--mp2-border);
  }

  /* =======================================================
     Achado de auditoria (12/10): dois botões de contorno do
     Bootstrap ficaram abaixo do contraste mínimo (4.5:1) sobre
     o novo fundo escuro -- usam a cor padrão do Bootstrap
     (pensada pra fundo claro), e não eram cobertos pelas
     correções de .text-muted das fases anteriores por serem
     classes de botão, não de texto. Medido: "Reportar problema"
     / "Voltar para X" (.btn-outline-secondary, cinza #6c757d)
     em 3,96:1; "Favoritar" nas páginas de detalhe
     (.btn-outline-danger, btn-lg) em 4,10:1. Mesma técnica das
     fases 3/4: variáveis de botão do próprio Bootstrap. */
  .btn-outline-secondary {
    --bs-btn-color: var(--mp2-muted);
    --bs-btn-border-color: var(--mp2-border);
    --bs-btn-hover-color: var(--mp2-text);
    --bs-btn-hover-bg: var(--mp2-surface-2);
    --bs-btn-hover-border-color: var(--mp2-border);
    --bs-btn-active-color: var(--mp2-text);
    --bs-btn-active-bg: var(--mp2-surface-2);
    --bs-btn-active-border-color: var(--mp2-border);
  }

  .btn-outline-danger {
    --bs-btn-color: #ff7a90;
    --bs-btn-border-color: #ff7a90;
    --bs-btn-hover-color: var(--mp2-accent-ink);
    --bs-btn-hover-bg: #ff7a90;
    --bs-btn-hover-border-color: #ff7a90;
    --bs-btn-active-color: var(--mp2-accent-ink);
    --bs-btn-active-bg: #ff7a90;
    --bs-btn-active-border-color: #ff7a90;
  }

  /* =======================================================
     Fase 5 -- área do usuário (Meu Perfil, Favoritos, Histórico,
     Notificações, Buscar conteúdo): templates/users/perfil.html,
     templates/favoritos/lista.html, templates/historico/lista.html,
     templates/notificacoes/lista.html e templates/busca/resultados.html
     já reaproveitam .card/.list-group-item/.text-muted/.btn-primary/
     .btn-outline-danger/.btn-outline-secondary/.pagination/
     card_conteudo.html -- todos já cobertos pelas fases e correções
     anteriores. A única peça nova que essas telas introduzem é um
     campo de texto de verdade: o campo de busca (busca_form.html,
     reutilizado em Buscar conteúdo e também no topo das páginas de
     listagem por categoria). O .form-control do Bootstrap usa as
     variáveis globais --bs-body-bg/--bs-body-color/--bs-border-color
     (pensadas pra fundo claro) -- sem isso, o campo aparecia como um
     retângulo branco chapado em cima do novo tema escuro. */
  .form-control {
    --bs-body-bg: var(--mp2-surface-2);
    --bs-body-color: var(--mp2-text);
    --bs-border-color: var(--mp2-border);
    --bs-secondary-color: var(--mp2-muted);
  }
}

/* --- Cards de conteúdo --- */
.card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card img {
  object-fit: cover;
}

/* --- Chevron do card collapsível --- */
.card-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.card-toggle[aria-expanded="true"] .card-chevron {
  transform: rotate(180deg);
}

/* --- Navegação --- */
.navbar-brand:focus-visible {
  outline: var(--mp-focus-ring);
  outline-offset: 4px;
}

/* --- Paginação acessível --- */
.page-link:focus-visible {
  outline: var(--mp-focus-ring);
  z-index: 3;
}

/* --- Botões --- */
.btn:focus-visible {
  outline: var(--mp-focus-ring);
  outline-offset: var(--mp-focus-offset);
}

/* --- Redução de movimento (WCAG 2.3.3) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Hero section --- */
.hero {
  min-height: 300px;
  display: flex;
  align-items: center;
}

/* --- Tamanho de fonte mínimo (legibilidade) --- */
body {
  font-size: 1rem;
  line-height: 1.6;
}

/* --- Classificação indicativa --- */
.badge-classificacao {
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 4px;
  padding: 2px 6px;
}

/* --- Player ---
   A página do player (templates/player/player.html) já é sempre escura,
   de propósito, independente do tema claro/escuro do resto do site --
   é uma caixa de áudio própria, isolada, como em outros apps de áudio.
   Por isso essas regras não ficam dentro do @media de modo escuro: elas
   só têm efeito dentro dessa caixa, pra qualquer usuário. A cor do
   polegar da barra de progresso segue a cor de destaque do redesenho
   (--mp2-accent, #ff8a50) em vez do azul padrão, pra combinar com o
   resto dos controles do player (ver fase 4 do redesenho). */
.mp-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: 2px solid #ff8a50;
}

.mp-progress::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: 2px solid #ff8a50;
}

/* Achado testando a fase 4: dentro da caixa do player (sempre escura,
   ver acima), o .text-muted do Bootstrap (subtítulo, tempos de
   reprodução, atalhos de teclado) fica com o cinza-escuro padrão,
   pensado pra fundo claro -- ficava ilegível ali pra quem está no modo
   claro do sistema (no escuro, a correção geral da fase 1 já resolvia
   por coincidência). Problema não era novo desta fase, mas só fica
   visível agora que reparei; corrigido aqui, fora do @media, porque a
   caixa do player é escura pros dois temas. */
.mp-player .text-muted {
  color: #aeb2be !important;
}

/* Mesmo achado de auditoria (12/10) acima, mas pro botão "Começar do
   início" (.btn-outline-secondary) que fica dentro da caixa do player --
   como essa caixa é sempre escura nos dois temas, a correção genérica de
   dentro do @media de modo escuro não alcança quem está no modo claro do
   sistema. Fora do @media, pela mesma razão das outras regras do player. */
.mp-player .btn-outline-secondary {
  --bs-btn-color: #aeb2be;
  --bs-btn-border-color: #2e313b;
  --bs-btn-hover-color: #f2f0ec;
  --bs-btn-hover-bg: #242730;
  --bs-btn-hover-border-color: #2e313b;
  --bs-btn-active-color: #f2f0ec;
  --bs-btn-active-bg: #242730;
  --bs-btn-active-border-color: #2e313b;
}