/* =============================================================================
   CTL Hub Quiz — base do design system (padrão Cobalt)
   -----------------------------------------------------------------------------
   Reset, tipografia, layout de casca, botões, campos, cartões, tabelas, selos,
   toasts e as quatro animações do PDF (pop, rise, floaty, shake).

   Nada de cor fixa aqui: tudo vem de tokens.css.
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  /* O PDF audita 320 px sem rolagem lateral (seção 2.2). */
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  font-weight: var(--peso-normal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transicao), color var(--transicao);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  color: var(--tinta-titulo);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--texto-3xl); }
h2 { font-size: var(--texto-2xl); }
h3 { font-size: var(--texto-xl); }
h4 { font-size: var(--texto-lg); }

p { text-wrap: pretty; }

a {
  color: var(--apoio);
  text-decoration: none;
  transition: color var(--transicao);
}

a:hover { color: var(--marca); }

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol { list-style: none; }

/* Foco sempre visível no teclado, nunca no clique de mouse. */
:focus-visible {
  outline: 2px solid var(--apoio);
  outline-offset: 2px;
  border-radius: var(--raio-xs);
}

:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------- acessibilidade */

/* Utilitario de "so para leitor de tela". O `!important` nao e preguica: esta
   classe e sempre combinada com a classe do componente (`class="tabela
   so-leitor"`, a tabela de dados que acompanha cada grafico SVG) e perde a
   disputa por vir antes no arquivo -- `.tabela { width: 100% }`, na secao de
   tabelas, tem a mesma especificidade e a ultima declaracao vence. Sem o
   `!important` a tabela invisivel nascia com a largura da pagina, e por ser
   `position: absolute` dentro de um `<figure>` estreito o canto direito dela
   passava da tela: 37 px de rolagem lateral em /painel/ e no relatorio da
   sala, invisiveis porque o `clip-path` esconde o conteudo mas nao a area de
   rolagem. Uma classe cujo unico trabalho e esconder precisa ganhar sempre. */
.so-leitor {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pular-para-conteudo {
  position: absolute;
  top: var(--e2);
  left: var(--e2);
  z-index: 200;
  padding: var(--e2) var(--e4);
  background: var(--marca);
  color: var(--tinta-sobre-marca);
  border-radius: var(--raio);
  transform: translateY(-160%);
  transition: transform var(--transicao);
}

.pular-para-conteudo:focus {
  transform: translateY(0);
  color: var(--tinta-sobre-marca);
}

/* ------------------------------------------------------------------ animações
   As quatro do PDF seção 4.2. Todas curtas, e desligadas por completo quando o
   usuário pede menos movimento.                                               */

@keyframes pop {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes rise {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes shake {
  0%, 100%    { transform: translateX(0); }
  20%, 60%    { transform: translateX(-6px); }
  40%, 80%    { transform: translateX(6px); }
}

@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.anim-pop   { animation: pop 300ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.anim-rise  { animation: rise 320ms var(--transicao) both; }
.anim-floaty { animation: floaty 5s ease-in-out infinite; }
.anim-shake { animation: shake 420ms ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------- fundo pontilhado */

.pontilhado {
  position: relative;
  isolation: isolate;
}

.pontilhado::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--pontos) 1px, transparent 1px);
  background-size: var(--pontos-tamanho) var(--pontos-tamanho);
  mask-image: radial-gradient(ellipse at 50% 0%, var(--mascara) 30%, transparent 75%);
  pointer-events: none;
}

/* ----------------------------------------------------------------- utilitários */

.container {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  /* Respiro lateral de 16 px, exigido pela auditoria de 320 px. */
  padding-inline: var(--e4);
}

.pilha       { display: flex; flex-direction: column; gap: var(--e4); }
.pilha-sm    { display: flex; flex-direction: column; gap: var(--e2); }
.linha       { display: flex; align-items: center; gap: var(--e3); }
.linha-fim   { display: flex; align-items: center; gap: var(--e3); justify-content: flex-end; }
.linha-entre { display: flex; align-items: center; gap: var(--e3); justify-content: space-between; flex-wrap: wrap; }
.envolve     { flex-wrap: wrap; }
.cresce      { flex: 1; }
.centro      { text-align: center; }

.fraco  { color: var(--tinta-fraca); }
.mono   { font-family: var(--fonte-mono); }
.forte  { font-weight: var(--peso-semi); }
.titulo { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); }

.texto-xs { font-size: var(--texto-xs); }
.texto-sm { font-size: var(--texto-sm); }
.texto-lg { font-size: var(--texto-lg); }

.oculto { display: none !important; }

/* -------------------------------------------------------------------- marca */

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-lg);
  font-weight: var(--peso-black);
  letter-spacing: -0.03em;
  color: var(--tinta-titulo);
}

