/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0f1117;
  --bg2:       #1a1d27;
  --bg3:       #22263a;
  --border:    #2e3350;
  --accent:    #4f8ef7;
  --accent2:   #7b5cf5;
  --success:   #22c55e;
  --warning:   #f59e0b;
  --danger:    #ef4444;
  --text:      #e8eaf6;
  --text2:     #9098b8;
  --radius:    8px;
  --shadow:    0 4px 24px rgba(0,0,0,.4);

  /* Texto sobre fundo tingido (alertas e badges). Separado de --success,
     --warning e afins de propósito: aquelas cores pintam SUPERFÍCIE (barra,
     ícone, preenchimento) e foram escolhidas para brilhar sobre o fundo
     escuro. Como TEXTO no tema claro elas ficam ilegíveis — o aviso do dia 05
     media 1,38:1, contra os 4,5:1 que a WCAG AA pede. */
  --sobre-sucesso: #4ade80;
  --sobre-erro:    #f87171;
  --sobre-info:    #93c5fd;
  --sobre-aviso:   #fbbf24;

  /* Cores por domínio (navegação / seções) */
  --c-home:      #4f8ef7;
  --c-timer:     #ff6b6b;
  --c-revisao:   #fbbf24;
  --c-conceitos: #a78bfa;
  --c-plano:     #34d399;
  --c-dados:     #38bdf8;

  /* Cores por atividade (classificação de trecho) */
  --c-teoria:    #60a5fa;
  --c-lei:       #f472b6;
  --c-questoes:  #34d399;
  --c-juris:     #a78bfa;
  --c-resumo:    #fbbf24;
  --c-discursiva:#fb923c;
  --c-pratica:   #22d3ee;
}

html[data-theme="light"] {
  --bg:     #f2f5fc;
  --bg2:    #ffffff;
  --bg3:    #e8edf8;
  --border: #d2d9ee;
  --text:   #1c2035;
  --text2:  #636b8a;
  --shadow: 0 4px 24px rgba(0,0,0,.10);

  /* Mesma matiz, tom escuro: o fundo tingido continua identificando o tipo do
     aviso, e o texto passa a ser legível. O fundo e a borda não mudam — a
     falha de contraste era só do texto. */
  /* Verde precisa descer mais que os outros: é a matiz de maior luminância
     percebida, e o verde-700 usual parava em 3,9:1 sobre o próprio fundo. */
  --sobre-sucesso: #14532d;
  --sobre-erro:    #b91c1c;
  --sobre-info:    #1d4ed8;
  --sobre-aviso:   #92400e;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  outline: none;
  transition: border-color .2s;
  width: 100%;
}
/* Caixa de marcar e botão de opção NÃO são campo de texto.
 *
 * A regra acima dá width:100% a todo input, e um checkbox assim vira uma barra
 * de 871px que empurra o rótulo para o outro lado da tela — medido, ao montar a
 * lista de tabelas do backup. Havia um `style="width:auto"` remendando UM dos
 * dois checkbox do sistema; o outro estava largo e ninguém tinha notado.
 *
 * O padding e a borda também vão embora: pintados sobre um controle nativo,
 * deslocam o "tique" para fora do quadrado. */
