/* ═══════════════════════════════════════════════════════════════════════
   Closing Time · visual EAVision (ferramenta irmã do portal de dados da TI)
   Tokens copiados da skill eavision-ui (assets/codigo/tokens.css). Escuro é o padrão;
   o claro entra com <html data-theme="light">. Só tokens nos componentes, nada de hex solto.
   Versão anterior (identidade EAV/Poppins) guardada em .backup-ui/public-eav/.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --f-titulo: 'Manrope', system-ui, sans-serif;
  --f-corpo: 'Work Sans', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --r-card: 12px; --r-btn: 8px; --r-pill: 20px; --r-sm: 6px;
  --altura-header: 72px; --largura-sidebar: 240px;

  --bg: #060e3a; --surf-low: #0f1742; --surf-cont: #131c47; --surf-high: #1f2652; --surf-highest: #2a315d;
  --primary: #b9c4fd; --primary-cont: #000b3d; --on-primary: #222d5d;
  --secondary: #e9c349; --on-secondary: #3c2f00; --secondary-cont: #af8d11;
  --tertiary: #c6c6c7; --on-surface: #dee0ff; --on-surface-var: #c6c5d0;
  --outline: #90909a; --outline-var: #45464f;
  --error: #ffb4ab; --error-cont: #93000a; --success: #4ade80; --warning: #e9c349;
  --gc-1: #e9c349; --gc-2: #b9c4fd; --gc-3: #c6c6c7; --gc-4: #af8d11; --gc-5: #6f7aaf;
  --overlay-modal: rgba(6, 14, 58, .72);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f1f4fa; --surf-low: #f7f9fc; --surf-cont: #ffffff; --surf-high: #eaeef7; --surf-highest: #dde3ee;
  --primary: #2a315d; --primary-cont: #e0e4ff; --on-primary: #ffffff;
  --secondary: #2e5393; --on-secondary: #ffffff; --secondary-cont: #244174;
  --tertiary: #6b7280; --on-surface: #191c2b; --on-surface-var: #4b5165;
  --outline: #8a90a0; --outline-var: #dbe1ec;
  --error: #d92d20; --error-cont: #fee4e2; --success: #157347; --warning: #c2740a;
  --gc-1: #2e5393; --gc-2: #6b7280; --gc-3: #4b57c9; --gc-4: #2a315d; --gc-5: #7c86c4;
  --overlay-modal: rgba(6, 14, 58, .45);
  color-scheme: light;
}
/* Cores de ESTADO do Closing Time (verde/vermelho só para estado). Aliases usados no app.js. */
:root, :root[data-theme="light"] {
  --ok: var(--success); --pendente: var(--error); --andamento: var(--warning);
  --concluinte: var(--outline); --nova: var(--gc-2);
  --eav-amarelo: var(--gc-2); --eav-azul: var(--on-surface);
  --fs-rotulo: 11px; --fs-dado: 13px; --fs-texto: 14px;
}

/* ── Base ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); color: var(--on-surface); font-family: var(--f-corpo); font-size: var(--fs-texto); }
/* A rolagem é só a do <main>: flow-root impede a margem de cima do main de vazar para o body (a página rolava 72px a mais). */
body { display: flow-root; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--secondary); }
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.oculto { display: none !important; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; line-height: 1;
  display: inline-block; width: 1em; overflow: hidden; white-space: nowrap; flex-shrink: 0; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--surf-highest); border-radius: 4px; }
@keyframes crescer { to { transform: scaleX(1); } }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.label, .mono { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-var); }
.label.acento { color: var(--secondary); }

/* ── Header ── */
.header { position: fixed; top: 0; left: 0; right: 0; height: var(--altura-header); background: var(--surf-low); border-bottom: 1px solid var(--outline-var);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 50; }
.header .esq, .header .dir { display: flex; align-items: center; gap: 14px; }
.logo { height: 56px; width: auto; display: block; }
.logo-claro { display: none; }
:root[data-theme="light"] .logo-escuro { display: none; }
:root[data-theme="light"] .logo-claro { display: block; }
.modulo { border-left: 1px solid var(--outline-var); padding-left: 14px; display: flex; flex-direction: column; gap: 2px; }
.modulo b { font-family: var(--f-titulo); font-size: 16px; font-weight: 700; color: var(--on-surface); }
.btn-icone { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--outline-var); border-radius: var(--r-btn); color: var(--on-surface); cursor: pointer; }
.btn-menu { display: none; }
.tema { display: inline-flex; gap: 2px; padding: 3px; background: var(--surf-cont); border: 1px solid var(--outline-var); border-radius: var(--r-btn); }
.tema button { width: 30px; height: 26px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--on-surface-var); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tema button[aria-pressed="true"] { background: var(--secondary); color: var(--on-secondary); }

/* ── Sidebar ── */
.sidebar { position: fixed; top: var(--altura-header); bottom: 0; left: 0; width: var(--largura-sidebar); background: var(--surf-low); border-right: 1px solid var(--outline-var);
  display: flex; flex-direction: column; z-index: 45; overflow-y: auto; transition: transform .25s ease; }
