/* ───────────────────────────────────────────────────────────────
   COMPONENTES — conversa, cartão de plano, entrevista, histórico,
   painel de economia e a caixa de entrada multimodal.
   ─────────────────────────────────────────────────────────────── */

/* ── Conversa ─────────────────────────────────────────────────── */

.conversa {
  flex: 1 1 auto;
}

.fluxo {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.abertura {
  padding: 44px 0 8px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 8px;
}

.abertura h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.abertura p {
  color: var(--tinta-media);
  max-width: 62ch;
}

.sugestoes-inicio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 30px;
}

.sugestao {
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  color: var(--tinta-media);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
}

.sugestao:hover {
  border-color: var(--acento);
  color: var(--acento-escuro);
  background: var(--acento-claro);
}

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

.mensagem .autoria {
  font-size: 12px;
  color: var(--tinta-fraca);
  letter-spacing: 0.02em;
}

.mensagem-pessoa .balao {
  align-self: flex-start;
  background: var(--acento-claro);
  border: 1px solid #d6e4e8;
  border-radius: var(--raio-grande);
  padding: 13px 16px;
  max-width: 78%;
}

.mensagem-pessoa {
  align-items: flex-end;
}

.mensagem-pessoa .autoria {
  text-align: right;
}

.mensagem-ia .balao {
  background: transparent;
  padding: 0;
  max-width: 100%;
}

.anexo-enviado {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--tinta-media);
}

.anexo-enviado .selo-arquivo {
  font-family: var(--fonte-dados);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--linha-forte);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--tinta-fraca);
}

.previa-imagem {
  margin-top: 8px;
  max-width: 220px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  display: block;
}

.audio-enviado {
  margin-top: 8px;
  width: 260px;
  max-width: 100%;
}

/* ── Pensando ─────────────────────────────────────────────────── */

.pensando {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta-fraca);
  font-size: 13.5px;
}

.pontos {
  display: inline-flex;
  gap: 4px;
}

.pontos i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tinta-fraca);
  animation: pulsar 1.1s infinite ease-in-out;
}

.pontos i:nth-child(2) { animation-delay: 0.15s; }
.pontos i:nth-child(3) { animation-delay: 0.3s; }

@keyframes pulsar {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pontos i { animation: none; opacity: 0.6; }
}

/* ── Cartão de plano ──────────────────────────────────────────── */

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.cartao-cabecalho {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--linha);
}

.cartao-cabecalho .entendimento {
  color: var(--tinta-media);
  font-size: 14px;
  margin-top: 8px;
}

.linha-intencao {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--tinta-fraca);
  margin-top: 12px;
}

.etiqueta-intencao {
  font-family: var(--fonte-dados);
  font-size: 11.5px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--tinta-media);
}

.cartao-corpo {
  padding: 6px 20px 4px;
}

.cartao-rodape {
  padding: 16px 20px;
  border-top: 1px solid var(--linha);
  background: var(--fundo-suave);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cartao-rodape .espaco {
  flex: 1 1 auto;
}

.resumo-selecao {
  font-size: 12.5px;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

/* ── Lista de ações ───────────────────────────────────────────── */

.lista-acoes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.acao {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
  align-items: flex-start;
}

.acao:last-child {
  border-bottom: none;
}

.acao .escolha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 1px;
}

.acao .ordem {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--tinta-fraca);
  min-width: 15px;
}

.acao input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--acento);
  cursor: pointer;
}

.acao-conteudo {
  flex: 1 1 auto;
  min-width: 0;
}

.acao-descricao {
  font-size: 14.5px;
  line-height: 1.5;
}

.acao-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  align-items: center;
}

.acao.acao-critica {
  background: linear-gradient(90deg, var(--critico-fundo) 0%, rgba(251, 236, 235, 0) 62%);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  border-left: 3px solid var(--critico);
}

.acao.pendente {
  opacity: 0.62;
}

.acao .aguardando {
  color: var(--tinta-fraca);
  font-size: 13px;
}

.acao-tecnica {
  margin-top: 8px;
  font-size: 12px;
  color: var(--tinta-fraca);
}

.acao-tecnica .dado {
  color: var(--tinta-media);
}

