/* Themis — estilo simples e funcional */

:root {
  /* Paleta oficial Themis */
  --purple-50:#F7F4F9; --purple-100:#ECE6F1; --purple-200:#D8CEE2; --purple-300:#B19DC5;
  --purple-500:#6B4492; --purple-600:#3C096F; --purple-800:#2E0754; --purple-900:#240543;
  --laranja:#E95D37; --laranja-escuro:#CD5230; --laranja-claro:#FDEFEB; --orange-900:#5D2516;
  --azul: #3C096F;          /* indigo suave: o acento que chama atenção sem pesar */
  --azul-escuro: #2E0754;   /* indigo para hover / texto de destaque */
  --azul-suave: #ECE6F1;    /* fundo de destaque leve (item ativo, avisos) */
  --tinta: #0F0A18;         /* quase-preto suave (menos duro) */
  --cinza: #6B6275;
  --cinza-claro: #DED8E3;   /* borda mais leve */
  --fundo: #F8F6FB;         /* off-white arejado */
  --branco: #ffffff;
  --verde: #15803D;
  --vermelho: #B42318;      /* rosa-vermelho suave (em vez do vermelho duro) */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--tinta);
  line-height: 1.5;
}

/* Barra superior */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-claro);
  padding: 14px 28px;
}
.brand { font-size: 1.2rem; font-weight: 700; color: var(--tinta); text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: 18px; }
.navlink { color: var(--cinza); text-decoration: none; font-size: .95rem; }
.navlink:hover { color: var(--azul); }

/* Conteúdo */
.container { max-width: 900px; margin: 0 auto; padding: 28px; }

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 16px;
  margin-bottom: 18px;
}
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.2rem; margin: 0 0 12px; }

.muted { color: var(--cinza); }
.small { font-size: .85rem; }

/* Status do método */
.metodo-status {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
  padding: 10px 14px; border-radius: 8px; font-size: .9rem; margin-bottom: 24px;
}
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); display: inline-block; }

/* Cartões de cliente */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card {
  display: block; background: var(--branco); border: 1px solid var(--cinza-claro);
  border-radius: 10px; padding: 18px; text-decoration: none; color: inherit;
  transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); border-color: #c7d2fe; }
.card h3 { margin: 0 0 6px; }
.card p { margin: 2px 0; }

/* Estado vazio */
.empty {
  background: var(--branco); border: 1px dashed var(--cinza-claro);
  border-radius: 10px; padding: 40px; text-align: center; color: var(--cinza);
}
.empty .btn { margin-top: 12px; }

/* Blocos de detalhe */
.card-block {
  background: var(--branco); border: 1px solid var(--cinza-claro);
  border-radius: 12px; padding: 22px; margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(20,20,43,.04), 0 6px 20px rgba(20,20,43,.035);
}
.dados { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 0; }
.dados dt { font-weight: 600; color: var(--cinza); }
.dados dd { margin: 0; }

.roadmap { list-style: none; padding: 0; margin: 0; }
.roadmap li { padding: 10px 0; border-bottom: 1px solid var(--cinza-claro); }
.roadmap li:last-child { border-bottom: none; }
.badge {
  display: inline-block; background: #ECE6F1; color: var(--azul-escuro);
  font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-right: 10px;
}
.label-essencial {
  color: var(--azul);
  font-weight: 700;
}
.badge-essencial {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .02em;
  border: 1px solid #f59e0b;
}