/* Perfil no canto superior direito: botão com avatar que abre o menu (nome, login, papel, sair). */
.menu-perfil { position: relative; }
.perfil-bt { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; background: transparent; border: 1px solid var(--outline-var); border-radius: var(--r-btn); color: var(--on-surface); cursor: pointer; text-align: left; }
.perfil-bt:hover, .perfil-bt[aria-expanded="true"] { background: var(--surf-high); }
.perfil-bt .avatar, .perfil-menu .avatar { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--secondary); color: var(--on-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.perfil-bt .nome { font-family: var(--f-titulo); font-size: 13px; font-weight: 600; line-height: 16px; }
.perfil-bt .papel { font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.perfil-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--surf-low); border: 1px solid var(--outline-var); border-radius: var(--r-card, 12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28); padding: 6px; z-index: 60; }
.perfil-menu .cab { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--outline-var); margin-bottom: 6px; }
.perfil-menu .cab b { display: block; font-family: var(--f-titulo); font-size: 14px; color: var(--on-surface); }
.perfil-menu .cab small { display: block; font-size: 12px; color: var(--on-surface-var); }
.perfil-menu .cab .papel { font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.perfil-menu p { font-size: 12px; color: var(--on-surface-var); padding: 0 10px 8px; margin: 0; }
.perfil-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--on-surface); cursor: pointer;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.perfil-menu button:hover { background: var(--surf-high); }
.nav { padding: 20px 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-btn); color: var(--on-surface-var); text-decoration: none;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.nav a:hover { background: var(--surf-high); }
.nav a.ativo { background: var(--secondary); color: var(--on-secondary); font-weight: 700; }
.nav a.ativo .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.status { margin-top: auto; padding: 12px 16px; line-height: 16px; border-top: 1px solid var(--outline-var); display: flex; align-items: flex-start; gap: 8px; font-size: 11px; }
.status .bolinha { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); flex-shrink: 0; }
.status .bolinha.dev { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.status #faixa-demo { color: var(--on-surface-var); opacity: .8; }
.veu-menu { display: none; }

/* ── Main ── */
main { margin-left: var(--largura-sidebar); margin-top: var(--altura-header); padding: 24px 36px 0; height: calc(100% - var(--altura-header)); overflow-y: auto; display: flex; flex-direction: column; }
#app { max-width: 1240px; width: 100%; flex: 1 0 auto; }
.rodape { flex-shrink: 0; margin: 40px -36px 0; padding: 12px 36px; border-top: 1px solid var(--outline-var); font-size: 11px; line-height: 16px; color: var(--on-surface-var); text-align: center; }
.rodape .sep { margin: 0 8px; opacity: .5; }
.cab-pagina { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.cab-pagina h1 { font-family: var(--f-titulo); font-size: 28px; line-height: 36px; font-weight: 700; color: var(--on-surface); }
.cab-pagina h1 em { font-style: normal; color: var(--secondary); }
.cab-pagina p { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-var); margin-top: 4px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
h2 { font-family: var(--f-titulo); font-size: 16px; font-weight: 700; margin: 0 0 12px; color: var(--on-surface); }
h2 em { font-style: normal; color: var(--on-surface); }
h3 { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-var); margin: 0 0 8px; }
.cartao { background: var(--surf-cont); border: 1px solid var(--outline-var); border-radius: var(--r-card); padding: 16px 20px; }
.grade { display: grid; gap: 16px; }
.g2 { grid-template-columns: 2fr 1fr; align-items: start; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.vazio { padding: 24px; text-align: center; color: var(--on-surface-var); font-size: var(--fs-dado); }
.mudo { color: var(--on-surface-var); font-size: 12px; }

/* Barra de progresso no topo enquanto o portal grava no RM. */
body.gravando { cursor: progress; }
body.gravando::after { content: ''; position: fixed; top: var(--altura-header); left: 0; height: 3px; width: 35%; z-index: 100; background: var(--secondary);
  animation: gravando 1.1s ease-in-out infinite; }
@keyframes gravando { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { body.gravando::after { animation: none; width: 100%; opacity: .6; } }

/* ── Botões ──
   Hierarquia: .primario (ação principal, cheio) · .bt (secundário, contornado com fundo e sombra) · .sucesso
   (concluir) · .leve (terciário, contorno suave) · .bt-link (ação dentro do texto). Todos com realce ao passar o
   mouse, "afundam" ao clicar e mostram anel de foco no teclado. */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 7px 14px; border-radius: var(--r-btn);
  border: 1px solid color-mix(in srgb, var(--on-surface) 22%, transparent); background: var(--surf-low); color: var(--on-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s; }
.bt .material-symbols-outlined { font-size: 17px; }
.bt:hover:not([disabled]) { border-color: var(--secondary); color: var(--secondary); background: color-mix(in srgb, var(--secondary) 8%, var(--surf-low)); box-shadow: 0 3px 8px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.bt:active:not([disabled]) { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.bt:focus-visible, .bt-link:focus-visible, .pilula:focus-visible, .seg-bt:focus-visible, .tarefa-chip:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.bt.primario, .bt.destaque { background: var(--secondary); color: var(--on-secondary); border-color: var(--secondary); box-shadow: 0 2px 6px color-mix(in srgb, var(--secondary) 35%, transparent); }
.bt.primario:hover:not([disabled]), .bt.destaque:hover:not([disabled]) { background: var(--secondary-cont); border-color: var(--secondary-cont); color: var(--on-secondary); box-shadow: 0 4px 12px color-mix(in srgb, var(--secondary) 40%, transparent); }
.bt.sucesso { border-color: color-mix(in srgb, var(--success) 60%, transparent); color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surf-low)); }
.bt.sucesso:hover:not([disabled]) { background: var(--success); border-color: var(--success); color: #fff; }
.bt.leve { box-shadow: none; background: transparent; border-color: color-mix(in srgb, var(--on-surface) 16%, transparent); color: var(--on-surface); padding: 5px 10px; min-height: 30px; }
.bt.leve:hover:not([disabled]) { box-shadow: none; }
.bt[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.bt[aria-busy="true"] { cursor: progress; opacity: .7; }
.bt-link { background: none; border: 0; padding: 0 2px; color: var(--secondary); font: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bt-link:hover { text-decoration-thickness: 2px; }
.bt-icone { width: 30px; height: 30px; padding: 0; justify-content: center; }

/* ── Campos ── */
label.campo { display: flex; flex-direction: column; gap: 5px; font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-var); }
input[type=text], input[type=search], input[type=password], input[type=date], select, textarea {
  border: 1px solid var(--outline-var); border-radius: var(--r-btn); background: var(--surf-low); color: var(--on-surface); padding: 7px 10px; font-family: var(--f-corpo); font-size: 13px;
  letter-spacing: normal; text-transform: none; min-height: 34px; }
textarea { resize: vertical; min-height: 60px; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--secondary); outline: none; }
.check { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-var); cursor: pointer; }
.check input { accent-color: var(--secondary); }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.filtros input[type=search] { min-width: 260px; }
.linha-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }

/* ── Números (bloco do topo) ── */
.hero { background: var(--surf-cont); border: 1px solid var(--outline-var); border-radius: var(--r-card); padding: 20px; display: grid; grid-template-columns: minmax(240px, 1fr) 2.4fr; gap: 24px; margin-bottom: 16px; animation: entrar .4s ease both; }
.hero .onda { display: none; }
.percentual { display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--outline-var); padding-right: 20px; }
.percentual::before { content: 'REMATRÍCULA'; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--on-surface-var); }
.percentual .n { font-family: var(--f-titulo); font-weight: 800; font-size: 52px; letter-spacing: -.02em; line-height: 1; color: var(--on-surface); font-variant-numeric: tabular-nums; }
.percentual .n small { font-size: 26px; }
.percentual p { font-size: 12px; color: var(--on-surface-var); }
.percentual .sub, .gaveta-cab .sub { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-var); }
.barra { position: relative; height: 9px; background: var(--surf-highest); border-radius: 4px; display: flex; overflow: hidden; }
.barra i { display: block; height: 100%; }
.barra.meta { overflow: visible; }
.barra.meta i { border-radius: 4px; transform-origin: left; transform: scaleX(0); animation: crescer .7s cubic-bezier(.2,.7,.3,1) forwards; }
.marca-meta { position: absolute; top: -3px; width: 2px; height: 15px; background: var(--on-surface); opacity: .75; border-radius: 1px; }
.tabela-numeros { overflow-x: auto; }
.tabela-numeros table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela-numeros th, .tabela-numeros td { padding: 6px 8px; white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--outline-var) 55%, transparent); }
.tabela-numeros thead th { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-var); text-align: right; border-bottom: 2px solid var(--outline-var); }
.tabela-numeros tbody th { text-align: left; font-weight: 500; font-size: 13px; color: var(--on-surface); }
.tabela-numeros td { font-family: var(--f-mono); font-size: 12px; text-align: right; color: var(--on-surface); }
.tabela-numeros td.pct { color: var(--on-surface-var); font-size: 11px; padding-left: 0; }
.tabela-numeros tr.destaque th, .tabela-numeros tr.destaque td:not(.pct) { font-weight: 700; }
.tabela-numeros tr.clicavel { cursor: pointer; }
.tabela-numeros tr.clicavel:hover { background: var(--surf-high); }
.tabela-numeros tr.ativa { background: color-mix(in srgb, var(--secondary) 9%, transparent); }
.tabela-numeros tr.ativa th { color: var(--secondary); }

