/* Toga — design system.
   Cores conforme o Documento de Produto v1.0, seção 04. Use sempre os tokens, nunca hex solto.
   Fontes auto-hospedadas (SIL Open Font License, ver /fonts/OFL-*.txt): nada é carregado do Google. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/lora-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Marca */
  --rubi: #8E1B3A;
  --rubi-escuro: #741530;
  --rubi-claro: #F6E7EB;
  --tinta: #1E2340;
  --ouro: #E8A33D;          /* exclusivo para recompensa: XP, streak, conquistas */
  --ouro-claro: #FCF1DE;
  --papel: #FAF7F2;         /* fundo do app: nunca branco puro */

  /* Semânticas */
  --verde: #2E9E6B;         /* acerto, aprovado */
  --verde-claro: #E3F4EC;
  --coral: #D64545;         /* "revisar": nunca vermelho agressivo */
  --coral-claro: #FBE9E9;
  --azul: #3B6FD8;          /* informação */
  --azul-claro: #E8EFFC;
  --cinza: #6B6F80;         /* texto secundário */
  --linha: #E8E3DA;         /* bordas */

  /* Papéis (mudam no modo escuro) */
  --fundo: var(--papel);
  --superficie: #FFFFFF;
  --superficie-2: #F3EFE8;
  --texto: var(--tinta);
  --texto-secundario: var(--cinza);
  --borda: var(--linha);
  --menu-fundo: var(--tinta);
  --menu-texto: #C9CBDA;
  --menu-ativo: #FFFFFF;
  --sombra: 0 1px 2px rgba(30, 35, 64, .06), 0 8px 24px rgba(30, 35, 64, .06);

  /* Tipografia */
  --fonte-marca: "Poppins", system-ui, sans-serif;
  --fonte-ui: "Inter", system-ui, sans-serif;
  --fonte-lei: "Lora", Georgia, serif;

  /* Forma */
  --raio: 14px;
  --raio-pequeno: 10px;
  --raio-pilula: 999px;
  --largura-leitura: 720px;
  --largura-site: 1160px;
  --menu-largura: 248px;
  --menu-largura-recolhido: 76px;
  --barra-inferior: 64px;
}

/* Modo escuro: segue o sistema, a menos que o aluno escolha o tema claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #14172B;
    --superficie: #1E2340;
    --superficie-2: #262B4D;
    --texto: #F1EEE8;
    --texto-secundario: #A3A6B8;
    --borda: #2C3156;
    --menu-fundo: #0F1222;
    --rubi-claro: #3A1A28;
    --ouro-claro: #3A2E1A;
    --verde-claro: #16332A;
    --coral-claro: #3A1E24;
    --azul-claro: #1C2A4D;
    --sombra: none;
  }
}

:root[data-theme="dark"] {
  --fundo: #14172B;
  --superficie: #1E2340;
  --superficie-2: #262B4D;
  --texto: #F1EEE8;
  --texto-secundario: #A3A6B8;
  --borda: #2C3156;
  --menu-fundo: #0F1222;
  --rubi-claro: #3A1A28;
  --ouro-claro: #3A2E1A;
  --verde-claro: #16332A;
  --coral-claro: #3A1E24;
  --azul-claro: #1C2A4D;
  --sombra: none;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .t-marca {
  font-family: var(--fonte-marca);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(26px, 3.2vw, 34px); }
h2 { font-size: clamp(20px, 2.4vw, 24px); }
h3 { font-size: 18px; }

p { margin: 0 0 1em; }

a { color: var(--rubi); text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a { color: #E58AA3; } }
:root[data-theme="dark"] a { color: #E58AA3; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.texto-secundario { color: var(--texto-secundario); }
.pequeno { font-size: 14px; }
.leitura { max-width: var(--largura-leitura); }
.pilha { display: grid; gap: 16px; }
.linha-flex { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Cartão ---------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
}

.cartao__titulo {
  font-family: var(--fonte-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  margin: 0 0 12px;
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  font: 600 15px/1.2 var(--fonte-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

.botao--primario { background: var(--rubi); color: #fff !important; }
.botao--primario:hover { background: var(--rubi-escuro); }

.botao--secundario { background: transparent; border-color: var(--borda); color: var(--texto) !important; }
.botao--secundario:hover { border-color: var(--texto-secundario); }

.botao--fantasma { background: transparent; color: var(--texto) !important; padding-inline: 12px; }
.botao--fantasma:hover { background: var(--superficie-2); }

.botao--grande { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.botao--pequeno { min-height: 34px; padding: 6px 12px; font-size: 14px; }
.botao--bloco { width: 100%; }

.botao:disabled, .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--raio-pilula);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.chip--ouro { background: var(--ouro-claro); color: #8A5A12; }
.chip--rubi { background: var(--rubi-claro); color: var(--rubi); }
.chip--verde { background: var(--verde-claro); color: #1F7A51; }
.chip--coral { background: var(--coral-claro); color: #B33636; }
.chip--azul { background: var(--azul-claro); color: #2C58B5; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip--ouro { color: var(--ouro); }
  :root:not([data-theme="light"]) .chip--rubi { color: #E58AA3; }
  :root:not([data-theme="light"]) .chip--verde { color: #5CC596; }
  :root:not([data-theme="light"]) .chip--coral { color: #EE8080; }
  :root:not([data-theme="light"]) .chip--azul { color: #8CAEF0; }
}

/* ---------- Barra de progresso ---------- */
.progresso {
  --cor: var(--rubi);
  height: 8px;
  border-radius: var(--raio-pilula);
  background: var(--superficie-2);
  overflow: hidden;
}