/* Formulário */
.form { background: var(--branco); border: 1px solid var(--cinza-claro); border-radius: 10px; padding: 24px; }
.form label { display: block; margin-bottom: 16px; font-weight: 600; }
.form input, .form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--cinza-claro); border-radius: 8px; font: inherit; font-weight: 400;
}
.form textarea {
  /* a altura é ajustada ao conteúdo via JS (base.html); sem barra de rolagem */
  overflow-y: hidden; resize: vertical; min-height: 2.6em; line-height: 1.5;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px #e4e5fd; }
.req { color: var(--vermelho); }
.form-actions { display: flex; gap: 12px; margin-top: 8px; }

/* Botões */
.btn {
  display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--cinza-claro);
  background: var(--branco); color: var(--tinta); text-decoration: none; font: inherit; font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: #f4f4f8; border-color: #dcdce6; }
.btn-primary { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 1px 2px rgba(60,9,111,.18); }
.btn-primary:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.btn-danger { background: #fff; border-color: #f6c9d2; color: var(--vermelho); margin-top: 8px; }
.btn-danger:hover { background: #fff1f3; }
.btn-mini { padding: 5px 10px; font-size: .8rem; }

/* Botão Salvar com feedback de estado:
   salvo = verde suave; editado = âmbar suave ("precisa salvar"). Tons leves, sem peso. */
.btn-salvar { background: #eafaf2; border-color: #bde9d3; color: #0f7a52; font-weight: 600; }
.btn-salvar:hover { background: #ddf5e8; border-color: #a6e0c2; color: #0f7a52; }
.btn-salvar.sujo { background: #fdf1e3; border-color: #f3d6a8; color: #b45309; }
.btn-salvar.sujo:hover { background: #fbe9d2; border-color: #efca8e; color: #b45309; }

/* Botão de ação (gerar, buscar, analisar...): indigo suave sólido — chama atenção sem pesar. */
.btn-acao { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(60,9,111,.18); }
.btn-acao:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.btn-acao-ok { background: #eafaf2; border-color: #bde9d3; color: #0f7a52; font-weight: 600; }
.btn-acao-ok:hover { background: #ddf5e8; border-color: #a6e0c2; color: #0f7a52; }

/* Repositório de Provas — caixinha de adição rápida */
.provas-add-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  padding: 10px 12px;
  background: #f0fdf4;
  border: 1px dashed #86efac;
  border-radius: 8px;
}
.provas-add-box textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #bbf7d0;
  background: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .9rem;
  color: var(--tinta);
}
.provas-add-box textarea:focus {
  outline: none;
  border-color: #4ade80;
  box-shadow: 0 0 0 3px #dcfce7;
}
.btn-provas-add {
  align-self: flex-end;
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
  font-weight: 600;
}
.btn-provas-add:hover { background: #bbf7d0; border-color: #4ade80; color: #166534; }

/* Núcleo de influência */
.bloco-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bloco-head h2 { margin: 0; }
.pill { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pill-ia { background: #e9f9f1; color: #0f7a52; }
.form-nucleo { margin-top: 14px; }
.form-nucleo label { margin-bottom: 14px; }
.form-nucleo textarea { font-weight: 400; }
.card-block form + form { margin-top: 14px; }

/* Formulário em linha (período do calendário) */
.linha-form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.inline select { padding: 8px 10px; border: 1px solid var(--cinza-claro); border-radius: 8px; font: inherit; }

/* Tabela do calendário */
.tabela-wrap { overflow-x: auto; margin-top: 12px; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cinza-claro); vertical-align: top; }
.tabela th { background: #F1EDF4; color: var(--cinza); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.tabela tr:hover td { background: #fafbfc; }
.nowrap { white-space: nowrap; }
.tag-gatilho {
  display: inline-block; background: #ECE6F1; color: var(--azul-escuro);
  font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 6px;
}

/* Formulário em duas colunas (métricas) */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }

/* Histórico de análises */
.analise-item { border: 1px solid var(--cinza-claro); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.analise-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.metricas-linha { display: flex; flex-wrap: wrap; gap: 14px; font-size: .88rem; color: var(--tinta); margin-bottom: 8px; }
.metricas-linha span { background: #f3f4f6; padding: 3px 10px; border-radius: 6px; }
.diagnostico { font-weight: 600; margin: 6px 0; }

/* Aviso e busca do momento */
.aviso-box {
  background: var(--azul-suave); border: 1px solid #D8CEE2; color: #2E0754;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: .9rem;
}
.momento-box {
  background: #F1EDF4; border: 1px dashed var(--cinza-claro);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
}
.momento-box strong { display: block; margin-bottom: 2px; }
.momento-box form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* Fontes consultadas (links para validar) */
.fontes-box {
  margin-top: 12px; padding: 10px 12px; background: #fff;
  border: 1px solid var(--cinza-claro); border-radius: 8px;
}
.fontes-lista { margin: 6px 0 0; padding-left: 18px; }
.fontes-lista li { margin-bottom: 4px; font-size: .88rem; }
.fontes-lista a { color: var(--azul); word-break: break-all; }
.fonte-idade { font-size: .78rem; color: var(--cinza); margin-left: 6px; white-space: nowrap; }

/* Resultado da busca do momento (assuntos + ligação com os pilares) */
.momento-resultado {
  margin-top: 12px; padding: 10px 12px; background: #fff;
  border: 1px solid var(--cinza-claro); border-radius: 8px;
}
.momento-lista { margin: 6px 0 10px; padding-left: 18px; }
.momento-lista li { margin-bottom: 10px; font-size: .9rem; }
.momento-item { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.momento-item input { margin-top: 3px; flex-shrink: 0; }
.liga { font-size: .82rem; color: #15803d; }
.fonte-item { font-size: .82rem; color: var(--azul); word-break: break-all; }
details.fontes-box > summary { cursor: pointer; font-weight: 700; }
details.fontes-box[open] > summary { margin-bottom: 4px; }
.tag-atemporal {
  background: #ECE6F1; color: #2E0754; font-size: .68rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
}

/* Aviso de revisão de fatos (anti-alucinação) */
.aviso-revisao {
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  border-radius: 8px; padding: 10px 14px; margin: 4px 0 12px; font-size: .9rem;
}
.aviso-revisao code { background: #fef3c7; padding: 1px 5px; border-radius: 4px; }

/* Painel de revisão antes de publicar (checklist + aviso honesto + fontes) */
.painel-revisao {
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px;
  padding: 14px 16px; margin: 4px 0 14px;
}
.painel-revisao h3 { margin: 0 0 8px; color: #92400e; font-size: 1rem; }
.painel-revisao code { background: #fef3c7; padding: 1px 5px; border-radius: 4px; }
.pendencias-titulo { margin: 4px 0; color: #92400e; }
.checklist { list-style: none; margin: 6px 0; padding: 0; }
.checklist li { margin-bottom: 6px; }
.checklist label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; cursor: pointer; }
.checklist input { margin-top: 4px; }
.campo-tag {
  background: #92400e; color: #fff; font-size: .7rem; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.checklist .marcador { color: #7c2d12; }
.aviso-honesto {
  background: #fff; border-left: 3px solid #f59e0b; padding: 8px 12px;
  margin: 10px 0; font-size: .88rem; color: #7c2d12;
}
.fontes-nicho { margin-top: 6px; }
.fontes-nicho summary { cursor: pointer; font-weight: 600; color: #92400e; }
.aviso-freio {
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: .88rem;
}

/* Caixa de importar entrevista/formulário */
.import-box {
  background: #F1EDF4; border: 1px dashed var(--cinza-claro);
  border-radius: 8px; padding: 10px 14px; margin: 8px 0 14px;
}
.import-box > summary { cursor: pointer; font-weight: 700; }
.import-box[open] > summary { margin-bottom: 6px; }

/* Análise de coerência (diagnóstico do núcleo) */
.analise-coerencia { margin-top: 14px; }
.reuniao-titulo { font-size: 1.02rem; margin: 6px 0 2px; }
.diagnostico-box {
  margin-top: 12px; padding: 12px 14px; background: #F7F4F9;
  border: 1px solid #D8CEE2; border-radius: 10px;
}
.diagnostico-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.diagnostico-texto { font-size: .91rem; color: var(--tinta); }
.diagnostico-texto p { margin: 2px 0; }

/* Badge de campo */
.tag-campo {
  display: inline-block; background: #ECE6F1; color: #2E0754;
  border: 1px solid #D8CEE2; border-radius: 4px; padding: 1px 7px;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  margin-right: 4px; vertical-align: middle; white-space: nowrap;
}

/* ── Seções do diagnóstico ── */
.diag-section { margin-top: 12px; }
.diag-section-title {
  display: inline-block; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 10px; border-radius: 4px; margin-bottom: 6px;
}
.diag-evolucao  .diag-section-title { background: #F0FDF4; color: #065F46; border-left: 3px solid #34D399; }
.diag-validados .diag-section-title { background: #DCFCE7; color: #166534; }
.diag-validados .diag-bullet { color: #166534; }
/* Nomes de campo no diagnóstico: negrito, sem caixa (a caixa fica só nos títulos das seções).
   Não afeta o .tag-campo usado fora do diagnóstico, como os chips do Garimpo. */
.diagnostico-texto .tag-campo { background: transparent; border: none; padding: 0; font-weight: 700; color: inherit; }
.diag-fortes    .diag-section-title { background: #DCFCE7; color: #166534; }
.diag-fortes    .tag-campo { color: #166534; }
.diag-melhorar .diag-section-title { background: #FEF3C7; color: #92400E; }
.diag-melhorar .tag-campo { color: #92400e; }
.diag-proximo  .diag-section-title { background: #EFF6FF; color: #1E40AF; }
.diag-faltam   .diag-section-title { background: #F3F4F6; color: #374151; }
.diag-faltam   .tag-campo { color: #374151; }
.diag-section-body { padding: 0; }

/* Card de cada "ponto a melhorar" */
.diag-item {
  border: 1px solid #E5E7EB; border-radius: 8px;
  padding: 10px 13px; margin-bottom: 8px; background: #FAFAFA;
}
.diag-item-campo { margin: 0 0 5px; font-size: .9rem; line-height: 1.4; }
.diag-sublabel  { margin: 3px 0 3px 6px; font-size: .87rem; line-height: 1.55; }
.diag-obs { font-weight: 800; color: #92400e; }
.diag-sug { font-weight: 800; color: #065F46; }
.diag-met { font-weight: 800; color: #1E40AF; }

/* Bullet simples (pontos fortes / informações faltam) */
.diag-bullet { margin: 3px 0; font-size: .9rem; line-height: 1.55; padding-left: 4px; }
.diag-bullet::before { content: "• "; color: var(--cinza); }

/* Texto livre (corpo do próximo passo, notas) */
.diag-livre { margin: 4px 0; font-size: .9rem; line-height: 1.6; font-style: italic; color: #374151; }

/* ── Linha do tempo de evolução ── */
.diag-historico { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #E5E7EB; }
.diag-historico-titulo { font-size: .78rem; font-weight: 600; color: var(--cinza); display: block; margin-bottom: 8px; }
.diag-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.diag-tl-item {
  display: flex; flex-direction: column; align-items: center;
  background: #F9FAFB; border: 1px solid #E5E7EB;
  border-radius: 8px; padding: 5px 12px; min-width: 76px; text-align: center;
}
.diag-tl-item.atual { background: #EFF6FF; border-color: #BFDBFE; }
.diag-tl-data  { font-size: .72rem; color: var(--cinza); }
.diag-tl-count { font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: var(--tinta); }
.diag-tl-item.atual .diag-tl-count { color: #1D4ED8; }
.diag-tl-label { font-size: .68rem; color: var(--cinza); }
.diag-tl-seta  { color: #9CA3AF; font-size: .85rem; }

/* Dicas de ajuda (embaixo de cada campo/seção) */
.dica {
  display: block; font-weight: 400; font-size: .82rem; color: var(--cinza);
  margin: 2px 0 6px; line-height: 1.4;
}
.dica-secao {
  display: block; font-size: .9rem; color: var(--cinza); line-height: 1.5;
  background: #F7F4F9; border-left: 3px solid var(--azul); padding: 8px 12px;
  border-radius: 6px; margin: 4px 0 16px;
}

/* Rodapé */
.footer { text-align: center; color: var(--cinza); font-size: .8rem; padding: 24px; }

/* ===== Shell global: menu lateral em todas as páginas ===== */
.app-shell { display: flex; align-items: flex-start; gap: 26px; max-width: 1240px; margin: 0 auto; padding: 24px 28px; }
.app-sidebar { width: 232px; flex-shrink: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.app-sidebar .brand { display: block; font-size: 1.12rem; padding: 2px 6px 0; }
.app-nav { display: flex; flex-direction: column; gap: 3px; background: var(--branco); border: 1px solid var(--cinza-claro); border-radius: 12px; padding: 6px; box-shadow: 0 1px 2px rgba(20,20,43,.04), 0 6px 20px rgba(20,20,43,.035); }
.app-navlink { display: block; padding: 9px 12px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .92rem; }
.app-navlink:hover { background: var(--fundo); }
.app-navlink.active { background: var(--azul-suave); color: var(--azul-escuro); }
.app-novo { margin-top: 4px; text-align: center; }
.app-content { flex: 1; min-width: 0; }
.page-plain { display: block; }   /* páginas sem menu lateral (ex.: lista de clientes) */

/* Indicador de modelos ativos (topo da ficha) */
.modelos-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
.modelo-chip {
  font-size: .78rem; color: var(--tinta); background: var(--branco);
  border: 1px solid var(--cinza-claro); border-radius: 999px; padding: 3px 10px;
}
.modelo-chip strong { color: var(--azul-escuro); }
/* Aviso de custo perto de botões pesados */
.custo-aviso { font-size: .8rem; color: #b45309; }
.custo-forte { background: #fdf1e3; border: 1px solid #f3d6a8; color: #92400e;
  border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: .85rem; }

/* Dois finais do roteiro: botão de apagar + estado apagado */
.btn-del-final { margin-left: 10px; background: #fff1f3; border-color: #f6c9d2; color: var(--vermelho); font-weight: 600; }
.btn-del-final:hover { background: #ffe4e9; }
.final-apagado-aviso { display: none; margin-left: 8px; font-weight: 400; font-size: .85rem; color: var(--cinza); }
.final-apagado-aviso a { color: var(--azul-escuro); }
.final-opcao.apagado .btn-del-final,
.final-opcao.apagado .dica,
.final-opcao.apagado textarea { display: none; }
.final-opcao.apagado .final-apagado-aviso { display: inline; }
.final-opcao.apagado { opacity: .7; }

/* Gravados e Postados — itens de conteúdo publicado */
.pub-item { border: 1px solid var(--cinza-claro); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; background: var(--branco); }
.pub-item .bloco-head { margin-bottom: 2px; }
.pub-vencedor { border-color: #f3d6a8; background: #fffdf7; }
.pub-item .form { padding: 14px; margin-top: 8px; }

/* Navegação das seções da ficha (dentro do menu lateral) */
.cockpit-nav { width: 100%; }
.cockpit-nav ul { list-style: none; margin: 0; padding: 6px; background: var(--branco); border: 1px solid var(--cinza-claro); border-radius: 12px; box-shadow: 0 1px 2px rgba(20,20,43,.04), 0 6px 20px rgba(20,20,43,.035); }
.cockpit-nav li { margin: 0; }
.cockpit-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 8px; color: var(--tinta); text-decoration: none;
  font-size: .92rem; font-weight: 500;
}
.cockpit-nav a:hover { background: var(--fundo); }
.cockpit-nav a.active { background: var(--azul-suave); color: var(--azul-escuro); font-weight: 700; }
.cockpit-nav .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  background: var(--fundo); color: var(--cinza); font-size: .8rem; font-weight: 700;
}
.cockpit-nav a.active .step-num { background: var(--azul); color: #fff; }
.cockpit-nav .nav-sep { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cinza-claro); }
.cockpit-content { min-width: 0; }
.cockpit-content .card-block:last-child { margin-bottom: 0; }
.cockpit-panel { display: none; }
.cockpit-panel.is-active { display: block; }
.tabela-wrap { overflow-x: auto; }
@media (max-width: 860px) {
  .app-shell { flex-direction: column; gap: 14px; padding: 16px; }
  .app-sidebar { width: 100%; position: static; }
  .app-nav { flex-direction: row; flex-wrap: wrap; }
  .app-navlink { font-size: .85rem; padding: 8px 10px; }
  .cockpit-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .cockpit-nav a { font-size: .85rem; padding: 8px 10px; }
}


/* ===== Themis brand accents (paleta oficial) ===== */
:focus-visible { outline: 3px solid var(--purple-300); outline-offset: 2px; }
.cockpit-nav a.active .step-num { background: var(--laranja); color: #fff; }
.app-navlink.active { box-shadow: inset 3px 0 0 var(--laranja); }
.badge-essencial { background: var(--laranja-claro); color: var(--orange-900); }
.pub-vencedor { border-color: var(--laranja) !important; }
.brand-wordmark { display: block; width: 150px; max-width: 100%; height: auto; }
.user-ico { width: 16px; height: 16px; vertical-align: -3px; }

/* Icones de linha (currentColor pega a cor da paleta) */
.ic { width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex: none; }
.app-navlink .ic, .btn .ic { margin-right: 3px; }
/* Acento laranja so nos icones de cabecalho de secao (titulos de box + summaries).
   Botoes (claros e roxos) e menu lateral seguem na cor do texto. */
.card-block h2 .ic, .card-block h3 .ic, .card-block summary .ic, .card-block strong .ic { color: var(--laranja); }