/* ── Chips, selos ── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-btn); border: 1px solid var(--outline-var); background: transparent; color: var(--on-surface-var);
  font-family: var(--f-mono); font-size: 11px; cursor: pointer; }
.chip b { font-family: var(--f-titulo); font-size: 14px; font-weight: 800; color: var(--on-surface); }
.chip:hover { border-color: var(--secondary); }
.setor-chip.ativo, .chip[aria-pressed="true"] { border-color: var(--secondary); color: var(--secondary); background: color-mix(in srgb, var(--secondary) 9%, transparent); }
.setor-chip.ativo b { color: var(--secondary); }
.setor-chip.atrasada b { color: var(--error); }
.setor-chip.atrasada.ativo { border-color: var(--error); color: var(--error); background: color-mix(in srgb, var(--error) 9%, transparent); }
.selo { display: inline-block; font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-sm); white-space: nowrap;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }
.selo.rematricula, .selo.concluida { color: var(--success); }
.selo.pendente, .selo.atrasada { color: var(--error); }
.selo.nova { color: var(--gc-2); }
.selo.transferido, .selo.concluinte, .selo.neutro, .selo.cancelada, .selo.setor { color: var(--on-surface-var); }
.selo.hoje { color: var(--secondary); }

/* ── Painéis recolhíveis, setores, gráfico ── */
.setores { margin-bottom: 16px; }
details.dobra > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
details.dobra > summary::-webkit-details-marker { display: none; }
details.dobra > summary h2 { margin: 0; }
details.dobra > summary::before { content: 'expand_more'; font-family: 'Material Symbols Outlined'; font-size: 18px; color: var(--secondary); transform: rotate(-90deg); transition: transform .2s; align-self: center; }
details.dobra[open] > summary::before { transform: none; }
details.dobra[open] > summary { margin-bottom: 12px; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-var); margin-top: 8px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.grafico svg { width: 100%; height: auto; display: block; }
.grafico text { font-family: var(--f-mono); font-size: 10px; fill: var(--on-surface-var); }
.serie-rem { fill: var(--secondary); }
.serie-nova { fill: var(--gc-2); }
.serie-acum { stroke: var(--on-surface); fill: none; }
.grade-linha { stroke: var(--outline-var); stroke-dasharray: 3 3; }

/* ── Lista (planilha) ── */
/* Painel de filtros (fixo no topo ao rolar a lista). */
.filtros-lista { padding: 12px 0 10px; }
.painel-filtros { background: var(--surf-cont); border: 1px solid var(--outline-var); border-radius: var(--r-card); padding: 14px 16px; display: grid; gap: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.filtros-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--surf-low); border: 1px solid var(--outline-var); border-radius: var(--r-btn); padding: 3px; }
.seg-bt { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; border-radius: var(--r-sm); padding: 8px 14px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-var); cursor: pointer; }
.seg-bt .qtd { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--surf-high); color: var(--on-surface); }
.seg-bt:hover { background: var(--surf-high); color: var(--on-surface); }
.seg-bt.ativo { background: var(--secondary); color: var(--on-secondary); }
.seg-bt.ativo .qtd { background: color-mix(in srgb, var(--on-secondary) 22%, transparent); color: var(--on-secondary); }
.contagem { margin-left: auto; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-surface-var); }
.contagem b { font-family: var(--f-titulo); font-size: 22px; font-weight: 800; letter-spacing: 0; color: var(--on-surface); margin-right: 2px; vertical-align: -2px; }
.painel-filtros .filtros { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(140px, 1fr)); gap: 10px; margin: 0; align-items: end; }
.campo-filtro { display: grid; gap: 4px; min-width: 0; }
.campo-filtro small { display: flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-var); }
.campo-filtro small .material-symbols-outlined { font-size: 14px; color: var(--secondary); }
.campo-filtro select, .campo-filtro input { width: 100%; min-width: 0 !important; background: var(--surf-low); border: 1px solid var(--outline-var); }
.campo-filtro select:hover, .campo-filtro input:hover { border-color: var(--secondary); }
.campo-filtro.ativo select, .campo-filtro.ativo input { border-color: var(--secondary); background: color-mix(in srgb, var(--secondary) 10%, var(--surf-low)); color: var(--on-surface); font-weight: 600; box-shadow: 0 0 0 1px var(--secondary); }
.campo-filtro.ativo small { color: var(--secondary); }
.filtros-atalhos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--outline-var); background: var(--surf-low); color: var(--on-surface-var); cursor: pointer;
  font-family: var(--f-corpo); font-size: 12px; font-weight: 500; }