input[type="checkbox"], input[type="radio"] {
  width: auto; flex: none;
  padding: 0; border: none; background: none;
  accent-color: var(--accent);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
select option { background: var(--bg2); }

/* ============================================================
   LAYOUT
   ============================================================ */
#app { display: flex; flex-direction: column; min-height: 100vh; }

/* --- TOP BAR --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 56px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.topbar-logo {
  font-weight: 800; font-size: 16px; letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar-logo .lucide { color: var(--accent2); }
.topbar-user { display: flex; align-items: center; gap: 12px; color: var(--text2); font-size: 13px; }
.btn-theme {
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); transition: all .2s; flex-shrink: 0;
}
.btn-theme:hover { background: var(--bg3); color: var(--text); border-color: var(--accent); }
.btn-theme .lucide { width: 15px; height: 15px; vertical-align: 0; }

.btn-logout {
  padding: 5px 14px; border-radius: 20px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); font-size: 12px;
  transition: all .2s;
}
.btn-logout:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* --- NAV TABS --- */
.nav-tabs {
  display: flex; gap: 4px; padding: 10px 24px 0;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
  position: sticky; top: 56px; z-index: 99;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
  padding: 8px 16px; border-radius: 8px 8px 0 0;
  background: transparent; border: 1px solid transparent;
  color: var(--text2); font-size: 13px; font-weight: 500;
  white-space: nowrap; transition: all .2s;
}
.nav-tab:hover { color: var(--text); background: var(--bg3); }
.nav-tab.active {
  color: var(--text); background: var(--bg);
  border-color: var(--border) var(--border) var(--bg);
  box-shadow: inset 0 -3px 0 var(--tab-c, var(--accent));
}
/* Cor de assinatura por aba */
#tab-home      { --tab-c: var(--c-home); }
#tab-timer     { --tab-c: var(--c-timer); }
#tab-revisao   { --tab-c: var(--c-revisao); }
#tab-conceitos { --tab-c: var(--c-conceitos); }
#tab-plano     { --tab-c: var(--c-plano); }
#tab-dados     { --tab-c: var(--c-dados); }
.nav-tab .lucide { color: var(--tab-c); opacity: .8; transition: transform .15s, opacity .15s; }
.nav-tab:hover .lucide { opacity: 1; transform: translateY(-1px) scale(1.1); }
.nav-tab.active .lucide { opacity: 1; }

/* --- MAIN CONTENT --- */
.content { flex: 1; padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
   COMPONENTES
   ============================================================ */

/* --- CARDS --- */
.card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.card-title { font-size: 13px; color: var(--text2); font-weight: 500; margin-bottom: 8px; }
/* nowrap porque um valor é UM número: "R$ 663,0 mil" quebrado em quatro
 * linhas não é layout apertado, é leitura errada. Se algum dia faltar espaço,
 * o certo é a coluna crescer (ver .metrics-grid), não o número se partir. */
.card-value { font-size: 28px; font-weight: 700; color: var(--text); white-space: nowrap; }
.card-value-unit { font-size: 13px; font-weight: 500; color: var(--text2); }

/* --- PAINEL DE GESTÃO: barras e destaques --- */
.pn-crit { color: var(--danger); }
.pn-barras { display: flex; flex-direction: column; gap: 7px; }
.pn-barra-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; font-size: 12px; }
.pn-barra-lbl { color: var(--text2); white-space: nowrap; }
.pn-barra-trilho { background: var(--bg3); height: 13px; border-radius: 3px; overflow: hidden; }
.pn-barra-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.pn-barra-fill.destaque { background: var(--danger); }
.pn-barra-val { color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 78px; text-align: right; }
.pn-prazo-val { font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Barras de concentração por devedor / grupo econômico */
.conc { display: flex; flex-direction: column; gap: 9px; }
.conc-row { display: grid; grid-template-columns: minmax(130px, 1.3fr) 3fr auto; gap: 12px; align-items: center; font-size: 13px; }
.conc-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conc-bar { background: var(--bg3); height: 15px; border-radius: 3px; overflow: hidden; }
.conc-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.conc-fill.crit { background: var(--danger); }
.conc-val { color: var(--text2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 116px; text-align: right; }
@media (max-width: 640px) { .conc-row { grid-template-columns: 1fr; gap: 3px; } .conc-val { text-align: left; } }
.card-sub { font-size: 12px; color: var(--text2); margin-top: 4px; }

/* --- GRID DE MÉTRICAS --- */
/* 220px, e não 160px: medido, o valor mais largo do painel ("R$ 663,0 mil" a
 * 28px bold) precisa de 172px, e a coluna ainda gasta 40px com o padding do
 * cartão. Com 160px sobravam 125px de conteúdo e QUATRO dos seis valores
 * quebravam em três ou quatro linhas. */
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; margin-bottom: 24px; }

/* Os seis sinais vitais do painel. Deixados no auto-fit, dariam 5 numa linha e
 * 1 órfã embaixo; travados em três colunas, viram 3+3 e ainda sobra largura
 * para os subtítulos longos ("R$ 599,3 mil vencidos, dos quais..."). */
@media (min-width: 1000px) {
  .metrics-grid.vitais { grid-template-columns: repeat(3, 1fr); }
}

/* Espaçamento entre os blocos de uma subaba do painel.
 *
 * Estava em `style="margin-top:16px"` repetido bloco a bloco, e foi assim que
 * o cartao "Prazos" colou nos de cima: ao mover ele de linha, o remendo ficou
 * para tras e nada avisou. Mesma historia do `.form-group` sem margem, que ja
 * tinha custado onze correcoes pontuais.
 *
 * Com a regra aqui, bloco novo numa subaba nasce espacado. */
.painel-secao > * + * { margin-top: 16px; }

/* --- RESUMO DA OPERAÇÃO (detalhes da proposta) ---
 *
 * Três números lado a lado numa janela de 520px. Não usa .metrics-grid porque
 * aquele exige 220px por coluna (medido: o valor a 28px precisa de 172px) e
 * aqui caberia um cartão por linha. Fonte menor, mesma hierarquia. */
.resumo-op {
  display: flex; flex-wrap: wrap; gap: 12px;
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.28);
  border-radius: var(--radius); padding: 14px 16px;
}
/* 120px, e nao 130: com 130 os tres itens somavam 414px (3x130 + 2 vaos de 12)
 * contra 413px de espaco interno da caixa. Um pixel, e o terceiro numero caia
 * sozinho para a linha de baixo. */
.resumo-op-item { flex: 1 1 120px; min-width: 120px; }
/* A parcela do SAC e um intervalo ("R$ 4.035,00 -> R$ 3.069,00") e precisa de
 * 191px. Em vez de espremer os tres, ela fica com a linha inteira: e o numero
 * que o cliente mais olha, e assim os outros dois nao encolhem. */
.resumo-op-item.largo { flex: 1 1 100%; min-width: 100%; }
.resumo-op-rotulo { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .3px; }
.resumo-op-valor  { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 2px; }
/* Faixa: no SAC a parcela é um intervalo, e o valor fica longo demais para 17px. */
.resumo-op-valor.faixa { font-size: 14px; }
.resumo-op-nota { flex: 1 1 100%; font-size: 12px; color: var(--text2); margin-top: 2px; }

/* --- BOTÕES --- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; border: none;
  /* Altura da linha fixa: sem isto, um botao COM icone fica mais alto que um
     sem, porque a caixa da linha cresce ate o icone. Lado a lado, a diferenca
     de 1px aparece. */
  line-height: 1.4;
  transition: transform .12s, filter .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { filter: brightness(.95); transform: translateY(0); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn .lucide { transition: transform .15s; }
.btn:hover .lucide { transform: scale(1.12); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 2px 12px rgba(79,142,247,.28); }
.btn-success { background: linear-gradient(135deg, #34d399, #16a34a); color: #fff; box-shadow: 0 2px 12px rgba(34,197,94,.25); }
.btn-danger  { background: linear-gradient(135deg, #fb7185, var(--danger)); color: #fff; box-shadow: 0 2px 12px rgba(239,68,68,.25); }
.btn-warning { background: linear-gradient(135deg, #fbbf24, var(--warning)); color: #1a1100; box-shadow: 0 2px 12px rgba(245,158,11,.25); }
.btn-ghost   { background: var(--bg3); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-ghost .lucide { color: var(--accent); }
/* Ghost com tonalidade vermelha (ações destrutivas / pausa) */
/* A borda precisa ser declarada INTEIRA. Só `border-color` não pinta nada:
   `.btn` acima zera com `border: none`, e sem largura nem estilo o botao fica
   2px mais baixo e mais estreito que os `.btn-ghost` ao lado — foi o que
   desalinhou a linha de acoes do contrato. */
.btn-ghost-danger {
  background: var(--bg3);
  /* --sobre-erro, e nao o #f87171 fixo: aquele vermelho foi escolhido para
     brilhar sobre fundo escuro e media 2,36:1 sobre o --bg3 do tema claro,
     contra os 4,5:1 da WCAG AA. O token ja tem um valor por tema. */
  color: var(--sobre-erro);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
}
.btn-ghost-danger .lucide { color: var(--sobre-erro); }
.btn-ghost-danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--bg3)); }
.btn-sm      { padding: 5px 12px; font-size: 12px; }
/* Icone menor no botao pequeno, para caber dentro da linha de 1.4 e nao
   esticar a altura. */
.btn-sm .lucide { width: 14px; height: 14px; }

/* Linha de acoes no cabecalho de um detalhe: alinha verticalmente o selo de
   status e os botoes. Num div comum eles se alinham pela LINHA DE BASE do
   texto, e como tem alturas diferentes as bordas de baixo ficam em niveis
   diferentes. */
/* Grupo de botoes de acao. USE SEMPRE que houver dois ou mais lado a lado.
   Tentei antes resolver por `.btn + .btn { margin-left }`, que nao precisaria
   mexer no JavaScript — mas o espaco somava ao espaco de PALAVRA que ja existe
   entre os botoes no HTML (4px), dando 12px, e essa largura muda com o tamanho
   da fonte. Um container flex ignora o espaco em branco e entrega sempre o
   mesmo valor, alem de alinhar pelo centro botoes de alturas diferentes. */
.acoes-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.btn-lg      { padding: 13px 30px; font-size: 15px; font-weight: 700; }

/* --- ALERTAS --- */
.alert {
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; margin-bottom: 12px;
}
.alert-success { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.3); color: var(--sobre-sucesso); }
.alert-danger  { background: rgba(239,68,68,.15);  border: 1px solid rgba(239,68,68,.3);  color: var(--sobre-erro); }
.alert-info    { background: rgba(79,142,247,.15); border: 1px solid rgba(79,142,247,.3); color: var(--sobre-info); }
.alert-warning { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.35); color: var(--sobre-aviso); }

/* --- PROPOSTAS: taxa nominal x real e IOF da simulação --- */
.cartoes-taxa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.cartao-taxa {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
/* A taxa real é a resposta que se procura ao simular — só ela recebe destaque. */
.cartao-taxa.destaque { border-color: var(--accent); }
.cartao-taxa-rotulo { font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.cartao-taxa-valor { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cartao-taxa.destaque .cartao-taxa-valor { color: var(--accent); }
.cartao-taxa-sub { font-size: 12px; color: var(--text2); margin-top: 4px; line-height: 1.45; }

/* --- CONFIGURAÇÕES: blocos de percentual lado a lado --- */
.config-lado-a-lado {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px; align-items: start;
}
/* Sem isto, o card mais curto estica até a altura do vizinho e o botão fica
   solto no meio do vazio — align-items:start resolve, e o max-width impede
   que um card sozinho ocupe a largura toda da tela. */
.config-lado-a-lado > .card { max-width: 560px; }

/* Parcela de juros da carência: mesma tabela, peso visual menor, porque não
   amortiza nada — é só o custo do dinheiro naquele mês. */
.linha-carencia > td { color: var(--text2); }
.linha-carencia > td:first-child { font-style: italic; }

/* --- IOF: lista por decêndio --- */
.iof-decendio {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px; background: var(--bg2);
}
.iof-decendio-total { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.iof-recolhimento {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
.iof-recolhimento label { display: block; margin-bottom: 4px; }
.iof-recolhimento input { width: 170px; }

/* --- CONFIGURAÇÕES: edição dos modelos de mensagem --- */
.modelo-bloco {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 10px; background: var(--bg2); overflow: hidden;
}
.modelo-cabecalho {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 13px 16px; text-align: left;
  background: none; border: 0; color: var(--text); font-size: 14px;
}
.modelo-cabecalho:hover { background: var(--bg3); }
.modelo-cabecalho:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.modelo-cabecalho .text-muted { display: block; font-weight: 400; }
.modelo-seta { color: var(--text2); font-size: 11px; width: 12px; flex: none; }
.modelo-conteudo { padding: 0 16px 16px; }
/* Editor e prévia lado a lado; empilham quando não cabem os dois legíveis. */
.modelo-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .modelo-editor { grid-template-columns: 1fr; } }
.modelo-editor .modelo-previa, .modelo-editor textarea { min-height: 260px; }
.modelo-bloco textarea {
  width: 100%; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; resize: vertical;
}
.modelo-campos { display: flex; flex-wrap: wrap; gap: 6px; }
.modelo-campo {
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(79,142,247,.15); color: var(--sobre-info);
  border: 1px solid rgba(79,142,247,.3);
}
.modelo-campo:hover { background: rgba(79,142,247,.3); }
/* A prévia é o texto que o cliente lê: quebras de linha preservadas, e o
   mesmo corpo de texto da mensagem — não a fonte monoespaçada do editor. */
.modelo-previa {
  white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: 13px; line-height: 1.6;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; margin: 0;
}

/* --- COMUNICAÇÃO: lote de mensagens prontas --- */
.msg-item { border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 10px; background: var(--bg2); }
.msg-item.enviado { opacity: .62; }
.msg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.msg-quem { display: flex; flex-direction: column; gap: 3px; }
.msg-nome { font-weight: 650; }
.msg-meta { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.msg-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.msg-texto { width: 100%; font-family: inherit; font-size: 13px; background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 10px; resize: vertical; }

/* --- TABELA --- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
th { color: var(--text2); font-weight: 500; font-size: 12px; background: var(--bg3); }
tr:hover td { background: rgba(255,255,255,.02); }

/* --- FORM GRID --- */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 12px; margin-bottom: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }

/* Um .form-group SOLTO (fora de uma .form-row) nao tinha margem embaixo, e o
   que viesse depois — botao, aviso, outro bloco — ficava colado nele. Quem
   esbarrava no problema colava um margin-bottom no proprio HTML: 11 dos 17
   casos do sistema estavam remendados assim, um a um.
   A regra pega so quem e filho DIRETO de form/card/modal; dentro de .form-row
   o espaco continua sendo o gap da grade. */
form > .form-group,
.card > .form-group,
.modal > .form-group { margin-bottom: 12px; }
label { font-size: 12px; color: var(--text2); font-weight: 500; }

/* --- TIMER --- */
.timer-display {
  font-size: 72px; font-weight: 700; text-align: center;
  color: var(--text); font-variant-numeric: tabular-nums;
  letter-spacing: -2px; line-height: 1;
  padding: 8px 0 4px;
}
.timer-controls { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.progress-bar-wrap { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; margin: 8px 0; }
.progress-bar { height: 100%; border-radius: 3px; background: var(--accent); transition: width .5s, background .3s; }

/* --- META DIÁRIA --- */
.daily-goal { margin-bottom: 20px; }
.daily-goal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 16px; }
.daily-goal-value { font-size: 26px; font-weight: 700; color: var(--text); margin-top: 2px; }
.daily-goal-sep { color: var(--text2); font-weight: 400; margin: 0 4px; }
.daily-goal-value #dia-meta { color: var(--text2); font-size: 20px; }
.daily-goal-edit { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.daily-goal-edit label { font-size: 11px; }
.daily-goal-edit input { width: 80px; text-align: center; padding: 6px 8px; }
.daily-goal-sub { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; }
.daily-goal-sub #timer-meta-pct { color: var(--accent); font-weight: 600; }

/* --- TIMER HERO --- */
.timer-hero { text-align: center; }
.timer-state-badge {
  display: inline-block; padding: 4px 14px; border-radius: 20px;
  font-size: 12px; font-weight: 600; margin-bottom: 4px;
  background: var(--bg3); color: var(--text2);
}
.timer-state-badge.state-rodando { background: rgba(239,68,68,.18); color: #f87171; }
.timer-state-badge.state-classificar { background: rgba(245,158,11,.18); color: var(--warning); }
.timer-state-badge.state-pausado { background: rgba(245,158,11,.12); color: var(--warning); }
.timer-sub { font-size: 13px; min-height: 18px; margin-bottom: 12px; }
.timer-context {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 560px; margin: 0 auto 16px; text-align: left;
}
@media (max-width: 560px) { .timer-context { grid-template-columns: 1fr; } }

/* --- CONTEXT DISABLED (durante classificação) --- */
.timer-context.ctx-disabled select,
.timer-context.ctx-disabled input { opacity: 0.32; pointer-events: none; }
.timer-context.ctx-disabled label { opacity: 0.4; }

/* --- INDICADOR DE ETAPAS --- */
.timer-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
  font-size: 12px; margin-bottom: 12px; padding: 8px 0;
}
.timer-step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px; white-space: nowrap;
  color: var(--text2);
}
.timer-step.active  { background: rgba(79,142,247,.15); color: var(--accent); font-weight: 600; }
.timer-step.done    { background: rgba(34,197,94,.13);  color: var(--success); font-weight: 500; }
.timer-step.pending { opacity: .4; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: currentColor; font-size: 10px; font-weight: 700;
}
.timer-step.active  .step-num { color: var(--bg2); }
.timer-step.done    .step-num { color: var(--bg2); }
.timer-step.pending .step-num { background: var(--text2); color: var(--bg2); }
.timer-step-sep { color: var(--text2); opacity: .35; font-size: 11px; }
.timer-controls-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* --- SELETOR DE MODO (cronômetro / pomodoro) --- */
.modo-selector {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.pomo-cfg {
  display: flex; justify-content: center; width: 100%; margin-top: 4px;
}
.pomo-cfg label {
  display: flex; align-items: center; gap: 8px;
  color: var(--text2); font-size: 13px;
}
.pomo-cfg input { width: 72px; text-align: center; }
.timer-state-badge.state-pomodoro { background: rgba(245,158,11,.18); color: var(--warning); }

/* --- CLASSIFICAÇÃO DE TRECHO --- */
.classify-q { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.tag-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.classify-rev { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; margin-right: 16px; }
.classify-rev input { width: auto; }
.classify-discard { border-color: var(--danger); color: var(--danger); background: transparent; margin-top: 4px; }

/* --- TRECHOS / SESSÕES (linhas) --- */
.trecho-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.trecho-row.trecho-pend { opacity: .85; }
.trecho-total { text-align: right; padding-top: 10px; font-weight: 600; }

/* --- PENDENTES (notas/flashcards) --- */
.pendentes-lista { margin-top: 10px; }
.pendente-item { font-size: 13px; color: var(--text2); padding: 4px 0; border-bottom: 1px dashed var(--border); }

/* --- XP BAR --- */
.xp-bar-wrap { height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; margin: 6px 0; }
.xp-bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent2), var(--accent)); }

/* --- BADGE --- */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
}
.badge-blue   { background: rgba(79,142,247,.2); color: var(--sobre-info); }
.badge-green  { background: rgba(34,197,94,.2);  color: var(--sobre-sucesso); }
.badge-yellow { background: rgba(245,158,11,.2); color: var(--sobre-aviso); }
.badge-red    { background: rgba(239,68,68,.2);  color: var(--sobre-erro); }

/* --- FLASHCARD --- */
/* ============================================================
   REVISÃO — visão de estudo in-page
   ============================================================ */
.rev-detalhe-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.rev-timer-box { text-align: center; flex-shrink: 0; }
.rev-timer {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
}
.rev-timer-label {
  font-size: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 4px;
}
.rev-notas { margin-top: 12px; }
.rev-nota {
  background: color-mix(in srgb, var(--warning) 8%, var(--bg3));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
  border-left: 3px solid var(--warning);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.rev-nota p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 10px;
  white-space: pre-wrap;
}
.rev-nota.dominada { opacity: .45; }
.rev-nota.dominada p { text-decoration: line-through; }

.flashcard {
  perspective: 1000px; cursor: pointer; min-height: 160px;
}
.flashcard-inner {
  position: relative; width: 100%; min-height: 160px;
  transform-style: preserve-3d; transition: transform .5s;
}
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-front, .flashcard-back {
  position: absolute; width: 100%;
  backface-visibility: hidden;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 15px;
}
.flashcard-back { transform: rotateY(180deg); color: var(--accent); }

/* --- REVISÃO --- */
.revisao-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 10px;
}
.revisao-card.vencida { border-color: var(--danger); }
.revisao-card.hoje    { border-color: var(--warning); }

/* --- PLANO --- */
.plano-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.plano-checks { display: flex; gap: 6px; }
.check-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border); background: transparent;
  color: var(--text2); font-size: 13px; font-weight: 700;
  transition: all .2s; display: flex; align-items: center; justify-content: center;
}
.check-btn.done { background: var(--success); border-color: var(--success); color: #fff; }

/* --- MODAL --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 16px;
}
.modal-overlay.hidden { display: none; }

/* O diálogo de confirmar/avisar fica ACIMA dos demais modais.
 *
 * Ele mora no comeco do app.html, antes de todas as outras janelas, e todas
 * usam z-index 200. Empatados, pinta por cima quem vem depois no HTML — logo
 * o dialogo ficava ATRAS de qualquer modal aberto. O usuario clicava em
 * confirmar, nada parecia acontecer, e a pergunta estava escondida atras da
 * janela que ele estava olhando. Vale para toda chamada de confirmar() e
 * avisar() feita com um modal aberto, nao so para a baixa por perda. */
#modal-dialogo { z-index: 400; }
.modal {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px; max-width: 480px; width: 100%;
  box-shadow: var(--shadow);
  /* Rede de seguranca para TODA janela: sem isto, conteudo alto passa da
     borda da tela e os botoes de confirmar ficam inalcancaveis — foi o que
     aconteceu com a janela de gerar contrato, que tem 25 campos. */
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 20px; }
.modal-footer,
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* Janela alta: o cabecalho e os botoes ficam parados e so o miolo rola. Rolar
   a janela inteira funciona, mas some com o botao de confirmar e a pessoa nao
   sabe se ainda existe. */
.modal-alto { display: flex; flex-direction: column; padding-bottom: 20px; }
.modal-alto .modal-title { flex: 0 0 auto; }
.modal-alto .modal-corpo { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-right: 4px; }
.modal-alto .modal-actions {
  flex: 0 0 auto; border-top: 1px solid var(--border);
  padding-top: 16px; margin-top: 16px;
}

/* Caixa explicativa dentro de uma janela ou card. Usa os tokens --sobre-*,
   que existem justamente porque as cores de superficie (--success e afins)
   ficam ilegiveis como TEXTO no tema claro — o aviso do dia 05 media 1,38:1
   contra os 4,5:1 da WCAG AA. */
.sobre {
  border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.5;
  border: 1px solid transparent;
}
.sobre code { font-size: 12px; }
.sobre-info    { background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.3);  color: var(--sobre-info); }
.sobre-sucesso { background: rgba(34,197,94,.12);   border-color: rgba(34,197,94,.3);   color: var(--sobre-sucesso); }
.sobre-aviso   { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.35); color: var(--sobre-aviso); }
.sobre-erro    { background: rgba(239,68,68,.12);   border-color: rgba(239,68,68,.3);   color: var(--sobre-erro); }
.sobre a { color: inherit; text-decoration: underline; }

/* Grupo de campos dentro de uma janela, para o formulario longo nao virar uma
   parede unica de caixas de texto. */
.campo-grupo { margin-bottom: 16px; }
.campo-grupo > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.campo-grupo > summary:hover { color: var(--text); }

/* --- PAGINA PUBLICA DE CADASTRO --- */
/* Fora do login, aberta por link no celular. Coluna estreita e centrada, e
   nada de barra de navegacao — quem abre nao e usuario do sistema. */
.pagina-cadastro { background: var(--bg); min-height: 100vh; }
.cadastro-wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 60px; }
.cadastro-wrap h1 { color: var(--text); }

.pessoa-bloco {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px; background: var(--bg);
}
.pessoa-cabecalho {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.papeis { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; }
.papel-opcao {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; cursor: pointer; font-weight: 400;
}
.cadastro-wrap small { font-size: 11.5px; line-height: 1.45; display: block; margin-top: 4px; }

/* Lista de tabelas do backup: uma linha por tabela, caixa à esquerda. */
.bkp-linha {
  display: flex; align-items: baseline; gap: 9px;
  padding: 5px 0; font-size: 13.5px; font-weight: 400; cursor: pointer;
}
.bkp-linha + .bkp-linha { border-top: 1px solid var(--border); }

/* --- MISC --- */
.hidden { display: none !important; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.text-muted { color: var(--text2); font-size: 13px; }
/* Par do .text-muted para aviso curto de validação ao pé de um campo. */
.text-danger { color: var(--danger); font-size: 13px; }
.empty-state { text-align: center; padding: 48px 0; color: var(--text2); }
.section-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 16px; }
/* Divisor DENTRO de um card, para separar assuntos sem multiplicar cards —
   os dados da empresa viraram quatro blocos e cada um em seu card obrigaria a
   rolar a tela de novo, que foi o problema que a sanfona resolveu. */
.section-subtitle {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  padding-top: 6px; border-top: 1px solid var(--border); margin-bottom: 12px;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.two-col.col-only { grid-template-columns: 1fr; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }

/* --- COLLAPSIBLE --- */
.collapsible-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 0; margin-bottom: 0; text-align: left;
}
.collapsible-header:hover .section-title { color: var(--accent); }
.collapsible-chevron { color: var(--text2); font-size: 16px; transition: transform .2s; }

/* --- COMBOBOX (tópico) --- */
.combo-wrap { position: relative; }
.combo-input-row { display: flex; }
.combo-input-row input {
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: none; flex: 1;
}
.combo-input-row input:focus { border-color: var(--accent); }
.combo-arrow {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0 12px; color: var(--text2); cursor: pointer;
  font-size: 12px; transition: background .15s, color .15s;
  flex-shrink: 0;
}
.combo-arrow:hover { background: var(--bg2); color: var(--text); }

/* Estado inativo (sem disciplina selecionada) */
.combo-wrap:not(.ativo) .combo-input-row input {
  color: var(--text2);
  opacity: 0.5;
}
.combo-wrap:not(.ativo) .combo-arrow { opacity: 0.5; }

/* Estado ativo (disciplina selecionada) */
.combo-wrap.ativo .combo-input-row input {
  color: var(--text);
  border-color: var(--accent);
}
.combo-wrap.ativo .combo-arrow { border-color: var(--accent); }
.combo-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); max-height: 220px; overflow-y: auto;
  box-shadow: var(--shadow);
}
.combo-option {
  padding: 9px 14px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--border); transition: background .1s;
}
.combo-option:last-child { border-bottom: none; }
.combo-option:hover { background: var(--bg3); color: var(--accent); }
.combo-empty { padding: 10px 14px; color: var(--text2); font-size: 12px; font-style: italic; }

