/* ==========================================================================
   CEFASP — Painel V2
   Tipografia: display condensado tecnico (Bahnschrift/DIN) + grotesk de leitura.
   Superficie escura #161b22; paleta de dados validada para CVD e contraste.
   ========================================================================== */

:root {
  --fundo:        #0e1116;
  --superficie:   #161b22;
  --superficie-2: #1b222c;
  --linha:        #242c37;
  --linha-forte:  #313b48;

  --texto:        #e8ecf2;
  --texto-2:      #9aa5b4;
  --texto-3:      #6b7684;

  --acento:       #f2a71b;
  --acento-esc:   #c9860a;
  --serie1:       #3987e5;
  --bom:          #199e70;
  --atencao:      #c98500;
  --grave:        #e66767;

  --raio:   10px;
  --raio-p: 6px;
  --sombra: 0 8px 28px rgba(0,0,0,.42);

  --display: 'Bahnschrift', 'DIN Alternate', 'Oswald', 'Segoe UI Semibold', 'Roboto Condensed', system-ui, sans-serif;
  --corpo:   'Segoe UI', Inter, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --mono:    'Cascadia Mono', 'JetBrains Mono', Consolas, 'SF Mono', monospace;
}

* { box-sizing: border-box; }

/* O atributo [hidden] tem que ganhar de qualquer display do nosso CSS.
   Sem isto, .modal-fundo{display:grid} e .botao{display:inline-flex} deixam
   modal e botoes visiveis mesmo com hidden — foi o bug do modal travado. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: .02em; }
code { font-family: var(--mono); font-size: .92em; color: var(--acento); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* ---------- LOGIN --------------------------------------------------------- */
.tela-login { background:
  radial-gradient(1100px 620px at 12% -10%, rgba(242,167,27,.10), transparent 60%),
  radial-gradient(900px 560px at 92% 108%, rgba(57,135,229,.10), transparent 60%),
  var(--fundo);
}
.login-grade { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 100vh; }
.login-marca { display: flex; flex-direction: column; justify-content: space-between; padding: 8vh 6vw; border-right: 1px solid var(--linha); }
.marca-selo {
  display: inline-block; font-family: var(--display); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--acento); border: 1px solid rgba(242,167,27,.35);
  padding: 5px 12px; border-radius: 999px;
}
.marca-nome {
  font-size: clamp(58px, 9vw, 116px); line-height: .88; letter-spacing: -.02em;
  margin: 22px 0 10px; font-weight: 700;
  background: linear-gradient(180deg, #ffffff 5%, #b9c2cf 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marca-linha { color: var(--texto-2); max-width: 46ch; margin: 0 0 30px; font-size: 15px; }
.marca-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.marca-lista li { position: relative; padding-left: 20px; color: var(--texto-2); }
.marca-lista li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--acento); }
.marca-rodape { color: var(--texto-3); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin: 0; }

.login-caixa { display: grid; place-items: center; padding: 6vh 5vw; }
.login-caixa .cartao { width: min(400px, 100%); }
.cartao-titulo { font-size: 26px; }
.cartao-sub { color: var(--texto-2); margin: 6px 0 22px; font-size: 13px; }
.cartao-nota { color: var(--texto-3); font-size: 12px; margin: 16px 0 0; }

/* ---------- BLOCOS BASE --------------------------------------------------- */
.cartao {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra);
}
.cartao.sem-recheio { padding: 0; overflow: hidden; }
.cartao-h {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-2); margin-bottom: 16px;
}

