/* GTR Design System: gtr.css */
/*
 * Redesenho de 15/09/2026 (etapa 1; marca em verde-água desde 30/10/2026): sidebar navy, cards brancos
 * arredondados, Plus Jakarta Sans e só tema claro.
 * Pareado com tailwind.config.js, que usa as mesmas rampas por trás das
 * classes utilitárias. Ao mexer numa cor, mexa nos dois.
 * Spec: docs/superpowers/specs/2026-09-15-redesenho-visual-etapa1-design.md
 */

/* ── Variáveis ─────────────────────────────────────────── */
:root {
  /* ── Marca: verde-água (desde 30/10/2026; antes índigo) ── */
  --color-primary:       #0f766e;
  --color-primary-rgb:   15, 118, 110;
  --color-primary-hover: #115e59;

  --accent-50:  #f0fdfa;
  --accent-100: #ccfbf1;
  --accent-200: #99f6e4;
  --accent-300: #5eead4;
  --accent-400: #2dd4bf;
  --accent-500: #14b8a6;
  --accent-600: #0d9488;
  --accent-700: #0f766e;
  --accent-800: #115e59;
  --accent-900: #134e4a;

  /* ── Vermelho-rosado: alto, erro ───────────────────── */
  --signal-50:  #fff2f3;
  --signal-100: #fde2e4;
  --signal-200: #fbcad0;
  --signal-300: #fca3ae;
  --signal-600: #e11d48;
  --signal-700: #bb0b3a;
  --signal-800: #9b0b36;

  /* ── Âmbar: médio, atenção (texto do 700 para cima) ── */
  --process-yellow: #f59e0b;
  --process-50:     #fffbeb;
  --process-100:    #fef3c7;
  --process-200:    #fde68a;
  --process-800:    #92400e;

  /* ── Verde-folha: concluído, comprovado (longe do verde-água da marca) ── */
  --success-50:  #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-600: #16a34a;
  --success-700: #15803d;

  /* ── Azul: informação, risco baixo ─────────────────── */
  --info-50:  #eff6ff;
  --info-100: #daeaff;
  --info-200: #bedbfe;
  --info-600: #1c62f0;
  --info-700: #164cdd;

  /* ── Laranja: médio-alto (dado chega na etapa 2) ───── */
  --orange-50:  #fff7ed;
  --orange-200: #fed7aa;
  --orange-500: #f97316;
  --orange-700: #c2410c;

  /* ── Petróleo do logo (nome navy mantido) e destaque: sidebar ── */
  --navy-800: #12303a;
  --navy-900: #0a1f27;
  --cyan-400: #2dd4bf;

  /* ── Neutros: cinza frio (gray do Tailwind) ────────── */
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;

  /* ── Superfícies ───────────────────────────────────── */
  --color-bg:      #f5f8f8;
  --color-surface: #ffffff;
  --color-border:  #e1e8e9;
  --color-text:    #111827;
  --color-muted:   #4b5563;
  --color-divider: #e1e8e9;
  --shadow-card:   0 1px 2px rgba(16, 24, 40, 0.05);

  /* ── Risco: texto, fundo e borda por nível ─────────── */
  --risk-critico:           #9b0b36;
  --risk-critico-bg:        #fbcad0;
  --risk-alto:              #bb0b3a;
  --risk-alto-bg:           #fff2f3;
  --risk-alto-border:       #fbcad0;
  --risk-medio-alto:        #c2410c;
  --risk-medio-alto-bg:     #fff7ed;
  --risk-medio-alto-border: #fed7aa;
  --risk-medio:             #b45309;
  --risk-medio-mark:        #f59e0b;
  --risk-medio-bg:          #fffbeb;
  --risk-medio-border:      #fde68a;
  --risk-baixo:             #164cdd;
  --risk-baixo-bg:          #eff6ff;
  --risk-baixo-border:      #bedbfe;
  --risk-na:                #9ca3af;
  --risk-na-bg:              #f3f4f6;

  /* ── Tipografia ────────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-hash:    'IBM Plex Mono', ui-monospace, monospace;

  /* ── Legado: exclusivo da landing pública ──────────── */
  --color-navy:       #1d5a63;
  --color-navy-rgb:   29, 90, 99;
  --color-cyan:       #5eead4;
  --color-cyan-rgb:   94, 234, 212;
  --color-purple:     #0d9488;
  --color-purple-rgb: 13, 148, 136;
  --color-ink:        #041218;
  --color-ink-soft:   #0a1f27;
}

/* ── Base ───────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Número alinhado em coluna, como o "04 / 02 / 01" dos mockups. */
.font-mono { font-variant-numeric: tabular-nums; }

/* Hash, selo e identificador técnico: a única monoespaçada. */
.font-hash { font-family: var(--font-hash); }

/* ── Breadcrumb ─────────────────────────────────────────── */
/* Primeiro elemento do conteúdo, acima do .page-head. Raiz em índigo, página
   atual no cinza escuro que o bloco breadcrumb de cada tela já escreve. */
.page-crumbs {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  font-size: 14px; color: var(--neutral-600); margin: 0 0 10px;
}
.page-crumbs > a { color: var(--color-primary); font-weight: 500; text-decoration: none; }
.page-crumbs > a:hover { text-decoration: underline; }
.page-crumbs .text-gray-300 { color: var(--neutral-400); }

/* ── Medida ─────────────────────────────────────────────── */
/* Largura máxima do conteúdo. Tabela larga rola dentro do próprio contêiner,
   a página nunca. */
.measure { max-width: 1200px; margin-inline: auto; }

/* ── Cabeçalho de página ────────────────────────────────── */
/* Contrato do topo de toda tela (AGENT.md 3.2.1):
     <header class="page-head">
       <div class="page-head-text">
         <p class="page-kicker">…</p>      (opcional)
         <h1 class="page-title">…</h1>
         <p class="page-deck">…</p>        (opcional, aceita markup)
       </div>
       <div class="page-head-actions">…</div>   (opcional)
     </header>
   O breadcrumb vem de base.html, logo acima. */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.page-head-text { min-width: 0; }
.page-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-primary); margin: 0 0 6px;
}
.page-title {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15;
  color: var(--color-text); margin: 0;
}
.page-deck {
  font-size: 15px; line-height: 1.55; color: var(--neutral-600);
  margin: 8px 0 0; max-width: 72ch;
}
.page-head-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: none;
}

/* ── Cabeçalho de seção ─────────────────────────────────── */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 12px;
}
.section-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.3; color: var(--color-text); margin: 0;
}
.section-meta { font-size: 13px; color: var(--neutral-600); }
.section-deck {
  font-size: 14px; line-height: 1.5; color: var(--neutral-600);
  margin: 0 0 16px; max-width: 72ch;
}

/* ── Card e linha ───────────────────────────────────────── */
/* O card branco dos mockups: canto de 12px, borda clara e sombra leve. */
.sheet {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

.app-topbar { background: var(--color-surface); }

.list-row { padding: 16px 0; border-top: 1px solid var(--color-divider); }

/* ── Estado vazio ───────────────────────────────────────── */
.empty-state { padding: 32px 0; max-width: 56ch; }
.empty-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--color-text); margin: 0 0 6px;
}
.empty-note { font-size: 14px; line-height: 1.55; color: var(--neutral-600); margin: 0; }

