/* Paleta, tipografia e componentes portados do protótipo validado
   (financeiro-escola.html) — manter em sincronia se a paleta mudar lá. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&family=Poppins:wght@500;600;700&display=swap');

:root {
  /* Cor de marca/CTA primária — atualizada pra bater com o roxo/índigo do logo
     HubFlow (hubflow_logo.png na raiz do projeto). --saida-cor é INDEPENDENTE de
     propósito (mesmo valor antigo do --magenta): ela é usada pra sinalizar "saída"
     em todo o financeiro, um significado próprio que não deve mudar só porque a
     cor de marca mudou. */
  --magenta: #6C3CE9;
  --brand-gradient: linear-gradient(100deg, #4F5FEF, #8B2FE8);
  --saida-cor: #C41E68;
  --rosa: #D9709E;
  --pessego: #F6C6A0;
  --laranja: #F5A94E;
  --verde-agua: #4EC5A4;
  --teal: #1F9C8C;
  --azul-marinho: #254B77;
  --azul-marinho-escuro: #12101F;
  --azul-claro: #8FB4D9;
  --amarelo: #F2C230;
  --amarelo-texto: #A67C00;

  --bg: #F7F5F1;
  --card-bg: #FFFFFF;
  --input-bg: #FCFBFA;
  --border: #E7E2DC;
  --text: #26232B;
  /* Era #7A7570 (contraste ~4.19:1 sobre --bg, abaixo do mínimo AA de 4.5:1 pra
     texto normal — é a cor de todo texto secundário do sistema). Escurecido pra
     #6E6963 (~5:1), mesma tonalidade, só mais legível. V2 §Acessibilidade. */
  --text-muted: #6E6963;

  --sidebar-w: 236px;

  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Poppins', sans-serif;

  --radius: 14px;

  /* ===== V2: escala de espaçamento =====
     Substitui valores soltos (13px, 17px, 22px...) por passos fixos. Aplicada
     nos componentes centrais (botão, campo, card, painel, filtro); o resto do
     arquivo ainda tem literais antigos — migrar sob demanda, não em massa, pra
     não arriscar quebrar layout sem checar visualmente cada tela. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ===== V2: escala tipográfica =====
     Eram 24 valores de font-size diferentes e nenhum h1-h4 com tamanho fixo.
     6 passos cobrem rótulo pequeno → título de card. */
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15.5px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;

  /* ===== V2: cores semânticas (separadas da cor de marca) =====
     --magenta é a cor de CTA/marca (troca por escola via whitelabel) — antes
     também fazia o papel de "info" (.atencao-info), o que quebraria o
     significado "informativo" sempre que uma escola escolhesse um magenta/
     vermelho como cor própria. --color-warning consolida 3 hex de âmbar
     diferentes (#9C6A0A / #B87400 / #7A4E0A) que significavam a mesma coisa
     ("pendente/atenção") em telas diferentes. */
  --color-success: var(--teal);
  --color-success-bg: rgba(31,156,140,0.12);
  --color-danger: var(--saida-cor);
  --color-danger-bg: rgba(196,30,104,0.1);
  --color-warning: #9C6A0A;
  --color-warning-bg: rgba(245,169,78,0.18);
  --color-info: #2E7DD1;
  --color-info-bg: rgba(46,125,209,0.1);

  /* ===== V2: densidade de tabela (2 níveis, reaproveitados pelos 6 "skins"
     de tabela que existiam — ver §Tabelas) ===== */
  --table-pad: var(--space-3) var(--space-2);
  --table-cell-size: var(--text-sm);
  --table-pad-compact: var(--space-2);
  --table-cell-size-compact: var(--text-xs);
}

/* ============ MODO ESCURO ============
   Ativado via atributo data-theme="dark" na <html> (definido cedo em theme-init.php,
   pra não piscar tema claro antes do JS rodar; alternado depois por alternarTema() em
   app.js). A sidebar já é escura nos dois temas de propósito (marca), por isso não
   entra aqui. Cores de destaque (--magenta/--teal/--azul-marinho/etc.) continuam as
   mesmas — só o fundo/superfície/texto trocam. */
:root[data-theme="dark"] {
  --bg: #16141D;
  --card-bg: #1F1D28;
  --input-bg: #262432;
  --border: #34313F;
  --text: #EDEAF5;
  --text-muted: #9C97AC;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ============ SCROLLBAR (fina e discreta, some quando não precisa) ============ */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #C9C2B8; border: 2px solid transparent; background-clip: padding-box; }
/* Sidebar tem fundo escuro — precisa de um thumb claro/translúcido pra ter contraste. */
.sidebar { scrollbar-color: rgba(255,255,255,.22) transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border: 2px solid transparent; background-clip: padding-box; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); border: 2px solid transparent; background-clip: padding-box; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  display: flex;
}

a, button { font-family: inherit; }

/* ============ SIDEBAR ============ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--azul-marinho-escuro);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  color: white;
  overflow-y: auto;
  transition: width .15s, min-width .15s;
}
.sidebar.collapsed { width: 72px; min-width: 72px; padding: 22px 10px; }

.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; margin-bottom: 8px; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--magenta), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: white;
  flex-shrink: 0; overflow: hidden;
}
.brand-text h1 { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.brand-text p { font-size: 10.5px; color: rgba(255,255,255,0.5); margin-top: 1px; white-space: nowrap; overflow: hidden; }
.sidebar.collapsed .brand-text { display: none; }
.sidebar.collapsed .sidebar-toggle .label-text { display: none; }

.sidebar-toolbar { display: flex; gap: 8px; margin-bottom: 14px; }
.sidebar.collapsed .sidebar-toolbar { flex-direction: column; }

.sidebar-toggle {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  width: 100%; padding: 8px; margin-bottom: 0; flex: 1; min-width: 0;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.09); color: white; }

.nav-scroll { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; flex: 1; }

.nav-section-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35); font-weight: 600;
  padding: 14px 12px 8px; white-space: nowrap; overflow: hidden;
}
.nav-section-label:first-child { padding-top: 0; }
.sidebar.collapsed .nav-section-label, .sidebar.collapsed .label-text { display: none; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 9px;
  color: rgba(255,255,255,0.72);
  font-size: 13.5px; font-weight: 500;
  cursor: pointer; margin-bottom: 2px;
  border: none; background: none; width: 100%; text-align: left;
  text-decoration: none;
  transition: background .12s, color .12s;
  position: relative;
  white-space: nowrap;
}
.sidebar.collapsed .nav-item { justify-content: center; padding: 11px 0; }
.nav-item .ic { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.nav-item .ic svg { width: 17px; height: 17px; stroke: currentColor; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: white; }
.nav-item.ativo { background: rgba(255,255,255,0.1); color: white; }
.nav-item.ativo::before {
  content: ''; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px;
  background: var(--teal); border-radius: 0 3px 3px 0;
}
.nav-item.desativado { opacity: 0.4; cursor: not-allowed; }
.nav-item.desativado:hover { background: none; color: rgba(255,255,255,0.72); }
.nav-badge {
  margin-left: auto; font-size: 9px; font-weight: 700; padding: 2px 6px;
  border-radius: 20px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em; flex-shrink: 0;
}
/* Contador de não lidas (Notificações, dentro de Configurações) — mesmo espírito do
   badge de mensagens não lidas do WhatsApp: bolha cheia, não a tag neutra do .nav-badge. */
.nav-badge-count {
  margin-left: auto; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--saida-cor); color: white;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1;
}
.sidebar.collapsed .nav-badge-count { position: absolute; top: 6px; right: 10px; margin-left: 0; }

.sidebar-footer { margin-top: 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 10px; }
.sidebar.collapsed .sidebar-footer { justify-content: center; }
.sidebar.collapsed .user-info { display: none; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--rosa); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px; color: white; flex-shrink: 0;
}
.user-info p:first-child { font-size: 12.5px; font-weight: 600; }
.user-info p:last-child { font-size: 10.5px; color: rgba(255,255,255,0.5); margin-top: 1px; }
/* Linha de perfil (ex.: "Admin Master") — classe explícita porque agora pode ter um <a>
   "Sair" depois dela, o que faria ":last-child" parar de bater com o <p>. */
.user-info-perfil { font-size: 10.5px; color: rgba(255,255,255,0.5); margin: 1px 0 0; }
.user-info a { color: rgba(255,255,255,0.55); font-size: 10.5px; text-decoration: none; }
.user-info a:hover { color: white; }

/* ============ MAIN AREA ============ */
.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }

.topbar {
  height: 64px; min-height: 64px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
}
.topbar-title h2 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--azul-marinho); }
.titulo-contagem { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-muted); }
.topbar-title p { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.conteudo { flex: 1; overflow-y: auto; padding: 28px; }

/* ============ CARDS ============ */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; position: relative; }
.card-clicavel { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.card-clicavel:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }
/* overflow:hidden não é mais usado aqui (cortava o tooltip do .info-tip nos cards de
   Resultado/Margem, que precisa "vazar" pra cima do card) — a faixa colorida à esquerda
   arredonda as próprias pontas em vez de depender do corte do container pra não sobrar
   quina reta fora do border-radius do card. */
.card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--azul-claro); border-radius: var(--radius) 0 0 var(--radius); }
.card.entrada::before { background: var(--teal); }
.card.saida::before { background: var(--saida-cor); }
.card.saldo::before { background: var(--amarelo); }
.card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }
.card .valor { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; color: var(--text); }
.card.entrada .valor { color: var(--teal); }
.card.saida .valor { color: var(--saida-cor); }
.card.saldo .valor { color: var(--amarelo-texto); }
.card .sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
/* Variante compacta — 3 cards numa linha só (ex: modal de situação financeira do aluno). */
.cards-sm { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cards-sm .card { padding: 12px 14px; }
.cards-sm .card .label { font-size: 10px; margin-bottom: 4px; }
.cards-sm .card .valor { font-size: 17px; }

/* ============ CONCILIAÇÃO DE COBRANÇAS (Lançamentos > Lançar em Lote) ============ */
/* Card do arquivo/lista já colada — check verde + nome + resumo, "Trocar arquivo"/"Colar
   outra lista" ancorado à direita. */
.conccob-arquivo { display: flex; align-items: center; gap: 14px; }
.conccob-arquivo-check { width: 32px; height: 32px; border-radius: 50%; background: rgba(31,156,140,0.14); color: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.conccob-arquivo strong { display: block; font-size: 13.5px; }
.conccob-arquivo-sub { color: var(--text-muted); font-size: 12px; margin-top: 1px; }
.conccob-arquivo form { margin-left: auto; }
/* .btn-secondary "de fábrica" carrega margin-top:6px/margin-left:8px (pensado pra ficar ao
   lado de outro botão, tipo Salvar/Cancelar) — aqui ele fica sozinho, centralizado na linha
   do card via align-items:center do .conccob-arquivo, então essa margem só empurrava o botão
   pra baixo do centro (não alinhado com o ✓ e o nome do arquivo, diferente do mockup). */
.conccob-arquivo .btn-secondary { margin: 0; padding: 8px 16px; font-size: 12.5px; }
/* Botão "Selecionar arquivo": <label> estilizado como botão envolvendo o <input type=file>
   de verdade (escondido visualmente, mas ainda focável/acessível) — o controle nativo do
   navegador ("Escolher arquivo" + nome cru) não tem como ficar com a cara do resto do
   sistema, então a técnica padrão é essa. Usado tanto solto (Notas fiscais/Extrato
   bancário/Conciliação, lado a lado com o botão de enviar) quanto dentro de .conccob-arquivo
   (card "arquivo já processado", onde ele fica ancorado à direita — daí o margin-left:auto
   só nesse segundo caso, não no seletor de uma classe só). */
.conccob-arquivo-label { cursor: pointer; position: relative; }
.conccob-arquivo .conccob-arquivo-label { margin-left: auto; }
.conccob-arquivo-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.conccob-aluno-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.tag.novo { background: rgba(46,125,209,0.14); color: #2E7DD1; }
.tag.info { background: var(--bg); color: var(--text-muted); }

/* Categorias da conciliação como "collapses": o cabeçalho (número + título + o que tem ali)
   é o card e clicar abre/fecha a lista de linhas. Faixa colorida no topo = cor do bucket. */
.conccob-collapse { background: var(--card-bg); border: 1px solid var(--border); border-top: 3px solid var(--sec, var(--border)); border-radius: 12px; margin-bottom: 12px; }
.conccob-collapse > summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; }
.conccob-collapse-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; min-width: 34px; color: var(--sec, var(--text)); }
.conccob-collapse-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conccob-collapse-txt strong { font-size: 14px; color: var(--sec, var(--azul-marinho)); }
.conccob-collapse-txt span { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.conccob-collapse-chev { flex-shrink: 0; color: var(--text-muted); transition: transform .15s; }
.conccob-collapse[open] > summary .conccob-collapse-chev { transform: rotate(180deg); }
.conccob-collapse-corpo { padding: 0 18px 16px; }

/* ============ PANEL ============ */
.panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-4); }
/* V2 §Hierarquia visual: antes, os 9 widgets do Dashboard (alerta + 4 KPIs + 4
   gráficos) usavam o mesmo .panel/.card, mesmo peso visual — nada dizia "olhe
   aqui primeiro". .panel-destaque (painel "atenção hoje") ganha fundo com leve
   gradiente e borda mais grossa pra dominar visualmente; .panel-secundario
   (gráficos decorativos tipo Atraso/Status, que são consulta eventual, não
   ação do dia a dia) recua com título menor e borda mais discreta. */
.panel-destaque {
  background: linear-gradient(180deg, var(--card-bg) 0%, rgba(108,60,233,0.035) 100%);
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 10px rgba(18,16,31,0.05);
}
.panel-secundario h3 { font-size: var(--text-base); color: var(--text-muted); font-weight: 600; }
.panel h3 { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; color: var(--azul-marinho); margin-bottom: 4px; }
/* Saudação "Olá, boa noite, <nome> 🌻!..." — só o nome e a data ficam em negrito (via
   <strong> no PHP), o resto do texto fica no peso normal. ".panel .atencao-hoje-titulo"
   (2 classes) de propósito pra ganhar de ".panel h3" (1 classe + tag) no font-weight. */
