/* Estilos específicos do app CX (além do kit slmandic-kv-escuro).
   Mantidos separados para não sobrescrever o style.css gerado. */

/* Reset da margem padrão do body — sem isso a topbar não encosta nas bordas */
html, body { margin: 0; padding: 0; }
body.slm { min-height: 100vh; }

/* Transição suave entre páginas (View Transitions nativas, same-origin). Faz um
   crossfade rápido ao trocar de aba; onde o navegador não suporta, a navegação
   segue normal, sem prejuízo. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .22s; animation-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Legenda dos casos de resgate — nota discreta (sem contagem; números ficam nos KPIs) */
.cx-legenda-nota { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -6px 0 18px;
  font-family: var(--slm-font-mono); font-size: 11px; color: var(--slm-t2); }
.cx-leg2 { display: inline-flex; align-items: center; gap: 6px; }
.cx-leg2::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--slm-border-strong); display: inline-block; flex: none; }
.cx-leg2.r1::before { background: var(--slm-green); }
.cx-leg2.r2::before { background: var(--slm-gold); }
.cx-leg2.r3::before { background: var(--slm-red); }
.cx-leg2.r4::before { background: var(--slm-blue); }

/* ---- Acompanhamento: desfecho, quintil, gráfico, lacunas ---- */
.slm-chip.cx-desf { border: 1px solid transparent; }
.cx-desf.canc { background: rgba(232,93,110,.22); color:#ff9aa8; }
.cx-desf.aband { background: rgba(255,120,73,.20); color:#ffb08e; }
.cx-desf.ativo { background: rgba(76,191,139,.16); color:#7fe3b5; }
.cx-desf.ok { background: rgba(76,191,139,.20); color:#7fe3b5; }
.cx-desf.transf { background: rgba(74,111,216,.20); color:#9bb8ff; }
.cx-desf.tranc, .cx-desf.na { background: var(--slm-navy-darker); color: var(--slm-t2); }
.slm.light .cx-desf.canc { color:#c0293c; }
.slm.light .cx-desf.aband { background: rgba(255,120,73,.16); color:#B0461C; }
.slm.light .cx-desf.ativo, .slm.light .cx-desf.ok { color:#0e7a63; }
.slm.light .cx-desf.transf { color:#274db0; }

/* Chip de quintil (categoria antes da saída) — texto colorido por faixa interna */
.cx-quintil { font-family: var(--slm-font-mono); font-size: 11px; font-weight: 600; }
.cx-quintil.critico { color:#ff9aa8; } .slm.light .cx-quintil.critico { color:#c0293c; }
.cx-quintil.alto { color:#ffb08e; } .slm.light .cx-quintil.alto { color:#b5480f; }
.cx-quintil.medio { color: var(--slm-gold-bright); } .slm.light .cx-quintil.medio { color:#8a6a00; }
.cx-quintil.medio_baixo { color:#9bb8ff; } .slm.light .cx-quintil.medio_baixo { color:#274db0; }
.cx-quintil.baixo { color:#7fe3b5; } .slm.light .cx-quintil.baixo { color:#0e7a63; }

/* Login SSO — botão Microsoft + divisor "ou" */
.cx-ms-btn { display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:11px 14px; border-radius:9px; text-decoration:none;
  background:#fff; color:#1b1b1b; font-family:var(--slm-font-display); font-weight:600;
  font-size:14px; border:1px solid #d8dbe6; transition:box-shadow .15s ease, transform .05s ease; }
.cx-ms-btn:hover { box-shadow:0 4px 14px rgba(0,0,0,.18); }
.cx-ms-btn:active { transform:translateY(1px); }
.cx-ms-btn svg { flex:none; }
.cx-ou { display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--slm-t2);
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.cx-ou::before, .cx-ou::after { content:""; flex:1; height:1px; background:var(--slm-border); }

/* Botão de info (i) com popover de explicação */
.cx-info { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  color:var(--slm-t2); cursor:help; position:relative; vertical-align:middle;
  margin-left:7px; flex:none; transition:color .15s ease; }
.cx-info svg { width:13px; height:13px; display:block; }
/* cores FIXAS (não dependem do tema): o ⓘ aparece dentro de "ilhas navy" (barra
   de filtros, topbar) onde as variáveis de tema invertem e deixavam o balão
   ilegível (texto branco em fundo claro). */
.cx-info:hover, .cx-info:focus { color:#FFD341; outline:none; }
.cx-info .cx-info-pop { display:none; position:absolute; top:22px; left:-2px; z-index:60; width:min(320px,80vw);
  background:#141B47; border:1px solid rgba(245,197,24,.38); border-radius:9px;
  padding:11px 13px; font-family:var(--slm-font-body); font-size:11.5px; font-style:normal; font-weight:400;
  text-transform:none; letter-spacing:normal;   /* não herda o caixa-alta de rótulos/th */
  color:rgba(255,255,255,.90); line-height:1.5; text-align:left; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.cx-info .cx-info-pop b { color:#fff; }
.cx-info .cx-info-pop::before { content:""; position:absolute; top:-5px; left:11px; width:9px; height:9px;
  background:#141B47; border-left:1px solid rgba(245,197,24,.38);
  border-top:1px solid rgba(245,197,24,.38); transform:rotate(45deg); }
.cx-info:hover .cx-info-pop, .cx-info:focus .cx-info-pop { display:block; }
/* Variante: abre para a ESQUERDA (i perto da borda direita, ex.: modal) */
.cx-info.cx-info-right .cx-info-pop { left:auto; right:-2px; }
.cx-info.cx-info-right .cx-info-pop::before { left:auto; right:11px; }

/* Gráfico de barras (série temporal) */
.cx-chart { width: 100%; height: auto; max-height: 240px; display: block; }
.cx-chart text { fill: var(--slm-t0); }

/* Lacunas: número grande + lista no pop-up */
.cx-lacbig { font-family: var(--slm-font-display); font-weight: 700; font-size: 34px;
  color: var(--slm-gold-bright); line-height: 1.05; margin: 8px 0 12px; }
.cx-lacbig small { font-size: 16px; color: var(--slm-t2); font-weight: 500; }
.cx-laclist { border-top: 1px solid var(--slm-border); }
.cx-lacrow { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 4px; border-bottom: 1px solid var(--slm-border); cursor: pointer; }
.cx-lacrow:hover { background: rgba(245,197,24,.07); }
.slm.light .cx-lacrow:hover { background: rgba(20,28,63,.05); }
.cx-lacrow .nome { color: var(--slm-t0); font-weight: 500; }

/* Nav entre páginas (topbar). A topbar é SEMPRE navy escura (nos dois temas),
   então as cores aqui são fixas — não usam as variáveis de tema (que invertem
   dourado→navy no claro e deixavam o item ativo azul e ilegível). */
.cx-nav { display: inline-flex; flex-wrap: wrap; gap: 3px; background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 4px; }
.cx-nav a { font-family: var(--slm-font-display); font-weight: 600; font-size: 12.5px;
  text-decoration: none; color: rgba(255,255,255,.70); padding: 7px 15px; border-radius: 9px;
  white-space: nowrap; transition: background .16s ease, color .16s ease; }
.cx-nav a:hover { color: #fff; background: rgba(255,255,255,.10); }
.cx-nav a.on { background: #F5C518; color: #1A2459; box-shadow: 0 2px 8px rgba(245,197,24,.30); }
.cx-nav a.on:hover { background: #FFD341; color: #1A2459; }

/* Chips do funil de acompanhamento (etapa operacional do CX) */
.cx-funil { white-space: nowrap; }   /* nunca quebra em duas linhas na lista */
.cx-funil.acomp { background: rgba(74,111,216,.18); color: #9fb8ff; }
.slm.light .cx-funil.acomp { background: rgba(74,111,216,.14); color: #2a4bb0; }
.cx-funil.ok { background: rgba(76,191,139,.18); color: #7fe3b5; }
.slm.light .cx-funil.ok { background: rgba(76,191,139,.16); color: #0e7a63; }
/* Log de movimento no histórico de ações */
.cx-move { font-size: 11px; color: var(--slm-t2); margin: 3px 0 1px; display: flex;
  align-items: center; gap: 6px; }
/* Link discreto inline (ex.: "abrir Funil →") */
.cx-inlink { color: var(--slm-gold-bright); text-decoration: none; font-weight: 600; }
.cx-inlink:hover { text-decoration: underline; }

/* Campo somente-leitura (Autor = nome do login) */
.cx-ro { opacity: .8; cursor: not-allowed; }
.cx-ro:focus { outline: none; }

/* Agendamento de retorno (data + botão) no formulário de ação */
.cx-agenda { display: flex; gap: 8px; align-items: center; }
.cx-agenda input[type="date"] { flex: 1; min-width: 0; }
.cx-btn-sm { padding: 8px 12px !important; font-size: 12px !important; white-space: nowrap; }
/* Painel admin: linha de botões de ação por usuário */
.cx-admin-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cx-admin-acoes form { margin: 0; }
/* seletor de papel (Produto / CX / Admin) por usuário */
.cx-papel-sel { font-family: var(--slm-font-display); font-size: 12px; font-weight: 600;
  padding: 7px 10px; border-radius: 9px; border: 1px solid var(--slm-border);
  background: var(--slm-surface-2); color: var(--slm-t1); cursor: pointer; }
.cx-papel-sel:hover { border-color: var(--slm-border-strong); }
/* Botõezinhos do canto (Saiba mais / Admin) — junto do "sair": pequenos, discretos, com borda */
/* Botões de canto (Saiba mais / Admin): a topbar é SEMPRE navy → cores fixas,
   não dependentes do tema. Ativo = pílula dourada cheia (igual à nav principal). */
.cx-corner-link { font-size: 11px; font-weight: 600; padding: 4px 11px;
  border-radius: var(--slm-radius-pill); border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.72); text-decoration: none; white-space: nowrap;
  transition: border-color .14s ease, background .14s ease, color .14s ease; }
.cx-corner-link:hover { color: #fff; border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.10); }
.cx-corner-link.is-on { background: #F5C518; border-color: #F5C518; color: #1A2459;
  box-shadow: 0 2px 8px rgba(245,197,24,.30); }
.cx-corner-link.is-on:hover { background: #FFD341; border-color: #FFD341; color: #1A2459; }
/* Agendamento vencido — destaque */
.cx-atrasado { color: var(--slm-red); font-weight: 700; }
.slm.light .cx-atrasado { color: #c0392b; }

/* Realce sutil e consistente nos botões */
.slm-btn { transition: filter .15s ease, transform .04s ease, box-shadow .15s ease; }
.slm-btn:hover { filter: brightness(1.06); }
.slm-btn:active { transform: translateY(1px); }
.slm-btn[disabled] { opacity: .45; cursor: default; filter: none; }

/* ==========================================================================
   Passe de elegância — microinterações, foco, tabelas e modal
   ========================================================================== */
/* Foco visível e discreto (dourado) nos campos de formulário/filtro */
.slm-form input, .slm-form select, .slm-form textarea,
.slm-fbar input, .slm-fbar select { transition: border-color .15s ease, box-shadow .15s ease; }
.slm-form input:focus, .slm-form select:focus, .slm-form textarea:focus,
.slm-fbar input:focus, .slm-fbar select:focus {
  outline: none; border-color: #F5C518; box-shadow: 0 0 0 3px rgba(245,197,24,.20);
}
/* Chips de filtro com transição suave */
.slm-fchip { transition: background .15s ease, border-color .15s ease, color .15s ease; }

/* Tabelas: zebra sutil + hover de linha mais claro (interativas) */
.slm-table tbody tr:nth-child(even) { background: rgba(255,255,255,.022); }
.slm.light .slm-table tbody tr:nth-child(even) { background: rgba(20,28,63,.025); }
.slm-table.is-interactive tbody tr:hover,
.cx-row:hover { background: rgba(245,197,24,.10); }
.slm.light .slm-table.is-interactive tbody tr:hover,
.slm.light .cx-row:hover { background: rgba(20,28,63,.06); }

/* Modal: carta com leve subida ao abrir (sem cabeçalho fixo — o X fica sempre por cima) */
.cx-modal-card { transform: translateY(10px); transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.cx-modal.open .cx-modal-card { transform: translateY(0); }

/* ---- Barra de rolagem refinada (webkit + Firefox, tema-aware) ----
   IMPORTANTE: os seletores SEM espaço (.slm::) pegam a barra do próprio body
   (a rolagem principal da página) — o WebKit propaga o estilo do body para o
   viewport. Os COM espaço (.slm ::) pegam as barras internas (modal, tabela). */
html { scrollbar-gutter: stable; }
/* Firefox: a barra do viewport é a do <html> */
html, body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.30) transparent; }
:root:has(.slm.light) { scrollbar-color: rgba(20,28,63,.34) transparent; }

/* WebKit: mirar html E body (viewport) + descendentes (modal/tabela) */
html::-webkit-scrollbar, body::-webkit-scrollbar, .slm ::-webkit-scrollbar { width: 13px; height: 13px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .slm ::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner, .slm ::-webkit-scrollbar-corner { background: transparent; }

html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .slm ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.24);
  border-radius: 10px;
  border: 3.5px solid transparent;     /* respiro nas laterais → thumb mais fino e elegante */
  background-clip: content-box;
  transition: background-color .15s ease;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .slm ::-webkit-scrollbar-thumb:hover {
  background: rgba(245,197,24,.6); background-clip: content-box;   /* dourado ao passar o mouse */
}
html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active, .slm ::-webkit-scrollbar-thumb:active {
  background: rgba(245,197,24,.85); background-clip: content-box;
}
/* Tema claro */
html:has(.slm.light)::-webkit-scrollbar-thumb, body.slm.light::-webkit-scrollbar-thumb,
:root:has(.slm.light) ::-webkit-scrollbar-thumb {
  background: rgba(20,28,63,.26); background-clip: content-box;
}
html:has(.slm.light)::-webkit-scrollbar-thumb:hover, body.slm.light::-webkit-scrollbar-thumb:hover,
:root:has(.slm.light) ::-webkit-scrollbar-thumb:hover {
  background: rgba(20,28,63,.46); background-clip: content-box;
}

/* Linha da tabela clicável (abre a ficha em modal) */
.cx-row { cursor: pointer; }
.cx-row:hover { background: rgba(245,197,24,.07); }
.slm.light .cx-row:hover { background: rgba(20,28,63,.05); }

/* Modal / pop-up da ficha do aluno */
.cx-modal { position: fixed; inset: 0; z-index: 500; visibility: hidden; opacity: 0;
  transition: opacity .18s ease, visibility .18s ease; }
.cx-modal.open { visibility: visible; opacity: 1; }
.cx-modal-backdrop {
  position: absolute; inset: 0; background: rgba(8,12,34,.64);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cx-modal-card {
  position: relative; max-width: 840px; margin: 32px auto;
  max-height: calc(100vh - 64px); overflow-y: auto;
  background: var(--slm-navy-deep); border: 1px solid var(--slm-border);
  border-radius: var(--slm-radius); padding: 20px 22px 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.slm.light .cx-modal-card { box-shadow: 0 24px 64px rgba(20,28,63,.28); }
.cx-modal-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--slm-navy-card); border: 1px solid var(--slm-border);
  color: var(--slm-t1); border-radius: 8px;
}
.cx-modal-x:hover { color: var(--slm-gold-bright); border-color: var(--slm-border-strong); }
@media (max-width: 700px) {
  .cx-modal-card { margin: 12px; max-height: calc(100vh - 24px); padding: 16px 14px 8px; }
}
/* deixa espaço para o botão fechar não cobrir faixa/prob do 1º card */
.cx-modal-card #modal-body > .slm-card:first-child { padding-right: 44px; }
.cx-modal-card #modal-body > .slm-card:first-child,
.cx-modal-card #modal-body > .slm-insight:first-child { margin-top: 0; }

/* ==========================================================================
   Refino geral — espaçamentos, tabela e gráfico
   ========================================================================== */
.slm-dash { padding-top: 20px; }

/* Gráfico da trajetória: menos altura, nunca gigante */
.slm-traj { max-height: 210px; }
/* Rótulos do gráfico em alto contraste (branco no escuro, navy no claro) —
   sobrescreve o cinza (--slm-t2) que o kit aplica a .slm-traj text */
.slm-traj text { fill: var(--slm-t0); fill-opacity: 1; }

/* Tabela da lista: mais arejada, números alinhados, nome em destaque */
.slm-table th { padding: 10px 10px; }
.slm-table td { padding: 11px 10px; }
.slm-table td.nome { font-weight: 500; }
/* Tag de inadimplente (mesmo formato do badge "novo", em vermelho) */
.slm-badge.inad { background: rgba(232,93,110,.20); color:#ff9aa8; border:1px solid transparent; }
.slm.light .slm-badge.inad { background: rgba(222,62,84,.15); color:#c0293c; }
/* Tag de aluno modular (azul/informativo — tipo de programa, não risco) */
.slm-badge.modular { background: rgba(74,111,216,.22); color:#9bb8ff; border:1px solid transparent; }
.slm.light .slm-badge.modular { background: rgba(74,111,216,.14); color:#274db0; }
.slm-table td.num { font-variant-numeric: tabular-nums; }
/* Célula "Caso" (titulo_caso) — o que o CX bate o olho */
.slm-table td.cx-caso { color: var(--slm-t0); font-weight: 500; max-width: 320px; }

/* Chip de PRIORIDADE (quartil do 1º quintil) — substitui "faixa" na UI.
   q1=Atenção imediata … q4=Monitoramento; q0=fallback (quintil, se aplicável). */
.slm-prio { font-family: var(--slm-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 10px; border-radius: var(--slm-radius-pill);
  display: inline-block; border: 1px solid transparent; white-space: nowrap; }
.slm-prio.q1 { background: rgba(232,93,110,.20); color:#ff9aa8; }
.slm-prio.q2 { background: rgba(255,120,73,.20); color:#ffb08e; }
.slm-prio.q3 { background: rgba(245,197,24,.16); color: var(--slm-gold-bright); }
.slm-prio.q4 { background: rgba(74,111,216,.22); color:#9bb8ff; }
.slm-prio.q0 { background: var(--slm-navy-darker); color: var(--slm-t2); border-color: var(--slm-border); }
/* Resgate como marca prominente (mesmo peso do Prioridade, em azul) */
.slm-prio.resg { background: rgba(74,111,216,.22); color:#9bb8ff; }
.slm.light .slm-prio.resg { background: rgba(74,111,216,.14); color:#274db0; }
.slm.light .slm-prio.q1 { color:#c0293c; }
.slm.light .slm-prio.q2 { background: rgba(255,120,73,.16); color:#B0461C; }
.slm.light .slm-prio.q3 { background: rgba(245,197,24,.20); color:#8a6a00; }
.slm.light .slm-prio.q4 { color:#274db0; }

/* Ficha: título do caso como headline junto do nome */
.cx-caso-headline { font-family: var(--slm-font-display); font-weight: 600; font-size: 16px;
  color: var(--slm-gold-bright); margin-top: 12px; line-height: 1.25; }
/* Rodapé compacto do card de cima: chips à esquerda, botão à direita */
.cx-topfoot { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.cx-topfoot .cx-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Sinais acesos como lista com marcadores dourados */
.cx-sinais { margin: 4px 0 0; padding-left: 18px; }
.cx-sinais li { font-size: 13.5px; color: var(--slm-t1); line-height: 1.55; margin-bottom: 4px; }
.cx-sinais li::marker { color: var(--slm-gold); }
.slm-table tbody tr { transition: background .12s ease; }

/* Lista: rolagem interna da tabela (~25 alunos visíveis; a página não fica gigante),
   com cabeçalho fixo (sticky) enquanto rola. ~42px por linha → 25 linhas ≈ 1050px. */
.cx-tablewrap { overflow: auto; max-height: min(1080px, 74vh); border-radius: 10px; }
.cx-tablewrap thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--slm-navy-elev);      /* opaco p/ as linhas não vazarem por baixo */
  box-shadow: inset 0 -1px 0 var(--slm-border);
}

/* KPIs e barra de filtros com respiro */
.slm-kpis { margin-bottom: 20px; }
.slm-fbar { gap: 14px 20px; align-items: flex-end; }
.slm-fbar select { background: var(--slm-navy-darker); border: 1px solid var(--slm-border);
  color: var(--slm-t0); border-radius: 8px; padding: 7px 10px;
  font-family: var(--slm-font-mono); font-size: 12px; }
.slm.light .slm-fbar select { color-scheme: light; }

/* Cards com um pouco mais de ar entre si */
.slm-mt { margin-top: 18px; }

/* Ficha: chips do topo com espaçamento vertical quando quebram linha */
.slm-card .slm-chip, .slm-card .slm-faixa { line-height: 1.9; }