/* ── Nível de risco: ponto colorido + texto (etapa 2) ── */
.nivel-dot { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.nivel-dot::before { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: currentColor; flex: none; }
.nivel-dot.nivel-alto  { color: var(--risk-alto); }
.nivel-dot.nivel-medio { color: var(--risk-medio); }
.nivel-dot.nivel-baixo { color: var(--risk-baixo); }

/* Valor que alguém ajustou à mão, no lugar da estimativa do GTR. */
.marca-ajustado {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 5px;
  font-size: 11px; font-weight: 700; color: var(--accent-700); background: var(--accent-50);
  vertical-align: 1px;
}

/* ── Matriz gravidade × probabilidade (Riscos e ações) ── */
.matriz-grid { display: grid; grid-template-columns: 5.5rem repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.matriz-eixo {
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  text-align: right; font-weight: 600; color: var(--neutral-600);
}
.matriz-eixo-topo { justify-content: center; padding: 0 0 2px; text-align: center; }
.matriz-titulo-eixo {
  grid-column: 2 / -1; text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-500);
}
.matriz-cel {
  position: relative; height: 64px; border-radius: 10px; border: 1px solid var(--color-divider);
  display: grid; place-items: center; font-size: 20px; font-weight: 700; line-height: 1;
  background: #fafbfd; color: var(--neutral-400);
}
.matriz-cel.is-vazia { font-size: 12px; font-weight: 600; }
.matriz-vermelho:not(.is-vazia)       { background: var(--signal-600); border-color: var(--signal-700); color: #fff; }
.matriz-vermelho_claro:not(.is-vazia) { background: var(--signal-50); border-color: var(--signal-200); color: var(--signal-700); }
.matriz-ambar:not(.is-vazia)          { background: var(--process-50); border-color: var(--process-200); color: var(--risk-medio); }
.matriz-azul:not(.is-vazia)           { background: var(--info-50); border-color: var(--info-200); color: var(--info-700); }
@media (max-width: 479px) {
  .matriz-grid { grid-template-columns: 3.75rem repeat(3, minmax(0, 1fr)); }
  .matriz-cel { height: 48px; font-size: 17px; }
}

/* Régua da maturidade: três faixas (0-39, 40-69, 70-100) e a marca no valor. */
.escala-maturidade {
  position: relative; height: 6px; max-width: 22ch; margin: 10px 0 4px; border-radius: 9999px;
  background: linear-gradient(90deg,
    var(--signal-200) 0 40%, var(--process-200) 40% 70%, var(--success-200) 70% 100%);
}
.escala-maturidade > i {
  position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1px;
  border-radius: 2px; background: var(--neutral-900);
}

/* ── Nota de estado ─────────────────────────────────────── */
/* A nota informativa dos mockups ("A revalidação acontece…"): borda lilás e
   fundo lilás claríssimo. Espera e aprovado trocam só as duas variáveis. */
.state-note {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 12px;
  border: 1px solid var(--state-border, var(--accent-200));
  background: var(--state-bg, var(--accent-50));
}
.state-note-icon {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  color: var(--state-ink, var(--accent-600));
}
.state-note-title { font-size: 14px; font-weight: 600; color: var(--color-text); margin: 0; }
.state-note-body {
  font-size: 13.5px; line-height: 1.5; color: var(--neutral-700);
  margin: 2px 0 0; max-width: 80ch;
}
.state-note.is-espera   { --state-border: var(--process-200); --state-bg: var(--process-50); --state-ink: var(--process-800); }
.state-note.is-aprovado { --state-border: var(--success-200); --state-bg: var(--success-50); --state-ink: var(--success-700); }

/* ── Faixa de trilhas do Assessment ─────────────────────── */
.trilha-strip {
  display: grid; grid-template-columns: 1fr;
}
.trilha-col {
  padding: 14px 18px; border-top: 1px solid var(--color-divider);
  --trilha-ink: var(--neutral-600);
}
.trilha-col:first-child { border-top: 0; }
@media (min-width: 640px) {
  .trilha-strip { grid-template-columns: repeat(3, 1fr); }
  .trilha-col { border-top: 0; border-left: 1px solid var(--color-divider); }
  .trilha-col:first-child { border-left: 0; }
}
/* A tinta da faixa é o STATUS, não a identidade da trilha. Era uma cor por
   trilha (índigo/âmbar/vermelho) e, numa paleta em que âmbar é atenção e
   vermelho é risco alto, três trilhas concluídas apareciam como duas em alerta.
   Concluída em verde, em andamento em índigo, o que não se aplica em cinza. */
.trilha-col[data-status="concluido"]   { --trilha-ink: var(--success-700); }
.trilha-col[data-status="preenchendo"] { --trilha-ink: var(--accent-700); }
.trilha-col[data-status="pronto"]      { --trilha-ink: var(--accent-700); }
.trilha-col[data-status="em_revisao"]  { --trilha-ink: var(--accent-700); }
.trilha-col.is-na { opacity: 0.6; --trilha-ink: var(--neutral-500); }

.trilha-kicker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--trilha-ink); margin: 0;
}
.trilha-sua {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 6px;
  background: var(--trilha-ink); color: var(--color-surface);
}
.trilha-status { font-size: 13px; line-height: 1.35; color: var(--neutral-700); margin: 6px 0 0; }
.trilha-status strong { color: var(--color-text); font-weight: 600; }
.trilha-bar { height: 6px; border-radius: 9999px; background: var(--neutral-200); margin-top: 8px; overflow: hidden; }
.trilha-bar > span { display: block; height: 100%; border-radius: 9999px; background: var(--trilha-ink); }
.trilha-pend { font-size: 12px; color: var(--neutral-600); margin: 6px 0 0; }

/* ── Pílula de risco ────────────────────────────────────── */
/* Pílula dos mockups ("Alto", "Médio-Alto", "Médio"): fundo tingido, borda no
   tom, canto de 6px. Ponto + texto no lugar da pílula entra na etapa 2, com
   a tabela do Painel de tecnologias. */
.risk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px;
  border: 1px solid transparent; white-space: nowrap;
}
.risk-chip-alto       { background: var(--risk-alto-bg);       color: var(--risk-alto);       border-color: var(--risk-alto-border); }
.risk-chip-medio-alto { background: var(--risk-medio-alto-bg); color: var(--risk-medio-alto); border-color: var(--risk-medio-alto-border); }
.risk-chip-medio      { background: var(--risk-medio-bg);      color: var(--risk-medio);      border-color: var(--risk-medio-border); }
.risk-chip-baixo      { background: var(--risk-baixo-bg);      color: var(--risk-baixo);      border-color: var(--risk-baixo-border); }

/* ── Faixa de KPI ───────────────────────────────────────── */
/* Mockups: bloco de ícone lilás à esquerda, número grande e rótulo embaixo,
   itens separados por divisória vertical. Com .kpi-icon o item vira grid de
   duas colunas, e a ordem visual (número antes do rótulo) sai das posições do
   grid; o HTML das telas não muda de ordem. Sem .kpi-icon, segue empilhado. */
/* Abaixo de 480px o bloco de ícone come metade da largura de uma coluna de
   ~150px e a legenda quebra em quatro linhas ("1 já / passaram / por /
   avaliação"), que foi o que a captura de 390px mostrou: o ícone sai (regra
   seguinte) e a faixa fica 2 × 2. */
.kpi-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.kpi-strip > * { padding: 0; border-left: 0; }
/* No celular a faixa é 2 × 2 e o bloco de ícone sai, para o número caber. */
@media (max-width: 479px) {
  .kpi-strip .kpi-icon { display: none; }
  .kpi-strip > :has(> .kpi-icon) > * { grid-column: 1 / -1; }
}
@media (min-width: 480px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-strip > * { padding: 0 24px; border-left: 1px solid var(--color-divider); }
  .kpi-strip > :nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (min-width: 1024px) {
  .kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi-strip > :nth-child(odd) { padding-left: 24px; border-left: 1px solid var(--color-divider); }
  .kpi-strip > :first-child { padding-left: 0; border-left: 0; }
}
.kpi-strip > :has(> .kpi-icon) {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 16px; align-content: start;
}
.kpi-strip > :has(> .kpi-icon) > * { grid-column: 2; }
.kpi-strip > :has(> .kpi-icon) > .kpi-num { grid-row: 1; }
.kpi-strip > :has(> .kpi-icon) > .kpi-label { grid-row: 2; }
.kpi-strip > :has(> .kpi-icon) > .kpi-icon { grid-column: 1; grid-row: 1 / span 3; }
.kpi-icon {
  width: 56px; height: 56px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-50); color: var(--color-primary);
}
.kpi-icon > svg, .kpi-icon > i { width: 26px; height: 26px; }
/* Celular de novo, depois das regras de grade acima: o "grid-column: 1 / -1"
   da faixa de até 479px vinha antes delas no arquivo e perdia, e o número
   ficava deslocado 72px à direita, ao lado de uma coluna de ícone vazia
   (auditoria visual de 27/10/2026, 390px). */
@media (max-width: 479px) {
  .kpi-strip > :has(> .kpi-icon) { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .kpi-strip > :has(> .kpi-icon) > * { grid-column: 1; }
}
.kpi-label { font-size: 14px; font-weight: 500; color: var(--neutral-600); margin: 4px 0 0; }
.kpi-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 34px; line-height: 1.05; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--color-text);
}
/* KPI sem dado ainda: texto no lugar do número, para um "0" cinza não ler
   como nota zero. neutral-500 sobre branco dá 4,8:1 (AA). */
.kpi-num.kpi-num-vazio {
  font-family: inherit; font-size: 1.125rem; font-weight: 600; line-height: 1.3;
  letter-spacing: 0; color: var(--neutral-500); padding-top: 6px;
}
.kpi-legend { font-size: 13px; line-height: 1.45; color: var(--neutral-600); margin-top: 6px; max-width: 28ch; }

/* ── Sidebar ────────────────────────────────────────────── */
/* Navy dos mockups. Toda cor dentro da sidebar passa por estas variáveis:
   cor escrita à mão lá dentro some no fundo escuro. */
.sidebar-nav {
  --sb-bg:             var(--navy-900);
  --sb-border:         rgba(255, 255, 255, 0.08);
  --sb-section-sep:    rgba(255, 255, 255, 0.08);
  --sb-label:          #a7bcc0;
  --sb-text:           #ffffff;
  --sb-muted:          #d3e0e2;
  --sb-faint:          #a7bcc0;
  --sb-accent:         var(--cyan-400);
  --sb-input-bg:       rgba(255, 255, 255, 0.06);
  --sb-input-border:   rgba(255, 255, 255, 0.14);
  --sb-input-text:     #ffffff;
  --sb-nav-hover:      rgba(255, 255, 255, 0.06);
  --sb-nav-hover-txt:  #ffffff;
  --sb-nav-active:     var(--navy-800);
  --sb-nav-active-txt: #ffffff;
  background: var(--sb-bg);
}

/* Item do menu em duas linhas (proposta do cliente): o rótulo e, embaixo, o
   estado da etapa em palavras ("Em preenchimento", "1 função a definir"). */