.panel .atencao-hoje-titulo { font-weight: 400; font-size: var(--text-md); }
.atencao-hoje-titulo strong { font-weight: 700; }

/* ============ FORM ============ */
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; align-items: start; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: span 3; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2, .form-grid .span-3 { grid-column: span 1; } }

/* V2 §Consistência: ".field label"/".field input,select,textarea" (antes em
   ~linha 1075) eram uma cópia byte a byte destas 2 regras — dois sistemas de
   campo de formulário em paralelo fazendo a mesma coisa. Unificados aqui;
   ".field" agora só contribui o margin-bottom próprio dela. */
label, .field label {
  display: block; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em;
}
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="month"], select, textarea,
.field input, .field select, .field textarea {
  width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--font-body); font-size: var(--text-base); color: var(--text); background: var(--input-bg);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); background: var(--card-bg); }
input:disabled, select:disabled, textarea:disabled { background: var(--bg); color: var(--text-muted); cursor: not-allowed; }

/* Prefixo "R$" dentro do campo (Colaboradores > Remuneração & benefícios) — evita depender só do rótulo pra deixar claro que é um valor em reais. */
.campo-moeda-wrap { position: relative; }
.campo-moeda-wrap .campo-moeda-prefixo {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 12.5px; font-weight: 600; color: var(--text-muted); pointer-events: none;
}
.campo-moeda-wrap input.campo-moeda { padding-left: 32px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; padding-top: 9px; }
.checkbox-row input { width: auto; margin: 0; }

/* ============ BOTÕES ============ */
button, .btn {
  display: inline-block;
  padding: var(--space-3) var(--space-5); border: none; border-radius: 8px; background: var(--magenta); color: white;
  font-weight: 600; font-size: var(--text-base); cursor: pointer; transition: opacity .15s;
  text-decoration: none;
}
button:hover, .btn:hover { opacity: 0.9; }
.btn-outline { background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted); }
.btn-outline:hover { background: var(--bg); opacity: 1; }
.btn-danger { background: none; border: 1px solid rgba(196,30,104,0.3); color: var(--magenta); }
.btn-danger:hover { background: rgba(196,30,104,0.06); opacity: 1; }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); border-radius: 6px; }
.acoes-cel { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.form-inline { display: inline; }

/* coluna Obs. nas tabelas de Lançamentos — largura curta com reticências (texto
   completo no title ao passar o mouse), pra sobrar espaço e os 3 ícones de ação
   (editar/duplicar/excluir) nunca quebrarem linha. */
.col-obs { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ícones de ação nas linhas de tabela (✎ editar / ✕ excluir) — mesmo padrão do protótipo em toda listagem */
.del-btn, .edit-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 4px 7px; border-radius: 6px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
/* V2: suporte a ícone SVG dentro do del-btn/edit-btn (ex.: lixeira em vez do
   glifo de texto "✕" solto) — mesmo padrão de .btn-icon svg. */
.del-btn svg, .edit-btn svg { width: 14px; height: 14px; stroke: currentColor; }
.del-btn:hover { background: #F3E8EC; color: var(--magenta); }
.edit-btn:hover { background: #E9F2F6; color: var(--azul-marinho); }

/* ============ TABELA ============ */
table { width: 100%; border-collapse: collapse; }
/* vertical-align:top (não o "baseline" padrão do navegador) — sem isso, uma célula com
   várias linhas (ex.: descrição + vínculo + recorrência, em Lançamentos) faz a checkbox/
   ícone da MESMA linha "flutuar" alinhado pela última linha de texto, em vez de ficar no
   topo junto com o resto — parecia linha desalinhada mesmo a tabela estando correta. */
/* V2 §Tabelas: --table-pad/--table-cell-size são a densidade "normal"; as
   variantes compactas (import, grade de turmas, tabela compacta) usam
   --table-pad-compact/--table-cell-size-compact — 2 níveis de densidade
   reaproveitados pelos 6 "skins" de tabela, em vez de cada um inventar seu
   próprio padding/font-size por conta própria. */
th, td { text-align: left; padding: var(--table-pad); border-bottom: 1px solid var(--border); font-size: var(--table-cell-size); vertical-align: top; }
thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; border-bottom: 2px solid var(--border); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }

/* cabeçalho clicável pra ordenar a tabela (ver ordenarTabela() em app.js) */
th.th-sortable { cursor: pointer; user-select: none; }
th.th-sortable:hover { color: var(--teal); }
th.th-sortable .sort-ic { display: inline-block; width: 10px; margin-left: 2px; opacity: 0.6; }

/* coluna de checkbox "Sel." usada no modo "Editar em massa" (excluir/vincular selecionados) —
   escondida até a tabela entrar em modo massa (ver alternarModoMassa em app.js). */
.col-massa-check { display: none; width: 30px; text-align: center; }
table.modo-massa .col-massa-check { display: table-cell; }

/* barra de ações do modo "Editar em massa" (Lançamentos > Entradas/Saídas) — separada do
   .filters de cima (que fica sempre visível) pra não misturar filtro normal com ações que
   só existem enquanto há linhas selecionadas. Escondida por padrão (display:none inline no
   HTML), mostrada via alternarModoMassa() em app.js quando a tabela entra em modo massa. */
.massa-toolbar {
  align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 16px;
  padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
}
.massa-toolbar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.massa-toolbar-grupo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.massa-toolbar-grupo-fim { margin-left: auto; }

/* ============ COMBOBOX DE VÍNCULO (busca embutida no painel, ver comboVinculo() em helpers.php) ============ */
.combo-vinculo { position: relative; width: 240px; max-width: 100%; }
.massa-toolbar .combo-vinculo { width: 220px; }
/* V2 §Consistência/Filtros: era o único dos 5 widgets de filtro com cantos
   quase retos (radius 8px) e fonte maior (13.5px) — os outros 4 (.filters
   select, .filtro-dropdown-btn, .search-combo, .pill-select) são todos pill
   999px/12.5px. Alinhado aqui pra fechar a família visual. */
.combo-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: 999px; background: var(--input-bg);
  color: var(--text); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-align: left;
}
.combo-trigger:hover { border-color: var(--teal); }
.combo-trigger svg { flex-shrink: 0; color: var(--text-muted); }
.combo-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-painel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 100%; min-width: 260px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16); padding: 8px; flex-direction: column; gap: 6px;
  display: none;
}
/* .aberto (não o atributo [hidden] sozinho) controla a exibição — uma regra de classe
   com display:flex "vence" o [hidden] do navegador na cascata (CSS de autor sempre tem
   prioridade sobre o CSS padrão do user-agent), então o painel nunca escondia de volta. */
.combo-painel.aberto { display: flex; }
.combo-busca { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.combo-busca svg { flex-shrink: 0; color: var(--text-muted); }
.combo-busca input { border: none; background: none; padding: 0; font-size: 13px; width: 100%; }
.combo-busca input:focus { outline: none; }
.combo-lista { max-height: 220px; overflow-y: auto; }
.combo-grupo-label { padding: 6px 8px 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.combo-opcao { padding: 8px; border-radius: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.combo-opcao:hover { background: var(--bg); }
.combo-opcao.selecionada { background: rgba(31,156,140,0.12); color: var(--teal); font-weight: 600; }

.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.tag.ativo, .tag.pago, .tag.entrada { background: rgba(31,156,140,0.12); color: var(--teal); }
.tag.inativo, .tag.atrasado, .tag.saida { background: rgba(196,30,104,0.1); color: var(--saida-cor); }
.tag.trancado, .tag.pendente { background: var(--color-warning-bg); color: var(--color-warning); }

.valor-cell { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.valor-cell.entrada, .valor-cell.pago { color: var(--teal); }
.valor-cell.saida, .valor-cell.atrasado { color: var(--saida-cor); }
.valor-cell.pendente { color: var(--color-warning); }
.valor-cell.negativo { color: var(--magenta); font-weight: 400; }
/* Tabela agrupada por situação > competência (modal de Situação financeira) — mesmo
   modelo do export em exportar.php (tipo=situacao_aluno). */
/* Linha de grupo (mês/colaborador) clicável em Colaboradores > Jornada de Trabalho >
   Histórico — expande/recolhe as linhas de detalhe (dia a dia) logo abaixo dela. */
.linha-grupo-jornada:hover { background: var(--bg-hover, rgba(128,128,128,0.08)); }
/* Grupo (ou dia, dentro do detalhe expandido) com algum alerta de batida/jornada — fica
   sinalizado em negrito mesmo depois de já lançado/confirmado (o alerta some do texto
   solto de aviso ⚠ da conferência, mas o dado em si continua no banco). O
   motivo + a data exata vêm no title (tooltip nativo do navegador ao passar o mouse).
   Amarelo (mesma cor de "pendente"/"precisa de atenção" usada no resto do sistema), não
   vermelho — vermelho aqui já significa "saldo negativo" (ver .valor-cell.saida), e as
   duas coisas são independentes (um dia com alerta pode ter saldo positivo ou negativo). */
.linha-grupo-jornada-alerta, .linha-grupo-jornada-alerta td,
.linha-detalhe-jornada-alerta, .linha-detalhe-jornada-alerta td { color: var(--amarelo-texto); font-weight: 700; }
/* .valor-cell dentro da linha já tem cor própria (entrada/saida do saldo) — sem esta
   regra mais específica por último, a cor do alerta (menos específica, .linha td) perderia
   pro .valor-cell.entrada/.saida e o saldo não pareceria mais amarelo mesmo dentro de uma
   linha de alerta, ficando inconsistente com o resto da linha (isso é intencional: o
   amarelo do alerta é sobre a LINHA, a cor do saldo continua contando a história dela). */

.tabela-financeira-pivot th, .tabela-financeira-pivot td { text-align: center; }
.tabela-financeira-pivot tr.linha-grupo-situacao td, .tabela-financeira-pivot tr.linha-subgrupo-competencia td { text-align: left; }
.tabela-financeira-pivot tr.linha-grupo-situacao td { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.tabela-financeira-pivot tr.linha-grupo-situacao.grupo-atrasado td { background: rgba(196,30,104,0.1); color: var(--saida-cor); }
.tabela-financeira-pivot tr.linha-grupo-situacao.grupo-pendente td { background: var(--color-warning-bg); color: var(--color-warning); }
.tabela-financeira-pivot tr.linha-grupo-situacao.grupo-pago td { background: rgba(31,156,140,0.12); color: var(--teal); }
.tabela-financeira-pivot tr.linha-subgrupo-competencia td { font-size: 10.5px; font-weight: 600; color: var(--text-muted); background: var(--bg-hover, rgba(128,128,128,0.06)); }

/* Cabeçalho de grupo do catálogo de Estoque (Produtos) — uma linha por produto, com as
   variações (tamanhos) indentadas logo abaixo dela. */
tr.linha-grupo-produto td { background: var(--bg-hover, rgba(128,128,128,0.06)); }
tr.linha-grupo-produto .muted-small { margin-left: 8px; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px; }

/* ============ TABELA DE REVISÃO DE IMPORTAÇÃO ============ */
.tabela-import { table-layout: auto; }
.tabela-import th, .tabela-import td { vertical-align: top; padding: var(--table-pad-compact); }
.tabela-import td { min-width: 118px; }
.tabela-import input, .tabela-import select {
  padding: 6px 8px; font-size: 12px; min-width: 100px;
}
.tabela-import input[type="checkbox"] { min-width: 0; }
.tabela-import input[type="number"] { min-width: 64px; }
.tabela-import tbody tr.linha-erro { background: rgba(196,30,104,0.05); }
.tabela-import tbody tr.linha-aviso { background: rgba(245,169,78,0.08); }
.valor-original {
  font-size: 10px; color: var(--text-muted); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.msg-erro, .msg-aviso {
  font-size: 11px; font-weight: 600; margin-top: 4px; line-height: 1.35;
}
.msg-erro { color: var(--saida-cor); }
.msg-aviso { color: var(--color-warning); }
.tabela-import tr.linha-divisor-parte td {
  background: var(--bg); font-weight: 700; font-size: 12px; color: var(--azul-marinho);
  padding: 10px 8px; border-bottom: 2px solid var(--border);
}
.empty-state .icon { font-size: 28px; margin-bottom: 10px; }

.erro {
  background: var(--color-warning-bg); color: var(--color-warning);
  border-radius: 8px; padding: 10px 14px; font-size: 0.85rem; margin-bottom: 16px;
}
.sucesso { background: rgba(31,156,140,0.12); color: #0F6B5C; }

.subnav { display: flex; gap: 6px; margin-bottom: 14px; }
.subnav a { padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; text-decoration: none; color: var(--text-muted); border: 1px solid var(--border); }
.subnav a.ativo { background: var(--magenta); color: #fff; border-color: var(--magenta); }

.search-form { display: flex; gap: 8px; }
.search-form input { margin-bottom: 0; min-width: 220px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-header h2 { font-family: var(--font-display); color: var(--azul-marinho); font-size: var(--text-lg); }

/* ============ FILTRO DE PERÍODO / SITUAÇÃO (pill) ============ */
.pill-select {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: var(--space-2) var(--space-4); transition: border-color .15s;
}
.pill-select:focus-within { border-color: var(--teal); }
.pill-select label { font-size: 10.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; margin: 0; white-space: nowrap; }
.pill-select input, .pill-select select {
  border: none; background: transparent; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 13px; color: var(--azul-marinho); width: auto; padding: 0; cursor: pointer;
}
.pill-select input:focus, .pill-select select:focus { outline: none; }

/* ============ SUBABAS ============ */
.subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.subtab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted);
  font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.subtab svg { width: 14px; height: 14px; flex-shrink: 0; }
.subtab.ativo { background: var(--magenta); border-color: var(--magenta); color: white; }
.subtab.desativado { opacity: 0.45; cursor: not-allowed; }
.subtab-badge { background: var(--saida-cor); color: white; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px; line-height: 1.5; }

/* Sub-abas dentro de um modal (ex.: "Situação — <nome>" da Equipe) — versão mais slim do
   .subtab de página inteira. A cor de "ativo" é a mesma cor padrão do sistema (.subtab.ativo
   já usa var(--magenta), que o nav.php troca pela cor cadastrada em Configurações > Dados
   da escola quando a escola tem uma cor própria) — não uma cor fixa por aba. */
.modal-body .subtabs .subtab { padding: 5px 12px; font-size: 11.5px; }

/* Abas do modal "Situação — <nome>": barra horizontal de sempre, só alinhada à direita
   (fica acima do conteúdo, igual antes, mas ancorada na ponta direita em vez de esquerda). */
.subtabs-direita { justify-content: flex-end; }
.subtab.ativo .subtab-badge { background: rgba(255,255,255,0.3); }

/* Agrupamento visual de subabas (ex.: Configurações — Escola / Financeiro / Sistema):
   continua sendo UMA barra .subtabs só, com o mesmo .subtab/setSubTab() de sempre — isto
   só adiciona um rótulo maiúsculo por grupo (mesmo espírito do .nav-section-label da
   sidebar) e um separador vertical entre eles, sem virar dropdown/acordeão. */
.subtabs-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.subtabs-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); font-weight: 700; white-space: nowrap;
}
.subtabs-group-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.subtabs-sep { width: 1px; align-self: stretch; min-height: 24px; background: var(--border); margin: 0 2px; }

/* ============ CONFERÊNCIA (Lançamentos > notas fiscais em lote / conciliação bancária) ============ */
/* ============ EDIÇÃO EM MASSA DA COLUNA SITUAÇÃO (Lançamentos/Colaboradores/Alunos) ============ */
.situacao-edit { display: none; padding: 6px 8px; font-size: 12.5px; min-width: 132px; }
tbody.modo-massa .situacao-view { display: none; }
tbody.modo-massa .situacao-edit { display: inline-block; }

/* ============ EDIÇÃO EM MASSA DA COLUNA OBS (Lançamentos de Alunos) — mesmo mecanismo
   acima (toggle .modo-massa no tbody via alternarModoMassaIcone()), só que pra um campo
   de texto livre em vez de data. ============ */
.obs-edit { display: none; padding: 6px 8px; font-size: 12.5px; min-width: 140px; }
tbody.modo-massa .obs-view { display: none; }
tbody.modo-massa .obs-edit { display: inline-block; }

.linha-conferencia { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--border); }
.linha-conferencia:last-child { border-bottom: none; }
.linha-conferencia .field { margin-bottom: 0; flex: 1; min-width: 130px; }
.linha-conferencia .field input:disabled { background: var(--bg); color: var(--text-muted); }
.linha-conferencia .field-nome-extrato { flex: 2.2; min-width: 220px; }
.linha-conferencia > input[type="checkbox"] { width: auto; flex-shrink: 0; align-self: center; margin-bottom: 8px; }
.linha-conferencia .dia-estreito { flex: 0 1 90px; min-width: 80px; }

/* Configurações > Cartões — ícone SVG de cartão (cor = CORES_CARTAO em constantes.php)
   EMBUTIDO dentro do próprio campo "Nome do cartão" (canto esquerdo), com um <select>
   TRANSPARENTE por cima: clicar no ícone abre o dropdown nativo de cor (ver
   campoNomeComIconeCartao() em configuracoes.php e atualizarCorIconeCartao() em app.js) —
   a seleção de cor acontece no próprio ícone, sem campo "Cor" nem elemento solto ao lado
   (ficava desalinhado com o campo Nome). */
.cartao-nome-field { flex: 0 1 190px; min-width: 150px; }
.cartao-nome-input-wrap { position: relative; }
.cartao-nome-input-wrap input[type="text"] { padding-left: 32px; }
.cartao-icone-picker { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 14px; cursor: pointer; z-index: 1; }
.cartao-icone-svg { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)); }
.cartao-icone-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }

/* Tabela de conciliação (Lançamentos > Entrada > Conciliação bancária) — "tabela
   operacional": uma linha-resumo por pagamento (checkbox/tipo/nome/vincular/valor/data)
   com uma segunda <tr> de detalhe escondida por baixo, revelada pelo chevron — só quem
   precisa conferir categoria ou dividir o pagamento em mais de um item precisa abrir. */
.tabela-conciliacao td, .tabela-conciliacao th { vertical-align: middle; }
.linha-conc-resumo td { border-bottom: none; }
.linha-conc-detalhe td { padding-top: 0; }
.linha-conc-detalhe.escondida { display: none; }
.linha-conc-resumo .campo-select-tabela,
.linha-conc-resumo input[type="date"] { font-size: 12.5px; padding: 7px 8px; }
.linha-conc-resumo .conciliacao-valor-total { width: 110px; font-weight: 700; }
.linha-conc-resumo[data-tipo="saida"] .conciliacao-valor-total { color: var(--saida-cor); }
.linha-conc-resumo[data-tipo="entrada"] .conciliacao-valor-total { color: var(--teal); }
.btn-chevron {
  width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: transform .15s, color .15s, border-color .15s;
}
.btn-chevron:hover { border-color: var(--teal); color: var(--teal); }
.btn-chevron.aberto { color: var(--teal); border-color: var(--teal); transform: rotate(180deg); }
.conciliacao-detalhe-conteudo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0 14px; }
.conciliacao-itens { display: flex; flex-direction: column; gap: 6px; }
.conciliacao-item { display: flex; gap: 8px; align-items: center; }
.conciliacao-item select { flex: 1; min-width: 150px; }
.conciliacao-item .valor-estreito { width: 110px; flex-shrink: 0; }
.conciliacao-restante { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-left: auto; }
.conciliacao-restante.restante-zerado { color: var(--teal); }
.conciliacao-restante.restante-negativo { color: var(--saida-cor); }

.conferencia-massa-acoes { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; font-size: 12.5px; }
.conferencia-massa-acoes label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.conferencia-massa-acoes input[type="checkbox"] { width: auto; }
.miniatura-anexo {
  width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
  flex-shrink: 0; text-decoration: none; transition: border-color .15s, color .15s;
}
.miniatura-anexo svg { width: 18px; height: 18px; }
.miniatura-anexo:hover { border-color: var(--teal); color: var(--teal); }
.acoes-conferencia { display: flex; gap: 6px; flex-shrink: 0; }
.acoes-conferencia button { width: 34px; height: 34px; padding: 0; border-radius: 8px; flex-shrink: 0; }

/* ============ GRID DE PAINÉIS (Visão geral) ============ */
.dashboard-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-4); }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }

.panel-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }

.donut-linha { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 6px; }
.donut { width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; position: relative; }
.donut-centro {
  position: absolute; inset: 16px; border-radius: 50%; background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px; color: var(--text); text-align: center; padding: 4px;
}
.donut-legenda { columns: 2; column-gap: 16px; max-width: 460px; }
.legenda-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; break-inside: avoid; margin-bottom: 7px; }
.legenda-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legenda-item .nome { color: var(--text); font-weight: 600; flex: 1; min-width: 0; }
.legenda-item .pct { color: var(--text-muted); flex-shrink: 0; }

.top-categorias { display: flex; flex-direction: column; gap: 12px; }
.cat-row { display: flex; align-items: center; gap: 12px; }
.cat-row .cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cat-row .cat-name { font-size: 12.5px; width: 90px; flex-shrink: 0; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-bar-track { flex: 0 1 45%; height: 8px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 6px; }
.cat-row .cat-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600; flex: 1; min-width: 78px; text-align: right; color: var(--text-muted); }

.btn-chip {
  display: inline-block; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg);
  font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text);
}
.btn-chip:hover { border-color: var(--teal); color: var(--teal); }
/* Variante menor/mais fina do .btn-chip — pra ações secundárias que não precisam do mesmo
   destaque (ex.: "Adicionar Kit" ao lado de uma linha de itens já com botões próprios). */
.btn-chip-sm { padding: 5px 10px; font-size: 11.5px; border-radius: 6px; }

/* ============ CHIPS DE CATEGORIA (Configurações > Categorias) ============ */
/* Entrada e Saída lado a lado em telas largas — antes eram 2 painéis empilhados, exigindo
   bastante rolagem pra ver a lista inteira das duas; empilha de volta só em telas estreitas. */
.categorias-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-bottom: 20px; }
@media (max-width: 900px) { .categorias-colunas { grid-template-columns: 1fr; } }
.categorias-grupo { display: flex; flex-wrap: wrap; gap: 8px; }
.categoria-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--bg);
  color: var(--text); border: 1px solid var(--border);
}
.categoria-chip.fixa { color: var(--text-muted); }
.categoria-chip .del-chip {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; border: none; background: none; color: var(--text-muted); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0;
}
.categoria-chip .del-chip:hover { background: rgba(196,30,104,0.12); color: var(--magenta); }

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* "Ver detalhamento" (donuts de categoria) — link discreto com chevron, sem caixa/fundo. */
summary.btn-detalhe {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--teal); font-size: 12px; font-weight: 600;
  cursor: pointer;
}
summary.btn-detalhe:hover { text-decoration: underline; }
summary.btn-detalhe .chevron-ic { width: 12px; height: 12px; stroke: currentColor; flex-shrink: 0; transition: transform .15s; }
details[open] > summary.btn-detalhe .chevron-ic { transform: rotate(180deg); }

/* <details> genérico pra colapsar um painel inteiro cujo título é um <h3> normal (não o
   link discreto do .btn-detalhe acima) — ex.: "Status dos lançamentos". */
.panel-collapsavel > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.panel-collapsavel > summary .chevron-ic { width: 14px; height: 14px; stroke: var(--text-muted); flex-shrink: 0; transition: transform .15s; }
details[open] > summary .chevron-ic { transform: rotate(180deg); }
summary.btn-detalhe .txt-ocultar { display: none; }
details[open] > summary.btn-detalhe .txt-ver { display: none; }
details[open] > summary.btn-detalhe .txt-ocultar { display: inline; }

/* ---- Pendências: um <details> colapsado por ano de vencimento (mais antigo primeiro),
   cada um com sua própria tabela agrupada por severidade (Atrasado sempre primeiro,
   com faixa destacada, depois A vencer) e subtotal de cada bloco — ver renderPendenciasPorAno()
   em dashboard.php. Reaproveita a mesma convenção de summary sem marcador nativo acima. ---- */
.pendencia-ano { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pendencia-ano summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 14px; background: var(--bg); font-family: var(--font-display); font-weight: 600;
  font-size: 13.5px; color: var(--azul-marinho);
}
.pendencia-ano summary:hover { background: var(--border); }
.pendencia-ano summary .chevron-ic { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; transition: transform .15s; }
.pendencia-ano[open] summary .chevron-ic { transform: rotate(180deg); }
.pendencia-ano summary .contagem-ano { font-family: var(--font-body); font-weight: 500; color: var(--text-muted); font-size: 11.5px; }
.pendencia-ano summary .valor-ano { margin-left: auto; font-variant-numeric: tabular-nums; }
.pendencia-ano table { margin: 0; }
.pendencia-ano table th:first-child, .pendencia-ano table td:first-child { padding-left: 14px; }
.pendencia-ano table th:last-child, .pendencia-ano table td:last-child { padding-right: 14px; }
/* Linha de item clicável (leva pra edição em Lançamentos) — cursor + fundo no hover, pra
   ficar claro que dá pra clicar (antes só tinha cursor:pointer, fácil de não perceber). */
.linha-pendencia-item { cursor: pointer; }
.linha-pendencia-item:hover { background: var(--bg); }

.grupo-faixa td {
  border-bottom: none; font-weight: 700; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 8px 14px;
}
/* Wrapper flex DENTRO do <td> (em vez de display:flex direto no <td>, que em alguns
   motores de tabela não distribui o espaço como um bloco normal) — garante que o rótulo
   fique na ponta esquerda e o valor na ponta direita, ocupando a linha inteira do painel. */
.grupo-faixa-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.grupo-faixa td .valor-cell { font-size: 11.5px; text-transform: none; letter-spacing: normal; }
.grupo-faixa-label { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.grupo-faixa.atrasado td { background: rgba(196,30,104,0.07); color: var(--saida-cor); border-top: 1px solid rgba(196,30,104,0.28); border-bottom: 1px solid rgba(196,30,104,0.28); }
.grupo-faixa.vencer td { background: rgba(245,169,78,0.1); color: var(--color-warning); border-top: 1px solid rgba(245,169,78,0.35); border-bottom: 1px solid rgba(245,169,78,0.35); }
.grupo-faixa .contagem { font-weight: 500; text-transform: none; letter-spacing: normal; opacity: 0.75; }
.grupo-faixa { cursor: pointer; }
.grupo-faixa .chevron-grupo-faixa { width: 11px; height: 11px; vertical-align: -1px; transition: transform .15s; }
.grupo-faixa.fechado .chevron-grupo-faixa { transform: rotate(-90deg); }
tr.subtotal-linha td { border-bottom: 1px dashed var(--border); font-weight: 700; color: var(--text-muted); font-size: 11px; padding-top: 6px; padding-bottom: 10px; }

/* botão de submit só com ícone (funil), usado no lugar do texto "Filtrar" nos
   formulários de período — mesma altura/borda do pill-select ao lado. */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-muted); cursor: pointer; flex-shrink: 0;
}
.btn-icon:hover { border-color: var(--teal); color: var(--teal); opacity: 1; }
.btn-icon svg { width: 16px; height: 16px; stroke: currentColor; }
/* estado "ativo" de um .btn-icon usado como toggle (ex.: Editar em massa em
   Lançamentos > Entradas/Saídas) — preenche de cor pra avisar que o modo está ligado,
   já que sem texto (só ícone) não dava pra contar com um "Cancelar edição em massa". */
.btn-icon.ativo { background: var(--magenta); border-color: var(--magenta); color: white; }
.btn-icon.ativo:hover { color: white; }
/* Botão "Editar em massa" com dois ícones sobrepostos (o normal e um X de cancelar) —
   só um aparece por vez, trocado pela mesma classe .ativo que já muda a cor de fundo, sem
   precisar de JS extra pra isso. */
