/* ============================================================
   Cérebro BNI · BKF Glass Design System
   Paleta: Dark Red Crimson (acento vermelho BNI #c8102e)
   Type scale: Perfect Fourth (1.333) fluida, tokens --fs-*
   ============================================================ */

:root {
  /* Type scale Perfect Fourth (1.333) fluida — 320px → 1440px */
  --fs-xs:      clamp(11.5px, 0.7rem  + 0.05vw, 12.5px);
  --fs-sm:      clamp(13px,   0.8rem  + 0.05vw, 14px);
  --fs-base:    clamp(15px,   0.92rem + 0.1vw,  16.5px);
  --fs-lead:    clamp(17px,   1.04rem + 0.15vw, 19px);
  --fs-h3:      clamp(19px,   1.13rem + 0.4vw,  23px);
  --fs-h2:      clamp(28px,   1.55rem + 1.0vw,  42px);
  --fs-h1:      clamp(26px,   1.6rem  + 0.9vw,  38px);
  --lh-h1: 1.06; --lh-h3: 1.22; --lh-body: 1.55;

  /* Espaço (escala 4px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Cor */
  --bg: #0c1015;
  --bg-2: #131920;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.07);
  --borda: rgba(255, 255, 255, 0.08);
  --borda-2: rgba(255, 255, 255, 0.14);
  --texto: #e9ecef;
  --texto-2: #98a2ad;
  --texto-3: #7e8a96; /* contraste 4.5:1+ pra labels e placeholders */
  --acento: #c8102e;
  --acento-claro: #ff5a6e;
  --acento-suave: rgba(200, 16, 46, 0.12);
  --ok: #3fb27f;
  --ok-suave: rgba(63, 178, 127, 0.12);
  --alerta: #d9a13b;
  --alerta-suave: rgba(217, 161, 59, 0.12);
  --info: #5b9dd9;
  --info-suave: rgba(91, 157, 217, 0.12);
  --roxo: #9b7ede;
  --roxo-suave: rgba(155, 126, 222, 0.12);

  --raio: 14px;
  --raio-sm: 9px;
  --fonte-titulo: "Fraunces", Georgia, serif;
  --fonte-corpo: "Inter", -apple-system, sans-serif;
  --transicao: 160ms ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background:
    radial-gradient(1100px 520px at 85% -12%, rgba(200, 16, 46, 0.07) 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(91, 157, 217, 0.05) 0%, transparent 55%),
    var(--bg);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1 { font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-family: var(--fonte-corpo); font-weight: 600; font-size: var(--fs-lead); letter-spacing: -0.01em; color: var(--texto); }

/* Ritmo vertical: título nunca cola no bloco seguinte */
.conteudo h1 { margin-bottom: var(--sp-5); }
.conteudo h1 + .pagina-sub { margin-top: calc(var(--sp-4) * -1); margin-bottom: var(--sp-5); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
a { color: var(--texto); text-underline-offset: 3px; }
a:hover { color: #fff; }

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

/* ---------- Sidebar flutuante · Liquid Glass ---------- */
body.logado { padding-left: 280px; }

.sidebar {
  position: fixed; top: 16px; left: 16px; bottom: 16px; width: 240px;
  display: flex; flex-direction: column;
  padding: var(--sp-5) var(--sp-3) var(--sp-4);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035) 40%, rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(26px) saturate(1.7);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  z-index: 80;
  overflow-y: auto; scrollbar-width: none;
  transition: transform 460ms cubic-bezier(0.32, 0.72, 0.28, 1), opacity 300ms ease;
}
.sidebar::-webkit-scrollbar { display: none; }

@starting-style {
  .sidebar { opacity: 0; transform: translateX(-10px); }
}

.sb-marca {
  display: block; text-decoration: none;
  padding: 0 var(--sp-3); margin-bottom: var(--sp-5);
}
.sb-marca-nome {
  display: block;
  font-family: "Archivo Black", "Inter", sans-serif;
  font-size: var(--fs-h3); line-height: 1.1;
  letter-spacing: -0.01em; color: #fff; text-transform: uppercase;
}
.sb-marca-nome strong { color: var(--acento-claro); font-weight: 400; }
.sb-slogan {
  display: block; margin-top: 4px;
  color: var(--texto-3); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
}

.sb-filtro { padding: 0 var(--sp-1); margin-bottom: var(--sp-4); }
.sb-filtro select {
  font-size: var(--fs-xs); padding: 8px 30px 8px 12px;
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14); border-radius: 12px;
}

.sb-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sb-nav a {
  position: relative; display: flex; align-items: center; gap: 11px;
  color: var(--texto-2); text-decoration: none; overflow: hidden;
  font-size: var(--fs-sm); font-weight: 500;
  padding: 10px 12px; border-radius: 13px;
  transition: color var(--transicao), background var(--transicao), transform var(--transicao);
}
.sb-nav a svg { width: 17px; height: 17px; flex: none; opacity: 0.85; }
/* Luz líquida que segue o cursor */
.sb-nav a::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.09), transparent 65%);
  opacity: 0; transition: opacity 220ms ease;
}
.sb-nav a:hover { color: var(--texto); background: rgba(255, 255, 255, 0.055); }
.sb-nav a:hover::before { opacity: 1; }
.sb-nav a:active { transform: scale(0.98); }
.sb-nav a.ativo {
  color: #fff;
  background: linear-gradient(180deg, rgba(200, 16, 46, 0.22), rgba(200, 16, 46, 0.13));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.sb-nav a.ativo svg { opacity: 1; color: var(--acento-claro); }

.sb-rotulo {
  color: var(--texto-3); font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 0 var(--sp-3); margin: var(--sp-5) 0 var(--sp-2);
}

.sb-rodape {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-1) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.sb-quem { padding: 0 var(--sp-2); margin-bottom: var(--sp-2); }
.sb-quem-nome { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-quem-un { color: var(--texto-3); font-size: var(--fs-xs); }
.sb-acoes { display: flex; gap: 2px; }
.sb-acoes a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--texto-2); text-decoration: none; font-size: var(--fs-xs); font-weight: 500;
  padding: 8px 10px; border-radius: 11px;
  transition: color var(--transicao), background var(--transicao);
}
.sb-acoes a svg { width: 14px; height: 14px; }
.sb-acoes a:hover { color: var(--texto); background: rgba(255, 255, 255, 0.055); }
.sb-acoes .sb-sair:hover { color: var(--acento-claro); }