.nav-grupo {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sb-label);
}
.nav-rolagem { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.nav-item .nav-icone { width: 16px; height: 16px; flex: none; }
.nav-item .nav-label { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.nav-item .nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .nav-sub {
  margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.3;
  color: var(--sb-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-item.active .nav-sub { color: var(--sb-muted); }
.nav-item .nav-sub-atencao { color: var(--process-200); }
.nav-item .nav-sub-alerta { color: var(--signal-300); font-weight: 600; }
.nav-item .nav-ponto {
  position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 9999px;
  background: var(--signal-600); box-shadow: 0 0 0 2px var(--sb-bg);
}

/* Estado ao vivo no item de menu (assessment %, registro %, pendências). */
.nav-item .nav-state {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--sb-label);
  white-space: nowrap;
  flex: none;
}
.nav-item.active .nav-state { color: var(--sb-nav-active-txt); }
.nav-item .nav-state-alerta {
  color: #fff;
  background: var(--signal-600);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 600;
}

/* ── Avisos ─────────────────────────────────────────────── */
/* Contador de não lidos no item "Avisos" do menu e no sino do celular.
   Mesmo tom do alerta do menu: é algo esperando pela pessoa. */
.aviso-contador {
  min-width: 1.125rem;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--signal-600);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.125rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Botões utilitários do sidebar ─────────────────────── */
.sb-icon-btn { color: var(--sb-label); transition: color 0.12s, background 0.12s; }
.sb-sem-sistema { border: 1px solid var(--sb-section-sep); background: rgba(255,255,255,0.04); }
.sb-icon-btn:hover { color: var(--sb-text) !important; background: var(--sb-nav-hover) !important; }

.sb-logout-btn { color: var(--sb-label); transition: color 0.12s, background 0.12s; }
.sb-logout-btn:hover { color: #fca3ae !important; background: rgba(225, 29, 72, 0.16) !important; }

.sb-novo-btn { color: var(--sb-label); border: 1px dashed var(--sb-input-border); transition: color 0.12s, border-color 0.12s; }
.sb-novo-btn:hover { color: var(--sb-text) !important; border-color: var(--sb-accent) !important; }

.sb-utility-btn { color: var(--sb-label); background: transparent; border: 1px solid var(--sb-border); transition: color 0.12s, border-color 0.12s; }
.sb-utility-btn:hover { color: var(--sb-text) !important; border-color: var(--sb-label) !important; }

/* ── Navegação Sidebar ──────────────────────────────────── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sb-muted);
  text-decoration: none;
  position: relative;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: var(--sb-nav-hover); color: var(--sb-nav-hover-txt); }

/* Ativo dos mockups: fundo navy mais claro e fio ciano à esquerda. */
.nav-item.active {
  background: var(--sb-nav-active);
  color: var(--sb-nav-active-txt);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--sb-accent);
}

/* ── Botões ─────────────────────────────────────────────── */
/* Principal: índigo cheio ("Cadastrar tecnologia +"). Secundário: branco com
   borda e texto índigo ("Exportar mapa").
   REGRA: no máximo UM .btn-primary visível por tela. O resto é .btn-secondary
   ou link. Duas ações cheias lado a lado obrigam a pessoa a decidir qual é a
   certa, e é isso que o botão principal existe para evitar. */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
  border-radius: 8px; padding: 0.625rem 1.125rem;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary:hover  { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--accent-900); }
/* Indisponível tem cara de indisponível: cinza, não o roxo esmaecido, que
   ainda parecia clicável. O motivo fica escrito ao lado (aria-describedby). */
.btn-primary:disabled, .btn-primary[aria-disabled="true"] {
  background: var(--neutral-200); color: var(--neutral-600); box-shadow: none; cursor: not-allowed; opacity: 1;
}

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--color-surface); color: var(--color-primary);
  font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
  border-radius: 8px; padding: 0.625rem 1.125rem;
  border: 1px solid var(--color-primary); cursor: pointer; text-decoration: none;
  transition: background 0.15s;
}
.btn-secondary:hover  { background: var(--accent-50); }
.btn-secondary:active { background: var(--accent-100); }
/* Indisponível: o texto ao lado (aria-describedby) diz o que falta. */
.btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; background: var(--color-surface); }

.btn-sm { font-size: 0.8125rem; padding: 0.4375rem 0.875rem; }

/* ── Tabela ─────────────────────────────────────────────── */
/* Cabeçalho, selo e data nunca quebram; quem cede espaço é a coluna de texto.
   A tabela de riscos quebrava "RESPONSÁVEL" e "Aberto" no meio da palavra. */
.tabela { width: 100%; font-size: 0.875rem; }
.tabela th {
  text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--neutral-500); padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--neutral-100);
}
.tabela td { padding: 0.75rem 1.25rem; vertical-align: middle; }
.tabela tbody tr + tr td { border-top: 1px solid var(--neutral-100); }
.tabela .nowrap { white-space: nowrap; }
.tabela .col-texto { width: 100%; min-width: 14rem; }

/* ── Selo de status e valor vazio ───────────────────────── */
/* Estado do documento ao lado do título (ex.: Rascunho), no lugar de uma caixa. */
.selo-estado {
  display: inline-flex; align-items: center; padding: 0.125rem 0.625rem;
  border-radius: 9999px; background: var(--accent-50); color: var(--accent-700);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0;
}