/* ── Selos ────────────────────────────────────────────────────── */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.selo-alta {
  background: var(--alta-fundo);
  color: var(--alta);
  border-color: #c9e0d3;
}

.selo-media {
  background: var(--media-fundo);
  color: var(--media);
  border-color: #e8d7ab;
}

.selo-baixa {
  background: var(--baixa-fundo);
  color: var(--baixa);
  border-color: #e9c6c1;
}

.selo-critico {
  background: var(--critico);
  color: #fff;
  border-color: var(--critico);
}

.selo-neutro {
  background: var(--fundo);
  color: var(--tinta-media);
  border-color: var(--linha);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.selo-tipo {
  font-family: var(--fonte-dados);
  background: var(--fundo);
  color: var(--tinta-fraca);
  border-color: var(--linha);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* ── Aviso e confirmação de ação crítica ──────────────────────── */

.aviso-critico {
  border: 1px solid var(--critico-linha);
  background: var(--critico-fundo);
  border-left: 3px solid var(--critico);
  border-radius: var(--raio);
  padding: 14px 16px;
  margin: 14px 0 4px;
}

.aviso-critico h3 {
  color: var(--critico);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.aviso-critico ul {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--tinta);
}

.aviso-critico li + li {
  margin-top: 6px;
}

.confirmacao-critica {
  border-top: 1px solid var(--critico-linha);
  background: var(--critico-fundo);
  padding: 18px 20px;
}

.confirmacao-critica h3 {
  color: var(--critico);
  font-size: 14px;
  margin-bottom: 8px;
}

.confirmacao-critica p {
  font-size: 13.5px;
  color: var(--tinta-media);
}

.confirmacao-critica ol {
  margin: 10px 0 14px;
  padding-left: 20px;
  font-size: 13.5px;
}

.confirmacao-critica li + li {
  margin-top: 6px;
}

.ciencia {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  margin: 12px 0 16px;
  cursor: pointer;
}

.ciencia input {
  width: 17px;
  height: 17px;
  accent-color: var(--critico);
  margin-top: 2px;
}

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

/* ── Entrevista ───────────────────────────────────────────────── */

.entrevista {
  border-top: 1px solid var(--linha);
  background: var(--fundo-suave);
  padding: 18px 20px;
}

.entrevista h3 {
  font-size: 13.5px;
  margin-bottom: 4px;
}

.entrevista .explicacao {
  font-size: 13px;
  color: var(--tinta-fraca);
  margin-bottom: 16px;
}

.pergunta {
  padding: 14px 0;
  border-bottom: 1px dashed var(--linha);
}

.pergunta:last-of-type {
  border-bottom: none;
  padding-bottom: 4px;
}

.pergunta-texto {
  font-size: 14.5px;
  font-weight: 500;
  margin-bottom: 4px;
}

.pergunta-motivo {
  font-size: 12.5px;
  color: var(--tinta-fraca);
  margin-bottom: 10px;
}

.opcoes-resposta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.opcao {
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13.5px;
  color: var(--tinta-media);
}

.opcao:hover {
  border-color: var(--acento);
  color: var(--acento-escuro);
}

.opcao[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.campo-livre {
  display: flex;
  gap: 7px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.campo-livre input {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 8px 11px;
  font-family: inherit;
  font-size: 14px;
  color: var(--tinta);
  background: var(--papel);
}

.campo-livre input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(31, 74, 88, 0.1);
}

.seguir-sem {
  border: none;
  background: none;
  color: var(--tinta-fraca);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 4px;
}

.seguir-sem:hover {
  color: var(--tinta);
}

.resposta-dada {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--tinta-media);
  flex-wrap: wrap;
}

.resposta-dada .valor {
  font-weight: 500;
  color: var(--tinta);
}

.entrevista-encerrada {
  font-size: 13px;
  color: var(--tinta-fraca);
}

/* ── Resultado da execução ────────────────────────────────────── */

.resultado {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--alta);
  border-radius: var(--raio);
  background: var(--papel);
  padding: 16px 18px;
}

.resultado h3 {
  font-size: 14px;
  margin-bottom: 10px;
}

.lista-resultado {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
}

.lista-resultado li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha);
  align-items: flex-start;
}