.btn-icon .icone-massa-cancelar { display: none; }
.btn-icon.ativo .icone-massa-normal { display: none; }
.btn-icon.ativo .icone-massa-cancelar { display: block; }
/* Variante "perigo" do .btn-icon (ex.: excluir selecionados em massa) — só tinge no
   hover, mesmo espírito discreto do .del-btn. */
.btn-icon-danger:hover { border-color: var(--saida-cor); color: var(--saida-cor); }
/* Variante compacta do .btn-icon pra caber dentro de célula de tabela (ex.: "+ vincular
   professor" em Configurações Ano Letivo). */
.btn-icon-sm { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; }
.btn-icon-sm:hover { border-color: var(--teal); color: var(--teal); }

/* ============ TABELA COM BUSCA/FILTROS (cabeçalho de painel) ============ */
.table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }

/* Barra "busca em destaque": título sozinho em cima (.table-header), embaixo a busca
   ocupa o espaço livre e as ações (Editar em massa / Novo lançamento) ficam compactas à
   direita, só ícone/redondo — usada em Lançamentos > Entradas/Saídas em vez de amontoar
   filtro + busca + os dois botões numa linha só com o título. */
.barra-busca-acoes { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.barra-busca-acoes .search-combo { flex: 1; min-width: 0; }
.barra-busca-acoes .search-combo select { max-width: 170px; flex-shrink: 0; }
.acoes-compactas { display: flex; gap: 8px; flex-shrink: 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* V2 §Consistência/Filtros: ".filters select" e ".filtro-dropdown-btn" eram 2
   declarações separadas com os MESMOS valores repetidos (pill 999px, mesmo
   padding/fonte) — sinal de que já eram "um componente" na prática, só não
   compartilhavam a regra. Unificadas aqui num só seletor; cada um mantém só
   seu hover/focus específico abaixo. ".combo-trigger" (combo de vínculo) é
   corrigido mais abaixo pra usar essa MESMA forma de pill — era o único dos
   5 widgets de filtro com cantos quase retos (8px) em vez de pill. */
.filters select, .filtro-dropdown-btn {
  padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--text-sm); font-weight: 600; color: var(--text); background: var(--bg); cursor: pointer; transition: border-color .15s;
}
.filters select { width: auto; }
.filters select:hover, .filters select:focus { border-color: var(--teal); outline: none; }
/* Filtro de Categoria/Subcategoria (Lançamentos > Todos): botão pill (mesmo visual das
   .filters select) que abre um painel com checkbox — cada marcar/desmarcar reenvia o
   form (ver onchange no PHP), então o painel some quando a página recarrega, mas
   "painel_aberto" (hidden input) reabre ele sozinho pra continuar marcando mais opções. */
.filtro-dropdown { position: relative; }
.filtro-dropdown-btn { display: inline-flex; align-items: center; gap: 6px; }
.filtro-dropdown-btn:hover, .filtro-dropdown-btn:focus { border-color: var(--teal); outline: none; }
.filtro-dropdown-btn svg { flex-shrink: 0; }
.filtro-dropdown-painel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 220px; max-width: 280px;
  max-height: 260px; overflow-y: auto; padding: 8px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.filtro-dropdown-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; margin-bottom: 0;
  color: var(--text); cursor: pointer; width: auto;
}
.filtro-dropdown-item:hover { background: var(--bg-hover, rgba(128,128,128,0.08)); }
.filtro-dropdown-item input[type="checkbox"] { width: auto; flex-shrink: 0; cursor: pointer; }
.filtro-dropdown-vazio { padding: 6px 8px; font-size: 12.5px; color: var(--text-muted); }
/* Linha "Marcar"/"Desmarcar" no topo do painel — duas colunas, separada da lista de
   caixinhas abaixo por uma divisória (senão fica tudo junto, sem indicar que é uma ação
   diferente das opções da lista). */
.filtro-dropdown-topo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.filtro-dropdown-topo button {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
  font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .15s;
}
.filtro-dropdown-topo button:hover { border-color: var(--teal); color: var(--teal); }
/* campo de busca em formato pill, com a lupa como um botão circular (CTA) embutido no final —
   a lupa em si é um <button> real (ver .search-wrap/.search-icon-btn e campoBusca() em
   helpers.php), não mais um background-image decorativo: precisa funcionar como o CTA
   de busca, não só parecer um. */
.filters input[type="text"], .search-form input[type="text"] {
  width: auto; padding: var(--space-2) 40px var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--text-sm); background: var(--input-bg); transition: border-color .15s, box-shadow .15s;
}
.filters input[type="text"]:focus, .search-form input[type="text"]:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,156,140,0.12);
}
.search-wrap { position: relative; display: inline-flex; }
.search-icon-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%;
  background: var(--magenta); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-icon-btn svg { width: 14px; height: 14px; stroke: currentColor; }
.search-icon-btn:hover { opacity: .88; }

/* Combo categoria(s) + busca num único pill contínuo — select(s) e campo de texto grudados,
   sem gap entre si, com a lupa como botão circular embutido na borda direita (modelo da
   barra de busca do Google Images). Usado só onde categoria/tipo e busca por descrição
   representam UM filtro combinado; filtros independentes (ex.: Situação) continuam em
   pills separadas (ver .search-wrap acima). As regras abaixo pisam de propósito em
   ".filters select"/".filters input[type=text]" (mesma especificidade, vêm depois no
   arquivo) pra tirar o visual de pill solta de cada campo quando ele mora aqui dentro. */
.search-combo {
  display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 999px;
  background: var(--input-bg); overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.search-combo:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,156,140,0.12); }
.search-combo select {
  border: none; border-right: 1px solid var(--border); background: transparent; border-radius: 0;
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--text); cursor: pointer;
}
.search-combo select:focus { outline: none; }
/* Dropdown de Categoria/Subcategoria dentro do combo (Lançamentos > Todos): mesmo visual
   sem borda própria dos <select> ao lado (só a divisória à direita). "overflow: hidden"
   do .search-combo existe pra cortar os cantos retos dos filhos na forma de pill — mas
   também cortaria o painel de checkbox quando abre, então some só enquanto ele está
   aberto (:has — sem isso o painel apareceria cortado pela metade). */
.search-combo .filtro-dropdown-btn {
  border: none; border-right: 1px solid var(--border); background: transparent; border-radius: 0;
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--text);
}
.search-combo:has(.filtro-dropdown-painel:not([hidden])) { overflow: visible; }
.search-combo input[type="text"] {
  border: none; background: transparent; border-radius: 0; flex: 1; min-width: 150px;
  padding: 9px 14px; font-size: 12.5px;
}
.search-combo input[type="text"]:focus { outline: none; box-shadow: none; }
.search-combo-btn {
  border: none; border-radius: 50%; background: var(--magenta); color: #fff; cursor: pointer;
  width: 28px; height: 28px; margin: 4px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-combo-btn svg { width: 14px; height: 14px; stroke: currentColor; }
.search-combo-btn:hover { opacity: .88; }
th.th-sort { cursor: pointer; user-select: none; }
th.th-sort:hover { color: var(--text); }
.muted-small { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }

/* ============ PAINEL "O QUE PRECISA DA SUA ATENÇÃO HOJE" (Dashboard) ============ */
.atencao-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 10px; margin-top: 10px; }
.atencao-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg); text-decoration: none;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.atencao-item:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
/* Badge circular do ícone (SVG stroke, mesmo estilo dos ícones da sidebar) — cor de fundo
   por severidade (crítico/aviso/info), não mais um emoji solto do tamanho do texto. */
.atencao-icone-badge {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; order: 2;
}
.atencao-icone-badge svg { width: 18px; height: 18px; }
.atencao-icone-badge.atencao-icone-emoji { font-size: 17px; }
/* Número em destaque (quantos itens), antes do badge — a primeira coisa que bate o olho. */
.atencao-contagem {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700;
  min-width: 30px; text-align: center; flex-shrink: 0; order: 1;
}
.atencao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; order: 3; }
.atencao-texto strong { font-size: 13px; color: var(--text); }
.atencao-texto .muted-small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atencao-seta { color: var(--text-muted); font-size: 15px; flex-shrink: 0; order: 4; }
.atencao-critico { border-color: rgba(196,30,104,0.35); }
.atencao-critico:hover { border-color: var(--saida-cor); }
.atencao-critico .atencao-contagem { color: var(--saida-cor); }
.atencao-critico .atencao-icone-badge { background: rgba(196,30,104,0.12); color: var(--saida-cor); }
.atencao-aviso { border-color: rgba(245,169,78,0.4); }
.atencao-aviso:hover { border-color: var(--laranja); }
.atencao-aviso .atencao-contagem { color: var(--color-warning); }
.atencao-aviso .atencao-icone-badge { background: var(--color-warning-bg); color: var(--color-warning); }
/* V2: era var(--magenta) — a cor de marca/CTA fazendo dupla função de "info",
   o que quebraria se uma escola escolhesse magenta/vermelho como cor própria
   no whitelabel. Agora usa --color-info, independente da marca. */
.atencao-info { border-color: rgba(46,125,209,0.35); }
.atencao-info:hover { border-color: var(--color-info); }
.atencao-info .atencao-contagem { color: var(--color-info); }
.atencao-info .atencao-icone-badge { background: var(--color-info-bg); color: var(--color-info); }

/* ============ PAINEL "GERAR INSIGHTS DA MINHA OPERAÇÃO" (Dashboard) ============ */
.insights-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.insights-cabecalho form { flex-shrink: 0; }
.insights-form-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toggle-sutil-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.toggle-sutil-btn:disabled:hover { color: var(--text-muted); }
/* Spinner do botão "Gerar Insights" enquanto a chamada (síncrona, sem AJAX) roda no
   servidor — ver aoGerarInsights() no <script> desta página. */
.btn-spinner {
  display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%;
  animation: btn-spinner-girar .7s linear infinite;
}
@keyframes btn-spinner-girar { to { transform: rotate(360deg); } }
.insights-grupo { margin-top: 16px; }
.insights-grupo-titulo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; }
.badge-motor {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; flex-shrink: 0;
}
.badge-motor-ia { background: rgba(108,60,233,0.12); color: var(--magenta); }
.badge-motor-regras { background: rgba(31,156,140,0.12); color: var(--teal); }
.insights-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 10px; }
.insight-card {
  padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg);
  border-left: 3px solid var(--border);
}
.insight-card strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.insight-card p { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0; }
.insight-alta { border-left-color: var(--saida-cor); }
.insight-media { border-left-color: var(--laranja); }
.insight-baixa { border-left-color: var(--azul-claro); }
.insight-info { border-left-color: var(--teal); }

/* ---- Status do catálogo (Estoque > Produtos) — badge de status por linha ---- */
.status-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; display: inline-block; white-space: nowrap; }
.status-pill.status-em-estoque { background: rgba(31,156,140,0.14); color: var(--teal); }
.status-pill.status-sem-estoque { background: rgba(196,30,104,0.14); color: var(--saida-cor); }

/* ---- Lembretes (Estoque) — pendências acionáveis (crítico/baixo/compras recentes) ---- */
.lembretes-lista { display: flex; flex-direction: column; gap: 8px; }
.lembrete-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.lembrete-item .ic { font-size: 16px; flex-shrink: 0; }
.lembrete-item .txt { flex: 1; font-size: 12.5px; color: var(--text-muted); }
.lembrete-item .txt b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); }
.lembrete-item .cta { font-size: 11.5px; font-weight: 700; color: var(--magenta); white-space: nowrap; text-decoration: none; }

/* ---- Oportunidades (Mural > Eventos) — cartões de recomendação repetir/revisar/pendente ---- */
.oportunidades-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 12px; }
.oportunidade-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.oportunidade-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; align-self: flex-start; }
.oportunidade-repetir .oportunidade-tag { background: rgba(31,156,140,0.14); color: var(--teal); }
.oportunidade-revisar .oportunidade-tag { background: var(--color-warning-bg); color: var(--color-warning); }
.oportunidade-pendente .oportunidade-tag { background: rgba(108,60,233,0.12); color: var(--magenta); }
.oportunidade-card h4 { font-size: 13.5px; font-weight: 700; color: var(--text); }
.oportunidade-card p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ---- Linha do tempo (Mural > Eventos) — um cartão por evento, agrupado por mês, numa
   linha vertical com marcadores (cor = resultado). Cada cartão usa DUAS cat-bar-track
   empilhadas (receita/despesa), mesmo formato de barra do painel "Eventos por categoria"
   — só que aqui o eixo é o tempo, não categoria. Tooltip nativo via title (sem lib). ---- */
.timeline-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 12px; font-size: 11.5px; color: var(--text-muted); }
.timeline-legenda span { display: flex; align-items: center; gap: 5px; }
.timeline-legenda i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.linha-tempo-eventos { position: relative; padding-left: 22px; }
.linha-tempo-eventos::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tempo-mes { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 18px 0 8px; position: relative; }
.tempo-mes:first-child { margin-top: 0; }
.tempo-mes::before { content: ""; position: absolute; left: -22px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--azul-marinho); border: 2px solid var(--card-bg); }