.status-badge {
  display: inline-flex; white-space: nowrap; padding: 0.125rem 0.5rem;
  border: 1px solid; border-radius: 6px; font-size: 0.75rem; font-weight: 600;
}
.status-badge.is-aberto    { background: var(--risk-alto-bg); border-color: var(--risk-alto-border); color: var(--risk-alto); }
.status-badge.is-mitigacao { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.status-badge.is-resolvido { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.valor-vazio { color: var(--neutral-500); font-size: 0.8125rem; }

/* ── Jornada compacta ───────────────────────────────────── */
.jornada-pontos { display: inline-flex; gap: 4px; flex: none; }
.jornada-ponto { width: 8px; height: 8px; border-radius: 9999px; background: var(--neutral-200, #e5e7eb); }
.jornada-ponto.is-feito { background: #16a34a; }
.jornada-ponto.is-atual { background: var(--color-primary); box-shadow: 0 0 0 3px var(--accent-100); }
.btn-alerta { background: var(--risk-alto); }
.btn-alerta:hover { background: #9f0a32; }

/* ── Telas do cliente (PDF de 22/10/2026) ───────────────────
   Barra das seis etapas, caixa de orientação ("Próximo passo: …") e a lista
   de conferência em duas colunas. Os mesmos três blocos se repetem nas onze
   telas; aqui ficam uma vez só. */
.etapas-barra { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.etapas-barra > li { min-width: 0; }
.etapas-barra a, .etapas-barra span.etapa {
  display: block; padding-top: 14px; border-top: 3px solid var(--neutral-200, #e5e7eb);
  font-size: 12px; line-height: 1.3; color: var(--neutral-600, #4b5563);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
.etapas-barra a:hover { color: var(--color-text); }
.etapas-barra .is-atual { border-top-color: var(--color-primary); color: var(--color-primary); font-weight: 700; }
@media (max-width: 767px) {
  .etapas-barra { gap: 6px; }
  .etapas-barra .etapa-nome { display: none; }
  .etapas-barra .is-atual .etapa-nome { display: inline; }
  .etapas-barra > li:has(.is-atual) { grid-column: span 2; }
  .etapas-barra { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.guia-passo {
  border-radius: 10px; background: var(--accent-50); padding: 20px 22px;
}
.guia-passo-titulo { font-size: 17px; font-weight: 700; color: var(--color-text); margin: 0; }
.guia-passo-texto { font-size: 15px; color: var(--neutral-600, #4b5563); margin: 6px 0 0; max-width: 90ch; }
.guia-passo .guia-passo-acoes { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; }
.conferencia { list-style: none; margin: 0; padding: 0; }
.conferencia > li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 24px;
  padding: 16px 0; border-bottom: 1px solid var(--neutral-200, #e5e7eb); font-size: 15px;
}
.conferencia > li > :first-child { color: var(--color-text); }
.conferencia > li > :last-child { color: var(--neutral-600, #4b5563); }
.conferencia .is-destaque { color: var(--color-primary) !important; font-weight: 700; }
.conferencia .is-alerta { color: #92400e !important; font-weight: 600; }
.conferencia .is-bloqueio { color: var(--risk-alto) !important; font-weight: 600; }
@media (max-width: 639px) { .conferencia > li { grid-template-columns: 1fr; } }
/* Números que não dançam de uma linha para a outra (prazos, contagens). */
.conferencia, .etapas-barra { font-variant-numeric: tabular-nums; }
/* No celular, todo botão e link de ação tem pelo menos 44px de altura para o dedo. */
@media (pointer: coarse) {
  .btn-sm, [data-cobrar-trilha], .conferencia a, .page-crumbs a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}
.nota-tela { font-size: 14px; color: var(--neutral-600, #4b5563); max-width: 90ch; }
.acoes-tela { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* ── Formulário ─────────────────────────────────────────── */
.field > label,
.form-label {
  display: block; font-size: 13px; margin-bottom: 6px; font-weight: 500;
  color: var(--neutral-700);
}
.input {
  width: 100%; min-height: 40px; padding: 9px 12px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--color-text); caret-color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--neutral-500); opacity: 1; }
.input:hover { border-color: var(--neutral-300); }
.input:focus, .input:focus-visible {
  border-color: var(--color-primary); outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}
textarea.input { min-height: 90px; }
/* Campo compacto, dentro de linha de tabela (equipe da avaliação). */
.input.input-sm { width: auto; min-height: 34px; padding: 6px 10px; font-size: 13px; }

/* ── Selo de respondente ────────────────────────────────── */
.badge-respondente {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  border-width: 1px; border-style: solid; line-height: 1.4; white-space: nowrap;
}
/* [N] Negócio */
.badge-N { background: var(--accent-50);  color: var(--accent-700);  border-color: var(--accent-200); }
/* [T] Técnico / TI */
.badge-T { background: var(--process-50); color: var(--process-800); border-color: var(--process-200); }
/* [J] Jurídico */
.badge-J { background: var(--signal-50);  color: var(--signal-700);  border-color: var(--signal-200); }
/* Pergunta compartilhada entre duas trilhas: neutra e tracejada. */
.badge-compartilhada {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  border: 1px dashed var(--color-border); background: var(--color-surface);
  color: var(--color-muted); line-height: 1.4; white-space: nowrap;
}

/* Assessment stepper sidebar */
.assessment-step-btn {
  width: 100%; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.6rem; border-radius: 8px;
  font-size: 0.8125rem; font-weight: 500; text-align: left; cursor: pointer;
  border: none; background: transparent; transition: background 0.12s, color 0.12s;
}
.assessment-step-btn:hover { background: var(--neutral-100); }
.assessment-step-btn.active-base,
.assessment-step-btn.active-adq,
.assessment-step-btn.active-cri { background: var(--accent-50); color: var(--accent-800); font-weight: 600; }

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem; border-radius: 10px;
  font-size: 0.875rem; font-weight: 500;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
  max-width: 380px; animation: slide-in 0.25s ease-out;
}
.toast-success { background: var(--success-50); color: var(--success-700); border: 1px solid var(--success-200); }
.toast-error   { background: var(--signal-50);  color: var(--signal-700);  border: 1px solid var(--signal-200); }
.toast-info    { background: var(--info-50);    color: var(--info-700);    border: 1px solid var(--info-200); }

@keyframes slide-in {
  from { transform: translateX(1rem); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── HTMX Indicator ─────────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ── Alpine.js ──────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Score Ring ─────────────────────────────────────────── */
.score-number {
  font-family: var(--font-display);
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* ── Heurísticas de Nielsen: melhorias UX ───────────────── */

/* H5/H10 – Tooltip regulatório */
.tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--accent-100);
  color: var(--accent-700);
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: help;
  vertical-align: middle;
  margin-left: 0.25rem;
  flex-shrink: 0;
  line-height: 1;
  border: 1px solid var(--accent-200);
  user-select: none;
}

.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.55;
  padding: 0.5rem 0.75rem;
  border-radius: 2px;
  width: 230px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
  white-space: normal;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.tip:hover::after { opacity: 1; }

/* Evita tooltip sair da tela no lado esquerdo */
.tip.tip-right::after {
  left: 0;
  transform: none;
}

/* H9 – Toast de erro global */
#global-error-toast {
  transition: opacity 0.2s, transform 0.2s;
}


/* H1 – Status: tab de assessment com indicador de conclusão */
.tab-done-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--color-primary);
  margin-left: 0.375rem;
  vertical-align: middle;
}

/* ── CheckboxSelectMultiple (campo Sistemas) ───────────── */
.sistemas-checkbox-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.sistemas-checkbox-list li {
  margin: 0;
  padding: 0;
}
.sistemas-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  color: #374151;
}
.sistemas-checkbox-list input[type=checkbox] {
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

/* H5 – Prevenção de erros: campo obrigatório */
.field-required::after {
  content: ' *';
  color: var(--signal-700);
  font-size: 0.75rem;
}

/* H9 – Recuperação: estado de erro inline */
.field-error {
  border-color: var(--signal-300) !important;
  background: var(--signal-100) !important;
}

/* H1 – Status: barra de progresso do diagnóstico.
   Filete reto de 3px, não cápsula: é régua de medição, não widget. */
.progress-bar-track {
  height: 3px;
  background: var(--neutral-200);
  border-radius: 0;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 0;
  transition: width 0.3s ease;
}

/* H8 – Estética: chip de legenda de score */
.score-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.score-legend-high   { background: var(--risk-baixo-bg); color: var(--risk-baixo); border: 1px solid var(--accent-200); }
.score-legend-medium { background: var(--risk-medio-bg); color: var(--risk-medio); border: 1px solid var(--process-200); }
.score-legend-low    { background: var(--risk-alto-bg);  color: var(--risk-alto);  border: 1px solid var(--signal-200); }

/* Navegação mais fluida em trocas HTMX/full reload.
   Evita transform no scroll container: isso quebra filhos position: fixed
   durante a animação em algumas telas. */
#main-content {
  animation: page-in 0.16s ease-out;
  transition: opacity 0.12s ease;
}

/* Durante a troca de tela a área central não apaga mais (a 55% parecia
   piscar, 08/10/2026): só não aceita clique repetido. O sinal de carregamento
   é a barra fina do topo, e só quando a resposta demora (body.navegando entra
   depois de 120 ms, em base.html). */
#main-content.is-navigating {
  pointer-events: none;
}

body.navegando #htmx-indicator {
  opacity: 1;
  height: 2px;
  transform-origin: left center;
  animation: barra-navegando 1.2s ease-in-out infinite;
}

@keyframes barra-navegando {
  0%   { transform: scaleX(0.05); }
  60%  { transform: scaleX(0.7); }
  100% { transform: scaleX(0.95); opacity: 0.5; }
}

/* Painel lateral (Riscos e ações, Acompanhamento): desliza ao abrir. A
   animação roda de novo cada vez que o painel deixa de estar escondido; a
   saída é o esmaecimento do x-transition do aside. */
.painel-desliza {
  animation: painel-entra 0.22s cubic-bezier(.2,.7,.3,1);
}

@keyframes painel-entra {
  from { transform: translateX(28px); opacity: 0.6; }
  to   { transform: none; opacity: 1; }
}

@keyframes page-in {
  from { opacity: 0.65; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #main-content,
  #main-content.is-navigating,
  body.navegando #htmx-indicator,
  .painel-desliza,
  .kpi-card,
  .toast {
    animation: none !important;
    transition: none !important;
  }
}

/* Garante animação da sidebar mesmo sem utilitário arbitrário do Tailwind */
.sidebar-nav {
  transition: width 0.2s ease-in-out;
}

/* ── Card hover ─────────────────────────────────────────── */
/* Nada levita fora da página. O alvo responde por tom, não por elevação. */
.card-hover {
  transition: background 0.18s ease, border-color 0.18s ease;
}
.card-hover:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-400);
}

/* ── Staggered card entrance ────────────────────────────── */
.kpi-card {
  animation: card-in 0.3s ease-out both;
}
.kpi-card:nth-child(1) { animation-delay: 0.04s; }
.kpi-card:nth-child(2) { animation-delay: 0.10s; }
.kpi-card:nth-child(3) { animation-delay: 0.16s; }
.kpi-card:nth-child(4) { animation-delay: 0.22s; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Overview table row — acento lateral por risco ──────── */
.row-risk-alto   { border-left: 3px solid var(--risk-alto); }
.row-risk-medio  { border-left: 3px solid var(--risk-medio-mark); }
.row-risk-baixo  { border-left: 3px solid var(--risk-baixo); }
.row-risk-na     { border-left: 3px solid var(--risk-na); }

/* Corpo e layout base */
body { background: var(--color-bg, #F4F6F9); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Melhorias visuais para demonstração ────────────────── */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Risco crítico — borda pulsante na lista de riscos ──── */
.risco-critico-row {
  border-left: 3px solid var(--risk-critico);
  background: linear-gradient(90deg, rgba(132,0,59,0.06) 0%, transparent 35%);
  transition: background 0.2s;
}
.risco-critico-row:hover {
  background: linear-gradient(90deg, rgba(132,0,59,0.10) 0%, transparent 40%);
}

/* ── AI Insight Card ────────────────────────────────────── */
/* Era um gradiente índigo com halo. Virou um bloco de citação: fio grosso
   à esquerda e papel. O que chama atenção é o texto, não o invólucro. */
.ai-insight-card {
  background: var(--neutral-100);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-primary);
  box-shadow: none;
  animation: insight-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ai-insight-icon {
  background: var(--color-primary);
  box-shadow: none;
}


@keyframes insight-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Progress bar mais suave ─────────────────────────────── */
.progress-bar-fill {
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════════════════════════
   ASSESSMENT — camada de preenchimento
   ══════════════════════════════════════════════════════════
   O resto do app é documento: papel, fio de 1px, canto de 2px e zero sombra.
   Esta tela não é um documento que se lê, é um formulário que se preenche por
   quinze minutos seguidos, e o pedido para ela foi explícito: SaaS premium —
   cartão branco de canto suave, sombra quase imperceptível e mais ar entre os
   blocos.

   Por isso o ajuste vive escopado em .assessment-page, não em :root. Promover
   para o produto inteiro é copiar estas quatro declarações para .sheet; voltar
   atrás é apagar o bloco. Nenhuma outra tela muda enquanto essa decisão não
   for tomada de propósito.

   A paleta segue a tabela da seção 3.1 do AGENT.md: verde para concluído,
   índigo para marca e etapa atual, âmbar para atenção, vermelho para alto e
   azul para informação. As três trilhas seguem as tintas que já eram delas:
   Negócio índigo, TI âmbar, Jurídico vermelho.                             */

.assessment-page .sheet {
  border-radius: 12px;
  border-color: var(--neutral-200);
  box-shadow: 0 1px 2px rgba(26, 24, 23, 0.05), 0 1px 3px rgba(26, 24, 23, 0.03);
}

/* O título da página não precisa de régua embaixo quando o bloco seguinte já
   é um cartão: eram duas separações para o mesmo degrau. */
.assessment-page .page-head {
  border-bottom: 0; padding-bottom: 0; margin-bottom: 18px;
}

/* ── Nota de estado (Rascunho / Em revisão / Aprovado) ─────
   Era um bloco de duas linhas com fio lateral e muito ar interno. Vira faixa
   de uma linha, com um ponto na tinta do estado: aviso contextual, não card. */
.assessment-page .state-note {
  align-items: center;
  gap: 10px 14px;
  padding: 9px 14px;
  border-left: 0;
  border: 1px solid var(--accent-100);
  border-radius: 10px;
  background: var(--accent-50);
}
/* Sem o ponto de status que vinha no ::before: o ícone já é o indicador, e os
   dois juntos pareciam defeito. A base de 12rem deixa o texto ao lado do ícone
   no celular; com 22rem ele caía sozinho para a linha de baixo. */
.assessment-page .state-note { flex-wrap: nowrap; }
.assessment-page .state-note > div { flex: 1 1 12rem; min-width: 0; }
@media (max-width: 639px) {
  .assessment-page .state-note { flex-wrap: wrap; }
  .assessment-page .state-note > .shrink-0 { flex-basis: 100%; }
}
.assessment-page .state-note-title { font-size: 12.5px; }
.assessment-page .state-note-body { font-size: 12px; margin-top: 1px; }
.assessment-page .state-note.is-espera {
  background: #fffdf5; border-color: var(--process-200);
}

/* Escopo da trilha: continua na tela, uma linha abaixo do estado e no menor
   peso possível. Quem preenche já sabe de qual área é; a frase é lembrete. */
.assessment-page .trilha-escopo {
  font-size: 12px; line-height: 1.5; color: var(--neutral-600);
  margin: 8px 2px 0; max-width: 80ch;
}

/* ── Cartões de progresso das três áreas ───────────────────
   Mesma informação da faixa anterior (categoria, estado, barra, pendências),
   em três cartões de peso igual. A tinta da área aparece em dois lugares
   pequenos — o ponto ao lado do nome e a barra — e em nenhum fundo, que é o
   que impede três blocos coloridos de competirem com a pergunta. */
.assessment-page .trilha-strip {
  display: grid; gap: 12px; grid-template-columns: 1fr;
  border: 0;
}
@media (min-width: 640px) {
  .assessment-page .trilha-strip { grid-template-columns: repeat(3, 1fr); }
}
.assessment-page .trilha-col {
  padding: 13px 15px 14px;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(26, 24, 23, 0.04);
}
.assessment-page .trilha-kicker { font-size: 11px; gap: 7px; }
.assessment-page .trilha-kicker::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--trilha-ink);
}
.assessment-page .trilha-status { font-size: 12.5px; margin-top: 7px; }
.assessment-page .trilha-bar { height: 4px; border-radius: 999px; overflow: hidden; margin-top: 9px; }
.assessment-page .trilha-bar > span { border-radius: 999px; }
.assessment-page .trilha-pend { font-size: 12px; margin-top: 7px; }

/* ── Coluna esquerda: trilha, etapas, risco ────────────────
   A navegação contextual da etapa. Etapa aberta em azul-papel com fio à
   esquerda; etapas futuras em cinza, sem peso — a lista tinha todas as etapas
   no mesmo tom e obrigava a procurar qual era a atual. */
.assessment-page .assessment-step-btn {
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  box-shadow: inset 2px 0 0 transparent;
}
.assessment-page .assessment-step-btn.active-base,
.assessment-page .assessment-step-btn.active-adq,
.assessment-page .assessment-step-btn.active-cri {
  background: var(--accent-50);
  color: var(--accent-800);
  box-shadow: inset 2px 0 0 var(--color-primary);
}

/* Alerta de risco: mora abaixo da trilha, com a tinta do nível e nada de
   fundo saturado. É contexto do que já foi respondido, não um indicador que
   disputa com a pergunta aberta. */
.assessment-risco {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--risk-fio, var(--neutral-200));
  background: var(--risk-fundo, var(--neutral-100));
}
.assessment-risco::before {
  content: ""; flex: none;
  width: 8px; height: 8px; border-radius: 999px; background: var(--risk-ponto);
}
.assessment-risco-titulo { font-size: 12px; font-weight: 600; color: var(--risk-tinta); margin: 0; }
.assessment-risco-nota { font-size: 12px; color: var(--neutral-600); margin: 1px 0 0; }
.assessment-risco.is-alto {
  --risk-ponto: var(--risk-alto); --risk-tinta: var(--risk-alto);
  --risk-fundo: var(--risk-alto-bg); --risk-fio: var(--signal-200);
}
.assessment-risco.is-medio {
  --risk-ponto: var(--risk-medio-mark); --risk-tinta: var(--risk-medio);
  --risk-fundo: #fffdf5; --risk-fio: var(--process-200);
}
.assessment-risco.is-baixo {
  --risk-ponto: var(--accent-500); --risk-tinta: var(--accent-800);
  --risk-fundo: var(--accent-50); --risk-fio: var(--accent-200);
}

/* ── Cabeçalho da etapa (progresso + seção) ────────────────
   Eram dois cartões colados: um só com a barra, outro só com o título da
   seção. Viraram um bloco — o mesmo assunto, a etapa atual. */
.assessment-etapa-num {
  font-size: 12px; font-weight: 600; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.assessment-etapa-pct {
  font-size: 12px; font-weight: 600; color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.assessment-etapa-barra {
  height: 5px; border-radius: 999px; background: var(--neutral-200); overflow: hidden;
}
.assessment-etapa-barra > div {
  height: 100%; border-radius: 999px; background: var(--color-primary);
}
.assessment-etapa-titulo {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.2; color: var(--color-text); margin: 0;
}
.assessment-etapa-deck {
  font-size: 12.5px; line-height: 1.55; color: var(--neutral-600);
  margin: 5px 0 0; max-width: 76ch;
}
/* Selo de perfil: fio e caixa alta pequena, sem fundo cheio. */
.assessment-etapa-selo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--neutral-600); border: 1px solid var(--neutral-300);
  padding: 2px 7px; border-radius: 999px;
}
.assessment-etapa-nota { font-size: 12px; color: var(--neutral-600); }

/* ── A pergunta ────────────────────────────────────────────
   O que a tela existe para fazer. O enunciado sobe para 15px semibold, a
   explicação desce para 12,5px no cinza de apoio, e as opções viram alvos de
   44px com estado selecionado inequívoco (fio azul duplo e fundo azul-papel).

   Escrito em CSS estrutural (label que contém input = opção; label que não
   contém = enunciado) e não em classe nova: são onze partials e mais de cem
   perguntas, e reescrever todas para trocar de aparência é justamente o que
   faz uma tela nunca mais poder ser ajustada. */
#assessment-panels label:not(:has(input)) {
  font-size: 15px; font-weight: 600; line-height: 1.45;
  color: var(--color-text);
}
/* Numeração por seção. O contador reinicia em cada dimensão e não conta o que
   está oculto por condicional (elemento com display:none não incrementa
   contador), então "3." é mesmo a terceira pergunta que a pessoa vê. Dá à
   seção a forma de uma lista com fim, no lugar de um rolo de campos. */
#assessment-panels [data-dimensao] { counter-reset: pergunta; }
#assessment-panels label:not(:has(input))::before {
  counter-increment: pergunta;
  content: counter(pergunta) ". ";
  color: var(--neutral-400);
  font-variant-numeric: tabular-nums;
}
/* Adquirente e Criador já trazem o número no texto da pergunta ("1. Nome do
   produto"); o contador fazia "1. 1." e numerava até rótulo de ajuda. */
#assessment-panels [data-dimensao^="adq_"] label:not(:has(input))::before,
#assessment-panels [data-dimensao^="criador_"] label:not(:has(input))::before {
  content: none;
}
#assessment-panels label:not(:has(input)) + p {
  font-size: 12.5px; line-height: 1.55; color: var(--neutral-600);
  max-width: 72ch; margin-bottom: 10px;
}
#assessment-panels label:has(> input[type="radio"]),
#assessment-panels label:has(> input[type="checkbox"]) {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--neutral-300);
  background: var(--color-surface);
  font-size: 13.5px; font-weight: 500; color: var(--neutral-700);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, color 0.12s;
}
#assessment-panels label:has(> input[type="radio"]):hover,
#assessment-panels label:has(> input[type="checkbox"]):hover {
  border-color: var(--accent-400);
  background: var(--accent-50);
}
#assessment-panels label:has(> input[type="radio"]:checked),
#assessment-panels label:has(> input[type="checkbox"]:checked) {
  border-color: var(--color-primary);
  background: var(--accent-50);
  color: var(--accent-800);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
#assessment-panels label:has(> input[type="radio"]) > input,
#assessment-panels label:has(> input[type="checkbox"]) > input {
  width: 16px; height: 16px; flex: none;
}

/* Ar entre perguntas. O space-y-5 dos painéis vinha do tempo em que a pergunta
   era uma linha de formulário; com enunciado de 15px e alvos de 44px, 20px de
   respiro fazia dois blocos parecerem um. */
#assessment-panels [data-dimensao] > * + * { margin-top: 26px; }

/* Campo de texto e select acompanham o canto dos alvos de opção, e param de
   atravessar a coluna inteira: um "Selecionar..." de 80 caracteres de largura
   é difícil de ler e ainda parece um campo de texto livre. */
.assessment-page .input { border-radius: 8px; }
#assessment-panels select,
#assessment-panels input[type="text"],
#assessment-panels input[type="date"],
#assessment-panels input[type="number"] { max-width: 34rem; }

/* ── Campo de arquivo ───────────────────────────────────── */
/* O input nativo aparecia cru ("Choose File"), destoando de todo o resto. */
.input-arquivo {
  width: 100%; font-size: 13px; color: var(--neutral-600);
  border: 1px dashed var(--neutral-300); border-radius: 10px;
  padding: 8px; background: var(--color-surface); cursor: pointer;
}
.input-arquivo:hover { border-color: var(--accent-400); }
.input-arquivo::file-selector-button {
  margin-right: 12px; padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--accent-200); background: var(--accent-50);
  color: var(--accent-700); font-weight: 600; font-size: 13px; cursor: pointer;
}
.input-arquivo::file-selector-button:hover { background: var(--accent-100); }

/* Registro: campo preenchido com o valor do assessment e ainda não editado
   à mão. Tom de sugestão (o mesmo azul claro da dica "Do assessment"), não de
   alerta: o valor pode estar certo, só falta alguém conferir. */
.registro-do-assessment textarea,
.registro-do-assessment input[type="text"],
.registro-do-assessment select {
  border-color: #7dd3fc; background: #f0f9ff;
}

/* Assessment aberto por link direto (?campo=): a pergunta que motivou o link
   (o risco que ela disparou, a pendência do relatório) pisca por um instante. */
.campo-em-foco {
  outline: 2px solid var(--accent-600); outline-offset: 4px; border-radius: 8px;
  transition: outline-color .6s ease;
}

/* Acessibilidade e responsividade compartilhadas nas jornadas focadas. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent-600);
  outline-offset: 2px;
}
[aria-invalid="true"], .campo-faltando :where(input, select, textarea) {
  border-color: var(--signal-700) !important;
}
fieldset.field > legend {
  display: block; margin-bottom: 6px; color: var(--neutral-700);
  font-size: 13px; font-weight: 500;
}
/* ── Biblioteca de relatórios ───────────────────────────── */
.report-page, .factsheet-page { max-width: 72rem; margin-inline: auto; }
/* Canvas quase branco: mantém os cartões perceptíveis sem o aspecto chapado
   do cinza uniforme. O halo usa a marca com baixa opacidade e desaparece
   antes da área de leitura, para não disputar atenção com os dados. */
#main-content:has(.report-page),
#main-content:has(.factsheet-page) {
  background:
    radial-gradient(56rem 24rem at 82% -8rem, rgba(var(--color-primary-rgb), .065), transparent 72%),
    linear-gradient(180deg, #fafbff 0%, #f7f8fc 44%, #f8f9fc 100%);
}
.report-page > .page-head, .factsheet-page > .page-head { margin-bottom: 0; }
.report-page .text-\[11px\], .factsheet-page .text-\[11px\] {
  font-size: 12px; line-height: 16px;
}
.report-scope {
  display: flex; align-items: center; gap: 9px; width: fit-content;
  padding: 2px 0 2px 12px; border-left: 2px solid var(--accent-300);
  color: var(--neutral-800); font-size: 14px;
}
.report-scope-empty { border-left-color: var(--process-200); }
.report-featured .report-row.is-featured {
  padding: 20px; border: 1px solid var(--accent-200); border-left: 3px solid var(--color-primary);
  border-radius: 12px; background: var(--color-surface); box-shadow: none;
}
.report-group { overflow: hidden; }
.report-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.report-group-title {
  margin: 0; font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-700);
}
.report-group-body .report-row:first-child { border-top: 0; }
.report-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 20px; border-top: 1px solid var(--color-divider);
  min-width: 0; background: var(--color-surface);
}
.report-row.is-featured { border-top: 0; }
.report-row.is-unavailable { background: #fcfcfd; }
.report-row-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1; }
.report-row-icon-shell {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  color: var(--accent-700);
}
.report-row.is-featured .report-row-icon-shell { border-radius: 8px; background: var(--accent-50); }
.report-row.is-unavailable .report-row-icon-shell { color: var(--neutral-600); }
.report-row-icon { width: 18px; height: 18px; }
.report-row-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 650;
  color: var(--color-text); line-height: 1.3; letter-spacing: -.01em;
}
.report-row.is-featured .report-row-title { font-size: 20px; }
.report-row.is-unavailable .report-row-title { color: var(--neutral-700); }
.report-row-description { color: var(--neutral-700); font-size: 14px; line-height: 1.45; margin-top: 3px; max-width: 62ch; }
.report-row.is-unavailable .report-row-description { color: var(--neutral-600); }
.report-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.report-download-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 8px 10px; border-radius: 8px;
  color: var(--accent-700); font-size: 14px; font-weight: 600; text-decoration: none;
}
.report-download-link:hover { background: var(--accent-50); }
.report-source-badge {
  display: inline-flex; align-items: center; min-height: 20px;
  color: var(--neutral-600); font-size: 12px; line-height: 1;
  font-weight: 650; letter-spacing: .035em; text-transform: uppercase;
}
.report-state-badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px;
  border: 1px solid var(--color-divider); border-radius: 6px;
  color: var(--neutral-700); background: var(--color-surface);
  font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.report-state-badge.is-action_required { border-color: var(--process-200); color: var(--process-800); background: var(--process-50); }
