/* =====================================================================
   Painel de Matriculas 2027 - COOPEMA
   Dashboard de tela unica (100vh), sidebar grafite, area de trabalho clara.
   ===================================================================== */

/* ---------- Tokens: tema claro ---------- */
:root {
  --fonte: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-num: 'Figtree', ui-monospace, 'Segoe UI', sans-serif;

  --fundo:        #eef1f6;
  --superficie:   #ffffff;
  --superficie-2: #f7f9fc;
  --borda:        #dfe4ec;
  --borda-forte:  #c7cfdc;

  --texto:        #131a26;
  --texto-medio:  #55607a;
  --texto-fraco:  #8a94a8;

  --barra:        #161b26;
  --barra-texto:  #aab3c5;
  --barra-ativo:  #ffffff;
  --barra-hover:  rgba(255,255,255,.07);

  --azul:    #2563eb;
  --azul-cl: #dbe7ff;
  --verde:   #059669;
  --verde-cl:#d5f2e6;
  --roxo:    #8b5cf6;
  --ciano:   #0891b2;
  --ambar:   #d97706;
  --ambar-cl:#fdeccd;
  --vermelho:#dc2626;
  --vermelho-cl:#fbdddd;

  --sombra:    0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --sombra-md: 0 4px 12px rgba(16,24,40,.08);
  --raio:   14px;
  --raio-sm: 9px;

  --grade:  12px;
  --sidebar-w: 224px;
}

/* ---------- Tokens: tema escuro ---------- */
:root[data-tema="escuro"] {
  --fundo:        #0d1017;
  --superficie:   #161b24;
  --superficie-2: #1c222d;
  --borda:        #262e3b;
  --borda-forte:  #37414f;

  --texto:        #e8ecf3;
  --texto-medio:  #9aa5b8;
  --texto-fraco:  #6b7689;

  --barra:        #090c12;
  --barra-texto:  #8b95a8;
  --barra-ativo:  #ffffff;
  --barra-hover:  rgba(255,255,255,.06);

  --azul:    #5b8cff;
  --azul-cl: #1c2a49;
  --verde:   #34d399;
  --verde-cl:#12342b;
  --roxo:    #a78bfa;
  --ciano:   #22d3ee;
  --ambar:   #fbbf24;
  --ambar-cl:#3a2c10;
  --vermelho:#f87171;
  --vermelho-cl:#3a1a1a;

  --sombra:    0 1px 2px rgba(0,0,0,.4);
  --sombra-md: 0 4px 16px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo:        #0d1017;
    --superficie:   #161b24;
    --superficie-2: #1c222d;
    --borda:        #262e3b;
    --borda-forte:  #37414f;
    --texto:        #e8ecf3;
    --texto-medio:  #9aa5b8;
    --texto-fraco:  #6b7689;
    --barra:        #090c12;
    --barra-texto:  #8b95a8;
    --azul:    #5b8cff;  --azul-cl: #1c2a49;
    --verde:   #34d399;  --verde-cl:#12342b;
    --roxo:    #a78bfa;  --ciano:   #22d3ee;
    --ambar:   #fbbf24;  --ambar-cl:#3a2c10;
    --vermelho:#f87171;  --vermelho-cl:#3a1a1a;
    --sombra:    0 1px 2px rgba(0,0,0,.4);
    --sombra-md: 0 4px 16px rgba(0,0,0,.45);
  }
}

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

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
[hidden] { display: none !important; }

