/* Ajuste 4 (Bloco B), Passo 1: fontes do CEO 2.0 (Outfit/Sora), licença SIL
   OFL, baixadas uma vez e guardadas em web/static/fonts/ — nunca carregadas
   da internet em tempo de execução (ver web/static/fonts/OFL-Outfit.txt e
   OFL-Sora.txt). */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Outfit-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/Sora-Variable.woff2") format("woff2");
}

:root {
  --fonte-ui: "Outfit", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-titulo: "Sora", "Outfit", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --cor-fundo: #0b0e14;
  --cor-painel: #141924;
  --cor-borda: #262e3d;
  --cor-texto: #e6e8eb;
  --cor-texto-fraco: #8a90a0;
  --cor-destaque: #5b8cff;
  --cor-destaque-claro: #8db4ff;
  --cor-ok: #3ecf8e;
  --cor-aviso: #e0a23e;
  --cor-erro: #e0585e;
}

* {
  box-sizing: border-box;
}

/* Ajuste 4 (Bloco C), correção 2: barra de rolagem escura e discreta, em
   vez da barra branca padrão do navegador, combinando com o tema. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--cor-borda) var(--cor-fundo);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--cor-fundo);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--cor-borda);
  border-radius: 999px;
  border: 2px solid var(--cor-fundo);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--cor-texto-fraco);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: var(--fonte-ui);
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

/* Ajuste 4 (Bloco A), Passo 4: casca em Grid — sidebar e topo fixos, só a
   área de trabalho ("workspace") rola; na tela de Conversas, nem ela rola
   inteira: só a lista de mensagens (Passo 5). */
.shell {
  display: grid;
  grid-template-columns: 230px 1fr 230px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar topo orq"
    "sidebar workspace orq"
    "base base base";
  height: 100vh;
}

/* --- Barra lateral --- */

.menu-lateral {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--cor-painel);
  border-right: 1px solid var(--cor-borda);
  padding: 20px 0;
}

/* Ajuste 4 (Bloco B), Passo 9: marca = quadrado com gradiente azul + nome
   (nunca "CEO 2.0"). */
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 12px;
}

.marca-icone {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--cor-destaque-claro), var(--cor-destaque) 55%, #1b2f66);
  box-shadow: 0 0 16px rgba(91, 140, 255, 0.35);
}

.marca-texto {
  min-width: 0;
}

.marca .logo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
}

.versao {
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--cor-texto-fraco);
  font-family: ui-monospace, Consolas, monospace;
}

/* Rodada 0b, Grupo 2: link discreto para a saúde do sistema (assunto
   técnico, não uma tela de uso diário — por isso fora do menu principal). */
.link-saude-sistema {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--cor-texto-fraco);
  text-decoration: none;
}

.link-saude-sistema:hover {
  color: var(--cor-destaque-claro);
  text-decoration: underline;
}

.menu-lateral nav {
  flex: 1;
}

.menu-lateral nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-lateral nav li a,
.menu-lateral nav li .item-desabilitado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: var(--cor-texto);
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 6px;
}

.menu-lateral nav li a:hover {
  background: var(--cor-borda);
}

.menu-lateral nav li a.ativo {
  background: var(--cor-destaque);
  color: #fff;
}

/* Ajuste 4 (Bloco B), Passo 3: "Em breve" vira só acinzentado/apagado,
   sem etiqueta — continua sem função (span, não link). */
.menu-lateral nav li .item-desabilitado {
  color: var(--cor-texto-fraco);
  cursor: default;
  opacity: 0.6;
}

/* Pedido 68: grupos do menu. Executivo = azul (cor do sistema);
   Orquestrador = âmbar (mesma família da Caixa de pedidos). */
.grupo-menu {
  margin: 10px 0 4px;
}
.grupo-menu summary {
  cursor: pointer;
  padding: 6px 20px;
  font-family: var(--fonte-titulo);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-left: 3px solid currentColor;
  list-style: none;
}
.grupo-menu summary::-webkit-details-marker { display: none; }
/* Setinha desenhada com borda girada (não depende de fonte): para baixo
   quando aberto, para a direita quando recolhido; usa a cor do grupo. */