.report-state-badge.is-forbidden { border-color: var(--signal-200); color: var(--signal-700); background: var(--signal-50); }
.report-state-badge.is-not_applicable, .report-state-badge.is-unpublished { color: var(--neutral-700); background: var(--neutral-100); }
.report-reason { display: flex; gap: 7px; align-items: flex-start; margin-top: 7px; max-width: 62ch; color: var(--neutral-700); font-size: 13px; line-height: 1.45; }
.report-reason svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.report-warning { margin-top: 6px; color: var(--process-800); font-size: 13px; font-weight: 600; }
.report-seal { display: inline-flex; align-items: center; gap: 5px; color: var(--neutral-600); font-size: 12px; }
.report-seal svg { width: 12px; height: 12px; }
.governance-decision {
  overflow: hidden; padding: 22px; border: 1px solid var(--neutral-300);
  border-top: 3px solid var(--neutral-900); border-radius: 12px;
  background: var(--color-surface); box-shadow: var(--shadow-card);
}
.governance-decision-head { padding-bottom: 16px; border-bottom: 1px solid var(--color-divider); }

/* ── Ficha consolidada ─────────────────────────────────── */
.factsheet-kpis {
  gap: 0; padding-top: 0; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface); box-shadow: var(--shadow-card);
}
.factsheet-page .factsheet-kpis > * {
  min-width: 0; padding: 20px; border: 0 !important; border-radius: 0;
  background: transparent; box-shadow: none;
}
.factsheet-page .factsheet-kpis .kpi-icon { width: 44px; height: 44px; border-radius: 9px; }
.factsheet-page .factsheet-kpis .kpi-icon > svg { width: 21px; height: 21px; }
.factsheet-page .factsheet-kpis .kpi-num { font-size: 30px; }
.factsheet-page .factsheet-kpis .kpi-num .text-\[34px\] { font-size: inherit; }
.factsheet-page .factsheet-kpis .kpi-label { margin-top: 2px; color: var(--neutral-700); }
.factsheet-page .factsheet-kpis .kpi-legend { color: var(--neutral-600); }
.factsheet-panel, .factsheet-detail-card { box-shadow: none; }
.factsheet-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px; border-bottom: 1px solid var(--color-divider); background: var(--color-surface);
}
.factsheet-detail-card { padding: 20px; }
.factsheet-dl > div {
  display: grid; grid-template-columns: minmax(8.5rem, .8fr) minmax(0, 1.2fr);
  align-items: start; gap: 12px; padding: 9px 0; border-top: 1px solid var(--neutral-100);
}
.factsheet-dl > div:first-child { border-top: 0; padding-top: 0; }
.factsheet-dl > div:last-child { padding-bottom: 0; }
.factsheet-dl dt { color: var(--neutral-600); }
.factsheet-dl dd { max-width: none !important; margin: 0; color: var(--neutral-900); text-align: left !important; overflow-wrap: anywhere; }
.factsheet-list > li { padding: 12px 20px; }
.factsheet-list > li + li { border-top: 1px solid var(--neutral-100); }
.factsheet-risk-counts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.factsheet-risk-counts > span {
  display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px;
  border: 1px solid transparent; border-radius: 9999px; font-size: 12px; font-weight: 600;
}

