/* ============================================================
   aluno-theme.css — paleta canônica do front aluno (Tribunais)
   ────────────────────────────────────────────────────────────
   Suporta 2 modos:
   - Dark cálido suave (default)
   - Light Aqua sage com neon lime escuro (--data-theme="light")

   Toggle persistido em localStorage.detox_theme — pre-paint feito
   por /shared/aluno-theme-preload.js (carregado antes deste CSS
   pra evitar flash). Toggle visual injetado por
   /shared/aluno-theme-toggle.js no rodapé da sidebar.

   TODA cor de fundo, borda e texto deve sair daqui via var(--*).
   Cores hex hardcoded no HTML/CSS de páginas são proibidas —
   use os tokens (incluindo aliases s1..s4 → card..card4).
   ============================================================ */

:root {
  /* ─── Fundos / elevações ─── */
  --bg:      #161618;   /* fundo principal (body) — cálido suave */
  --chrome:  #121214;   /* header/sticky bar — 1 nível mais escuro que bg */
  --card:    #1F1F23;   /* card / elevação base */
  --card2:   #1A1A1D;   /* card alternativo (entre bg e card) */
  --card3:   #26262C;   /* elevação maior (hover, modal, popover) */
  --card4:   #33333A;   /* elevação topo (badge, dropdown) */

  /* Aliases legacy — várias páginas usam --s1..--s4 */
  --s1: var(--card);
  --s2: var(--card2);
  --s3: var(--card3);
  --s4: var(--card4);

  /* ─── Bordas ─── */
  --border:  rgba(255,255,255,.07);
  --border2: rgba(255,255,255,.13);
  --border3: rgba(255,255,255,.22);

  /* ─── Texto ─── */
  --text:  #EDECE5;     /* texto principal */
  --text2: #a8a59c;     /* secundário (label, sub) */
  --text3: #6e6c64;     /* terciário (hint, placeholder) */
  --text4: #454343;     /* quaternário (disabled, empty) */

  /* ─── Marca / acentos neon ─── */
  --ny: #D2FF02;        /* neon yellow */
  --nt: #01FFD5;        /* neon turquoise */
  --grad:    linear-gradient(90deg,  #D2FF02, #01FFD5);
  --grad135: linear-gradient(135deg, #D2FF02 0%, #01FFD5 100%);
  --grad-diag: var(--grad135);                           /* alias */
  --grad-bal:  linear-gradient(100deg, #D2FF02 0%, #01FFD5 55%);
  --grad-v:    linear-gradient(180deg, #D2FF02, #01FFD5);    /* vertical, pra barras de performance */
  --on-grad: #0a0a0a;   /* cor de texto/ícone sobre gradient neon */

  /* ─── CTA tokens — IMUTÁVEIS entre dark e light ───
     Botões de ação primária (Continuar, Começar, etc) sempre usam
     o neon original — destaca igual em ambos os modos. NÃO são
     overridos no bloco [data-theme="light"]. */
  --cta-grad:    linear-gradient(135deg, #D2FF02, #01FFD5);
  --cta-grad-h:  linear-gradient(90deg,  #D2FF02, #01FFD5);    /* horizontal */
  --cta-fg:      #0a0a0a;                                       /* texto preto sobre neon */
  --cta-shadow:  rgba(210,255,2,.25);                           /* glow opcional */

  /* ─── Surfaces semânticas ─── */
  --task-bg:        rgba(0,0,0,.32);   /* "task tile" sobre hero — afundado */
  --task-bg-hover:  rgba(0,0,0,.45);
  --streak-bg:      linear-gradient(90deg,rgba(245,158,11,.12),rgba(239,68,68,.06));
  --streak-border:  rgba(245,158,11,.3);

  /* Ícones de "ação rápida" (mod-card) — adaptam por tema */
  --mod-icon-bg:    var(--s3);          /* dark: cinza escuro */
  --mod-icon-fg:    var(--text);        /* dark: creme claro */

  /* Chip de edital (countdown "X dias pra fechar cronograma") */
  --edital-chip-bg:     var(--card);    /* dark: fica card escuro */
  --edital-chip-border: var(--border3);

  /* Sidebar nav-item hover/active — adapta no light pra não ficar invisível
     (rgba branco translúcido some em fundo claro). */
  --nav-hover-bg:   rgba(255,255,255,.03);
  --nav-active-bg:  rgba(255,255,255,.02);

  /* Gradientes semânticos (performance, status) */
  --grad-good: linear-gradient(90deg, #7CC500, #00B89A);     /* desempenho bom — verde escuro */
  --grad-bad:  linear-gradient(90deg, #ff6b6b, #ff9f43);     /* desempenho ruim — vermelho/laranja */
  --grad-gray: linear-gradient(135deg, #444, #222);          /* placeholder neutro (badge default) */

  /* ─── Semânticos ─── */
  --green:  #10b981;
  --red:    #ef4444;
  --orange: #f59e0b;
  --yellow: #fbbf24;

  /* ─── Cores de tipos de tarefa (cronograma) ─── */
  --task-aula:    #FF7AA1;   /* rosa — aula */
  --task-revisao: #C77DFF;   /* lilás — revisão */
  --task-leitura: #FF6B00;   /* laranja vivo — leitura direta */
  /* Apostila usa var(--ny) (neon yellow), Questões usa var(--nt) (neon turquoise) */

  /* ─── Tipografia ─── */
  --font-ui:      'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:    var(--font-ui);
  --font-display: var(--font-ui);
  --font-read:    'Source Serif 4','Georgia',serif;
  --font-mono:    'DM Mono','SF Mono',Menlo,monospace;
  --font:         var(--font-ui);                        /* alias legacy */

  /* ─── Misc ─── */
  --radius: 14px;
  --sidebar-w: 220px;     /* largura padrão da sidebar do aluno */
}

/* ============================================================
   LIGHT MODE — Aqua sage + neon Lime escuro
   ────────────────────────────────────────────────────────────
   Ativa com `<html data-theme="light">`. Pre-paint script lê
   localStorage.detox_theme antes do CSS render pra evitar flash.

   Paleta escolhida (mockup v2 / variação 1):
   - Fundo verde-água sutil (análogo ao ciano da marca)
   - Cards branco puro pra leitura
   - Texto verde-escuro pra harmonia
   - Neon ESCURECIDO no light: D2FF02→7FA800, 01FFD5→0B8B7C
     (alta luminance do neon original "queima" em fundo claro)
   - --on-grad fica BRANCO (gradient escuro o suficiente)

   Os tokens decorativos (--task-aula, --grad-good etc) mantém
   os mesmos hex em ambos os modos — funcionam nos dois fundos.
   ============================================================ */
[data-theme="light"] {
  /* Fundos / elevações */
  --bg:      #ECF6F2;     /* verde-água muito sutil */
  --chrome:  #DCEAE5;     /* sidebar — 1 nível mais escura */
  --card:    #FFFFFF;
  --card2:   #F2F8F5;
  --card3:   #DEEAE6;
  --card4:   #C8DCD5;

  /* Bordas — matiz verde-acinzentado pra casar com fundo */
  --border:  rgba(6,78,59,.10);
  --border2: rgba(6,78,59,.18);
  --border3: rgba(6,78,59,.30);

  /* Texto */
  --text:  #0A1F1A;       /* verde escuro quase preto */
  --text2: #356B5C;       /* teal escuro */
  --text3: #6B8B83;       /* sage médio */
  --text4: #A3BAB3;       /* sage claro (disabled) */

  /* Marca / acentos neon — escurecidos pro light */
  --ny: #7FA800;          /* lime escuro */
  --nt: #0B8B7C;          /* teal escuro */
  --grad:    linear-gradient(90deg,  #7FA800, #0B8B7C);
  --grad135: linear-gradient(135deg, #7FA800 0%, #0B8B7C 100%);
  --grad-bal:  linear-gradient(100deg, #7FA800 0%, #0B8B7C 55%);
  --grad-v:    linear-gradient(180deg, #7FA800, #0B8B7C);
  --on-grad: #FFFFFF;     /* branco sobre gradient escurecido */

  /* Gradientes semânticos — versões mais sóbrias pro light */
  --grad-good: linear-gradient(90deg, #4A9A2C, #0B8B7C);
  --grad-bad:  linear-gradient(90deg, #DC2626, #EA580C);
  --grad-gray: linear-gradient(135deg, #94A3B8, #64748B);

  /* Semânticos — tons LIGEIRAMENTE mais escuros pra contraste em fundo claro */
  --green:  #059669;
  --red:    #DC2626;
  --orange: #EA580C;
  --yellow: #CA8A04;

  /* Surfaces semânticas — adaptadas pra fundo claro
     (preto translúcido fica cinza-feio em fundo claro; usa tom da paleta) */
  --task-bg:        rgba(11,139,124,.07);    /* teal translúcido sutil */
  --task-bg-hover:  rgba(11,139,124,.14);
  --streak-bg:      linear-gradient(90deg,rgba(234,88,12,.20),rgba(220,38,38,.12));
  --streak-border:  rgba(234,88,12,.55);

  /* Mod-icons: verde-água claro com texto preto (não usa lime escuro do --ny) */
  --mod-icon-bg:    #DCEAE4;
  --mod-icon-fg:    var(--cta-fg);   /* preto */

  /* Chip edital no light: verde claro pedido por Bruno */
  --edital-chip-bg:     #E7F3EF;
  --edital-chip-border: rgba(11,139,124,.32);

  /* Sidebar nav-item hover/active no light: usa preto translúcido pra ser visível */
  --nav-hover-bg:   rgba(11,139,124,.10);
  --nav-active-bg:  rgba(11,139,124,.14);
}

/* Respeita preferência do SO quando usuário ainda não escolheu */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg:      #ECF6F2;
    --chrome:  #DCEAE5;
    --card:    #FFFFFF;
    --card2:   #F2F8F5;
    --card3:   #DEEAE6;
    --card4:   #C8DCD5;
    --border:  rgba(6,78,59,.10);
    --border2: rgba(6,78,59,.18);
    --border3: rgba(6,78,59,.30);
    --text:  #0A1F1A;
    --text2: #356B5C;
    --text3: #6B8B83;
    --text4: #A3BAB3;
    --ny: #7FA800;
    --nt: #0B8B7C;
    --grad:    linear-gradient(90deg,  #7FA800, #0B8B7C);
    --grad135: linear-gradient(135deg, #7FA800 0%, #0B8B7C 100%);
    --grad-bal:  linear-gradient(100deg, #7FA800 0%, #0B8B7C 55%);
    --grad-v:    linear-gradient(180deg, #7FA800, #0B8B7C);
    --on-grad: #FFFFFF;
    --grad-good: linear-gradient(90deg, #4A9A2C, #0B8B7C);
    --grad-bad:  linear-gradient(90deg, #DC2626, #EA580C);
    --grad-gray: linear-gradient(135deg, #94A3B8, #64748B);
    --green:  #059669;
    --red:    #DC2626;
    --orange: #EA580C;
    --yellow: #CA8A04;
    --nav-hover-bg:   rgba(11,139,124,.10);
    --nav-active-bg:  rgba(11,139,124,.14);
  }
}

/* ============================================================
   SIDEBAR — comportamento e cor padrão pra todas as páginas
   ────────────────────────────────────────────────────────────
   Aplica position:fixed + bg --chrome SOMENTE em sidebars que
   são filhas DIRETAS do body. Páginas com wrappers próprios
   (cronograma, questoes) gerenciam sua sidebar localmente —
   ajustadas individualmente pra cor canônica.

   `position: fixed` (em vez de sticky) porque várias páginas
   usam `html,body{height:100%}` que faz o <html> virar o
   scroll container, quebrando sticky no body.
   ============================================================ */
body > .sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--chrome);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  z-index: 100;
  overflow-y: auto;
}

/* Quando body é grid (220px 1fr), a sidebar fixed sai do flow. */
body > main.main { grid-column: 2; }

/* ============================================================
   SIDEBAR — força tokens adaptativos em estruturas hardcoded
   ────────────────────────────────────────────────────────────
   Várias páginas têm rgba(255,255,255,.x) hardcoded em sb-brand,
   sb-footer e nav-item — invisível em fundo claro. Specificity
   `body .x` (0,1,1) vence o local (0,1,0) sem !important.
   ============================================================ */
body .sb-brand { border-bottom-color: var(--border); }
body .sb-footer { border-top-color: var(--border); }
body .nav-item { color: var(--text2); }
body .nav-item:hover { background: var(--nav-hover-bg); color: var(--text); }
body .nav-item.active { background: var(--nav-active-bg); color: var(--text); }

/* ============================================================
   MOBILE — fundação compartilhada (≤ 899px)
   ────────────────────────────────────────────────────────────
   Todas as páginas do aluno usam body grid 220px 1fr no desktop.
   Em mobile/tablet portrait, força 1 coluna, sidebar empilha no
   topo, main ganha padding compacto. Selectors mais específicos
   que os inline da página pra dominar cascade.
   ============================================================ */
@media (max-width: 899px) {
  /* `html body` (0,0,2) > `body` (0,0,1) — domina o body grid local */
  html body {
    grid-template-columns: 1fr !important;
    height: auto;
  }

  /* Sidebar vira drawer (hambúrguer) em mobile — funciona pra todas as
     páginas, inclusive as com wrappers (cronograma/questoes), porque o
     seletor casa pela TAG aside.sidebar (não exige ser filha direta do body). */
  aside.sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 84vw !important; max-width: 320px !important;
    height: 100vh !important;
    z-index: 1000 !important;
    background: var(--chrome) !important;
    border-right: 1px solid var(--border) !important;
    transform: translateX(-105%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow: 2px 0 24px rgba(0,0,0,.45);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex !important;
  }
  aside.sidebar.open {
    transform: translateX(0);
  }
  .sb-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .sb-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }
  /* Quando drawer aberto, trava scroll do body */
  body.sb-open { overflow: hidden; }

  body > main.main { grid-column: 1; padding: 18px 16px 56px; }

  /* Cards e seções com padding generoso encolhem em mobile */
  .card, .section, .stat-card, .duvida-card, .mod-card {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Stats grids com 3+ colunas viram 1 ou 2 em mobile */
  .stats-row, .stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Modais não devem encostar nas bordas da tela */
  .modal { width: calc(100% - 24px) !important; padding: 20px !important; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }

  /* Form fields ocupam 100% */
  .field-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 12px 0 !important; }

  /* Texto que tende a transbordar */
  .page-title { font-size: 22px !important; }
  h1 { font-size: 24px !important; }
  h2 { font-size: 18px !important; }
}

/* Mobile pequeno (telas <= 360px) — celulares antigos */
@media (max-width: 360px) {
  body > main.main { padding: 14px 12px 50px; }
  .stats-row, .stats {
    grid-template-columns: 1fr !important;
  }
}