::selection { background: var(--azul); color: #fff; }

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

/* =====================================================================
   Estrutura: sidebar + area de trabalho, exatamente uma tela
   ===================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ---------- Sidebar ---------- */
.lateral {
  background: var(--barra);
  color: var(--barra-texto);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 0 10px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 10px;
}
.marca__sigla {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--azul), var(--roxo));
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 12px;
  letter-spacing: -.02em;
}
.marca__nome { color: #fff; font-weight: 700; font-size: 13.5px; line-height: 1.15; }
.marca__sub  { font-size: 10.5px; color: var(--barra-texto); letter-spacing: .02em; }

.nav { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: var(--raio-sm);
  color: var(--barra-texto);
  font-size: 13px; font-weight: 520;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.nav a:hover { background: var(--barra-hover); color: #fff; text-decoration: none; }
.nav a.ativo { background: var(--azul); color: #fff; font-weight: 600; }
.nav svg { width: 16px; height: 16px; flex: none; opacity: .9; }

.lateral__grupo {
  margin-top: 18px;
  padding: 0 16px;
}
.lateral__titulo {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #5c6679; margin-bottom: 7px;
}

/* Filtros em pilulas */
.pilulas { display: flex; flex-wrap: wrap; gap: 5px; }
.pilula {
  font: inherit; font-size: 11.5px; font-weight: 550;
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: var(--barra-texto);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.pilula:hover { background: var(--barra-hover); color: #fff; }
.pilula[aria-pressed="true"] {
  background: var(--azul); border-color: var(--azul); color: #fff;
}

.lateral select {
  width: 100%;
  font: inherit; font-size: 12px;
  padding: 6px 8px;
  border-radius: var(--raio-sm);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #dfe4ee;
}
.lateral select option { background: #1b212c; color: #dfe4ee; }

.lateral__rodape {
  margin-top: auto;
  padding: 12px 16px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 11px;
  color: #5c6679;
}
.usuario-chip {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.usuario-chip__bola {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--azul-cl); color: var(--azul);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
:root[data-tema="escuro"] .usuario-chip__bola { color: #cfe0ff; }
.usuario-chip__nome { color: #d8dee9; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-chip__perfil { font-size: 10px; color: #5c6679; }

/* ---------- Area de trabalho ---------- */
.trabalho {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--grade);
  padding: var(--grade);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.topo {
  display: flex; align-items: center; gap: 12px;
  min-height: 34px;
}
.topo h1 { font-size: 17px; }
.topo__meta { font-size: 12px; color: var(--texto-medio); }
.topo__dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 99px;
  background: var(--verde-cl); color: var(--verde);
}
.selo--alerta { background: var(--ambar-cl); color: var(--ambar); }
.selo--erro   { background: var(--vermelho-cl); color: var(--vermelho); }
.selo--neutro { background: var(--superficie-2); color: var(--texto-medio);
                border: 1px solid var(--borda); }

/* =====================================================================
   Botoes e formularios
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 15px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
  text-decoration: none;
}
.btn:hover { background: var(--superficie-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primario {
  background: var(--azul); border-color: var(--azul); color: #fff;
}
.btn--primario:hover { background: #1d4fd8; border-color: #1d4fd8; }
:root[data-tema="escuro"] .btn--primario { color: #08111f; }
.btn--perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn--pequeno { padding: 5px 10px; font-size: 12px; }
.btn--icone { padding: 7px; width: 32px; height: 32px; }
.btn--icone svg { width: 15px; height: 15px; }

.campo { display: block; margin-bottom: 13px; }
.campo__rotulo {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--texto-medio); margin-bottom: 5px;
}
.campo__dica { font-size: 11.5px; color: var(--texto-fraco); margin-top: 4px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  font: inherit; font-size: 13.5px;
  padding: 8px 11px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent);
}
textarea { resize: vertical; min-height: 120px; font-family: ui-monospace,
  'Cascadia Mono', 'Consolas', monospace; font-size: 12px; line-height: 1.5; }

/* =====================================================================
   Cartoes de indicador (KPI)
   ===================================================================== */
.kpis {
  display: grid;
  align-content: start;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.05fr);
  gap: var(--grade);
}

.kpi {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 11px 14px 10px;
  box-shadow: var(--sombra);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.kpi::before {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: 3px; background: var(--cor, var(--azul));
}
.kpi__rotulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-fraco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi__valor {
  font-family: var(--fonte-num);
  font-size: 27px; font-weight: 750; letter-spacing: -.03em;
  line-height: 1.1; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.kpi__rodape {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px; font-size: 11.5px; color: var(--texto-medio);
  white-space: nowrap;
}
/* A sparkline precisa de um contentor de altura FIXA e posicao relativa.
   Sem isso o Chart.js (responsive + maintainAspectRatio:false) mede o pai de
   altura automatica, cresce, o pai cresce junto, e o cartao infla sem parar. */
.kpi__spark-caixa {
  position: relative;
  height: 24px;
  width: 100%;
  margin-top: 4px;
  flex: none;
}
.kpi__spark-caixa > canvas {
  position: absolute; inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.delta--sobe  { color: var(--verde); }
.delta--desce { color: var(--vermelho); }
.delta--zero  { color: var(--texto-fraco); }

/* Cartao de acao (importar) */
.kpi--acao {
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--azul) 10%, var(--superficie)), var(--superficie));
}
.kpi--acao::before { background: var(--azul); }

/* =====================================================================
   Grade dos blocos - a tela unica
   ===================================================================== */
.blocos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--grade);
  min-height: 0;
}

.bloco--evolucao   { grid-column: 1; grid-row: 1; }
.bloco--composicao { grid-column: 1; grid-row: 2; }
.bloco--turmas     { grid-column: 2; grid-row: 1 / 3; }

.bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0; min-width: 0;
  overflow: hidden;
}

.bloco__topo {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--borda);
  min-height: 0;
}
.bloco__titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-medio);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bloco__acoes { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.bloco__corpo { padding: 10px 13px 12px; min-height: 0; position: relative; }
.bloco__corpo--rolavel { overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
.bloco__corpo--grafico { padding: 8px 10px 6px; }

/* Mini-abas dentro de um bloco */
.abas { display: flex; gap: 2px; margin-left: auto; }
.aba {
  font: inherit; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  color: var(--texto-fraco); cursor: pointer;
  transition: background .12s, color .12s;
}
.aba:hover { background: var(--superficie-2); color: var(--texto); }
.aba[aria-selected="true"] {
  background: var(--azul-cl); color: var(--azul); border-color: transparent;
}
:root[data-tema="escuro"] .aba[aria-selected="true"] { color: #b9d0ff; }

/* Area de canvas: sempre cabe no bloco */
.grafico-caixa { position: relative; width: 100%; height: 100%; min-height: 0; }
.grafico-caixa > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* =====================================================================
   Barras por turma
   ===================================================================== */
/* As 33 turmas precisam caber sem rolagem: duas colunas resolvem com folga
   (37 linhas viram 19 por coluna). Colunas CSS nao suportam position:sticky,
   entao o cabecalho de segmento deixa de ser fixo - com 19 linhas a vista,
   ele nunca sai da tela mesmo. */
/* Duas colunas de verdade, nao colunas CSS: assim cada coluna e um flex
   que estica as linhas para ocupar toda a altura do bloco, em vez de
   terminar no meio e deixar um vazio embaixo. A divisao entre as colunas
   cai sempre numa troca de segmento, calculada no PHP. */
.turmas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  height: 100%;
  min-height: 0;
}
.turmas__coluna {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Ultimo recurso: em tela muito baixa, 21 linhas nao cabem nem no minimo.
     Rolar e ruim, mas cortar turma da tela sem aviso e pior. */
  overflow-y: auto;
  scrollbar-width: thin;
}

.turma-grupo {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-fraco);
  padding: 7px 0 3px;
  background: var(--superficie);
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
}
.turmas__coluna > .turma-grupo:first-child { padding-top: 0; }
.turma-grupo::after {
  content: ''; flex: 1; height: 1px; background: var(--borda);
}
.turma-grupo:first-child { padding-top: 0; }

.turma {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 54px;
  align-items: center; gap: 8px;
  padding: 2px 0;
  border-radius: 5px;
  /* cresce para dividir a sobra, mas sem virar uma faixa gigante */
  flex: 1 1 auto;
  min-height: 18px;
  max-height: 38px;
}
.turma:hover { background: var(--superficie-2); }

.turma__nome {
  font-size: 12px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.turma__turno {
  font-size: 9px; color: var(--texto-fraco); font-weight: 700;
  margin-left: 3px;
}

.turma__trilho {
  position: relative; height: 15px; border-radius: 4px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.turma__barra {
  position: absolute; inset: 0 auto 0 0;
  width: var(--pct, 0%);
  border-radius: 3px 0 0 3px;
  transition: width .5s cubic-bezier(.22,.9,.3,1);
}
/* Verde e a cor da barra de turma. O ambar para "abaixo de 40%" saiu:
   no comeco da campanha TODA turma esta abaixo de 40%, entao ele pintava
   o painel inteiro de alerta sem dizer nada. Vermelho fica so para o que
   e sempre um problema: turma acima da capacidade. */
.turma__barra { background: var(--verde); }
.turma--cheia  .turma__barra { background: var(--verde); }
.turma--lotada .turma__barra { background: var(--vermelho); }
/* Marca de onde a turma estava no ano-base */
.turma__base {
  position: absolute; top: -1px; bottom: -1px;
  left: var(--base, 0%);
  width: 2px; background: var(--texto-fraco);
  opacity: .55;
}
.turma__base::after {
  content: ''; position: absolute; top: -2px; left: -2px;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 4px solid var(--texto-fraco);
}

.turma__numeros {
  font-family: var(--fonte-num); font-size: 11.5px;
  font-variant-numeric: tabular-nums; text-align: right;
  color: var(--texto-medio); white-space: nowrap;
}
.turma__numeros b { color: var(--texto); font-weight: 700; }

/* =====================================================================
   Tabelas
   ===================================================================== */
.tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela th {
  text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-fraco); padding: 6px 8px;
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; background: var(--superficie); z-index: 1;
}
.tabela td {
  padding: 7px 8px; border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela .num {
  text-align: right; font-family: var(--fonte-num);
  font-variant-numeric: tabular-nums;
}
.tabela--compacta td, .tabela--compacta th { padding: 5px 7px; font-size: 12px; }

/* =====================================================================
   Paginas simples (login, importar, admin)
   ===================================================================== */
.pagina {
  height: 100vh; height: 100dvh;
  overflow-y: auto;
}
.pagina .trabalho {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: visible;
  height: auto;
  min-height: 100dvh;
}
.app--rolavel { height: auto; min-height: 100dvh; overflow: visible; }
.app--rolavel .lateral { position: sticky; top: 0; height: 100dvh; }
.app--rolavel .trabalho { overflow: visible; height: auto; }

.painel-branco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px;
}
.painel-branco + .painel-branco { margin-top: var(--grade); }
.painel-branco h2 { font-size: 15px; margin-bottom: 4px; }
.painel-branco__sub { font-size: 12.5px; color: var(--texto-medio); margin-bottom: 14px; }

/* Login */
.login {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(1100px 500px at 15% -10%, color-mix(in srgb, var(--azul) 16%, transparent), transparent 60%),
    radial-gradient(900px 480px at 100% 110%, color-mix(in srgb, var(--roxo) 14%, transparent), transparent 60%),
    var(--fundo);
}
.login__cartao {
  width: 100%; max-width: 372px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 18px;
  box-shadow: var(--sombra-md);
  padding: 28px 26px 24px;
}
.login__marca { text-align: center; margin-bottom: 20px; }
.login__sigla {
  width: 48px; height: 48px; margin: 0 auto 10px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--azul), var(--roxo));
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 17px;
}
.login__titulo { font-size: 17px; }
.login__sub { font-size: 12.5px; color: var(--texto-medio); margin-top: 2px; }

/* Avisos */
.aviso {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 13px; border-radius: var(--raio-sm);
  font-size: 12.5px; line-height: 1.45;
  margin-bottom: 13px;
  border: 1px solid transparent;
}
.aviso--erro  { background: var(--vermelho-cl); color: var(--vermelho);
                border-color: color-mix(in srgb, var(--vermelho) 25%, transparent); }
.aviso--ok    { background: var(--verde-cl);    color: var(--verde);
                border-color: color-mix(in srgb, var(--verde) 25%, transparent); }
.aviso--atencao { background: var(--ambar-cl);  color: var(--ambar);
                border-color: color-mix(in srgb, var(--ambar) 25%, transparent); }
.aviso--info  { background: var(--azul-cl);     color: var(--azul);
                border-color: color-mix(in srgb, var(--azul) 25%, transparent); }
.aviso b { font-weight: 700; }
.aviso ul { margin: 5px 0 0; padding-left: 17px; }

/* Importacao: duas caixas lado a lado */
.dois-modelos {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--grade);
}
.caixa-modelo__topo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.caixa-modelo__nome { font-size: 12.5px; font-weight: 700; }
.caixa-modelo__dica { font-size: 11.5px; color: var(--texto-fraco); }
.caixa-modelo textarea { min-height: 190px; }

.confere {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 9px; margin: 14px 0;
}
.confere__item {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 9px 11px;
}
.confere__rotulo { font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-fraco); }
.confere__valor { font-family: var(--fonte-num); font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* =====================================================================
   Animacao de entrada - uma vez so, no carregamento
   ===================================================================== */
@keyframes entra {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.anima { animation: entra .34s cubic-bezier(.22,.9,.3,1) both; }
.anima-1 { animation-delay: .03s; }
.anima-2 { animation-delay: .07s; }
.anima-3 { animation-delay: .11s; }
.anima-4 { animation-delay: .15s; }

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

/* =====================================================================
   Vazio
   ===================================================================== */
.vazio {
  display: grid; place-items: center; height: 100%;
  text-align: center; padding: 18px; gap: 7px;
}
.vazio__titulo { font-size: 13px; font-weight: 650; color: var(--texto-medio); }
.vazio__texto  { font-size: 12px; color: var(--texto-fraco); max-width: 34ch; }

/* =====================================================================
   Responsivo - abaixo de 1100px a tela unica deixa de ser possivel
   ===================================================================== */
/* Seis cartoes so cabem lado a lado em tela larga */
@media (max-width: 1560px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi__valor { font-size: 24px; }
}

@media (max-width: 1240px) {
  :root { --sidebar-w: 196px; --grade: 10px; }
  .kpi__valor { font-size: 23px; }
  .turma { grid-template-columns: 62px minmax(0, 1fr) 50px; }
  .turmas { gap: 0 12px; }
}

@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; height: auto; min-height: 100dvh; overflow: visible; }
  .lateral {
    position: sticky; top: 0; z-index: 50;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: 9px 12px; gap: 9px; height: auto;
    overflow: visible;
  }
  .marca { border: 0; margin: 0; padding: 0; }
  .nav { flex-direction: row; flex-wrap: wrap; padding: 0; }
  .lateral__grupo { margin: 0; padding: 0; }
  .lateral__titulo { display: none; }
  .lateral__rodape { margin-left: auto; border: 0; padding: 0; }
  .lateral select { width: auto; min-width: 118px; }

  .trabalho { height: auto; overflow: visible; grid-template-rows: none; }
  .blocos {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .bloco--evolucao, .bloco--composicao, .bloco--turmas {
    grid-column: 1; grid-row: auto;
  }
  /* Empilhado no celular, duas colunas de turma ficam apertadas demais */
  .turmas { grid-template-columns: 1fr; height: auto; }
  .turma { flex: 0 0 auto; max-height: none; }
  .bloco { min-height: 268px; }
  .bloco--turmas { min-height: 420px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dois-modelos { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 13.5px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi--acao { grid-column: 1 / -1; }
  .turma { grid-template-columns: 74px minmax(0, 1fr) 54px; }
  .tabela { font-size: 12px; }
  .login__cartao { padding: 22px 18px; }
}

/* Impressao: o painel cabe em uma folha */
@media print {
  .lateral, .bloco__acoes, .btn { display: none !important; }
  .app { display: block; height: auto; }
  .bloco { break-inside: avoid; box-shadow: none; }
}

/* =====================================================================
   Importacao por imagem
   ===================================================================== */

/* Abas de escolha do metodo de entrada */
.entrada-abas {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borda);
  margin: -4px 0 16px;
}
.entrada-aba {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 14px;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--texto-fraco);
  cursor: pointer; text-decoration: none;
  transition: color .12s, border-color .12s;
}
.entrada-aba:hover { color: var(--texto); text-decoration: none; }
.entrada-aba[aria-selected="true"] {
  color: var(--azul); border-bottom-color: var(--azul);
}
.entrada-aba--link { margin-left: auto; color: var(--texto-fraco); font-weight: 500; }

/* Area de soltar arquivo */
.solta {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; text-align: center;
  padding: 26px 16px;
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
  min-height: 190px;
  justify-content: center;
}
.solta:hover, .solta--sobre {
  border-color: var(--azul);
  background: color-mix(in srgb, var(--azul) 6%, var(--superficie));
}
.solta--cheia { border-style: solid; border-color: var(--verde); }
.solta__icone { color: var(--texto-fraco); }
.solta__icone svg { width: 30px; height: 30px; }
.solta--cheia .solta__icone { display: none; }
.solta__nome { font-size: 13.5px; font-weight: 700; }
.solta__dica { font-size: 11.5px; color: var(--texto-fraco); }
.solta__acao { font-size: 12px; color: var(--azul); font-weight: 600; margin-top: 3px; }
.solta__previa {
  max-height: 128px; width: auto; border-radius: var(--raio-sm);
  border: 1px solid var(--borda); margin-top: 6px;
  box-shadow: var(--sombra);
}

/* Previa lado a lado com os prints */
.previa-com-imagem {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--grade);
  align-items: start;
}
.previa-imagens { position: sticky; top: var(--grade); }
.previa-imagem + .previa-imagem { margin-top: 12px; }
.previa-imagem__rotulo {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 4px;
}
.previa-imagem img {
  width: 100%; border-radius: var(--raio-sm);
  border: 1px solid var(--borda); display: block;
  background: #fff;
}

/* Grade editavel */
.tabela-previa td { padding: 3px 5px; }
.tabela-previa th { padding: 6px 5px; }
.cel {
  width: 100%; min-width: 48px; max-width: 62px;
  padding: 3px 5px; font-size: 12px; text-align: right;
  font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
  border-radius: 5px;
}
.cel--forte { font-weight: 700; }
.cel--erro {
  border-color: var(--vermelho) !important;
  background: var(--vermelho-cl);
  color: var(--vermelho);
}
.linha-previa--erro { background: color-mix(in srgb, var(--vermelho) 7%, transparent); }
.linha-previa--ok   { background: color-mix(in srgb, var(--verde) 7%, transparent); }

@media (max-width: 1100px) {
  .previa-com-imagem { grid-template-columns: 1fr; }
  .previa-imagens { position: static; }
}

/* =====================================================================
   Transferencias
   ===================================================================== */

/* Barras de motivo (painel e tela de transferencias) */
.motivos { display: flex; flex-direction: column; gap: 3px; }

.motivo {
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 58px;
  align-items: center; gap: 9px;
  padding: 3px 0;
}
.motivo__nome {
  font-size: 11.5px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.motivo__trilho {
  position: relative; height: 14px; border-radius: 4px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.motivo__barra {
  position: absolute; inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: var(--cor, var(--vermelho));
  border-radius: 3px 0 0 3px;
  transition: width .5s cubic-bezier(.22,.9,.3,1);
}
.motivo__num {
  font-family: var(--fonte-num); font-size: 11.5px;
  font-variant-numeric: tabular-nums; text-align: right;
  color: var(--texto-medio); white-space: nowrap;
}
.motivo__num b { color: var(--texto); }

/* Marca de transferencia na linha da turma:
   -2 = efetivadas (ja saiu)   ?3 = pendentes (pediu, ainda nao saiu) */
.turma__transf {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  color: var(--vermelho);
  margin-left: 3px;
}

/* Pastilha de motivo no gerenciador */
.pilula-motivo {
  font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--cor, var(--vermelho));
  background: color-mix(in srgb, var(--cor, var(--vermelho)) 12%, transparent);
  color: var(--cor, var(--vermelho));
  cursor: pointer;
  transition: background .12s;
}
.pilula-motivo:hover {
  background: color-mix(in srgb, var(--cor, var(--vermelho)) 24%, transparent);
}

/* Bolinha colorida antes do nome do motivo na tabela */
.marca-motivo {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--cor, var(--vermelho));
  margin-right: 5px; vertical-align: middle;
}

/* A aba de situacao da lista e um link, nao um botao */
a.aba { text-decoration: none; }
a.aba:hover { text-decoration: none; }

@media (max-width: 1240px) {
  .motivo { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) 48px; }
}