/* --- MINI-TABS (notas/flashcards) --- */
.tab-mini { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.tab-mini-btn { background: none; border: none; color: var(--text2); padding: 5px 14px; font-size: 13px; cursor: pointer; border-radius: var(--radius); transition: background .15s, color .15s; }
.tab-mini-btn:hover { color: var(--text); background: var(--bg3); }
.tab-mini-btn.active { color: var(--accent); font-weight: 600; background: rgba(79,142,247,.1); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; background: var(--bg); padding: 20px;
}
.login-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 40px; width: 100%; max-width: 400px;
  box-shadow: var(--shadow);
}
.login-logo { text-align: center; font-size: 28px; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.login-sub  { text-align: center; color: var(--text2); font-size: 13px; margin-bottom: 32px; }
.login-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.login-tab {
  flex: 1; padding: 10px; background: none; border: none;
  color: var(--text2); font-size: 14px; font-weight: 500;
  border-bottom: 2px solid transparent; transition: all .2s;
}
.login-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-btn { padding: 11px; font-size: 14px; width: 100%; justify-content: center; margin-top: 4px; }
.login-msg { text-align: center; font-size: 13px; min-height: 20px; }

/* ============================================================
   LUCIDE ICONS
   ============================================================ */
.lucide {
  display: inline-block;
  width: 16px; height: 16px;
  stroke-width: 1.75;
  vertical-align: -3px;
  flex-shrink: 0;
}
.nav-tab .lucide       { width: 17px; height: 17px; vertical-align: -4px; }
.topbar-logo .lucide   { width: 22px; height: 22px; vertical-align: -5px; }
.tab-mini-btn .lucide  { width: 14px; height: 14px; vertical-align: -2px; }
.timer-state-badge .lucide { width: 13px; height: 13px; vertical-align: -2px; }

/* --- ICON TILES (ícone em "azulejo" colorido) --- */
.ic-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  margin-right: 10px; vertical-align: -9px;
  background: color-mix(in srgb, var(--tile-c, var(--accent)) 16%, transparent);
  color: var(--tile-c, var(--accent));
  transition: transform .2s, background .2s;
}
.ic-tile .lucide { width: 17px; height: 17px; vertical-align: 0; }
.card-title .ic-tile { width: 26px; height: 26px; border-radius: 8px; margin-right: 8px; vertical-align: -8px; }
.card-title .ic-tile .lucide { width: 15px; height: 15px; }
.card:hover .ic-tile { transform: rotate(-6deg) scale(1.06); }
.ic-blue   { --tile-c: var(--c-home); }
.ic-coral  { --tile-c: var(--c-timer); }
.ic-amber  { --tile-c: var(--c-revisao); }
.ic-purple { --tile-c: var(--c-conceitos); }
.ic-green  { --tile-c: var(--c-plano); }
.ic-cyan   { --tile-c: var(--c-dados); }