.pilula .material-symbols-outlined { font-size: 16px; }
.pilula:hover { border-color: var(--secondary); color: var(--on-surface); }
.pilula.ativo { background: var(--secondary); border-color: var(--secondary); color: var(--on-secondary); font-weight: 600; }
.pilula.alerta .material-symbols-outlined { color: var(--error); }
.pilula.alerta.ativo { background: var(--error); border-color: var(--error); color: #fff; }
.pilula.alerta.ativo .material-symbols-outlined { color: #fff; }
.filtros-atalhos .limpar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-btn); border: 1px solid var(--error); background: transparent; color: var(--error); cursor: pointer;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.filtros-atalhos .limpar .material-symbols-outlined { font-size: 16px; }
.filtros-atalhos .limpar:hover { background: color-mix(in srgb, var(--error) 12%, transparent); }
@media screen and (max-width: 900px) { .painel-filtros .filtros { grid-template-columns: 1fr 1fr; } .campo-filtro.busca { grid-column: 1 / -1; } }
.planilha-wrap { background: var(--surf-cont); border: 1px solid var(--outline-var); border-radius: var(--r-card); overflow: auto; max-height: calc(100vh - 240px); }
table.planilha { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.planilha th { position: sticky; top: 0; background: var(--surf-cont); text-align: left; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-surface-var); padding: 10px; border-bottom: 2px solid var(--outline-var); white-space: nowrap; z-index: 2; }
.planilha td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--outline-var) 55%, transparent); vertical-align: middle; color: var(--on-surface-var); font-size: 12px; }
.planilha tr.linha:hover td { background: var(--surf-high); }
/* Cabeçalho de turma na lista: aberta = faixa com a cor de destaque; "em foco" (última aberta) = faixa cheia e as
   linhas dos alunos com a barra lateral, para ficar claro qual turma está sendo trabalhada. */
.planilha tr.grupo td { background: var(--surf-low); cursor: pointer; position: sticky; top: 35px; z-index: 1; padding: 0; border-bottom: 1px solid var(--outline-var); }
.grupo-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-left: 4px solid transparent; }
.grupo-cab .seta { font-size: 20px; color: var(--on-surface-var); }
.grupo-cab .turma { font-family: var(--f-titulo); font-size: 14px; font-weight: 700; color: var(--on-surface); }
.grupo-cab .unidade { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-var); }
.grupo-cab .conts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.grupo-cab .cont { font-size: 11px; color: var(--on-surface-var); padding: 2px 8px; border-radius: 999px; background: var(--surf-cont); border: 1px solid var(--outline-var); }
.grupo-cab .cont b { color: var(--on-surface); font-family: var(--f-mono); }
.grupo-cab .cont.atrasada { border-color: color-mix(in srgb, var(--error) 50%, transparent); color: var(--error); }
.grupo-cab .cont.atrasada b { color: var(--error); }
.grupo-cab .em-foco { font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--secondary); color: var(--on-secondary); }
.planilha tr.grupo:hover .grupo-cab { background: var(--surf-high); }
.planilha tr.grupo.aberto .grupo-cab { border-left-color: color-mix(in srgb, var(--secondary) 55%, transparent); background: color-mix(in srgb, var(--secondary) 6%, var(--surf-low)); }
.planilha tr.grupo.aberto .seta { color: var(--secondary); }
.planilha tr.grupo.foco .grupo-cab { border-left-color: var(--secondary); background: color-mix(in srgb, var(--secondary) 16%, var(--surf-low)); }
.planilha tr.grupo.fechado .turma { font-weight: 600; color: var(--on-surface-var); }
.planilha tr.do-foco td:first-child { box-shadow: inset 4px 0 0 var(--secondary); }
.planilha tr.do-foco td { background: color-mix(in srgb, var(--secondary) 3%, transparent); }
.lista-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.lista-barra .rotulo { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-var); }
.lista-barra .rotulo b { color: var(--on-surface); font-size: 13px; }
.lista-barra .rotulo .material-symbols-outlined { color: var(--secondary); }
.alternar-turmas { display: inline-flex; border: 1px solid var(--secondary); border-radius: var(--r-btn); overflow: hidden; background: var(--surf-cont); }
.alternar-turmas button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; background: transparent; color: var(--secondary); cursor: pointer;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.alternar-turmas button + button { border-left: 1px solid var(--secondary); }
.alternar-turmas button:hover:not(:disabled) { background: var(--secondary); color: var(--on-secondary); }
.alternar-turmas button:disabled { color: var(--on-surface-var); opacity: .5; cursor: default; }
.lista-barra .foco-atual { font-size: 12px; color: var(--on-surface-var); padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--secondary) 12%, transparent); }
.lista-barra .foco-atual b { color: var(--on-surface); }
.planilha tr.clicavel { cursor: pointer; }
.planilha tr.ativa td { background: color-mix(in srgb, var(--secondary) 9%, transparent); }
.planilha tfoot th { position: sticky; bottom: 0; background: var(--surf-low); border-top: 2px solid var(--outline-var); border-bottom: 0; }
.planilha .nome { min-width: 180px; }
.planilha .nome, .planilha .nome button { font-size: 13px; font-weight: 600; color: var(--on-surface); }
.planilha .nome button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: var(--f-corpo); }
.planilha .nome button:hover { color: var(--secondary); }
.planilha .familia { font-weight: 400; font-size: 11px; color: var(--on-surface-var); margin-top: 2px; }
.planilha td.serie { white-space: nowrap; }
.planilha .num, .num { text-align: right; font-family: var(--f-mono); white-space: nowrap; }
.planilha tr.linha td { padding-top: 10px; padding-bottom: 10px; }
.planilha td.tarefas { width: 46%; min-width: 300px; }
.planilha td.tarefas .tarefa-chip { max-width: none; }
.planilha .sem-tarefa { display: flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1px dashed var(--outline-var); border-radius: var(--r-sm); color: var(--on-surface-var); font-size: 12px; opacity: .8; }
.planilha td.coment { min-width: 190px; width: 22%; }
.planilha .coment-novo { height: 34px; }
.planilha td.acoes-linha { width: 1%; white-space: nowrap; }
.planilha td.acoes-linha > div { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.planilha .ficha-bt { min-width: 52px; justify-content: flex-end; gap: 2px; padding-right: 6px; }
.planilha .ficha-bt .qtd { font-family: var(--f-mono); font-size: 11px; font-weight: 600; }
.planilha .ficha-bt .material-symbols-outlined { font-size: 18px; }
.planilha select { min-height: 28px; padding: 2px 6px; font-size: 12px; max-width: 170px; }
.tarefa-chip { --tom: var(--success); display: flex; flex-direction: column; gap: 3px; width: 100%; max-width: 320px; padding: 6px 10px 6px 9px; cursor: pointer; text-align: left;
  border: 1px solid color-mix(in srgb, var(--tom) 45%, transparent); border-left: 4px solid var(--tom); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--tom) 12%, var(--surf-low)); color: var(--on-surface); font-family: var(--f-corpo); font-size: 12px; line-height: 16px; }