.marca__quadrado {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--raio);
  /* Degradê marca→teal: a assinatura visual do Cobalt. */
  background: linear-gradient(135deg, var(--marca), var(--teal));
}

/* O PNG do logo é quadrado, então a caixa também é. */
.marca__logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.marca__nome {
  white-space: nowrap;
}

.marca__nome em {
  font-style: normal;
  color: var(--apoio);
}

/* Abaixo de 380 px só o logo fica: o wordmark empurraria a barra. */
@media (max-width: 380px) {
  .marca__nome { display: none; }
}

.marca:hover { color: var(--tinta-titulo); }

/* ------------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 0.6875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  background: var(--marca);
  color: var(--tinta-sobre-marca);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  font-weight: var(--peso-semi);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao),
    background var(--transicao), border-color var(--transicao),
    color var(--transicao);
}

.btn:hover:not(:disabled) {
  color: var(--tinta-sobre-marca);
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}

.btn:active:not(:disabled) { transform: translateY(0); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--fantasma {
  background: var(--superficie);
  border-color: var(--linha);
  color: var(--tinta);
}

.btn--fantasma:hover:not(:disabled) {
  border-color: var(--apoio);
  color: var(--apoio);
}

.btn--apoio { background: var(--apoio); }
.btn--perigo { background: var(--erro); }
.btn--sucesso { background: var(--sucesso); }

.btn--plano {
  background: transparent;
  color: var(--tinta-fraca);
}

.btn--plano:hover:not(:disabled) {
  background: var(--superficie-2);
  color: var(--tinta);
  transform: none;
  box-shadow: none;
}

.btn--sm { padding: 0.5rem 0.9375rem; font-size: var(--texto-sm); }
.btn--lg { padding: 0.9375rem 1.875rem; font-size: var(--texto-md); }
.btn--cheio { width: 100%; }

.btn--icone {
  padding: 0;
  width: 2.375rem;
  height: 2.375rem;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------- campos */

.campo { display: flex; flex-direction: column; gap: var(--e2); }

.campo__rotulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--tinta);
}

.campo__dica {
  font-size: var(--texto-xs);
  color: var(--tinta-fraca);
}

.campo__erro {
  font-size: var(--texto-xs);
  color: var(--erro);
  font-weight: var(--peso-medio);
}

.entrada,
.selecao,
.area {
  width: 100%;
  padding: 0.8125rem 0.9375rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  color: var(--tinta);
  font-size: var(--texto-base);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.area { resize: vertical; min-height: 5rem; line-height: 1.5; }

.entrada::placeholder,
.area::placeholder { color: var(--tinta-fraca); }

.entrada:focus,
.selecao:focus,
.area:focus {
  outline: none;
  border-color: var(--apoio);
  box-shadow: var(--sombra-foco);
}

.entrada[aria-invalid="true"],
.area[aria-invalid="true"] { border-color: var(--erro); }

.entrada--codigo {
  font-family: var(--fonte-mono);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-forte);
  text-align: center;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}

.marcador {
  display: flex;
  align-items: center;
  gap: var(--e2);
  /* 24 px e o alvo minimo do WCAG 2.5.8. O quadradinho do checkbox tem 16 px;
     quem da tamanho ao alvo e o rotulo, que aciona o controle junto -- mas a
     altura dele vinha da linha de texto, 21 px. */
  min-height: 1.5rem;
  font-size: var(--texto-sm);
  color: var(--tinta-fraca);
  cursor: pointer;
}

.marcador input { accent-color: var(--apoio); width: 1rem; height: 1rem; }

/* No toque, campo com fonte menor que 16 px faz o Safari do iPhone dar zoom ao
   receber foco -- e ele nao volta sozinho. O desenho segue com --texto-base
   (15 px) no mouse, onde o problema nao existe. */
@media (pointer: coarse) {
  .entrada,
  .selecao,
  .area { font-size: 1rem; }
}

/* ------------------------------------------------------------------ cartões */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-xl);
  padding: var(--e5);
}

.cartao--2xl { border-radius: var(--raio-2xl); }
.cartao--nu { padding: 0; overflow: hidden; }
.cartao--elevado { box-shadow: var(--sombra-lg); }

.cartao--hover {
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}

.cartao--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-md);
  border-color: var(--apoio);
}