.lista-resultado li:last-child {
  border-bottom: none;
}

.lista-resultado .marca-ok {
  color: var(--alta);
  font-weight: 700;
  line-height: 1.4;
}

.lista-resultado .marca-nao {
  color: var(--tinta-fraca);
  font-weight: 700;
  line-height: 1.4;
}

.lista-resultado .referencia {
  display: block;
  font-family: var(--fonte-dados);
  font-size: 11.5px;
  color: var(--tinta-fraca);
  margin-top: 2px;
}

.economia-linha {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
  font-size: 13px;
  color: var(--tinta-media);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.economia-linha strong {
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* ── Resposta de consulta ─────────────────────────────────────── */

.lista-consulta {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.lista-consulta li {
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 14px;
}

.lista-consulta li:last-child {
  border-bottom: none;
}

.lista-consulta .fonte {
  display: block;
  font-family: var(--fonte-dados);
  font-size: 11.5px;
  color: var(--tinta-fraca);
  margin-top: 3px;
}

/* ── Caixa de entrada multimodal ──────────────────────────────── */

.compositor {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(244, 244, 241, 0) 0%, var(--fundo) 22%);
  padding: 14px 0 22px;
}

.compositor-interno {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 28px;
}

.caixa-entrada {
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
  padding: 12px 12px 10px;
  transition: border-color 0.12s ease;
}

.caixa-entrada:focus-within {
  border-color: var(--acento);
}

.caixa-entrada textarea {
  width: 100%;
  border: none;
  resize: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: transparent;
  max-height: 180px;
  padding: 4px 4px 6px;
}

.caixa-entrada textarea:focus {
  outline: none;
}

.ferramentas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--linha);
}

.ferramentas .espaco {
  flex: 1 1 auto;
}

.botao-icone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--tinta-media);
  border-radius: var(--raio);
  padding: 7px 12px;
  font-size: 13.5px;
}

.botao-icone:hover {
  background: var(--fundo);
  border-color: var(--linha-forte);
  color: var(--tinta);
}

.botao-icone svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.botao-gravar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff;
  border-radius: 999px;
  padding: 9px 18px 9px 14px;
  font-size: 14px;
  font-weight: 500;
}

.botao-gravar:hover {
  background: var(--acento-escuro);
  border-color: var(--acento-escuro);
}

.botao-gravar svg {
  width: 17px;
  height: 17px;
}

.botao-gravar.gravando {
  background: var(--critico);
  border-color: var(--critico);
}

.botao-gravar.gravando .miolo {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #fff;
  display: inline-block;
}

.pulso-gravacao {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  animation: piscar 1.1s infinite ease-in-out;
}

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

.cronometro {
  font-family: var(--fonte-dados);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.botao-enviar {
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff;
  border-radius: var(--raio);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
}

.botao-enviar:hover {
  background: var(--acento-escuro);
}

.botao-enviar:disabled {
  background: var(--linha);
  border-color: var(--linha);
  color: var(--tinta-fraca);
  cursor: not-allowed;
}

.anexo-pendente {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: 13px;
  color: var(--tinta-media);
}

.anexo-pendente .remover {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--tinta-fraca);
  font-size: 13px;
  padding: 2px 6px;
}

.anexo-pendente .remover:hover {
  color: var(--critico);
}

.recado-entrada {
  font-size: 12.5px;
  color: var(--tinta-fraca);
  margin-top: 9px;
  min-height: 18px;
  text-align: center;
}

.recado-entrada.erro {
  color: var(--critico);
}

/* ── Zona de soltar arquivo ───────────────────────────────────── */

.zona-soltar {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(244, 244, 241, 0.94);
  display: grid;
  place-items: center;
  padding: 40px;
}

.zona-soltar[hidden] {
  display: none;
}

.alvo-soltar {
  border: 2px dashed var(--acento);
  border-radius: var(--raio-grande);
  background: var(--papel);
  padding: 56px 64px;
  text-align: center;
  max-width: 520px;
}

.alvo-soltar h2 {
  margin-bottom: 8px;
}