.tarefa-chip.vencendo { --tom: var(--warning); }
.tarefa-chip.atrasada { --tom: var(--error); }
.tarefa-chip { transition: background .15s, box-shadow .15s, transform .1s; }
.tarefa-chip:hover { background: color-mix(in srgb, var(--tom) 22%, var(--surf-low)); box-shadow: 0 3px 8px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.tarefa-chip .material-symbols-outlined { font-size: 15px; vertical-align: -3px; margin-right: 3px; color: var(--tom); }
.tarefa-chip .linha1 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tarefa-chip .linha1 b { font-weight: 700; font-size: 13px; }
.tarefa-chip .linha2 { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--on-surface-var); }
.tarefa-chip .prazo { font-weight: 600; color: var(--on-surface); }
.tarefa-chip.atrasada .prazo { color: var(--error); }
.tarefa-chip .etapa-tag { font-family: var(--f-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--gc-5) 25%, transparent); color: var(--on-surface); }
.planilha .chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.planilha .chips .tarefa-chip { align-self: stretch; }
.coment-novo { width: 100%; min-height: 30px !important; padding: 4px 8px !important; border-style: dashed !important; background: transparent !important; }
.coment-novo:focus { border-style: solid !important; background: var(--surf-low) !important; }

/* ── Ficha do aluno (painel lateral) ── */
.veu { position: fixed; inset: 0; background: var(--overlay-modal); z-index: 60; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(700px, 100vw); background: var(--bg); border-left: 1px solid var(--outline-var); z-index: 61; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); }
.gaveta-cab { background: var(--surf-low); border-bottom: 1px solid var(--outline-var); padding: 20px 24px; position: sticky; top: 0; z-index: 2; }
.gaveta-cab h2 { font-size: 22px; margin: 0 40px 8px 0; }
.gaveta-cab .fechar { position: absolute; top: 16px; right: 16px; background: var(--surf-low); border: 1px solid var(--outline-var); color: var(--on-surface-var); border-radius: var(--r-btn); width: 34px; height: 34px; cursor: pointer; font-size: 18px; transition: background .15s, color .15s, border-color .15s; }
.gaveta-cab .fechar:hover { border-color: var(--secondary); color: var(--secondary); background: color-mix(in srgb, var(--secondary) 10%, var(--surf-low)); }
.gaveta-cab .fechar:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.gaveta-cab .chips { align-items: center; }
.gaveta-corpo { padding: 20px 24px; display: grid; gap: 18px; }
.resp { display: grid; gap: 8px; }
.resp .item { background: var(--surf-cont); border: 1px solid var(--outline-var); border-radius: var(--r-btn); padding: 10px 12px; font-size: 13px; }
.resp .item b { color: var(--on-surface); }
.resp .item a { margin-right: 12px; font-size: 12px; }
/* Cartão da tarefa na ficha: barra lateral na cor do prazo (verde em dia, âmbar vencendo, vermelho atrasada). */
.cartao.tarefa { --tom: var(--success); padding: 16px 18px; border-left: 5px solid var(--tom); display: grid; gap: 14px; }
.cartao.tarefa.vencendo { --tom: var(--warning); }
.cartao.tarefa.atrasada { --tom: var(--error); }
.cartao.tarefa.fechada { --tom: var(--outline-var); background: var(--surf-low); }
.cartao.tarefa .material-symbols-outlined { font-size: 16px; vertical-align: -3px; }
.tarefa-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.tarefa-cab .label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-var); }
.tarefa-cab h4 { font-family: var(--f-titulo); font-size: 17px; font-weight: 700; line-height: 22px; margin: 2px 0 0; color: var(--on-surface); }
.etapa-selo { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 4px 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--secondary) 15%, transparent); color: var(--on-surface); border: 1px solid color-mix(in srgb, var(--secondary) 45%, transparent); }
.etapa-selo.aguardando { background: color-mix(in srgb, var(--gc-5) 22%, transparent); border-color: color-mix(in srgb, var(--gc-5) 55%, transparent); }
.etapa-selo.concluida { background: color-mix(in srgb, var(--success) 15%, transparent); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.tarefa-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tarefa-info .info { background: var(--surf-low); border: 0; border-radius: var(--r-btn); padding: 8px 12px; min-width: 0; }
.tarefa-info small { display: flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-var); margin-bottom: 2px; }
.tarefa-info b { display: block; font-size: 13px; font-weight: 600; color: var(--on-surface); overflow-wrap: anywhere; }
.tarefa-info .prazo { box-shadow: inset 3px 0 0 var(--tom); background: color-mix(in srgb, var(--tom) 12%, var(--surf-low)); }
.tarefa-info .prazo small .material-symbols-outlined { color: var(--tom); }
.cartao.tarefa.atrasada .tarefa-info .prazo b { color: var(--error); }
.bloco h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-var); }
.comentarios { display: grid; gap: 6px; max-height: 280px; overflow: auto; }
.comentario { background: var(--surf-low); border: 1px solid var(--outline-var); border-radius: var(--r-btn); padding: 8px 12px; font-size: 13px; line-height: 19px; color: var(--on-surface); white-space: pre-wrap; }
.comentario small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--on-surface-var); margin-bottom: 2px; white-space: normal; }
.bloco.resultado .comentario { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.tarefa-acoes { border-top: 1px dashed var(--outline-var); padding-top: 12px; display: grid; gap: 8px; }
.tarefa-acoes textarea { min-height: 52px; }
.tarefa-acoes .tarefa-botoes { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tarefa-acoes .acoes { display: flex; gap: 6px; flex-wrap: wrap; }
@media screen and (max-width: 560px) { .tarefa-info { grid-template-columns: 1fr; } .tarefa-cab { flex-direction: column; } }

/* ── Modal e aviso ── */
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 100; background: var(--overlay-modal); padding: 24px; }
.modal .caixa { background: var(--surf-cont); border: 1px solid var(--outline-var); border-radius: var(--r-card); padding: 20px; width: min(540px, 100%); display: grid; gap: 12px; }
.modal .caixa h2 { font-size: 18px; margin: 0; }
.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--surf-high); color: var(--on-surface); border: 1px solid var(--outline-var); border-left: 3px solid var(--success);
  padding: 10px 16px; border-radius: var(--r-btn); z-index: 120; font-size: 13px; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); }
