/* modos.css — última camada: modo TV (C §7), movimento reduzido (C §3.6), alto contraste e cores forçadas (C §3.1.7),
   densidade compacta (C §3.8). Vence as demais camadas sem !important (exceto a regra global de movimento da spec). */

@layer modos {
  /* ------------------------------------------------------------ Modo TV: escala 1,5–2×, área segura, foco sempre visível */
  :root[data-modo="tv"] { font-size: clamp(24px, 1.25vw, 32px); --fs-xs: .875rem; --fs-sm: .875rem; --alvo-min: 56px; --vt-ativo: 0;
    --topbar: 3.5rem; --gutter: 1.25rem; }
  :root[data-modo="tv"] body { padding: 5vh 5vw; }
  :root[data-modo="tv"] { --fs-read: 1.25rem; }
  :root[data-modo="tv"][data-leitura="5"] { --fs-read: 1.375rem; }
  :root[data-modo="tv"] :focus-visible,
  :root[data-modo="tv"] [data-nav-focado] {
    outline: 4px solid var(--ring); outline-offset: 4px;
    box-shadow: 0 0 0 10px color-mix(in oklab, var(--ring) 30%, transparent), 0 0 0 2px var(--text);
    transform: scale(1.03); transition: transform 150ms var(--ease-out);
    border-radius: var(--r-md);
  }
  :root[data-modo="tv"] :focus:not(:focus-visible) { outline: 4px solid var(--ring); }
  :root[data-modo="tv"] .nav-principal,
  :root[data-modo="tv"] .barra-foco__nav,
  :root[data-modo="tv"] .bottom-nav,
  :root[data-modo="tv"] .busca-gatilho,
  :root[data-modo="tv"] .faixa-plano__fechar,
  :root[data-modo="tv"] .dica-atalho,
  :root[data-modo="tv"] kbd { display: none; }
  :root[data-modo="tv"] .cabecalho { background: transparent; border: 0; }
  :root[data-modo="tv"] .cabecalho__barra { max-width: none; padding: 0; height: auto; min-height: var(--topbar); }
  :root[data-modo="tv"] .faixa-plano { border-radius: var(--r-lg); margin-bottom: var(--sp-4); border: 1px solid color-mix(in oklab, var(--danger) 40%, transparent); }
  :root[data-modo="tv"] .app-corpo { gap: var(--sp-6); }
  :root[data-modo="tv"] .conteudo { padding: var(--sp-4) 0 var(--sp-8); }
  :root[data-modo="tv"] .rodape-app { display: none; }
  :root[data-modo="tv"] .btn { min-height: var(--alvo-min); max-width: 100%; }
  @media (max-width: 767.98px) { :root[data-modo="tv"] .btn { white-space: normal; } }
  :root[data-modo="tv"] .btn-icone { width: var(--alvo-min); height: var(--alvo-min); }
  :root[data-modo="tv"] .alt .riscar { opacity: 1; }
  :root[data-modo="tv"] .carrossel__setas { display: none; }
  :root[data-modo="tv"] .carrossel { --carrossel-item: 11rem; }
  :root[data-modo="tv"] .cartao-link:hover, :root[data-modo="tv"] .cartao-capa:hover { transform: none; }
  :root[data-modo="tv"] .dica[role="tooltip"] { display: none; }
  :root[data-modo="tv"] .toasts { left: auto; right: 5vw; top: 5vh; bottom: auto; transform: none; }
  /* Rail da TV: ícones que expandem com o foco (padrão de apps de TV). */
  :root[data-modo="tv"] .rail-tv {
    display: flex; flex-direction: column; gap: var(--sp-2); position: sticky; top: 5vh; align-self: flex-start;
    width: 4.25rem; padding: var(--sp-2); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border);
    transition: width var(--dur-2) var(--ease-out); overflow: hidden; z-index: var(--z-nav);
  }
  :root[data-modo="tv"] .rail-tv:focus-within { width: 15rem; box-shadow: var(--sh-3); }
  :root[data-modo="tv"] .rail-tv__item { min-width: var(--alvo-min); width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--alvo-min); padding: 0 var(--sp-3); border-radius: var(--r-md); color: var(--text-2); font-weight: 700; text-decoration: none; white-space: nowrap; }
  :root[data-modo="tv"] .rail-tv__item .i { width: 1.25rem; height: 1.25rem; flex: none; }
  :root[data-modo="tv"] .rail-tv__item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
  :root[data-modo="tv"] .rail-tv__rotulo { opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
  :root[data-modo="tv"] .rail-tv:focus-within .rail-tv__rotulo { opacity: 1; }
  :root[data-modo="tv"] .legenda-tv { display: flex; }
  .legenda-tv { display: none; position: fixed; left: 50%; bottom: 3vh; transform: translateX(-50%); gap: var(--sp-6); padding: var(--sp-2) var(--sp-6); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); font-weight: 700; color: var(--text-2); z-index: var(--z-nav); }
  .legenda-tv[hidden] { display: none; }

  /* ------------------------------------------------------------ Movimento (regra global da C §3.6) */
  @media (prefers-reduced-motion: reduce) {
    :root:not([data-movimento="completo"]) *,
    :root:not([data-movimento="completo"]) *::before,
    :root:not([data-movimento="completo"]) *::after {
      animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
  }
  :root[data-movimento="reduzido"] *,
  :root[data-movimento="reduzido"] *::before,
  :root[data-movimento="reduzido"] *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  :root[data-modo="tv"] *, :root[data-modo="tv"] *::before, :root[data-modo="tv"] *::after { animation-duration: .001ms; }

  /* Entrada suave dos cartões na primeira carga (C §3.6), só com movimento permitido e fora da TV. */
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-movimento="reduzido"]):not([data-modo="tv"]) [data-entrada] { animation: subir-entra var(--dur-3) var(--ease-out) both; }
    :root:not([data-movimento="reduzido"]):not([data-modo="tv"]) [data-entrada="2"] { animation-delay: 40ms; }
    :root:not([data-movimento="reduzido"]):not([data-modo="tv"]) [data-entrada="3"] { animation-delay: 80ms; }
    :root:not([data-movimento="reduzido"]):not([data-modo="tv"]) [data-entrada="4"] { animation-delay: 120ms; }
    :root:not([data-movimento="reduzido"]):not([data-modo="tv"]) [data-entrada="5"] { animation-delay: 160ms; }
    :root:not([data-movimento="reduzido"]):not([data-modo="tv"]) [data-entrada="6"] { animation-delay: 200ms; }
  }
  /* Esmaecer entre páginas só com mouse (24/09): no celular a transição segurava a página nova ~250 ms sem aceitar toque. */
  @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    @view-transition { navigation: auto; }
  }
  @keyframes subir-entra { from { opacity: 0; transform: translateY(8px); } }

  /* ------------------------------------------------------------ Alto contraste e cores forçadas (C §3.1.7) */
  @media (prefers-contrast: more) {
    :root:not([data-modo="tv"]) { --border: var(--border-strong); --text-3: var(--text-2); --foco-largura: 3px; }
    .cartao, .alt { border-width: 1.5px; }
  }
  @media (forced-colors: active) {
    .alt[data-marcada="true"], .alt[data-estado] { border-width: 3px; }
    .alt .letra, .cr-celula { forced-color-adjust: none; background: Canvas; color: CanvasText; border-color: CanvasText; }
    .alt[data-marcada="true"] .letra { background: Highlight; color: HighlightText; }
    .i { color: currentColor; }
    .btn { border: 1px solid ButtonText; }
  }

  /* ------------------------------------------------------------ Densidade compacta (C §3.8) — só com ponteiro fino e tela larga
     (RD 23/09: no admin a 390 px e na TV os alvos caíam para 36 px; abaixo de 1024 px e na TV valem 44/56 px). */
  @media (pointer: fine) and (min-width: 1024px) {
    :root[data-densidade="compacta"]:not([data-modo="tv"]) { --fs-base: .875rem; --alvo-min: 36px; }
    :root[data-densidade="compacta"]:not([data-modo="tv"]) .tabela td { height: 36px; padding-block: var(--sp-2); }
    :root[data-densidade="compacta"]:not([data-modo="tv"]) .cartao { padding: var(--sp-4); }
  }
}