.progresso__valor {
  height: 100%;
  border-radius: inherit;
  background: var(--cor);
  transition: width .4s ease;
}

.progresso--verde { --cor: var(--verde); }
.progresso--coral { --cor: var(--coral); }
.progresso--ouro { --cor: var(--ouro); }
.progresso--azul { --cor: var(--azul); }

/* ---------- Alternativa de questão ---------- */
.alternativa {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.alternativa:hover:not(:disabled) { border-color: var(--texto-secundario); }

.alternativa__letra {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--borda);
  font-weight: 600;
  font-size: 14px;
}

.alternativa__texto { padding-top: 3px; }

.alternativa--selecionada { border-color: var(--rubi); background: var(--rubi-claro); }
.alternativa--selecionada .alternativa__letra { border-color: var(--rubi); background: var(--rubi); color: #fff; }

.alternativa--correta { border-color: var(--verde); background: var(--verde-claro); }
.alternativa--correta .alternativa__letra { border-color: var(--verde); background: var(--verde); color: #fff; }

.alternativa--revisar { border-color: var(--coral); background: var(--coral-claro); }
.alternativa--revisar .alternativa__letra { border-color: var(--coral); background: var(--coral); color: #fff; }

.alternativa:disabled { cursor: default; }
.alternativa--apagada { opacity: .55; }

/* ---------- Lei seca ---------- */
.lei-seca {
  font-family: var(--fonte-lei);
  font-size: 16.5px;
  line-height: 1.65;
  background: var(--ouro-claro);
  border-left: 4px solid var(--ouro);
  border-radius: var(--raio-pequeno);
  padding: 16px 20px;
  margin: 0;
}

.lei-seca__referencia { font-weight: 600; }
.lei-seca p:last-child { margin-bottom: 0; }

/* ---------- Avisos ---------- */
.aviso {
  padding: 12px 16px;
  border-radius: var(--raio-pequeno);
  background: var(--azul-claro);
  border: 1px solid transparent;
  font-size: 15px;
}

.aviso--rascunho { background: var(--ouro-claro); border-color: var(--ouro); }
.aviso--revisar { background: var(--coral-claro); }
.aviso--sucesso { background: var(--verde-claro); }

.selo-ia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--azul);
}

/* ---------- Formulários ---------- */
.campo { display: grid; gap: 6px; }
.campo__rotulo { font-weight: 600; font-size: 14px; }

.campo__entrada {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
}

.campo__entrada:focus { outline: none; border-color: var(--rubi); }
.campo__ajuda { font-size: 13px; color: var(--texto-secundario); }

.validation-message, .campo__erro { font-size: 13px; color: var(--coral); }
.validation-errors { margin: 0; padding-left: 18px; color: var(--coral); font-size: 14px; }

.caixa-selecao { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.caixa-selecao input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--rubi); }

/* ---------- Erro de conexão do Blazor Server ---------- */
#blazor-error-ui {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--ouro-claro);
  color: var(--tinta);
  border-top: 1px solid var(--ouro);
}

#blazor-error-ui .reload { font-weight: 600; margin-left: 8px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Documentos (privacidade, termos) ---------- */
.documento { margin: 40px auto 0; padding: 0 16px; }
.documento h1 { margin-top: 24px; }
.documento h2 { margin-top: 32px; font-size: 20px; }
.documento ul { padding-left: 20px; }
.documento li { margin-bottom: 6px; }

.dados { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.dados dt { color: var(--texto-secundario); }
.dados dd { margin: 0; font-weight: 600; }

/* ---------- Estudo ---------- */
.lista-simples { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.mapa { display: grid; gap: 6px; }
.mapa__linha { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-top: 8px; }
.cabecalho-pagina { display: grid; gap: 6px; margin-bottom: 22px; }
.cabecalho-pagina h1 { margin: 0; }
.cabecalho-pagina p { margin: 0; }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.numero-grande { font-family: var(--fonte-marca); font-weight: 700; font-size: 32px; line-height: 1.1; margin: 0; }

/* ---------- Caderno ---------- */
.fonte {
  display: inline-block;
  margin-left: 4px;
  padding: 0 8px;
  border-radius: var(--raio-pilula);
  background: var(--azul-claro);
  color: var(--azul);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.aula-cartao { display: grid; gap: 6px; color: var(--texto) !important; text-decoration: none; }
.aula-cartao:hover { border-color: var(--texto-secundario); }