/* ============================================================
   ProjetoSpec — Estilos Globais
   Tema escuro com tons de verde tecnológico
   ============================================================ */

:root {
  --bg-primary:    #0d1117;
  --bg-secondary:  #161b22;
  --bg-tertiary:   #21262d;
  --bg-card:       #1c2128;
  --bg-hover:      #2d333b;
  --footer-height: 44px;

  --green-bright:  #3fb950;
  --green-dim:     #238636;
  --green-glow:    rgba(63, 185, 80, 0.15);
  --green-border:  rgba(63, 185, 80, 0.3);

  --text-primary:  #e6edf3;
  --text-secondary:#8b949e;
  --text-muted:    #484f58;
  --text-accent:   #3fb950;

  --border-default:#30363d;
  --border-muted:  #21262d;

  --danger:        #f85149;
  --warning:       #e3b341;
  --info:          #58a6ff;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --sidebar-width: 280px;
  --header-height: 64px;
  --rail-width: 60px;
  --rail-width-expanded: 220px;

  --shadow-card: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 20px rgba(63, 185, 80, 0.2);

  --transition: all 0.2s ease;
}

/* ─── Login Overlay ─────────────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.login-box {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.6), 0 0 40px rgba(63,185,80,0.08);
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: modalIn 0.3s ease;
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-brand-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
}

.login-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Logo completo da solução SPEC (ícone + wordmark + tagline), substitui o
   antigo título em texto "ProjetoSpec / Plataforma de Gestão de Requisitos". */
.login-spec-wordmark {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.login-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  width: 100%;
  outline: none;
  transition: var(--transition);
}

.login-input:focus {
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.login-input::placeholder { color: var(--text-muted); }

.login-senha-wrap {
  position: relative;
  display: flex;
}

.login-senha-wrap .login-input { padding-right: 44px; }

.login-toggle-senha {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-secondary);
  padding: 2px;
  line-height: 1;
  transition: var(--transition);
}

.login-toggle-senha:hover { color: var(--text-primary); }

.login-erro {
  background: rgba(248,81,73,0.1);
  border: 1px solid rgba(248,81,73,0.3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--danger);
  font-size: 0.85rem;
  text-align: center;
}

/* Checklist da política de senha (popup obrigatório de troca + "🔑 Senha").
   Cada <li> ganha .ok quando o requisito é atendido; neutro enquanto não. */
.senha-requisitos {
  list-style: none;
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  font-size: 12px;
  color: var(--text-muted);
}

.senha-requisitos li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  transition: color 0.15s ease;
}

.senha-requisitos li::before {
  content: "○";
  font-weight: 700;
  line-height: 1;
}