.grupo-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grupo-menu summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
}
.grupo-menu:not([open]) summary::after {
  transform: rotate(-45deg);
  margin-top: 0;
}
.grupo-executivo summary { color: var(--cor-destaque-claro); }
.grupo-orquestrador summary { color: #f0a830; }
.menu-lateral nav .grupo-orquestrador li a.ativo {
  background: #f0a830;
  color: #2a1a05;
}
.menu-lateral nav .grupo-orquestrador li a:hover:not(.ativo) {
  background: rgba(240, 168, 48, 0.16);
}
.menu-em-breve {
  margin-top: 10px;
}
/* Separador do carrossel (só aparece no celular). */
.separador-carrossel { display: none; }

/* Ajuste 4 (Bloco B), Passo 2: ícones de linha simples, cor única (herdada
   do texto) no lugar dos emojis coloridos. */
.icone-menu {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rodape-sidebar {
  padding: 12px 20px 0;
  margin-top: 12px;
  border-top: 1px solid var(--cor-borda);
}

.status-sistema {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--cor-texto-fraco);
}

.ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.ponto-online { background: var(--cor-ok); }
.ponto-offline { background: var(--cor-erro); }

/* Ajuste 4 (Bloco C), Passo 7: bolinha de estado dos cards, só a partir de
   dado real (ver tabela em src/diagnostico.py::resumo_cards e
   src/orquestracao.py::montar_status_orquestracao). */
.ponto-estado {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.ponto-estado-verde { background: var(--cor-ok); }
.ponto-estado-laranja { background: var(--cor-aviso); }
.ponto-estado-vermelho { background: var(--cor-erro); }

/* Item 1 (Grupo 3): "Executando..." (JS, enquanto a mensagem está sendo
   processada de verdade — ver base.html). Pisca de leve, sem ser agressivo. */
.ponto-estado-azul {
  background: var(--cor-destaque);
  animation: pulsar-azul 1.4s ease-in-out infinite;
}

@keyframes pulsar-azul {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- Barra superior --- */

.topo {
  grid-area: topo;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 32px;
  background: var(--cor-painel);
  border-bottom: 1px solid var(--cor-borda);
}

.topo-esquerda {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pedido 70: botão Início no topo */
.botao-inicio {
  font-size: 0.8rem;
  padding: 3px 12px;
  border-radius: 6px;
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  text-decoration: none;
}

.botao-inicio:hover { border-color: var(--cor-destaque); }

.relogio {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--cor-texto);
}

.status-pill {
  font-size: 0.7rem;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
}

.status-ok { color: var(--cor-ok); border-color: var(--cor-ok); }
.status-erro { color: var(--cor-erro); border-color: var(--cor-erro); }

.topo-centro {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-texto-fraco);
  white-space: nowrap;
}

.topo-direita {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--cor-texto-fraco);
}

.icone-topo {
  cursor: default;
  opacity: 0.6;
}

.form-empresa-ativa {
  display: inline-flex;
  margin: 0;
}

.form-empresa-ativa select {
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 6px;
}

.conteudo {
  grid-area: workspace;
  overflow-y: auto;
  padding: 24px 32px;
  max-width: 1100px;
}

/* Ajuste 4 (Bloco A), Passo 5: na tela de Conversas, a área de trabalho em
   si NÃO rola — vira uma coluna fixa (título / tela-conversas / rodapé), e
   só a lista de mensagens, dentro dela, tem rolagem própria. */
.conteudo-conversa {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: none;
}

.conteudo-conversa .cabecalho {
  flex-shrink: 0;
}

.cabecalho {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cor-borda);
}

.cabecalho h1 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
}

.secao {
  margin-bottom: 28px;
}

.titulo-secao {
  margin: 0 0 12px;
  font-family: var(--fonte-titulo);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cor-destaque-claro);
  font-weight: 700;
}

/* --- Memória: abas (Passo 5 da CAP-06) --- */

.abas-memoria {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--cor-borda);
}

.abas-memoria a {
  padding: 8px 16px;
  color: var(--cor-texto-fraco);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}

.abas-memoria a.aba-ativa {
  color: var(--cor-texto);
  border-bottom-color: var(--cor-destaque-claro);
  font-weight: 600;
}

/* --- Conversas (balões) --- */

.tela-conversas {
  display: flex;
  gap: 24px;
  flex: 1;
  min-height: 0;
}

.area-chat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.area-chat form {
  flex-shrink: 0;
  margin-top: 12px;
}