.cartao__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  color: var(--tinta-titulo);
}

/* --------------------------------------------------------------- stat cards */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e4);
}

.stat {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: var(--e4);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.stat:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }

.stat__rotulo {
  display: block;
  font-size: var(--texto-sm);
  color: var(--tinta-fraca);
}

.stat__valor {
  display: block;
  margin: var(--e1) 0 var(--e2);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-black);
  color: var(--tinta-titulo);
  font-variant-numeric: tabular-nums;
}

.stat__barra {
  height: 5px;
  border-radius: 3px;
  background: var(--superficie-2);
  overflow: hidden;
}

.stat__barra > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--marca), var(--teal));
}

/* -------------------------------------------------------------------- selos */

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 0.1875rem 0.6875rem;
  border-radius: var(--raio-pill);
  background: var(--superficie-2);
  color: var(--tinta-fraca);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  white-space: nowrap;
}

.selo--ok     { background: var(--sucesso-suave); color: var(--sucesso); }
.selo--erro   { background: var(--erro-suave); color: var(--erro); }
.selo--alerta { background: var(--alerta-suave); color: var(--alerta); }
.selo--info   { background: var(--info-suave); color: var(--info); }
.selo--marca  { background: var(--marca-suave); color: var(--marca); }

/* Peso da questão: 1x, 2x, 3x, 5x. */
.selo--peso-1 { background: color-mix(in srgb, var(--peso-1) 14%, transparent); color: var(--peso-1); }
.selo--peso-2 { background: color-mix(in srgb, var(--peso-2) 14%, transparent); color: var(--peso-2); }
.selo--peso-3 { background: color-mix(in srgb, var(--peso-3) 14%, transparent); color: var(--peso-3); }
.selo--peso-5 { background: color-mix(in srgb, var(--peso-5) 16%, transparent); color: var(--peso-5); }

/* ------------------------------------------------------------------- tabelas */

.tabela-envolve {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-xl);
  overflow: hidden;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.tabela th {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-fraca);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tabela td {
  padding: var(--e4);
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}

.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--superficie-2); }

.tabela__num { font-variant-numeric: tabular-nums; text-align: right; }

/* No celular a tabela vira cartões (PDF seção 2.2). */
@media (max-width: 640px) {
  /* A `<table>` e o `<tbody>` precisam sair do modo de tabela junto com as
     linhas. Enquanto eles continuavam `display: table` / `table-row-group`, o
     algoritmo de tabela seguia mandando: ele calcula a largura minima a partir
     do conteudo das celulas e `width: 100%` vira piso, nao teto. Media 359 px
     dentro de um `.tabela-envolve` de 288 px em 320 px de tela -- e como o
     envolve tem `overflow: hidden`, as colunas da direita eram simplesmente
     cortadas, sem rolagem que as alcancasse. */
  .tabela--cartoes,
  .tabela--cartoes tbody { display: block; }

  .tabela--cartoes thead { display: none; }

  .tabela--cartoes tr {
    display: grid;
    gap: var(--e1);
    padding: var(--e4);
    border-bottom: 1px solid var(--linha);
  }

  .tabela--cartoes td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e1) 0;
    border: none;
  }

  .tabela--cartoes td::before {
    content: attr(data-rotulo);
    /* O rotulo e a celula disputam a largura da linha: sem isto, um valor
       longo e sem espaco (titulo de quiz, apelido colado) espreme o rotulo e
       "QUIZ" quebra em "QU/IZ". Quem cede espaco e o valor, que sabe quebrar. */
    flex-shrink: 0;
    color: var(--tinta-fraca);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* O valor fica com o resto e quebra dentro da palavra se for preciso. */
  .tabela--cartoes td {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .tabela--cartoes .tabela__num { text-align: left; }
}

/* --------------------------------------------------------------------- abas */

.abas {
  display: flex;
  gap: var(--e1);
  padding: var(--e1);
  background: var(--superficie-2);
  border-radius: var(--raio-md);
}

.abas__item {
  flex: 1;
  padding: 0.5rem 0.875rem;
  border: none;
  border-radius: var(--raio);
  background: transparent;
  color: var(--tinta-fraca);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-align: center;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
  white-space: nowrap;
}

.abas__item:hover { color: var(--tinta); }

.abas__item[aria-selected="true"],
.abas__item.ativa {
  background: var(--superficie);
  color: var(--tinta-titulo);
  font-weight: var(--peso-semi);
  box-shadow: var(--sombra-sm);
}

/* No celular as abas viram grade (PDF seção 2.2). */
@media (max-width: 560px) {
  .abas { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .abas__item { flex: none; }
}

/* ------------------------------------------------------------------ avatares */

.avatar {
  border-radius: var(--raio-pill);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--superficie-2);
}

.avatar--xs { width: 28px; height: 28px; }
.avatar--sm { width: 36px; height: 36px; }
.avatar--md { width: 48px; height: 48px; }
.avatar--lg { width: 72px; height: 72px; }
.avatar--xl { width: 128px; height: 128px; }

.avatar-iniciais {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-pill);
  background: linear-gradient(135deg, var(--marca), var(--teal));
  color: var(--tinta-sobre-cor);
  font-weight: var(--peso-semi);
  font-size: var(--texto-sm);
  flex-shrink: 0;
}