.senha-requisitos li.ok {
  color: var(--green-bright, #3fb950);
}

.senha-requisitos li.ok::before {
  content: "●";
}


.login-btn {
  width: 100%;
  justify-content: center;
  padding: 13px;
  font-size: 1rem;
  letter-spacing: 0.3px;
}

.login-footer-text {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Usuário logado no header */
.header-usuario {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 5px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  white-space: nowrap;
}

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

html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow: hidden;
}

/* ─── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }

/* ─── Header ───────────────────────────────────────────────── */
.app-header {
  height: var(--header-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  padding: 0 16px;
  justify-content: space-between;
  min-width: 0;
  overflow: visible;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  box-shadow: 0 1px 0 var(--border-default);
}

/* Selo de versão discreto no canto superior direito (ver index.html). */
.app-versao {
  position: fixed;
  top: 2px;
  right: 6px;
  z-index: 101;
  font-size: 10px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.header-brand-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.2s ease;
}

.header-brand-logo:hover { opacity: 1; }

.header-divider {
  width: 1px;
  height: 28px;
  background: var(--border-default);
  margin: 0 14px;
}

/* Logo completo (ícone + wordmark "ProjetoSpec") no header — substitui o antigo ícone + texto (Ray, 2026-07-14) */
.header-spec-logo-full {
  height: 34px;
  width: auto;
  object-fit: contain;
  opacity: 0.95;
  transition: opacity 0.2s ease;
}

.header-spec-logo-full:hover { opacity: 1; }

.logo-text {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.logo-text span { color: var(--green-bright); }

.header-subtitle {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: nowrap; min-width: 0; }
.header-actions .btn { padding: 5px 9px; font-size: 0.78rem; height: 32px; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 1440px) { .header-subtitle { display: none; } }
@media (max-width: 1340px) { #btnHeaderRankingCommits { display: none !important; } }
@media (max-width: 1200px) { #btnHeaderRankingProjetos { display: none !important; } }
@media (max-width: 1040px) { #btnHeaderRanking { display: none !important; } }

/* ─── Footer ───────────────────────────────────────────────── */
.app-footer {
  height: var(--footer-height);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
}

.footer-by {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.footer-logo {
  height: 22px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.footer-logo:hover { opacity: 1; }

.footer-version {
  font-size: 0.68rem;
  color: var(--text-muted);
  padding-left: 10px;
  border-left: 1px solid var(--border-default);
  letter-spacing: 0.3px;
}

/* ─── Rail de navegação (lateral esquerda, retrátil) ─────────── */
/*
 * Fixo, sempre visível, independente do módulo ativo (diferente de
 * .app-layout e .painel-modulo, que se alternam via display:none).
 * Colapsado por padrão (só ícones); expande ao clicar no botão sanduíche,
 * empurrando .app-layout / .painel-modulo (que compensam via left/margin-left).
 * Estado persistido em localStorage — ver toggleNavRail() em app.js.
 */
.nav-rail {
  position: fixed;
  top: var(--header-height);
  bottom: var(--footer-height);
  left: 0;
  width: var(--rail-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.2s ease;
  z-index: 90;
}

html.rail-expanded .nav-rail { width: var(--rail-width-expanded); }

.rail-toggle, .rail-item {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  width: calc(100% - 16px);
  margin: 2px 8px;
  padding: 11px 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

html.rail-expanded .rail-toggle,
html.rail-expanded .rail-item { justify-content: flex-start; padding: 11px 18px; }

.rail-toggle:hover, .rail-item:hover { color: var(--text-primary); background: var(--bg-hover); }
.rail-item.active { background: var(--green-dim); color: #fff; }

.rail-icon { font-size: 1.15rem; flex-shrink: 0; width: 22px; text-align: center; }
.rail-label { display: none; }
html.rail-expanded .rail-label { display: inline; }

.rail-divider {
  height: 1px;
  background: var(--border-default);
  margin: 8px 12px;
  flex-shrink: 0;
}

/* Grupo CLI no rail: seção recolhível (título com seta; itens indentados quando expandido) */
.rail-grupo-titulo { font-weight: 700; }
.rail-grupo-seta { display: none; margin-left: auto; font-size: 0.7rem; transition: transform 0.15s ease; }
html.rail-expanded .rail-grupo-seta { display: inline; }
.rail-grupo.recolhido .rail-grupo-seta { transform: rotate(-90deg); }
.rail-grupo.recolhido .rail-grupo-itens { display: none; }
html.rail-expanded .rail-grupo-itens .rail-item { padding-left: 34px; }

/* Colaboradores Digitais & Agent Executors embutido (iframe de agentes.html?embed=1) */
.painel-modulo.agentes-painel { padding: 0; overflow: hidden; }
.agentes-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bg-primary); }

/* Em telas estreitas, o rail expandido flutua por cima do conteúdo em vez de empurrá-lo */
@media (max-width: 768px) {
  html.rail-expanded .nav-rail { box-shadow: 4px 0 24px rgba(0,0,0,0.5); }
  html.rail-expanded .app-layout { margin-left: var(--rail-width) !important; }
  html.rail-expanded .painel-modulo { left: var(--rail-width) !important; }
}

/* ─── Layout ────────────────────────────────────────────────── */
.app-layout {
  display: flex;
  height: 100vh;
  padding-top: var(--header-height);
  padding-bottom: var(--footer-height);
  margin-left: var(--rail-width);
  transition: margin-left 0.2s ease;
}

html.rail-expanded .app-layout { margin-left: var(--rail-width-expanded); }

/* ─── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
}

.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.sidebar-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  margin-bottom: 4px;
  position: relative;
}

.sidebar-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.sidebar-item.active {
  background: var(--green-glow);
  border-color: var(--green-border);
}

.sidebar-item.active .item-name { color: var(--green-bright); }

.item-name {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Código autonumérico (PRJ-0001 / TAR-0001) exibido antes do nome — Projetos e Tarefas. */
.item-codigo,
.tarefa-codigo {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.72rem;
  color: var(--text-muted, var(--text-secondary));
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Pré-visualização do Markdown do campo Descrição da Tarefa (botão "👁 Pré-visualizar"). */
.markdown-preview {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  font-size: 0.86rem;
  color: var(--text-primary);
  min-height: 44px;
}
.markdown-preview p:first-child { margin-top: 0; }
.markdown-preview p:last-child { margin-bottom: 0; }
.markdown-preview code {
  background: var(--bg-elevated, rgba(255,255,255,0.06));
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}
.markdown-preview pre {
  background: var(--bg-elevated, rgba(255,255,255,0.06));
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.markdown-preview ul, .markdown-preview ol { padding-left: 20px; margin: 6px 0; }
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3,
.markdown-preview h4, .markdown-preview h5, .markdown-preview h6 {
  margin: 10px 0 4px;
  font-weight: 700;
}
/* Tabelas Markdown (ex.: Orçamento-Resumo do Termo de Abertura) — marked.js gera <table>
   sem estilo nenhum por padrão; sem isso, uma tabela renderizada fica visualmente idêntica
   a texto solto, difícil de distinguir do Markdown cru que motivou o pedido de suporte. */
.markdown-preview table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 0.85em;
}
.markdown-preview th, .markdown-preview td {
  border: 1px solid var(--border-default);
  padding: 5px 8px;
  text-align: left;
}
.markdown-preview th {
  background: var(--bg-elevated, rgba(255,255,255,0.06));
  font-weight: 600;
}
.markdown-preview tr:nth-child(even) td {
  background: var(--bg-hover);
}

.item-badge {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: var(--green-dim);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-tertiary);
}

.total-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.total-count {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green-bright);
}

/* ─── Main Content ──────────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: var(--bg-primary);
}

/* ─── Section Headers ───────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '';
  width: 3px; height: 18px;
  background: var(--green-bright);
  border-radius: 2px;
}

/* ─── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
  transition: var(--transition);
}

.card:hover { border-color: var(--green-border); }

.card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}

/* ─── Form Grid ─────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid .full-width { grid-column: 1 / -1; }

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

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-label .required { color: var(--danger); margin-left: 2px; }

.form-control {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 9px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: var(--transition);
  width: 100%;
  outline: none;
}

.form-control:focus {
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.form-control::placeholder { color: var(--text-muted); }

textarea.form-control {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

select.form-control {
  cursor: pointer;
  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='%238b949e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--green-dim);
  border-color: var(--green-dim);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  background: var(--green-bright);
  border-color: var(--green-bright);
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-primary);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--green-border);
}

.btn-ai {
  background: linear-gradient(135deg, #1a3a2a, var(--green-dim));
  border-color: var(--green-border);
  color: var(--green-bright);
  font-size: 0.85rem;
}
.btn-ai:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--green-dim), var(--green-bright));
  color: #fff;
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.1);
}

/* Amarelo — usado no botão "🟡 Atualizar" dos Lembretes (Ray, 2026-07-14) */
.btn-warning {
  background: #e3b341;
  border-color: #e3b341;
  color: #1c1500;
}
.btn-warning:hover:not(:disabled) {
  background: #f0c14b;
  border-color: #f0c14b;
  box-shadow: 0 0 0 3px rgba(227,179,65,0.2);
}

.btn-sm { padding: 5px 12px; font-size: 0.8rem; }
.btn-icon { padding: 6px 8px; }

/* ─── Botão grupo ────────────────────────────────────────────── */
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── Spinner de loading ─────────────────────────────────────── */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
.loading .spinner { display: block; }
.loading .btn-label { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Tabs ───────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 24px;
}

.tab-btn {
  padding: 10px 20px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition);
}

.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active {
  color: var(--green-bright);
  border-bottom-color: var(--green-bright);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── Layout de 2 colunas: Funcionalidades + painel lateral de Tarefas ──
   (Ray, 2026-07-14: ao selecionar uma RF/RNF, suas tarefas aparecem à direita) */
/* ─── Rodapé Fixo / Sticky para Ações do Formulário de Requisitos ─────── */
.form-actions-sticky {
  position: sticky;
  bottom: 12px;
  z-index: 100;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--bg-card, #1c212c);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
  margin-top: 20px;
}

.funcionalidades-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.painel-tarefas-rf {
  width: 320px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  position: sticky;
  top: 0;
  max-height: calc(100vh - var(--header-height) - var(--footer-height) - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.painel-tarefas-rf-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.painel-tarefas-rf-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 1100px) {
  .funcionalidades-layout { flex-direction: column; }
  .painel-tarefas-rf { width: 100%; position: static; max-height: none; }
}

/* Card de RF/RNF selecionado (painel lateral de tarefas ativo) */
.rf-card.selecionado {
  border-color: var(--green-border);
  box-shadow: 0 0 0 1px var(--green-border);
}

/* ─── Tabela de funcionalidades ───────────────────────────────── */
.feature-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.feature-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-tertiary);
}

.feature-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.feature-table th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

.feature-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-muted);
  vertical-align: middle;
  color: var(--text-primary);
}

.feature-table tr:hover td { background: var(--bg-hover); }
.feature-table tr:last-child td { border-bottom: none; }

/* ─── Status badges ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.badge-rascunho    { background: rgba(139,148,158,0.15); color: #8b949e; }
.badge-backlog     { background: rgba(139,148,158,0.15); color: #8b949e; }
.badge-para_fazer  { background: rgba(88,166,255,0.15);  color: #58a6ff; }
.badge-em_analise  { background: rgba(88,166,255,0.15);  color: #58a6ff; }
.badge-aprovado    { background: rgba(63,185,80,0.15);   color: #3fb950; }
.badge-em_desenvolvimento { background: rgba(227,179,65,0.15); color: #e3b341; }
.badge-impedimento { background: rgba(248,81,73,0.15);  color: #f85149; }
.badge-concluido   { background: rgba(63,185,80,0.2);    color: #56d364; }
.badge-cancelado   { background: rgba(248,81,73,0.15);   color: #f85149; }

.badge-pmi   { background: rgba(88,166,255,0.1); color: #79c0ff; }
.badge-scrum { background: rgba(227,179,65,0.1); color: #e3b341; }
.badge-sdlc  { background: rgba(139,148,158,0.1); color: #8b949e; }

/* ─── Badges de Tarefa/Bug (módulo Tarefas) ─────────────────────── */
.badge-tarefa-backlog     { background: rgba(139,148,158,0.15); color: #8b949e; }
.badge-tarefa-para_fazer  { background: rgba(88,166,255,0.15);  color: #58a6ff; }
.badge-tarefa-fazendo     { background: rgba(227,179,65,0.15);  color: #e3b341; }
.badge-tarefa-impedimento { background: rgba(248,81,73,0.15);   color: #f85149; }
.badge-tarefa-feito       { background: rgba(63,185,80,0.15);   color: #3fb950; }
.badge-tarefa-cancelado   { background: rgba(248,81,73,0.15);   color: #f85149; }

/* Marcação de privada (Ray, 2026-07-16) — só o criador ou o admin veem/editam. */
.badge-tarefa-privada { background: rgba(188,140,255,0.15); color: #bc8cff; }

.badge-bug-aberto       { background: rgba(88,166,255,0.15);  color: #58a6ff; }
.badge-bug-em_correcao  { background: rgba(227,179,65,0.15);  color: #e3b341; }
.badge-bug-resolvido    { background: rgba(63,185,80,0.15);   color: #3fb950; }
.badge-bug-cancelado    { background: rgba(248,81,73,0.15);   color: #f85149; }

/* Badge do campo Tipo da Tarefa (Tarefa/Suporte/Bug/Outros) */
.badge-tipotarefa-tarefa     { background: rgba(88,166,255,0.1);  color: #79c0ff; }
.badge-tipotarefa-suporte    { background: rgba(139,148,158,0.1); color: #8b949e; }
.badge-tipotarefa-bug        { background: rgba(248,81,73,0.1);   color: #ff7b72; }
.badge-tipotarefa-outros     { background: rgba(139,92,246,0.12); color: #a78bfa; }
.badge-tipotarefa-ata        { background: rgba(227,179,65,0.12); color: #e3b341; }
.badge-tipotarefa-rdm        { background: rgba(63,185,80,0.12);  color: #56d364; }
.badge-tipotarefa-teste      { background: rgba(255,123,114,0.12);color: #ffa198; }
.badge-tipotarefa-estimativa { background: rgba(88,166,255,0.12); color: #58a6ff; }
.badge-tipotarefa-regra_de_negocio { background: rgba(210,153,34,0.15); color: #e3b341; }
.badge-tipotarefa-desvio_de_projeto { background: rgba(234,88,12,0.14); color: #ea580c; border: 1px solid rgba(234,88,12,0.3); }

/* ─── AI Preview ─────────────────────────────────────────────── */
.ai-preview {
  background: linear-gradient(135deg, #0d2016, #0d1117);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 12px;
  position: relative;
  display: none;
}

.ai-preview.visible { display: block; }

.ai-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green-bright);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ai-preview-content {
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.7;
  /* Conteúdo renderizado via renderMarkdown() como HTML (.pei-markdown) — sem pre-wrap,
     que quebraria o espaçamento normal de parágrafos/listas geradas. */
}


/* ─── Projeto selecionado info ───────────────────────────────── */
.selected-project-banner {
  background: var(--green-glow);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Fixo no topo ao rolar a tela do projeto (Ray, 2026-07-14) — o botão "◀ Todos
     os Projetos" precisa continuar acessível mesmo com uma lista longa de
     Funcionalidades/ATAs/Arquivos abaixo. */
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(2px);
}

.selected-project-banner .icon { font-size: 1.2rem; }

/* Logo do Cliente no banner verde do projeto selecionado (Ray, 2026-07-17: "Usar o
   logo do cliente no card verde, antes do nome"). Fundo claro sólido — o banner é
   translúcido (--green-glow), logos com áreas transparentes ficariam ilegíveis sem isso. */
.banner-cliente-logo {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: #ffffff;
  padding: 3px;
  flex-shrink: 0;
}

.selected-project-info .label {
  font-size: 0.72rem;
  color: var(--green-bright);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.selected-project-info .name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Container da tela de Projetos em Cards (filtros + grid) — Ray, 2026-07-14 */
.no-project-msg {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--text-secondary);
  gap: 12px;
  height: 100%;
  max-height: calc(100vh - var(--header-height, 56px) - var(--footer-height, 32px) - 48px);
  overflow: hidden;
  flex: 1;
}

.no-project-msg .empty-state .icon { font-size: 3rem; opacity: 0.3; }
.no-project-msg .empty-state p { max-width: 300px; font-size: 0.9rem; line-height: 1.6; margin: 0 auto; }

/* ─── Barra de filtros da tela de Projetos (Linha 2 Fixa) ───────── */
.projetos-filtros-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  flex-shrink: 0;
}

/* ─── Container Roolável do GRID de Projetos (Linha 3 com Scrollbar) ─── */
.projetos-grid-container {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

/* ─── Grid de cards de Projeto (3 colunas, responsivo) ────────── */
.projetos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-bottom: 16px;
}

@media (max-width: 1200px) { .projetos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .projetos-grid { grid-template-columns: 1fr; } }

/* ─── Kanban de Projetos por Status ─────────────────────────────── */
.projetos-kanban {
  display: grid;
  grid-template-columns: repeat(12, minmax(250px, 1fr));
  gap: 12px;
  min-width: 3060px;
  align-items: start;
  padding-bottom: 16px;
}

.projetos-kanban-raia {
  min-height: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-top: 4px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.projetos-kanban-raia-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-muted);
}

.projetos-kanban-raia-titulo {
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.projetos-kanban-raia-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
}

.projetos-kanban-raia-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.projetos-kanban-raia .projeto-card {
  padding: 13px 14px;
  cursor: grab;
}

.projetos-kanban-raia .projeto-card:active {
  cursor: grabbing;
}

.projeto-card-kanban-arrastando {
  opacity: 0.45;
}

.projetos-kanban-raia-destino {
  background: rgba(88, 166, 255, 0.12);
  border-color: var(--accent, #58a6ff);
  box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.25), 0 0 0 2px rgba(88, 166, 255, 0.12);
}

.projetos-kanban-raia-vazia {
  padding: 24px 10px;
  color: var(--text-muted);
  font-size: 0.76rem;
  text-align: center;
}

.projetos-kanban-raia-criado       { border-top-color: #a371f7; }
.projetos-kanban-raia-orcamento    { border-top-color: #f59e0b; }
.projetos-kanban-raia-planejamento { border-top-color: #8b949e; }
.projetos-kanban-raia-analise      { border-top-color: #d29922; }
.projetos-kanban-raia-aprovacao    { border-top-color: #39c5cf; }
.projetos-kanban-raia-construcao   { border-top-color: #58a6ff; }
.projetos-kanban-raia-impedido     { border-top-color: #f85149; }
.projetos-kanban-raia-teste        { border-top-color: #bc8cff; }
.projetos-kanban-raia-homologacao  { border-top-color: #7ee787; }
.projetos-kanban-raia-pausado      { border-top-color: #6e7681; }
.projetos-kanban-raia-cancelado    { border-top-color: #ff7b72; }
.projetos-kanban-raia-concluido    { border-top-color: #3fb950; }

.projeto-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.projeto-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  border-color: var(--green-border);
}

.projeto-card-header { display: flex; align-items: flex-start; gap: 8px; }
.projeto-card-codigo { font-size: 0.7rem; color: var(--text-muted); font-family: monospace; display: block; }
.projeto-card-nome   { font-size: 1rem; font-weight: 700; color: var(--text-primary); flex: 1; line-height: 1.3; }

.projeto-card-info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.projeto-card-info-row b { color: var(--text-primary); font-weight: 600; }

.projeto-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-muted);
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Quantidade de RFs + % de conclusão (Ray, 2026-07-17: "A quantidade de RFs do
   projeto" + "O Percentual de conclusão"). Reaproveita .pdi-progress-* (ver
   bloco PDI) para a barrinha, mantendo a mesma linguagem visual do app. */
.projeto-card-progresso { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; }
.projeto-card-progresso-label { color: var(--text-secondary); white-space: nowrap; }
.projeto-card-progresso .pdi-progress-wrap { flex: 1; }

/* Cor da borda esquerda do card, por status */
.projeto-card-planejamento { border-left-color: #8b949e; }
.projeto-card-em_andamento { border-left-color: #58a6ff; }
.projeto-card-em_risco     { border-left-color: #e3b341; }
.projeto-card-pausado      { border-left-color: #8b949e; }
.projeto-card-concluido    { border-left-color: #3fb950; }
.projeto-card-cancelado    { border-left-color: #f85149; }

/* ─── Lista (tabela) de Projetos — alternativa à Grade de cards, via toggle
   na barra de filtros (Ray, 2026-07-14). Mesma paleta de status dos cards. ── */
.projetos-tabela { width: 100%; border-collapse: collapse; }
.projetos-tabela th {
  text-align: left; padding: 8px 10px; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-muted); border-bottom: 1px solid var(--border-default);
}
.projetos-tabela td {
  padding: 10px; border-bottom: 1px solid var(--border-muted); font-size: 0.85rem;
  color: var(--text-primary); vertical-align: middle;
}
.projetos-tabela tr { cursor: pointer; transition: var(--transition); }
.projetos-tabela tr:hover td { background: var(--bg-hover); }
.projetos-tabela .proj-linha-codigo { font-family: monospace; font-size: 0.72rem; color: var(--text-muted); }
.projetos-tabela .proj-linha-nome { font-weight: 600; }

.proj-linha-criado       { border-left: 3px solid #a371f7; }
.proj-linha-orcamento    { border-left: 3px solid #f59e0b; }
.proj-linha-planejamento { border-left: 3px solid #8b949e; }
.proj-linha-analise      { border-left: 3px solid #d29922; }
.proj-linha-aprovacao    { border-left: 3px solid #39c5cf; }
.proj-linha-construcao   { border-left: 3px solid #58a6ff; }
.proj-linha-impedido     { border-left: 3px solid #f85149; }
.proj-linha-teste        { border-left: 3px solid #bc8cff; }
.proj-linha-homologacao  { border-left: 3px solid #7ee787; }
.proj-linha-em_andamento { border-left: 3px solid #58a6ff; }
.proj-linha-em_risco     { border-left: 3px solid #e3b341; }
.proj-linha-pausado      { border-left: 3px solid #8b949e; }
.proj-linha-concluido    { border-left: 3px solid #3fb950; }
.proj-linha-cancelado    { border-left: 3px solid #f85149; }

/* Badge de status do Projeto (mesma paleta da borda) */
.badge-projstatus-criado       { background: rgba(163,113,247,0.15); color: #a371f7; }
.badge-projstatus-orcamento    { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.badge-projstatus-planejamento { background: rgba(139,148,158,0.15); color: #8b949e; }
.badge-projstatus-analise      { background: rgba(210,153,34,0.15);  color: #d29922; }
.badge-projstatus-aprovacao    { background: rgba(57,197,207,0.15);  color: #39c5cf; }
.badge-projstatus-construcao   { background: rgba(88,166,255,0.15); color: #58a6ff; }
.badge-projstatus-impedido     { background: rgba(248,81,73,0.15);  color: #f85149; }
.badge-projstatus-teste        { background: rgba(188,140,255,0.15); color: #bc8cff; }
.badge-projstatus-homologacao  { background: rgba(126,231,135,0.15); color: #7ee787; }
.badge-projstatus-em_andamento { background: rgba(88,166,255,0.15); color: #58a6ff; }
.badge-projstatus-em_risco     { background: rgba(227,179,65,0.15); color: #e3b341; }
.badge-projstatus-pausado      { background: rgba(139,148,158,0.15); color: #8b949e; }
.badge-projstatus-concluido    { background: rgba(63,185,80,0.15);  color: #3fb950; }
.badge-projstatus-cancelado    { background: rgba(248,81,73,0.15);  color: #f85149; }

/* ─── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 90%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  animation: modalIn 0.2s ease;
}

@keyframes modalIn {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-default);
}

.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-title .accent { color: var(--green-bright); }

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  line-height: 1;
}

.modal-close:hover { color: var(--text-primary); background: var(--bg-hover); }

.modal-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.sticky-modal-footer {
  position: sticky;
  bottom: -28px;
  background: var(--bg-card);
  padding: 14px 0 6px 0;
  margin-top: 18px;
  border-top: 1px solid var(--border-default);
  z-index: 25;
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.4);
}

.status-nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.status-nav-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ─── Linha de Sprint (40%) e Status (60%) ────────────────────── */
.sprint-status-row {
  display: grid;
  grid-template-columns: 40% calc(60% - 16px);
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.sprint-status-row .sprint-col {
  min-width: 0;
}

.sprint-status-row .status-col {
  min-width: 0;
}

@media (max-width: 768px) {
  .sprint-status-row {
    grid-template-columns: 1fr;
  }
}

/* ─── Badge e Caixa de Idade na Fase ─────────────────────────── */
.badge-idade-fase {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.12);
  color: var(--green-bright, #4ade80);
  border: 1px solid rgba(34, 197, 94, 0.3);
  white-space: nowrap;
}

.transicao-idade-box {
  transition: all 0.2s ease;
}

.modal-historico-card {
  background: var(--bg-card, #1a1d27);
  border: 1px solid var(--border-default, #2a2e3d);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.modal-historico-card:hover {
  border-color: var(--primary, #6366f1);
  transform: translateY(-1px);
}

.modal-historico-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.modal-historico-fases {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}

.modal-historico-meta {
  font-size: 0.76rem;
  color: var(--text-muted, #8b949e);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.modal-historico-justificativa {
  font-size: 0.84rem;
  color: var(--text-secondary, #c9d1d9);
  background: var(--bg-tertiary, #12151f);
  padding: 8px 12px;
  border-radius: var(--radius-sm, 6px);
  border-left: 3px solid var(--primary, #6366f1);
  line-height: 1.45;
  white-space: pre-wrap;
}

/* ─── Detail View ─────────────────────────────────────────────── */
.detail-section {
  margin-bottom: 16px;
}

.detail-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.detail-value {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.6;
  white-space: pre-wrap;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ─── Toast / Notificações ────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-card);
  animation: slideIn 0.3s ease;
  min-width: 280px;
  max-width: 420px;
}

.toast.success { border-left: 3px solid var(--green-bright); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.info    { border-left: 3px solid var(--info); }
.toast.warning { border-left: 3px solid var(--warning); }

.toast-icon { font-size: 1.1rem; }
.toast-msg  { font-size: 0.85rem; color: var(--text-primary); flex: 1; }

/* Mensagem de confirmação/diálogo pode conter quebras de linha
   (ex.: sugestão de IA exibida antes de aplicar) */
#confirmMsg, .ui-dialog-msg { white-space: pre-line; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── Empty state ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.empty-state .icon { font-size: 2.5rem; margin-bottom: 8px; opacity: 0.4; }
.empty-state p { font-size: 0.9rem; }

/* ─── Confirm dialog ─────────────────────────────────────────── */
#confirmModal .modal { max-width: 400px; }
/* Confirmação sempre acima de qualquer modal aberto (mesmo z-index + ordem no DOM deixava-a atrás e travava a tela). Toasts ficam em 10100. */
#confirmModal { z-index: 10090; }

/* ─── Cards de Requisito (RF) ────────────────────────────────────── */
.rf-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rf-card:hover {
  border-color: var(--green-border);
  background: var(--bg-hover);
}

.rf-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─── Foto do Dev no Card da Funcionalidade (Ray, 2026-09-10) ───── */
.rf-dev-foto-box {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-default);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.rf-card:hover .rf-dev-foto-box {
  border-color: var(--green-border);
  box-shadow: 0 0 8px var(--green-glow);
}

.rf-dev-foto-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rf-dev-avatar-placeholder {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--green-dim), var(--green-bright));
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rf-dev-foto-box.sem-dev {
  background: var(--bg-card);
  border-style: dashed;
  border-color: var(--border-default);
  opacity: 0.65;
}

.rf-dev-avatar-sem {
  font-size: 1.25rem;
  color: var(--text-muted);
}

.rf-dev-foto-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.rf-dev-foto-box-multi {
  width: 40px;
  height: 40px;
}

.rf-code {
  background: var(--green-glow);
  border: 1px solid var(--green-border);
  color: var(--green-bright);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.8px;
  white-space: nowrap;
  font-family: monospace;
}

.rf-titulo {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.rf-ia-tag {
  font-size: 0.72rem;
  color: var(--green-bright);
  background: var(--green-glow);
  border: 1px solid var(--green-border);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}

.rf-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rf-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.rf-meta-item .label {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.rf-meta-sep {
  color: var(--border-default);
  font-size: 0.8rem;
}

/* Borda lateral colorida por criticidade */
.rf-crit-alto  { border-left: 4px solid var(--danger); }
.rf-crit-medio { border-left: 4px solid var(--warning); }
.rf-crit-baixo { border-left: 4px solid var(--green-bright); }

/* Badges de criticidade */
.badge-crit-alto  { background: rgba(248,81,73,0.15);   color: #f85149; border: 1px solid rgba(248,81,73,0.35); }
.badge-crit-medio { background: rgba(227,179,65,0.15);  color: #e3b341; border: 1px solid rgba(227,179,65,0.35); }
.badge-crit-baixo { background: rgba(63,185,80,0.15);   color: #3fb950; border: 1px solid rgba(63,185,80,0.35); }

/* Linha de informações do card */
.rf-card-info-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border-muted);
  border-bottom: 1px solid var(--border-muted);
}

.rf-info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 90px;
}

.rf-info-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  white-space: nowrap;
}

.rf-info-valor {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rf-info-horas {
  color: var(--green-bright);
  font-size: 0.95rem;
}

/* Contador de Tarefas visível no card do RF (Ray, 2026-07-15) — discreto quando
   ainda não há nenhuma tarefa cadastrada, para não competir visualmente com os
   demais valores preenchidos do card. */
.rf-info-valor-vazio { color: var(--text-muted); font-weight: 500; }

/* % de conclusão do RF (Ray, 2026-07-17: "O Percentual de conclusão") — barrinha
   mini ao lado do contador de Tarefas; cor de preenchimento vem das classes
   .pdi-bar-verde/amarelo/vermelho (reaproveitadas do módulo PDI). */
.rf-progresso-mini-bar {
  width: 46px; height: 6px; background: var(--bg-tertiary);
  border-radius: 3px; overflow: hidden; flex-shrink: 0; display: inline-block;
}
.rf-progresso-mini-fill { display: block; height: 100%; border-radius: 3px; transition: width 0.4s ease; }

.rf-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border-muted);
  flex-wrap: wrap;
  gap: 8px;
}

.rf-dates {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ─── Seletor múltiplo de desenvolvedores ───────────────────── */
.dev-picker {
  position: relative;
}

.dev-picker-tags {
  min-height: 40px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  transition: var(--transition);
}

.dev-picker-tags:hover,
.dev-picker-tags:focus-within {
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.dev-placeholder { color: var(--text-muted); font-size: 0.88rem; }

.dev-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--green-glow);
  border: 1px solid var(--green-border);
  color: var(--green-bright);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.dev-tag-remove {
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--green-bright);
  line-height: 1;
  padding: 0 2px;
  border-radius: 50%;
  transition: var(--transition);
}

.dev-tag-remove:hover { background: rgba(63,185,80,0.3); }

.dev-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-card);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  z-index: 50;
  padding: 6px 0;
}

.dev-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-primary);
  transition: var(--transition);
}

.dev-option:hover { background: var(--bg-hover); }

.dev-option input[type=checkbox] {
  accent-color: var(--green-bright);
  width: 15px; height: 15px;
  cursor: pointer;
}

/* ─── Estimativa de Tempo ─────────────────────────────────────── */
.estimativa-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  transition: var(--transition);
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.estimativa-vazia { justify-content: center; }
.estimativa-hint  { color: var(--text-muted); font-size: 0.82rem; font-style: italic; }

.estimativa-card.calculada {
  background: linear-gradient(135deg, #0d2016, #111a14);
  border-color: var(--green-border);
}
.estimativa-valor   { display: flex; align-items: baseline; gap: 4px; }
.estimativa-numero  { font-size: 1.6rem; font-weight: 800; color: var(--green-bright); line-height: 1; }
.estimativa-unidade { font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; }
.estimativa-sep     { color: var(--border-default); font-size: 1.2rem; margin: 0 4px; }

.estimativa-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.estimativa-tag {
  background: rgba(63,185,80,0.1);
  border: 1px solid var(--green-border);
  color: var(--green-bright);
  font-size: 0.68rem; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.estimativa-tag.tag-nao {
  background: rgba(139,148,158,0.08);
  border-color: var(--border-default);
  color: var(--text-muted);
}
.badge-horas {
  background: rgba(63,185,80,0.12);
  color: var(--green-bright);
  border: 1px solid var(--green-border);
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  white-space: nowrap;
}

/* Navegação principal: ver .nav-rail (menu lateral retrátil), acima. */

/* ─── Painéis de módulo (Colaboradores, PDI) ─────────────────── */
/*
 * Ocupa exatamente o espaço entre o header fixo e o footer fixo.
 * overflow-y: auto garante scroll interno sem cobrir o rodapé.
 */
.painel-modulo {
  position: fixed;
  top: var(--header-height);
  bottom: var(--footer-height);
  left: var(--rail-width);
  right: 0;
  transition: left 0.2s ease;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-primary);
  padding: 24px;
  box-sizing: border-box;
  z-index: 10;
}

html.rail-expanded .painel-modulo { left: var(--rail-width-expanded); }

/* ─── Colaboradores — Grid de cards ──────────────────────────── */
.col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}

.col-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--transition);
  min-width: 0;         /* evita overflow do grid */
  overflow: hidden;
}

.col-card:hover { border-color: var(--green-border); }

.col-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.col-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-dim), var(--green-bright));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
}

.col-card-info { flex: 1; min-width: 0; }

.col-card-nome  { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.col-card-cargo { font-size: 0.78rem; color: var(--green-bright); margin-top: 2px; }
.col-card-tel   { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

.col-squad-badge {
  font-size: 0.66rem; font-weight: 700; color: var(--info);
  background: rgba(88,166,255,0.12); border: 1px solid rgba(88,166,255,0.3);
  padding: 1px 7px; border-radius: 20px; vertical-align: middle;
}

.col-score-wrap { text-align: center; }

.col-score {
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  transition: var(--transition);
}

.col-score-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; }

/* Cores de score — Faixas FAC */
.score-elite     { color: #a5d6a7; text-shadow: 0 0 8px rgba(165,214,167,0.6); }
.score-excelente { color: #3fb950; }
.score-muito-bom { color: #56d364; }
.score-bom       { color: #e3b341; }
.score-regular   { color: #f0883e; }
.score-critico   { color: #f85149; }

/* Classificação badges — Faixas FAC */
.classif-elite     { background: rgba(165,214,167,0.2); color: #a5d6a7; border: 1px solid rgba(165,214,167,0.5); font-weight: 700; }
.classif-excelente { background: rgba(63,185,80,0.15);  color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
.classif-muito-bom { background: rgba(86,211,100,0.15); color: #56d364; border: 1px solid rgba(86,211,100,0.3); }
.classif-bom       { background: rgba(227,179,65,0.15); color: #e3b341; border: 1px solid rgba(227,179,65,0.3); }
.classif-regular   { background: rgba(240,136,62,0.15); color: #f0883e; border: 1px solid rgba(240,136,62,0.3); }
.classif-critico   { background: rgba(248,81,73,0.15);  color: #f85149; border: 1px solid rgba(248,81,73,0.3); }

.col-radar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
}

.col-card-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border-muted);
}

/* ─── Modal de Avaliação ──────────────────────────────────────── */
.aval-preview-bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.aval-preview-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; text-align: center;
}

.aval-lbl { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.aval-val { font-size: 1rem; font-weight: 700; color: var(--text-primary); }

.aval-final { border-left: 1px solid var(--border-default); padding-left: 12px; }

.aval-preview-score {
  font-size: 1.4rem; font-weight: 800;
}

.aval-category {
  margin-bottom: 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px;
}

.aval-cat-title {
  font-size: 0.85rem; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-default);
}

.aval-peso { color: var(--green-bright); margin-left: 6px; font-size: 0.78rem; }

.aval-sliders { display: flex; flex-direction: column; gap: 10px; }

.aval-slider-item { display: flex; flex-direction: column; gap: 4px; }

.aval-slider-header {
  display: flex; align-items: center; justify-content: space-between;
}

.aval-slider-label { font-size: 0.82rem; color: var(--text-secondary); }
.aval-slider-peso  { font-size: 0.72rem; color: var(--text-muted); }

.aval-slider-row {
  display: flex; align-items: center; gap: 8px;
}

.aval-slider {
  flex: 1;
  accent-color: var(--green-bright);
  height: 4px;
  cursor: pointer;
}

.aval-nota-min, .aval-nota-max {
  font-size: 0.72rem; color: var(--text-muted); width: 12px; text-align: center;
}

.aval-slider-value {
  font-size: 0.75rem; color: var(--green-bright); font-weight: 600;
  margin-left: 20px;
}

/* ─── Potencial de Crescimento (eixo independente — NineBox) ─────────── */
.aval-potencial-section {
  margin-bottom: 20px;
  background: rgba(88,166,255,0.06);
  border: 1px solid var(--info);
  border-radius: var(--radius-md);
  padding: 14px;
}

.aval-potencial-section .aval-cat-title { border-bottom-color: rgba(88,166,255,0.3); }
.aval-potencial-section .aval-peso { color: var(--info); }

.potencial-botoes { display: flex; gap: 8px; margin-bottom: 10px; }
.potencial-btn {
  flex: 1; padding: 10px 0; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--bg-tertiary);
  font-size: 1rem; font-weight: 700; color: var(--text-secondary); font-family: inherit;
  cursor: pointer; transition: var(--transition);
}
.potencial-btn:hover { border-color: var(--info); color: var(--text-primary); }
.potencial-btn.sel { background: var(--info); border-color: var(--info); color: #fff; }

.potencial-rubrica { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }

/* ─── Cadastro — Token de IA por colaborador (ver ADR-0010) ──────────── */
.col-token-section {
  margin-top: 4px; background: rgba(63,185,80,0.06);
  border: 1px solid var(--green-border); border-radius: var(--radius-md); padding: 12px 14px;
}
.col-token-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 6px; }
@media (max-width: 560px) { .col-token-grid { grid-template-columns: 1fr; } }
.col-token-status {
  font-size: 0.72rem; font-weight: 600; margin-left: 6px; padding: 2px 8px;
  border-radius: 20px; vertical-align: middle;
}
.col-token-status.configurado { color: var(--green-bright); background: rgba(63,185,80,0.14); }
.col-token-status.ausente { color: var(--text-muted); background: rgba(139,148,158,0.12); }

/* ─── Cadastro — Competências Técnicas explícitas (ver ADR-0012) ─────── */
.col-comp-section {
  margin-top: 4px; background: rgba(230,237,243,0.03);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px;
}
.col-comp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 640px) { .col-comp-grid { grid-template-columns: repeat(2, 1fr); } }
.col-comp-item label { display: block; font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 3px; }
.col-comp-item input { text-align: center; }

/* ─── Sugestão do Diário de Feedbacks (unificação FAC ↔ Feedback) ────── */
.sugestao-feedback {
  font-size: 0.68rem; font-style: italic; color: var(--info);
  background: rgba(88,166,255,0.1); padding: 2px 8px; border-radius: 20px;
  margin-left: 20px; margin-top: 4px; display: inline-block;
}

/* ─── Botão Gerar Relatório ──────────────────────────────────── */
.btn-relatorio {
  background: linear-gradient(135deg, #1a3a2e, #1e4d3a);
  color: #69db7c;
  border: 1px solid rgba(105,219,124,0.3);
  transition: var(--transition);
}
.btn-relatorio:hover:not(:disabled) {
  background: linear-gradient(135deg, #1e4d3a, #245c46);
  border-color: rgba(105,219,124,0.6);
  box-shadow: 0 0 12px rgba(105,219,124,0.2);
}

/* ─── Dev picker dinâmico — estilos extras ───────────────────── */
.dev-score-mini {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--green-bright);
  font-weight: 700;
}
.dev-cargo-mini {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ─── Botão Gerar PDI com IA no card ────────────────────────── */
.btn-ia-pdi {
  background: linear-gradient(135deg, #2d1a4e, #3d2360);
  color: #ce93d8;
  border: 1px solid rgba(206,147,216,0.3);
  transition: var(--transition);
}
.btn-ia-pdi:hover:not(:disabled) {
  background: linear-gradient(135deg, #3d2360, #4a2b73);
  border-color: rgba(206,147,216,0.6);
  box-shadow: 0 0 10px rgba(206,147,216,0.15);
}
.btn-ia-pdi:disabled { opacity: 0.35; cursor: not-allowed; }

/* ─── Botão PDI no card do colaborador ──────────────────────── */
.btn-pdi-col {
  background: linear-gradient(135deg, #1a2a3e, #1e3a55);
  color: #79c0ff;
  border: 1px solid rgba(121,192,255,0.3);
  transition: var(--transition);
}
.btn-pdi-col:hover {
  background: linear-gradient(135deg, #1e3a55, #254a6e);
  border-color: rgba(121,192,255,0.6);
  box-shadow: 0 0 10px rgba(121,192,255,0.15);
}

/* ─── Botão CPC no card do colaborador ──────────────────────── */
.btn-cpc-col {
  background: linear-gradient(135deg, #2d1a4e, #3c2464);
  color: #d2a8ff;
  border: 1px solid rgba(210,168,255,0.35);
  transition: var(--transition);
}
.btn-cpc-col:hover {
  background: linear-gradient(135deg, #3b2460, #4b2f79);
  border-color: rgba(210,168,255,0.65);
  box-shadow: 0 0 10px rgba(210,168,255,0.2);
}

.pdi-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0883e;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 99px;
  padding: 0 5px;
  min-width: 16px;
  height: 16px;
  margin-left: 3px;
  vertical-align: middle;
}

/* ─── Toggle de visualização ─────────────────────────────────── */
.view-toggle {
  display: flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-toggle-btn {
  padding: 7px 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition);
}
.view-toggle-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.view-toggle-btn.active { background: var(--bg-hover); color: var(--green-bright); font-weight: 600; }

/* ─── Foto de perfil no card ─────────────────────────────────── */
.col-avatar-foto {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--green-border);
  flex-shrink: 0;
}

.col-lider-badge {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.col-lider-default { color: var(--text-muted); opacity: 0.7; }

/* ─── Área de upload de foto no modal ────────────────────────── */
.col-foto-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 16px;
}

.col-foto-upload-wrap {
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 2px dashed var(--border-default);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition);
  background: var(--bg-tertiary);
  position: relative;
}
.col-foto-upload-wrap:hover {
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.col-foto-preview {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.col-foto-placeholder {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  pointer-events: none;
}
.col-foto-icon  { font-size: 1.6rem; }
.col-foto-hint  { font-size: 0.65rem; color: var(--text-muted); text-align: center; line-height: 1.2; }

/* Visibilidade do placeholder controlada por JS (abrirModalNovoColaborador / abrirModalEditarColaborador) */

/* ─── Logo do Cliente (Ray, 2026-07-17) ──────────────────────── */
/* Retangular (não circular como o avatar de Colaborador) — logos de empresa costumam
   ser wordmarks/retângulos, não caberiam bem num círculo. */
.cli-logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 16px;
}

.cli-logo-upload-wrap {
  width: 180px; height: 96px;
  border-radius: var(--radius-md);
  border: 2px dashed var(--border-default);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition);
  background: var(--bg-tertiary);
  position: relative;
}
.cli-logo-upload-wrap:hover {
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.cli-logo-preview {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
}

.cli-logo-placeholder {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  pointer-events: none;
}
.cli-logo-icon { font-size: 1.6rem; }
.cli-logo-hint { font-size: 0.65rem; color: var(--text-muted); text-align: center; line-height: 1.2; }

.cliente-card-logo {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--bg-tertiary);
  padding: 4px;
  flex-shrink: 0;
}

/* ─── Organograma ────────────────────────────────────────────── */
.org-tree {
  overflow-x: auto;
  overflow-y: visible;
  padding: 24px 12px 40px;
  min-height: 300px;
  width: 100%;
}

.org-root-wrap {
  display: flex;
  justify-content: center;
}

.org-node-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Linha vertical descendo do nó para os filhos */
.org-node-wrap > .org-children::before {
  content: '';
  display: block;
  width: 2px;
  height: 24px;
  background: var(--border-default);
  margin: 0 auto;
}

.org-children {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 0;
  position: relative;
}

/* Linha horizontal conectando filhos (barra superior) */
.org-children > .org-node-wrap::before {
  content: '';
  display: block;
  width: 2px;
  height: 24px;
  background: var(--border-default);
  margin: 0 auto;
}

/* Linha vertical do nó-pai até a barra horizontal */
.org-node-wrap > .org-card + .org-children {
  margin-top: 0;
}

.org-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  min-width: 130px;
  max-width: 170px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.org-card:hover {
  border-color: var(--green-bright);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.org-card-root {
  border-color: var(--green-bright);
  background: linear-gradient(135deg, #0d1f14, var(--bg-card));
  box-shadow: 0 0 20px var(--green-glow);
}

.org-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--green-dim);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700;
  flex-shrink: 0;
}

.org-avatar-foto {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--green-border);
}

.org-nome  { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.org-cargo { font-size: 0.7rem; color: var(--text-muted); }
.org-score { font-size: 1rem; font-weight: 800; }

.org-acoes {
  display: flex; gap: 4px; margin-top: 4px;
}

/* ─── Botão PEI ──────────────────────────────────────────────── */
.btn-pei {
  background: linear-gradient(135deg, #1a237e, #283593);
  color: #90caf9;
  border: 1px solid rgba(144,202,249,0.3);
  transition: var(--transition);
}
.btn-pei:hover:not(:disabled) {
  background: linear-gradient(135deg, #283593, #3949ab);
  color: #bbdefb;
  border-color: rgba(144,202,249,0.6);
  box-shadow: 0 0 12px rgba(144,202,249,0.2);
}
.btn-pei:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Modal PEI — Scores Bar ─────────────────────────────────── */
.pei-header-score {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}
.pei-score-geral { font-size: 2rem; font-weight: 800; line-height: 1; }
.pei-score-label { color: var(--text-muted); font-size: 0.8rem; }
.pei-periodo     { margin-left: auto; color: var(--text-muted); font-size: 0.8rem; }

.pei-pilares { display: flex; flex-direction: column; gap: 6px; }

.pei-pilar-row {
  display: grid;
  grid-template-columns: 160px 1fr 40px;
  align-items: center;
  gap: 10px;
}
.pei-pilar-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; color: var(--text-secondary);
}
.pei-peso { color: var(--text-muted); font-size: 0.7rem; }

.pei-bar-wrap {
  height: 8px; background: var(--bg-tertiary);
  border-radius: 4px; overflow: hidden;
}
.pei-bar-fill {
  height: 100%; border-radius: 4px;
  transition: width 0.6s ease;
}
.pei-bar-fill.score-elite     { background: #a5d6a7; }
.pei-bar-fill.score-excelente { background: #3fb950; }
.pei-bar-fill.score-muito-bom { background: #56d364; }
.pei-bar-fill.score-bom       { background: #e3b341; }
.pei-bar-fill.score-regular   { background: #f0883e; }
.pei-bar-fill.score-critico   { background: #f85149; }

.pei-nota { font-size: 0.78rem; font-weight: 700; text-align: right; }

/* ─── Modal PEI — Conteúdo Markdown ─────────────────────────── */
.pei-markdown { color: var(--text-primary); }

.pei-h1 { font-size: 1.2rem; color: var(--green-bright); margin: 0 0 12px; border-bottom: 1px solid var(--green-border); padding-bottom: 6px; }
.pei-h2 { font-size: 1.05rem; color: #90caf9; margin: 20px 0 8px; }
.pei-h3 { font-size: 0.95rem; color: var(--text-primary); margin: 14px 0 6px; font-weight: 700; }
.pei-h4 { font-size: 0.88rem; color: var(--text-secondary); margin: 10px 0 4px; font-weight: 700; }

.pei-p { margin: 0 0 8px; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; }

.pei-list { margin: 6px 0 10px 16px; padding: 0; list-style: disc; }
.pei-list li { font-size: 0.86rem; color: var(--text-secondary); margin-bottom: 4px; line-height: 1.6; }

.pei-code {
  background: var(--bg-tertiary); color: var(--green-bright);
  padding: 1px 6px; border-radius: 4px; font-family: monospace; font-size: 0.82rem;
}

.pei-hr { border: none; border-top: 1px solid var(--border-default); margin: 16px 0; }
.pei-ok   { font-style: normal; }
.pei-warn { font-style: normal; }

/* Tabelas Markdown (ex.: "| Risco | Impacto | Mitigação |") renderizadas por renderMarkdown() */
.pei-markdown table.md-table {
  width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 0.85rem;
}
.pei-markdown table.md-table th, .pei-markdown table.md-table td {
  border: 1px solid var(--border-default); padding: 6px 10px; text-align: left; vertical-align: top;
}
.pei-markdown table.md-table th {
  background: var(--bg-tertiary); color: var(--text-primary); font-weight: 700;
}
.pei-markdown table.md-table td { color: var(--text-secondary); }

/* ─── Aba 📄 Descrição de Requisitos — descrição lida como Markdown ────────
   A descrição do Projeto e a de cada RF são gravadas em Markdown e renderizadas
   por renderMarkdown() (wrapper .pei-markdown). No cartão do RF a descrição é o
   conteúdo principal (--text-primary, 0.9rem); no resumo do projeto é apoio
   (--text-secondary, 0.85rem). Só tipografia/cores — sem cor fixa, para não
   quebrar tema claro/escuro. */
.dr-md .pei-p,
.dr-md .pei-list li { color: var(--text-primary); font-size: 0.9rem; }
.dr-md .pei-p:last-child { margin-bottom: 0; }
.dr-md .pei-h1, .dr-md .pei-h2 { margin-top: 12px; }
.dr-md .pei-h1:first-child,
.dr-md .pei-h2:first-child,
.dr-md .pei-h3:first-child,
.dr-md .pei-h4:first-child { margin-top: 0; }
.dr-md-projeto .pei-p,
.dr-md-projeto .pei-list li { color: var(--text-secondary); font-size: 0.85rem; }

/* ═══════════════════════════════════════════════════════════════
   ATAs de Reunião
═══════════════════════════════════════════════════════════════ */
.ata-card {
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 16px; margin-bottom: 10px;
  transition: var(--transition);
}
.ata-card:hover { border-color: var(--green-border); }
.ata-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 10px;
}
.ata-card-titulo { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.ata-card-meta   { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; }
.ata-card-preview {
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5;
  background: var(--bg-tertiary); padding: 8px 10px; border-radius: var(--radius-sm);
  margin-bottom: 10px; white-space: pre-wrap; word-break: break-word;
  max-height: 72px; overflow: hidden;
}
.ata-card-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid var(--border-muted);
}
.ata-req-card {
  background: var(--bg-tertiary); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px;
}
.ata-req-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ata-req-titulo { font-size: 0.9rem; color: var(--text-primary); }
.ata-req-desc   { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; }
.badge-novo-req   { background: rgba(63,185,80,0.15);  color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
.badge-alt-req    { background: rgba(227,179,65,0.15); color: #e3b341; border: 1px solid rgba(227,179,65,0.3); }
.badge-cancel-req { background: rgba(248,81,73,0.15);  color: #f85149; border: 1px solid rgba(248,81,73,0.3); }

/* Status de aprovação do conteúdo da ATA (Ray, 2026-07-14) — ver AtaReuniaoService.STATUS_APROVACAO_* */
.badge-ata-aberto   { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.3); }
.badge-ata-aprovada { background: rgba(63,185,80,0.15);  color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }

/* ═══════════════════════════════════════════════════════════════
   Arquivos do Projeto
═══════════════════════════════════════════════════════════════ */
.badge-origem-auto   { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.3); }
.badge-origem-upload { background: rgba(139,148,158,0.15); color: #8b949e; border: 1px solid rgba(139,148,158,0.3); }

/* ═══════════════════════════════════════════════════════════════
   Chat — Assistente de IA
═══════════════════════════════════════════════════════════════ */
#painelChat {
  height: calc(100vh - var(--header-height) - var(--footer-height));
  box-sizing: border-box;
}

.chat-layout {
  display: flex;
  gap: 14px;
  height: 100%;
}

/* ── Coluna lateral: LLM + histórico de conversas ─────────────── */
.chat-sidebar-col {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.chat-llm-selector {
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.chat-llm-selector .form-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.chat-llm-selector .form-control {
  padding: 7px 28px 7px 10px;
  font-size: 0.84rem;
}

/* ── Sidebar de histórico de conversas ────────────────────────── */
.chat-sidebar {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.chat-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text-primary);
}

.chat-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-conversa-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}

.chat-conversa-item:hover { border-color: var(--border-default); }

.chat-conversa-item.active {
  background: var(--green-glow);
  border-color: var(--green-border);
}

.chat-conversa-titulo {
  font-size: 0.82rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.chat-conversa-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ── Área principal ────────────────────────────────────────────── */
.chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chat-tokens-badge {
  font-size: 0.76rem;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  white-space: nowrap;
}

.chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.chat-mensagens {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-linha {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 74%;
}

.chat-linha-usuario {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-linha-assistente {
  align-self: flex-start;
}

.chat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
}

.chat-avatar-iniciais {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--green-dim);
  border-color: var(--green-dim);
}

.chat-bolha {
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.55;
  word-break: break-word;
}

.chat-bolha-usuario {
  background: var(--green-dim);
  color: #ffffff;
  border-bottom-right-radius: 2px;
}

.chat-bolha-assistente {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  border-bottom-left-radius: 2px;
}

.chat-bolha-assistente p:first-child { margin-top: 0; }
.chat-bolha-assistente p:last-child  { margin-bottom: 0; }

.chat-bolha-tokens {
  margin-top: 6px;
  font-size: 0.68rem;
  opacity: 0.65;
}

/* Anexos exibidos dentro de uma bolha (já enviada) */
.chat-anexos-msg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chat-anexo-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.18);
}

.chat-bolha-assistente .chat-anexo-chip {
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.chat-anexo-imagem img {
  max-width: 220px;
  max-height: 160px;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  display: block;
}

.chat-anexo-video,
.chat-anexo-audio {
  margin-top: 8px;
  max-width: 280px;
}

.chat-anexo-video video {
  max-width: 280px;
  max-height: 200px;
  border-radius: var(--radius-sm);
  display: block;
  background: #000;
}

.chat-anexo-audio audio {
  width: 260px;
  display: block;
}

.chat-anexo-video-nome,
.chat-anexo-audio-nome {
  font-size: 0.72rem;
  opacity: 0.75;
  margin-top: 4px;
}

/* Gráficos gerados pela ferramenta de IA "criarGrafico" (Google Charts, tema escuro) */
.chat-graficos-msg {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.chat-grafico-wrap {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 12px 6px;
  width: 320px;
  max-width: 100%;
  box-sizing: border-box;
}

.chat-grafico-titulo {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.chat-grafico-canvas {
  width: 100%;
  height: 220px;
}

.chat-grafico-fallback {
  font-size: 0.76rem;
  color: var(--text-muted);
  padding: 8px 0;
}

/* ─── Dashboard executivo (ferramentas "criarDashboard"/"finalizarDashboard") ── */
.chat-dashboard {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 14px 16px 16px;
  margin-top: 10px;
  box-shadow: var(--shadow-card);
}

.chat-dashboard-header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-muted);
}

.chat-dashboard-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.chat-dashboard-subtitulo {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.chat-dashboard-periodo {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Grade de KPIs — responsiva, sem depender de largura fixa de coluna */
.chat-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.chat-dashboard-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.chat-dashboard-kpi-positivo { border-left-color: var(--green-bright); }
.chat-dashboard-kpi-negativo { border-left-color: var(--danger); }
.chat-dashboard-kpi-atencao  { border-left-color: var(--warning); }
.chat-dashboard-kpi-neutro   { border-left-color: var(--info); }

.chat-dashboard-kpi-nome {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.chat-dashboard-kpi-valor {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.chat-dashboard-kpi-variacao {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 3px;
}

.chat-dashboard-kpi-positivo .chat-dashboard-kpi-variacao { color: var(--green-bright); }
.chat-dashboard-kpi-negativo .chat-dashboard-kpi-variacao { color: var(--danger); }
.chat-dashboard-kpi-atencao  .chat-dashboard-kpi-variacao { color: var(--warning); }

/* Grade de gráficos do dashboard — reaproveita .chat-grafico-wrap, mas em grade responsiva */
.chat-dashboard-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.chat-dashboard-grafico-wrap {
  width: 100%;
}

/* Rodapé analítico — insights automáticos */
.chat-dashboard-insights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-muted);
}

.chat-dashboard-insight {
  background: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.chat-dashboard-insight-positivo     { border-left-color: var(--green-bright); }
.chat-dashboard-insight-atencao      { border-left-color: var(--warning); }
.chat-dashboard-insight-risco        { border-left-color: var(--danger); }
.chat-dashboard-insight-oportunidade { border-left-color: var(--info); }

.chat-dashboard-insight-titulo {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.chat-dashboard-insight-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

@media (max-width: 600px) {
  .chat-dashboard-kpis,
  .chat-dashboard-graficos {
    grid-template-columns: 1fr;
  }
}

/* Chips de anexos pendentes (antes de enviar) */
.chat-anexos-pendentes {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 0;
}

.chat-anexo-chip-pendente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

.chat-anexo-chip-pendente button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0 2px;
  line-height: 1;
}

.chat-anexo-chip-pendente button:hover { color: var(--danger); }

.chat-input-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

/* Campo de mensagem e botão Enviar com a mesma altura — visual mais
   compacto e "aderente" (pedido de Ray: "campo de escrita de mensagens
   deve ficar da mesma altura do botão de envio"). Especificidade
   (.chat-input-bar textarea.chat-input) precisa superar `textarea.form-control`
   (que define min-height:120px) para o override funcionar. */
.chat-input-bar textarea.chat-input {
  flex: 1;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  resize: none;
  font-family: inherit;
  line-height: 1.4;
  padding-top: 9px;
  padding-bottom: 9px;
  overflow-y: auto;
}

.chat-input-bar .btn {
  height: 42px;
}

/* ═══════════════════════════════════════════════════════════════
   Geração de Requisitos com IA — Seção no Modal de Projeto
═══════════════════════════════════════════════════════════════ */

.req-ia-section {
  margin-top: 16px;
  background: linear-gradient(135deg, #0d1f14, var(--bg-tertiary));
  border: 1px solid var(--green-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.req-ia-header {
  display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px;
}
.req-ia-header span { font-weight: 700; font-size: 0.9rem; color: var(--green-bright); }
.req-ia-header small { font-size: 0.75rem; color: var(--text-muted); }

/* Cards de requisito no modal de preview */
.req-ia-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
  transition: var(--transition);
}
.req-ia-card.req-ia-desmarcado {
  opacity: 0.45;
  border-color: var(--border-muted);
}
.req-ia-card-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.req-ia-num  { font-size: 0.72rem; color: var(--text-muted); font-weight: 700; min-width: 42px; }
.req-ia-titulo { font-size: 0.88rem; }
.req-ia-desc { resize: vertical; }
.req-ia-check { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   Config — Prompts de IA + Token Usage
═══════════════════════════════════════════════════════════════ */

/* Cards de prompt */
.prompt-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}
.prompt-card-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 10px;
}
.prompt-nome  { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.prompt-chave { font-size: 0.75rem; color: var(--text-muted); margin: 2px 0 4px; }
.prompt-chave code { background: var(--bg-tertiary); padding: 1px 6px; border-radius: 4px; }
.prompt-desc  { font-size: 0.8rem; color: var(--text-secondary); }
.prompt-preview {
  background: var(--bg-tertiary); border: 1px solid var(--border-muted);
  border-radius: 6px; padding: 10px 12px;
  font-size: 0.75rem; color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
  max-height: 120px; overflow: hidden;
  line-height: 1.5; margin: 8px 0;
}
.prompt-meta { font-size: 0.72rem; color: var(--text-muted); }

/* Token Usage resumo */
.token-resumo-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 6px;
}
.token-resumo-item {
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 12px; text-align: center;
}
.token-val  { display: block; font-size: 1.3rem; font-weight: 800; color: var(--text-primary); }
.token-lbl  { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════
   PDI — Plano de Desenvolvimento Individual
═══════════════════════════════════════════════════════════════ */

/* Dashboard */
.pdi-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
}
.pdi-dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-align: center;
}
.pdi-dash-valor  { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.pdi-dash-label  { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; margin-top: 4px; }

/* Cards PDI */
.pdi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  transition: var(--transition);
}
.pdi-card:hover { border-color: var(--green-border); }
.pdi-card-atrasado { border-color: rgba(248,81,73,0.4); }

.pdi-card-header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pdi-card-titulo { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.pdi-card-sub    { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; }
.pdi-card-meta   { font-size: 0.75rem; color: var(--text-secondary); margin: 6px 0; }
.pdi-card-acoes  { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px;
                   border-top: 1px solid var(--border-muted); margin-top: 8px; }

/* Progress bar PDI */
.pdi-progress-wrap { display: flex; align-items: center; gap: 8px; }
.pdi-progress-bar  {
  flex: 1; height: 8px; background: var(--bg-tertiary);
  border-radius: 4px; overflow: hidden;
}
.pdi-progress-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.pdi-bar-verde     { background: var(--green-bright); }
.pdi-bar-amarelo   { background: var(--warning); }
.pdi-bar-vermelho  { background: var(--danger); }
.pdi-pct           { font-size: 0.78rem; font-weight: 700; min-width: 36px; text-align: right; }

/* Badges de status e prioridade */
.pdi-s-rascunho  { background: rgba(139,148,158,0.15); color: #8b949e; border: 1px solid rgba(139,148,158,0.3); }
.pdi-s-ativo     { background: rgba(63,185,80,0.15);   color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
.pdi-s-acomp     { background: rgba(88,166,255,0.15);  color: #58a6ff; border: 1px solid rgba(88,166,255,0.3); }
.pdi-s-concluido { background: rgba(165,214,167,0.2);  color: #a5d6a7; border: 1px solid rgba(165,214,167,0.4); font-weight:700; }
.pdi-s-cancelado { background: rgba(139,148,158,0.1);  color: #484f58; border: 1px solid rgba(139,148,158,0.2); }
.pdi-s-atrasado  { background: rgba(248,81,73,0.15);   color: #f85149; border: 1px solid rgba(248,81,73,0.3); }

.pdi-p-alta      { background: rgba(248,81,73,0.12);   color: #f85149; border: 1px solid rgba(248,81,73,0.25); }
.pdi-p-media     { background: rgba(227,179,65,0.12);  color: #e3b341; border: 1px solid rgba(227,179,65,0.25); }
.pdi-p-baixa     { background: rgba(63,185,80,0.12);   color: #3fb950; border: 1px solid rgba(63,185,80,0.25); }

/* Detalhe PDI */
.pdi-detalhe-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 16px;
}
.pdi-det-item   { display: flex; flex-direction: column; gap: 2px; }
.pdi-det-label  { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.pdi-det-secao  { margin-bottom: 12px; }
.pdi-det-texto  { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.6; margin-top: 4px; }
.pdi-link       { color: var(--green-bright); font-size: 0.82rem; text-decoration: none; }
.pdi-link:hover { text-decoration: underline; }

/* Ações no detalhe */
.pdi-acao-item {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 8px;
}
.pdi-acao-atrasada { border-color: rgba(248,81,73,0.4); }
.pdi-acao-header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.pdi-acao-tipo   { font-size: 0.75rem; color: var(--text-muted); }
.pdi-acao-desc   { font-size: 0.86rem; color: var(--text-primary); font-weight: 500; margin-bottom: 4px; }
.pdi-acao-meta   { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 8px; }
.pdi-acao-footer { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.pdi-slider-acao { flex: 1; }
.pdi-badge-atraso { font-size: 0.7rem; color: var(--danger); }

/* Badges de status de ação */
.acao-pendente   { background: rgba(139,148,158,0.15); color: #8b949e; border-radius: 4px; padding: 2px 8px; font-size: 0.72rem; }
.acao-andamento  { background: rgba(88,166,255,0.15);  color: #58a6ff; border-radius: 4px; padding: 2px 8px; font-size: 0.72rem; }
.acao-concluida  { background: rgba(63,185,80,0.15);   color: #3fb950; border-radius: 4px; padding: 2px 8px; font-size: 0.72rem; }
.acao-cancelada  { background: rgba(139,148,158,0.1);  color: #484f58; border-radius: 4px; padding: 2px 8px; font-size: 0.72rem; }
.acao-atrasada   { background: rgba(248,81,73,0.15);   color: #f85149; border-radius: 4px; padding: 2px 8px; font-size: 0.72rem; }

/* Evidências */
.pdi-ev-item {
  background: var(--bg-tertiary); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px;
}
.pdi-ev-header { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.pdi-ev-tipo   { font-size: 0.72rem; color: var(--info); background: rgba(88,166,255,0.1);
                 padding: 2px 8px; border-radius: 4px; }

/* Comentários */
.pdi-com-item  {
  border-left: 3px solid var(--border-default);
  padding: 8px 12px; margin-bottom: 8px;
}
.pdi-com-header { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.pdi-com-autor  { font-weight: 700; font-size: 0.84rem; color: var(--text-primary); }
.pdi-com-perfil { font-size: 0.72rem; color: var(--text-muted); background: var(--bg-tertiary);
                  padding: 2px 6px; border-radius: 4px; }
.pdi-com-texto  { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; }
.pdi-add-comentario { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-muted); }

/* Formulário de ação inline */
.pdi-acao-form-item {
  background: var(--bg-tertiary); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px;
}
.pdi-acao-form-header { display: flex; justify-content: space-between; align-items: center;
                        margin-bottom: 10px; }
.pdi-acao-num { font-size: 0.78rem; color: var(--text-muted); font-weight: 700; }

/* ─── Modal Gerar PDI — área de scores ──────────────────────── */
.pdi-ia-scores-wrap {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 8px 0;
}

.pdi-ia-scores-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-muted);
  font-size: 0.82rem; color: var(--text-secondary);
}

.pdi-ia-scores-lista {
  display: flex; flex-direction: column; gap: 5px;
}

.pdi-ia-score-row {
  display: grid;
  grid-template-columns: 180px 1fr 36px;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 4px;
  transition: var(--transition);
}

.pdi-ia-score-pior {
  background: rgba(248,81,73,0.08);
  border: 1px solid rgba(248,81,73,0.25);
  border-radius: 6px;
  padding: 5px 8px;
}

.pdi-ia-score-label {
  font-size: 0.78rem; color: var(--text-secondary);
  display: flex; align-items: center; gap: 5px;
}

.pdi-ia-score-val {
  font-size: 0.82rem; font-weight: 700; text-align: right;
}

.pdi-ia-scores-tip {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border-muted);
  font-size: 0.74rem; color: var(--text-muted);
}

.pdi-ia-sem-aval {
  color: var(--warning); font-size: 0.82rem;
  padding: 8px 4px; line-height: 1.6;
}

/* Preview de sugestão IA */
.pdi-ia-preview {
  background: var(--bg-secondary); border: 1px solid var(--green-border);
  border-radius: var(--radius-md); padding: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   CPC — Comecar, Parar, Continuar
═══════════════════════════════════════════════════════════════ */
.cpc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}
.cpc-card-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cpc-colaborador {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.cpc-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.cpc-bloco {
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.cpc-bloco-titulo {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--green-bright);
  margin-bottom: 5px;
}
.cpc-bloco-texto {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.cpc-campo-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.cpc-campo-cabecalho .form-label {
  margin-bottom: 0;
}
.cpc-ia-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cpc-card-acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid var(--border-muted);
}
.cpc-s-criado {
  background: rgba(139,148,158,0.15);
  color: #8b949e;
  border: 1px solid rgba(139,148,158,0.3);
}
.cpc-s-agendado {
  background: rgba(227,179,65,0.12);
  color: #e3b341;
  border: 1px solid rgba(227,179,65,0.3);
}
.cpc-s-aplicado {
  background: rgba(88,166,255,0.12);
  color: #79c0ff;
  border: 1px solid rgba(88,166,255,0.3);
}
.cpc-s-atingido {
  background: rgba(63,185,80,0.18);
  color: #56d364;
  border: 1px solid rgba(63,185,80,0.35);
}
.cpc-s-reprovado {
  background: rgba(248,81,73,0.15);
  color: #f85149;
  border: 1px solid rgba(248,81,73,0.35);
}
.cpc-exemplo {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--info);
}
.cpc-info-datas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Painel Cultura (embutido no SPA — ver #painelCultura em index.html)
   Migrado de cultura.html (standalone) para abrir dentro da aplicação,
   sem sair do index.html — ver ADR-0008 / Ajuste de 2026-07-13.
   ═══════════════════════════════════════════════════════════════════════ */
.cultura-wrap { max-width: 880px; margin: 0 auto; }

.cultura-hero { text-align: center; padding: 4px 0 28px; }
.cultura-hero h1 { font-size: 1.5rem; color: var(--text-primary); }
.cultura-hero h1 span { color: var(--green-bright); }
.cultura-hero p { color: var(--text-secondary); font-size: 0.92rem; margin-top: 10px; max-width: 620px; margin-left: auto; margin-right: auto; }

.pilares-centrais { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0 8px; }
.pilar-chip {
  background: linear-gradient(135deg, #1a3a2a, var(--green-dim)); border: 1px solid var(--green-border);
  color: var(--green-bright); padding: 8px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
}

.princ-central {
  text-align: center; padding: 22px; margin: 24px 0; background: var(--bg-tertiary);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); font-size: 1.05rem;
  color: var(--text-primary); font-style: italic; line-height: 1.7;
}
.princ-central .fundamentos { margin-top: 12px; font-size: 0.8rem; font-style: normal; color: var(--text-secondary); }

.valor-card { margin-bottom: 14px; }
.valor-card .valor-titulo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.valor-card .num { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-tertiary); border: 1px solid var(--border-default);
                    display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--green-bright); flex-shrink: 0; }
.valor-card .titulo-txt { font-weight: 600; font-size: 1rem; color: var(--text-primary); flex: 1; }
.valor-card .titulo-txt.central { color: var(--green-bright); }
.valor-card .toggle-icone { color: var(--text-secondary); font-size: 0.8rem; transition: transform 0.2s; }
.valor-card.aberto .toggle-icone { transform: rotate(180deg); }
.valor-card .conteudo { display: none; margin-top: 12px; padding-left: 38px; }
.valor-card.aberto .conteudo { display: block; }
.valor-card .descricao { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin-bottom: 10px; }
.valor-card .pratica { list-style: none; }
.valor-card .pratica li { color: var(--text-primary); font-size: 0.87rem; padding: 4px 0 4px 18px; position: relative; }
.valor-card .pratica li::before { content: '›'; position: absolute; left: 0; color: var(--green-bright); font-weight: 700; }

.cultura-manifesto { line-height: 1.9; color: var(--text-primary); font-size: 0.95rem; }
.cultura-manifesto p { margin-bottom: 14px; }
.cultura-manifesto p:last-child { margin-bottom: 0; font-weight: 600; color: var(--green-bright); }

.resumo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.resumo-grid .full-width { grid-column: 1 / -1; }
.resumo-grid .bloco-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 6px; }
.resumo-grid .bloco-texto { color: var(--text-primary); font-size: 0.88rem; line-height: 1.6; }
.valores-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.valores-lista span { background: var(--bg-tertiary); border: 1px solid var(--border-default); color: var(--text-primary);
                       padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; }

/* ═══════════════════════════════════════════════════════════
   Tarefas Relacionadas — DEPENDE / IMPACTA (Ray, 2026-07-14)
═══════════════════════════════════════════════════════════ */

.tarefa-rel-form { display: flex; gap: 8px; align-items: center; margin: 10px 0 12px; flex-wrap: wrap; }
.tarefa-rel-form #trSelectTarefa { flex: 1; min-width: 220px; }
.tarefa-rel-form #trSelectTipo { max-width: 160px; }

.tarefa-rel-lista { display: flex; flex-direction: column; gap: 6px; }

.tarefa-rel-item {
  display: flex; align-items: center; gap: 10px; background: var(--bg-tertiary);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 0.85rem;
}
.tarefa-rel-item .tarefa-rel-codigo { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.tarefa-rel-item .tarefa-rel-nome { color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa-rel-item .btn-remover-rel { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; padding: 2px 6px; }
.tarefa-rel-item .btn-remover-rel:hover { color: var(--danger); }

.badge-rel-depende, .badge-rel-impacta {
  font-size: 0.7rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.badge-rel-depende { background: rgba(227,179,65,0.15); color: #e3b341; border: 1px solid rgba(227,179,65,0.35); }
.badge-rel-impacta { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.35); }

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

/* ═══════════════════════════════════════════════════════════════════════
   Painel Comparativo de Feedbacks (embutido no SPA — #painelComparativo)
   Migrado de feedback-comparativo.html (standalone) — ver ADR-0008.
   ═══════════════════════════════════════════════════════════════════════ */
.comparativo-wrap { max-width: 1180px; margin: 0 auto; }

.comparativo-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .comparativo-layout { grid-template-columns: 1fr; } }

.lista-colab { max-height: 640px; overflow-y: auto; }
.toolbar-colab { display: flex; gap: 8px; margin-bottom: 10px; }
.toolbar-colab .btn { flex: 1; }

.busca-colab { margin-bottom: 10px; }

.item-colab {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
}
.item-colab:hover { background: var(--bg-tertiary); }
.item-colab input { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.item-colab .cor { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.item-colab .nome { flex: 1; font-size: 0.85rem; color: var(--text-primary); }
.item-colab.sem-dados .nome { color: var(--text-muted); font-style: italic; }
.item-colab .indice { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }

.radar-card { min-height: 640px; }
.radar-wrap { display: flex; justify-content: center; padding: 8px 0; position: relative; height: 600px; }
.radar-wrap canvas { max-width: 100%; }

.msg-vazio { text-align: center; color: var(--text-secondary); padding: 60px 16px; }

.legenda-nota { font-size: 0.75rem; color: var(--text-secondary); text-align: center; margin-top: 6px; }

/* Utilitário — usado nos painéis embutidos (Cultura, Comparativo) e no restante da app */
.muted { color: var(--text-secondary); font-size: 0.85rem; }
.pdi-ia-preview-header { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }

/* Tab PDI */
.pdi-tab-panel { animation: fadeIn 0.15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── RF015 — Sino de Notificações ─────────────────────────────── */
@keyframes sinoPulse {
  0%, 100% { transform: rotate(0deg) scale(1); }
  10% { transform: rotate(-15deg) scale(1.1); }
  20% { transform: rotate(15deg) scale(1.1); }
  30% { transform: rotate(-10deg) scale(1.05); }
  40% { transform: rotate(10deg) scale(1.05); }
  50% { transform: rotate(-5deg) scale(1); }
  60% { transform: rotate(5deg) scale(1); }
  70% { transform: rotate(0deg) scale(1); }
}

@keyframes contadorPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes notificacaoPainelIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── RF015 — Indicador de Agente Proativo (Robô) ────────────────── */
@keyframes agentePulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.15) rotate(5deg); opacity: 0.85; }
}

@keyframes agenteBlink {
  0% { opacity: 1; transform: scale(1); }
  15% { opacity: 0.3; transform: scale(1.2); }
  30% { opacity: 1; transform: scale(1); }
  45% { opacity: 0.3; transform: scale(1.2); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

.agente-robo.blink {
  animation: agenteBlink 0.8s ease-in-out;
}

.agente-status-ativo { color: var(--green-bright, #3fb950) !important; }
.agente-status-parado { color: var(--warning, #e3b341) !important; }
.agente-status-erro { color: var(--danger, #f85149) !important; }

.notificacao-sino.pulsando .sino-icone {
  animation: sinoPulse 1.2s ease-in-out infinite;
  transform-origin: top center;
  display: inline-block;
}

.notificacao-sino.pulsando .notificacao-contador {
  animation: contadorPop 1.2s ease-in-out infinite;
}

.notificacao-contador.novo {
  animation: contadorPop 0.3s ease-out;
}

.notificacao-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: var(--transition);
  cursor: pointer;
}
.notificacao-item:hover {
  border-color: var(--green-border);
  background: var(--bg-tertiary);
}
.notificacao-item.nao-visualizada {
  border-left: 3px solid var(--green-bright);
}
.notificacao-item.visualizada {
  opacity: 0.7;
}
.notificacao-item.urgente {
  border-left-color: var(--danger);
}
.notificacao-icone {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-muted);
}
.notificacao-item.urgente .notificacao-icone {
  background: rgba(248, 81, 73, 0.15);
  border-color: var(--danger);
  color: var(--danger);
}
.notificacao-item.atencao .notificacao-icone {
  background: rgba(227, 179, 65, 0.15);
  border-color: var(--warning);
  color: var(--warning);
}
.notificacao-item.resolvido .notificacao-icone {
  background: rgba(63, 185, 80, 0.15);
  border-color: var(--green-bright);
  color: var(--green-bright);
}
.notificacao-conteudo {
  flex: 1;
  min-width: 0;
}
.notificacao-titulo {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notificacao-descricao {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notificacao-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.65rem;
  color: var(--text-muted);
}
.notificacao-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.notificacao-meta .prioridade {
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}
.notificacao-meta .prioridade.vermelho { background: rgba(248, 81, 73, 0.2); color: var(--danger); }
.notificacao-meta .prioridade.amarelo { background: rgba(227, 179, 65, 0.2); color: var(--warning); }
.notificacao-meta .prioridade.verde { background: rgba(63, 185, 80, 0.2); color: var(--green-bright); }
.notificacao-agente {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-style: italic;
}
.notificacao-acoes {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-muted);
}
.notificacao-acoes .btn {
  padding: 4px 10px;
  font-size: 0.7rem;
}

/* ─── Histórico de PEIs no modal ────────────────────────────── */
.pei-hist-item {
  padding: 8px 10px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: var(--transition);
  background: var(--bg-secondary);
}
.pei-hist-item:hover { border-color: var(--green-border); background: var(--bg-card); }
.pei-hist-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 3px;
}

/* ─── Responsividade ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .col-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 900px) {
  .col-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  .painel-modulo {
    padding: 16px;
  }
  .pdi-detalhe-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root { --sidebar-width: 240px; }
  .form-grid      { grid-template-columns: 1fr; }
  .detail-grid    { grid-template-columns: 1fr; }
  .header-subtitle { display: none; }
  .col-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }
  .col-card-actions {
    flex-wrap: wrap;
    gap: 4px;
  }
  .col-card-actions .btn {
    flex: 1;
    min-width: 80px;
    text-align: center;
  }
  .pdi-card-acoes {
    flex-wrap: wrap;
  }
  .aval-preview-bar {
    gap: 6px;
  }
  .aval-preview-item .aval-lbl {
    font-size: 0.62rem;
  }
}

@media (max-width: 600px) {
  .sidebar { display: none; }
  .main-content { padding: 16px; }
  .col-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .painel-modulo {
    padding: 12px;
  }
  .org-tree {
    padding: 12px 4px;
  }
  .org-card {
    min-width: 100px;
    max-width: 140px;
    padding: 8px 10px;
  }
  .view-toggle { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   MÓDULO DE TAREFAS — linhas/cards, tabela, kanban, grafo
═══════════════════════════════════════════════════════════ */

.tarefa-row {
  padding: 10px 12px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.tarefa-row:hover {
  border-color: var(--green-border);
  background: var(--bg-hover);
}
.tarefa-row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tarefa-row-nome { font-weight: 600; color: var(--text-primary); }
.tarefa-row-badges { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.tarefa-row-info {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--text-secondary); margin-top: 6px;
}

/* ─── Tabela de Tarefas/Bugs ─────────────────────────────────── */
.tarefas-tabela { width: 100%; border-collapse: collapse; }
.tarefas-tabela th {
  text-align: left; padding: 8px 10px; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-muted); border-bottom: 1px solid var(--border-default);
}
.tarefas-tabela td {
  padding: 9px 10px; border-bottom: 1px solid var(--border-muted); font-size: 0.85rem;
  color: var(--text-primary); vertical-align: middle;
}
.tarefas-tabela tr:hover td { background: var(--bg-hover); }

.linha-status-tarefa-backlog     { border-left: 3px solid #8b949e; }
.linha-status-tarefa-para_fazer, .linha-status-bug-aberto      { border-left: 3px solid #58a6ff; }
.linha-status-tarefa-fazendo,    .linha-status-bug-em_correcao { border-left: 3px solid #e3b341; }
.linha-status-tarefa-impedimento { border-left: 3px solid #f85149; }
.linha-status-tarefa-feito,      .linha-status-bug-resolvido   { border-left: 3px solid #3fb950; }
.linha-status-tarefa-cancelado,  .linha-status-bug-cancelado   { border-left: 3px solid #f85149; }

/* ─── Aba Tabela: cards agrupados por Projeto (Ray, 2026-07-16) ─────────────── */

.tarefas-grupo-projeto {
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border-muted); border-radius: 10px;
}
.tarefas-grupo-projeto-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 4px; margin-bottom: 10px; font-weight: 600; font-size: 0.88rem;
  color: var(--text-primary); border-bottom: 1px solid var(--border-default);
}
.tarefas-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
}

/* Card base — a cor entra pela borda esquerda + leve tinta de fundo, conforme o
   tipo de tarefa (mesma paleta dos badges .badge-tipotarefa-*, para consistência
   visual com o restante do módulo). */
.tarefa-card {
  background: var(--bg-card); border: 1px solid var(--border-muted); border-left: 4px solid var(--border-muted);
  border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; transition: var(--transition);
  display: flex; flex-direction: column; gap: 6px;
}
.tarefa-card:hover { border-color: var(--green-border); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.tarefa-card-nome { font-weight: 600; font-size: 0.86rem; color: var(--text-primary); }
.tarefa-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.tarefa-card-info { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.76rem; color: var(--text-secondary); }
.tarefa-card-acoes { display: flex; gap: 8px; margin-top: 4px; }
.tarefa-card-acoes .btn { flex: 1; }

.tarefa-card-tipo-tarefa      { border-left-color: #58a6ff; background: linear-gradient(90deg, rgba(88,166,255,0.06), var(--bg-card) 14%); }
.tarefa-card-tipo-suporte     { border-left-color: #8b949e; background: linear-gradient(90deg, rgba(139,148,158,0.06), var(--bg-card) 14%); }
.tarefa-card-tipo-bug         { border-left-color: #f85149; background: linear-gradient(90deg, rgba(248,81,73,0.06), var(--bg-card) 14%); }
.tarefa-card-tipo-outros      { border-left-color: #a78bfa; background: linear-gradient(90deg, rgba(139,92,246,0.06), var(--bg-card) 14%); }
.tarefa-card-tipo-ata         { border-left-color: #e3b341; background: linear-gradient(90deg, rgba(227,179,65,0.06), var(--bg-card) 14%); }
.tarefa-card-tipo-rdm         { border-left-color: #56d364; background: linear-gradient(90deg, rgba(63,185,80,0.06), var(--bg-card) 14%); }
.tarefa-card-tipo-teste       { border-left-color: #ffa198; background: linear-gradient(90deg, rgba(255,123,114,0.06), var(--bg-card) 14%); }
.tarefa-card-tipo-estimativa  { border-left-color: #58a6ff; background: linear-gradient(90deg, rgba(88,166,255,0.06), var(--bg-card) 14%); }
.tarefa-card-tipo-regra_de_negocio { border-left-color: #e3b341; background: linear-gradient(90deg, rgba(210,153,34,0.06), var(--bg-card) 14%); }
.tarefa-card-tipo-desvio_de_projeto { border-left-color: #ea580c; background: linear-gradient(90deg, rgba(234,88,12,0.06), var(--bg-card) 14%); }

/* ─── Aba Tabela: multiseleção de status ───────────────────────────────────── */
.tt-multiselect { position: relative; }
.tt-multiselect-btn { text-align: left; cursor: pointer; }
.tt-multiselect-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 240px;
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); padding: 8px; flex-direction: column; gap: 2px;
}
.tt-multiselect-acoes { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.tt-multiselect-item {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px;
  font-size: 0.82rem; color: var(--text-primary); cursor: pointer;
}
.tt-multiselect-item:hover { background: var(--bg-hover); }

/* ─── Kanban ─────────────────────────────────────────────────── */
.kanban-board {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start;
}
.kanban-coluna {
  flex: 0 0 260px; background: var(--bg-secondary); border: 1px solid var(--border-muted);
  border-radius: var(--radius-md); display: flex; flex-direction: column; max-height: 74vh;
  border-top: 3px solid var(--border-default);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* ─── Drag-and-drop: destaque de "raia recebendo o card" (Ray, 2026-07-14) ──────
   Ativado via onDragOverKanban/onDragLeaveKanban em tarefas.js enquanto o
   usuário arrasta um card sobre a coluna — dá feedback visual claro de onde
   o card vai cair antes de soltar o mouse. */
.kanban-coluna-dragover {
  background: rgba(63, 185, 80, 0.08);
  border-color: rgba(63, 185, 80, 0.55);
  box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.35) inset, 0 4px 18px rgba(63, 185, 80, 0.22);
  transform: translateY(-2px);
}
.kanban-coluna-dragover .kanban-coluna-header {
  border-bottom-color: rgba(63, 185, 80, 0.35);
}
.kanban-coluna-dragover .kanban-coluna-corpo {
  outline: 2px dashed rgba(63, 185, 80, 0.45);
  outline-offset: -6px;
  border-radius: var(--radius-sm);
  animation: kanbanDragPulse 1.1s ease-in-out infinite;
}
.kanban-coluna-dragover .kanban-coluna-vazia {
  color: #3fb950; font-weight: 600;
}
.kanban-coluna-dragover .kanban-coluna-vazia::before {
  content: "⬇ ";
}

@keyframes kanbanDragPulse {
  0%, 100% { outline-color: rgba(63, 185, 80, 0.25); }
  50%      { outline-color: rgba(63, 185, 80, 0.6); }
}

/* Card de origem enquanto está sendo arrastado — reforça qual card está em movimento. */
.kanban-card-arrastando {
  opacity: 0.35;
  transform: scale(0.96);
}
.kanban-col-backlog     { border-top-color: #8b949e; }
.kanban-col-parafazer   { border-top-color: #58a6ff; }
.kanban-col-fazendo     { border-top-color: #e3b341; }
.kanban-col-impedimento { border-top-color: #f85149; }
.kanban-col-feito       { border-top-color: #3fb950; }
.kanban-col-aberto      { border-top-color: #58a6ff; }
.kanban-col-correcao    { border-top-color: #e3b341; }
.kanban-col-resolvido   { border-top-color: #56d364; }
.kanban-col-cancelado   { border-top-color: #f85149; }

.kanban-coluna-header {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
  font-weight: 600; font-size: 0.85rem; color: var(--text-primary);
  border-bottom: 1px solid var(--border-muted);
}
.kanban-coluna-contagem {
  background: var(--bg-tertiary); color: var(--text-secondary); border-radius: 10px;
  padding: 1px 8px; font-size: 0.72rem;
}
.kanban-coluna-corpo { padding: 8px; overflow-y: auto; flex: 1; min-height: 80px; }
.kanban-coluna-vazia { text-align: center; color: var(--text-muted); font-size: 0.78rem; padding: 20px 8px; }

.kanban-card {
  background: var(--bg-card); border: 1px solid var(--border-muted); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 8px; cursor: grab; transition: var(--transition);
}
.kanban-card:hover { border-color: var(--green-border); }
.kanban-card:active { cursor: grabbing; }
.kanban-card-nome { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); margin-bottom: 4px; }
.kanban-card-sub { font-size: 0.72rem; margin-bottom: 4px; }
.kanban-card-pessoa { font-size: 0.72rem; color: var(--text-secondary); }

/* Linha do topo do card (nome + botão sutil de abrir/editar) — Ray, 2026-07-17:
   "Colocar no card da tarefa um botão sutil para abrir/editar a tarefa". Antes o
   Kanban não tinha NENHUM jeito de abrir um card (só arrastar entre colunas). */
.kanban-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.kanban-card-topo .kanban-card-nome {
  margin-bottom: 4px;
  flex: 1;
  transition: color 0.15s ease;
}
.kanban-card-topo .kanban-card-nome:hover {
  color: var(--color-primary, #6366f1);
  text-decoration: underline;
}
.kanban-card-editar {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-muted, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.75;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  transition: var(--transition);
}
.kanban-card:hover .kanban-card-editar { opacity: 0.9; }
.kanban-card-editar:hover {
  opacity: 1 !important;
  color: var(--text-primary);
  border-color: var(--border-default);
  background: var(--bg-tertiary);
  transform: scale(1.1);
}

/* ─── Grafo (vis-network) ────────────────────────────────────── */
.grafo-container {
  width: 100%; height: 70vh; border: 1px solid var(--border-muted); border-radius: var(--radius-md);
  background: var(--bg-secondary); overflow: hidden;
}
.grafo-container .empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/*
 * Aba Gantt da tela de Tarefas (Frappe Gantt) — Ray, 2026-07-17: "tem que estar em uma
 * escala por dia" (trocado do Google Charts Gantt, que não permite forçar essa escala —
 * ver comentário em chat.js#garantirGoogleCharts). #ganttContainer é o NOSSO wrapper
 * (classe própria "gantt-outer", para não colidir); a biblioteca cria por dentro dele um
 * <div class="gantt-container"> — esse sim é quem rola horizontalmente e mostra o grid.
 */
#ganttContainer.gantt-outer { width: 100%; min-height: 200px; }
#ganttContainer.gantt-outer .empty-state { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/*
 * Ray, 2026-07-18: "a régua de dia tem que estar visível no topo também" — o cabeçalho
 * (grid-header) da lib já é position:sticky;top:0 por padrão, mas isso só funciona se
 * ESTE elemento tiver um scroll próprio. Com container_height:'auto' (nosso caso), a
 * variável --gv-grid-height nunca é definida pela lib e a altura fica automática — ou
 * seja, sem limite, então quem rola é a PÁGINA, não este container, e o sticky não
 * gruda em nada. Damos altura máxima + overflow-y para o sticky passar a funcionar.
 */
/*
 * Layout Dividido do Gantt (Ray, 2026-08-09) — Coluna de Tarefas Fixa + Linha do Tempo Rolável
 */
#ganttContainer .gantt-split-wrapper {
  display: flex;
  width: 100%;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

#ganttContainer .gantt-sidebar-fixed {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  flex-shrink: 0;
  border-right: 2px solid var(--border-muted);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

#ganttContainer .gantt-sidebar-header {
  height: 60px;
  min-height: 60px;
  background: var(--g-header-background, #161b22);
  border-bottom: 1px solid var(--g-row-border-color, #21262d);
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  box-sizing: border-box;
}

#ganttContainer .gantt-sidebar-body {
  flex: 1;
  overflow-y: hidden;
  overflow-x: hidden;
}

#ganttContainer .gantt-sidebar-row {
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--g-row-border-color, #21262d);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease;
}

#ganttContainer .gantt-sidebar-row:hover {
  background: rgba(255, 255, 255, 0.08);
}

#ganttContainer .gantt-sidebar-row.selected {
  background: rgba(0, 122, 255, 0.22) !important;
  border-left: 4px solid var(--primary, #0056b3) !important;
  font-weight: 600;
}

.gantt .bar-wrapper.selected-bar .bar {
  stroke: #ffffff !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 0 6px rgba(0, 122, 255, 0.9));
}

#ganttContainer .gantt-sidebar-row .gantt-task-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 500;
}

#ganttContainer .gantt-timeline-scroll {
  flex: 1;
  overflow-x: scroll;
  overflow-y: scroll;
  max-height: 65vh;
  overscroll-behavior: contain;
}

#ganttContainer .gantt-timeline-scroll .gantt-container {
  border: none !important;
  border-radius: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Barra de rolagem sempre visível no container da timeline */
#ganttContainer .gantt-timeline-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
#ganttContainer .gantt-timeline-scroll::-webkit-scrollbar-track { background: var(--bg-primary); }
#ganttContainer .gantt-timeline-scroll::-webkit-scrollbar-thumb { background: var(--border-muted); border-radius: 6px; border: 2px solid var(--bg-primary); }
#ganttContainer .gantt-timeline-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
#ganttContainer .gantt-timeline-scroll::-webkit-scrollbar-corner { background: var(--bg-primary); }
#ganttContainer .gantt-timeline-scroll { scrollbar-width: auto; scrollbar-color: var(--border-muted) var(--bg-primary); }

#ganttContainer .gantt-container {
  border: 1px solid var(--border-muted); border-radius: var(--radius-md); background: var(--bg-secondary);
  max-height: 65vh;
  overflow: scroll;
  overscroll-behavior: contain;
}
/* Barra de rolagem sempre visível, no tema escuro (Chrome/Edge/Safari). */
#ganttContainer .gantt-container::-webkit-scrollbar { width: 12px; height: 12px; }
#ganttContainer .gantt-container::-webkit-scrollbar-track { background: var(--bg-primary); }
#ganttContainer .gantt-container::-webkit-scrollbar-thumb { background: var(--border-muted); border-radius: 6px; border: 2px solid var(--bg-primary); }
#ganttContainer .gantt-container::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
#ganttContainer .gantt-container::-webkit-scrollbar-corner { background: var(--bg-primary); }
/* Firefox */
#ganttContainer .gantt-container { scrollbar-width: auto; scrollbar-color: var(--border-muted) var(--bg-primary); }

/* Ray, 2026-07-18: "o nome da tarefa tem que estar sempre visível" — o <svg> da lib clipa
 * por padrão qualquer rótulo que extrapole sua largura calculada (ex.: task no fim da
 * janela de datas visível). overflow:visible desliga esse corte; a lib já reposiciona
 * o texto para fora da barra sozinha quando não cabe dentro (ver column_width em
 * tarefas.js#carregarGantt para dar mais espaço antes disso ser necessário). */
#ganttContainer svg.gantt { overflow: visible; }

/* Tema escuro via CSS custom properties expostas pelo frappe-gantt.css. */
#ganttContainer {
  --g-arrow-color: #8b949e;
  --g-bar-color: #5b8def;
  --g-bar-border: #5b8def;
  --g-tick-color-thick: #30363d;
  --g-tick-color: #21262d;
  --g-actions-background: #21262d;
  --g-border-color: #21262d;
  --g-text-muted: #8b949e;
  --g-text-light: #e6edf3;
  --g-text-dark: #e6edf3;
  --g-progress-color: rgba(255,255,255,.32);
  --g-handle-color: #e6edf3;
  --g-weekend-label-color: #21262d;
  --g-header-background: #161b22;
  --g-row-color: #0d1117;
  --g-row-border-color: #21262d;
  /* Ray, 2026-07-18: "diferenciar o final de semana" — mais claro que a linha normal (row-color
     acima é quase preto #0d1117); 7% de branco já fica bem perceptível sem gritar. */
  --g-weekend-highlight-color: rgba(255,255,255,.07);
  /* Ray, 2026-07-18: "linha tracejada vermelha no dia corrente" — mesma cor do --danger do app;
     o traço em si (dashed) é feito abaixo em .current-highlight, que por padrão é preenchimento
     sólido, não borda. */
  --g-today-highlight: #f85149;
  --g-popup-actions: #21262d;
}
/* Dois fundos brancos fixos no CSS da lib (não usam variável) — sobrescritos à parte. */
#ganttContainer .popup-wrapper { background: var(--bg-tertiary) !important; box-shadow: 0 10px 24px -3px rgba(0,0,0,.6) !important; }
#ganttContainer .current-upper { background: var(--g-header-background) !important; }

/* Linha do dia corrente — a lib desenha como <div> com background sólido de 1px; trocamos
 * para uma borda tracejada (o background continua sendo a bolinha/rótulo no header, que
 * já ficou vermelho via --g-today-highlight acima). */
#ganttContainer .current-highlight {
  width: 0 !important; background: transparent !important;
  border-left: 2px dashed var(--g-today-highlight);
}

/* Cor da barra por Tipo (Tarefa/Bug) e esmaecida quando Cancelado — via substring no
 * custom_class de cada task (ver tarefas.js#carregarGantt; custom_class é um único
 * token sem espaço, limitação do classList.add() interno da biblioteca). */
.gantt .bar-wrapper[class*="gantt-bug-"] .bar { fill: #e0615f; stroke: #e0615f; }
.gantt .bar-wrapper[class*="gantt-tarefa-"] .bar { fill: #5b8def; stroke: #5b8def; }
.gantt .bar-wrapper[class*="-cancelado"] .bar { fill: #6e7681; stroke: #6e7681; opacity: .55; }
/* Contorno tracejado nas barras com data calculada (ver ganttNotaEstimativa em index.html). */
.gantt .bar-wrapper[class*="-est"] .bar { stroke-width: 1.5; stroke-dasharray: 4,3; }
.gantt .bar-label { fill: #e6edf3; }

.gantt-nota-estimativa {
  font-size: 12.5px; color: var(--text-secondary); background: var(--bg-tertiary);
  border: 1px dashed var(--border-muted); border-radius: var(--radius-md);
  padding: 8px 12px; margin: 0 0 12px 0;
}
.gantt-tooltip { font-size: 12.5px; line-height: 1.5; padding: 2px 4px; color: var(--text-primary); }

/* Tooltip rico (hover) dos nós do Grafo — vis-network injeta o HTML de `title` dentro de .vis-tooltip. */
.vis-tooltip {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-muted) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  padding: 10px 12px !important;
  max-width: 320px;
  font-family: inherit !important;
  font-size: 0.78rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}
.grafo-tooltip-cabecalho { margin-bottom: 6px; }
.grafo-tooltip-cabecalho strong { color: var(--text-primary); font-weight: 700; font-size: 0.86rem; }
.grafo-tooltip-descricao { color: var(--text-secondary); line-height: 1.5; white-space: normal; word-break: break-word; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-muted); }
.grafo-tooltip-linha { line-height: 1.5; white-space: normal; word-break: break-word; }
.grafo-tooltip-linha strong { color: var(--text-secondary); font-weight: 600; margin-right: 4px; }

/* ═══════════════════════════════════════════════════════════
   Popup NÃO MODAL — Transcrição de Reunião ao Vivo (ATA)
   Ray, 2026-07-14 — sem backdrop, arrastável na tela, permite
   continuar navegando na aplicação enquanto grava.
═══════════════════════════════════════════════════════════ */
.transcricao-popup {
  position: fixed; right: 24px; bottom: 24px; width: 420px; max-width: calc(100vw - 32px);
  max-height: 78vh; background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); z-index: 9999;
  display: flex; flex-direction: column; overflow: hidden;
}
.transcricao-popup-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-muted);
  cursor: move;
}
.transcricao-popup-titulo {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.transcricao-popup-titulo strong {
  font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.transcricao-popup-titulo span {
  font-size: 0.72rem; color: var(--text-muted);
}
.transcricao-popup-fechar {
  background: transparent; border: none; color: var(--text-secondary); font-size: 1.1rem;
  cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: var(--radius-sm);
}
.transcricao-popup-fechar:hover { background: var(--bg-hover); color: var(--text-primary); }

.transcricao-popup-body {
  padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1;
}

.transcricao-aviso {
  font-size: 0.78rem; color: var(--text-secondary); background: var(--bg-secondary);
  border: 1px solid var(--border-muted); border-radius: var(--radius-sm); padding: 8px 10px;
}
.transcricao-aviso.aviso-erro { color: #f85149; border-color: #f8514966; background: #f8514912; }

.transcricao-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.transcricao-status {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600;
  padding: 3px 10px; border-radius: 12px; color: var(--text-secondary); background: var(--bg-secondary);
  border: 1px solid var(--border-muted);
}
.transcricao-status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}
.transcricao-status-gravando { color: #f85149; border-color: #f8514966; background: #f8514912; }
.transcricao-status-gravando::before { animation: pulseGravando 1.2s infinite; }
.transcricao-status-pausado  { color: #e3b341; border-color: #e3b34166; background: #e3b34112; }
.transcricao-status-parado   { color: #8b949e; }

@keyframes pulseGravando {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.transcricao-cronometro {
  font-variant-numeric: tabular-nums; font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
}

.transcricao-texto {
  min-height: 160px; max-height: 320px; overflow-y: auto; padding: 10px 12px;
  background: var(--bg-secondary); border: 1px solid var(--border-muted); border-radius: var(--radius-sm);
  font-size: 0.85rem; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap;
}
.transcricao-placeholder { color: var(--text-muted); font-style: italic; }
.transcricao-interim { color: var(--text-muted); font-style: italic; }

.transcricao-controles { display: flex; gap: 8px; flex-wrap: wrap; }
.transcricao-controles .btn { flex: 1; min-width: 100px; }

.transcricao-finalizacao {
  display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-muted);
}
.transcricao-finalizacao label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted);
}
.transcricao-finalizacao input, .transcricao-finalizacao select {
  width: 100%; padding: 7px 9px; background: var(--bg-secondary); border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.85rem;
}

@media (max-width: 600px) {
  .transcricao-popup { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════
   Lembretes — anotações pessoais rápidas (Ray, 2026-07-14)
═══════════════════════════════════════════════════════════ */

.lembrete-lista { display: flex; flex-direction: column; gap: 18px; }

/* ─── Agrupamento por Responsável (Ray, 2026-07-14) ─────────────────────────── */
.lembrete-grupo { display: flex; flex-direction: column; gap: 10px; }

.lembrete-grupo-header {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 6px 4px; border-bottom: 1px solid var(--border-default);
  font-weight: 700; font-size: 0.85rem; color: var(--text-primary);
}

/* Agrupa nome + contagem à esquerda, deixando o botão "💬 Cobrar todos" (quando
   existir) isolado à direita via justify-content:space-between do header (Ray,
   2026-07-15: cobrança agrupada por responsável). */
.lembrete-grupo-titulo { display: flex; align-items: center; gap: 8px; }

.lembrete-grupo-contagem {
  background: var(--bg-tertiary); color: var(--text-secondary); border-radius: 10px;
  padding: 1px 9px; font-size: 0.72rem; font-weight: 600;
}

/* Avatar do Responsável no cabeçalho do grupo (Ray, 2026-07-16: "usar a FOTO do
   usuário no agrupamento") — foto real quando o Colaborador tem fotoPerfil
   cadastrada, senão iniciais; "Sem responsável" mantém o ícone genérico. */
.lembrete-grupo-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
}
.lembrete-grupo-avatar-foto { object-fit: cover; border: 1px solid var(--green-border); }
.lembrete-grupo-avatar-iniciais {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--green-dim), var(--green-bright));
  font-size: 0.68rem; font-weight: 800; color: #fff;
}
.lembrete-grupo-avatar-icone { font-size: 0.85rem; flex-shrink: 0; }

.lembrete-grupo-corpo { display: flex; flex-direction: column; gap: 10px; }

/* Cabeçalho do grupo — gauge de Idade Média (mini) + botão "Cobrar todos", ambos
   ancorados à direita do header (Ray, 2026-07-15: "usar o gráfico de Idade Média
   para cada linha de card"), independente da largura de cada um. */
.lembrete-grupo-header-direita { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.lembrete-grupo-gauge { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lembrete-gauge-svg-mini { width: 46px; height: auto; flex-shrink: 0; }
.lembrete-grupo-gauge-label {
  font-size: 0.68rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}

.lembrete-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 14px 16px; transition: var(--transition);
}
.lembrete-card:hover { border-color: var(--border-hover, var(--green-border)); }

.lembrete-card-fechado { opacity: 0.6; }
.lembrete-card-fechado .lembrete-assunto { text-decoration: line-through; }

.lembrete-corpo { flex: 1; min-width: 0; cursor: pointer; }

.lembrete-assunto { font-weight: 700; font-size: 0.92rem; color: var(--text-primary); }

.lembrete-descricao {
  font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.lembrete-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.lembrete-chip {
  font-size: 0.72rem; color: var(--text-secondary); background: var(--bg-tertiary);
  padding: 2px 8px; border-radius: var(--radius-sm); white-space: nowrap;
}

.lembrete-acoes { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.lembrete-acoes .btn { white-space: nowrap; }

/* Dot circular clicável — muda de cor conforme o status (ciclo ao clicar) */
.lembrete-semaforo {
  width: 16px; height: 16px; min-width: 16px; border-radius: 50%; border: none;
  cursor: pointer; margin-top: 3px; padding: 0; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lembrete-semaforo:hover { transform: scale(1.15); }
.lembrete-semaforo-verde    { background: #3fb950; box-shadow: 0 0 0 3px rgba(63,185,80,0.15); }
.lembrete-semaforo-amarelo  { background: #e3b341; box-shadow: 0 0 0 3px rgba(227,179,65,0.15); }
.lembrete-semaforo-vermelho { background: #f85149; box-shadow: 0 0 0 3px rgba(248,81,73,0.15); }

/* Seletor de prioridade nos formulários (novo/editar) — mesmos dots, maiores, com anel ao selecionar */
.lembrete-semaforo-picker { display: flex; gap: 10px; align-items: center; padding-top: 6px; }
.lembrete-semaforo-picker .lembrete-semaforo { width: 22px; height: 22px; min-width: 22px; margin-top: 0; }
.lembrete-semaforo-picker .lembrete-semaforo.active {
  box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px currentColor;
}
.lembrete-semaforo-picker .lembrete-semaforo-verde.active    { color: #3fb950; }
.lembrete-semaforo-picker .lembrete-semaforo-amarelo.active  { color: #e3b341; }
.lembrete-semaforo-picker .lembrete-semaforo-vermelho.active { color: #f85149; }

/* Dashboard — 4 pizzas + 1 gauge + 1 barras, todos na mesma linha (Ray, 2026-07-14:
   "preciso que todos os gráficos fiquem na mesma linha") — 6 cards ao todo, por isso
   6 colunas (antes eram 5, sobrando um card para a linha de baixo).
   Ray, 2026-07-16: cards menores, com altura FIXA e idêntica entre si (antes o
   gauge/card com título de 2 linhas "esticava" mais que os demais dentro da
   mesma linha do grid) e grade fluida (auto-fit) para reflow suave entre os
   breakpoints, não só nos 3 saltos fixos de antes. */
.lembrete-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  align-items: stretch;
}
/* Larga o bastante para as 6 caberem lado a lado — mantém "mesma linha" em telas grandes. */
@media (min-width: 1100px) { .lembrete-dashboard { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 480px)  { .lembrete-dashboard { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 340px)  { .lembrete-dashboard { grid-template-columns: 1fr; } }

.lembrete-chart-card {
  height: 168px;
  padding: 10px 12px;
  margin-bottom: 0; /* o espaçamento entre cards vem do gap do grid, não da margem padrão de .card */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0; /* impede que o <canvas> (300px intrínseco) force o item do grid a crescer além
                   da coluna e "empurre" o último card para fora da área visível — ver .lembrete-chart-wrap */
}
.lembrete-chart-card .card-title {
  font-size: 0.72rem;
  line-height: 1.25em;
  margin-bottom: 6px;
  min-height: 2.5em;
  max-height: 2.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 0 0 auto;
}
/* min-width:0 é o que efetivamente evita o overflow: sem ele, o item flex herda o
   tamanho mínimo do conteúdo (o <canvas> do Chart.js, 300px por padrão antes de
   ser redimensionado via JS), estourando a largura da coluna do grid. */
.lembrete-chart-wrap { position: relative; height: auto; flex: 1 1 auto; min-height: 0; min-width: 0; }
.lembrete-chart-wrap canvas { max-width: 100%; }

.lembrete-gauge-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; padding-top: 0;
}
.lembrete-gauge-svg { width: 100%; max-width: 130px; }
.lembrete-gauge-valor { font-size: 1.4rem; font-weight: 700; fill: var(--text-primary); }
.lembrete-gauge-label { font-size: 0.68rem; fill: var(--text-muted); }
.lembrete-gauge-legenda {
  display: flex; gap: 10px; margin-top: 6px; font-size: 0.68rem; color: var(--text-muted);
}
.lembrete-gauge-legenda span { display: flex; align-items: center; gap: 4px; }
.lembrete-gauge-legenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Dashboard executivo da tela de Projetos — "Quantidade de projetos por"
   Dono/Responsável/Tipo/Status/Entrega (Ray, 2026-07-15). Mesmo padrão visual
   do dashboard de Lembretes, 5 colunas (5 pizzas).
   Ray, 2026-07-16: mesmo ajuste de tamanho aplicado ao dashboard de Lembretes —
   cards menores, altura fixa e idêntica entre si, grade fluida (auto-fit). */
/* Dashboard de Projetos — 5 cards (Dono/Responsável/Tipo/Status/Entrega). Colunas
   FIXAS por breakpoint (nunca auto-fit): com auto-fit, a última linha incompleta
   (ex.: 2 cards sobrando de um grid de 3 colunas) tinha as colunas vazias
   colapsadas e o 1fr redistribuía a largura só entre os cards restantes — eles
   ficavam maiores que os da linha de cima, quebrando "mesmo tamanho" (Ray,
   2026-07-16). Com repeat(N, 1fr) fixo, todo card tem sempre a mesma largura,
   estejam a linha completa ou não. Altura também reduzida (era 168px) para os
   cards ficarem mais compactos ("menores"), mesmo padrão de compactação já
   usado no dashboard de Lembretes. */
/* Base em 6 colunas (Ray, 2026-07-17: "os gráficos tem que todos ficarem na mesma
   linha mesmo tamanho") — o dashboard tem 6 gráficos (Dono/Responsável/Tipo/Status/
   Cliente/Entrega, desde que "Por Cliente" foi adicionado); o grid ficou parado em
   repeat(5, 1fr) e o 6º card sempre quebrava pra uma segunda linha sozinho. */
.projetos-dashboard {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 0;
  align-items: stretch;
  flex-shrink: 0;
}
@media (max-width: 1300px) { .projetos-dashboard { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .projetos-dashboard { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px)  { .projetos-dashboard { grid-template-columns: 1fr; } }

.projetos-chart-card {
  height: 130px;
  padding: 8px 10px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0; /* mesmo motivo do .lembrete-chart-card: sem isso o <canvas> (300px intrínseco do
                   Chart.js antes do JS redimensionar) força o item do grid a estourar a coluna e o
                   último card fica escondido pelo overflow-x:hidden do .painel-modulo. */
}
.projetos-chart-card .card-title {
  font-size: 0.68rem;
  line-height: 1.2em;
  margin-bottom: 4px;
  min-height: 2.2em;
  max-height: 2.2em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 0 0 auto;
}
.projetos-chart-wrap { position: relative; height: auto; flex: 1 1 auto; min-height: 0; min-width: 0; }
.projetos-chart-wrap canvas { max-width: 100%; }

/* ─── Abas da Tela de Catálogo de Projetos (Dashboard / Projetos) ─── */
.projetos-catalogo-tabs {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.projetos-catalogo-tabs .tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.projetos-catalogo-tabs .tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.projetos-catalogo-tabs .tab-btn.active {
  color: var(--green-bright);
  border-bottom-color: var(--green-bright);
  background: rgba(63, 185, 80, 0.08);
}

.projetos-aba-painel {
  width: 100%;
}

.projetos-dashboard-completo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 4px 4px 20px 2px;
}
@media (max-width: 1100px) {
  .projetos-dashboard-completo { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .projetos-dashboard-completo { grid-template-columns: 1fr; }
}

.projetos-dashboard-completo .projetos-chart-card {
  height: 250px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.projetos-dashboard-completo .projetos-chart-card:hover {
  border-color: var(--green-border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.projetos-dashboard-completo .projetos-chart-card .card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  min-height: auto;
  max-height: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.projetos-dashboard-completo .projetos-chart-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* Criador do Lembrete — campo somente leitura no popup "🔔 Editar Lembrete"
   (Ray, 2026-10-25: "Colocar o nome do criador do Lembrete"). */
.lembrete-criado-por {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Histórico de comentários — modal de edição do Lembrete (Ray, 2026-07-14) */
.lembrete-comentarios-lista { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.lembrete-comentario-item {
  background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 0.8rem; color: var(--text-secondary);
}
.lembrete-comentario-item .lembrete-comentario-meta {
  display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px;
  font-size: 0.7rem; color: var(--text-muted); font-weight: 600;
}
.lembrete-comentario-item .lembrete-comentario-texto { color: var(--text-primary); line-height: 1.4; }

/* Histórico de versões da descrição — modal de detalhes da Funcionalidade
   (Ray, 2026-07-15: "versionamento por substituição"). Mesmo padrão visual do
   histórico de comentários do Lembrete, acima. */
.func-historico-lista { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.func-historico-item {
  background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 0.8rem; color: var(--text-secondary);
}
.func-historico-item .func-historico-meta {
  display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px;
  font-size: 0.7rem; color: var(--text-muted); font-weight: 600;
}
.func-historico-item .func-historico-texto { color: var(--text-primary); line-height: 1.4; white-space: pre-wrap; }

/* Rodapé Fixo / Sticky na tela de RF (Novo Requisito / Editar Requisito) */
.form-actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 100;
  background: var(--bg-card, #161b22);
  padding: 14px 20px;
  border-top: 1px solid var(--border-default, #30363d);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  border-radius: 0 0 var(--radius-lg, 8px) var(--radius-lg, 8px);
  margin-top: 16px;
}

/* ── Módulo GitLab ────────────────────────────────────────────── */
.dev-card-gitlab {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dev-card-gitlab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* ─── Transição de Fases do Projeto ──────────────────────────── */
.transicao-fases-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

.transicao-fase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.transicao-fase-rotulo {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.transicao-seta {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--green-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

/* ─── Timeline Histórico de Passagens de Fase ─────────────────── */
.timeline-historico-status {
  margin-top: 10px;
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.historico-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-card);
  border-left: 3px solid var(--green-bright);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}

.historico-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.historico-item-fases {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.historico-item-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.historico-item-justificativa {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: 2px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-xs);
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

/* Card em modo somente leitura no Kanban (Ray, 2026-09-01) */
.kanban-card.kanban-card-readonly {
  cursor: default !important;
  opacity: 0.92;
  border-left: 3px solid #f59e0b;
}

.kanban-card.kanban-card-readonly:hover {
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ─── Grid de 03 Gráficos de Pizza na Mesma Linha (GitLab) ───── */
.grid-tres-pizzas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .grid-tres-pizzas {
    grid-template-columns: 1fr;
  }
}

.markdown-body-gitlab h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 8px;
}

.markdown-body-gitlab h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 12px;
  margin-bottom: 6px;
}

.markdown-body-gitlab ul {
  padding-left: 20px;
  margin: 6px 0;
}

.markdown-body-gitlab li {
  margin-bottom: 4px;
}

.markdown-body-gitlab p {
  margin: 6px 0;
}

.markdown-body-gitlab blockquote {
  margin: 10px 0 0 0;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-left: 3px solid var(--primary);
  border-radius: 0 4px 4px 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   MATRIZ PEDAGÓGICA DE MATÉRIAS (GITLAB / LMS)
   ═══════════════════════════════════════════════════════════ */
.container-pedagogico-dev {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.header-pedagogico-dev {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-default);
}

.grid-materias-pedagogico {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}

.card-materia-estudo {
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-materia-dispensada {
  background: rgba(16, 185, 129, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.box-ementa-conteudo {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.45;
  margin-top: 4px;
}

/* ─── Recurso de Voto com Emojis (Notas e Comentários) ───────── */
.emoji-voto-group {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-emoji-voto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default, #30363d);
  background: var(--bg-secondary, #161b22);
  color: var(--text-secondary, #8b949e);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn-emoji-voto .emoji-voto-icon {
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.btn-emoji-voto:hover {
  transform: translateY(-2px);
  border-color: var(--text-secondary, #8b949e);
  color: var(--text-primary, #e6edf3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-emoji-voto:hover .emoji-voto-icon {
  transform: scale(1.18);
}

/* Estado Ativo / Selecionado - Sorrindo */
.btn-emoji-voto#btnVotoSorrindo.active {
  background: rgba(63, 185, 80, 0.16);
  border-color: #3fb950;
  color: #3fb950;
  box-shadow: 0 0 12px rgba(63, 185, 80, 0.3), inset 0 0 4px rgba(63, 185, 80, 0.2);
  transform: translateY(-1px);
}

/* Estado Ativo / Selecionado - Normal */
.btn-emoji-voto#btnVotoNormal.active {
  background: rgba(227, 179, 65, 0.16);
  border-color: #e3b341;
  color: #e3b341;
  box-shadow: 0 0 12px rgba(227, 179, 65, 0.3), inset 0 0 4px rgba(227, 179, 65, 0.2);
  transform: translateY(-1px);
}

/* Estado Ativo / Selecionado - Triste */
.btn-emoji-voto#btnVotoTriste.active {
  background: rgba(248, 81, 73, 0.16);
  border-color: #f85149;
  color: #f85149;
  box-shadow: 0 0 12px rgba(248, 81, 73, 0.3), inset 0 0 4px rgba(248, 81, 73, 0.2);
  transform: translateY(-1px);
}

/* Estado Ativo / Selecionado - Probono (Reconhecimento Especial / Coroa) */
.btn-emoji-voto#btnVotoProbono.active {
  background: rgba(245, 158, 11, 0.18);
  border-color: #f59e0b;
  color: #d97706;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35), inset 0 0 4px rgba(245, 158, 11, 0.2);
  transform: translateY(-1px);
}

/* Badges de Voto no Grid */
.badge-voto-sorrindo {
  background: rgba(63, 185, 80, 0.15) !important;
  color: #3fb950 !important;
  border: 1px solid rgba(63, 185, 80, 0.35) !important;
}

.badge-voto-normal {
  background: rgba(227, 179, 65, 0.15) !important;
  color: #e3b341 !important;
  border: 1px solid rgba(227, 179, 65, 0.35) !important;
}

.badge-voto-triste {
  background: rgba(248, 81, 73, 0.15) !important;
  color: #f85149 !important;
  border: 1px solid rgba(248, 81, 73, 0.35) !important;
}

.badge-voto-probono {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

[data-theme="dark"] .badge-voto-probono,
[data-theme="dark"] .btn-emoji-voto#btnVotoProbono.active {
  color: #fbbf24 !important;
}

/* ─── Gostômetro (Métricas de Sentimento Ponderadas) ─────────── */
.gostometro-badge-sutil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  margin-left: 6px;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.gostometro-badge-sutil:hover {
  transform: scale(1.3);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.gostometro-resumo-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-tertiary, #21262d);
  border: 1px solid var(--border-default, #30363d);
  border-radius: 12px;
  font-size: 0.76rem;
  cursor: help;
  user-select: none;
  transition: all 0.2s ease;
}

.gostometro-resumo-card:hover {
  border-color: var(--accent, #58a6ff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gostometro-resumo-card .gostometro-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.gostometro-resumo-card .gostometro-score {
  font-weight: 700;
  color: var(--text-primary, #e6edf3);
}

.gostometro-resumo-card .gostometro-qtd {
  font-size: 0.7rem;
  color: var(--text-secondary, #8b949e);
}

/* ─── NPS de Projetos (Métricas, Gráfico de Teia e Badges) ─── */
.badge-nps-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.badge-nps-status.status-excelente {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.4);
}
.badge-nps-status.status-muito-bom {
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.4);
}
.badge-nps-status.status-neutro {
  background: rgba(227, 179, 65, 0.15);
  color: #e3b341;
  border: 1px solid rgba(227, 179, 65, 0.4);
}
.badge-nps-status.status-critico {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.4);
}
.badge-nps-status.status-sem-dados {
  background: rgba(139, 148, 158, 0.15);
  color: #8b949e;
  border: 1px solid rgba(139, 148, 158, 0.4);
}

.nps-progress-bar-container {
  height: 8px;
  background: var(--bg-tertiary, #21262d);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  margin-top: 4px;
}
.nps-progress-bar-fill {
  height: 100%;
  transition: width 0.4s ease;
}

/* ============================================================
   MÓDULO GOSTÔMETRO DOS DESENVOLVEDORES (Cards, Gauge, KPIs)
   ============================================================ */
.gostometro-header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.gostometro-header-sub {
  font-size: 0.88rem;
  color: var(--text-secondary, #8b949e);
  margin-top: 4px;
}

/* ─── Dashboard de Métricas da Equipe ───────────────────────── */
.gostometro-metricas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.gostometro-kpi-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-card, #1c2128);
  border: 1px solid var(--border-default, #30363d);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-card, 0 4px 20px rgba(0,0,0,0.3));
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.gostometro-kpi-card:hover {
  border-color: rgba(63, 185, 80, 0.4);
  transform: translateY(-2px);
}

.gostometro-kpi-icone {
  font-size: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-tertiary, #21262d);
}

.gostometro-kpi-info {
  flex: 1;
  min-width: 0;
}

.gostometro-kpi-valor {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-primary, #e6edf3);
  line-height: 1.2;
}

.gostometro-kpi-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #8b949e);
  margin-top: 2px;
}

.gostometro-kpi-sub {
  font-size: 0.72rem;
  color: var(--text-muted, #484f58);
  margin-top: 3px;
}

.gostometro-distr-pills {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.gostometro-pill-sorrindo,
.gostometro-pill-normal,
.gostometro-pill-triste,
.gostometro-pill-probono {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}

.gostometro-pill-sorrindo {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.35);
}

.gostometro-pill-normal {
  background: rgba(227, 179, 65, 0.15);
  color: #e3b341;
  border: 1px solid rgba(227, 179, 65, 0.35);
}

.gostometro-pill-triste {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.35);
}

.gostometro-pill-probono {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

/* ─── Barra de Filtros ───────────────────────────────────────── */
.gostometro-filtros-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  background: var(--bg-card, #1c2128);
  border: 1px solid var(--border-default, #30363d);
  border-radius: var(--radius-md, 10px);
  margin-bottom: 22px;
}

.gostometro-filtro-busca {
  flex: 1;
  min-width: 220px;
}

.gostometro-filtro-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary, #8b949e);
}

.gostometro-filtro-item label {
  font-weight: 500;
  white-space: nowrap;
}

.gostometro-filtro-item select {
  font-size: 0.8rem;
  padding: 5px 10px;
}

.gostometro-total-tag {
  font-size: 0.8rem;
  color: var(--text-muted, #484f58);
  font-weight: 500;
  white-space: nowrap;
}

/* ─── Grid de Cards dos Desenvolvedores ──────────────────────── */
.gostometro-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 20px;
}

.gostometro-loading-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 70px 20px;
  color: var(--text-secondary, #8b949e);
}

/* ─── Card Individual do Desenvolvedor ───────────────────────── */
.gostometro-card {
  background: var(--bg-card, #1c2128);
  border: 1px solid var(--border-default, #30363d);
  border-radius: var(--radius-md, 12px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card, 0 4px 18px rgba(0,0,0,0.3));
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.gostometro-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
}

/* Acentos de borda por status */
.gostometro-card.gostometro-status-sorrindo {
  border-left: 4px solid #3fb950;
}
.gostometro-card.gostometro-status-sorrindo:hover {
  border-color: rgba(63, 185, 80, 0.45);
  border-left-color: #3fb950;
}

.gostometro-card.gostometro-status-normal {
  border-left: 4px solid #e3b341;
}
.gostometro-card.gostometro-status-normal:hover {
  border-color: rgba(227, 179, 65, 0.45);
  border-left-color: #e3b341;
}

.gostometro-card.gostometro-status-triste {
  border-left: 4px solid #f85149;
}
.gostometro-card.gostometro-status-triste:hover {
  border-color: rgba(248, 81, 73, 0.45);
  border-left-color: #f85149;
}

.gostometro-card.gostometro-status-sem_votos {
  border-left: 4px solid #484f58;
}

/* ─── Header do Card ─────────────────────────────────────────── */
.gostometro-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.gostometro-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.gostometro-dev-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border-default, #30363d);
}

.gostometro-avatar-img {
  object-fit: cover;
}

.gostometro-avatar-placeholder {
  background: var(--bg-tertiary, #21262d);
  color: var(--text-primary, #e6edf3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
}

.gostometro-sentimento-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 0.95rem;
  background: var(--bg-primary, #0d1117);
  border-radius: 50%;
  line-height: 1;
  padding: 2px;
  border: 1px solid var(--border-default, #30363d);
}

.gostometro-card-user-info {
  flex: 1;
  min-width: 0;
}

.gostometro-dev-nome {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary, #e6edf3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gostometro-dev-cargo {
  font-size: 0.78rem;
  color: var(--text-secondary, #8b949e);
  margin-top: 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.gostometro-dev-tel {
  font-size: 0.72rem;
  color: var(--text-muted, #484f58);
  margin-top: 2px;
}

/* ─── Gauge e Mostrador ──────────────────────────────────────── */
.gostometro-card-gauge-body {
  padding: 8px 0 12px 0;
  display: flex;
  justify-content: center;
}

.gostometro-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 220px;
}

.gostometro-gauge-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.gostometro-gauge-scale {
  font-size: 0.65rem;
  fill: var(--text-muted, #484f58);
  font-weight: 700;
}

.gostometro-gauge-center-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -12px;
}

.gostometro-gauge-valor {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.gostometro-gauge-label-sentimento {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #8b949e);
  margin-top: 2px;
}

.gostometro-gauge-votos-sub {
  font-size: 0.7rem;
  color: var(--text-muted, #484f58);
  margin-top: 2px;
}

/* ─── Detalhes e Votos Breakdown ─────────────────────────────── */
.gostometro-card-detalhes {
  border-top: 1px solid var(--border-muted, #21262d);
  padding-top: 12px;
  margin-top: 6px;
}

.gostometro-votos-breakdown {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.gostometro-voto-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 6px;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.76rem;
  background: var(--bg-tertiary, #21262d);
  border: 1px solid var(--border-default, #30363d);
}

.gostometro-voto-item.voto-sorrindo {
  border-color: rgba(63, 185, 80, 0.25);
}
.gostometro-voto-item.voto-sorrindo .voto-count {
  color: #3fb950;
  font-weight: 700;
}

.gostometro-voto-item.voto-normal {
  border-color: rgba(227, 179, 65, 0.25);
}
.gostometro-voto-item.voto-normal .voto-count {
  color: #e3b341;
  font-weight: 700;
}

.gostometro-voto-item.voto-triste {
  border-color: rgba(248, 81, 73, 0.25);
}
.gostometro-voto-item.voto-triste .voto-count {
  color: #f85149;
  font-weight: 700;
}

.gostometro-voto-item.voto-probono {
  border-color: rgba(245, 158, 11, 0.3);
}
.gostometro-voto-item.voto-probono .voto-count {
  color: #d97706;
  font-weight: 700;
}

.gostometro-voto-item .voto-desc {
  font-size: 0.65rem;
  color: var(--text-muted, #484f58);
}

.gostometro-card-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gostometro-ultimo-voto {
  font-size: 0.68rem;
  color: var(--text-muted, #484f58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gostometro-btn-notas {
  font-size: 0.74rem;
  padding: 4px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Módulo de Bugs — Grid e Seleção de Linhas
   ═══════════════════════════════════════════════════════════════ */
.bug-grid-row {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.bug-grid-row:hover {
  background: var(--bg-tertiary, #21262d) !important;
}
.bug-grid-row.selected {
  background: rgba(88, 166, 255, 0.18) !important;
  outline: 1px solid var(--primary, #58a6ff);
}
.bug-grid-row.selected td {
  color: var(--text-primary, #c9d1d9);
}




/* ─── Seletor múltiplo de Produtos Wrapper ───────────────────── */
.produto-picker {
  position: relative;
}

.produto-picker-tags {
  min-height: 40px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  transition: var(--transition);
}

.produto-picker-tags:hover,
.produto-picker-tags:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.produto-placeholder {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.produto-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.produto-tag-remove {
  cursor: pointer;
  font-size: 0.75rem;
  color: #38bdf8;
  line-height: 1;
  padding: 0 2px;
  border-radius: 50%;
  transition: var(--transition);
}

.produto-tag-remove:hover {
  background: rgba(56, 189, 248, 0.3);
}

.produto-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  z-index: 10050;
  padding: 6px 0;
}

.produto-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-primary);
  transition: var(--transition);
}

.produto-option:hover {
  background: var(--bg-hover);
}

.produto-option input[type=checkbox] {
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.produto-badge-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: #38bdf8;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 4px;
  margin-top: 3px;
  white-space: nowrap;
}


/* ─── Visão de Projetos por Responsável ─────────────────────── */
.projetos-responsavel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  align-items: start;
  padding-bottom: 20px;
}

@media (max-width: 760px) {
  .projetos-responsavel {
    grid-template-columns: 1fr;
  }
}

.resp-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.resp-card:hover {
  border-color: var(--border-muted);
}

.resp-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 2px solid var(--primary);
}

.resp-avatar-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 2px solid var(--primary);
}

.resp-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resp-avatar-placeholder {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}

.resp-card-info {
  flex: 1;
  min-width: 0;
}

.resp-card-nome {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resp-card-cargo {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.resp-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.15);
  border: 1px solid rgba(88, 166, 255, 0.3);
  color: #58a6ff;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.resp-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  max-height: 650px;
  overflow-y: auto;
}

.resp-projeto-item {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resp-projeto-item:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.resp-projeto-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.resp-projeto-nome-wrap {
  flex: 1;
  min-width: 0;
}

.resp-projeto-codigo {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.resp-projeto-nome {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 2px;
}

.resp-projeto-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.resp-projeto-meta b {
  color: var(--text-secondary);
}

.resp-projeto-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid var(--border-muted);
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Componentes & Estilos Padrão — Módulo de Talentos e Forms
   ═══════════════════════════════════════════════════════════════ */

/* Alias form-input -> form-control para compatibilidade total */
/* ─── Visão de Projetos por Produtos ────────────────────────── */
.projetos-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  align-items: start;
  padding-bottom: 20px;
}

@media (max-width: 760px) {
  .projetos-produtos {
    grid-template-columns: 1fr;
  }
}

.prod-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.prod-card:hover {
  border-color: var(--border-muted);
}

.prod-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 2px solid #8b5cf6;
}

.prod-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.15);
  border: 2px solid #8b5cf6;
  font-size: 1.3rem;
}

.prod-card-info {
  flex: 1;
  min-width: 0;
}

.prod-card-nome {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-card-tipo {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.prod-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #a78bfa;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.prod-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  max-height: 650px;
  overflow-y: auto;
}

.form-input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 9px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: var(--transition);
  width: 100%;
  outline: none;
}
.form-input:focus {
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px var(--green-glow);
}
.form-input::placeholder { color: var(--text-muted); }

textarea.form-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}

select.form-input {
  cursor: pointer;
  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='%238b949e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* Tabelas de Dados (Data Table) */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-tertiary);
}

.data-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.data-table th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-muted);
  vertical-align: middle;
  color: var(--text-primary);
}

.data-table tr:hover td { background: var(--bg-hover); }
.data-table tr:last-child td { border-bottom: none; }

/* Botões adicionais do Design System */
.btn-xs {
  padding: 3px 8px;
  font-size: 0.75rem;
}

.btn-link {
  background: none;
  border: none;
  color: var(--green-bright);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-link:hover {
  background: var(--green-glow);
  text-decoration: underline;
}

.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--green-border);
  color: var(--green-bright);
}
.btn-outline-primary:hover:not(:disabled) {
  background: var(--green-glow);
  border-color: var(--green-bright);
}

.btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}
.btn-outline-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-success {
  background: var(--green-dim);
  border-color: var(--green-dim);
  color: #fff;
}
.btn-success:hover:not(:disabled) {
  background: var(--green-bright);
  border-color: var(--green-bright);
  box-shadow: var(--shadow-glow);
}

/* Badges Genéricos Padrão */
.badge-primary   { background: var(--green-glow); color: var(--green-bright); border: 1px solid var(--green-border); }
.badge-secondary { background: rgba(139, 148, 158, 0.15); color: #8b949e; border: 1px solid rgba(139, 148, 158, 0.25); }
.badge-success   { background: rgba(63, 185, 80, 0.15); color: #3fb950; border: 1px solid rgba(63, 185, 80, 0.3); }
.badge-warning   { background: rgba(227, 179, 65, 0.15); color: #e3b341; border: 1px solid rgba(227, 179, 65, 0.3); }
.badge-danger    { background: rgba(248, 81, 73, 0.15); color: #f85149; border: 1px solid rgba(248, 81, 73, 0.3); }
.badge-info      { background: rgba(88, 166, 255, 0.15); color: #58a6ff; border: 1px solid rgba(88, 166, 255, 0.3); }

/* Alerts Globais */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.alert-info {
  background: rgba(88, 166, 255, 0.1);
  border: 1px solid rgba(88, 166, 255, 0.3);
  color: var(--text-primary);
}
.alert-success {
  background: rgba(63, 185, 80, 0.1);
  border: 1px solid rgba(63, 185, 80, 0.3);
  color: var(--text-primary);
}
.alert-warning {
  background: rgba(227, 179, 65, 0.1);
  border: 1px solid rgba(227, 179, 65, 0.3);
  color: var(--text-primary);
}
.alert-danger {
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.3);
  color: var(--danger);
}

/* ==========================================================================
   MÓDULO DE REGRAS DE NEGÓCIO (PROJETOSPEC v1.1)
   ========================================================================== */

.badge-rn-codigo {
  font-family: 'JetBrains Mono', monospace, Consolas;
  background: rgba(46, 160, 67, 0.15);
  color: var(--green-bright, #3fb950);
  border: 1px solid var(--green-border, #238636);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.badge-rn-categoria {
  background: rgba(139, 148, 158, 0.12);
  color: var(--text-secondary, #8b949e);
  border: 1px solid rgba(139, 148, 158, 0.2);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 500;
}

/* Badges de Status da Versão */
.badge-rn-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: inline-block;
}
.badge-rn-aprovada   { background: rgba(46, 160, 67, 0.2); color: #3fb950; border: 1px solid rgba(46, 160, 67, 0.4); }
.badge-rn-revisao    { background: rgba(56, 139, 253, 0.2); color: #58a6ff; border: 1px solid rgba(56, 139, 253, 0.4); }
.badge-rn-rascunho   { background: rgba(210, 153, 34, 0.2); color: #d29922; border: 1px solid rgba(210, 153, 34, 0.4); }
.badge-rn-rejeitada  { background: rgba(248, 81, 73, 0.2); color: #f85149; border: 1px solid rgba(248, 81, 73, 0.4); }
.badge-rn-substituida{ background: rgba(110, 118, 129, 0.2); color: #8b949e; border: 1px solid rgba(110, 118, 129, 0.3); }

/* Badges de Severidade */
.badge-rn-sev {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}
.badge-sev-critica { background: rgba(248, 81, 73, 0.25); color: #ff7b72; border: 1px solid #f85149; font-weight: 800; }
.badge-sev-alta    { background: rgba(240, 136, 62, 0.2); color: #ffa657; border: 1px solid #d96d27; }
.badge-sev-media   { background: rgba(227, 179, 65, 0.15); color: #e3b341; border: 1px solid #9e6a03; }
.badge-sev-baixa   { background: rgba(56, 139, 253, 0.15); color: #79c0ff; border: 1px solid #1f6feb; }

/* Proveniência e Tags */
.badge-rn-ia {
  background: linear-gradient(135deg, rgba(163, 113, 247, 0.25), rgba(88, 166, 255, 0.25));
  color: #d2a8ff;
  border: 1px solid rgba(163, 113, 247, 0.4);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-rn-manual {
  background: rgba(139, 148, 158, 0.15);
  color: #8b949e;
  border: 1px solid rgba(139, 148, 158, 0.25);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.75rem;
}
.badge-rn-tag-atual {
  background: rgba(46, 160, 67, 0.15);
  color: #3fb950;
  border: 1px solid rgba(46, 160, 67, 0.3);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: bold;
}

.rn-tag-req {
  display: inline-block;
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.3);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.75rem;
  margin: 1px;
}
.rn-tag-pill {
  display: inline-block;
  background: var(--bg-tertiary, #161b22);
  color: var(--text-muted, #8b949e);
  border: 1px solid var(--border-default, #30363d);
  padding: 1px 6px;
  border-radius: 12px;
  font-size: 0.72rem;
}

.rn-row-inativo {
  opacity: 0.55;
  filter: grayscale(40%);
}

/* Detalhamento RFC 2119 */
.rn-grid-rfc2119 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  background: var(--bg-tertiary, #161b22);
  padding: 12px;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--border-default, #30363d);
}
.rn-bloco-rfc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rn-label-rfc {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary, #8b949e);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rn-texto-rfc {
  font-size: 0.85rem;
  color: var(--text-primary, #e6edf3);
  line-height: 1.45;
  white-space: pre-wrap;
}

/* ─── GitLab Diff Viewer & File Selection ─────────────────────── */
.linha-arquivo-gitlab {
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.linha-arquivo-gitlab:hover {
  background-color: rgba(56, 139, 253, 0.08) !important;
}

.linha-arquivo-gitlab.selecionada {
  background-color: rgba(56, 139, 253, 0.18) !important;
  box-shadow: inset 3px 0 0 #388bfd;
}

.btn-diff-gitlab:not(:disabled) {
  animation: pulse-diff-btn 1.8s infinite;
}

@keyframes pulse-diff-btn {
  0% { box-shadow: 0 0 0 0 rgba(56, 139, 253, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(56, 139, 253, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 139, 253, 0); }
}

/* Side-by-Side Split Diff */
.diff-split-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-default, #30363d);
  border-radius: 6px;
  overflow: hidden;
  background: #0d1117;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 20px;
}

.diff-split-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  font-weight: 700;
  font-size: 11px;
}

.diff-split-header-col {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.diff-split-header-col.antes {
  border-right: 1px solid #30363d;
  color: #f85149;
  background: rgba(248, 81, 73, 0.08);
}

.diff-split-header-col.depois {
  color: #3fb950;
  background: rgba(63, 185, 80, 0.08);
}

.diff-hunk-bar {
  background: #1f2937;
  color: #8b949e;
  padding: 4px 12px;
  font-size: 11px;
  border-top: 1px solid #30363d;
  border-bottom: 1px solid #30363d;
  font-style: italic;
}

.diff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(48, 54, 61, 0.35);
}

.diff-cell {
  display: flex;
  align-items: flex-start;
  min-height: 20px;
  overflow-x: auto;
}

.diff-cell.left {
  border-right: 1px solid #30363d;
}

.diff-num {
  width: 44px;
  min-width: 44px;
  padding: 0 6px;
  text-align: right;
  color: #6e7681;
  user-select: none;
  font-size: 11px;
  border-right: 1px solid rgba(48, 54, 61, 0.4);
  background: rgba(22, 27, 34, 0.6);
}

.diff-sign {
  width: 18px;
  min-width: 18px;
  text-align: center;
  user-select: none;
  font-weight: 700;
}

.diff-content {
  flex: 1;
  padding: 0 8px;
  white-space: pre-wrap;
  word-break: break-all;
  color: #e6edf3;
}

/* Linha Removida (O que era) */
.diff-del {
  background-color: rgba(248, 81, 73, 0.15);
}
.diff-del .diff-num {
  background-color: rgba(248, 81, 73, 0.25);
  color: #ff7b72;
}
.diff-del .diff-sign {
  color: #f85149;
}
.diff-del .diff-content {
  color: #ffdcd7;
}

/* Linha Adicionada (O que é) */
.diff-add {
  background-color: rgba(63, 185, 80, 0.15);
}
.diff-add .diff-num {
  background-color: rgba(63, 185, 80, 0.25);
  color: #7ee787;
}
.diff-add .diff-sign {
  color: #3fb950;
}
.diff-add .diff-content {
  color: #aff5b4;
}

/* Espaço vazio / inalterado */
.diff-empty {
  background-color: rgba(13, 17, 23, 0.8);
  opacity: 0.4;
}

/* Unified Diff */
.diff-unified-container {
  border: 1px solid var(--border-default, #30363d);
  border-radius: 6px;
  overflow: hidden;
  background: #0d1117;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 20px;
}

.diff-unified-row {
  display: flex;
  border-bottom: 1px solid rgba(48, 54, 61, 0.25);
}

.diff-unified-nums {
  display: flex;
  background: rgba(22, 27, 34, 0.6);
  user-select: none;
  border-right: 1px solid rgba(48, 54, 61, 0.4);
}

.diff-unified-nums span {
  width: 40px;
  min-width: 40px;
  text-align: right;
  padding: 0 4px;
  color: #6e7681;
  font-size: 11px;
}

/* ── 📦 Versões do Software (WVS 1.0) ─────────────────────────── */
.vs-atual-card {
  padding: 14px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}
.vs-atual-nome {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}
.vs-atual-sub {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  align-items: center;
}
.vs-atual-info {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.vs-sim-titulo {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
  margin-bottom: 8px;
}
.vs-sim-cab {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.vs-sim-componentes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.vs-comp {
  flex: 1;
  min-width: 76px;
  text-align: center;
  padding: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 6px;
}
.vs-comp-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.vs-comp-num {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.vs-comp-seta {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1;
}
.vs-comp-novo {
  color: var(--primary);
}
.vs-comp-reiniciado {
  border-color: rgba(227, 179, 65, 0.5);
}
.vs-sim-regra {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.vs-sim-compativel {
  margin-top: 8px;
  font-size: 0.82rem;
  color: #3fb950;
  font-weight: 600;
}
.vs-sim-incompativel {
  margin-top: 8px;
  font-size: 0.82rem;
  color: #f85149;
  font-weight: 600;
}




/* ============================================================
   Logs de Acesso — mapa livre + localização por acesso
   Ray, 2026-10-25: mapa (Leaflet/OpenStreetMap) no topo do painel,
   plota o acesso selecionado na tabela. Ver ADR-0043.
   ============================================================ */
.logs-mapa-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}

.logs-mapa-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.logs-mapa-titulo {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.logs-mapa-resumo {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: right;
  flex: 1 1 320px;
  min-width: 0;
}

.logs-mapa-resumo-coords {
  font-family: 'JetBrains Mono', Consolas, monospace;
  color: var(--text-accent);
}

/* z-index:0 isola os controles internos do Leaflet (até 1000) do resto da página */
.logs-mapa {
  position: relative;
  z-index: 0;
  height: 340px;
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-secondary);
}

.logs-mapa-carregando,
.logs-mapa-indisponivel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.logs-mapa-legenda {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.logs-mapa-legenda > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.logs-mapa-ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(88, 166, 255, 0.35);
  border: 1px solid var(--info);
  display: inline-block;
}

.logs-mapa-ponto-selecionado {
  background: rgba(63, 185, 80, 0.55);
  border-color: var(--green-bright);
}

.logs-mapa-contagem { margin-left: auto; }

/* Leaflet sobre tema escuro */
.leaflet-container {
  background: var(--bg-secondary);
  font-family: inherit;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}
.leaflet-popup-content { margin: 10px 12px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-secondary); }
.leaflet-control-attribution {
  background: rgba(13, 17, 23, 0.75) !important;
  color: var(--text-secondary) !important;
  font-size: 0.68rem;
}
.leaflet-control-attribution a { color: var(--info) !important; }
.leaflet-bar a {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-bottom-color: var(--border-default);
}
.leaflet-bar a:hover { background: var(--bg-hover); }

/* Filtro "somente com localização" */
.logs-acesso-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.logs-acesso-check input { accent-color: var(--green-bright); cursor: pointer; }

/* Tabela de acessos */
.logs-acesso-tabela tbody tr { cursor: pointer; }
.logs-acesso-linha.selecionado td {
  background: var(--green-glow);
  border-bottom-color: var(--green-border);
}
.logs-acesso-linha.selecionado td:first-child {
  box-shadow: inset 3px 0 0 var(--green-bright);
}
.logs-acesso-coords {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.logs-acesso-acoes { white-space: nowrap; text-align: right; }
.logs-acesso-pendente {
  color: var(--warning);
  font-size: 0.78rem;
  font-style: italic;
}
.logs-acesso-fonte {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  vertical-align: middle;
}

@media (max-width: 720px) {
  .logs-mapa { height: 260px; }
  .logs-mapa-resumo { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MÓDULO: SESSÕES DO OPENCODE (js/opencode.js)
   Escopo prefixado .oc-* — nenhuma regra global é alterada.
   ══════════════════════════════════════════════════════════════════════════ */

.oc-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.oc-titulo {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.oc-subtitulo {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.oc-acoes {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Faixa de aviso (desconectado / erro) */
.oc-aviso {
  display: none;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(227, 179, 65, 0.45);
  background: rgba(227, 179, 65, 0.10);
  color: var(--warning);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* KPIs da aba Resumo */
.oc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.oc-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.oc-kpi-run  { border-left: 3px solid var(--info); }
.oc-kpi-ok   { border-left: 3px solid var(--green-bright); }
.oc-kpi-erro { border-left: 3px solid var(--danger); }

.oc-kpi-rotulo {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.oc-kpi-valor {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 2px 0;
}

.oc-kpi-nota {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Card do gráfico */
.oc-card-grafico {
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}

.oc-card-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-default);
}

.oc-card-titulo {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.oc-card-nota {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.oc-grafico {
  height: 320px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oc-vazio {
  display: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px;
  max-width: 420px;
}

.oc-vazio-cards {
  display: block;
  padding: 30px;
}

/* Barra de ferramentas do grid */
.oc-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.oc-busca { flex: 1 1 280px; min-width: 220px; }
.oc-filtro { flex: 0 0 190px; }

.oc-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.oc-contador {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Tabela ordenável */
.oc-tabela th.oc-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.oc-tabela th.oc-th-sort:hover { color: var(--text-primary); }

.oc-seta {
  font-size: 0.65rem;
  color: var(--green-bright);
  margin-left: 2px;
}

.oc-td-vazio {
  text-align: center;
  padding: 30px;
  color: var(--text-muted);
}

.oc-num { text-align: right; font-variant-numeric: tabular-nums; }

.oc-modelo {
  font-size: 0.8rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.oc-sessao-titulo {
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.oc-sessao-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.oc-tag-sub {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(163, 113, 247, 0.18);
  color: #a371f7;
  font-size: 0.65rem;
  font-weight: 600;
}

/* Badges de status */
.oc-status-EM_EXECUCAO  { background: rgba(88, 166, 255, 0.15); color: var(--info); }
.oc-status-CONCLUIDA    { background: rgba(63, 185, 80, 0.15);  color: var(--green-bright); }
.oc-status-FALHA        { background: rgba(248, 81, 73, 0.15);  color: var(--danger); }
.oc-status-INTERROMPIDA { background: rgba(227, 179, 65, 0.15); color: var(--warning); }
.oc-status-PARADA       { background: rgba(139, 148, 158, 0.15); color: var(--text-secondary); }

/* Visão em cards */
.oc-cards {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.oc-card-sessao {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: var(--transition);
}

.oc-card-sessao:hover { border-color: var(--green-border); }

.oc-card-sessao-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}

.oc-card-sessao-titulo {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.oc-card-sessao-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.oc-card-sessao-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin: 0;
}

.oc-card-sessao-meta dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  font-weight: 600;
}

.oc-card-sessao-meta dd {
  margin: 1px 0 0;
  font-size: 0.82rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-card-sessao-dir { color: var(--text-secondary); }

/* Modal de conexão */
.oc-dica {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.45;
}

.oc-status-conexao {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.oc-status-conexao.oc-status-on {
  border-color: var(--green-border);
  background: rgba(63, 185, 80, 0.10);
  color: var(--green-bright);
}

.oc-status-conexao.oc-status-off {
  border-color: rgba(248, 81, 73, 0.35);
  background: rgba(248, 81, 73, 0.08);
  color: var(--danger);
}

@media (max-width: 720px) {
  .oc-contador { margin-left: 0; }
  .oc-filtro { flex: 1 1 100%; }
  .oc-card-sessao-meta { grid-template-columns: 1fr; }
}

/* ============================================================
   MÓDULO OPENCODE DO PROJETO (Dashboard / Sessões / Escritório 3D)
   ============================================================ */

.ocp-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.ocp-titulo { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.ocp-subtitulo { font-size: 0.85rem; color: var(--text-secondary); }
.ocp-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ocp-aviso {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(248, 81, 73, 0.10); border: 1px solid rgba(248, 81, 73, 0.35);
  color: var(--danger); font-size: 0.85rem; margin-bottom: 16px;
}

.ocp-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.ocp-kpi {
  background: var(--bg-card); border: 1px solid var(--border-muted);
  border-radius: var(--radius-md); padding: 14px 16px;
  box-shadow: var(--shadow-card); transition: transform 0.2s ease, border-color 0.2s ease;
}
.ocp-kpi:hover { transform: translateY(-2px); border-color: var(--border-default); }
.ocp-kpi-rotulo { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }
.ocp-kpi-valor { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.ocp-kpi-run { border-left: 3px solid #58a6ff; }
.ocp-kpi-ok { border-left: 3px solid #3fb950; }
.ocp-kpi-erro { border-left: 3px solid #f85149; }
.ocp-kpi-warn { border-left: 3px solid #e3b341; }

.ocp-dashboard-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px; margin-bottom: 16px;
}
.ocp-card-grafico { padding: 16px; }
.ocp-grafico-wrap { position: relative; height: 260px; }
.ocp-vazio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 20px; }

.ocp-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 12px; background: var(--bg-card);
  border: 1px solid var(--border-muted); border-radius: var(--radius-md);
}
.ocp-busca { flex: 1; min-width: 220px; }
.ocp-filtro { min-width: 160px; }
.ocp-check { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; }
.ocp-contador { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); }

.ocp-tabela { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.ocp-tabela th {
  text-align: left; padding: 10px 12px; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-muted); border-bottom: 1px solid var(--border-default);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.ocp-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--border-muted); color: var(--text-primary); vertical-align: middle; }
.ocp-tabela tbody tr:hover td { background: var(--bg-hover); cursor: pointer; }
.ocp-td-vazio { text-align: center; color: var(--text-muted); padding: 30px; }
.ocp-seta { font-size: 0.7rem; margin-left: 4px; color: var(--text-muted); }

.ocp-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.ocp-status-em_execucao { background: rgba(88, 166, 255, 0.15); color: #58a6ff; border: 1px solid rgba(88, 166, 255, 0.35); }
.ocp-status-concluida { background: rgba(63, 185, 80, 0.15); color: #3fb950; border: 1px solid rgba(63, 185, 80, 0.35); }
.ocp-status-falha { background: rgba(248, 81, 73, 0.15); color: #f85149; border: 1px solid rgba(248, 81, 73, 0.35); }
.ocp-status-interrompida { background: rgba(227, 179, 65, 0.15); color: #e3b341; border: 1px solid rgba(227, 179, 65, 0.35); }
.ocp-status-parada { background: rgba(139, 148, 158, 0.15); color: #8b949e; border: 1px solid rgba(139, 148, 158, 0.35); }

.ocp-escritorio-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.ocp-dica { font-size: 0.78rem; color: var(--text-muted); margin-left: auto; }
.ocp-canvas-wrap {
  position: relative; padding: 0; overflow: hidden;
  height: 70vh; min-height: 480px; background: #0a0c10;
  border-radius: var(--radius-md);
}
#ocpCanvas3d { display: block; width: 100%; height: 100%; outline: none; }
#ocpLabels3d {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: hidden;
}
.ocp-label {
  position: absolute; transform: translate(-50%, -120%);
  background: rgba(13, 17, 23, 0.92); border: 1px solid var(--border-default);
  border-radius: 8px; padding: 8px 10px; min-width: 120px; max-width: 220px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45); pointer-events: auto;
  transition: opacity 0.2s ease, transform 0.2s ease; opacity: 0.95;
}
.ocp-label.ocp-label-dim { opacity: 0.35; }
.ocp-label.ocp-label-selecionado { opacity: 1; border-color: #58a6ff; box-shadow: 0 0 0 2px rgba(88,166,255,0.25), 0 6px 18px rgba(0,0,0,0.45); z-index: 10; }
.ocp-label-titulo { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.ocp-label-linha { font-size: 0.7rem; color: var(--text-secondary); line-height: 1.35; }
.ocp-label-linha strong { color: var(--text-primary); font-weight: 600; }
.ocp-label-linha .ocp-status { font-size: 0.65rem; padding: 1px 5px; }
.ocp-label-squad { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* Card do chefe: aparece ao passar o mouse sobre a mesa do chefe no escritório 3D. */
.ocp-chefe-card {
  position: absolute; z-index: 25; width: 330px; max-height: 64%;
  overflow: hidden auto; padding: 12px 14px; border-radius: 12px;
  background: rgba(13, 19, 26, 0.94); border: 1px solid rgba(216, 183, 93, 0.45);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); pointer-events: none;
}
.ocp-chefe-card-topo { font-size: 0.82rem; font-weight: 700; color: #d8b75d; letter-spacing: 0.3px; }
.ocp-chefe-card-sub { font-size: 0.7rem; color: #8b949e; margin: 2px 0 9px; }
.ocp-chefe-card-vazio { font-size: 0.74rem; color: #8b949e; margin-top: 6px; }
.ocp-chefe-card-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ocp-chefe-card-lista li { display: flex; align-items: flex-start; gap: 8px; }
.ocp-chefe-card-squad { flex: 0 0 6px; align-self: stretch; min-height: 28px; border-radius: 3px; }
.ocp-chefe-card-item { flex: 1 1 auto; min-width: 0; }
.ocp-chefe-card-titulo {
  font-size: 0.76rem; font-weight: 600; color: #e6edf3; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ocp-chefe-card-meta { font-size: 0.68rem; color: #8b949e; margin-top: 2px; }
.ocp-chefe-card-status { flex: 0 0 auto; font-size: 0.6rem; padding: 1px 6px; white-space: nowrap; }
.ocp-chefe-card-mais { font-size: 0.68rem; color: #8b949e; margin-top: 8px; }

/* Balões 3D flutuantes de fala/notificação (Chefe monitorando e Agente Socorrista) */
.ocp-balao-3d {
  position: absolute; z-index: 30; pointer-events: none;
  transform: translate(-50%, -100%); margin-top: -12px;
  padding: 8px 14px; border-radius: 12px; font-size: 0.76rem; font-weight: 600;
  line-height: 1.35; white-space: nowrap; max-width: 340px;
  text-overflow: ellipsis; overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65);
  animation: ocpBalaoPop 0.28s ease-out;
  transition: opacity 0.2s, transform 0.2s;
}
.ocp-balao-chefe {
  background: rgba(18, 24, 34, 0.96);
  border: 1.5px solid #d8b75d;
  color: #f7e7be;
}
.ocp-balao-socorrista {
  background: rgba(14, 28, 22, 0.96);
  border: 1.5px solid #3fb950;
  color: #aff5b4;
}
.ocp-balao-alvo {
  background: rgba(36, 14, 14, 0.96);
  border: 1.5px solid #f85149;
  color: #ffb4af;
}
@keyframes ocpBalaoPop {
  0% { transform: translate(-50%, -85%) scale(0.85); opacity: 0; }
  100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}

.ocp-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(13, 17, 23, 0.75); pointer-events: none;
}
.ocp-overlay-msg { color: var(--text-secondary); font-size: 0.9rem; text-align: center; padding: 20px; }

.ocp-modal-body h4 { margin: 0 0 10px; font-size: 0.95rem; color: var(--text-primary); }
.ocp-modal-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.ocp-modal-meta-item { background: var(--bg-secondary); border: 1px solid var(--border-muted); border-radius: var(--radius-sm); padding: 8px 10px; }
.ocp-modal-meta-item dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 3px; }
.ocp-modal-meta-item dd { font-size: 0.82rem; color: var(--text-primary); margin: 0; }
.ocp-mensagens { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.ocp-mensagem { background: var(--bg-secondary); border: 1px solid var(--border-muted); border-radius: var(--radius-sm); padding: 10px 12px; }
.ocp-mensagem-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ocp-mensagem-role { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.ocp-mensagem-role-user { color: #58a6ff; }
.ocp-mensagem-role-assistant { color: #a371f7; }
.ocp-mensagem-role-tool { color: #e3b341; }
.ocp-mensagem-role-system { color: #8b949e; }
.ocp-mensagem-hora { font-size: 0.7rem; color: var(--text-muted); }
.ocp-mensagem-conteudo { font-size: 0.82rem; color: var(--text-primary); line-height: 1.45; white-space: pre-wrap; }
.ocp-mensagem-sintetico { font-style: italic; color: var(--text-secondary); }
.ocp-mensagem-conteudo.ocp-markdown-body { white-space: normal; line-height: 1.52; }
.ocp-mensagem-conteudo.ocp-markdown-body p { margin: 0 0 8px 0; }
.ocp-mensagem-conteudo.ocp-markdown-body p:last-child { margin-bottom: 0; }
.ocp-mensagem-conteudo.ocp-markdown-body pre { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border-muted); border-radius: var(--radius-sm); padding: 8px 10px; overflow-x: auto; margin: 6px 0; }
.ocp-mensagem-conteudo.ocp-markdown-body code { font-family: var(--font-mono, monospace); font-size: 0.8rem; background: rgba(255, 255, 255, 0.08); padding: 2px 4px; border-radius: 3px; }
.ocp-mensagem-conteudo.ocp-markdown-body pre code { background: transparent; padding: 0; }
.ocp-mensagem-conteudo.ocp-markdown-body ul, .ocp-mensagem-conteudo.ocp-markdown-body ol { margin: 4px 0 8px 18px; padding: 0; }
.ocp-mensagem-conteudo.ocp-markdown-body li { margin-bottom: 3px; }
.ocp-mensagem-conteudo.ocp-markdown-body blockquote { border-left: 3px solid var(--primary, #58a6ff); margin: 6px 0; padding-left: 10px; color: var(--text-secondary); }
.ocp-mensagem-conteudo.ocp-markdown-body table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.78rem; }
.ocp-mensagem-conteudo.ocp-markdown-body th, .ocp-mensagem-conteudo.ocp-markdown-body td { border: 1px solid var(--border-muted); padding: 4px 8px; text-align: left; }
.ocp-mensagem-conteudo.ocp-markdown-body th { background: rgba(255, 255, 255, 0.05); }

.ocp-planejamento-toolbar .ocp-filtro { max-width: 250px; }
.ocp-planejamento-status {
  margin-bottom: 10px; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.5;
}
.ocp-planejamento-status .ocp-planejamento-erro { color: var(--danger); }
.ocp-planejamento-mensagens {
  display: flex; flex-direction: column; gap: 10px; max-height: 68vh; overflow-y: auto;
  padding: 4px 6px 4px 0;
}
.ocp-planejamento-mensagens .ocp-mensagem { flex: 0 0 auto; }
.ocp-planejamento-origem {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px;
  color: var(--text-secondary); font-size: 0.74rem;
}
.ocp-planejamento-origem strong { color: var(--text-primary); }
.ocp-mensagem-conteudo { overflow-wrap: anywhere; }

#ocpAbaEscritorio:fullscreen {
  display: flex !important; flex-direction: column; width: 100vw; height: 100vh;
  padding: 12px; box-sizing: border-box; background: var(--bg-primary); overflow: hidden;
}
#ocpAbaEscritorio:fullscreen .ocp-escritorio-toolbar { flex: 0 0 auto; }
#ocpAbaEscritorio:fullscreen .ocp-canvas-wrap {
  flex: 1 1 auto; width: 100%; height: auto; min-height: 0; margin: 0;
}
#ocpCanvas3d { cursor: grab; touch-action: none; }
#ocpCanvas3d.ocp-camera-arrastando { cursor: grabbing; }

.projetos-status-filtro { position: relative; min-width: 180px; }
.projetos-status-filtro summary { cursor: pointer; list-style: none; }
.projetos-status-filtro summary::-webkit-details-marker { display: none; }
.projetos-status-filtro summary::after { content: ' ▾'; float: right; }
.projetos-status-opcoes {
  position: absolute; z-index: 20; top: 100%; left: 0; min-width: 220px;
  max-height: 300px; overflow-y: auto; margin: 4px 0 0; padding: 8px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-secondary); color: var(--text-primary); box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.projetos-status-opcoes legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.projetos-status-opcoes label { display: flex; align-items: center; gap: 7px; padding: 6px; cursor: pointer; }
.projetos-status-opcoes label:hover { background: var(--bg-hover); }

@media (max-width: 720px) {
  .ocp-cabecalho { flex-direction: column; }
  .ocp-dashboard-grid { grid-template-columns: 1fr; }
  .ocp-toolbar { flex-direction: column; align-items: stretch; }
  .ocp-busca, .ocp-filtro { width: 100%; }
}

/* ─── Imagens Incorporadas em Requisitos e Markdown ─────────────── */
.rf-img-container {
  display: block;
  margin: 14px 0;
  text-align: center;
}

.rf-embedded-img,
.markdown-body img,
.pei-markdown img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: var(--bg-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rf-embedded-img:hover,
.markdown-body img:hover,
.pei-markdown img:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.rf-img-caption {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 6px;
  text-align: center;
}

/* ─── Regras de Impressão (@media print) para Imagens e Requisitos ── */
@media print {
  .rf-img-container {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 12px 0 !important;
    text-align: center !important;
    display: block !important;
  }

  .rf-embedded-img,
  .markdown-body img,
  .pei-markdown img {
    max-width: 95% !important;
    max-height: 320px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    display: block !important;
    margin: 0 auto !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .rf-img-caption {
    color: #444 !important;
    font-size: 8pt !important;
    margin-top: 4px !important;
    page-break-before: avoid !important;
  }
}

/* ── CLIs de codificação e Monitor CLI (telas internas da SPA) ─────────────────
   Escopo .cli-painel: estas classes não são usadas pelo restante da SPA. */
.cli-painel .oculto { display: none !important; }
.cli-painel .secao-titulo { font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
.cli-painel .linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.cli-painel .mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.78rem; }
.cli-painel .vazio { padding: 18px; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }
.cli-painel .tabela-wrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-top: 12px; background: #000; color: #fff; }
.cli-painel .tabela { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: #000; color: #fff; }
.cli-painel .tabela th,
.cli-painel .tabela td { padding: 8px 10px; border-bottom: 1px solid #333; text-align: left; vertical-align: top; color: #fff; }
.cli-painel .tabela th { color: #ccc; font-weight: 600; white-space: nowrap; }
.cli-painel .tabela a { color: #8ab4ff; }
.cli-painel .vazio { background: #000; color: #fff; }
.cli-painel .mon-linha { cursor: pointer; }
.cli-painel .mon-linha:hover { background: #1a1a1a; }
.cli-painel input[readonly] { cursor: default; opacity: 0.85; }
.cli-painel .mon-log-wrap { max-height: 360px; overflow: auto; background: #000; color: #fff; border: 1px solid #333; border-radius: var(--radius-md); }
.cli-painel .mon-log-tabela { width: 100%; border-collapse: collapse; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.78rem; background: #000; color: #fff; }
.cli-painel .mon-log-tabela th { position: sticky; top: 0; background: #111; color: #ccc; text-align: left; padding: 6px 8px; border-bottom: 1px solid #333; }
.cli-painel .mon-log-tabela td { padding: 4px 8px; border-bottom: 1px solid #1f1f1f; vertical-align: top; color: #fff; }
.cli-painel .mon-log-num { color: #888; text-align: right; width: 4.5em; user-select: none; }
.cli-painel .mon-log-nivel { width: 6em; white-space: nowrap; }
.cli-painel .mon-log-msg { white-space: pre-wrap; word-break: break-word; }
.cli-painel .mon-log-linha { cursor: pointer; user-select: none; }
.cli-painel .mon-log-linha:hover { background: #1a1a1a; }
.cli-painel .mon-log-linha.selecionada { background: #003a75; }
.cli-painel .mon-nivel-warn { color: #ffd166; }
.cli-painel .mon-nivel-error { color: #ff6b6b; }
.cli-painel .mon-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.cli-painel .mon-aba { background: #000; color: #ccc; border: 1px solid #333; border-radius: var(--radius-md); padding: 6px 12px; cursor: pointer; font-size: 0.85rem; display: inline-flex; gap: 6px; align-items: center; }
.cli-painel .mon-aba:hover { background: #1a1a1a; color: #fff; }
.cli-painel .mon-aba.ativa { background: #003a75; color: #fff; border-color: #0059b3; }
.cli-painel .mon-aba-n { background: #222; border-radius: 999px; padding: 0 7px; font-size: 0.75rem; }
.cli-painel .mon-grafico { background: #000; border: 1px solid #333; border-radius: var(--radius-md); padding: 12px; }
.cli-painel .mon-grafico-svg { width: 100%; height: auto; display: block; }
.cli-painel .mon-grafico-legenda { display: flex; flex-wrap: wrap; gap: 14px; color: #ccc; font-size: 0.8rem; margin-top: 8px; }
.cli-painel .mon-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; }