.alvo-soltar p {
  color: var(--tinta-media);
  font-size: 14px;
}

/* ── Histórico ────────────────────────────────────────────────── */

.cabecalho-vista {
  margin-bottom: 24px;
}

.cabecalho-vista h1 {
  font-size: 22px;
  margin-bottom: 6px;
}

.cabecalho-vista p {
  color: var(--tinta-media);
  max-width: 68ch;
}

.execucao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  margin-bottom: 16px;
  overflow: hidden;
}

.execucao-cabecalho {
  padding: 16px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.execucao-cabecalho .quando {
  font-size: 12.5px;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.execucao-cabecalho .entendeu {
  flex: 1 1 320px;
  min-width: 0;
}

.execucao-cabecalho .entendeu .rotulo {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
  margin-bottom: 3px;
}

.execucao-cabecalho .entendeu p {
  font-size: 14px;
}

.execucao-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 20px 14px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

.execucao-meta strong {
  color: var(--tinta-media);
  font-weight: 500;
}

.execucao-acoes {
  list-style: none;
  margin: 0;
  padding: 0 20px 12px;
}

.execucao-acoes li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid var(--linha);
  font-size: 13.5px;
}

.execucao-acoes .estado {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
  white-space: nowrap;
  min-width: 74px;
}

.execucao-acoes .estado.feita { color: var(--alta); }
.execucao-acoes .estado.recusada { color: var(--tinta-fraca); }
.execucao-acoes .estado.falhou { color: var(--critico); }

.execucao-rodape {
  padding: 12px 20px;
  border-top: 1px solid var(--linha);
  background: var(--fundo-suave);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.execucao-rodape .economia {
  font-size: 12.5px;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}

.fundamentos {
  border-top: 1px solid var(--linha);
  padding: 16px 20px 18px;
  background: var(--fundo-suave);
}

.fundamentos[hidden] {
  display: none;
}

.fundamento {
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}

.fundamento:last-child {
  border-bottom: none;
}

.fundamento .campo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-fraca);
}

.fundamento .valor {
  font-size: 14px;
  font-weight: 500;
  margin: 2px 0 8px;
}

.fundamento .trecho {
  border-left: 3px solid var(--linha-forte);
  padding: 6px 0 6px 12px;
  font-size: 13.5px;
  color: var(--tinta-media);
  font-style: italic;
}