.campo { display: block; margin-bottom: 16px; }
.campo > span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 7px; }
.entrada, .campo input, .campo select, .campo textarea {
  width: 100%; background: var(--fundo); border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p); padding: 10px 12px; color: var(--texto); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--acento); box-shadow: 0 0 0 3px rgba(242,167,27,.14);
}
.entrada-curta { width: auto; min-width: 170px; }
.entrada-texto { resize: vertical; min-height: 44px; }
select.entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: var(--raio-p); padding: 9px 16px;
  font-weight: 600; cursor: pointer; background: var(--superficie-2); color: var(--texto);
  transition: filter .12s, border-color .12s, background .12s;
}
.botao:hover:not(:disabled) { filter: brightness(1.14); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao-primario { background: var(--acento); color: #1a1206; border-color: var(--acento); }
.botao-fantasma { background: transparent; border-color: var(--linha-forte); color: var(--texto-2); }
.botao-fantasma:hover:not(:disabled) { color: var(--texto); border-color: var(--acento); }
.botao-perigo { background: transparent; border-color: rgba(230,103,103,.5); color: var(--grave); }
.botao-mini { padding: 6px 11px; font-size: 12px; }
.botao-largo { width: 100%; padding: 12px; }

.alerta { border-radius: var(--raio-p); padding: 10px 13px; font-size: 13px; margin-bottom: 14px; }
.alerta-erro { background: rgba(230,103,103,.12); border: 1px solid rgba(230,103,103,.35); color: #ffbcbc; }
.dica { color: var(--texto-2); font-size: 13px; margin: 0; }

/* ---------- ESTRUTURA DO APP ---------------------------------------------- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.lateral {
  background: var(--superficie); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.lateral-topo { padding: 22px 20px 16px; border-bottom: 1px solid var(--linha); }
.logo { font-family: var(--display); font-size: 27px; font-weight: 700; letter-spacing: .05em; }
.logo-sub { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--acento); margin-top: 2px; }

.menu { padding: 14px 12px; display: grid; gap: 2px; flex: 1; align-content: start; }
.menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: var(--raio-p);
  padding: 10px 12px; color: var(--texto-2); cursor: pointer; font-size: 13.5px;
  transition: background .12s, color .12s;
}
.menu-item:hover { background: var(--superficie-2); color: var(--texto); }
.menu-item.ativo { background: var(--superficie-2); color: var(--texto); box-shadow: inset 2px 0 0 var(--acento); }
.menu-ico { color: var(--texto-3); font-size: 13px; }
.menu-item.ativo .menu-ico { color: var(--acento); }
.menu-badge { margin-left: auto; background: var(--acento); color: #1a1206; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }

.lateral-rodape { padding: 14px 12px 18px; border-top: 1px solid var(--linha); display: grid; gap: 6px; }
.usuario-bloco { padding: 4px 6px 10px; }
.usuario-nome { font-weight: 600; font-size: 13.5px; }
.usuario-perfil { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }

.conteudo { display: flex; flex-direction: column; min-width: 0; }
.cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 28px; border-bottom: 1px solid var(--linha); background: rgba(14,17,22,.86);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5;
}
.cabecalho-titulo { font-size: 24px; }
.cabecalho-sub { color: var(--texto-2); font-size: 13px; margin: 3px 0 0; }
.cabecalho-acoes { display: flex; align-items: center; gap: 12px; }
.atualizado { color: var(--texto-3); font-size: 12px; }
.corpo { padding: 24px 28px 40px; }

/* ---------- KPIs ---------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; }
.kpi-rotulo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.kpi-valor { font-family: var(--display); font-size: 34px; line-height: 1.1; margin-top: 6px; letter-spacing: -.01em; }
.kpi-nota { font-size: 12px; color: var(--texto-3); margin-top: 3px; }
.kpi-destaque .kpi-valor { color: var(--acento); }
.kpi-alerta { border-color: rgba(230,103,103,.45); }
.kpi-alerta .kpi-valor { color: var(--grave); }

.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.grid-largo { grid-column: 1 / -1; }
.cartao-grafico { min-height: 210px; }

/* ---------- GRAFICOS ------------------------------------------------------ */
.grafico-vazio { color: var(--texto-3); font-size: 13px; margin: 24px 0; text-align: center; }
.barras { display: grid; gap: 9px; }
.barra-linha { display: grid; grid-template-columns: minmax(96px, 34%) 1fr 42px; align-items: center; gap: 10px; }
.barra-rotulo { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-trilho { height: 10px; background: var(--superficie-2); border-radius: 5px; overflow: hidden; }
.barra-fita { display: block; height: 100%; border-radius: 5px; transition: width .35s ease; }
.barra-valor { font-family: var(--display); font-size: 14px; text-align: right; color: var(--texto); }

.grafico-linha { position: relative; }
.g-svg { width: 100%; height: 190px; display: block; overflow: visible; }
.g-grade { stroke: var(--linha); stroke-width: 1; }
.g-eixo { fill: var(--texto-3); font-size: 10px; font-family: var(--corpo); }
.g-cursor { stroke: var(--linha-forte); stroke-width: 1; stroke-dasharray: 3 3; }
.g-tooltip {
  position: absolute; top: 4px; background: var(--fundo); border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p); padding: 6px 10px; font-size: 12px; pointer-events: none;
  display: grid; gap: 1px; min-width: 108px; box-shadow: var(--sombra);
}
.g-tooltip b { font-size: 11px; color: var(--texto-2); font-weight: 500; }
.g-tooltip span { font-family: var(--display); font-size: 16px; }

/* ---------- TABELAS ------------------------------------------------------- */
.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.barra-filtros .entrada[type="search"] { flex: 1; min-width: 220px; }
.tabela-rolagem { overflow-x: auto; max-height: 68vh; overflow-y: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
  position: sticky; top: 0; background: var(--superficie-2); text-align: left;
  font-family: var(--display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-2); padding: 11px 14px; border-bottom: 1px solid var(--linha); white-space: nowrap; z-index: 1;
}
.tabela td { padding: 10px 14px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:hover { background: rgba(255,255,255,.025); }
.tabela .col-acoes { text-align: right; white-space: nowrap; }
.celula-forte { font-weight: 600; }
.celula-fraca { color: var(--texto-3); font-size: 12px; }
.tabela-perfis td:first-child { font-weight: 600; }

.pilula {
  display: inline-block; font-size: 11px; letter-spacing: .06em; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--texto-2); white-space: nowrap;
}
.pilula-bom { color: #7ce0b8; border-color: rgba(25,158,112,.5); background: rgba(25,158,112,.12); }
.pilula-atencao { color: #ffcf7a; border-color: rgba(201,133,0,.5); background: rgba(201,133,0,.12); }
.pilula-grave { color: #ffb3b3; border-color: rgba(230,103,103,.5); background: rgba(230,103,103,.12); }
.pilula-info { color: #a8cdff; border-color: rgba(57,135,229,.5); background: rgba(57,135,229,.12); }

/* ---------- CONVERSAS ----------------------------------------------------- */
.conversa-layout { display: grid; grid-template-columns: 330px 1fr; gap: 16px; height: calc(100vh - 190px); min-height: 480px; }
.conversa-lista { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); display: flex; flex-direction: column; overflow: hidden; }
.lista-topo { padding: 12px; border-bottom: 1px solid var(--linha); display: grid; gap: 8px; }
.lista-topo .entrada-curta { width: 100%; }
.lista-rolagem { overflow-y: auto; flex: 1; }
.conv-item {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  border-bottom: 1px solid var(--linha); padding: 12px 14px; cursor: pointer; color: inherit;
}
.conv-item:hover { background: var(--superficie-2); }
.conv-item.ativo { background: var(--superficie-2); box-shadow: inset 2px 0 0 var(--acento); }
.conv-item-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conv-item-nome { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item-previa { color: var(--texto-3); font-size: 12px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.conversa-painel { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); display: flex; flex-direction: column; overflow: hidden; }
.vazio { margin: auto; text-align: center; color: var(--texto-3); }
.vazio-ico { font-size: 40px; color: var(--linha-forte); margin-bottom: 8px; }
.conversa-ativa { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.conversa-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.conversa-nome { font-family: var(--display); font-size: 18px; }
.conversa-meta { color: var(--texto-3); font-size: 12px; }
.conversa-controles { display: flex; align-items: center; gap: 8px; }

.conversa-fio { flex: 1; overflow-y: auto; padding: 18px; display: grid; gap: 12px; align-content: start; }
.balao { max-width: 74%; padding: 10px 13px; border-radius: 12px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.balao-aluno { justify-self: start; background: var(--superficie-2); border: 1px solid var(--linha); border-bottom-left-radius: 3px; }
.balao-agente { justify-self: end; background: rgba(57,135,229,.14); border: 1px solid rgba(57,135,229,.35); border-bottom-right-radius: 3px; }
.balao-humano { justify-self: end; background: rgba(242,167,27,.14); border: 1px solid rgba(242,167,27,.38); border-bottom-right-radius: 3px; }
.balao-quem { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 4px; }

.conversa-envio { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--linha); align-items: flex-end; }
.conversa-envio .entrada-texto { flex: 1; }
.aviso-envio { margin: 0; padding: 0 16px 12px; color: var(--texto-3); font-size: 12px; }
.conversa-envio.travado { opacity: .45; pointer-events: none; }

.lista-status { display: grid; gap: 10px; }
.status-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--superficie-2); border-radius: var(--raio-p); }
.status-nome { font-weight: 600; font-size: 13px; }
.status-detalhe { color: var(--texto-3); font-size: 12px; }
.arquitetura { display: grid; gap: 10px; }
.arq-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; padding: 9px 12px; background: var(--superficie-2); border-radius: var(--raio-p); }
.arq-linha span:not(.arq-nota) { color: var(--acento); }
.arq-nota { color: var(--texto-3); font-size: 12px; width: 100%; }

/* ---------- MODAL / AVISOS ------------------------------------------------ */
.modal-fundo { position: fixed; inset: 0; background: rgba(6,8,11,.7); display: grid; place-items: center; padding: 24px; z-index: 50; }
.modal { background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio); width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--sombra); }
.modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--linha); }
.modal-cab h3 { font-size: 18px; }
.modal-fechar { background: transparent; border: 0; color: var(--texto-2); font-size: 26px; line-height: 1; cursor: pointer; }
.modal-corpo { padding: 20px; overflow-y: auto; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--linha); }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.avisos { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 10px; z-index: 60; }
.aviso { background: var(--superficie); border: 1px solid var(--linha-forte); border-left-width: 3px; border-radius: var(--raio-p); padding: 11px 15px; font-size: 13px; box-shadow: var(--sombra); max-width: 380px; animation: entra .18s ease; }
.aviso-ok { border-left-color: var(--bom); }
.aviso-erro { border-left-color: var(--grave); }
.aviso-info { border-left-color: var(--serie1); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.oculto-por-perfil { display: none !important; }

/* ---------- RESPONSIVO ---------------------------------------------------- */
@media (max-width: 1080px) {
  .login-grade { grid-template-columns: 1fr; }
  .login-marca { border-right: 0; border-bottom: 1px solid var(--linha); padding: 6vh 7vw 4vh; }
  .conversa-layout { grid-template-columns: 1fr; height: auto; }
  .conversa-lista { max-height: 320px; }
  .conversa-painel { min-height: 480px; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: column; }
  .menu { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .corpo, .cabecalho { padding-left: 16px; padding-right: 16px; }
  .grade-2 { grid-template-columns: 1fr; }
}

/* ---------- SELETOR DE BASE (produção x sandbox) -------------------------- */
.fonte-seletor { display: flex; align-items: center; gap: 8px; }
.fonte-seletor > span {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3);
}
.fonte-seletor .entrada { padding: 7px 30px 7px 11px; font-size: 12.5px; }

/* Sandbox: faixa diagonal no topo pra ninguém confundir com produção. */
body.modo-teste .cabecalho { border-bottom-color: var(--acento); }
body.modo-teste .cabecalho::after {
  content: 'SANDBOX V2'; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--acento) 0 14px, transparent 14px 28px);
  font-size: 0;
}
body.modo-teste .cabecalho { position: sticky; }
body.modo-teste .logo-sub::after { content: ' · sandbox'; color: var(--texto-3); }
body.modo-teste .fonte-seletor .entrada { border-color: var(--acento); color: var(--acento); }