/* ------------------------------------------------------------------- avisos */

.avisos {
  position: fixed;
  bottom: var(--e6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  width: min(420px, calc(100vw - 2 * var(--e4)));
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-md);
  background: var(--marca);
  color: var(--tinta-sobre-marca);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  box-shadow: var(--sombra-lg);
  animation: rise 320ms var(--transicao) both;
}

.aviso--error,
.aviso--erro { background: var(--erro); color: var(--tinta-sobre-cor); }
.aviso--success { background: var(--sucesso); color: var(--tinta-sobre-cor); }
.aviso--warning { background: var(--alerta); color: var(--tinta-sobre-alerta); }

.aviso__fechar {
  margin-left: auto;
  border: none;
  background: none;
  color: inherit;
  font-size: var(--texto-md);
  cursor: pointer;
  opacity: 0.8;
  line-height: 1;
}

.aviso__fechar:hover { opacity: 1; }

/* -------------------------------------------------------- botão de tema fixo
   O PDF pede um botão flutuante fixo no canto inferior direito (seção 2.1).   */

.tema-botao,
.som-botao {
  position: fixed;
  bottom: var(--e4);
  z-index: 140;
  width: 2.875rem;
  height: 2.875rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pill);
  background: var(--superficie);
  color: var(--tinta);
  font-size: var(--texto-md);
  cursor: pointer;
  box-shadow: var(--sombra-md);
  transition: transform var(--transicao), border-color var(--transicao);
}

.tema-botao { right: var(--e4); }

/* O botão de som fica imediatamente à esquerda do de tema, sem sobrepor. */
.som-botao { right: calc(var(--e4) + 2.875rem + var(--e2)); }

.tema-botao:hover,
.som-botao:hover {
  transform: translateY(-2px);
  border-color: var(--apoio);
}

.tema-botao__icone,
.som-botao__icone {
  pointer-events: none;
  line-height: 1;
}

/* Mudo: o ícone apaga, mas o botão continua legível. */
.som-botao[aria-pressed="false"] .som-botao__icone { opacity: 0.55; }

/* --------------------------------------------------------------- casca (topo) */

.topo {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}

.topo__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: var(--altura-topo);
}

.topo__nav {
  display: flex;
  gap: var(--e1);
}

.topo__nav a {
  padding: 0.5rem 0.875rem;
  border-radius: var(--raio);
  color: var(--tinta-fraca);
  font-size: var(--texto-sm);
  transition: background var(--transicao), color var(--transicao);
}

.topo__nav a:hover { background: var(--superficie-2); color: var(--tinta); }

.topo__nav a[aria-current="page"] {
  background: var(--superficie-2);
  color: var(--tinta-titulo);
  font-weight: var(--peso-semi);
}

@media (max-width: 620px) {
  .topo__nav { display: none; }
}

/* ------------------------------------------------------------------ conteúdo */

.conteudo {
  padding-block: var(--e8) var(--e16);
}

.conteudo--estreito {
  max-width: var(--largura-estreita);
  margin-inline: auto;
}

.rodape {
  padding-block: var(--e6);
  border-top: 1px solid var(--linha);
  color: var(--tinta-fraca);
  font-size: var(--texto-xs);
  text-align: center;
}

/* ------------------------------------------------------------------ vazio */

.vazio {
  display: grid;
  place-items: center;
  gap: var(--e3);
  padding: var(--e10) var(--e4);
  text-align: center;
  color: var(--tinta-fraca);
}

.vazio__emoji { font-size: var(--texto-3xl); }

/* --------------------------------------------------- indicador de carregando
   django-htmx marca o elemento com .htmx-request durante a requisição.        */

.htmx-indicador { opacity: 0; transition: opacity var(--transicao); }
.htmx-request .htmx-indicador,
.htmx-request.htmx-indicador { opacity: 1; }