.lista-mensagens {
  list-style: none;
  margin: 0 0 16px;
  padding: 0 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.balao {
  max-width: 80%;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 10px 14px;
}

.balao-usuario {
  align-self: flex-end;
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
  color: #fff;
}

/* Ajuste 4 (Bloco C), Passo 8: faixa azul fina na borda esquerda das
   respostas do CEO (referência: conv-msg--ceo do CEO 2.0, só leitura). */
.balao-ceo {
  align-self: flex-start;
  background: var(--cor-painel);
  border-left: 3px solid var(--cor-destaque);
}

.balao-cabecalho {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.72rem;
  opacity: 0.8;
  margin-bottom: 4px;
}

.balao-texto :first-child { margin-top: 0; }
.balao-texto :last-child { margin-bottom: 0; }

/* Item 1 (Grupo 3): balão provisório enquanto a resposta não chegou, e
   balão de erro claro se a mensagem falhar ao ser processada. */
.balao-pensando .balao-texto {
  font-style: italic;
  opacity: 0.75;
}

.balao-erro {
  align-self: flex-start;
  background: var(--cor-painel);
  border-left: 3px solid var(--cor-erro);
}

/* Ajuste 4 (Bloco C), Passo 8: botão "Copiar" mais visível (fundo sólido
   em vez de só contorno apagado). */
.botao-copiar {
  margin-top: 8px;
  background: var(--cor-borda);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  opacity: 1;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
}

.botao-copiar:hover {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
  color: #fff;
}

.painel-orquestracao {
  width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 16px;
}

/* Pedido 41 v2: lista de conversas (botão "Nova conversa" + histórico de
   conversas arquivadas), mesmo estilo de caixa do painel de orquestração. */
.painel-conversas {
  width: 220px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 16px;
}

.form-nova-conversa {
  margin: 0 0 14px;
}

.botao-nova-conversa {
  width: 100%;
  text-align: center;
  cursor: pointer;
  font: inherit;
}

.lista-conversas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item-conversa {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--cor-texto);
}

.item-conversa:hover {
  border-color: var(--cor-destaque);
}

.item-conversa-atual {
  border-color: var(--cor-destaque);
  border-left: 3px solid var(--cor-destaque);
}

.item-conversa-titulo {
  font-size: 0.85rem;
  font-weight: 600;
}

.item-conversa-data {
  font-size: 0.72rem;
  opacity: 0.8;
}

.etiqueta-ativa {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cor-destaque);
}

.aviso-somente-leitura {
  flex-shrink: 0;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
}

.cards-orquestracao {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-modulo {
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 8px 10px;
}

.card-nome {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
}

.card-status {
  color: var(--cor-texto-fraco);
  font-size: 0.8rem;
  margin-top: 2px;
}

.card-modulo-desabilitado {
  opacity: 0.6;
}

/* --- Formulários (campo de mensagem, botões) --- */

/* Ajuste 4 (Bloco A), Passo 6: campo de mensagem maior (várias linhas, com
   borda azul ao focar), em vez de uma linha única. */
.form-mensagem {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-mensagem textarea {
  width: 100%;
  resize: vertical;
  min-height: 3.2rem;
  max-height: 10rem;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
}

.form-mensagem textarea::placeholder {
  color: var(--cor-texto-fraco);
}

.form-mensagem textarea:focus {
  outline: none;
  border-color: var(--cor-destaque);
  box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.25);
}

.form-mensagem-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

button[type="submit"] {
  background: var(--cor-destaque);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

button[type="submit"]:hover {
  filter: brightness(1.1);
}

.botao-voz {
  background: none;
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-fraco);
  border-radius: 6px;
  padding: 9px 10px;
  cursor: default;
}

.botao-link {
  display: inline-block;
  background: var(--cor-destaque);
  color: #fff;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-top: 12px;
}

.botao-link-secundario {
  display: inline-block;
  background: none;
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
}

/* --- Avisos de uma única passagem (item 1, Grupo 3; D-037) --- */

.aviso {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.aviso-ok {
  background: rgba(62, 207, 142, 0.12);
  border: 1px solid var(--cor-ok);
  color: var(--cor-texto);
}

.aviso-erro {
  background: rgba(224, 88, 94, 0.12);
  border: 1px solid var(--cor-erro);
  color: var(--cor-texto);
}

/* --- Tela "Enviar resumo por e-mail" (D-037) --- */

.form-email-resumo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
}

.form-email-resumo label {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--cor-texto-fraco);
}