.aviso.erro { border-left-color: var(--error); }

/* ── Configurações (listas simples) ── */
.lista-simples { list-style: none; }
.lista-simples li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--outline-var); font-size: 13px; }

/* ── Login ── */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.tela-login .caixa-login { width: min(400px, 100%); background: var(--surf-cont); border: 1px solid var(--outline-var); border-radius: var(--r-card); padding: 28px; display: grid; gap: 14px; animation: entrar .4s ease both; }
.tela-login .logo { height: 64px; margin: 0 auto 4px; }
.tela-login h1 { font-family: var(--f-titulo); font-size: 22px; font-weight: 700; text-align: center; }
.tela-login .label { text-align: center; }
.tela-login .erro { color: var(--error); font-size: 13px; min-height: 1.2em; }
.tela-login .rodape { margin: 0; border: 0; }

/* ── Celular ("screen and" obrigatório por causa do PDF) ── */
@media screen and (max-width: 768px) {
  .header { padding: 0 12px; }
  .logo { height: 44px; }
  .modulo, .perfil-bt .texto, .perfil-bt .seta { display: none; }
  .btn-menu { display: inline-flex; }
  .sidebar { transform: translateX(-100%); box-shadow: 0 8px 32px rgba(0, 0, 0, .35); }
  body.gaveta-menu .sidebar { transform: translateX(0); }
  body.gaveta-menu .veu-menu { display: block; position: fixed; inset: var(--altura-header) 0 0 0; background: var(--overlay-modal); z-index: 40; }
  main { margin-left: 0; padding: 16px 14px 0; }
  .hero, .g2, .g3 { grid-template-columns: 1fr; }
  .percentual { border-right: 0; padding-right: 0; }
  .cab-pagina h1 { font-size: 22px; line-height: 28px; }
  .filtros-lista { position: static; }
  .planilha-wrap table { min-width: 720px; }
  .rodape { margin: 40px -14px 0; padding: 12px 14px; }
  .rodape .sep { display: none; }
  .rodape span { display: block; }
  .tema button[aria-pressed="false"] { display: none; }
}

/* ── Impressão ── */
@media print {
  .no-print, .header, .sidebar, .filtros-lista, .acoes { display: none !important; }
  html, body { height: auto !important; background: #fff !important; }
  main { margin: 0 !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
  .cartao, .hero { break-inside: avoid; }
  @page { size: A4 portrait; margin: 14mm; }
}

/* ── Pessoas e acessos ── */
.kpis-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi-mini { background: var(--surf-cont); border: 1px solid var(--outline-var); border-bottom: 2px solid transparent; border-radius: var(--r-card); padding: 16px 18px; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; color: var(--on-surface); transition: border-color .3s; animation: entrar .4s ease both; }
.kpi-mini:hover, .kpi-mini.ativo { border-bottom-color: var(--secondary); }
.kpi-mini .material-symbols-outlined { color: var(--secondary); font-size: 20px; }
.kpi-mini b { grid-column: 1 / -1; font-family: var(--f-titulo); font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-mini.alerta b, .kpi-mini.alerta .material-symbols-outlined { color: var(--error); }
.insight { display: flex; gap: 12px; align-items: flex-start; padding: 10px 16px; border-radius: var(--r-btn); background: color-mix(in srgb, var(--secondary) 8%, transparent);
  border-left: 2px solid var(--secondary); font-size: 13px; color: var(--on-surface-var); margin-bottom: 20px; }
.insight .material-symbols-outlined { font-size: 16px; color: var(--secondary); margin-top: 2px; }
.filtros .chips { align-items: center; }
.planilha tr.inativa td { opacity: .55; }
.mono-login { font-family: var(--f-mono); letter-spacing: .02em; }
.acoes-linha { white-space: nowrap; text-align: right; }
.cab-pagina .label { display: block; margin-bottom: 4px; }
@media screen and (max-width: 768px) { .kpis-mini { grid-template-columns: 1fr; } }
.cadastro-rm p { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.aviso-inline { font-size: 12px; color: var(--on-surface-var); background: color-mix(in srgb, var(--secondary) 8%, transparent); border-left: 2px solid var(--secondary); padding: 8px 10px; border-radius: var(--r-sm); line-height: 1.5; }
.grade-equipes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; }
@media screen and (max-width: 768px) { .grade-equipes { grid-template-columns: 1fr 1fr; } }

/* ── Integração / assistente ── */
.etapa-cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.etapa-cab > div:first-child { flex: 1 1 280px; min-width: 0; }
.etapa-cab > .acoes { flex: 0 0 auto; }
.etapa-cab h2 { margin: 2px 0 4px; }
.plano { list-style: none; margin-top: 12px; border-top: 1px solid var(--outline-var); }
.plano li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--outline-var) 50%, transparent); font-size: 13px; }
.plano li .material-symbols-outlined { font-size: 18px; }
.plano li small { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-var); }
.plano-existe .material-symbols-outlined, .plano-feito .material-symbols-outlined { color: var(--success); }
.plano-criar .material-symbols-outlined, .plano-atualizar .material-symbols-outlined { color: var(--secondary); }
.plano-criar, .plano-atualizar { color: var(--on-surface); font-weight: 500; }
.plano-erro .material-symbols-outlined, .plano-erro { color: var(--error); }
.aviso-producao { color: var(--error); font-weight: 600; }
.aviso-producao input { accent-color: var(--error); }