.fundamento .origem {
  font-family: var(--fonte-dados);
  font-size: 11.5px;
  color: var(--tinta-fraca);
  margin-top: 7px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Painel de economia ───────────────────────────────────────── */

.cartoes-numero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.cartao-numero {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  padding: 18px 20px;
}

.cartao-numero .rotulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

.cartao-numero .numero {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}

.cartao-numero .apoio {
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

.cartao-numero.destaque {
  border-color: #cfe0e4;
  background: var(--acento-claro);
}

.cartao-numero.destaque .numero {
  color: var(--acento-escuro);
}

.painel {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.painel h2 {
  margin-bottom: 4px;
}

.painel .subtitulo {
  font-size: 13px;
  color: var(--tinta-fraca);
  margin-bottom: 20px;
}

.barras {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.barra {
  display: grid;
  grid-template-columns: 168px 1fr auto;
  gap: 14px;
  align-items: center;
}

.barra .nome {
  font-size: 13.5px;
  color: var(--tinta-media);
}

.barra .trilho {
  height: 22px;
  background: var(--fundo);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--linha);
}

.barra .preenchimento {
  height: 100%;
  background: var(--tinta-fraca);
  border-radius: 2px 0 0 2px;
}

.barra.manual .preenchimento { background: #9aa2a8; }
.barra.ia .preenchimento { background: var(--acento); }
.barra.revisao .preenchimento { background: #b98f3a; }
.barra.liquido .preenchimento { background: var(--alta); }
.barra.negativo .preenchimento { background: var(--critico); }

.barra .valor {
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  min-width: 92px;
  text-align: right;
  color: var(--tinta);
}

.conta {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-family: var(--fonte-dados);
  font-size: 12.5px;
  color: var(--tinta-media);
  line-height: 1.8;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tabela th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
  font-weight: 600;
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--linha);
}

.tabela td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--linha);
  font-variant-numeric: tabular-nums;
}

.tabela tr:last-child td {
  border-bottom: none;
}

.tabela .numerico {
  text-align: right;
  padding-right: 0;
}

.tabela .mes-atual td {
  background: var(--acento-claro);
  font-weight: 500;
}

.nota {
  font-size: 12.5px;
  color: var(--tinta-fraca);
  margin-top: 16px;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .barra {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .barra .valor {
    text-align: left;
  }

  .compositor-interno {
    padding: 0 16px;
  }

  .cartao-rodape {
    gap: 6px;
  }

  .cartao-rodape .botao {
    flex: 1 1 auto;
  }

  .acao.acao-critica {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .cartao-corpo,
  .cartao-cabecalho,
  .entrevista,
  .confirmacao-critica,
  .cartao-rodape {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── Faixa de integração ──────────────────────────────────────
   Aparece só quando a interface está falando (ou tentando falar) com a API
   real. Diz, sem rodeio, o que ainda vem de dados de demonstração. */

.faixa-integracao {
  position: relative;
  background: var(--media-fundo);
  border-bottom: 1px solid #e8d7ab;
  padding: 12px 24px 14px;
}

.faixa-integracao[hidden] {
  display: none;
}

.faixa-integracao.grave {
  background: var(--critico-fundo);
  border-bottom-color: var(--critico-linha);
}

.faixa-titulo {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--media);
}

.faixa-integracao.grave .faixa-titulo {
  color: var(--critico);
}

.faixa-lista {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-width: 92ch;
}

.faixa-item {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta-media);
  padding: 2px 0;
}

.faixa-item.bloqueia {
  color: var(--critico);
}

.faixa-fechar {
  position: absolute;
  top: 10px;
  right: 16px;
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  border-radius: var(--raio);
  padding: 4px 10px;
  font-size: 12.5px;
  color: var(--tinta-media);
}

.faixa-fechar:hover {
  border-color: var(--tinta-fraca);
  color: var(--tinta);
}

@media (max-width: 700px) {
  .faixa-integracao {
    padding: 12px 16px 40px;
  }

  .faixa-fechar {
    top: auto;
    bottom: 10px;
    right: 16px;
  }
}

/* ── Vista Processos: lista ───────────────────────────────────── */

.processos-controles {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.campo-busca {
  flex: 1 1 320px;
  min-width: 0;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 10px 13px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--tinta);
  background: var(--papel);
}

.campo-busca:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(31, 74, 88, 0.1);
}

.filtros-situacao {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filtro-chip {
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  color: var(--tinta-media);
}

.filtro-chip:hover {
  border-color: var(--acento);
  color: var(--acento-escuro);
}

.filtro-chip[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.processos-contagem {
  font-size: 12.5px;
  color: var(--tinta-fraca);
  margin-bottom: 14px;
}

.lista-processos-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.proc-cartao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  padding: 16px 18px;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.proc-cartao:hover {
  border-color: var(--linha-forte);
  box-shadow: var(--sombra);
}

.proc-cartao.sigiloso {
  border-left: 3px solid var(--media);
}

.proc-cartao-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.proc-numero {
  color: var(--tinta-fraca);
}

.proc-titulo {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.proc-linha-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--tinta-media);
}

.proc-meta-rotulo {
  color: var(--tinta-fraca);
}

.proc-linha-rodape {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
  font-size: 12.5px;
}

.proc-situacao {
  font-weight: 500;
  color: var(--acento-escuro);
}

.proc-responsavel,
.proc-valor {
  color: var(--tinta-fraca);
}

.proc-valor {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* Segredo de justiça: presença discreta, sem alarde. */
.selo-sigilo {
  background: var(--media-fundo);
  color: var(--media);
  border-color: #e8d7ab;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* ── Vista Processos: detalhe ─────────────────────────────────── */

.botao-voltar {
  margin-bottom: 18px;
}

.detalhe-cabecalho {
  margin-bottom: 22px;
}

.detalhe-titulo-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.detalhe-titulo-linha h1 {
  font-size: 22px;
}

.detalhe-numero {
  color: var(--tinta-fraca);
  margin-top: 6px;
}

.detalhe-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 22px;
}

.detalhe-dado {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detalhe-dado-rotulo {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

.detalhe-dado-valor {
  font-size: 14px;
  color: var(--tinta);
}

/* Partes */
.lista-partes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.parte {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}

.parte:last-child {
  border-bottom: none;
}

.parte-nome {
  font-size: 14.5px;
  font-weight: 500;
}

.parte-etiquetas {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}

.parte-polo {
  font-size: 12px;
  color: var(--tinta-fraca);
}

/* Prazos */
.lista-prazos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prazo {
  padding: 14px 0;
  border-bottom: 1px solid var(--linha);
}

.prazo:last-child {
  border-bottom: none;
}

.prazo.fatal {
  border-left: 3px solid var(--critico);
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  background: linear-gradient(90deg, var(--critico-fundo) 0%, rgba(251, 236, 235, 0) 60%);
}

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

.prazo-descricao {
  font-size: 14.5px;
  font-weight: 500;
}

.prazo-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
  font-size: 13px;
  color: var(--tinta-fraca);
}

.prazo-vencimento {
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}

/* Linha do tempo */
.linha-tempo {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.evento {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 0 0 20px 4px;
}

.evento-marcador {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  margin-top: 4px;
}

.evento-marcador::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tinta-fraca);
  border: 2px solid var(--papel);
  box-shadow: 0 0 0 1px var(--linha-forte);
}

.evento:not(:last-child) .evento-marcador::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: -18px;
  width: 1px;
  background: var(--linha-forte);
}

.evento-marco .evento-marcador::before { background: var(--acento); }
.evento-decisao .evento-marcador::before { background: var(--alta); }
.evento-intimacao .evento-marcador::before { background: var(--media); }

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

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

.evento-data {
  color: var(--tinta-fraca);
}

.evento-tipo {
  font-size: 11px;
}

.evento-titulo {
  font-size: 14.5px;
  font-weight: 500;
  margin: 4px 0 2px;
}

.evento-teor {
  font-size: 13.5px;
  color: var(--tinta-media);
  margin-bottom: 4px;
}

.evento-fonte {
  color: var(--tinta-fraca);
}

/* Documentos */
.lista-documentos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.documento {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}

.documento:last-child {
  border-bottom: none;
}

.documento-info {
  flex: 1 1 auto;
  min-width: 0;
}

.documento-nome {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.documento-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

.documento-sigiloso {
  color: var(--media);
}

.documento-data {
  color: var(--tinta-fraca);
  white-space: nowrap;
}

/* Tarefas no detalhe */
.lista-tarefas-detalhe {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tarefa-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}

.tarefa-item:last-child {
  border-bottom: none;
}

.tarefa-situacao {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
  min-width: 92px;
  white-space: nowrap;
}

.tarefa-situacao.feita { color: var(--alta); }
.tarefa-situacao.andamento { color: var(--media); }
.tarefa-situacao.recusada { color: var(--tinta-fraca); }

.tarefa-titulo {
  font-size: 14px;
  font-weight: 500;
}

.tarefa-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

@media (max-width: 700px) {
  .lista-processos-cartoes {
    grid-template-columns: 1fr;
  }

  .prazo.fatal {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .parte-etiquetas {
    margin-left: 0;
  }
}

/* ── Vista Permissões: matriz função × permissão ──────────────── */

.aviso-leitura {
  background: var(--acento-claro);
  border: 1px solid #cfe0e4;
  border-radius: var(--raio);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--acento-escuro);
  margin-bottom: 18px;
}

.permissoes-legenda {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--tinta-media);
}

.legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legenda-marca {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid transparent;
  display: inline-block;
}

.legenda-marca.selo-sigilo {
  background: var(--media-fundo);
  border-color: #e8d7ab;
}

.legenda-marca.selo-critico-fraco {
  background: var(--baixa-fundo);
  border-color: #e9c6c1;
}

.recado-permissoes {
  font-size: 13px;
  color: var(--alta);
  background: var(--alta-fundo);
  border: 1px solid #c9e0d3;
  border-radius: var(--raio);
  padding: 9px 13px;
  margin-bottom: 16px;
}

.recado-permissoes.erro {
  color: var(--critico);
  background: var(--critico-fundo);
  border-color: var(--critico-linha);
}

.matriz-rolagem {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  background: var(--papel);
}

.matriz-permissoes {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
}

.matriz-permissoes th,
.matriz-permissoes td {
  text-align: left;
  vertical-align: top;
}

/* Cabeçalho de funções */
.matriz-permissoes thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fundo-suave);
  border-bottom: 1px solid var(--linha-forte);
  padding: 14px 14px;
}

.matriz-permissoes .canto {
  min-width: 260px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

.coluna-funcao {
  width: 150px;
}

.funcao-cabecalho {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.funcao-nome {
  font-size: 14px;
  font-weight: 600;
}

.funcao-permanente {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-fraca);
  border: 1px solid var(--linha-forte);
  border-radius: 3px;
  padding: 1px 5px;
  width: fit-content;
}

.funcao-descricao {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--tinta-fraca);
  line-height: 1.4;
  max-width: 150px;
}

/* Linha de grupo de recurso */
.linha-grupo .grupo-recurso {
  background: var(--fundo);
  border-top: 1px solid var(--linha-forte);
  border-bottom: 1px solid var(--linha);
  padding: 8px 14px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-media);
  font-weight: 600;
  position: sticky;
  left: 0;
}

/* Linhas de permissão */
.linha-permissao {
  border-bottom: 1px solid var(--linha);
}

.linha-permissao:hover {
  background: var(--fundo-suave);
}

.celula-rotulo {
  padding: 12px 14px;
  font-weight: 400;
}

.permissao-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.permissao-descricao {
  font-size: 14px;
  color: var(--tinta);
}

.permissao-chave {
  color: var(--tinta-fraca);
  font-size: 11.5px;
}

.permissao-marcas {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}

.selo-critico-fraco {
  background: var(--baixa-fundo);
  color: var(--baixa);
  border-color: #e9c6c1;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.celula-checkbox {
  text-align: center;
  padding: 12px 14px;
}

.celula-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--acento);
  cursor: pointer;
}

