/* visual.css — "visual novo" (pedido do Roger em 10/10/2026: telas rústicas, cara de IA, leitura cansativa). Vale só com
   :root[data-visual="novo"] (prévia por conta ou por ?visual=novo; ver _visual() em _shell.php), então o visual clássico continua
   intacto até a aprovação. Camada "modos" (a última): vence as telas sem !important.
   O que muda: fonte Figtree (moderna, espaço natural entre palavras: dispensa o acréscimo de word-spacing da Jakarta) na interface
   e na leitura; neutros frios (cinza-azulado e branco) no lugar do creme/marrom; texto da questão alinhado à esquerda, sem
   hifenização, numa coluna de leitura de ~76 caracteres; cartões com contorno e sombra leves; menu com pílula no item ativo;
   faixa do plano sem o vermelho de alarme. As paletas de destaque (esmeralda, oceano…) e as preferências do aluno (tema escuro,
   tamanho da leitura, fonte legível, TV) continuam valendo. */
@layer base {
  @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url('/assets/estaveis/fontes/v1/figtree-var-latin.woff2') format('woff2'); }
  @font-face { font-family: 'Figtree'; font-style: italic; font-weight: 300 900; font-display: swap;
    src: url('/assets/estaveis/fontes/v1/figtree-italic-var-latin.woff2') format('woff2'); }
}