/* ---------- LOGO NA LATERAL ----------------------------------------------- */
.lateral-topo { display: flex; align-items: center; gap: 11px; }
.marca-emblema { height: 34px; width: auto; border-radius: 4px; flex: none; }

/* ---------- FUNIL (kanban) ------------------------------------------------ */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.coluna {
  flex: 0 0 258px; background: var(--superficie); border: 1px solid var(--linha);
  border-top: 2px solid var(--linha-forte); border-radius: var(--raio);
  display: flex; flex-direction: column; max-height: calc(100vh - 250px);
}
.coluna.c-documentos  { border-top-color: var(--atencao); }
.coluna.c-followup    { border-top-color: var(--acento); }
.coluna.c-humano      { border-top-color: var(--serie1); }
.coluna.c-concluido   { border-top-color: var(--bom); }
.coluna.c-desistiu    { border-top-color: var(--grave); }

.coluna-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 13px; border-bottom: 1px solid var(--linha);
  font-family: var(--display); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-2);
}
.coluna-conta {
  background: var(--superficie-2); border: 1px solid var(--linha-forte); color: var(--texto);
  border-radius: 999px; padding: 1px 8px; font-size: 11px;
}
.coluna-cartoes { padding: 9px; overflow-y: auto; display: grid; gap: 8px; align-content: start; }