/* ══ Régua de rematrícula (igual ao EAVision) ══ */
/* Séries dos gráficos: ênfase no ano em campanha; anos anteriores em cinza, tracejados e com rótulo direto. */
:root { --serie-alvo: var(--secondary); --serie-ant1: #8a93a8; --serie-ant2: #5b6378; }
:root[data-theme="light"] { --serie-ant1: #6b7280; --serie-ant2: #a3a9b6; }
.pilha { display: grid; gap: 16px; margin: 16px 0; }

/* Cartões do topo */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; animation: entrar .4s ease both; }
.kpi { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px 12px; background: var(--surf-cont); border: 1px solid var(--outline-var);
  border-radius: var(--r-card); color: var(--on-surface); font: inherit; border-top: 3px solid var(--kpi-cor, var(--outline-var)); }
.kpi.sucesso { --kpi-cor: var(--success); } .kpi.alerta { --kpi-cor: var(--warning); } .kpi.perigo { --kpi-cor: var(--error); } .kpi.base { --kpi-cor: var(--secondary); }
.kpi.clicavel { cursor: pointer; transition: transform .1s, box-shadow .15s, border-color .15s; }
.kpi.clicavel:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); border-color: var(--kpi-cor); }
.kpi.clicavel:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.kpi.ativo { background: color-mix(in srgb, var(--kpi-cor) 10%, var(--surf-cont)); border-color: var(--kpi-cor); }
.kpi-rotulo { display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-var); }
.kpi-valor { font-family: var(--f-titulo); font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--on-surface-var); }
.kpi-barra { display: block; height: 6px; border-radius: 3px; background: var(--surf-high); overflow: hidden; }
.kpi-barra i { display: block; height: 100%; border-radius: 3px; background: var(--success); }
.kpi-ir { margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); }
.aviso-regua { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.aviso-regua h2 { margin: 0 0 4px; }

/* "?" com texto de ajuda */
.ajuda { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--outline-var);
  font-family: var(--f-corpo); font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--on-surface-var); cursor: help; text-transform: none; }
.ajuda:hover, .ajuda:focus-visible { border-color: var(--secondary); color: var(--secondary); outline: none; }
.ajuda:hover::after, .ajuda:focus-visible::after { content: attr(data-ajuda); position: absolute; z-index: 30; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: 280px;
  padding: 10px 12px; border-radius: var(--r-btn); background: var(--surf-highest, var(--surf-high)); color: var(--on-surface); border: 1px solid var(--outline-var);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font-family: var(--f-corpo); font-size: 12px; font-weight: 400; line-height: 17px; letter-spacing: 0; white-space: normal; text-align: left; }

/* Comparativo com os anos anteriores e projeção */
.comparativo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; margin-bottom: 16px; }
.cmp { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; min-width: 0; }
.cmp + .cmp { border-left: 1px solid var(--outline-var); }
.cmp-valor { font-family: var(--f-titulo); font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cmp-anos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.cmp-anos li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--on-surface-var); border-top: 1px dashed var(--outline-var); padding-top: 4px; }
.cmp-anos small { font-family: var(--f-mono); font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--on-surface); }
.cmp-anos small.positivo { color: var(--success); } .cmp-anos small.negativo { color: var(--error); }

/* Gráficos */
.graf-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.graf-cab h3, .pilha h3 { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-var); margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.segmentado.mini { padding: 2px; }
.segmentado.mini .seg-bt { padding: 5px 10px; font-size: 10px; }
.grafico.interativo { position: relative; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .eixo { font-family: var(--f-mono); font-size: 10px; fill: var(--on-surface-var); }
.grafico .rotulo-serie { font-family: var(--f-mono); font-size: 11px; font-weight: 600; fill: var(--on-surface-var); }
.grafico .rotulo-serie.alvo { fill: var(--on-surface); font-weight: 700; }
.grafico .guia { stroke: var(--on-surface-var); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico .ponto-hoje { stroke: var(--surf-cont); stroke-width: 2; }
.grafico .faixa-fds { fill: var(--on-surface); opacity: .05; }
.grafico .barra-alvo { fill: var(--serie-alvo); }
.dica { display: none; position: absolute; z-index: 20; pointer-events: none; min-width: 150px; padding: 8px 10px; border-radius: var(--r-btn); background: var(--surf-low);
  border: 1px solid var(--outline-var); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); font-size: 12px; line-height: 18px; color: var(--on-surface); }
.dica b { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-var); }
.marca-ano { display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; }
.nota { font-size: 11px; color: var(--on-surface-var); margin: 6px 0 0; }

/* Recortes: conversão com o traço da conversão geral */
.grade.recortes { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.convs { display: grid; gap: 4px; }
.conv { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; width: 100%; text-align: left; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-btn);
  background: transparent; color: var(--on-surface); font: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.conv:hover { background: var(--surf-high); border-color: var(--outline-var); }
.conv.ativo { background: color-mix(in srgb, var(--secondary) 10%, transparent); border-color: var(--secondary); }
.conv.pequena { opacity: .55; }
.conv-nome { font-size: 13px; font-weight: 600; }
.conv-num { font-family: var(--f-mono); font-size: 11px; color: var(--on-surface-var); }
.conv-num b { color: var(--on-surface); font-size: 12px; }
.conv-barra { grid-column: 1 / -1; position: relative; display: block; height: 6px; border-radius: 3px; background: var(--surf-high); }
.conv-barra i { display: block; height: 100%; border-radius: 3px; background: var(--serie-alvo); }
.conv-barra i.perigo { background: var(--error); }
.conv-barra .traco { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--on-surface); border-radius: 1px; transform: translateX(-1px); }
.conv-sub { grid-column: 1 / -1; font-size: 11px; color: var(--on-surface-var); }
.motivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.motivos li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13px; }
.motivos li .conv-barra { grid-column: 1; }
.motivos li b { grid-row: 1; grid-column: 2; font-family: var(--f-mono); }