.tempo-evento { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; position: relative; }
.tempo-evento::before { content: ""; position: absolute; left: -20px; top: 16px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--card-bg); background: var(--text-muted); }
.tempo-evento.pos::before { background: var(--teal); }
.tempo-evento.neg::before { background: var(--saida-cor); }
.tempo-evento.pendente::before { background: var(--amarelo); }
.tempo-evento-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.tempo-evento-titulo { font-weight: 700; font-size: 13.5px; }
.tempo-evento-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.tempo-evento-resultado { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14.5px; white-space: nowrap; cursor: default; }
.tempo-evento-resultado.pos { color: var(--teal); }
.tempo-evento-resultado.neg { color: var(--saida-cor); }
.tempo-evento-resultado.pendente { color: var(--amarelo-texto); font-size: 11.5px; }
.tag-pendente-mini { font-size: 10px; font-weight: 700; color: var(--amarelo-texto); background: rgba(242,194,48,0.18); padding: 2px 7px; border-radius: 6px; margin-left: 6px; }
.tempo-evento-bars { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tempo-bar-track { height: 8px; background: var(--card-bg); border-radius: 5px; overflow: hidden; cursor: default; }
.tempo-bar-fill { height: 100%; border-radius: 5px; }
.tempo-bar-fill.receita { background: var(--teal); }
.tempo-bar-fill.despesa { background: var(--saida-cor); }
.tempo-evento-valores { font-size: 11.5px; color: var(--text-muted); }

/* ============ PAGINAÇÃO (modelo A: numerada) ============ */
.paginacao { display: flex; align-items: center; gap: 4px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.paginacao .pg-item {
  min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid var(--border); background: var(--card-bg);
  border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--text-muted); font-family: var(--font-mono);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
}
.paginacao a.pg-item:hover { border-color: var(--teal); color: var(--teal); }
.paginacao .pg-nav { color: var(--azul-marinho); font-weight: 700; }
.paginacao .pg-atual { background: var(--magenta); border-color: var(--magenta); color: white; cursor: default; }
.paginacao .pg-desativado { opacity: 0.4; cursor: default; }
.paginacao .pg-reticencias { color: var(--text-muted); font-size: 12px; padding: 0 3px; }
.paginacao-info { text-align: center; font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }
.paginacao-totais { text-align: center; font-size: 12.5px; color: var(--text-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; margin-top: 4px; }
.paginacao-totais .valor-cell { font-weight: 600; }
.header-hint { font-size: 11.5px; color: var(--text-muted); background: var(--bg); padding: 10px 12px; border-radius: 8px; margin-top: 10px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============ PAINEL DE FORMULÁRIO (campos soltos, não em <form-grid> padrão) ============ */
.field { margin-bottom: var(--space-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); background: var(--card-bg); }
/* Botão de mostrar/ocultar senha (Configurações > Usuários) — ícone de olho sobreposto
   dentro do próprio campo, técnica padrão: input com padding à direita reservando espaço
   pro botão absoluto. Os dois SVGs (olho aberto/riscado) ficam sobrepostos, só um visível
   por vez via a classe .ativo no botão. */
.campo-senha-wrap { position: relative; }
.campo-senha-wrap input { padding-right: 38px; }
.campo-senha-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-muted); border-radius: 6px; }
.campo-senha-toggle:hover { color: var(--text); background: var(--bg); }
.campo-senha-toggle .icone-senha-ocultar { display: none; }
.campo-senha-toggle.ativo .icone-senha-mostrar { display: none; }
.campo-senha-toggle.ativo .icone-senha-ocultar { display: block; }
/* Categoria/Subcategoria preenchidas automaticamente a partir da descrição digitada
   (sugerirCategoriaPorDescricao() em lancamentos.php) — destaque roxo pra deixar claro
   que foi um palpite, não uma escolha manual; some assim que a pessoa mexe no select. */
.campo-sugerido { border-color: var(--magenta) !important; box-shadow: 0 0 0 3px rgba(108,60,233,0.14); }
.span-full { grid-column: 1 / -1; }
.radio-group { display: flex; gap: 16px; align-items: center; padding: 9px 2px; flex-wrap: wrap; }
.radio-group label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); font-weight: 500; text-transform: none; cursor: pointer; }
.radio-group input[type="checkbox"], .radio-group input[type="radio"] { width: auto; accent-color: var(--teal); }

/* V2: era uma cópia quase idêntica de "button, .btn" (linha ~302) — um
   <button class="btn-primary"> já herda padding/cor/radius do seletor base
   de elemento; só o espaçamento acima era diferente. */
.btn-primary { margin-top: 6px; }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text-muted); font-weight: 600; font-size: var(--text-sm); cursor: pointer; margin-top: 6px; margin-left: 8px; text-decoration: none; display: inline-block; }
.btn-secondary:hover { background: var(--bg); }

/* Variante só-ícone do btn-secondary (ex.: Atestado/Exportar em Presença da Equipe) —
   mesmo contorno/fundo, sem texto, quadrado e centralizado; title/aria-label carregam
   o rótulo pra acessibilidade já que não há mais texto visível. */