/* Toggle e scrim (mobile) */
.sb-toggle {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 90;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(19, 25, 32, 0.7); color: var(--texto);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.sb-toggle svg { width: 19px; height: 19px; }
.sb-scrim {
  display: none; position: fixed; inset: 0; z-index: 70;
  background: rgba(5, 8, 12, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 300ms ease; pointer-events: none;
}

/* ---------- Conteúdo ---------- */
.conteudo { max-width: 1120px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }
.conteudo--larga { max-width: 1600px; }
.conteudo-solo { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: var(--sp-5); }

.pagina-cab { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.pagina-cab h1 { margin: 0; }
.pagina-sub { color: var(--texto-2); font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* ---------- Cards ---------- */
.card {
  background: var(--glass);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-5) var(--sp-5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.card + .card { margin-top: var(--sp-4); }
.card h2 { margin: var(--sp-5) 0 var(--sp-3); }
.card > h2:first-child { margin-top: 0; margin-bottom: var(--sp-4); }

/* Título de módulo: traço BNI + degrau acima na escala */
.card > h2:first-child, .kb-cab-titulo {
  display: flex; align-items: center; gap: 11px;
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  letter-spacing: -0.015em; color: #fff;
}
.card > h2:first-child::before {
  content: ""; flex: none; width: 4px; height: 1.05em; border-radius: 99px;
  background: linear-gradient(180deg, var(--acento-claro), var(--acento));
  box-shadow: 0 0 14px rgba(200, 16, 46, 0.55);
}
.card > h2:first-child .sufixo { font-size: var(--fs-xs); margin-left: 2px; padding-top: 3px; }
.card-login { width: min(400px, 92vw); padding: var(--sp-6); }
.card-login h1 { margin-bottom: var(--sp-2); }

.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.stat {
  background: var(--glass); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: var(--sp-4) var(--sp-4);
}
/* Números são dado, não editorial: Inter tabular, não serif */
.stat .num { font-size: var(--fs-h2); font-family: var(--fonte-corpo); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .rot { color: var(--texto-2); font-size: var(--fs-xs); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Formulários ---------- */
label { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--texto-2); margin: var(--sp-4) 0 var(--sp-1); text-transform: uppercase; letter-spacing: 0.05em; }
input, select, textarea {
  width: 100%; padding: 10px 13px;
  background: var(--bg-2); color: var(--texto);
  border: 1px solid var(--borda-2); border-radius: var(--raio-sm);
  font: inherit; font-size: var(--fs-base);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a2ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: var(--sp-5); }
.form-linha { display: flex; gap: var(--sp-4); align-items: end; flex-wrap: wrap; }
.form-linha > * { margin-top: 0; }
.form-linha label { margin-top: 0; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: var(--sp-5); padding: 10px 22px;
  background: var(--acento); color: #fff;
  border: 1px solid transparent; border-radius: var(--raio-sm);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: filter var(--transicao), transform var(--transicao);
}
.btn:hover { filter: brightness(1.12); color: #fff; }
.btn:active { transform: scale(0.97); }
.btn-suave { background: var(--glass-2); border-color: var(--borda-2); color: var(--texto); }
.btn-suave:hover { filter: none; background: rgba(255, 255, 255, 0.11); }
.btn-mini { margin-top: 0; padding: 7px 13px; font-size: var(--fs-xs); min-height: 32px; }

/* ---------- Tabelas ---------- */
.card:has(> table) { overflow-x: auto; }
.tabela-wrap { overflow-x: auto; margin: 0 calc(var(--sp-5) * -1); padding: 0 var(--sp-5); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--borda); font-size: var(--fs-sm); vertical-align: middle; font-variant-numeric: tabular-nums; }
th { color: var(--texto-3); font-weight: 500; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0; }
tr:last-child td { border-bottom: 0; }
tbody tr, tr:has(td) { transition: background var(--transicao); }
tr:hover td { background: rgba(255, 255, 255, 0.02); }
td a { font-weight: 500; text-decoration: none; }
td a:hover { color: var(--acento-claro); }

/* ---------- Agenda: colunas travadas, nota é a única elástica ---------- */
.tab-agenda { table-layout: fixed; min-width: 760px; }
.tab-agenda .c-prazo { width: 100px; }
.tab-agenda .c-lead { width: 200px; }
.tab-agenda .c-unidade { width: 160px; }
.tab-agenda .c-resp { width: 130px; }
.tab-agenda .c-acao { width: 104px; }
.tab-agenda td { vertical-align: top; padding-top: var(--sp-3); }
.nowrap { white-space: nowrap; }
.corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-nome { font-weight: 500; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-nota { color: var(--texto-2); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 99px;
  font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
  border: 1px solid var(--borda-2); color: var(--texto-2); background: var(--glass);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.badge-ok       { color: var(--ok); border-color: rgba(63,178,127,.35); background: var(--ok-suave); }
.badge-acento   { color: var(--acento-claro); border-color: rgba(200,16,46,.4); background: var(--acento-suave); }
.est-convidado  { color: var(--texto-2); }
.est-confirmou  { color: var(--info); border-color: rgba(91,157,217,.35); background: var(--info-suave); }
.est-visitou    { color: var(--alerta); border-color: rgba(217,161,59,.35); background: var(--alerta-suave); }
.est-aplicou    { color: var(--roxo); border-color: rgba(155,126,222,.35); background: var(--roxo-suave); }
.est-aprovado   { color: #e8746a; border-color: rgba(232,116,106,.4); background: rgba(232,116,106,.12); }
.est-contrato   { color: var(--info); border-color: rgba(91,157,217,.35); background: var(--info-suave); }
.est-membro     { color: var(--ok); border-color: rgba(63,178,127,.35); background: var(--ok-suave); }
.est-nao_fit    { color: var(--acento-claro); border-color: rgba(200,16,46,.4); background: var(--acento-suave); }

/* ---------- Painel: barras de canal ---------- */
.grid-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.grid-2col .card + .card { margin-top: 0; }
.sufixo { color: var(--texto-3); font-size: var(--fs-xs); font-weight: 400; margin-left: 6px; }
.texto-suave { color: var(--texto-2); font-size: var(--fs-sm); }
.barra-linha { display: grid; grid-template-columns: minmax(150px, max-content) 1fr 80px; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.barra-rotulo { white-space: nowrap; }
.barra-trilho { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.barra-fill { height: 100%; border-radius: 99px; background: var(--texto-3); transition: width 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.org-fill-indicacao { background: var(--ok); }
.org-fill-membro    { background: var(--roxo); }
.org-fill-anuncio   { background: var(--acento-claro); }
.org-fill-google    { background: var(--info); }
.org-fill-evento    { background: var(--alerta); }
.org-fill-manual, .org-fill-outro { background: var(--texto-3); }
.barra-num { text-align: right; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-num span { color: var(--texto-3); font-weight: 400; font-size: var(--fs-xs); }
.radar-links { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.radar-link { display: flex; flex-direction: column; gap: 3px; }
.radar-link > span { color: var(--texto-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.radar-link code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-xs);
  background: var(--bg-2); border: 1px solid var(--borda-2); border-radius: 8px;
  padding: 7px 10px; cursor: copy; word-break: break-all;
  transition: border-color var(--transicao), color var(--transicao);
}
.radar-link code:hover { border-color: var(--texto-3); }

/* ---------- Origem do lead ---------- */
.org-indicacao { color: var(--ok); border-color: rgba(63,178,127,.35); background: var(--ok-suave); }
.org-membro    { color: var(--roxo); border-color: rgba(155,126,222,.35); background: var(--roxo-suave); }
.org-anuncio   { color: var(--acento-claro); border-color: rgba(200,16,46,.4); background: var(--acento-suave); }
.org-google    { color: var(--info); border-color: rgba(91,157,217,.35); background: var(--info-suave); }
.org-evento    { color: var(--alerta); border-color: rgba(217,161,59,.35); background: var(--alerta-suave); }
.org-manual, .org-outro { color: var(--texto-2); }

/* ---------- Status de patrocinado ---------- */
.pat-solicitado     { color: var(--info); border-color: rgba(91,157,217,.35); background: var(--info-suave); }
.pat-ajustar        { color: var(--alerta); border-color: rgba(217,161,59,.35); background: var(--alerta-suave); }
.pat-aprovado       { color: var(--ok); border-color: rgba(63,178,127,.35); background: var(--ok-suave); }
.pat-boleto_enviado { color: var(--alerta); border-color: rgba(217,161,59,.35); background: var(--alerta-suave); }
.pat-pago           { color: var(--ok); border-color: rgba(63,178,127,.35); background: var(--ok-suave); }
.pat-veiculando     { color: var(--roxo); border-color: rgba(155,126,222,.35); background: var(--roxo-suave); }
.pat-encerrado      { color: var(--texto-2); }
.pat-recusado       { color: var(--acento-claro); border-color: rgba(200,16,46,.4); background: var(--acento-suave); }

/* ---------- Kanban ---------- */
/* Board em grade fluida: as 6 colunas dividem a largura da página larga.
   Só rola horizontal quando realmente não cabe (tela estreita). */
.kanban {
  display: grid;
  grid-template-columns: repeat(8, minmax(172px, 1fr));
  gap: var(--sp-2);
  overflow-x: auto; padding-bottom: var(--sp-3);
  align-items: start;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.05);
}
.kanban::-webkit-scrollbar { height: 9px; }
.kanban::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 99px; }
.kanban::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 99px; }
.kanban::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.36); }
.kb-col {
  background: var(--glass); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: var(--sp-2);
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 240px);
  min-width: 0;
  transition: border-color var(--transicao), background var(--transicao);
}
.kb-col.kb-alvo { border-color: var(--acento); background: var(--acento-suave); }
.kb-cab { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-1) var(--sp-1) var(--sp-3); }
.kb-qtd { color: var(--texto-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.kb-corpo {
  display: flex; flex-direction: column; gap: var(--sp-2); min-height: 60px;
  overflow-y: auto; flex: 1; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.kb-corpo::-webkit-scrollbar { width: 6px; }
.kb-corpo::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 99px; }
.kb-card {
  background: var(--bg-2); border: 1px solid var(--borda-2);
  border-radius: var(--raio-sm); padding: var(--sp-3);
  cursor: grab;
  transition: border-color var(--transicao), transform var(--transicao);
}
.kb-card:hover { border-color: var(--texto-3); }
.kb-card.kb-arrastando { opacity: 0.45; transform: scale(0.97); cursor: grabbing; }
.kb-nome { display: block; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; margin-bottom: 2px; }
.kb-nome:hover { color: var(--acento-claro); }
.kb-meta { color: var(--texto-2); font-size: var(--fs-xs); margin-bottom: var(--sp-2); }
.kb-rodape { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.kb-unidade { color: var(--texto-3); font-size: var(--fs-xs); }

/* ---------- Flash ---------- */
.flash { padding: var(--sp-3) var(--sp-4); border-radius: var(--raio-sm); margin-bottom: var(--sp-5); font-size: var(--fs-sm); border: 1px solid; }
.flash-ok    { background: var(--ok-suave); border-color: rgba(63, 178, 127, 0.35); }
.flash-erro  { background: var(--acento-suave); border-color: rgba(200, 16, 46, 0.4); }
.flash-aviso { background: var(--alerta-suave); border-color: rgba(217, 161, 59, 0.35); }

/* ---------- Estados vazios ---------- */
.vazio { text-align: center; color: var(--texto-2); padding: var(--sp-7) var(--sp-4); }
.vazio h2 { color: var(--texto); margin-bottom: var(--sp-2); }
.vazio .btn { margin-top: var(--sp-4); }

/* ---------- Timeline ---------- */
.tl { list-style: none; }
.tl li { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--borda); font-size: var(--fs-sm); }
.tl li:last-child { border-bottom: 0; }
.tl time { color: var(--texto-3); font-size: var(--fs-xs); white-space: nowrap; padding-top: 2px; min-width: 108px; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  body.logado { padding-left: 0; }
  .sb-toggle { display: flex; }

  /* Menu vira cartão central (modal Liquid Glass) com pop suave */
  .sidebar {
    top: 50%; left: 50%; bottom: auto;
    width: min(340px, 90vw); max-height: 82dvh;
    border-radius: 30px;
    transform: translate(-50%, -47%) scale(0.92);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition:
      transform 420ms cubic-bezier(0.34, 1.25, 0.4, 1),
      opacity 240ms ease,
      visibility 0s linear 420ms;
  }
  body.menu-aberto .sidebar {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; visibility: visible; pointer-events: auto;
    transition:
      transform 420ms cubic-bezier(0.34, 1.25, 0.4, 1),
      opacity 240ms ease,
      visibility 0s;
  }

  .sb-scrim { display: block; }
  body.menu-aberto .sb-scrim { opacity: 1; pointer-events: auto; }

  .conteudo { padding: calc(44px + var(--sp-6)) var(--sp-4) var(--sp-7); }
  .card { padding: var(--sp-4); }
  .tabela-wrap { margin: 0 calc(var(--sp-4) * -1); padding: 0 var(--sp-4); }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sidebar, body.menu-aberto .sidebar { transition: opacity 150ms ease, visibility 0s; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}