/* --- CHIPS DE ATIVIDADE (tags coloridas) --- */
.tag-chip .lucide { color: var(--tile-c); }
.tag-chip:hover {
  border-color: var(--tile-c);
  background: color-mix(in srgb, var(--tile-c) 14%, var(--bg3));
  color: var(--text);
}

/* ============================================================
   MICRO-INTERAÇÕES & ANIMAÇÕES
   ============================================================ */
.card { transition: border-color .2s, box-shadow .2s, transform .2s; }
.metrics-grid .card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  transform: translateY(-2px);
}
.collapsible-header:hover .ic-tile { transform: rotate(-6deg) scale(1.06); }

@keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.timer-state-badge.state-rodando,
.timer-state-badge.state-pomodoro { animation: pulse-soft 2s ease-in-out infinite; }

@keyframes pop-in { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.timer-state-badge:not(.hidden) { animation: pop-in .25s ease; }

/* Barras de progresso com gradiente vivo */
.progress-bar { background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.xp-bar { background: linear-gradient(90deg, var(--accent2), var(--accent), #22d3ee); background-size: 200% 100%; animation: xp-shine 3s linear infinite; }
@keyframes xp-shine { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

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

/* ============================================================
   SUBABAS DO DASHBOARD
   ============================================================ */
.dash-subtabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 24px 0 4px;
  border-bottom: 1px solid var(--border);
}
.dash-subtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text2);
  font-size: 14px;
  font-weight: 600;
  transition: color .15s, border-color .15s;
}
.dash-subtab:hover { color: var(--text); }
.dash-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.dash-subtab .lucide { width: 16px; height: 16px; }

/* ============================================================
   CALENDÁRIO DE META BATIDA
   ============================================================ */
.metacal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 14px;
}
.metacal-head {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  padding-bottom: 2px;
}
.metacal-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg3);
  color: var(--text2);
  border: 2px solid transparent;
}
.metacal-cell.empty { background: transparent; }
.metacal-cell.met {
  background: color-mix(in srgb, var(--c-plano) 32%, var(--bg3));
  color: var(--text);
}
.metacal-cell.disc-hit { border-color: var(--accent); color: var(--text); }
.metacal-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text2);
}
.metacal-key {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  vertical-align: -2px;
}
.metacal-key.met { background: color-mix(in srgb, var(--c-plano) 45%, var(--bg3)); }
.metacal-key.disc-hit { background: var(--bg3); border: 2px solid var(--accent); }
.metacal-legend .metacal-key:not(:first-child) { margin-left: 14px; }