@layer modos {
  /* ------------------------------------------------------------------ tipografia */
  :root[data-visual="novo"] {
    --font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-read: var(--font-ui);
    --espaco-palavras: 0em; --espaco-palavras-titulo: 0em; --espaco-palavras-leitura: 0em;
    --lh-read: 1.72;
    --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  }
  :root[data-visual="novo"][data-fonte="legivel"] { --font-ui: var(--font-legivel); --font-read: var(--font-legivel); }
  :root[data-visual="novo"] h1, :root[data-visual="novo"] h2 { font-weight: 750; letter-spacing: -0.025em; }
  :root[data-visual="novo"] h3, :root[data-visual="novo"] h4 { font-weight: 700; letter-spacing: -0.01em; }

  /* ------------------------------------------------------------------ neutros (claro): cinza-azulado e branco */
  :root[data-visual="novo"]:not([data-modo="tv"]) {
    --bg: #F4F6FA;
    --surface: #FFFFFF;
    --surface-2: #F1F4F9;
    --surface-3: #E7ECF3;
    --border: #E1E7EF;
    --border-strong: #8592A6;
    --text: #0F1728;
    --text-2: #475467;
    --text-3: #5F6B7E;
    --sh-1: 0 1px 2px rgb(16 24 40 / .05);
    --sh-2: 0 1px 3px rgb(16 24 40 / .06), 0 12px 28px -14px rgb(16 24 40 / .16);
    --sh-3: 0 4px 8px -2px rgb(16 24 40 / .08), 0 28px 56px -16px rgb(16 24 40 / .28);
    --scrim: rgb(15 23 40 / .5);
    --vidro: rgb(255 255 255 / .84);
    --div-0: #E7ECF3;
  }
  /* neutros (escuro): azul-noite em vez de marrom */
  @media (prefers-color-scheme: dark) {
    :root[data-visual="novo"]:not([data-tema="claro"]):not([data-modo="tv"]) {
      --bg: #0B111C;
      --surface: #111927;
      --surface-2: #172133;
      --surface-3: #1E2A3F;
      --border: #243149;
      --border-strong: #5E6E88;
      --text: #E8EDF5;
      --text-2: #B3BFD2;
      --text-3: #8D9BB2;
      --sh-1: 0 1px 2px rgb(0 0 0 / .4);
      --sh-2: 0 1px 3px rgb(0 0 0 / .45), 0 12px 28px -14px rgb(0 0 0 / .6);
      --sh-3: 0 4px 8px -2px rgb(0 0 0 / .5), 0 28px 56px -16px rgb(0 0 0 / .7);
      --scrim: rgb(3 7 15 / .66);
      --vidro: rgb(17 25 39 / .84);
      --div-0: #1E2A3F;
    }
  }
  :root[data-visual="novo"][data-tema="escuro"]:not([data-modo="tv"]) {
    --bg: #0B111C;
    --surface: #111927;
    --surface-2: #172133;
    --surface-3: #1E2A3F;
    --border: #243149;
    --border-strong: #5E6E88;
    --text: #E8EDF5;
    --text-2: #B3BFD2;
    --text-3: #8D9BB2;
    --sh-1: 0 1px 2px rgb(0 0 0 / .4);
    --sh-2: 0 1px 3px rgb(0 0 0 / .45), 0 12px 28px -14px rgb(0 0 0 / .6);
    --sh-3: 0 4px 8px -2px rgb(0 0 0 / .5), 0 28px 56px -16px rgb(0 0 0 / .7);
    --scrim: rgb(3 7 15 / .66);
    --vidro: rgb(17 25 39 / .84);
    --div-0: #1E2A3F;
  }

  /* fundo com um brilho discreto da cor de destaque no alto da página */
  :root[data-visual="novo"]:not([data-modo="tv"]) body {
    background:
      radial-gradient(1100px 520px at 12% -180px, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%),
      radial-gradient(900px 480px at 100% -220px, color-mix(in oklab, var(--info) 7%, transparent), transparent 70%),
      var(--bg);
    background-repeat: no-repeat;
  }

  /* ------------------------------------------------------------------ cabeçalho, menu e faixa do plano */
  :root[data-visual="novo"] .cabecalho { background: var(--vidro); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
    border-bottom-color: color-mix(in oklab, var(--border) 70%, transparent); }
  :root[data-visual="novo"] .nav-principal { background: var(--vidro); border-bottom-color: color-mix(in oklab, var(--border) 70%, transparent); }
  :root[data-visual="novo"] .nav-principal__lista { padding-block: 6px; gap: 2px; }
  :root[data-visual="novo"] .nav-item { min-height: 40px; border-radius: var(--r-full); padding: 0 14px; font-weight: 600; font-size: .9375rem; }
  :root[data-visual="novo"] .nav-item::after { display: none; }
  :root[data-visual="novo"] .nav-item:hover { background: var(--surface-2); }
  :root[data-visual="novo"] .nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
  :root[data-visual="novo"] .faixa-plano {
    background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 10%, var(--surface)), color-mix(in oklab, var(--info) 8%, var(--surface)));
    border-bottom-color: color-mix(in oklab, var(--accent) 18%, transparent);
  }
  :root[data-visual="novo"] .faixa-plano__icone { color: var(--accent-text); background: color-mix(in oklab, var(--accent) 14%, var(--surface)); }
  :root[data-visual="novo"] .faixa-plano__texto strong, :root[data-visual="novo"] .faixa-plano__mini strong { color: var(--accent-text); }
  :root[data-visual="novo"] .faixa-plano__acao { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--accent) 70%, transparent); }
  :root[data-visual="novo"] .faixa-plano__acao:hover { background: var(--accent-hover); }

  /* ------------------------------------------------------------------ computador (≥ 1280): menu lateral fixo */
  /* Uma barra só no topo (marca, busca, conta com a pílula do plano, REQUISITOS 23/09) e os menus grandes numa coluna à esquerda,
     sempre à vista; o medidor "Hoje: X de 20" vai para o pé da coluna e a faixa colorida do plano sai (o plano já está no nome). */
  @media (min-width: 1280px) {
    :root[data-visual="novo"]:not([data-modo="tv"]) { --lateral: 252px; }
    :root[data-visual="novo"]:not([data-modo="tv"]) body:has(> .nav-principal) > .faixa-plano { display: none; }
    :root[data-visual="novo"]:not([data-modo="tv"]) .cabecalho:has(+ .nav-principal) { position: sticky; top: 0; }
    :root[data-visual="novo"]:not([data-modo="tv"]) .cabecalho:has(+ .nav-principal) .cabecalho__barra { max-width: none; padding-left: var(--sp-5); }
    :root[data-visual="novo"]:not([data-modo="tv"]) .cabecalho:has(+ .nav-principal) .marca { width: calc(var(--lateral) - var(--sp-5) - var(--sp-3)); justify-content: flex-start; }
    :root[data-visual="novo"]:not([data-modo="tv"]) .nav-principal {
      position: fixed; top: calc(var(--topbar) + 1px); left: 0; bottom: 0; width: var(--lateral);
      border-bottom: 0; border-right: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
      overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    }
    :root[data-visual="novo"]:not([data-modo="tv"]) .nav-principal__lista {
      flex-direction: column; align-items: stretch; max-width: none; margin: 0; min-height: 100%; padding: var(--sp-4) var(--sp-3) var(--sp-5); gap: 2px;
    }
    :root[data-visual="novo"]:not([data-modo="tv"]) .nav-item { width: 100%; min-height: 46px; border-radius: var(--r-md); padding: 0 var(--sp-3); gap: var(--sp-3); font-size: 1rem; }
    :root[data-visual="novo"]:not([data-modo="tv"]) .nav-item .i { width: 1.25rem; height: 1.25rem; }
    :root[data-visual="novo"]:not([data-modo="tv"]) .nav-principal__mais { margin: var(--sp-1) 0 0; }
    :root[data-visual="novo"]:not([data-modo="tv"]) .nav-principal__mais > .nav-item > .i:last-child { margin-left: auto; }
    :root[data-visual="novo"]:not([data-modo="tv"]) .nav-principal__mais .menu-suspenso { left: 0; right: auto; width: 100%; min-width: 0; transform-origin: top left; }
    :root[data-visual="novo"]:not([data-modo="tv"]) .nav-principal__cota {
      display: flex; margin: auto 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); white-space: normal;
      background: linear-gradient(135deg, var(--accent-soft), color-mix(in oklab, var(--info) 8%, var(--surface)));
      color: var(--accent-text); font-weight: 650; font-size: var(--fs-sm);
    }
    /* só onde o menu lateral existe (layout app): a prova (layout foco), o admin e as telas públicas ficam como estão */
    :root[data-visual="novo"]:not([data-modo="tv"]) .nav-principal ~ .app-corpo, :root[data-visual="novo"]:not([data-modo="tv"]) .nav-principal ~ .rodape-app { margin-left: var(--lateral); }
    :root[data-visual="novo"]:not([data-modo="tv"]) .nav-principal ~ .app-corpo > .conteudo { padding-top: var(--sp-8); }
  }
  /* celular: a faixa do plano numa linha só, discreta; a questão (de borda a borda) encosta no cabeçalho, sem a faixa de fundo */
  @media (max-width: 767.98px) {
    :root[data-visual="novo"] .faixa-plano { min-height: 0; padding-block: 6px; font-size: var(--fs-xs); }
    :root[data-visual="novo"] .corpo-questao .app-corpo > .conteudo { padding-top: 0; }
    :root[data-visual="novo"] .corpo-questao .questao { border-top: 0; }
  }

  /* ------------------------------------------------------------------ leitura (questão, alternativas, comentários) */
  /* À esquerda e sem hifenizar: o justificado abria buracos entre as palavras (pior no celular) e cansava a leitura. */
  :root[data-visual="novo"] .leitura, :root[data-visual="novo"] .alt .txt, :root[data-visual="novo"] .ta-j,
  :root[data-visual="novo"] .questao__enunciado, :root[data-visual="novo"] .questao__texto-associado > .leitura,
  :root[data-visual="novo"] .coment__texto { text-align: left; hyphens: manual; }
  :root[data-visual="novo"] .leitura { letter-spacing: 0; }
  /* coluna de leitura da questão: ~76 caracteres por linha (era 1180 px, mais de 130) */
  :root[data-visual="novo"] .corpo-questao .questao-layout > * { max-width: 860px; }
  @media (min-width: 1600px) {
    :root[data-visual="novo"] .corpo-questao .questao-layout { grid-template-columns: minmax(0, 860px) 400px; gap: var(--sp-8); }
  }
  :root[data-visual="novo"] dialog.dialogo { border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
}