.celula-checkbox input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Destaque de sigilo: a linha inteira e a coluna do checkbox */
.linha-sigilo {
  background: linear-gradient(90deg, var(--media-fundo) 0%, rgba(248, 241, 224, 0) 55%);
}

.linha-sigilo:hover {
  background: linear-gradient(90deg, var(--media-fundo) 0%, rgba(248, 241, 224, 0.3) 55%);
}

.linha-sigilo .celula-rotulo {
  border-left: 3px solid var(--media);
}

.celula-sigilo input[type="checkbox"] {
  accent-color: var(--media);
}

/* Modal de confirmação de sigilo */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(22, 25, 29, 0.42);
  display: grid;
  place-items: center;
  padding: 24px;
}

.modal {
  background: var(--papel);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-forte);
  padding: 26px 28px;
  max-width: 460px;
  width: 100%;
  border-top: 4px solid var(--media);
}

.modal h2 {
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--media);
}

.modal p {
  font-size: 14px;
  color: var(--tinta);
  margin-bottom: 12px;
  line-height: 1.55;
}

.modal-detalhe {
  color: var(--tinta-media);
}

.modal-nota {
  font-size: 13px;
  color: var(--tinta-fraca);
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 12px;
}

.modal-acoes {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .permissoes-legenda {
    gap: 12px;
  }
}