/* ============================================================
   ANÁLISE / GRÁFICOS (dashboard)
   ============================================================ */
.chart-box {
  position: relative;
  height: 280px;
  margin-top: 10px;
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .three-col { grid-template-columns: 1fr; }
}

.periodo-filtro {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.periodo-filtro button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ============================================================
   SALA DE TROFÉUS (badges)
   ============================================================ */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.badge-trofeu {
  text-align: center;
  padding: 12px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg3);
  transition: transform .15s;
}
.badge-trofeu.ativo {
  border: 2px solid #FFD700;
  background: color-mix(in srgb, #FFD700 12%, transparent);
}
.badge-trofeu:not(.ativo) { opacity: .4; filter: grayscale(100%); }
.badge-trofeu:hover { transform: translateY(-2px); }
.badge-emoji { font-size: 26px; line-height: 1; margin-bottom: 5px; }
.badge-nome  { font-size: 11px; font-weight: 700; }
.badge-desc  { font-size: 10px; color: var(--text2); margin-top: 2px; }

/* ============================================================
   HEATMAP ANUAL (consistência)
   ============================================================ */
.heatmap-wrap { overflow-x: auto; margin-top: 14px; padding-bottom: 6px; }
.heatmap {
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 11px);
  gap: 3px;
}
.hm-cell { width: 11px; height: 11px; border-radius: 2px; background: var(--bg3); }
.hm-cell.lvl-1 { background: color-mix(in srgb, var(--c-plano) 30%, var(--bg3)); }
.hm-cell.lvl-2 { background: color-mix(in srgb, var(--c-plano) 55%, var(--bg3)); }
.hm-cell.lvl-3 { background: color-mix(in srgb, var(--c-plano) 78%, var(--bg3)); }
.hm-cell.lvl-4 { background: var(--c-plano); }
.hm-cell.empty { background: transparent; }
.hm-cell.futuro {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
}
.heatmap-legend {
  display: flex; align-items: center; gap: 5px;
  margin-top: 10px; font-size: 11px; color: var(--text2);
}
.heatmap-legend .hm-cell { display: inline-block; }