/* Componentes e telas: na MESMA camada deles e com especificidade zero (:where), para os estados (marcada, certa, errada,
   pressionado, destaque, cor da situação na revisão…) continuarem vencendo. Regra do arquivo: nada de estado na camada modos. */
@layer components {
  :where(:root[data-visual="novo"]) .cartao { box-shadow: var(--sh-1); }
  :where(:root[data-visual="novo"]) .btn { font-weight: 650; letter-spacing: -0.005em; }
  :where(:root[data-visual="novo"]) .btn-pri {
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, white), var(--accent));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 1px 2px rgb(16 24 40 / .12), 0 8px 18px -8px color-mix(in oklab, var(--accent) 65%, transparent);
  }
  :where(:root[data-visual="novo"]) .btn-sec { box-shadow: var(--sh-1); }
  :where(:root[data-visual="novo"]) .tag { border-radius: var(--r-full); padding: 0 10px; font-weight: 650; }
  :where(:root[data-visual="novo"]) .seg { border-color: transparent; border-radius: var(--r-full); }
  :where(:root[data-visual="novo"]) .seg > a, :where(:root[data-visual="novo"]) .seg > button { border-radius: var(--r-full); }
  /* alternativas: caixa limpa com sombra leve; a letra num círculo suave (os estados mantêm as cores deles) */
  :where(:root[data-visual="novo"]) .alts { gap: 10px; }
  :where(:root[data-visual="novo"]) .alt { box-shadow: var(--sh-1); }
  :where(:root[data-visual="novo"]) .alt .letra { border-color: var(--border); background: var(--surface-2); }
}
@layer telas {
  :where(:root[data-visual="novo"]) .questao { box-shadow: var(--sh-2); }
  :where(:root[data-visual="novo"]) .recurso:not([data-destaque]) { box-shadow: var(--sh-1); }
  :where(:root[data-visual="novo"]) .revisar-mapa { box-shadow: var(--sh-2); }
}