.card-lead {
  width: 100%; text-align: left; background: var(--superficie-2);
  border: 1px solid var(--linha); border-left: 3px solid var(--linha-forte);
  border-radius: var(--raio-p); padding: 10px 11px; cursor: pointer; color: inherit;
  transition: border-color .12s, background .12s;
}
.card-lead:hover { border-color: var(--acento); border-left-color: var(--acento); }
.card-lead-nome { font-weight: 600; font-size: 13px; }
.card-lead-tel { font-family: var(--mono); font-size: 11px; color: var(--texto-3); margin-top: 1px; }
.card-lead-marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.pilula-curso { color: #c8dcff; border-color: rgba(57,135,229,.45); background: rgba(57,135,229,.10); }
.pilula-docs-ok { color: #7ce0b8; border-color: rgba(25,158,112,.5); }
.pilula-docs-parcial { color: #ffcf7a; border-color: rgba(201,133,0,.5); }
.pilula-docs-zero { color: var(--texto-3); }

/* ---------- TURMAS -------------------------------------------------------- */
.cursos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 11px; margin-bottom: 18px; }
.curso-card {
  text-align: left; background: var(--superficie); border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte); border-radius: var(--raio);
  padding: 13px 14px; cursor: pointer; color: inherit; transition: border-color .12s, background .12s;
}
.curso-card:hover { border-color: var(--acento); }
.curso-card.sel { border-color: var(--acento); border-left-color: var(--acento); background: var(--superficie-2); }
.curso-nome { font-family: var(--display); font-size: 14px; font-weight: 600; line-height: 1.2; }
.curso-codigo { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin-top: 3px; }
.curso-numeros { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 11px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.n-ok { color: var(--bom); } .n-pend { color: var(--atencao); } .n-mut { color: var(--texto-3); }

.turma-detalhe { border-top: 2px solid var(--acento); }
.turma-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.turma-cab h3 { font-size: 18px; }
.turma-cab .resumo { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }

.agenda-faixa { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; border-bottom: 1px solid var(--linha); margin-bottom: 14px; align-items: flex-end; }
.agenda-mes { flex: none; }
.agenda-mes-nome { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--acento); margin-bottom: 7px; text-align: center; }
.agenda-dias { display: flex; gap: 6px; }
.agenda-dia {
  background: var(--superficie-2); border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  padding: 7px 11px; cursor: pointer; color: inherit; text-align: center; min-width: 50px;
}
.agenda-dia:hover { border-color: var(--acento); }
.agenda-dia.sel { background: var(--acento); color: #1a1206; border-color: var(--acento); }
.agenda-dia .sem { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.agenda-dia.sel .sem { color: #1a1206; }
.agenda-dia .num { font-family: var(--display); font-size: 17px; font-weight: 700; line-height: 1.1; }
.agenda-todas {
  background: var(--superficie-2); border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  padding: 8px 13px; cursor: pointer; color: var(--texto-2); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; align-self: flex-end;
}
.agenda-todas.sel { border-color: var(--acento); color: var(--acento); }

.secao-titulo {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--acento);
  border-bottom: 1px solid var(--linha); padding-bottom: 6px; margin: 4px 0 12px;
}