/* ============================================================
   REGISTRO MANUAL (grid do formulário)
   ============================================================ */
.reg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

/* ============================================================
   STREAK CARD
   ============================================================ */
.streak-card {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-timer) 10%, var(--bg2)),
    var(--bg2)
  );
  border-color: color-mix(in srgb, var(--c-timer) 28%, var(--border));
  margin-bottom: 20px;
}

.streak-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.streak-count {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  margin: 6px 0 2px;
  background: linear-gradient(135deg, var(--c-timer), #ff9f5a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.streak-sublabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.streak-message {
  font-size: 14px;
  color: var(--text2);
  max-width: 55%;
  text-align: right;
  line-height: 1.5;
  align-self: center;
}

.streak-days {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 20px;
}

.streak-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.streak-bubble {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  transition: transform .2s, box-shadow .2s;
}

.streak-bubble-icon {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: inherit;
}

.streak-day.studied .streak-bubble {
  background: linear-gradient(135deg, var(--c-timer), #ff9f5a);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--c-timer) 50%, transparent);
}

.streak-day.today .streak-bubble {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.streak-day.today.studied .streak-bubble {
  border-color: transparent;
  box-shadow:
    0 3px 12px color-mix(in srgb, var(--c-timer) 50%, transparent),
    0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.streak-day.future .streak-bubble {
  opacity: 0.3;
}

.streak-day-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.streak-day.today .streak-day-label {
  color: var(--accent);
  font-weight: 700;
}