.btn-secondary.btn-icone { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-secondary.btn-icone svg { width: 16px; height: 16px; }

/* botão redondo "novo X", usado nas subabas Entradas/Saídas ao lado da busca — é um <a>
   na maioria dos usos (fecha um href), então precisa de text-decoration:none explícito:
   sem isso, o "+" (texto puro em vários lugares) aparecia sublinhado feito link comum. */
.btn-fab { position: relative; width: 36px; height: 36px; border-radius: 9px; border: none; background: var(--magenta); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: opacity .15s; text-decoration: none; }
.btn-fab:hover { opacity: .88; }
.btn-fab svg { width: 17px; height: 17px; }

/* ============ PAINEL DE FORMULÁRIO EXPANSÍVEL (Lançamentos) ============ */
.form-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.form-panel-head h3 { margin-bottom: 0; }
.form-panel-close { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; flex-shrink: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.form-panel-close:hover { background: var(--bg); color: var(--text); }

/* ============ GRÁFICO DE BARRAS (Entradas × Saídas) ============ */
/* Largura da coluna é calculada em JS a cada renderização (renderGraficoFluxo() em
   dashboard.php: largura disponível do .chart ÷ nº de colunas, com piso de 40px) e
   aplicada via style.width inline — não fixa em CSS, pra o gráfico preencher o bloco
   inteiro em vez de sobrar espaço vazio quando há poucas colunas (ex.: modo Ano com
   poucos anos de histórico). O piso de 40px evita colunas ilegíveis quando há muitos
   pontos — nesse caso o conjunto passa da largura do painel e o overflow-x abaixo
   assume a rolagem, mesmo comportamento de antes. flex: 0 0 auto porque a largura já
   vem certa via JS — sem isso o flexbox tentaria redistribuir e desalinhar da conta
   índice×largura que a linha de margem usa (ver desenharLinhaMargemChart()). */
.chart { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding-top: 10px; position: relative; overflow-x: auto; }
.chart-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; position: relative; }
/* Régua vertical discreta, só no hover — ajuda a alinhar visualmente a coluna com o
   ponto correspondente na linha de margem por cima. */
.chart-col-guia { position: absolute; top: 0; bottom: 30px; left: 50%; width: 1px; background: var(--border); opacity: 0; pointer-events: none; transition: opacity .1s; }
.chart-col:hover .chart-col-guia { opacity: 1; }
/* Linha de margem de lucro (%), desenhada por cima das barras pelo JS (renderGraficoFluxo/
   desenharLinhaMargemChart) a partir do data-margem de cada .chart-col — escala própria
   (%), independente da escala em R$ das barras. pointer-events:none pra não atrapalhar o
   hover das colunas por baixo (o tooltip é acionado pela coluna inteira, não pelo ponto). */
.chart-margem-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.chart-margem-linha { fill: none; stroke: var(--magenta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-margem-ponto { fill: var(--magenta); stroke: var(--card-bg); stroke-width: 1.5; }
/* Tooltip único e compartilhado (um <div> só, reaproveitado por todas as colunas) — ver
   mostrarChartTooltip()/esconderChartTooltip() no <script> desta página. position:fixed
   porque a posição é calculada a partir de getBoundingClientRect() (coordenadas de
   viewport), sem somar scroll — mais simples e robusto que position:absolute aqui. */
.chart-tooltip {
  position: fixed; pointer-events: none; background: var(--azul-marinho); color: #fff;
  font-size: 11px; line-height: 1.6; padding: 8px 11px; border-radius: 9px; opacity: 0;
  transform: translate(-50%, -100%); transition: opacity .1s; white-space: nowrap; z-index: 50;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.chart-tooltip .e { color: #7CE0C6; }
.chart-tooltip .s { color: #F5A0C6; }

/* Toggle discreto (Subcategoria/Categoria, Mês/Ano) — mais neutro que .segmented-toggle
   (usado no formulário de Colaboradores para CLT/PJ, esse sim continua com destaque de
   cor): aqui o estado ativo é só um leve contraste de fundo, sem cor de marca. */
.toggle-sutil { display: inline-flex; gap: 2px; background: var(--bg); border-radius: 8px; padding: 2px; }
.toggle-sutil-btn { background: none; border: none; padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); border-radius: 6px; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; text-decoration: none; }
.toggle-sutil-btn:hover:not(.ativo) { color: var(--text); }
.toggle-sutil-btn.ativo { background: var(--card-bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
/* V2: testamos agrupar Pago/Previsto + Mês/Ano sob um rótulo "Ver por:", mas na
   prática não ficou mais claro — removido a pedido. O texto dinâmico abaixo do
   gráfico (ver #graficoFluxoSub) já avisa o que mudou, com destaque. */
.sub-destacado { animation: destacarSub 900ms ease; border-radius: 6px; }
@keyframes destacarSub {
  0% { background: var(--color-info-bg); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sub-destacado { animation: none; }
}
/* Toggles Receita/Despesa (DRE em Relatórios, Comparativo do ano x ano): ao contrário dos
   outros toggle-sutil da página (Mês/Ano, Subcategoria/Grupo, sem cor semântica própria),
   esses dois usam a cor de verdade de cada lado — teal pra Receita, vermelho pra Despesa —
   porque os dois lados JÁ são conceitos com cor fixa no resto do sistema (entrada/saída).
   Mesma regra pros dois toggles (mesma cor, mesma ordem Receita→Despesa nos dois lugares). */
#btnDreReceita.ativo, #btnYtdReceita.ativo { background: var(--teal); color: white; }
#btnDreDespesa.ativo, #btnYtdDespesa.ativo { background: var(--saida-cor); color: white; }
/* Toggle Ativo/Inativo do cabeçalho de /alunos?editar (mesmo modelo do toggle-sutil, só
   com cor própria quando selecionado — verde pra Ativo, cinza pra Inativo — em vez do
   contraste neutro padrão). */
.status-ativo-btn.ativo { background: var(--verde-agua); color: #fff; box-shadow: none; }
.status-inativo-btn.ativo { background: var(--text-muted); color: #fff; box-shadow: none; }
/* Linhas horizontais de referência (0/25/50/75/100% do maior valor do período) — dá uma
   régua visual pra comparar a altura das barras sem precisar passar o mouse em cada uma. */
.chart-bars {
  display: flex; gap: 6px; align-items: flex-end; height: 150px; width: 100%; justify-content: center;
  background-image: repeating-linear-gradient(to top, var(--border) 0, var(--border) 1px, transparent 1px, transparent 37.5px);
  background-position: bottom; border-bottom: 1px solid var(--border);
}
.bar-wrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar { width: 16px; border-radius: 4px 4px 0 0; transition: filter .15s; }
.bar.entrada { background: var(--teal); }
.bar.saida { background: var(--saida-cor); }
.bar:hover { filter: brightness(1.18); }
.chart-label { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }

/* Gráfico "Gastos Essenciais" (dashboard, aba Fixos): eixo x = mês/ano (12 meses);
   dentro de cada mês, uma mini-barra LADO A LADO por item (descrição) lançado dentro da
   subcategoria selecionada no select, pra dar pra ver a evolução de Água/Luz/Telefone mês a
   mês mesmo quando os três estão lançados sob a mesma subcategoria genérica (ex. "Contas") —
   cada item sempre na mesma posição/cor dentro do grupinho, mês após mês, pra comparar visual
   fácil. Ocupa a linha inteira (colunas em flex:1). A linha pontilhada é a média por item
   (não o total do mês), na mesma escala das barras individuais. */
.chart-gf-evo { display: flex; flex-direction: column; gap: 6px; }
.chart-gf-evo-label-row { display: flex; gap: 4px; }
.chart-gf-evo-track { display: flex; align-items: flex-end; gap: 4px; position: relative; }
.chart-col-flex { flex: 1 1 0; min-width: 0; }
/* Dentro de .chart (barras simples, ex.: "Receita × Despesa por evento"), a coluna precisa
   de uma largura mínima pra continuar legível quando tiver muitos eventos — sem isso,
   flex:1 1 0 espremeria as colunas até sumir a barra com muitos itens. Com poucos, ainda
   estica pra ocupar o espaço todo do painel (é pra isso que a classe existe aqui). */
.chart .chart-col-flex { min-width: 60px; }
.chart-gf-evo-bar-col { display: flex; justify-content: center; height: 100%; }
.chart-gf-evo-bar-col .bar-wrap { height: 100%; width: 100%; flex-direction: row; align-items: flex-end; justify-content: center; gap: 2px; }
.chart-gf-evo-segmento { width: 7px; flex: 0 0 auto; border-radius: 3px 3px 0 0; transition: filter .15s; }
.chart-gf-evo-segmento:hover { filter: brightness(1.15); }
.chart-gf-evo-media { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--text-muted); opacity: 0.7; z-index: 1; }
.chart-gf-evo-media-rotulo { position: absolute; right: 0; bottom: 3px; font-size: 9.5px; font-weight: 700; color: var(--text-muted); background: var(--card-bg); padding: 0 4px 0 0; white-space: nowrap; }
.chart-gf-evo-label-row .chart-label { text-align: center; font-size: 9.5px; word-break: break-word; }
.chart-gf-evo-legenda { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.chart-gf-evo-legenda-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.chart-gf-evo-legenda-item .dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

/* Gráfico "Comparativo do ano x ano" (Relatórios) — visão de crescimento mês a mês: o
   gráfico ocupa a linha inteira, uma coluna estreita de insights (texto) do lado direito
   (~10% do box, o gráfico fica com o resto). */
.chart-cresc-linha { display: flex; gap: 20px; align-items: stretch; }
.chart-cresc-col-grafico { flex: 9 1 0; min-width: 0; }
/* .chart/.chart-col "de fábrica" não esticam (cada coluna só ocupa a largura do próprio
   conteúdo, pensado pra caber vários itens com scroll horizontal, ex.: eventos do
   Calendário) — aqui, com só 13 meses, isso deixava um vão vazio enorme entre as barras
   e a coluna de insights. Só nesse gráfico específico, força width:100% + as colunas
   dividindo o espaço em partes iguais (flex:1 em vez de 0 0 auto). */
.chart-cresc-col-grafico .chart { width: 100%; overflow-x: visible; }
.chart-cresc-col-grafico .chart-col { flex: 1 1 0; min-width: 0; }
.chart-cresc-col-insights { flex: 1 1 160px; min-width: 150px; border-left: 1px solid var(--border); padding-left: 16px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.chart-cresc-insight-item { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.chart-cresc-insight-item strong { color: var(--text); }
@media (max-width: 760px) { .chart-cresc-linha { flex-direction: column; } .chart-cresc-col-insights { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 12px; } }

.chart-cresc-var { font-size: 10.5px; font-weight: 700; text-align: center; white-space: nowrap; color: var(--text-muted); }
.chart-cresc-var.boa { color: var(--teal); }
.chart-cresc-var.ruim { color: var(--saida-cor); }
/* Saldo do mês, embaixo do rótulo — o número que mais importa (positivo/negativo) de
   bater o olho, sem precisar comparar a altura das duas barras uma com a outra. */
.chart-saldo { font-size: 9.5px; font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 20px; white-space: nowrap; }
.chart-saldo.positivo { color: var(--teal); background: rgba(31,156,140,0.12); }
.chart-saldo.negativo { color: var(--saida-cor); background: rgba(196,30,104,0.1); }

/* ============ SEÇÃO RECOLHÍVEL (comparativo mês a mês) ============ */
.sec { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.sec-head { display: flex; align-items: center; gap: 11px; padding: 13px 15px; cursor: pointer; user-select: none; background: #FCFBF9; }
.sec-badge { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.sec-head .txt { flex: 1; min-width: 0; }
.sec-head .txt h4 { font-size: 13.5px; font-weight: 600; margin: 0; color: var(--text); }
.sec-head .txt span { font-size: 11.5px; color: var(--text-muted); }
.sec-head .chev { font-size: 11px; color: var(--text-muted); transition: transform .15s; flex-shrink: 0; }
.sec.collapsed .sec-head .chev { transform: rotate(-90deg); }
.sec-body { padding: 16px 15px 18px; border-top: 1px solid var(--border); }
.sec.collapsed .sec-body { display: none; }
.badge-1 { background: var(--magenta); }
.badge-2 { background: var(--rosa); }
.badge-3 { background: var(--azul-marinho); }
.badge-4 { background: var(--teal); }

/* ============ PAINEL COLAPSÁVEL (registrar compra/venda no Estoque) ============ */
.collapsible-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.collapsible-header .htitle { display: flex; align-items: center; gap: 10px; }
.collapsible-header .plus-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--magenta); color: white; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.collapsible-header h3 { margin-bottom: 0; }
.collapsible-header .chevron { font-size: 12px; color: var(--text-muted); transition: transform .15s; }
.collapsible-panel.open .collapsible-header .chevron { transform: rotate(180deg); }
.collapsible-body { display: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.collapsible-panel.open .collapsible-body { display: block; }

.tag.clt { background: rgba(37,75,119,0.1); color: var(--azul-marinho); }
.tag.pj { background: rgba(217,112,158,0.15); color: var(--rosa); }
.tag.alerta { background: var(--color-warning-bg); color: var(--color-warning); }
.tag.admin { background: rgba(37,75,119,0.1); color: var(--azul-marinho); }
.tag.financeiro { background: rgba(31,156,140,0.12); color: var(--teal); }
.tag.secretaria { background: rgba(217,112,158,0.15); color: var(--rosa); }

/* ============ CALENDÁRIO (Mural de Eventos) ============ */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.cal-header h3 { margin-bottom: 0; }
.cal-header-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-nav { display: flex; gap: 8px; }
.cal-nav button, .cal-nav a { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-size: 14px; color: var(--azul-marinho); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.cal-nav button:hover, .cal-nav a:hover { border-color: var(--teal); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 6px; }
.cal-weekdays span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.cal-dia { min-height: 84px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: var(--input-bg); overflow: hidden; }
.cal-dia.vazio { border: none; background: none; }
.cal-dia.hoje { border-color: var(--magenta); background: rgba(196,30,104,0.05); }
.cal-dia-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.cal-dia.hoje .cal-dia-num { color: var(--magenta); }
.cal-item { font-size: 9.5px; padding: 1px 4px; margin-bottom: 2px; border-radius: 4px; background: rgba(37,75,119,0.08); color: var(--azul-marinho); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.cal-item, a.cal-day-item { display: block; text-decoration: none; cursor: pointer; }
a.cal-item:hover, a.cal-day-item:hover { filter: brightness(0.94); }
a.cal-day-item { display: flex; }
.cal-item.tipo-aniversario-aluno, .cal-item.tipo-aniversario-colaborador { background: rgba(46,125,209,0.16); color: #1B5490; }
.cal-item.tipo-evento { background: var(--color-warning-bg); color: var(--color-warning); }
.cal-item.tipo-lembrete { background: rgba(242,194,48,0.22); color: var(--amarelo-texto); }
.cal-item.tipo-vencimento { background: rgba(196,30,104,0.12); color: var(--saida-cor); }
/* Vencimento a receber (entrada) fica verde, igual ao resto do sistema — mesmo filtro/
   checkbox "Vencimentos" da legenda, só a cor muda pra diferenciar de um vencimento a pagar. */
.cal-item.tipo-vencimento.venc-entrada { background: rgba(31,156,140,0.14); color: var(--teal); }
.cal-item-mais { font-size: 9px; color: var(--text-muted); }

/* Legenda de cores do calendário (Mural) — chips com o dot + rótulo, mesmas cores usadas
   em .cal-item/.cal-day-item, pra deixar explícito o que cada cor representa. O último
   chip (Vencimentos) é interativo — checkbox escondido dentro do <label>, estilo próprio
   pra sinalizar que é ligável/desligável (borda tracejada), diferente dos 3 informativos. */
.cal-legenda-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.cal-legenda-dot.aniversario-aluno, .cal-legenda-dot.aniversario-colaborador { background: #2E7DD1; }
/* Aniversários (aluno + equipe) usam uma cor só na legenda — um checkbox liga/desliga
   os dois tipos juntos, mas visualmente é uma categoria única. */
.cal-legenda-dot-aniversarios { background: #2E7DD1; width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.cal-legenda-dot.evento { background: var(--laranja); }
.cal-legenda-dot.lembrete { background: var(--amarelo); }
.cal-legenda-dot.vencimento { background: var(--saida-cor); }

/* ---- Legenda flutuante (Mural > Calendário) — botão discreto que abre um popover com
   as 5 categorias, cada uma com checkbox (não só Vencimentos, que era o único caso antes)
   — ver toggleCategoriaCalendario()/toggleLegendaCalendarioPopover() no <script>. ---- */
.cal-legenda-flutuante { position: relative; }
.cal-legenda-btn {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; font-family: inherit;
}
.cal-legenda-btn:hover { border-color: var(--magenta); color: var(--text); }
.cal-legenda-btn-dots { display: flex; gap: 2px; }
.cal-legenda-btn-dots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.cal-legenda-popover {
  position: absolute; top: calc(100% + 8px); right: 0; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  padding: 12px; width: 230px; z-index: 30; display: none; flex-direction: column; gap: 9px;
}
.cal-legenda-popover.aberta { display: flex; }
.cal-legenda-popover-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.cal-legenda-popover-item input[type="checkbox"] { margin-left: auto; width: auto; accent-color: var(--magenta); }
@media (max-width: 900px) { .cal-dia { min-height: 56px; } .cal-item { display: none; } }

/* Alterna entre visões Hoje / Semana / Mês do calendário. */
.cal-visao-switch { display: flex; gap: 3px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.cal-visao-switch a { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.cal-visao-switch a.ativo { background: var(--card-bg); color: var(--magenta); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* Visão Semana — mesma grade de 7 colunas do mês, células mais altas com a lista de itens por inteiro (sem cortar em 3). */
.cal-week-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; }
.cal-week-dia { border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--input-bg); min-height: 170px; }
.cal-week-dia.hoje { border-color: var(--magenta); background: rgba(196,30,104,0.05); }
.cal-week-dia-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cal-week-dia-cab span:first-child { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.cal-week-dia.hoje .cal-dia-num { color: var(--magenta); }
.cal-week-dia-itens .cal-item { white-space: normal; font-size: 10.5px; padding: 3px 5px; }
.cal-week-vazio { font-size: 11px; color: var(--text-muted); text-align: center; padding: 14px 0; }
@media (max-width: 900px) { .cal-week-dia { min-height: 100px; padding: 6px; } }

/* Visão Hoje (dia) — lista vertical com todos os itens do dia, sem limite de 3. */
.cal-day-list { display: flex; flex-direction: column; gap: 8px; }
.cal-day-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--input-bg); border-left-width: 3px; }
.cal-day-item-icone { font-size: 20px; line-height: 1; }
.cal-day-item-titulo { font-weight: 700; font-size: 13.5px; }
.cal-day-item-detalhe { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cal-day-item.tipo-aniversario-aluno, .cal-day-item.tipo-aniversario-colaborador { border-left-color: #2E7DD1; }
.cal-day-item.tipo-evento { border-left-color: var(--laranja); }
.cal-day-item.tipo-lembrete { border-left-color: var(--amarelo); }
.cal-day-item.tipo-vencimento { border-left-color: var(--saida-cor); }
.cal-day-item.tipo-vencimento.venc-entrada { border-left-color: var(--teal); }

/* ============ PRESENÇA DA EQUIPE — grade unificada (Colaboradores > Jornada de Trabalho) ===
   Uma linha por colaborador, uma coluna por dia do mês + Dias/Horas/Saldo no fim — ver
   statusDiaPresenca() em colaboradores.php. Larguras/colunas vêm inline (dependem do nº
   de dias do mês). Substitui as antigas grades .gp-* (Presença + Histórico separados). */
.grid-unif { display: grid; min-width: 1080px; }
.gu-cel { display: flex; align-items: center; justify-content: center; height: 40px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 10.5px; }
.gu-nome { justify-content: flex-start; padding: 0 10px; font-family: var(--font-body); border-right: 1px solid var(--border); overflow: hidden; }
.gu-nome-wrap { display: flex; flex-direction: column; gap: 1px; overflow: hidden; min-width: 0; }
.gu-nome-wrap strong, .gu-nome-wrap span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gu-nome-wrap strong { font-size: 12.5px; }
.gu-nome-wrap span { font-size: 10px; color: var(--text-muted); font-weight: 500; }
.gu-head { height: 44px; flex-direction: column; gap: 2px; color: var(--text-muted); font-weight: 700; border-bottom: 2px solid var(--border); }
.gu-head .gu-dow { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.gu-head .gu-num { font-size: 12px; }
.gu-head-feriado { color: var(--azul-marinho); }
.gu-head-fds { color: #B6AFA5; }
.gu-dia { margin: 3px; border-radius: 8px; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gu-dia:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.14); }
.gu-dia svg { width: 14px; height: 14px; stroke-width: 2.5; }
.gu-dia-trabalhou { background: rgba(31,156,140,0.62); color: #0E5A50; }
.gu-dia-falta { background: rgba(196,30,104,0.55); color: #7A0F3F; }
.gu-dia-atestado { background: rgba(245,169,78,0.62); color: var(--color-warning); }
.gu-dia-evento { background: rgba(143,180,217,0.62); color: #1B4C7A; }
.gu-dia-ferias { background: rgba(155,107,209,0.55); color: #5B3A82; cursor: default; }
.gu-dia-fds, .gu-dia-feriado { background: var(--bg); cursor: default; }
.gu-dia-alerta { background: rgba(31,156,140,0.62); color: var(--saida-cor); box-shadow: 0 0 0 2px var(--saida-cor); }
/* Dias que ainda não chegaram — sem ícone, só um indicativo pastel de "dia útil"/"tem
   evento" à frente (não é falta, ainda não aconteceu, por isso não clicável). */
.gu-dia-futuro { background: rgba(31,156,140,0.16); cursor: default; }
.gu-dia-futuro-evento { background: rgba(143,180,217,0.30); cursor: default; }
.gu-sep { border-right: 2px solid var(--border); }
.gu-col-resumo { font-size: 9px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.stat-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 0; }
.stat-pill .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px; }
.stat-pill .l { font-size: 8px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-weight: 600; }
.stat-pill.teal .n { color: var(--teal); }
.stat-pill.saida .n { color: var(--saida-cor); }
.gu-legenda { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.gu-leg-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-muted); }
.gu-leg-swatch { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.gu-leg-swatch svg { width: 11px; height: 11px; stroke-width: 3; }

/* ============ FÉRIAS DA EQUIPE — linha do tempo (Gantt) unificada ============
   Uma linha por colaborador, barras posicionadas por % de dia-do-ano (ver
   diaDoAnoClipado() em colaboradores.php) — substitui as antigas tabelas "Próximas
   férias" + "Férias da Equipe" separadas. Mesmo espírito visual da grade de Presença. */
.ferias-tl{ margin-top:18px; min-width:900px; }
.ferias-tl-head{ display:grid; grid-template-columns:190px 1fr 150px; align-items:end; margin-bottom:2px; }
.ferias-tl-meses{ position:relative; height:22px; border-bottom:2px solid var(--border); }
.ferias-tl-mes-label{ position:absolute; bottom:4px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--text-muted); transform:translateX(2px); }
.ferias-tl-mes-atual{ position:absolute; top:0; bottom:0; background:rgba(108,60,233,0.16); border-left:2px solid rgba(108,60,233,0.55); border-right:2px solid rgba(108,60,233,0.55); pointer-events:none; }
.ferias-tl-mes-label.atual{ color:var(--magenta); }
.ferias-tl-resumo-head{ font-size:9px; text-transform:uppercase; letter-spacing:0.03em; color:var(--text-muted); font-weight:700; padding-bottom:6px; border-bottom:2px solid var(--border); padding-left:14px; }
.ferias-tl-row{ display:grid; grid-template-columns:190px 1fr 150px; align-items:center; min-height:56px; border-bottom:1px solid var(--border); }
.ferias-tl-row:last-child{ border-bottom:none; }
.ferias-tl-nome{ display:flex; flex-direction:column; gap:1px; padding-right:12px; min-width:0; }
.ferias-tl-nome strong{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ferias-tl-nome span{ font-size:10.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ferias-tl-track-wrap{ position:relative; height:56px; }
.ferias-tl-mes-atual-track{ position:absolute; top:0; bottom:0; background:rgba(108,60,233,0.10); pointer-events:none; }
.ferias-tl-track{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:24px; background:var(--bg); border-radius:6px; }
.ferias-tl-track.vencendo{ box-shadow:inset 0 0 0 1.5px rgba(245,169,78,0.55); }
.ferias-tl-track.vencida{ box-shadow:inset 0 0 0 1.5px rgba(196,30,104,0.45); }
.ferias-tl-bar{ position:absolute; top:50%; transform:translateY(-50%); height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:9.5px; font-weight:700; color:#fff; text-decoration:none; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.1); min-width:30px; padding:0 5px; overflow:hidden; white-space:nowrap; }
.ferias-tl-bar:hover{ filter:brightness(1.06); box-shadow:0 3px 10px rgba(0,0,0,0.18); }
.ferias-tl-bar.emdia{ background:var(--teal); }
.ferias-tl-bar.adiantada{ background:var(--azul-marinho); }
.ferias-tl-bar.emferias{ background:var(--magenta); }
.ferias-tl-track-clique{ position:absolute; inset:0; border-radius:6px; cursor:pointer; text-decoration:none; }
.ferias-tl-track-clique:hover{ background:rgba(0,0,0,0.03); }
.ferias-tl-resumo{ padding-left:14px; }
.ferias-tl-cap{ font-size:10px; color:var(--text-muted); margin-top:4px; }
.ferias-pill{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; }
.ferias-pill.emdia{ background:rgba(31,156,140,0.12); color:var(--teal); }
.ferias-pill.vencendo{ background:var(--color-warning-bg); color:var(--color-warning); }
.ferias-pill.vencida{ background:rgba(196,30,104,0.12); color:var(--saida-cor); }
.ferias-pill.emferias{ background:rgba(108,60,233,0.12); color:var(--magenta); }
.ferias-pill.adiantada{ background:rgba(37,75,119,0.12); color:var(--azul-marinho); }
.ferias-pill.aquisicao{ background:var(--bg); color:var(--text-muted); }
.ferias-tl-legenda{ display:flex; flex-wrap:wrap; gap:16px; margin-top:20px; padding-top:14px; border-top:1px solid var(--border); }
.ferias-tl-leg-item{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-muted); }
.ferias-tl-leg-swatch{ width:16px; height:12px; border-radius:4px; flex-shrink:0; }

/* ============ TOGGLE (Status ativo/inativo — Aluno) ============ */
.status-toggle-row { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; cursor: pointer; background: var(--border); border-radius: 999px; transition: background .15s; }
.toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.toggle-switch input:checked + .toggle-slider { background: var(--teal); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-label { font-size: 13px; font-weight: 600; color: var(--text); }

/* variante pra alternâncias entre duas opções igualmente válidas (ex.: forma de
   compensação de horas extras em Colaboradores) — NÃO é status ativo/inativo, então a
   bolinha nunca fica cinza feito "desligada"; os dois lados ficam coloridos, só troca
   de cor. */
.toggle-switch-neutro .toggle-slider { background: var(--azul-claro); }
.toggle-switch-neutro input:checked + .toggle-slider { background: var(--teal); }

/* alternância de duas opções em segmento (dois botões lado a lado, o ativo preenchido)
   — usada em pares sem noção de ativo/inativo onde o toggle-switch de pílula (acima)
   não é claro o bastante (ex.: CLT/PJ em Colaboradores). */
.segmented-toggle { display: inline-flex; background: rgba(108,60,233,0.08); border-radius: 10px; padding: 3px; gap: 3px; width: fit-content; }
.segmented-toggle .seg-btn {
  padding: 8px 16px; border: none; border-radius: 7px; background: transparent;
  color: var(--magenta); font-weight: 700; font-size: 12.5px; cursor: pointer; transition: background .15s, color .15s;
  text-decoration: none; display: inline-block;
}
.segmented-toggle .seg-btn:hover:not(.ativo) { background: rgba(108,60,233,0.14); }
.segmented-toggle .seg-btn.ativo { background: var(--magenta); color: #fff; box-shadow: 0 2px 6px rgba(108,60,233,0.35); }

/* Status de entrega (Estoque > Lançamentos) — mesma ideia de segmento (dois botões, o
   ativo preenchido) do .segmented-toggle acima, mas em classes próprias (não reaproveita
   .segmented-toggle/.seg-btn) pra não depender de empatar especificidade CSS com aquele
   componente — cada lado aqui tem sua própria cor (teal = entregue, âmbar = pendente/
   encomendado) e o tamanho é bem menor, pra caber numa célula de tabela. */
.status-entrega-toggle { display: inline-flex; background: rgba(128,128,128,0.1); border-radius: 7px; padding: 2px; gap: 2px; width: fit-content; }
.status-entrega-btn {
  padding: 3px 8px; border: none; border-radius: 5px; background: transparent;
  color: var(--text-muted); font-weight: 700; font-size: 10.5px; line-height: 1.4; cursor: pointer; transition: background .15s, color .15s;
}
.status-entrega-btn:hover { background: rgba(128,128,128,0.16); }
.status-entrega-btn.entrega-entregue-ativo { background: var(--teal); color: #fff; }
.status-entrega-btn.entrega-pendente-ativo { background: var(--laranja); color: #fff; }

/* No form "Registrar compra ou venda", o toggle de status fica ao lado de "Vender para"/
   "Fornecedor" (um .combo-trigger/<select> normal, bem mais alto) — sem aumentar só aqui,
   o toggle pequeno da tabela de Histórico ficava baixo demais nessa coluna, desalinhado do
   controle vizinho mesmo com align-items:end na linha. */
#campoStatusEntregaCompra .status-entrega-btn, #campoStatusEntregaVenda .status-entrega-btn {
  padding: 9px 12px; font-size: 12px;
}

/* ============ COR DE DESTAQUE (WHITELABEL) — um único círculo de seleção, sem presets ============ */
.field input.color-input-big, .color-input-big { width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: none; flex-shrink: 0; box-shadow: 0 0 0 1.5px var(--border); }
.color-input-big::-webkit-color-swatch-wrapper { padding: 0; }
.color-input-big::-webkit-color-swatch { border: none; border-radius: 50%; }
.color-input-big::-moz-color-swatch { border: none; border-radius: 50%; }

/* ============ LOGO DA ESCOLA (Dados da Escola) ============ */
.logo-preview {
  width: 68px; height: 68px; border-radius: 14px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--magenta), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: white;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; background: white; }

/* Linha única da Marca: logo clicável + nome + iniciais + cor, aproveitando a mesma linha
   em vez de espalhar cada campo num bloco separado. */
.marca-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.marca-row .field { flex: 1; min-width: 160px; margin-bottom: 0; }
.marca-row .campo-nome-escola { flex: 0 1 220px; }
.marca-row .campo-iniciais { flex: 0 0 90px; min-width: 0; }
.marca-row .campo-cor { flex: 0 0 60px; min-width: 0; }
.marca-row .campo-cor input.color-input-big { width: 40px; height: 40px; }

.logo-preview-btn { position: relative; border: none; background: none; padding: 0; cursor: pointer; border-radius: 14px; flex-shrink: 0; }
.logo-edit-ic {
  position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--azul-marinho); color: #fff; border: 2px solid var(--card-bg);
  display: flex; align-items: center; justify-content: center;
}
.logo-edit-ic svg { width: 11px; height: 11px; stroke: currentColor; }
.logo-remove-ic {
  position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--saida-cor); color: #fff; border: 2px solid var(--card-bg); padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.logo-remove-ic svg { width: 10px; height: 10px; stroke: currentColor; }

/* ============ NOTIFICAÇÕES ============ */
.notif-lista { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.notif-card { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border); }
.notif-card.unread { background: rgba(196,30,104,0.05); border-color: rgba(196,30,104,0.25); }
.notif-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notif-card-title { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); display: inline-block; flex-shrink: 0; }
.notif-card-data { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.notif-card-msg { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-top: 6px; }

/* ============ CONFIGURAÇÕES ============ */
.turma-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 14px; margin-top: 6px; }

/* ============ TURMAS — TABELA MESTRE-DETALHE (aba Turmas em Alunos) ============ */
.turmas-md-table { width: 100%; border-collapse: collapse; }
.turmas-md-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.turmas-md-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
/* Compacta: com 8 colunas de dado + chevron, cabe mais gente numa tela normal com fonte e
   padding menores — o wrapper overflow-x:auto ao redor da tabela cobre o resto (telas
   estreitas continuam roláveis, nada é cortado). */
.turmas-md-table-compacta th, .turmas-md-table-compacta td { padding: var(--table-pad-compact); font-size: var(--table-cell-size-compact); }
.turma-md-row { cursor: pointer; }
.turma-md-row:hover { background: var(--bg); }
.turma-md-nome { font-family: var(--font-display); font-weight: 600; color: var(--azul-marinho); }
.turma-md-row .turnos { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.turma-md-sem-docente { font-size: 11.5px; color: var(--laranja); white-space: nowrap; }
.turma-md-professoras { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 4px; }
.turma-md-vincular { display: inline-flex; align-items: center; gap: 5px; }
.turma-md-vincular select { font-size: 11px; padding: 4px 6px; }
.turma-md-vincular .btn-icon { width: 24px; height: 24px; border-radius: 6px; }
.turma-md-refeicao { white-space: nowrap; }
.turma-md-chevron { color: var(--text-muted); transition: transform .15s; }
.turma-md-row.aberta .turma-md-chevron { transform: rotate(90deg); }
.turma-md-detalhe { background: var(--bg); }
.turma-md-detalhe td { padding: 14px 20px; cursor: default; }
.turma-md-alunos-lista { display: flex; flex-direction: column; gap: 4px; }
.turma-aluno-item { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.turma-aluno-item:last-child { border-bottom: none; }

/* Configurações Ano Letivo (planilha única) — grade com TURMA EM COLUNA (formato aprovado
   no protótipo): uma tabela só, cada linha é um valor (professores, faixa de hora, taxas,
   itens adicionais), cada turma é uma coluna. A primeira coluna (rótulo da linha) fica fixa
   ao rolar horizontalmente quando há muitas turmas. */
.tabela-scroll { overflow-x: auto; }
.grade-turmas-config { border-collapse: collapse; width: 100%; }
.grade-turmas-config th, .grade-turmas-config td { padding: var(--table-pad-compact); vertical-align: middle; border-bottom: 1px solid var(--border); }
.grade-turmas-config thead th { border-bottom: 2px solid var(--border); font-size: var(--table-cell-size-compact); }
.grade-turmas-config .col-rotulo { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 600; font-size: 12.5px; white-space: nowrap; min-width: 140px; }
.grade-turmas-config thead .col-rotulo { z-index: 2; }
.grade-turmas-config .col-valor, .grade-turmas-config .col-professores { min-width: 118px; }
.grade-turmas-config .campo-moeda { width: 100px; }
.grade-turmas-config .linha-secao td { background: var(--bg); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: 10px; position: static; }
.nome-turma-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btn-icone-mini { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px; }
.btn-icone-mini:hover { color: var(--vermelho); }
/* Chip de professor na grade de turmas: nome já vem abreviado do PHP
   (abreviarNomeProfessor), mas ainda pode passar de uma linha em coluna estreita — fonte e
   preenchimento menores que o .categoria-chip padrão (usado em telas com mais espaço, tipo
   categorias) pra caber melhor lado a lado com o "+" de vincular. */
.professores-cell-wrap .categoria-chip { font-size: 11px; padding: 5px 9px; gap: 4px; text-align: center; line-height: 1.25; }
.professores-cell-wrap .categoria-chip .del-chip { width: 15px; height: 15px; font-size: 10px; flex-shrink: 0; }

/* NUNCA display:flex direto no <td> (.col-professores) — isso tira a célula do modo
   table-cell e quebra o alinhamento em coluna da linha inteira (cada <td> "solto" passa a
   empilhar abaixo do anterior em vez de ficar lado a lado). O flex vai num <div> por dentro. */
.professores-cell-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* Chip de professor "extra" (apoio/auxiliar) — mesma pílula de .categoria-chip, só com um
   tom mais amarelado pra diferenciar rápido do professor efetivo (padrão, sem cor extra). */
.chip-professor-extra { background: rgba(242,194,48,0.16); border-color: rgba(166,124,0,0.3); color: var(--amarelo-texto); }
.chip-professor-extra small { opacity: .8; }

/* Painel "Duplicar pra o próximo ano" — mesmo tom informativo usado nas mensagens de
   sucesso (.erro.sucesso), só sem ser um alerta de resultado de ação. */
.aviso-info { background: rgba(37,75,119,0.06); border: 1px solid rgba(37,75,119,0.18); border-radius: 10px; padding: 14px 16px; }

/* Painel "Custo x Receita por turma" — um card por turma, mesmo grid auto-fill usado em
   outros paineis de cards do sistema. */
.cards-custo { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.card-custo-turma { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.card-custo-turma h4 { margin: 0 0 10px; font-size: var(--text-sm); }
.card-custo-linha { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--text-muted); padding: 3px 0; }
.card-custo-resultado { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }

/* "Ano letivo" (Configurações → Turmas) usa .pill-select dentro de .filters — sem este
   reforço, ".filters select" (mesma especificidade, vem depois no arquivo) reaplicaria o
   visual de pill solta no <select>, duplicando o contorno dentro do .pill-select. */
.filters .pill-select select {
  width: auto; padding: 0; border: none; border-radius: 0; background: transparent;
  font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--azul-marinho); cursor: pointer;
}


/* ============ MODAL: SITUAÇÃO (aluno/colaborador) ============ */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(20,18,15,0.5); z-index: 1000; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal-card { background: var(--card-bg); border-radius: var(--radius); max-width: 840px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.28); overflow: hidden; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card-bg); }
.modal-head h3 { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; color: var(--azul-marinho); margin-bottom: 2px; }
.modal-body { padding: 24px; max-height: 72vh; overflow-y: auto; }
.modal-body h4 { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--azul-marinho); margin: 22px 0 10px; }
.modal-body h4:first-child { margin-top: 0; }
.modal-body table { margin-bottom: 4px; }
.modal-body .cards { grid-template-columns: repeat(2, 1fr); }
.modal-body .cards-sm { grid-template-columns: repeat(3, 1fr); }
.modal-body .card .valor { font-size: 19px; }
.tag-btn { border: none; cursor: pointer; font: inherit; }
/* Linha discreta abaixo dos cards de Situação financeira (Alunos) somando os 3 valores —
   não é mais um dado novo (é só Pago+Vencido+A Pagar), então fica pequena e sem destaque,
   diferente dos cards acima. */
.cards-soma-total { text-align: left; font-size: 11px; color: var(--text-muted); margin: -6px 0 16px; font-variant-numeric: tabular-nums; }

/* ============ agrupamento compacto de formulário (Lançamentos > Novo lançamento) ============ */
.linha3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.linha4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.linha5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
/* Mesma proporção 2fr:1fr do .form-grid com .span-2 (Descrição:Tipo, Lançamentos > Novo
   lançamento) — usada pra alinhar a linha de baixo (Categoria/Subcategoria/Evento :
   Valor/Juros) embaixo dos campos de cima, cada lado dividido em partes iguais dentro da
   sua própria zona (ver .linha3/.linha2 aninhados dentro de cada zona). */
.linha-desc-tipo { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.valor-estreito { max-width: 160px; }
.rotulo-grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 18px 0 8px; }
.rotulo-grupo:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .linha3, .linha2, .linha4, .linha5, .linha-desc-tipo { grid-template-columns: 1fr; }
  .valor-estreito { max-width: none; }

  /* V2 §Acessibilidade: a maioria dos botões-ícone fica em 24-38px (abaixo da
     recomendação de 44px de alvo de toque) e nenhum breakpoint aumentava isso —
     mesmo tamanho em celular e desktop. Aumenta só a ÁREA de toque (min-width/
     height) sem mudar o tamanho visual do ícone/glifo dentro, então não há
     ganho de peso visual, só de acerto de clique no dedo. */
  .btn-icon, .btn-icon-sm, .btn-fab, .btn-chevron,
  .search-icon-btn, .search-combo-btn,
  .cal-nav button, .cal-nav a, .theme-toggle-btn,
  .del-btn, .edit-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============ LINHA COMPACTA (Estoque > lote de compras) ============ */
/* Estoque > Registrar compra ou venda — sinaliza por cor (mesmo padrão entrada/saída do
   resto do sistema) qual tipo está selecionado: compra = teal, venda = --saida-cor. */
.mv-tipo-select.mv-tipo-compra { border-color: var(--teal); background: rgba(31,156,140,0.1); color: var(--teal); font-weight: 700; }
.mv-tipo-select.mv-tipo-venda { border-color: var(--saida-cor); background: rgba(196,30,104,0.08); color: var(--saida-cor); font-weight: 700; }

/* O painel inteiro (borda, título, botões) segue o tom do tipo selecionado — mesma cor de
   entrada/saída do resto do sistema, só que aplicada ao modal todo, não só ao select.
   border-width explícito (não só border-color) porque #id.classe já teria especificidade
   suficiente pra vencer .panel sozinho, mas deixar a borda mais grossa também torna a
   troca óbvia mesmo em telas onde a diferença de cor sozinha passaria despercebida. */
#form-mov-novo.tema-compra { border-width: 2px; border-color: var(--teal); }
#form-mov-novo.tema-venda { border-width: 2px; border-color: var(--saida-cor); }
#form-mov-novo.tema-compra .form-panel-head { background: rgba(31,156,140,0.08); margin: -24px -24px 16px; padding: 16px 24px; border-radius: var(--radius) var(--radius) 0 0; }
#form-mov-novo.tema-venda .form-panel-head { background: rgba(196,30,104,0.06); margin: -24px -24px 16px; padding: 16px 24px; border-radius: var(--radius) var(--radius) 0 0; }
#form-mov-novo.tema-compra .form-panel-head h3 { color: var(--teal); }
#form-mov-novo.tema-venda .form-panel-head h3 { color: var(--saida-cor); }
#form-mov-novo.tema-compra .btn-primary, #form-mov-novo.tema-compra .btn-chip { background: var(--teal); border-color: var(--teal); color: white; }
#form-mov-novo.tema-venda .btn-primary, #form-mov-novo.tema-venda .btn-chip { background: var(--saida-cor); border-color: var(--saida-cor); color: white; }

/* Mesmo tratamento do painel de movimentação de estoque, aplicado ao Novo Lançamento:
   sinaliza entrada/saída na borda e no cabeçalho do formulário inteiro. */
#form.tema-entrada { border-width: 2px; border-color: var(--teal); }
#form.tema-saida { border-width: 2px; border-color: var(--saida-cor); }
#form.tema-entrada .form-panel-head { background: rgba(31,156,140,0.08); margin: -24px -24px 16px; padding: 16px 24px; border-radius: var(--radius) var(--radius) 0 0; }
#form.tema-saida .form-panel-head { background: rgba(196,30,104,0.06); margin: -24px -24px 16px; padding: 16px 24px; border-radius: var(--radius) var(--radius) 0 0; }
#form.tema-entrada .form-panel-head h3 { color: var(--teal); }
#form.tema-saida .form-panel-head h3 { color: var(--saida-cor); }
#form.tema-entrada .btn-primary { background: var(--teal); border-color: var(--teal); color: white; }
#form.tema-saida .btn-primary { background: var(--saida-cor); border-color: var(--saida-cor); color: white; }

.linha-lote { display: grid; grid-template-columns: 1.1fr 1.3fr 0.7fr 0.5fr 0.8fr auto; gap: 6px; align-items: end; margin-bottom: 8px; }
.linha-lote.linha-lote-orcamento { grid-template-columns: 0.9fr 1.4fr 0.8fr 0.8fr auto; }
.linha-lote .field { margin-bottom: 0; min-width: 0; }
.linha-lote .field label { font-size: 9.5px; margin-bottom: 3px; }
/* Rótulo (Categoria/Produto/Tamanho/Qtd./Valor) só aparece na primeira linha do lote —
   repetir em cada linha adicionada era poluição visual, já que as colunas se alinham
   pelo grid mesmo sem o texto. */
.linha-lote:not(.linha-lote-primeira) .field label { display: none; }
.linha-lote input { padding: 7px 6px; font-size: 12px; width: 100%; box-sizing: border-box; }
.linha-lote-acoes { display: flex; gap: 4px; }
.linha-lote .btn-remover-linha, .linha-lote .btn-adicionar-linha {
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 7px;
  background: var(--card-bg); color: var(--text-muted); cursor: pointer; flex-shrink: 0; font-size: 14px; line-height: 1;
}
.linha-lote .btn-remover-linha:hover { background: #F3E8EC; color: var(--magenta); border-color: transparent; }
.linha-lote .btn-adicionar-linha:hover { background: rgba(31,156,140,0.12); color: var(--teal); border-color: transparent; }
.lote-total-linha { font-size: 13px; color: var(--text-muted); }
.lote-total-linha strong { color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .linha-lote { grid-template-columns: 1fr 1fr; }
}

/* ============ TELA DE LOGIN/INSTALAÇÃO (sem sidebar) ============ */
.tela-login { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; }
.card-login { width: 100%; max-width: 360px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; box-shadow: 0 8px 24px rgba(37,75,119,0.08); }
.card-login h1 {
  font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 6px;
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.card-login p.sub { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 22px; }
.card-login form { display: flex; flex-direction: column; }
.card-login form label:not(:first-child) { margin-top: 14px; }
.card-login button[type="submit"] { margin-top: 22px; }
.tela-login .theme-toggle-btn { position: absolute; top: 22px; right: 22px; }

/* ============ TOOLTIP DE AJUDA (ex.: "por que não posso editar isso?") ============ */
.info-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background: var(--border); color: var(--text-muted);
  font-size: 10px; font-weight: 700; font-style: normal; text-transform: none; cursor: help;
  margin-left: 6px; vertical-align: middle;
}
.info-tip:hover, .info-tip:focus { background: var(--azul-marinho); color: white; }
.info-tip:hover::after, .info-tip:focus::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: 135%; transform: translateX(-50%);
  width: 230px; background: var(--azul-marinho-escuro); color: #fff; font-size: 11.5px; font-weight: 500;
  text-transform: none; letter-spacing: normal; line-height: 1.45; padding: 9px 11px; border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2); z-index: 30;
}
.info-tip:hover::before, .info-tip:focus::before {
  content: ''; position: absolute; left: 50%; bottom: 122%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--azul-marinho-escuro);
}

/* ============ ALTERNADOR DE TEMA CLARO/ESCURO ============ */
.theme-toggle-btn {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text); font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1;
}
.theme-toggle-btn:hover { background: var(--bg); }

/* ============ PLANEJAMENTO ANUAL (Eventos > topo da aba) ============
   12 blocos (um por mês), cor de fundo do cabeçalho em rodízio (3 cores só, pedido
   explícito) — feriados calculados (feriadosDoAno()) + eventos escolares cadastrados,
   inclusive períodos de vários dias (data_fim). Ver montarPlanejamentoAnual() em
   calendario.php. */
.plano-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.plano-marca { display: flex; align-items: center; gap: 12px; }
.plano-logo-badge { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff; background: var(--azul-marinho); box-shadow: 0 3px 8px rgba(37,75,119,0.3); overflow: hidden; }
.plano-logo-badge img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.plano-dica { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--azul-marinho); background: rgba(37,75,119,0.06); border: 1px solid rgba(37,75,119,0.15); border-radius: 9px; padding: 9px 13px; margin: 16px 0 4px; }
.plano-dica svg { width: 15px; height: 15px; flex-shrink: 0; }

.plano-meses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 1100px) { .plano-meses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .plano-meses-grid { grid-template-columns: 1fr; } }
.plano-mes-card { border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-height: 96px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.plano-mes-head { padding: 10px 14px; }
.plano-mes-head h4 { font-size: var(--text-sm); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; margin: 0; font-family: var(--font-display); }
.plano-mes-lista { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; background: rgba(255,255,255,0.75); }
.plano-mes-vazio-wrap { flex: 1; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.75); padding: 10px; }

.plano-item { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; line-height: 1.35; padding: 5px 6px; border-radius: 8px; cursor: pointer; transition: background .12s; position: relative; text-decoration: none; color: inherit; }
.plano-item:hover { background: var(--bg); }
.plano-item .plano-ic-edit { position: absolute; right: 4px; top: 6px; width: 12px; height: 12px; color: var(--azul-marinho); opacity: 0; transition: opacity .12s; }
.plano-item:hover .plano-ic-edit { opacity: 0.85; }
.plano-item .plano-data { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; font-size: 10.5px; }
.plano-item .plano-txt { color: var(--text); font-weight: 600; }
.plano-item .plano-txt small { font-weight: 400; color: var(--text-muted); }
.plano-item.plano-periodo { background: var(--bg); margin: 2px 0; }
.plano-item.plano-periodo:hover { background: #EFEBE4; }
.plano-item-novo { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--azul-marinho); padding: 6px; border-radius: 8px; cursor: pointer; opacity: 0.75; border: 1.5px dashed rgba(37,75,119,0.3); text-decoration: none; }
.plano-item-novo:hover { opacity: 1; background: var(--bg); }
.plano-item-novo svg { width: 12px; height: 12px; flex-shrink: 0; }

.plano-mes-claro { background: var(--azul-claro); }
.plano-mes-claro h4 { color: #0B3050; }
.plano-mes-amarelo { background: var(--amarelo); }
.plano-mes-amarelo h4 { color: #4A3800; }
.plano-mes-escuro { background: var(--azul-marinho); }
.plano-mes-escuro h4 { color: #fff; }
.plano-mes-escuro .plano-data { color: rgba(255,255,255,0.65); }
.plano-mes-escuro .plano-txt, .plano-mes-escuro .plano-txt small { color: #fff; }
.plano-mes-escuro .plano-txt small { color: rgba(255,255,255,0.65); }
.plano-mes-escuro .plano-item.plano-periodo { background: rgba(255,255,255,0.14); }
.plano-mes-escuro .plano-item:hover { background: rgba(255,255,255,0.1); }
.plano-mes-escuro .plano-item-novo { color: #fff; border-color: rgba(255,255,255,0.4); }

.plano-legenda { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); align-items: center; }
.plano-leg-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-muted); }
.plano-leg-sw { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.plano-nota-rodape { font-size: 11px; color: var(--text-muted); margin-top: 14px; line-height: 1.6; }

.check-nao-letivo {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 9px;
  background: rgba(245,169,78,0.10); border: 1px solid rgba(245,169,78,0.3); margin-top: 4px;
  font-size: 12px; font-weight: 600; color: var(--color-warning); cursor: pointer;
}
.check-nao-letivo input { width: auto; }

/* Conciliação: legenda do fluxo "sem lançamento" e cores da lista "Já em dia" (verde = pago
   nos dois; vermelho = divergência; amarelo = linha com lançamento parecido a decidir). */
.conccob-passos { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px; line-height: 1.5; }
.conccob-passos ol { margin: 6px 0 0 18px; padding: 0; }
.conccob-legenda-atencao { background: rgba(196,139,0,0.18); padding: 0 6px; border-radius: 4px; }
tr.conccob-linha-atencao td { background: rgba(196,139,0,0.09); }
tr.conccob-linha-ok td { background: rgba(31,156,140,0.09); }
tr.conccob-linha-div td { background: rgba(196,30,104,0.08); }
td.conccob-cel-div { color: var(--saida-cor); font-weight: 700; }

/* Conciliação: escolha "Valor a seguir" (sistema × arquivo) ao ligar/confirmar valor divergente. */
.conccob-valor-escolha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-top: 6px; }
.conccob-valor-escolha label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.conccob-valor-escolha input[type=radio] { width: auto; margin: 0; }