/* ── Aba com selo de contagem ─────────────────────────────────── */

.aba .selo-aba {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--acento);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.aba[aria-selected="true"] .selo-aba {
  background: var(--acento-escuro);
}

/* ── Vista Aprovações pendentes ───────────────────────────────── */

.pendente {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  margin-bottom: 14px;
  overflow: hidden;
}

.pendente.aberto {
  border-color: var(--linha-forte);
  box-shadow: var(--sombra);
}

.pendente-cabecalho {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 20px;
}

.pendente-info {
  flex: 1 1 auto;
  min-width: 0;
}

.pendente-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pendente-resumo {
  font-size: 14.5px;
  color: var(--tinta);
  line-height: 1.5;
  margin-bottom: 8px;
}

.pendente-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

.pendente-meta strong {
  color: var(--tinta-media);
  font-weight: 600;
}

.pendente-cabecalho > .botao {
  flex: 0 0 auto;
  white-space: nowrap;
}

.pendente-corpo {
  padding: 0 20px 20px;
}

/* O cartão de plano dentro da fila não precisa da própria borda/sombra:
   o item já é o cartão. */
.pendente-corpo .cartao {
  border-color: var(--linha);
  box-shadow: none;
}

/* Estado vazio elegante */
.pendentes-vazio {
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-grande);
  background: var(--fundo-suave);
}

.pendentes-vazio-marca {
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--alta-fundo);
  color: var(--alta);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
}

.pendentes-vazio h2 {
  font-size: 17px;
  margin-bottom: 8px;
}

.pendentes-vazio p {
  color: var(--tinta-media);
  font-size: 14px;
  max-width: 52ch;
  margin: 0 auto 20px;
}

@media (max-width: 700px) {
  .pendente-cabecalho {
    flex-direction: column;
    gap: 12px;
  }

  .pendente-cabecalho > .botao {
    width: 100%;
  }

  .pendente-corpo {
    padding: 0 12px 16px;
  }
}

/* ── Selo de aba em alerta (prazos vencidos) ──────────────────── */

.aba .selo-aba-alerta {
  background: var(--critico);
}

.aba[aria-selected="true"] .selo-aba-alerta {
  background: var(--critico);
}

/* ── Vista Agenda ─────────────────────────────────────────────── */

.agenda-resumo {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.agenda-pilula {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  background: var(--papel);
}

.agenda-pilula-numero {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.agenda-pilula-rotulo {
  font-size: 13px;
  color: var(--tinta-media);
}

.agenda-pilula-fatal {
  border-color: var(--critico-linha);
  background: var(--critico-fundo);
}

.agenda-pilula-fatal .agenda-pilula-numero {
  color: var(--critico);
}

.agenda-pilula-vencido {
  border-color: var(--critico-linha);
  background: var(--critico-fundo);
}

.agenda-pilula-vencido .agenda-pilula-numero {
  color: var(--critico);
}

.agenda-pilula-ok .agenda-pilula-numero {
  color: var(--alta);
}

/* Faixas (Vencidos, Vence hoje, Próximos 7 dias, Depois) */
.agenda-faixa {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-fraca);
  font-weight: 600;
  margin: 26px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linha);
}

.agenda-faixa:first-child {
  margin-top: 8px;
}

.agenda-faixa-contagem {
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fraca);
  font-weight: 500;
  letter-spacing: 0;
}

.agenda-faixa-vencido {
  color: var(--critico);
}

.agenda-faixa-vencido .agenda-faixa-contagem {
  color: var(--critico);
}

.agenda-faixa-hoje {
  color: var(--media);
}

/* Itens */
.lista-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
}

.agenda-item {
  display: flex;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linha);
  align-items: flex-start;
}

.agenda-item:last-child {
  border-bottom: none;
}

.agenda-item.fatal {
  border-left: 3px solid var(--critico);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  background: linear-gradient(90deg, var(--critico-fundo) 0%, rgba(251, 236, 235, 0) 55%);
}

.agenda-item.vencido:not(.fatal) {
  border-left: 3px solid var(--baixa);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.agenda-data {
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agenda-data-dia {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.agenda-data-relativo {
  font-size: 12px;
  color: var(--tinta-fraca);
}

.agenda-item.vencido .agenda-data-relativo {
  color: var(--critico);
  font-weight: 500;
}

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

.agenda-item-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.agenda-descricao {
  font-size: 14.5px;
  font-weight: 500;
}

.agenda-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}

.agenda-processo-link {
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  text-align: left;
}

.agenda-processo-link:hover {
  color: var(--acento-escuro);
}

.selo-vencido {
  background: var(--baixa-fundo);
  color: var(--baixa);
  border-color: #e9c6c1;
}

@media (max-width: 700px) {
  .agenda-item.fatal,
  .agenda-item.vencido:not(.fatal) {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .agenda-data {
    flex-basis: 80px;
  }
}