/* Lista: situação, dias esperando, separador das abas informativas */
.seg-sep { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--outline-var); }
.situacao-cel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.espera { display: inline-flex; align-items: center; gap: 2px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; color: var(--on-surface-var); }
.espera .material-symbols-outlined { font-size: 13px; }
.espera.media { color: var(--warning); } .espera.alta { color: var(--error); }
.selo.desistente { color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); }
.tabela-numeros tr.info th, .tabela-numeros tr.info td { color: var(--on-surface-var); font-style: italic; }
@media screen and (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 768px) { .kpis { grid-template-columns: 1fr 1fr; } .comparativo { grid-template-columns: 1fr; } .cmp + .cmp { border-left: 0; border-top: 1px solid var(--outline-var); } }

/* Lista principal: sem caixa com rolagem própria; rola com a página. Cabeçalho e turma presos abaixo dos filtros. */
.planilha-wrap.lista-wrap { max-height: none; overflow: visible; }
.lista-wrap .planilha th { top: var(--topo-lista, 0px); }
.lista-wrap .planilha tr.grupo td { top: calc(var(--topo-lista, 0px) + 35px); }
.lista-wrap .planilha thead th:first-child { border-top-left-radius: var(--r-card); }
.lista-wrap .planilha thead th:last-child { border-top-right-radius: var(--r-card); }
/* Faixa compacta fixa: altura zero no fluxo; aparece por cima quando o painel de filtros sai da tela. */
.faixa-fixa { position: sticky; top: -24px; height: 0; z-index: 12; }
.faixa-fixa-conteudo { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px;
  background: var(--surf-cont); border: 1px solid var(--outline-var); border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
  opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; }
/* Some na hora (sem rastro sobre a lista); só a entrada é animada. */
.faixa-fixa.visivel .faixa-fixa-conteudo { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .15s, transform .15s; }
.faixa-fixa-conteudo .segmentado { margin: 0; }
.faixa-fixa-conteudo input[type=search] { flex: 1 1 220px; min-width: 160px; max-width: 360px; min-height: 32px; }
.faixa-fixa-conteudo .bt.com-filtro { border-color: var(--secondary); color: var(--secondary); }
.faixa-fixa-conteudo .contagem b { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .faixa-fixa-conteudo { transition: none; } }
/* Celular: cada aluno vira um cartão (antes a tabela tinha 820px e a coluna de tarefas ficava fora da tela). */
@media screen and (max-width: 768px) {
  .planilha-wrap.lista-wrap table { min-width: 0; }
  .lista-wrap .planilha, .lista-wrap .planilha tbody, .lista-wrap .planilha tr, .lista-wrap .planilha td { display: block; width: auto; }
  .lista-wrap .planilha thead { display: none; }
  .lista-wrap .planilha tr.linha { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; padding: 12px; border-bottom: 1px solid var(--outline-var); }
  .lista-wrap .planilha tr.linha td { padding: 0; border: 0; min-width: 0; }
  .lista-wrap .planilha td.nome { grid-column: 1; }
  .lista-wrap .planilha td.acoes-linha { grid-column: 2; grid-row: 1; }
  .lista-wrap .planilha td.serie, .lista-wrap .planilha tr.linha > td:nth-child(3), .lista-wrap .planilha td.tarefas { grid-column: 1 / -1; }
  .lista-wrap .planilha td.serie { white-space: normal; }
  /* em bloco, o sticky precisa estar na linha (a célula só gruda dentro da própria linha) */
  .lista-wrap .planilha tr.grupo { position: sticky; top: var(--topo-lista, 0px); z-index: 2; }
  .lista-wrap .planilha tr.grupo td { position: static; }
  .faixa-fixa-conteudo input[type=search] { display: none; }
  .faixa-fixa-conteudo .segmentado { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .grupo-cab .conts { margin-left: 0; }
}
/* Seletor de campanha (atual e anteriores) e aviso de consulta */
.seletor-campanha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -8px 0 16px; }
.seletor-campanha .seg-bt .qtd { margin-left: 2px; }
.aviso-historico { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.aviso-historico .bt { margin-left: auto; }

/* Resumo do aluno no topo da ficha */
.ficha-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.espera.grande { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--surf-high); }
.espera.grande .material-symbols-outlined { font-size: 15px; }
.ficha-evento { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.ficha-evento .material-symbols-outlined { font-size: 16px; }
.ficha-evento.ok { color: var(--success); } .ficha-evento.perigo { color: var(--error); }
.ficha-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; margin: 0; }
.ficha-dados div { min-width: 0; }
.ficha-dados dt { font-family: var(--f-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-var); margin-bottom: 2px; }
.ficha-dados dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--on-surface); overflow-wrap: anywhere; }

/* Coluna "Tarefas e comentários": uma ação por vez. */
.acomp { display: grid; gap: 6px; max-width: 520px; }
.acomp-coment { display: flex; align-items: center; gap: 10px; }
.acomp-coment .coment-novo { flex: 1; min-width: 0; }
.acomp-coment .bt-link { white-space: nowrap; font-size: 11px; }
.criar-tarefa { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px dashed color-mix(in srgb, var(--secondary) 55%, transparent); border-radius: var(--r-btn);
  background: transparent; color: var(--secondary); cursor: pointer; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: background .15s, border-color .15s; }
.criar-tarefa .material-symbols-outlined { font-size: 17px; }
.criar-tarefa:hover { border-style: solid; border-color: var(--secondary); background: color-mix(in srgb, var(--secondary) 8%, transparent); }
.criar-tarefa:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* Lista vazia com saída; barra de alterações não salvas (Configurações); foco no cabeçalho de turma */
td.vazio { text-align: center; padding: 28px 12px !important; }
td.vazio p { margin: 0 0 10px; color: var(--on-surface-var); }
.barra-salvar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 10px 14px; border-radius: var(--r-card);
  background: var(--surf-highest); border: 1px solid var(--secondary); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font-weight: 600; }
.barra-salvar .bt:first-of-type { margin-left: auto; }
.grupo-cab:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }