@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap');

/* ============================================================
   Compliance Watch V2 — Estilos globais
   Dark theme, tons de azul/ciano
   ============================================================ */

:root {
  --bg-base:       #0d1117;
  --bg-card:       #161b22;
  --bg-nav:        #0d1117;
  --border:        #30363d;

  --text-primary:  #e6edf3;
  --text-secondary:#8b949e;
  --text-muted:    #6e7681;

  --accent-cyan:   #58a6ff;
  --accent-blue:   #1f6feb;

  --critico:       #f85149;
  --alto:          #f0883e;
  --medio:         #d29922;
  --baixo:         #3fb950;

  --critico-bg:    rgba(248, 81, 73,  0.12);
  --alto-bg:       rgba(240, 136, 62, 0.12);
  --medio-bg:      rgba(210, 153, 34, 0.12);
  --baixo-bg:      rgba(63, 185, 80,  0.12);

  --radius:        10px;
  --radius-sm:     6px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
}

a { color: var(--accent-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  font-size: 12px;
}

/* ── Sidebar ── */
.navbar {
  background: var(--bg-nav);
  border-right: 1px solid rgba(88, 166, 255, 0.18);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  z-index: 100;
}

.navbar-brand {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-cyan);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(88, 166, 255, 0.12);
  flex-shrink: 0;
}

.navbar-brand-logo {
  height: 26px;
  width: auto;
  display: block;
}

.navbar-links {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 0;
  gap: 2px;
}

.nav-link {
  color: var(--text-secondary);
  padding: 8px 12px;
  margin: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); text-decoration: none; }
.nav-link.active { color: var(--accent-cyan); background: rgba(88, 166, 255, 0.12); }
.nav-link-logout { color: var(--text-muted); }
.nav-link-logout:hover { color: var(--critico); background: rgba(248, 81, 73, 0.08); }

/* ── Nav Dropdown (accordion na sidebar) ── */
.nav-dropdown {
  display: flex;
  flex-direction: column;
}

.nav-dropdown-trigger {
  cursor: pointer;
  user-select: none;
}

.nav-dropdown-arrow {
  font-size: 10px;
  opacity: 0.55;
  transition: transform 0.2s;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-dropdown:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown.active .nav-dropdown-trigger {
  color: var(--accent-cyan);
}

.nav-dropdown-menu {
  position: static;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-width: unset;
  max-height: 0;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  transform: none;
  transition: max-height 0.2s ease;
  z-index: auto;
}

.nav-dropdown:hover .nav-dropdown-menu {
  max-height: 200px;
  padding: 2px 0 4px;
  pointer-events: auto;
  transform: none;
  transition: max-height 0.2s ease;
}

.nav-dropdown-item {
  display: block;
  color: var(--text-secondary);
  padding: 6px 12px 6px 38px;
  margin: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.nav-dropdown-item:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.nav-dropdown-item.active {
  color: var(--accent-cyan);
  background: rgba(88, 166, 255, 0.10);
}

/* ── Nav icons e separador ── */
.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.15s;
}
.nav-link:hover .nav-icon,
.nav-link.active .nav-icon { opacity: 1; }
.nav-dropdown.active .nav-dropdown-trigger .nav-icon { opacity: 1; }

.nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: auto 12px 4px;
}

/* ── Em breve ── */
.em-breve-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  gap: 20px;
}

.em-breve-icon {
  color: var(--accent-cyan);
  opacity: 0.45;
  margin-bottom: 8px;
}

.em-breve-titulo {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.em-breve-descricao {
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 480px;
  line-height: 1.7;
}

.em-breve-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(88, 166, 255, 0.08);
  border: 1px solid rgba(88, 166, 255, 0.25);
  border-radius: 20px;
  color: var(--accent-cyan);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  padding: 5px 14px;
  margin-top: 4px;
}

.em-breve-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  animation: em-breve-pulse 2s ease-in-out infinite;
}

@keyframes em-breve-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Layout principal ── */
.content-area {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
}

.main-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* ── Cabeçalho de página ── */
.page-header { margin-bottom: 28px; }
.page-header h1 { font-size: 24px; font-weight: 600; }
.page-subtitle { color: var(--text-secondary); margin-top: 4px; }

/* ── Card genérico ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.card h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.card p { color: var(--text-secondary); margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }

/* ── Início ── */
.boas-vindas {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px 72px;
}

/* Texto decorativo de fundo (cobre a viewport inteira) */
.bv-decor {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  opacity: 0.03;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.bv-decor span {
  display: block;
  font-size: 58px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  white-space: nowrap;
  line-height: 1.3;
  text-transform: uppercase;
  flex-shrink: 0;
}

.bv-decor span:nth-child(even) { transform: translateX(-10%); }

/* Wrapper do conteúdo (acima do decor) */
.bv-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  width: 100%;
}

.boas-vindas-saudacao {
  color: var(--text-secondary);
  font-size: 15px;
}

.boas-vindas-logo {
  height: 200px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 32px rgba(88, 166, 255, 0.22));
}

.boas-vindas-frase {
  font-family: 'Playfair Display', Georgia, serif;
  color: #f0f6fc;
  font-size: 20px;
  line-height: 1.9;
  letter-spacing: 0.025em;
  max-width: 540px;
}

.boas-vindas-atualizacao {
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.boas-vindas-atualizacao::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--baixo);
  flex-shrink: 0;
}

.boas-vindas-citacao {
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  max-width: 460px;
  text-align: center;
}

/* ── Monitoramento — abas ── */
.monitor-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  gap: 0;
}

.monitor-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: -1px;
  padding: 8px 20px;
  transition: color 0.15s, border-color 0.15s;
  user-select: none;
}
.monitor-tab:hover { color: var(--text-primary); }
.monitor-tab--active {
  border-bottom-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* ── Monitoramento — cards de resumo ── */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.summary-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  text-align: center;
  user-select: none;
}
.summary-card-count { font-size: 28px; font-weight: 700; transition: none; }
.summary-card-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }

.summary-card--critico { background: var(--critico-bg); border-color: var(--critico); }
.summary-card--critico .summary-card-count { color: var(--critico); }
.summary-card--alto    { background: var(--alto-bg);    border-color: var(--alto); }
.summary-card--alto    .summary-card-count { color: var(--alto); }
.summary-card--medio   { background: var(--medio-bg);   border-color: var(--medio); }
.summary-card--medio   .summary-card-count { color: var(--medio); }
.summary-card--baixo   { background: var(--baixo-bg);   border-color: var(--baixo); }
.summary-card--baixo   .summary-card-count { color: var(--baixo); }

/* ── Lista de colaboradores ── */
.colaboradores-list { display: flex; flex-direction: column; gap: 6px; }
.empty-state { color: var(--text-muted); font-style: italic; }

.colaborador-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 12px 16px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.colaborador-item:hover { background: rgba(255,255,255,0.03); text-decoration: none; }

.colaborador-item--critico { border-left-color: var(--critico); }
.colaborador-item--alto    { border-left-color: var(--alto); }
.colaborador-item--medio   { border-left-color: var(--medio); }
.colaborador-item--baixo   { border-left-color: var(--baixo); }

.colaborador-nome {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colaborador-desvio-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.desvio-pct {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
}
.desvio-pct--critico { color: var(--critico); }
.desvio-pct--alto    { color: var(--alto); }
.desvio-pct--medio   { color: var(--medio); }
.desvio-pct--baixo   { color: var(--baixo); }

.desvio-tipo {
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  white-space: nowrap;
}
.desvio-tipo--ponto_maior  { background: var(--critico-bg); border-color: var(--critico); color: var(--critico); }
.desvio-tipo--maquina_maior { background: var(--medio-bg);  border-color: var(--medio);   color: var(--medio); }

.colaborador-arrow { color: var(--text-muted); font-size: 18px; margin-left: 4px; flex-shrink: 0; }

/* ── Detalhe — comparação ── */
.back-link { color: var(--text-secondary); font-size: 13px; display: inline-block; margin-bottom: 8px; }
.back-link:hover { color: var(--text-primary); }

.resumo-card { border-left-width: 3px; }
.resumo-card--critico { border-left-color: var(--critico); }
.resumo-card--alto    { border-left-color: var(--alto); }
.resumo-card--medio   { border-left-color: var(--medio); }
.resumo-card--baixo   { border-left-color: var(--baixo); }
.resumo-card .resumo-texto { font-size: 15px; line-height: 1.8; color: var(--text-secondary); }
.resumo-pct--critico { color: var(--critico); }
.resumo-pct--alto    { color: var(--alto); }
.resumo-pct--medio   { color: var(--medio); }
.resumo-pct--baixo   { color: var(--baixo); }

.comparacao-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.comparacao-card { text-align: center; }
.comparacao-card--alerta { border-color: var(--alto); }
.comparacao-titulo { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.comparacao-sistema { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 16px; }
.comparacao-valor { font-size: 40px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-bottom: 0; }
.comparacao-unidade { font-size: 20px; font-weight: 400; color: var(--text-secondary); }
.comparacao-dias { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

.desvio-card { margin-bottom: 16px; }
.desvio-resumo {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.desvio-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 24px 4px 0;
  min-width: 120px;
}
.desvio-item + .desvio-item {
  padding-left: 24px;
  border-left: 1px solid var(--border);
}
.desvio-item-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.desvio-item-valor { font-size: 20px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.desvio-item-valor--critico { color: var(--critico); }
.desvio-item-valor--alto    { color: var(--alto); }
.desvio-item-valor--medio   { color: var(--medio); }
.desvio-item-valor--baixo   { color: var(--baixo); }

/* ── Status badges (monitoramento + detalhe) ── */
.status-badge {
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  white-space: nowrap;
  vertical-align: middle;
}
.status-badge--em_tratativa { background: var(--medio-bg);  border-color: var(--medio); color: var(--medio); }
.status-badge--concluida    { background: var(--baixo-bg);  border-color: var(--baixo); color: var(--baixo); }

/* ── Status do Caso ── */
.status-caso-titulo { margin-bottom: 14px; }

.status-caso-corpo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.status-indicador {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius);
  border: 1px solid;
}
.status-indicador--em_tratativa { background: var(--medio-bg);  border-color: var(--medio);  color: var(--medio); }
.status-indicador--concluida    { background: var(--baixo-bg);  border-color: var(--baixo);  color: var(--baixo); }
.status-indicador--none         { background: transparent;       border-color: var(--border); color: var(--text-muted); font-weight: 400; }

.status-caso-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Discussão / Comentários ── */
.discussao-titulo { margin-bottom: 16px; }

.observacao-erro {
  color: var(--critico);
  font-size: 12px;
  display: none;
}
.observacao-form { display: flex; flex-direction: column; gap: 10px; }
.observacao-textarea {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}
.observacao-textarea:focus { border-color: var(--accent-cyan); outline: none; }
.observacao-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.comentarios-lista {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.comentario-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.comentario-item:last-child { border-bottom: none; }

.comentario-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  user-select: none;
}

.comentario-corpo { flex: 1; min-width: 0; }

.comentario-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.comentario-usuario {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.comentario-data {
  font-size: 11px;
  color: var(--text-muted);
}

.comentario-texto {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.comentarios-vazio {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}

/* ── Como funciona ── */
.info-list { color: var(--text-secondary); padding-left: 20px; margin: 8px 0; }
.info-list li { margin-bottom: 6px; }

.niveis-list { display: flex; flex-direction: column; gap: 10px; }
.nivel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.nivel-item--critico { background: var(--critico-bg); border-color: var(--critico); }
.nivel-item--alto    { background: var(--alto-bg);    border-color: var(--alto); }
.nivel-item--medio   { background: var(--medio-bg);   border-color: var(--medio); }
.nivel-item--baixo   { background: var(--baixo-bg);   border-color: var(--baixo); }

.nivel-badge {
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  min-width: 64px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.nivel-badge--critico { background: var(--critico); color: #fff; }
.nivel-badge--alto    { background: var(--alto);    color: #fff; }
.nivel-badge--medio   { background: var(--medio);   color: #000; }
.nivel-badge--baixo   { background: var(--baixo);   color: #000; }

/* ── Botões ── */
.btn {
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.85; }
.btn-primary      { background: var(--accent-blue); color: #fff; }
.btn-danger       { background: transparent; border: 1px solid var(--critico); color: var(--critico); }
.btn-full         { width: 100%; }
.btn-em-tratativa { background: transparent; border: 1px solid var(--medio); color: var(--medio); }
.btn-concluida    { background: transparent; border: 1px solid var(--baixo);  color: var(--baixo); }

/* ── Flash messages ── */
.flash-messages { margin-bottom: 20px; }
.flash {
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
}
/* categoria padrão e erro */
.flash--message,
.flash--erro {
  background: var(--critico-bg);
  border: 1px solid var(--critico);
  color: var(--critico);
}
/* sucesso */
.flash--sucesso {
  background: var(--baixo-bg);
  border: 1px solid var(--baixo);
  color: var(--baixo);
}

/* ── Login ── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0%, rgba(31, 111, 235, 0.14) 0%, transparent 65%), var(--bg-base);
}

.login-container { width: 100%; max-width: 400px; padding: 24px; }

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 44px 40px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(88, 166, 255, 0.07);
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.login-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.login-subtitle {
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 28px;
  font-size: 13px;
}

.login-form { display: flex; flex-direction: column; gap: 18px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }

.form-group input {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  width: 100%;
}
.form-group input:focus { border-color: var(--accent-cyan); outline: none; }

/* Input com ícone (login) */
.input-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon {
  position: absolute;
  left: 11px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.input-with-icon { padding-left: 36px !important; }

/* Botão de login refinado */
.btn-login {
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #1f6feb 0%, #2d8cf0 100%);
  letter-spacing: 0.3px;
  margin-top: 4px;
  box-shadow: 0 2px 12px rgba(31, 111, 235, 0.4);
  transition: opacity 0.15s, box-shadow 0.15s;
}
.btn-login:hover {
  opacity: 1;
  box-shadow: 0 4px 20px rgba(31, 111, 235, 0.55);
  filter: brightness(1.08);
}

/* ── Gerar Consulta ── */
.alert {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.alert-erro {
  background: var(--critico-bg);
  border: 1px solid var(--critico);
  color: var(--critico);
}
.alert-hint { color: var(--text-secondary); font-size: 13px; margin-top: 6px; margin-bottom: 0; }

.consulta-meta {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 24px;
  flex-wrap: wrap;
}
.consulta-meta-item { display: flex; flex-direction: column; gap: 2px; padding: 4px 20px 4px 0; }
.consulta-meta-item:first-child { padding-left: 0; }
.consulta-meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.consulta-meta-value { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.consulta-meta-sep {
  width: 1px;
  height: 32px;
  background: var(--border);
  margin: 0 20px 0 0;
  flex-shrink: 0;
}

.sql-card { padding: 0; overflow: hidden; }

.sql-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.sql-card-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

.btn-copy {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  transition: border-color 0.15s, color 0.15s;
}
.btn-copy:hover { border-color: var(--accent-cyan); color: var(--text-primary); }
.btn-copy.copied { border-color: var(--baixo); color: var(--baixo); }

.sql-block {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: "Cascadia Code", "Fira Code", "Consolas", "Menlo", monospace;
  font-size: 12.5px;
  line-height: 1.65;
  margin: 0;
  overflow-x: auto;
  padding: 20px 24px;
  white-space: pre;
}

.usuarios-card h2 { margin-bottom: 14px; }
.usuarios-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.usuario-tag {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
  font-size: 12px;
  padding: 3px 10px;
}

/* ── Gerenciar Usuários ── */
.mgmt-lista { display: flex; flex-direction: column; }

.mgmt-usuario-row {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
  padding: 14px 20px;
}
.mgmt-usuario-row:last-child { border-bottom: none; }

.mgmt-usuario-info { flex: 1; min-width: 0; }
.mgmt-usuario-nome { color: var(--text-primary); font-size: 14px; font-weight: 500; }
.mgmt-usuario-login {
  color: var(--text-muted);
  font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
  font-size: 12px;
  margin-top: 2px;
}

.perfil-badge {
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.perfil-badge--admin    { background: rgba(88,166,255,0.12); border-color: var(--accent-cyan); color: var(--accent-cyan); }
.perfil-badge--operador { background: var(--bg-card); border-color: var(--border); color: var(--text-muted); }

.mgmt-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.mgmt-acoes form { display: flex; }

.btn-sm { font-size: 12px; padding: 5px 10px; }

.mgmt-edit-card {
  background: rgba(88, 166, 255, 0.03);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
}
.mgmt-edit-card:last-child { border-bottom: none; }

.mgmt-edit-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  color: var(--text-secondary);
  font-size: 13px;
}

.mgmt-form-grid {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  margin-bottom: 14px;
}

.mgmt-hint {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
}

/* Select estilizado (dark theme) */
.form-group select {
  appearance: none;
  background-color: var(--bg-base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238b949e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 30px 9px 12px;
  width: 100%;
}
.form-group select:focus { border-color: var(--accent-cyan); outline: none; }

@media (max-width: 640px) {
  .mgmt-form-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Subir Arquivos ── */
.upload-zone {
  align-items: center;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.upload-zone:hover {
  background: rgba(88, 166, 255, 0.04);
  border-color: var(--accent-cyan);
  color: var(--text-secondary);
}
.upload-zone--ativo {
  background: var(--baixo-bg);
  border-color: var(--baixo);
  border-style: solid;
  color: var(--baixo);
}
.upload-input { display: none; }
.upload-zone-nome { font-size: 14px; font-weight: 500; }
.upload-zone-hint { font-size: 12px; opacity: 0.7; }

/* ── Horas Senior ── */
.senior-horas {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent-cyan);
  font-size: 15px;
  flex-shrink: 0;
}

.senior-table {
  width: 100%;
  border-collapse: collapse;
}
.senior-table th,
.senior-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.senior-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.senior-table td { font-size: 14px; color: var(--text-secondary); }
.senior-table td.senior-horas { color: var(--accent-cyan); }
.senior-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.senior-table tbody tr:last-child td { border-bottom: none; }
.senior-table-total td {
  border-top: 1px solid var(--border);
  border-bottom: none;
  font-weight: 600;
  color: var(--text-primary);
}
.senior-table-total td.senior-horas { color: var(--accent-cyan); }

/* ── Análise Consolidada — hub ── */
.analise-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analise-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-cyan);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 20px 24px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.analise-card:hover { background: rgba(255,255,255,0.03); text-decoration: none; }
.analise-card--em-breve {
  border-left-color: var(--border);
  cursor: default;
  opacity: 0.5;
}

.analise-card-icon {
  color: var(--accent-cyan);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.analise-card--em-breve .analise-card-icon { color: var(--text-muted); }

.analise-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.analise-card-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.analise-card-descricao {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.analise-card-arrow {
  color: var(--text-muted);
  font-size: 20px;
  flex-shrink: 0;
}

.analise-card-badge {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  flex-shrink: 0;
}

/* ── Horas Senior — topo (título + upload) ── */
.senior-page-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.senior-upload-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.senior-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.senior-total-badge {
  background: rgba(88, 166, 255, 0.1);
  border: 1px solid rgba(88, 166, 255, 0.25);
  border-radius: 20px;
  color: var(--accent-cyan);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 2px 10px;
  vertical-align: middle;
}

.senior-upload-input { display: none; }

.senior-upload-label {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  max-width: 220px;
  overflow: hidden;
  padding: 6px 12px;
  text-overflow: ellipsis;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.senior-upload-label:hover { border-color: var(--accent-cyan); color: var(--text-primary); }
.senior-upload-label.copied { border-color: var(--baixo); color: var(--baixo); }

.senior-upload-submit { font-size: 13px; padding: 6px 14px; }
.senior-upload-submit:disabled { opacity: 0.35; cursor: default; }

/* ── Colaboradores — tabela ── */
.colab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.colab-table th {
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
  padding: 0;
  white-space: nowrap;
}

.colab-th-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s;
  user-select: none;
  white-space: nowrap;
}
.colab-th-link:hover { color: var(--text-primary); text-decoration: none; }
.colab-th-link--ativo { color: var(--accent-cyan); }
.colab-th-link--ativo:hover { color: var(--accent-cyan); }

.colab-table td {
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 10px 14px;
  white-space: nowrap;
}
.colab-table tbody tr:last-child td { border-bottom: none; }
.colab-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.colab-nome { color: var(--text-primary); font-weight: 500; }

/* ── Horas Senior — cabeçalho ordenável ── */
.senior-list-header {
  display: flex;
  justify-content: space-between;
  padding: 0 16px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.senior-col-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
  user-select: none;
}
.senior-col-btn:hover { color: var(--text-primary); text-decoration: none; }
.senior-col-btn--ativo { color: var(--accent-cyan); }
.senior-col-btn--ativo:hover { color: var(--accent-cyan); }

.senior-sort-arrow { font-size: 12px; line-height: 1; }

/* ── Horas Senior — busca ── */
.senior-busca-form { margin-bottom: 16px; }

.senior-busca-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  width: 100%;
  max-width: 360px;
  transition: border-color 0.15s;
}
.senior-busca-input:focus { border-color: var(--accent-cyan); outline: none; }
.senior-busca-input::placeholder { color: var(--text-muted); }

/* ── Paginação ── */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.pag-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.pag-btn:hover { border-color: var(--accent-cyan); color: var(--text-primary); text-decoration: none; }
.pag-btn--disabled { opacity: 0.35; cursor: default; pointer-events: none; }

.pag-info {
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Sugestões ── */
.sug-container {
  max-width: 680px;
}

.sug-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.sug-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sug-msg--resposta { flex-direction: row-reverse; }

.sug-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  height: 32px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.3px;
  user-select: none;
}
.sug-avatar--sistema  { background: var(--accent-blue); color: #fff; }
.sug-avatar--usuario  { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); }

.sug-msg-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  max-width: 82%;
  padding: 10px 14px;
}
.sug-msg--resposta .sug-msg-bubble {
  background: rgba(31, 111, 235, 0.1);
  border-color: rgba(31, 111, 235, 0.25);
  color: var(--text-primary);
}
.sug-msg-bubble--ativa {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

.sug-revisao-titulo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.sug-form { display: flex; flex-direction: column; gap: 10px; }

.sug-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}
.sug-input:focus { border-color: var(--accent-cyan); outline: none; }
.sug-input--story { min-height: 100px; }

.sug-form-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sucesso */
.sug-sucesso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
}
.sug-sucesso-icone { margin-bottom: 4px; }
.sug-sucesso-titulo { font-size: 22px; font-weight: 700; color: var(--baixo); }
.sug-sucesso-desc { color: var(--text-secondary); font-size: 14px; }
.sug-btn-link { text-decoration: none; }
.sug-link-nova { color: var(--text-muted); font-size: 13px; }
.sug-link-nova:hover { color: var(--text-secondary); }

/* ── Como Funciona ── */
.cf-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
}

.cf-sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

.cf-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 12px;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  width: 100%;
}

.cf-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }

.cf-nav-item--active {
  background: var(--bg-hover);
  color: var(--accent-cyan);
  font-weight: 600;
}

.cf-nav-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.cf-section-titulo {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.cf-section-desc {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.6;
}

.cf-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 14px;
}

.cf-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.cf-card p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.cf-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.cf-list li {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  padding-left: 14px;
  position: relative;
}

.cf-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.cf-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cf-tag {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 3px 9px;
}

.cf-desvio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.cf-desvio-item {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.cf-desvio-item p {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.cf-desvio-label {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.cf-desvio-label--critico { background: rgba(251,146,60,0.12); color: var(--alto); }
.cf-desvio-label--neutro  { background: rgba(148,163,184,0.12); color: var(--text-secondary); }

.cf-fluxo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
}

.cf-fluxo--vertical {
  flex-direction: column;
  gap: 16px;
}

.cf-fluxo-etapa {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
}

.cf-fluxo--vertical .cf-fluxo-etapa { flex: unset; }

.cf-fluxo-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-cyan);
  color: var(--bg-main);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cf-fluxo-etapa strong { font-size: 13px; color: var(--text-primary); display: block; margin-bottom: 4px; }
.cf-fluxo-etapa p { font-size: 12px; color: var(--text-secondary); line-height: 1.55; margin: 0; }

.cf-fluxo-seta {
  color: var(--text-muted);
  font-size: 18px;
  padding-top: 4px;
  flex-shrink: 0;
}

.cf-motor-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.cf-motor-item--ativo  { border-color: var(--accent-cyan); background: rgba(34,211,238,0.04); }
.cf-motor-item--futuro { background: var(--bg-main); opacity: 0.7; }

.cf-motor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cf-motor-nome { font-size: 13px; font-weight: 600; color: var(--text-primary); }

.cf-motor-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.cf-motor-status--ativo  { background: rgba(34,211,238,0.12); color: var(--accent-cyan); }
.cf-motor-status--futuro { background: var(--bg-hover); color: var(--text-muted); }

.cf-motor-item p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ── Colaboradores — Busca dupla ── */
.colab-busca-form {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.colab-busca-form .senior-busca-input {
  flex: 1;
  margin-bottom: 0;
}

/* ── Colaboradores — Grid de Cards ── */
.colab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
  margin-bottom: 24px;
}

.colab-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px 18px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  outline: none;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}

.colab-card:hover,
.colab-card:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 1px var(--accent-cyan);
}

.colab-card--inativo {
  opacity: 0.65;
}

.colab-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.colab-card-iniciais {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-cyan);
  color: var(--bg-main);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.colab-card--inativo .colab-card-iniciais {
  background: var(--border);
  color: var(--text-muted);
}

.colab-card-nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.colab-card-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  overflow: hidden;
  flex: 1;
}

.colab-card-motores {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.colab-card-motor-icone {
  color: var(--border);
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.colab-card-motor-icone--ativo {
  color: var(--accent-cyan);
}

.colab-card-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.colab-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.colab-card-value {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

/* ── Badges ── */
.colab-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.colab-badge--ativo   { background: rgba(74, 222, 128, 0.12); color: var(--baixo); }
.colab-badge--inativo { background: rgba(251, 146, 60, 0.12);  color: var(--alto); }

/* ── Modal ── */
.colab-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}

.colab-modal-overlay[hidden] { display: none; }

.colab-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.colab-modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}

.colab-modal-identidade {
  display: flex;
  align-items: center;
  gap: 14px;
}

.colab-modal-iniciais {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-cyan);
  color: var(--bg-main);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.colab-modal-nome {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.colab-modal-username {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.colab-modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  gap: 4px;
}

.colab-modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: -1px;
  padding: 10px 14px;
  transition: color 0.15s, border-color 0.15s;
}

.colab-modal-tab:hover { color: var(--text-primary); }

.colab-modal-tab--active {
  border-bottom-color: var(--accent-cyan);
  color: var(--text-primary);
  font-weight: 600;
}

/* Motor card (aba Análise) */
.motor-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.motor-card-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.motor-card-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.motor-card-label {
  font-size: 12px;
  color: var(--text-muted);
}

.motor-card-val {
  font-size: 12px;
  color: var(--text-secondary);
}

.motor-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid;
  text-transform: uppercase;
}

.motor-sem-dados {
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px 0;
}

.colab-modal-fechar {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px 10px;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.colab-modal-fechar:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.colab-modal-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 360px;
}

.colab-modal-secao-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.colab-modal-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

.colab-modal-campos--3 { grid-template-columns: repeat(3, 1fr); }
.colab-modal-campos--2 { grid-template-columns: repeat(2, 1fr); }

.colab-modal-campo {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.colab-modal-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.colab-modal-val {
  font-size: 13px;
  color: var(--text-primary);
}

/* ── Responsividade ── */
@media (max-width: 900px) {
  .navbar { width: 200px; min-width: 200px; }
}

@media (max-width: 640px) {
  .summary-cards { grid-template-columns: repeat(2, 1fr); }
  .comparacao-grid { grid-template-columns: 1fr; }
  .main-content { padding: 20px 16px; }
}