.form-email-resumo input[type="text"],
.form-email-resumo textarea {
  width: 100%;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.form-email-resumo textarea {
  resize: vertical;
  line-height: 1.45;
  min-height: 320px;
}

.form-email-resumo input:disabled,
.form-email-resumo textarea:disabled {
  opacity: 0.75;
  cursor: default;
}

.form-email-resumo .form-mensagem-acoes {
  margin-top: 6px;
}

/* --- Tela Decisões: aprovar/rejeitar (Bloco 7, Grupo 3) --- */

.acoes-proposta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.acoes-proposta input[type="text"], .acoes-proposta select {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  padding: 7px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
  flex: 1 1 180px;
}

.acoes-proposta select {
  flex: 0 1 120px;
}

.botao-aprovar, .botao-rejeitar {
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  color: #fff;
}

.botao-aprovar {
  background: var(--cor-ok);
}

.botao-rejeitar {
  background: var(--cor-erro);
}

.botao-aprovar:hover, .botao-rejeitar:hover {
  filter: brightness(1.1);
}

/* --- Centro de Situação --- */

.cards-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.card-resumo {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 16px;
}

.card-resumo-valor {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.6rem;
  font-weight: 700;
}

.card-resumo-titulo {
  color: var(--cor-texto-fraco);
  font-size: 0.85rem;
  margin-top: 4px;
}

.card-decisoes {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 16px;
}

.card-decisoes p {
  color: var(--cor-texto-fraco);
  font-size: 0.85rem;
  margin: 0 0 12px;
  max-width: 60ch;
}

.resumo-diagnostico {
  color: var(--cor-texto-fraco);
  font-size: 0.85rem;
  margin: 0 0 14px;
}

.lista-riscos {
  margin: 0 0 16px;
  padding-left: 18px;
}

.lista-riscos li {
  margin-bottom: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.texto-fraco {
  color: var(--cor-texto-fraco);
  font-size: 0.85rem;
  margin: 0 0 16px;
}

/* Rodada 0b, Grupo 2: lista de cards simples (Projetos/Decisões/Memória/
   Indicadores) — mesmo visual de .card-resumo, reaproveitado em lista. */
.lista-cards {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-item {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 12px 16px;
}

.card-item-titulo {
  font-weight: 600;
}

/* Pedido 55: decisão vencida (sinal visual só na tela Decisões) */
.card-item-vencida {
  border-color: var(--cor-erro);
  color: var(--cor-erro);
  animation: piscar-vermelho 1s ease-in-out infinite;
}

.card-item-vencida .card-item-detalhe {
  color: var(--cor-erro);
}

.contador-vencidas {
  font-weight: 700;
  color: var(--cor-erro);
  animation: piscar-vermelho 1s ease-in-out infinite;
}

@keyframes piscar-vermelho {
  0%, 100% { opacity: 1; background: rgba(224, 88, 94, 0.22); }
  50% { opacity: 0.55; background: rgba(224, 88, 94, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
  .card-item-vencida, .contador-vencidas { animation: none; }
}

.card-item-detalhe {
  margin-top: 4px;
  color: var(--cor-texto-fraco);
  font-size: 0.85rem;
}

.card-item-meta {
  margin-top: 4px;
  color: var(--cor-texto-fraco);
  font-size: 0.75rem;
}

.detalhes-tecnicos summary {
  cursor: pointer;
  display: inline-block;
  list-style: none;
  font-size: 0.78rem;
  color: var(--cor-destaque-claro);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 5px 14px;
}

.detalhes-tecnicos summary::-webkit-details-marker {
  display: none;
}

.detalhes-tecnicos[open] summary {
  margin-bottom: 12px;
}

.autodiagnostico {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 16px;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* --- Pedido 42: layout no celular ---
   Carrossel de módulos (topo) e faixa da Orquestração (rodapé) só existem
   em tela estreita; no computador ficam escondidos e nada muda. */

.carrossel-modulos,
.faixa-orquestracao {
  display: none;
}

/* Telas de módulo guardadas pelo carrossel (ver base.html) ficam escondidas
   com `hidden` — precisa vencer o `display: flex` da tela de Conversas. */
.conteudo[hidden] {
  display: none !important;
}

.ponto-estado-cinza { background: var(--cor-texto-fraco); }

@media (max-width: 768px) {
  /* Casca em coluna, do tamanho exato da tela: topo e carrossel fixos em
     cima, a tela do módulo no meio (só ela rola), faixa fixa embaixo. */
  body {
    overflow: hidden;
  }
  .shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
  }
  .menu-lateral {
    display: none;
  }

  /* Topo compacto: relógio, status e seletor de empresa numa linha só. */
  .topo {
    order: -2;
    flex-shrink: 0;
    padding: 6px 16px;
    gap: 8px;
  }
  .topo-centro,
  .icone-topo,
  .perfil {
    display: none;
  }
  .topo-direita {
    min-width: 0;
  }
  .form-empresa-ativa select {
    max-width: 55vw;
  }

  /* Carrossel: fila horizontal que desliza com o dedo. */
  .carrossel-modulos {
    order: -1;
    display: flex;
    flex-shrink: 0;
    gap: 6px;
    padding: 8px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--cor-painel);
    border-bottom: 1px solid var(--cor-borda);
  }
  .carrossel-modulos::-webkit-scrollbar {
    display: none;
  }
  .item-carrossel {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 0.82rem;
    white-space: nowrap;
    scroll-snap-align: center;
  }
  .item-carrossel .icone-menu {
    width: 15px;
    height: 15px;
  }
  .item-carrossel.ativo {
    background: var(--cor-destaque);
    border-color: var(--cor-destaque);
    color: #fff;
  }
  .item-carrossel.carregando {
    opacity: 0.6;
  }
  .item-carrossel-sair {
    color: var(--cor-texto-fraco);
  }
  /* Pedido 68: um separador colorido por grupo (não é link, não é módulo). */
  .separador-carrossel {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 4px 0 10px;
    border-left: 3px solid currentColor;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .separador-executivo { color: var(--cor-destaque-claro); }
  .separador-orquestrador { color: #f0a830; }
  .item-carrossel-orquestrador.ativo {
    background: #f0a830;
    border-color: #f0a830;
    color: #2a1a05;
  }

  /* Tela do módulo: ocupa o espaço que sobra e é a única parte que rola.
     Nada passa da largura da tela (texto longo quebra; tabela rola dentro
     dela mesma, nunca a página). */
  .conteudo {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    padding: 12px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: anywhere;
  }
  .conteudo .cabecalho {
    display: none;
  }
  .conteudo table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .conteudo pre {
    white-space: pre-wrap;
  }
  .conteudo img {
    max-width: 100%;
  }

  /* Conversas: só a lista de mensagens rola; a caixa de escrever fica
     colada embaixo, sempre visível. */
  .conteudo-conversa {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px 12px 0;
  }
  .tela-conversas {
    flex-direction: column;
    gap: 8px;
  }
  .painel-orquestracao {
    display: none;  /* substituído pela faixa fixa embaixo */
  }
  .painel-conversas {
    width: 100%;
    flex-shrink: 0;
    max-height: 45%;
    overflow-y: auto;
    padding: 8px 12px;
  }
  .painel-conversas > .titulo-secao {
    display: flex;
    justify-content: space-between;
    margin: 0;
    cursor: pointer;
  }
  .painel-conversas > .titulo-secao::after {
    content: "▾";
  }
  .painel-conversas-aberto > .titulo-secao::after {
    content: "▴";
  }
  .painel-conversas-aberto > .titulo-secao {
    margin-bottom: 10px;
  }
  .painel-conversas:not(.painel-conversas-aberto) > :not(.titulo-secao) {
    display: none;
  }
  .area-chat {
    flex: 1;
    min-height: 0;
  }
  .lista-mensagens {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 8px;
    padding-right: 0;
  }
  .balao {
    max-width: 88%;
  }
  .area-chat form,
  .aviso-somente-leitura {
    margin-top: 0;
    margin-bottom: 8px;
  }
  .aviso-somente-leitura {
    flex-wrap: wrap;
  }
  .form-mensagem {
    flex-direction: row;
    align-items: flex-end;
  }
  .form-mensagem textarea {
    flex: 1;
    min-width: 0;
    min-height: 2.8rem;
    resize: none;
  }
  .botao-voz {
    display: none;  /* "Em breve" — sem função, só ocupava espaço */
  }

  /* Faixa da Orquestração: uma linha com as bolinhas; tocar abre os
     detalhes por cima da tela, tocar de novo fecha. */
  .faixa-orquestracao {
    order: 1;
    display: block;
    position: relative;
    flex-shrink: 0;
    background: var(--cor-painel);
    border-top: 1px solid var(--cor-borda);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .faixa-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: none;
    color: var(--cor-texto);
    font: inherit;
    /* Diminui junto com a tela para os 6 nomes caberem inteiros numa
       linha até nos celulares mais estreitos (320px). */
    font-size: min(0.72rem, 3.1vw);
    cursor: pointer;
  }
  .faixa-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
  }
  .faixa-item .ponto-estado {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-right: 0;
  }
  .faixa-detalhes {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding: 14px 16px;
    background: var(--cor-painel);
    border-top: 1px solid var(--cor-borda);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  }
}

/* --- Tela de login (D-043) --- */

.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-ui);
  padding: 16px;
}

.cartao-login {
  width: 100%;
  max-width: 360px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 28px;
}

.cartao-login .marca-texto {
  text-align: center;
  margin-bottom: 20px;
}

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

.form-login label {
  font-size: 0.85rem;
  color: var(--cor-texto-fraco);
}

.form-login input {
  width: 100%;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
}

.form-login .form-mensagem-acoes {
  justify-content: stretch;
  margin-top: 8px;
}

.form-login .form-mensagem-acoes button {
  width: 100%;
}

/* --- Páginas de erro amigáveis (Pedido 1, Railway) --- */

.erro-mensagem {
  color: var(--cor-texto-fraco);
  margin: 4px 0 20px;
}

.botao-link {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: var(--cor-destaque);
  color: #fff;
  padding: 9px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
}

.botao-link:hover {
  filter: brightness(1.1);
}

.link-sair {
  color: var(--cor-texto-fraco);
  font-size: 0.8rem;
  text-decoration: none;
}

.link-sair:hover {
  color: var(--cor-destaque-claro);
}

/* Pedido 62: Caixa de pedidos ao engenheiro - tom ambar/ferrugem, de proposito
   bem diferente do azul do conselheiro. So variaveis --pedido-* e classes .pedido-*. */
:root {
  --pedido-fundo: #1f1510;
  --pedido-borda: #8a4a22;
  --pedido-ferrugem: #c2562a;
  --pedido-ambar: #f0a830;
  --pedido-ambar-claro: #ffd27a;
  --pedido-texto: #f3e3d0;
  --pedido-texto-fraco: #b89a80;
}

.pedido-tela { color: var(--pedido-texto); }

.pedido-aviso-fixo {
  background: var(--pedido-fundo);
  border: 2px dashed var(--pedido-ambar);
  border-left: 8px solid var(--pedido-ferrugem);
  color: var(--pedido-ambar-claro);
  padding: 12px 16px;
  border-radius: 4px;
  margin: 0 0 16px;
}

.pedido-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.pedido-cartao {
  background: var(--pedido-fundo);
  border: 1px solid var(--pedido-borda);
  border-left: 8px solid var(--pedido-ferrugem);
  border-radius: 4px;
  padding: 14px 16px;
}

.pedido-cartao-topo { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pedido-titulo { font-weight: 700; color: var(--pedido-ambar-claro); }
.pedido-detalhe { color: var(--pedido-texto-fraco); font-size: 0.85rem; margin-top: 4px; }

.pedido-status {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 2px;
  background: var(--pedido-borda);
  color: var(--pedido-texto);
}
.pedido-status-enviado { background: var(--pedido-ambar); color: #2a1a05; }
.pedido-status-em_andamento { background: var(--pedido-ferrugem); color: #fff; }
.pedido-status-concluido { background: transparent; border: 1px solid var(--pedido-ambar); color: var(--pedido-ambar-claro); }

.pedido-alerta {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: #3a1a10;
  border: 1px solid var(--pedido-ferrugem);
  color: var(--pedido-ambar-claro);
  border-radius: 3px;
  font-size: 0.85rem;
}

.pedido-vazio { color: var(--pedido-texto-fraco); font-style: italic; }

/* Pedido 63: formulario de novo pedido (mesmo tom ambar/ferrugem). */
.pedido-form { display: grid; gap: 8px; margin-top: 16px; }
.pedido-form label { color: var(--pedido-ambar-claro); font-weight: 600; }
.pedido-form input[type="text"], .pedido-form textarea {
  background: var(--pedido-fundo);
  color: var(--pedido-texto);
  border: 1px solid var(--pedido-borda);
  border-radius: 3px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
}
.pedido-campo-texto { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.pedido-campo-texto textarea { flex: 1 1 320px; }
.pedido-aviso-texto {
  flex: 0 1 220px;
  margin: 0;
  padding: 8px 12px;
  background: #3a1a10;
  border: 1px solid var(--pedido-ferrugem);
  color: var(--pedido-ambar-claro);
  border-radius: 3px;
  font-size: 0.85rem;
}
.pedido-botao {
  background: var(--pedido-ferrugem);
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 9px 18px;
  font-weight: 700;
  cursor: pointer;
}
.pedido-botao:hover { filter: brightness(1.15); }
.pedido-link { color: var(--pedido-ambar-claro); margin-left: 12px; font-size: 0.9rem; }

/* Pedido 77: "Cancelar" da tela Novo pedido vira botão secundário (só
   contorno), mesma altura do "Criar pedido", alinhados pelo meio. */
.pedido-form .form-mensagem-acoes { align-items: center; }
.pedido-form .pedido-botao,
.pedido-form .pedido-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 3px;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
}
.pedido-form .pedido-botao { font-weight: 700; }
.pedido-form .pedido-link {
  background: transparent;
  border-color: var(--pedido-ambar);
  text-decoration: none;
  cursor: pointer;
}
.pedido-form .pedido-link:hover { background: var(--pedido-borda); }

/* Pedido 64: texto recolhido, Copiar, botoes de status e cartao concluido apagado. */
.pedido-texto-bloco { margin-top: 10px; }
.pedido-texto-bloco summary { cursor: pointer; color: var(--pedido-ambar-claro); font-size: 0.9rem; }
.pedido-texto {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #140d09;
  border: 1px solid var(--pedido-borda);
  border-radius: 3px;
  color: var(--pedido-texto);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.9rem;
}
.pedido-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.pedido-acoes-rotulo { color: var(--pedido-texto-fraco); font-size: 0.8rem; margin-left: 8px; }
.pedido-form-status { margin: 0; }
.pedido-botao-status {
  background: transparent;
  color: var(--pedido-ambar-claro);
  border: 1px solid var(--pedido-ambar);
  border-radius: 3px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 0.85rem;
}
.pedido-botao-status:hover { background: var(--pedido-borda); }
.pedido-cartao-concluido { opacity: 0.55; border-left-color: var(--pedido-borda); }
.pedido-cartao-concluido:hover { opacity: 0.85; }

/* Pedido 65: secoes Em aberto / Concluidos e cartao concluido em CINZA (sem ambar). */
.pedido-titulo-secao {
  margin: 20px 0 10px;
  font-size: 1.05rem;
  color: var(--pedido-ambar-claro);
  border-bottom: 1px solid var(--pedido-borda);
  padding-bottom: 4px;
}
.pedido-titulo-secao-concluidos { color: #8c8c8c; border-bottom-color: #3a3a3a; }

.pedido-cartao-concluido,
.pedido-cartao-concluido:hover {
  opacity: 1;
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  border-left: 8px solid #555;
}
.pedido-cartao-concluido .pedido-titulo { color: #9a9a9a; font-weight: 500; }
.pedido-cartao-concluido .pedido-detalhe,
.pedido-cartao-concluido .pedido-acoes-rotulo,
.pedido-cartao-concluido .pedido-texto-bloco summary { color: #777; }
.pedido-cartao-concluido .pedido-texto { background: #141414; border-color: #333; color: #999; }
.pedido-cartao-concluido .pedido-alerta { background: #222; border-color: #555; color: #aaa; }
.pedido-status.pedido-status-concluido {
  background: #3a3a3a;
  border: 0;
  color: #bdbdbd;
}
.pedido-cartao-concluido .pedido-botao,
.pedido-cartao-concluido .pedido-botao-status {
  background: transparent;
  color: #888;
  border: 1px solid #444;
}
.pedido-cartao-concluido .pedido-botao:hover,
.pedido-cartao-concluido .pedido-botao-status:hover { background: #2a2a2a; filter: none; }

/* Pedido 70: faixa de situação e espaço de trabalho do Centro de Situação */
.faixa-situacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.faixa-situacao-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.faixa-situacao-valor {
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 4px;
}

.faixa-situacao-rotulo {
  color: var(--cor-texto-fraco);
  font-size: 0.85rem;
}

.faixa-situacao-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.espaco-trabalho {
  min-height: 240px;
  margin-top: 20px;
}

/* Pedido 71: coluna da direita (Orquestrador, âmbar) e base horizontal com
   os cards. Só no computador: no celular o .menu-lateral já fica escondido
   e a base só liga acima de 768px. */
.coluna-orquestrador {
  grid-area: orq;
  border-right: none;
  border-left: 1px solid var(--cor-borda);
}

.base-orquestracao {
  display: none;
}

@media (min-width: 769px) {
  .base-orquestracao {
    grid-area: base;
    display: block;
    background: var(--cor-painel);
    border-top: 1px solid var(--cor-borda);
    padding: 10px 16px;
    overflow-x: auto;
  }
  .cards-base {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .cards-base .card-modulo {
    flex: 1 1 0;
    min-width: 150px;
  }
}

/* Pedido 72: item "Centro de Situação" (coluna da direita, acima do
   Orquestrador). Cor própria, neutra: verde-água (nem azul nem âmbar). */
.menu-lateral nav a.item-situacao {
  display: block;
  margin: 10px 8px 4px;
  padding: 10px 12px;
  border: 1px solid #3fb8a6;
  border-left-width: 3px;
  border-radius: 6px;
  color: var(--cor-texto);
  text-decoration: none;
}
.menu-lateral nav a.item-situacao:hover:not(.ativo) {
  background: rgba(63, 184, 166, 0.14);
}
.menu-lateral nav a.item-situacao.ativo {
  background: #3fb8a6;
  color: #06231f;
}
.item-situacao-nome {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
}
.item-situacao-quadro {
  display: flex;
  gap: 14px;
  margin: 6px 0 0 28px;
  font-size: 0.75rem;
}
.item-situacao-dado b {
  font-size: 0.95rem;
  padding: 0 4px;
  border-radius: 3px;
}

/* Pedido 73: conteúdo do meio centralizado no computador, mantendo a
   largura máxima de cada tela (1100px; Conversas segue sem limite, então
   ocupa o meio inteiro). Um ponto só, vale para todas as telas. */
@media (min-width: 769px) {
  .conteudo {
    justify-self: center;
    width: 100%;
  }
  /* Pedido 76: a área que rola ocupa o meio inteiro (barra de rolagem na
     borda direita, junto da coluna da direita); o texto continua centrado
     na mesma largura máxima, por margem lateral em vez de caixa estreita. */
  .conteudo:not(.conteudo-conversa) {
    max-width: none;
    padding-left: max(32px, calc((100% - 1100px) / 2 + 32px));
    padding-right: max(32px, calc((100% - 1100px) / 2 + 32px));
  }
}

/* Pedido 75: item de módulo não comprado (esmaecido, com cadeado, sem link). */
.menu-lateral nav li .item-bloqueado {
  opacity: 0.5;
  cursor: not-allowed;
}
.item-bloqueado-texto {
  display: flex;
  flex-direction: column;
}
.item-bloqueado-texto small {
  font-size: 0.72rem;
}

/* Pedido 83: campos da lista de pedidos no mesmo estilo escuro/âmbar do Novo pedido. */
.pedido-campo {
  background: var(--pedido-fundo);
  color: var(--pedido-texto);
  border: 1px solid var(--pedido-borda);
  border-radius: 3px;
  padding: 10px 12px;
  box-sizing: border-box;
  font: inherit;
}
.pedido-campo:focus { outline: 2px solid var(--pedido-ambar); outline-offset: 1px; }
.pedido-campo::placeholder { color: var(--pedido-texto-fraco); }
.pedido-campo-motivo { min-width: 260px; min-height: 42px; font-size: 1rem; }
.pedido-campo-resposta { display: block; width: 100%; min-height: 12em; resize: vertical; margin: 8px 0; }
.pedido-rotulo { display: block; color: var(--pedido-ambar-claro); font-weight: 600; margin-bottom: 4px; }
.pedido-rotulo .pedido-campo { display: block; margin-top: 4px; }

/* Pedido 85C: seletor + "Preparar mensagem" à esquerda, "Enviar para a OpenAI" à direita. */
.pedido-envio-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; margin-top: 12px; }
.pedido-envio-preparar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pedido-envio-botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; margin-left: auto; }
.pedido-envio-enviar { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pedido-envio-aviso { color: var(--pedido-texto-fraco); font-size: 0.8rem; text-align: right; }
@media (max-width: 600px) {
  .pedido-envio-linha { flex-direction: column; align-items: stretch; }
  .pedido-envio-preparar, .pedido-envio-enviar { margin-left: 0; align-items: stretch; }
  .pedido-envio-botoes { margin-left: 0; flex-direction: column; }
  .pedido-envio-enviar .pedido-botao, .pedido-envio-preparar .pedido-botao { width: 100%; }
  .pedido-envio-aviso { text-align: left; }
}