/* Conteúdo largo rola no próprio bloco; a página focada não ganha overflow horizontal. */
#main-content, .assessment-page, .report-row, .report-row-main { max-width: 100%; }
:where(.assessment-page, #main-content) :where(table, pre, code) { overflow-wrap: anywhere; }
/* Cabeçalho quebra entre palavras, nunca no meio: com a regra acima a coluna
   espremida virava "AÇÕE / S" (auditoria visual de 27/10/2026). */
:where(.assessment-page, #main-content) :where(th) { overflow-wrap: normal; }

@media (max-width: 639px) {
  .app-topbar a, .app-topbar button, .sidebar-nav a, .sidebar-nav button {
    min-width: 44px; min-height: 44px;
  }
  .report-row p a, .page-crumbs > a {
    display: inline-flex; align-items: center; min-width: 44px; min-height: 44px;
  }
  :where(.assessment-page, #main-content) :where(a, button, summary, select),
  :where(.assessment-page, #main-content) label:has(input[type="radio"]),
  :where(.assessment-page, #main-content) label:has(input[type="checkbox"]) {
    min-height: 44px;
  }
  .report-row, .report-row.is-featured { align-items: stretch; flex-direction: column; padding: 16px; }
  .report-row-main { gap: 12px; }
  .report-row-icon-shell { width: 32px; height: 32px; }
  .report-row-actions { justify-content: stretch; }
  .report-row-actions .btn-primary,
  .report-row-actions .btn-secondary,
  .report-row-actions .report-download-link { width: 100%; min-height: 44px; }
  .report-group-head, .factsheet-panel-head { align-items: flex-start; flex-direction: column; }
  .governance-decision { padding: 18px 16px; }
  .factsheet-page .factsheet-kpis > * { padding: 16px; }
  .factsheet-dl > div { grid-template-columns: 1fr; gap: 3px; }
  .factsheet-risk-counts { width: 100%; }
  .factsheet-list > li { padding: 12px 16px; }
  .report-page .report-row-actions { padding-right: 56px; }
}

@media (max-width: 479px) {
  .factsheet-page .factsheet-kpis { grid-template-columns: 1fr; }
  .factsheet-page .factsheet-kpis > .factsheet-kpi + .factsheet-kpi {
    border-top: 1px solid var(--color-divider) !important;
  }
  .factsheet-page .factsheet-kpis .kpi-icon { display: flex; }
  .factsheet-page .factsheet-kpis > .factsheet-kpi {
    grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px;
  }
  .factsheet-page .factsheet-kpis > .factsheet-kpi > * { grid-column: 2; }
  .factsheet-page .factsheet-kpis > .factsheet-kpi > .kpi-icon {
    grid-column: 1; grid-row: 1 / span 3;
  }
  .factsheet-page .factsheet-kpis > .factsheet-kpi > .kpi-num { grid-row: 1; }
  .factsheet-page .factsheet-kpis > .factsheet-kpi > .kpi-label { grid-row: 2; }
  .factsheet-page .factsheet-kpis > .factsheet-kpi > .kpi-legend { grid-row: 3; }
}

@media (min-width: 480px) and (max-width: 1023px) {
  .factsheet-page .factsheet-kpis > :nth-child(even) {
    border-left: 1px solid var(--color-divider) !important;
  }
  .factsheet-page .factsheet-kpis > :nth-child(n + 3) {
    border-top: 1px solid var(--color-divider) !important;
  }
}

@media (min-width: 1024px) {
  .factsheet-page .factsheet-kpis > .factsheet-kpi + .factsheet-kpi {
    border-left: 1px solid var(--color-divider) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* "Onde encontro isso?" nas perguntas do assessment (guiado e formulário). */
details.orientacao { margin: 6px 0 10px; font-size: 12.5px; color: var(--neutral-700); }
details.orientacao > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  color: var(--color-primary); font-weight: 600; min-height: 28px;
}
@media (max-width: 639px) {
  details.orientacao > summary { min-height: 44px; }
}
details.orientacao > summary::-webkit-details-marker { display: none; }
/* list-none tira o triângulo no Firefox e no Chrome; o Safari usa o marcador
   próprio do webkit. Vale para todo summary com list-none (Documentos e
   Versões do assessment, por exemplo), não só para a orientação. */
summary.list-none::-webkit-details-marker { display: none; }
details.orientacao > summary::before { content: "?"; display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 10px; }
details.orientacao[open] > summary { margin-bottom: 6px; }
details.orientacao dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0;
  padding: 10px 12px; border-radius: 10px; background: var(--accent-50); border: 1px solid var(--accent-100);
}
details.orientacao dt { font-weight: 600; color: var(--neutral-700); }
details.orientacao dd { margin: 0; }
details.orientacao .contents { display: contents; }

/* ── Copiloto (components/copiloto_painel.html) ─────────────────────────── */
.copiloto-botao {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem 1rem; border-radius: 9999px;
  background: var(--color-navy); color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: 0 8px 24px rgba(var(--color-navy-rgb), .25);
}
.copiloto-botao:hover { background: var(--color-primary); }
.copiloto-painel {
  position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column;
  background: var(--color-surface); border-left: 1px solid var(--color-border);
}
@media (min-width: 640px) {
  .copiloto-painel { inset: 0 0 0 auto; width: 420px; box-shadow: -12px 0 32px rgba(var(--color-navy-rgb), .12); }
}
.copiloto-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; border-bottom: 1px solid var(--color-divider); color: var(--color-ink);
}
.copiloto-icone {
  width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: .375rem; color: var(--color-muted);
}
.copiloto-icone:hover { background: var(--neutral-100); color: var(--color-ink); }
.copiloto-corpo { flex: 1; overflow-y: auto; padding: 1rem; }
.copiloto-rotulo { font-size: 12px; font-weight: 600; color: var(--color-muted); margin-bottom: .5rem; }
.copiloto-sugestao {
  display: block; width: 100%; text-align: left; font-size: 14px;
  padding: .5rem .75rem; border: 1px solid var(--color-border); border-radius: .5rem; color: var(--color-ink);
}
.copiloto-sugestao:hover { border-color: var(--color-primary); color: var(--color-primary); }
.copiloto-conversa { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: .375rem; font-size: 14px; }
.copiloto-conversa:hover { background: var(--neutral-100); }
/* O pre-wrap fica no texto: no balão ele preservava as quebras de linha do
   template Alpine em volta do <p> e a pergunta curta virava um cartão alto. */
.copiloto-msg-usuario {
  width: fit-content; max-width: 85%; margin-left: auto;
  padding: .5rem .875rem; border-radius: .875rem .875rem .25rem .875rem;
  background: var(--accent-50); color: var(--color-ink); font-size: 14px; line-height: 1.45;
}
.copiloto-msg-usuario p { white-space: pre-wrap; }
.copiloto-msg-assistente { font-size: 14px; color: var(--color-ink); }
.copiloto-texto p + p, .copiloto-texto p + ul, .copiloto-texto ul + p { margin-top: .5rem; }
.copiloto-lista { list-style: disc; padding-left: 1.25rem; }
/* Tabela da resposta: rola na horizontal dentro do painel, sem alargar a página. */
.copiloto-tabela-caixa { overflow-x: auto; margin-top: .5rem; }
.copiloto-texto p + .copiloto-tabela-caixa, .copiloto-tabela-caixa + p,
.copiloto-lista + .copiloto-tabela-caixa, .copiloto-tabela-caixa + .copiloto-lista { margin-top: .5rem; }
.copiloto-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.copiloto-tabela th {
  text-align: left; font-weight: 600; color: var(--color-muted);
  border-bottom: 1px solid var(--color-border); padding: .25rem .5rem .25rem 0;
}
.copiloto-tabela td { border-bottom: 1px solid var(--color-divider); padding: .35rem .5rem .35rem 0; vertical-align: top; }
.copiloto-cit {
  font-size: 12px; font-weight: 600; color: var(--color-primary);
  vertical-align: super; text-decoration: none;
}
.copiloto-fontes { margin-top: .75rem; padding-top: .5rem; border-top: 1px solid var(--color-divider); font-size: 12px; }
.copiloto-fontes > p { font-weight: 600; color: var(--color-muted); margin-bottom: .25rem; }
.copiloto-fontes .copiloto-cit { font-size: 12px; vertical-align: baseline; font-weight: 500; }
.copiloto-ferramenta { display: flex; align-items: center; gap: .375rem; font-size: 12px; color: var(--color-muted); margin-bottom: .25rem; }
.copiloto-pensando { color: var(--color-muted); }
.copiloto-erro { font-size: 13px; color: var(--signal-600); }
.copiloto-cartao { margin-top: .5rem; padding: .75rem; border: 1px solid var(--color-border); border-radius: .5rem; background: var(--color-surface, #fff); font-size: 13px; }
.copiloto-cartao-titulo { font-weight: 600; color: var(--color-ink); margin-bottom: .25rem; }
.copiloto-cartao-alvo, .copiloto-cartao-nota { font-size: 12px; color: var(--color-muted); margin-bottom: .5rem; }
.copiloto-campo { display: block; margin-bottom: .5rem; color: var(--color-ink); }
.copiloto-campo input:not([type=checkbox]), .copiloto-campo select, .copiloto-campo textarea,
.copiloto-linha select, .copiloto-linha input:not([type=checkbox]), .copiloto-linha textarea {
  display: block; width: 100%; margin-top: .125rem; padding: .375rem .5rem; font-size: 13px;
  border: 1px solid var(--color-border); border-radius: .375rem;
}
.copiloto-campo legend { margin-bottom: .125rem; }
.copiloto-opcao { display: flex; align-items: flex-start; gap: .375rem; font-weight: 400; }
.copiloto-linha { padding: .5rem 0; border-top: 1px solid var(--color-divider); }
.copiloto-cartao-erro { color: var(--signal-600); margin-bottom: .5rem; }
.copiloto-cartao-botoes { display: flex; gap: .5rem; }
.copiloto-cartao-confirmar { padding: .375rem .75rem; border-radius: .375rem; background: var(--color-primary); color: #fff; font-weight: 600; }
.copiloto-cartao-confirmar:disabled, .copiloto-cartao-descartar:disabled { opacity: .5; }
.copiloto-cartao-descartar { padding: .375rem .75rem; border-radius: .375rem; border: 1px solid var(--color-border); color: var(--color-ink); }
.copiloto-cartao-feito { display: flex; align-items: center; gap: .375rem; color: var(--color-ink); }
.copiloto-cartao-descartado { color: var(--color-muted); }
/* Rascunho: o cartão diz que nada foi gravado, e gravar pede uma segunda confirmação. */
.copiloto-cartao-selo {
  display: inline-block; margin-bottom: .375rem; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 600; color: var(--process-800); background: var(--process-50);
  border: 1px solid var(--process-200);
}
.copiloto-aplicar { font-weight: 600; color: var(--color-ink); }
.copiloto-cartao-confirmacao {
  margin-top: .5rem; padding: .625rem; border-radius: .375rem;
  border: 1px solid var(--accent-200); background: var(--accent-50);
}
.copiloto-cartao-pergunta { margin-bottom: .5rem; color: var(--color-ink); font-weight: 600; }
/* Contexto atual do painel: sistema, tela e pergunta usados na resposta. */
.copiloto-contexto {
  padding: .5rem 1rem; border-bottom: 1px solid var(--color-divider);
  background: var(--neutral-100); font-size: 12.5px; line-height: 1.4; color: var(--color-ink);
}
.copiloto-contexto-rotulo {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-muted);
}
.copiloto-marco {
  margin: .25rem 0; padding: .375rem .625rem; border-radius: .375rem; font-size: 12px;
  color: var(--color-muted); background: var(--neutral-100); border: 1px dashed var(--color-border);
}
.copiloto-entrada { display: flex; gap: .5rem; align-items: flex-end; padding: .75rem 1rem 0; border-top: 1px solid var(--color-divider); }
.copiloto-entrada textarea {
  flex: 1; resize: none; font-size: 14px; padding: .5rem .75rem;
  border: 1px solid var(--color-border); border-radius: .5rem;
}
.copiloto-entrada textarea:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }
.copiloto-enviar {
  width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: .5rem; background: var(--color-navy); color: #fff;
}
.copiloto-enviar:disabled { opacity: .4; }
.copiloto-aviso { font-size: 12px; color: var(--color-muted); padding: .375rem 1rem .75rem; }

/* ── Personagem do Copiloto (components/copiloto_personagem.html) ────────── */
/* O robozinho de fone (opção C, 30/10/2026). Uma cabeça só; data-estado
   mostra as partes da pose e muda olhos e boca. Movimentos pequenos e lentos;
   parados para quem pediu menos movimento. */
.copiloto-persona {
  color: var(--color-ink); overflow: visible; flex-shrink: 0;
  /* Verde-água do destaque, o contorno claro do rosto e o rosado das bochechas. */
  --copiloto-destaque: #14b8a6;
  --copiloto-contorno: #dce6f0;
  --copiloto-bochecha: #ffb4c2;
}
.copiloto-persona-sm { width: 44px; height: 44px; }
.copiloto-persona-lg { width: 120px; height: 120px; }
.copiloto-persona .copiloto-p-cheio { fill: currentColor; stroke: none; }
.copiloto-persona .copiloto-p-rosto { fill: var(--color-surface); stroke: var(--copiloto-contorno); }
.copiloto-persona .copiloto-p-tampa { fill: var(--color-surface); }
.copiloto-persona .copiloto-p-luz { fill: var(--copiloto-destaque); stroke: none; }
.copiloto-persona .copiloto-p-broto { stroke: var(--copiloto-destaque); }
.copiloto-persona .copiloto-p-brilho { fill: var(--color-surface); stroke: none; }
.copiloto-persona .copiloto-p-bochecha { fill: var(--copiloto-bochecha); stroke: none; opacity: .7; }
.copiloto-persona .copiloto-p-linhas { stroke: var(--copiloto-destaque); }
.copiloto-persona .copiloto-p-check .copiloto-p-traco { stroke: var(--color-surface); }
.copiloto-persona .copiloto-p-parte,
.copiloto-persona .copiloto-p-feliz { opacity: 0; transition: opacity .45s ease; }
.copiloto-persona .copiloto-p-olhos,
.copiloto-persona .copiloto-p-boca { transition: opacity .3s ease; }
.copiloto-persona .copiloto-p-figura,
.copiloto-persona .copiloto-p-cabeca,
.copiloto-persona .copiloto-p-olhos,
.copiloto-persona .copiloto-p-boca,
.copiloto-persona .copiloto-p-lupa {
  transform-box: fill-box;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1), opacity .3s ease;
}
.copiloto-persona .copiloto-p-figura,
.copiloto-persona .copiloto-p-cabeca { transform-origin: 50% 100%; }
.copiloto-persona .copiloto-p-olhos,
.copiloto-persona .copiloto-p-boca { transform-origin: 50% 50%; }
.copiloto-persona .copiloto-p-traco {
  stroke-dasharray: 32; stroke-dashoffset: 32;
  transition: stroke-dashoffset .5s ease .15s;
}

/* Partes de cada pose */
.copiloto-persona[data-estado="pesquisando"] .copiloto-p-lupa,
.copiloto-persona[data-estado="analisando"] .copiloto-p-pontos,
.copiloto-persona[data-estado="respondendo"] .copiloto-p-balao,
.copiloto-persona[data-estado="resultado"] :is(.copiloto-p-check, .copiloto-p-feliz),
.copiloto-persona[data-estado="alerta"] .copiloto-p-escudo,
.copiloto-persona[data-estado="executando"] .copiloto-p-notebook { opacity: 1; }
.copiloto-persona[data-estado="resultado"] .copiloto-p-olhos { opacity: 0; }

/* Aguardando: flutua devagar e pisca */
.copiloto-persona[data-estado="aguardando"] .copiloto-p-figura { animation: copiloto-flutua 4s ease-in-out infinite; }
.copiloto-persona[data-estado="aguardando"] .copiloto-p-olhos { animation: copiloto-pisca 5s infinite; }
/* Pesquisando: cabeça inclinada, olhar para a lupa que passa devagar */
.copiloto-persona[data-estado="pesquisando"] .copiloto-p-cabeca { transform: rotate(6deg); }
.copiloto-persona[data-estado="pesquisando"] .copiloto-p-olhos { transform: translate(5px, 4px); }
.copiloto-persona[data-estado="pesquisando"] .copiloto-p-lupa { animation: copiloto-lupa 2.6s ease-in-out infinite alternate; }
/* Analisando: olhar para cima, pontinhos acendendo */
.copiloto-persona[data-estado="analisando"] .copiloto-p-cabeca { transform: rotate(-4deg); }
.copiloto-persona[data-estado="analisando"] .copiloto-p-olhos { transform: translate(4px, -5px) scale(.9); }
.copiloto-persona[data-estado="analisando"] .copiloto-p-boca { transform: scaleX(.6); }
.copiloto-persona[data-estado="analisando"] .copiloto-p-pontos circle { animation: copiloto-ponto 1.4s ease-in-out infinite; }
.copiloto-persona[data-estado="analisando"] .copiloto-p-pontos circle:nth-child(2) { animation-delay: .2s; }
.copiloto-persona[data-estado="analisando"] .copiloto-p-pontos circle:nth-child(3) { animation-delay: .4s; }
/* Respondendo: fala no microfone */
.copiloto-persona[data-estado="respondendo"] .copiloto-p-boca { animation: copiloto-fala .5s ease-in-out infinite alternate; }
.copiloto-persona[data-estado="respondendo"] .copiloto-p-mic { animation: copiloto-ponto 1s ease-in-out infinite; }
/* Resultado: olhos sorrindo, pulinho e o traço do check */
.copiloto-persona[data-estado="resultado"] .copiloto-p-figura { animation: copiloto-pulo .6s ease-out 1; }
.copiloto-persona[data-estado="resultado"] .copiloto-p-traco { stroke-dashoffset: 0; }
/* Alerta: olhos arregalados, boca reta */
.copiloto-persona[data-estado="alerta"] .copiloto-p-olhos { transform: scale(1.12); }
.copiloto-persona[data-estado="alerta"] .copiloto-p-boca { transform: scaleY(.2); }
/* Executando: olhando para o notebook */
.copiloto-persona[data-estado="executando"] .copiloto-p-cabeca { transform: translateY(-6px); }
.copiloto-persona[data-estado="executando"] .copiloto-p-olhos { transform: translateY(5px); }
.copiloto-persona[data-estado="executando"] .copiloto-p-linhas { animation: copiloto-linhas 1.6s ease-in-out infinite; }

@keyframes copiloto-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes copiloto-pisca { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes copiloto-lupa { from { transform: translateX(-8px); } to { transform: translateX(6px); } }
@keyframes copiloto-ponto { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes copiloto-fala { from { transform: scaleY(1); } to { transform: scaleY(1.8); } }
@keyframes copiloto-pulo { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }
@keyframes copiloto-linhas { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .copiloto-persona, .copiloto-persona * { animation: none !important; transition: none !important; }
}