:root {
  color-scheme: light;
  --fonte-painel: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Identidade oficial Centro Paula Souza */
  --cps-vermelho: #b20000;
  --cps-vermelho-escuro: #7e0000;
  --cps-azul: #005c6d;
  --cps-azul-escuro: #004854;
  --cps-azul-destaque: #00c1cf;
  --cps-azul-destaque-hover: #00d8e8;
  --cps-verde: #a0c340;
  --cps-blueberry: #4c7eff;
  --cps-crayola: #ffc24c;
  --cps-violeta: #8a29e6;
  --cps-coral: #ff4c4d;
  --cps-pink: #ff4ca2;
  --cps-cinza-texto: #666666;
  --cps-cinza-claro: #dadada;
  --cps-cinza-hover: #e6e6e6;
  --cps-prata: #f8f8f8;
  --cps-branco: #ffffff;

  /* Tokens semânticos do painel */
  --cor-fundo: var(--cps-prata);
  --cor-superficie: var(--cps-branco);
  --cor-superficie-suave: #f2f7f8;
  --cor-texto: var(--cps-cinza-texto);
  --cor-texto-forte: var(--cps-azul-escuro);
  --cor-texto-secundario: var(--cps-cinza-texto);
  --cor-borda: var(--cps-cinza-claro);
  --cor-borda-forte: #8c9698;
  --cor-topo: var(--cps-azul);
  --cor-topo-suave: var(--cps-azul-escuro);
  --cor-primaria: var(--cps-vermelho);
  --cor-primaria-hover: var(--cps-vermelho-escuro);
  --cor-primaria-suave: rgb(178 0 0 / 0.08);
  --cor-destaque: var(--cps-azul-destaque);
  --cor-destaque-hover: var(--cps-azul-destaque-hover);
  --cor-sucesso: var(--cps-verde);
  --cor-sucesso-texto: #445700;
  --cor-sucesso-suave: rgb(160 195 64 / 0.18);
  --cor-aviso: var(--cps-crayola);
  --cor-aviso-texto: #604600;
  --cor-aviso-suave: rgb(255 194 76 / 0.2);
  --cor-perigo: var(--cps-vermelho);
  --cor-perigo-hover: var(--cps-vermelho-escuro);
  --cor-perigo-suave: rgb(255 76 77 / 0.12);
  --cor-info: var(--cps-azul);
  --cor-info-suave: rgb(0 193 207 / 0.12);
  --cor-link: var(--cps-azul);
  --cor-link-hover: var(--cps-azul-escuro);
  --foco: var(--cps-azul);
  --foco-anel: rgb(0 193 207 / 0.35);
  --raio-sm: 7px;
  --raio-md: 12px;
  --raio-lg: 18px;
  --sombra-sm: 0 1px 2px rgb(0 72 84 / 0.08);
  --sombra-md: 0 8px 24px rgb(0 72 84 / 0.12);
  --transicao: 160ms ease;
  font-family: var(--fonte-painel);
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--cor-fundo);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-painel);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--cor-link);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--cor-link-hover);
}

button,
a,
input,
select,
textarea {
  transition:
    border-color var(--transicao),
    box-shadow var(--transicao),
    background-color var(--transicao),
    color var(--transicao),
    opacity var(--transicao),
    transform var(--transicao);
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--foco-anel);
}

::selection {
  background: var(--cor-destaque);
  color: var(--cps-azul-escuro);
}

.pular-conteudo {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  box-shadow: var(--sombra-md);
  transform: translateY(-160%);
}

.pular-conteudo:focus {
  transform: translateY(0);
}

.topo-painel {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cor-topo);
  color: var(--cps-branco);
  border-bottom: 3px solid var(--cps-vermelho);
  box-shadow: 0 2px 14px rgb(0 72 84 / 0.2);
}

.topo-painel__conteudo {
  max-width: 1180px;
  min-height: 68px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.marca-painel {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  color: var(--cps-branco);
  text-decoration: none;
  line-height: 1.2;
}

.marca-painel:hover {
  color: var(--cps-branco);
}

.marca-painel__nome {
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -0.01em;
}

.marca-painel__subtitulo {
  color: rgb(255 255 255 / 0.78);
  font-size: 12px;
  font-weight: 500;
}

.sessao-painel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
  font-size: 14px;
}

.sessao-painel__usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sessao-painel__nome {
  overflow: hidden;
  max-width: 260px;
  color: var(--cps-branco);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sessao-painel__perfil {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  background: var(--cor-topo-suave);
  color: var(--cps-branco);
  font-size: 12px;
  text-transform: capitalize;
}

.form-inline {
  display: inline;
  margin: 0;
}

.botao-link {
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: var(--raio-sm);
  padding: 7px 10px;
  background: transparent;
  color: var(--cps-branco);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
}

.botao-link:hover {
  border-color: rgb(255 255 255 / 0.5);
  background: rgb(255 255 255 / 0.08);
}

.conteudo-painel {
  width: min(100%, 1180px);
  margin: 30px auto;
  padding: 0 24px 48px;
}

.conteudo-painel:focus {
  outline: none;
}

h1,
h2,
h3 {
  color: var(--cor-texto-forte);
}

.painel-cabecalho {
  margin-bottom: 20px;
  padding: 24px 26px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-sm);
}

.painel-cabecalho h1 {
  margin: 0;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  letter-spacing: -0.025em;
}

.painel-cabecalho p:last-child {
  margin-bottom: 0;
}

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.cartao-painel {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  padding: 22px;
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-sm);
}

.cartao-painel h2 {
  margin-top: 0;
  letter-spacing: -0.015em;
}

.cartao-painel--futuro {
  border-style: dashed;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: var(--cor-primaria);
  color: var(--cps-branco);
  cursor: pointer;
  text-decoration: none;
  font-weight: 680;
  line-height: 1.2;
  vertical-align: middle;
}

.botao:hover {
  background: var(--cor-primaria-hover);
  color: var(--cps-branco);
}

.botao:active {
  transform: translateY(1px);
}

.botao--secundario {
  border-color: var(--cor-borda-forte);
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

.botao--secundario:hover {
  border-color: var(--cps-cinza-texto);
  background: var(--cps-cinza-hover);
  color: var(--cor-texto);
}

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

.botao--perigo:hover {
  background: var(--cor-perigo-hover);
}

button:disabled,
[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.68;
}

.botao-em-processamento {
  position: relative;
  pointer-events: none;
}

.botao-em-processamento::before {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: girar 700ms linear infinite;
}

.form-em-processamento {
  cursor: progress;
}

.etiqueta,
.janela {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--cps-cinza-hover);
  color: var(--cor-texto-forte);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.texto-secundario {
  color: var(--cor-texto-secundario);
}

.cabecalho-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.mensagens-flash {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.flash {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  padding: 13px 15px;
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-sm);
}

.flash__indicador {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--cor-info);
}

.flash--sucesso {
  border-color: var(--cps-verde);
  background: var(--cor-sucesso-suave);
}

.flash--sucesso .flash__indicador {
  background: var(--cor-sucesso);
}

.flash--aviso {
  border-color: var(--cps-crayola);
  background: var(--cor-aviso-suave);
}

.flash--aviso .flash__indicador {
  background: var(--cor-aviso);
}

.flash--erro {
  border-color: var(--cps-coral);
  background: var(--cor-perigo-suave);
}

.flash--erro .flash__indicador {
  background: var(--cor-perigo);
}

.filtros-atendimento {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.filtro-atendimento {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  text-decoration: none;
  box-shadow: var(--sombra-sm);
}

.filtro-atendimento:hover {
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto);
}

.filtro-atendimento--ativo {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  color: var(--cps-vermelho-escuro);
  font-weight: 700;
}

.lista-atendimentos {
  display: grid;
  gap: 12px;
}

.atendimento-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: 18px;
  box-shadow: var(--sombra-sm);
}

.atendimento-item__principal {
  min-width: 0;
}

.atendimento-item__topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.atendimento-item__acoes {
  flex: 0 0 auto;
}

.etiqueta--aguardando {
  background: var(--cor-aviso-suave);
  color: var(--cor-aviso-texto);
}

.etiqueta--em_atendimento {
  background: var(--cor-info-suave);
  color: var(--cps-azul-escuro);
}

.etiqueta--administracao {
  background: var(--cor-info-suave);
  color: var(--cps-azul-escuro);
  border: 1px solid var(--cps-azul);
}

.janela--aberta {
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso-texto);
}

.janela--fechada {
  background: var(--cor-perigo-suave);
  color: var(--cps-vermelho-escuro);
}

.estado-vazio {
  background: var(--cor-superficie);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-md);
  padding: 32px 24px;
  text-align: center;
}

.estado-vazio h2 {
  margin-top: 0;
}

.painel-grid-atendimento {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

.conversa-painel {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: 20px;
  box-shadow: var(--sombra-sm);
}

.conversa-painel__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.conversa-mensagens {
  display: grid;
  gap: 12px;
  max-height: 65vh;
  overflow-y: auto;
  padding: 4px 8px 4px 2px;
  scrollbar-gutter: stable;
}

.mensagem {
  max-width: 82%;
  padding: 11px 13px;
  border: 1px solid var(--cor-borda);
  border-radius: 4px 12px 12px 12px;
  background: var(--cor-superficie-suave);
}

.mensagem--usuario {
  justify-self: start;
}

.mensagem--bot,
.mensagem--atendente {
  justify-self: end;
  border-radius: 12px 4px 12px 12px;
  background: var(--cor-info-suave);
}

.mensagem--atendente {
  background: var(--cor-sucesso-suave);
}

.mensagem__meta {
  margin-bottom: 5px;
  color: var(--cor-texto-secundario);
  font-size: 12px;
  font-weight: 650;
}

.mensagem__texto {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.acoes-atendimento {
  display: grid;
  gap: 14px;
}

.form-atendimento {
  display: grid;
  gap: 10px;
}

.form-atendimento textarea {
  width: 100%;
  resize: vertical;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
}

.form-atendimento textarea:focus {
  border-color: var(--foco);
  box-shadow: 0 0 0 3px var(--foco-anel);
}

.form-atendimento-finalizar {
  margin-top: 12px;
}

.aviso-painel {
  background: var(--cor-aviso-suave);
  border: 1px solid var(--cps-crayola);
  padding: 12px 14px;
  border-radius: var(--raio-sm);
}

/* ==================================================
   Bloco 5.5 - Sistema e observabilidade
   ================================================== */

.resumo-sistema,
.grade-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.cartao-status,
.metrica,
.secao-sistema {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-sm);
}

.cartao-status {
  display: grid;
  gap: 6px;
  padding: 16px;
}

.cartao-status--ok {
  border-left: 5px solid var(--cor-sucesso);
}

.cartao-status--atencao {
  border-left: 5px solid var(--cor-aviso);
}

.cartao-status--critico {
  border-left: 5px solid var(--cor-perigo);
}

.cartao-status__rotulo,
.metrica span {
  color: var(--cor-texto-secundario);
  font-size: 13px;
}

.cartao-status strong,
.metrica strong {
  font-size: 20px;
}

.secao-sistema {
  margin-top: 18px;
  padding: 20px;
}

.grade-metricas {
  margin-top: 12px;
}

.metrica {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.lista-alertas {
  display: grid;
  gap: 10px;
}

.alerta-operacional {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--cor-borda);
}

.alerta-operacional--critico {
  background: var(--cor-perigo-suave);
  border-color: var(--cps-coral);
}

.alerta-operacional--aviso {
  background: var(--cor-aviso-suave);
  border-color: var(--cps-crayola);
}

.tabela-responsiva {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.tabela-sistema {
  width: 100%;
  border-collapse: collapse;
}

.tabela-sistema th,
.tabela-sistema td {
  padding: 10px;
  border-bottom: 1px solid var(--cps-cinza-hover);
  text-align: left;
  vertical-align: top;
}

.tabela-sistema th {
  color: var(--cor-texto-forte);
  font-size: 13px;
  font-weight: 750;
}

.resultado-simulacao {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--cps-azul-destaque);
  border-radius: var(--raio-sm);
  background: var(--cor-info-suave);
}

.texto-ajuda {
  color: var(--cor-texto-secundario);
  font-size: 13px;
}

.campo-checkbox-auto {
  width: auto;
}

.oculto {
  display: none !important;
}

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

@media (max-width: 800px) {
  .cabecalho-flex,
  .atendimento-item,
  .conversa-painel__cabecalho {
    align-items: stretch;
    flex-direction: column;
  }

  .painel-grid-atendimento {
    grid-template-columns: 1fr;
  }

  .mensagem {
    max-width: 94%;
  }
}

@media (max-width: 700px) {
  .topo-painel__conteudo {
    align-items: flex-start;
    padding: 10px 16px;
  }

  .sessao-painel {
    align-items: flex-end;
    gap: 8px;
  }

  .sessao-painel__usuario {
    align-items: flex-end;
    flex-direction: column;
    gap: 3px;
  }

  .sessao-painel__nome {
    max-width: 160px;
  }

  .conteudo-painel {
    margin-top: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .painel-cabecalho,
  .cartao-painel,
  .conversa-painel,
  .secao-sistema {
    padding: 18px;
  }
}

@media (max-width: 460px) {
  .topo-painel__conteudo {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .marca-painel {
    align-self: flex-start;
  }

  .sessao-painel {
    align-items: center;
    justify-content: space-between;
  }

  .sessao-painel__usuario {
    align-items: flex-start;
  }

  .sessao-painel__nome {
    max-width: 210px;
  }

  .grade-cartoes {
    grid-template-columns: 1fr;
  }

  .botao {
    width: 100%;
  }
}

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

/* ==================================================
   UX-C - Listagens, tabelas e ações responsivas
   ================================================== */

.somente-leitores {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pagina-listagem {
  display: grid;
  gap: 18px;
}

.pagina-listagem--larga {
  width: min(100%, 1540px);
}

.pagina-listagem__cabecalho {
  margin-bottom: 0;
}

.pagina-listagem__cabecalho .voltar-painel {
  margin-bottom: 10px;
}

.voltar-painel {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--cor-link);
  font-size: 14px;
  font-weight: 680;
  text-decoration: none;
}

.voltar-painel:hover {
  color: var(--cor-link-hover);
  text-decoration: underline;
}

.barra-listagem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.contador-listagem {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie);
  color: var(--cor-texto-forte);
  box-shadow: var(--sombra-sm);
  font-size: 13px;
  font-weight: 720;
}

.tabela-listagem {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-sm);
  scrollbar-gutter: stable;
}

.tabela-listagem:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.tabela-dados {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--cor-superficie);
}

.tabela-dados th,
.tabela-dados td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--cps-cinza-hover);
  text-align: left;
  vertical-align: top;
}

.tabela-dados th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #edf4f5;
  color: var(--cps-azul-escuro);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabela-dados tbody tr:last-child td {
  border-bottom: 0;
}

.tabela-dados tbody tr {
  transition: background-color var(--transicao);
}

.tabela-dados tbody tr:hover {
  background: #fbfdfd;
}

.titulo-celula,
.link-principal-tabela {
  color: var(--cor-texto-forte);
  font-weight: 730;
}

.link-principal-tabela {
  text-decoration-thickness: 1px;
}

.pequeno {
  margin-top: 5px;
  color: var(--cor-texto-secundario);
  font-size: 12px;
  line-height: 1.45;
}

.pequeno--erro {
  color: var(--cps-vermelho-escuro);
}

.quebra-texto {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.status-pilula {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.25;
  text-transform: capitalize;
}

.status-pilula--sucesso {
  border-color: rgb(160 195 64 / 0.65);
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso-texto);
}

.status-pilula--aviso {
  border-color: rgb(255 194 76 / 0.7);
  background: var(--cor-aviso-suave);
  color: var(--cor-aviso-texto);
}

.status-pilula--perigo {
  border-color: rgb(255 76 77 / 0.45);
  background: var(--cor-perigo-suave);
  color: var(--cps-vermelho-escuro);
}

.status-pilula--info {
  border-color: rgb(0 193 207 / 0.45);
  background: var(--cor-info-suave);
  color: var(--cps-azul-escuro);
}

.status-pilula--neutro {
  border-color: var(--cor-borda);
  background: var(--cps-prata);
  color: var(--cor-texto-secundario);
}

.acoes-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px;
  min-width: 210px;
}

.acoes-linha form {
  display: inline-flex;
  margin: 0;
}

.acoes-linha .botao {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 13px;
}

.acoes-linha__nota {
  flex: 1 0 100%;
  margin-top: 1px;
}

.botao--sucesso {
  border-color: #7f9f2c;
  background: #6f8f24;
  color: var(--cps-branco);
}

.botao--sucesso:hover {
  border-color: #5f7c1e;
  background: #5f7c1e;
  color: var(--cps-branco);
}

.botao--info {
  background: var(--cps-azul);
  color: var(--cps-branco);
}

.botao--info:hover {
  background: var(--cps-azul-escuro);
  color: var(--cps-branco);
}

.botao--aviso {
  border-color: #b17c00;
  background: #8a6200;
  color: var(--cps-branco);
}

.botao--aviso:hover {
  background: #6e4e00;
  color: var(--cps-branco);
}

.botao--violeta {
  background: var(--cps-violeta);
  color: var(--cps-branco);
}

.botao--violeta:hover {
  background: #6e20b8;
  color: var(--cps-branco);
}

.alerta-listagem {
  padding: 13px 15px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-sm);
}

.alerta-listagem--sucesso {
  border-color: var(--cps-verde);
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso-texto);
}

.alerta-listagem--erro {
  border-color: var(--cps-coral);
  background: var(--cor-perigo-suave);
  color: var(--cps-vermelho-escuro);
}

@media (max-width: 760px) {
  .barra-listagem {
    align-items: stretch;
    flex-direction: column;
  }

  .barra-listagem .contador-listagem {
    align-self: flex-start;
  }

  .barra-listagem > .botao {
    width: 100%;
  }

  .tabela-listagem {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .tabela-dados--cartoes-movel,
  .tabela-dados--cartoes-movel tbody,
  .tabela-dados--cartoes-movel tr,
  .tabela-dados--cartoes-movel td {
    display: block;
    width: 100%;
  }

  .tabela-dados--cartoes-movel thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .tabela-dados--cartoes-movel tbody {
    display: grid;
    gap: 14px;
  }

  .tabela-dados--cartoes-movel tbody tr,
  .tabela-dados--cartoes-movel tbody tr:hover {
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-superficie);
    box-shadow: var(--sombra-sm);
  }

  .tabela-dados--cartoes-movel td {
    display: grid;
    grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1.3fr);
    gap: 12px;
    align-items: start;
    padding: 11px 13px;
    border-bottom: 1px solid var(--cps-cinza-hover);
  }

  .tabela-dados--cartoes-movel td:last-child {
    border-bottom: 0;
  }

  .tabela-dados--cartoes-movel td::before {
    color: var(--cor-texto-forte);
    content: attr(data-label);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.4;
  }

  .tabela-dados--cartoes-movel .acoes-linha {
    min-width: 0;
  }

  .tabela-dados--cartoes-movel .acoes-linha .botao,
  .tabela-dados--cartoes-movel .acoes-linha form {
    width: 100%;
  }

  .tabela-dados--cartoes-movel .acoes-linha form .botao {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .tabela-dados--cartoes-movel td {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}



/* ==================================================
   UX-D - Formulários de cadastro e edição
   ================================================== */

.conteudo.pagina-formulario {
  display: grid;
  width: min(100%, 920px);
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  gap: 14px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.pagina-formulario > .voltar-painel {
  margin-bottom: 2px;
}

.pagina-formulario > h1 {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
  letter-spacing: -0.025em;
}

.pagina-formulario > h2 {
  margin: -4px 0 0;
  color: var(--cor-texto-secundario);
  font-size: 1rem;
  font-weight: 650;
}

.pagina-formulario > p {
  max-width: 72ch;
  margin: 0;
  color: var(--cor-texto-secundario);
}

.pagina-formulario .aviso,
.pagina-formulario .erro,
.pagina-formulario .informacao,
.pagina-formulario .arquivo-atual {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  line-height: 1.55;
  box-shadow: var(--sombra-sm);
}

.pagina-formulario .aviso {
  border-color: rgb(255 194 76 / 0.72);
  background: var(--cor-aviso-suave);
  color: var(--cor-aviso-texto);
}

.pagina-formulario .erro {
  border-color: rgb(255 76 77 / 0.55);
  border-left: 4px solid var(--cps-coral);
  background: var(--cor-perigo-suave);
  color: var(--cps-vermelho-escuro);
}

.pagina-formulario .informacao {
  border-color: rgb(0 193 207 / 0.5);
  background: var(--cor-info-suave);
  color: var(--cps-azul-escuro);
}

.pagina-formulario .arquivo-atual {
  border-color: var(--cor-borda);
  background: var(--cor-superficie-suave);
  color: var(--cor-texto-forte);
  overflow-wrap: anywhere;
}

.pagina-formulario .formulario-painel {
  display: block;
  margin: 4px 0 0;
  padding: 26px;
  border: 1px solid var(--cor-borda);
  border-top: 4px solid var(--cps-azul);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-md);
}

.pagina-formulario .formulario-painel > label,
.pagina-formulario .formulario-painel > .campo > label {
  display: block;
  margin: 20px 0 7px;
  color: var(--cor-texto-forte);
  font-weight: 730;
  line-height: 1.35;
}

.pagina-formulario .formulario-painel > label:first-of-type,
.pagina-formulario .formulario-painel > .campo:first-of-type > label {
  margin-top: 0;
}

.pagina-formulario .formulario-painel input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.pagina-formulario .formulario-painel select,
.pagina-formulario .formulario-painel textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--cor-texto-forte);
  box-shadow: inset 0 1px 2px rgb(0 72 84 / 0.04);
}

.pagina-formulario .formulario-painel textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.55;
}

.pagina-formulario .formulario-painel textarea.resposta {
  min-height: 230px;
}

.pagina-formulario .formulario-painel input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover,
.pagina-formulario .formulario-painel select:hover,
.pagina-formulario .formulario-painel textarea:hover {
  border-color: var(--cps-azul);
}

.pagina-formulario .formulario-painel input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.pagina-formulario .formulario-painel select:focus,
.pagina-formulario .formulario-painel textarea:focus {
  outline: none;
  border-color: var(--foco);
  box-shadow: 0 0 0 3px var(--foco-anel);
}

.pagina-formulario .formulario-painel input::placeholder,
.pagina-formulario .formulario-painel textarea::placeholder {
  color: #8a9395;
}

.pagina-formulario .formulario-painel input[type="file"] {
  min-height: 48px;
  padding: 6px;
  background: var(--cps-prata);
}

.pagina-formulario .formulario-painel input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 12px;
  border: 1px solid var(--cps-azul);
  border-radius: 6px;
  background: var(--cps-branco);
  color: var(--cps-azul-escuro);
  cursor: pointer;
  font: inherit;
  font-weight: 680;
}

.pagina-formulario .formulario-painel input[type="file"]::file-selector-button:hover {
  background: var(--cor-info-suave);
}

.pagina-formulario .ajuda,
.pagina-formulario .formulario-painel > p:not(.aviso):not(.erro) {
  margin: 6px 0 9px;
  color: var(--cor-texto-secundario);
  font-size: 13px;
  line-height: 1.5;
}

.pagina-formulario .formulario-painel h2 {
  margin: 28px 0 6px;
  padding-top: 22px;
  border-top: 1px solid var(--cps-cinza-hover);
  font-size: 1.08rem;
}

.pagina-formulario .publicos,
.pagina-formulario .tipo-origem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cps-prata);
}

.pagina-formulario .publicos-titulo {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: var(--cor-texto-forte);
  font-weight: 730;
}

.pagina-formulario .publicos-grid {
  display: contents;
}

.pagina-formulario .publico,
.pagina-formulario .publico-opcao,
.pagina-formulario .opcao,
.pagina-formulario .linha-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
}

.pagina-formulario .publico:hover,
.pagina-formulario .publico-opcao:hover,
.pagina-formulario .opcao:hover,
.pagina-formulario .linha-checkbox:hover {
  border-color: var(--cps-azul-destaque);
  background: #fbfeff;
}

.pagina-formulario .publico input,
.pagina-formulario .publico-opcao input,
.pagina-formulario .opcao input,
.pagina-formulario .linha-checkbox input,
.pagina-formulario .formulario-painel > label > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--cps-azul);
}

.pagina-formulario .publico label,
.pagina-formulario .publico-opcao label,
.pagina-formulario .opcao label,
.pagina-formulario .linha-checkbox label {
  display: block;
  margin: 0;
  color: var(--cor-texto);
  font-weight: 520;
  line-height: 1.45;
  cursor: pointer;
}

.pagina-formulario .publico-nome {
  color: var(--cor-texto-forte);
  font-weight: 720;
}

.pagina-formulario .publico-descricao {
  display: block;
  margin-top: 3px;
  color: var(--cor-texto-secundario);
  font-size: 12px;
}

.pagina-formulario .campo,
.pagina-formulario .campo-origem {
  margin-bottom: 18px;
}

.pagina-formulario .campo:last-child,
.pagina-formulario .campo-origem:last-child {
  margin-bottom: 0;
}

.pagina-formulario .acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--cps-cinza-hover);
}

.pagina-formulario .formulario-painel > button[type="submit"],
.pagina-formulario .acoes .botao {
  min-height: 44px;
  margin-top: 24px;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: var(--cor-primaria);
  color: var(--cps-branco);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}

.pagina-formulario .acoes .botao {
  margin-top: 0;
}

.pagina-formulario .formulario-painel > button[type="submit"]:hover,
.pagina-formulario .acoes .botao:hover {
  background: var(--cor-primaria-hover);
  color: var(--cps-branco);
}

.pagina-formulario .acoes .botao-secundario {
  border-color: var(--cor-borda-forte);
  background: var(--cor-superficie);
  color: var(--cor-texto-forte);
}

.pagina-formulario .acoes .botao-secundario:hover {
  border-color: var(--cps-azul);
  background: var(--cor-info-suave);
  color: var(--cps-azul-escuro);
}

@media (max-width: 700px) {
  .conteudo.pagina-formulario {
    gap: 12px;
  }

  .pagina-formulario .formulario-painel {
    padding: 18px;
    border-radius: var(--raio-sm);
  }

  .pagina-formulario .publicos,
  .pagina-formulario .tipo-origem {
    grid-template-columns: 1fr;
    padding: 11px;
  }

  .pagina-formulario .acoes {
    align-items: stretch;
    flex-direction: column;
  }

  .pagina-formulario .acoes .botao,
  .pagina-formulario .formulario-painel > button[type="submit"] {
    width: 100%;
  }
}

/* ==================================================
   UX-E - Leitura, histórico, revisão e análise assistida
   ================================================== */

.conteudo.pagina-leitura {
  display: grid;
  width: min(100%, 1040px);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  gap: 18px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.pagina-leitura > .voltar-painel {
  margin-bottom: -2px;
}

.pagina-leitura > h1,
.pagina-leitura .topo h1 {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
  letter-spacing: -0.025em;
}

.pagina-leitura > h2 {
  margin: -8px 0 0;
  color: var(--cor-texto-secundario);
  font-size: 1rem;
  font-weight: 650;
}

.pagina-leitura .resumo,
.pagina-leitura .resumo-documento {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--cor-borda);
  border-top: 4px solid var(--cps-azul);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-sm);
  line-height: 1.6;
}

.pagina-leitura .resumo strong,
.pagina-leitura .resumo-documento strong {
  color: var(--cor-texto-forte);
}

.pagina-leitura .evento {
  position: relative;
  margin: 0;
  padding: 18px 20px 18px 22px;
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cps-azul-destaque);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  background: var(--cor-superficie);
  box-shadow: var(--sombra-sm);
}

.pagina-leitura .evento + .evento {
  margin-top: -6px;
}

.pagina-leitura .evento h3 {
  margin: 0 0 8px;
  color: var(--cor-texto-forte);
  font-size: 1rem;
}

.pagina-leitura .evento .data {
  margin-top: 4px;
  color: var(--cor-texto-secundario);
  font-size: 13px;
}

.pagina-leitura .evento .detalhe,
.pagina-leitura .evento .dados {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--cps-cinza-hover);
  border-radius: var(--raio-sm);
  background: var(--cps-prata);
  color: var(--cor-texto);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.pagina-leitura .publicos,
.pagina-leitura .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.pagina-leitura .publico,
.pagina-leitura .chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie-suave);
  color: var(--cps-azul-escuro);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pagina-leitura .aviso,
.pagina-leitura .erro,
.pagina-leitura .mensagem,
.pagina-leitura .seguro {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  line-height: 1.55;
  box-shadow: var(--sombra-sm);
}

.pagina-leitura .aviso {
  border-color: rgb(255 194 76 / 0.72);
  background: var(--cor-aviso-suave);
  color: var(--cor-aviso-texto);
}

.pagina-leitura .erro {
  border-color: rgb(255 76 77 / 0.55);
  border-left: 4px solid var(--cps-coral);
  background: var(--cor-perigo-suave);
  color: var(--cps-vermelho-escuro);
}

.pagina-leitura .mensagem {
  border-color: rgb(160 195 64 / 0.72);
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso-texto);
}

.pagina-leitura .seguro {
  border-color: rgb(0 193 207 / 0.5);
  border-left: 4px solid var(--cps-azul-destaque);
  background: var(--cor-info-suave);
  color: var(--cps-azul-escuro);
}

.estado-vazio--compacto {
  padding: 22px 20px;
  text-align: left;
}

.pagina-leitura .acoes,
.pagina-leitura .acoes-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.pagina-leitura .acoes form,
.pagina-leitura .acoes-topo form {
  display: inline-flex;
  margin: 0;
}

@media (max-width: 700px) {
  .conteudo.pagina-leitura {
    gap: 14px;
  }

  .pagina-leitura .resumo,
  .pagina-leitura .resumo-documento,
  .pagina-leitura .evento {
    padding: 16px;
  }

  .pagina-leitura .acoes,
  .pagina-leitura .acoes-topo {
    align-items: stretch;
    flex-direction: column;
  }

  .pagina-leitura .acoes .botao,
  .pagina-leitura .acoes form,
  .pagina-leitura .acoes form .botao,
  .pagina-leitura .acoes-topo .botao,
  .pagina-leitura .acoes-topo form,
  .pagina-leitura .acoes-topo form .botao {
    width: 100%;
  }
}


/* ==================================================
   UX-F - Início, login, sistema e atendimento humano
   ================================================== */

.painel-cabecalho__rotulo,
.secao-sistema__rotulo,
.cartao-modulo__categoria,
.cartao-operacao__rotulo,
.estado-vazio__rotulo {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--cps-vermelho);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* Página inicial */

.pagina-inicial {
  display: grid;
  gap: 18px;
}

.painel-cabecalho--inicio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 0;
  overflow: hidden;
  border-top: 4px solid var(--cps-azul);
  background:
    linear-gradient(120deg, rgb(0 92 109 / 0.07), transparent 58%),
    var(--cor-superficie);
}

.painel-cabecalho--inicio > div:first-child {
  max-width: 760px;
}

.painel-cabecalho--inicio p {
  margin: 8px 0 0;
  color: var(--cor-texto-secundario);
}

.perfil-resumo {
  flex: 0 0 auto;
  min-width: 150px;
  padding: 12px 14px;
  border: 1px solid rgb(0 193 207 / 0.42);
  border-radius: var(--raio-sm);
  background: var(--cor-info-suave);
}

.perfil-resumo__rotulo {
  display: block;
  margin-bottom: 2px;
  color: var(--cor-texto-secundario);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.perfil-resumo strong {
  color: var(--cps-azul-escuro);
  text-transform: capitalize;
}

.grade-cartoes--modulos {
  align-items: stretch;
}

.cartao-modulo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 245px;
  overflow: hidden;
  border-top: 4px solid var(--cps-azul);
  transition:
    border-color var(--transicao),
    box-shadow var(--transicao),
    transform var(--transicao);
}

.cartao-modulo::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 74px;
  height: 74px;
  border-radius: 0 0 0 100%;
  background: rgb(0 193 207 / 0.08);
  content: "";
  pointer-events: none;
}

.cartao-modulo:hover {
  border-color: var(--cps-azul-destaque);
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}

.cartao-modulo--operacional {
  border-top-color: var(--cps-vermelho);
}

.cartao-modulo--operacional::after {
  background: rgb(178 0 0 / 0.07);
}

.cartao-modulo--sistema {
  border-top-color: var(--cps-violeta);
}

.cartao-modulo--sistema::after {
  background: rgb(138 41 230 / 0.07);
}

.cartao-modulo__cabecalho {
  position: relative;
  z-index: 1;
}

.cartao-modulo__cabecalho h2 {
  margin: 0;
  font-size: 1.18rem;
}

.cartao-modulo > p {
  margin: 0;
}

.cartao-modulo__destaque {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 34px;
}

.cartao-modulo__destaque strong {
  color: var(--cps-azul-escuro);
  font-size: 1.65rem;
  line-height: 1;
}

.cartao-modulo__destaque span {
  color: var(--cor-texto-secundario);
  font-size: 0.88rem;
}

.cartao-modulo__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}


/* Home — Mídias Sociais em faixa horizontal entre destaques e módulos. */
.faixa-midias-inicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 18px 22px;
  overflow: hidden;
  border-top: 4px solid var(--cps-azul-destaque);
  background:
    linear-gradient(110deg, rgb(0 193 207 / 0.07), transparent 55%),
    var(--cor-superficie);
}

.faixa-midias-inicio__texto {
  min-width: 0;
}

.faixa-midias-inicio__texto h2 {
  margin: 3px 0 5px;
  color: var(--cor-texto-forte);
  font-size: 1.18rem;
}

.faixa-midias-inicio__texto p {
  margin: 0;
  color: var(--cor-texto-secundario);
}

.faixa-midias-inicio__acoes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.faixa-midias-inicio__acoes .botao {
  justify-content: center;
  width: 100%;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .faixa-midias-inicio__acoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .faixa-midias-inicio__acoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .faixa-midias-inicio {
    padding: 16px;
  }

  .faixa-midias-inicio__acoes {
    grid-template-columns: minmax(0, 1fr);
  }

  .faixa-midias-inicio__acoes .botao {
    white-space: normal;
  }
}

/* Atendimento humano */

.pagina-atendimento {
  display: grid;
  gap: 18px;
}

.painel-cabecalho--atendimento {
  margin-bottom: 0;
  border-top: 4px solid var(--cps-vermelho);
}

.painel-cabecalho--atendimento .texto-secundario {
  max-width: 720px;
  margin: 6px 0 0;
}

.fila-atendimento {
  padding: 20px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-sm);
}

.fila-atendimento__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cps-cinza-hover);
}

.fila-atendimento__topo h2 {
  margin: 0;
  font-size: 1.15rem;
}

.fila-atendimento__topo p {
  margin: 4px 0 0;
}

.fila-atendimento__atualizacao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgb(160 195 64 / 0.6);
  border-radius: 999px;
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso-texto);
  font-size: 0.76rem;
  font-weight: 700;
}

.fila-atendimento__atualizacao::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor-sucesso);
  content: "";
}

.filtros-atendimento {
  margin-bottom: 16px;
}

.filtro-atendimento {
  min-height: 40px;
  padding: 7px 9px 7px 12px;
  box-shadow: none;
}

.filtro-atendimento strong {
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cps-cinza-hover);
  color: var(--cor-texto-forte);
  font-size: 0.78rem;
  text-align: center;
}

.filtro-atendimento--ativo strong {
  background: var(--cor-primaria);
  color: var(--cps-branco);
}

.atendimento-item {
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--cps-cinza-claro);
}

.atendimento-item--aguardando {
  border-left-color: var(--cps-crayola);
}

.atendimento-item--em_atendimento {
  border-left-color: var(--cps-azul-destaque);
}

.atendimento-item__numero {
  color: var(--cor-texto-forte);
  font-size: 1.05rem;
}

.atendimento-item__metadados {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 12px 0;
}

.atendimento-item__metadados > div {
  display: grid;
  gap: 1px;
}

.atendimento-item__metadados dt {
  color: var(--cor-texto-secundario);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.atendimento-item__metadados dd {
  margin: 0;
  color: var(--cor-texto-forte);
  font-size: 0.9rem;
  font-weight: 620;
}

.atendimento-item__indisponivel {
  display: inline-block;
  max-width: 180px;
  font-size: 0.82rem;
  text-align: right;
}

.estado-vazio--atendimento {
  padding: 34px 24px;
  border-color: var(--cps-azul-destaque);
  background: rgb(0 193 207 / 0.045);
}

.estado-vazio--atendimento p {
  max-width: 520px;
  margin: 8px auto 0;
  color: var(--cor-texto-secundario);
}

.pagina-atendimento--conversa .painel-grid-atendimento {
  gap: 20px;
}

.pagina-atendimento--conversa .conversa-painel {
  padding: 0;
  overflow: hidden;
}

.pagina-atendimento--conversa .conversa-painel__cabecalho {
  margin: 0;
  padding: 18px 20px;
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-superficie-suave);
}

.pagina-atendimento--conversa .conversa-painel__cabecalho h2 {
  margin: 0;
}

.pagina-atendimento--conversa .conversa-painel__cabecalho p {
  margin: 3px 0 0;
  font-size: 0.82rem;
}

.pagina-atendimento--conversa .conversa-mensagens {
  min-height: 320px;
  max-height: 66vh;
  padding: 20px;
  background:
    linear-gradient(rgb(248 248 248 / 0.92), rgb(248 248 248 / 0.92)),
    var(--cps-prata);
}

.pagina-atendimento--conversa .mensagem {
  width: fit-content;
  min-width: min(180px, 76%);
  padding: 12px 14px;
  border-color: var(--cor-borda);
  box-shadow: 0 1px 2px rgb(0 72 84 / 0.05);
}

.pagina-atendimento--conversa .mensagem--usuario {
  border-left: 3px solid var(--cps-cinza-texto);
  background: var(--cps-branco);
}

.pagina-atendimento--conversa .mensagem--bot {
  border-right: 3px solid var(--cps-azul-destaque);
  background: var(--cor-info-suave);
}

.pagina-atendimento--conversa .mensagem--atendente {
  border-right: 3px solid var(--cps-verde);
  background: var(--cor-sucesso-suave);
}

.pagina-atendimento--conversa .mensagem__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mensagem__status {
  color: var(--cor-texto-secundario);
  font-size: 0.72rem;
  font-weight: 600;
}

.atendimento-status-atual {
  margin: 9px 0 0;
}

.cartao-operacao {
  border-top: 3px solid var(--cps-azul);
}

.cartao-operacao h2 {
  margin: 0 0 8px;
}

.cartao-operacao p {
  margin-top: 0;
}

.cartao-operacao--gestao {
  border-top-color: var(--cps-vermelho);
}

.acoes-atendimento {
  position: sticky;
  top: 88px;
}

.acoes-atendimento form,
.acoes-operacionais form {
  margin: 0;
}

.acoes-atendimento .botao,
.acoes-operacionais .botao {
  width: 100%;
}

.acoes-operacionais {
  display: grid;
  gap: 9px;
}

.form-atendimento-finalizar {
  margin-top: 0;
}

.form-atendimento .texto-ajuda {
  margin-top: -3px;
}

/* Sistema e observabilidade */


.visao-rapida-operacional {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-suave);
}

.visao-rapida-operacional__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.visao-rapida-operacional__cabecalho h2 {
  margin: 0;
  color: var(--cor-texto-forte);
  font-size: 1.24rem;
}

.visao-rapida-operacional__cabecalho .texto-auxiliar {
  margin: 6px 0 0;
}

.status-visao {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--cor-info-suave);
  color: var(--cor-texto-forte);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.status-visao--ok {
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso-texto);
}

.status-visao--atencao {
  background: var(--cor-aviso-suave);
  color: var(--cor-aviso-texto);
}

.status-visao--critico {
  background: var(--cor-perigo-suave);
  color: var(--cps-vermelho-escuro);
}

.grade-visao-rapida {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.cartao-canal {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 126px;
  padding: 17px;
  border: 1px solid var(--cor-borda);
  border-top: 4px solid var(--cps-azul-destaque);
  border-radius: var(--raio-sm);
  background: var(--cps-prata);
}

.cartao-canal--whatsapp,
.cartao-canal--telegram {
  border-top-color: var(--cps-azul);
}

.cartao-canal--problemas {
  border-top-color: var(--cps-vermelho);
}

.cartao-canal--backup,
.cartao-canal--ia {
  border-top-color: var(--cps-azul-destaque);
}

.cartao-canal__rotulo,
.cartao-canal small {
  color: var(--cor-texto-secundario);
  font-size: 0.78rem;
}

.cartao-canal strong {
  color: var(--cor-texto-forte);
  font-size: 1.35rem;
  overflow-wrap: anywhere;
}

.cartao-canal--backup small {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cartao-canal--whatsapp-mensal {
  border-top-color: var(--cps-azul-destaque);
}

.cartao-canal--whatsapp-mensal meter {
  width: 100%;
  height: 10px;
  accent-color: var(--cps-azul);
}

.estado-operacional-ok {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 13px 14px;
  border-left: 4px solid var(--cps-azul-destaque);
  border-radius: var(--raio-sm);
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso-texto);
}

.historico-operacional__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.historico-operacional__grade article {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cps-prata);
}

.historico-operacional__grade span,
.historico-operacional__grade small {
  color: var(--cor-texto-secundario);
  font-size: 0.78rem;
}

.historico-operacional__grade strong {
  color: var(--cor-texto-forte);
  font-size: 1.2rem;
}

.detalhes-tecnicos {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  overflow: hidden;
}

.detalhes-tecnicos > summary {
  padding: 16px 20px;
  cursor: pointer;
  color: var(--cps-azul-escuro);
  font-weight: 800;
  list-style-position: inside;
}

.detalhes-tecnicos > summary:hover,
.detalhes-tecnicos > summary:focus-visible {
  background: var(--cor-info-suave);
}

.detalhes-tecnicos[open] > summary {
  border-bottom: 1px solid var(--cor-borda);
}

.detalhes-tecnicos__conteudo {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.detalhes-tecnicos__conteudo > .secao-sistema,
.detalhes-tecnicos__conteudo > .resumo-sistema {
  margin: 0;
}

.resumo-sistema--tecnico {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.pagina-sistema {
  display: grid;
  gap: 18px;
}

.painel-cabecalho--sistema {
  margin-bottom: 0;
  border-top: 4px solid var(--cps-violeta);
}

.acoes-cabecalho {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.pagina-sistema .resumo-sistema {
  gap: 16px;
}

.pagina-sistema .cartao-status {
  position: relative;
  min-height: 132px;
  padding: 18px;
  overflow: hidden;
}

.pagina-sistema .cartao-status::after {
  position: absolute;
  right: -20px;
  bottom: -28px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgb(0 193 207 / 0.07);
  content: "";
}

.pagina-sistema .cartao-status strong {
  position: relative;
  z-index: 1;
  color: var(--cor-texto-forte);
  font-size: 1.45rem;
  overflow-wrap: anywhere;
}

.pagina-sistema .cartao-status small {
  position: relative;
  z-index: 1;
  color: var(--cor-texto-secundario);
  overflow-wrap: anywhere;
}

.pagina-sistema .secao-sistema {
  margin-top: 0;
  padding: 22px;
}

.secao-sistema__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cps-cinza-hover);
}

.secao-sistema__cabecalho h2 {
  margin: 0;
  font-size: 1.18rem;
}

.contador-alertas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--cor-aviso-suave);
  color: var(--cor-aviso-texto);
  font-weight: 800;
}

.pagina-sistema .alerta-operacional {
  border-left-width: 4px;
}

.pagina-sistema .alerta-operacional--critico {
  border-left-color: var(--cps-coral);
}

.pagina-sistema .alerta-operacional--aviso {
  border-left-color: var(--cps-crayola);
}

.pagina-sistema .grade-metricas {
  margin-top: 0;
}

.pagina-sistema .metrica {
  min-height: 98px;
  padding: 16px;
  border-top: 3px solid var(--cps-azul-destaque);
}

.pagina-sistema .metrica strong {
  color: var(--cps-azul-escuro);
  overflow-wrap: anywhere;
}

.metrica--progresso meter {
  width: 100%;
  height: 10px;
  margin-top: 4px;
  accent-color: var(--cps-azul);
}

.nota-operacional {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-left: 3px solid var(--cps-azul-destaque);
  background: var(--cor-info-suave);
}

.status-componente {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 780;
}

.status-componente--ok {
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso-texto);
}

.status-componente--falha {
  background: var(--cor-perigo-suave);
  color: var(--cps-vermelho-escuro);
}

.status-componente--aviso,
.status-componente--pendente {
  background: var(--cor-aviso-suave);
  color: var(--cor-aviso-texto);
}

.status-componente--neutro {
  background: var(--cps-cinza-hover);
  color: var(--cor-texto);
}

.retencao-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.retencao-resumo > div {
  display: grid;
  gap: 2px;
  padding: 13px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cps-prata);
}

.retencao-resumo span,
.retencao-resumo small {
  color: var(--cor-texto-secundario);
  font-size: 0.78rem;
}

.retencao-resumo strong {
  color: var(--cor-texto-forte);
  font-size: 1.05rem;
}

.form-retencao {
  margin: 0;
}

.resultado-simulacao__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 18px;
}

.resultado-simulacao h3,
.resultado-simulacao__grade p {
  margin-top: 0;
}

.resultado-simulacao__grade p:last-child {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  .painel-cabecalho--inicio,
  .fila-atendimento__topo {
    align-items: stretch;
    flex-direction: column;
  }

  .perfil-resumo {
    width: 100%;
    min-width: 0;
  }

  .acoes-atendimento {
    position: static;
  }

  .pagina-sistema .acoes-cabecalho {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .cartao-modulo {
    min-height: 0;
    padding: 18px;
  }

  .fila-atendimento {
    padding: 16px;
  }

  .atendimento-item__metadados {
    display: grid;
    gap: 8px;
  }

  .atendimento-item__acoes,
  .atendimento-item__acoes .botao {
    width: 100%;
  }

  .atendimento-item__indisponivel {
    max-width: none;
    text-align: left;
  }

  .pagina-atendimento--conversa .conversa-painel__cabecalho,
  .pagina-atendimento--conversa .conversa-mensagens {
    padding: 16px;
  }

  .pagina-atendimento--conversa .mensagem {
    max-width: 94%;
  }

  .pagina-sistema .secao-sistema,
  .pagina-sistema .cartao-status {
    padding: 18px;
  }

  .tabela-responsiva--sistema {
    overflow: visible;
  }

  .tabela-responsiva--sistema .tabela-sistema,
  .tabela-responsiva--sistema .tabela-sistema tbody,
  .tabela-responsiva--sistema .tabela-sistema tr,
  .tabela-responsiva--sistema .tabela-sistema td {
    display: block;
    width: 100%;
  }

  .tabela-responsiva--sistema .tabela-sistema thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tabela-responsiva--sistema .tabela-sistema tbody {
    display: grid;
    gap: 10px;
  }

  .tabela-responsiva--sistema .tabela-sistema tr {
    padding: 13px 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cps-prata);
  }

  .tabela-responsiva--sistema .tabela-sistema td {
    display: grid;
    grid-template-columns: minmax(100px, 0.42fr) 1fr;
    gap: 12px;
    padding: 7px 0;
    border: 0;
  }

  .tabela-responsiva--sistema .tabela-sistema td::before {
    color: var(--cor-texto-secundario);
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 750;
  }
}

@media (max-width: 460px) {
  .cartao-modulo__acoes,
  .cartao-modulo__acoes .botao,
  .acoes-cabecalho,
  .acoes-cabecalho .botao {
    width: 100%;
  }

  .cartao-modulo__acoes,
  .acoes-cabecalho {
    flex-direction: column;
  }

  .fila-atendimento__atualizacao {
    align-self: flex-start;
  }

  .filtros-atendimento {
    display: grid;
    grid-template-columns: 1fr;
  }

  .filtro-atendimento {
    justify-content: space-between;
    width: 100%;
  }

  .pagina-atendimento--conversa .mensagem {
    width: auto;
    max-width: 100%;
  }

  .pagina-sistema .resumo-sistema,
  .pagina-sistema .grade-metricas {
    grid-template-columns: 1fr;
  }

  .secao-sistema__cabecalho {
    align-items: flex-start;
  }

  .tabela-responsiva--sistema .tabela-sistema td {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Go-Live K: atalhos permanentes, sem exigir múltiplos retornos no navegador. */
.navegacao-conhecimentos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 18px;
  margin-bottom: 20px;
}
.navegacao-conhecimentos .voltar-painel {
  margin: 0;
}

/* Go-Live K.1 — navegação visível e jornada editorial, sem JS ou dependência externa. */
.voltar-painel {
  min-height: 42px;
  padding: 9px 14px;
  gap: 7px;
  border: 1px solid #88abb2;
  border-radius: var(--raio-sm);
  background: #eaf5f7;
  color: var(--cps-azul-escuro);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: var(--sombra-sm);
  transition: background var(--transicao), border-color var(--transicao);
}
.voltar-painel:hover {
  background: #d6eef1;
  border-color: var(--cps-azul);
  color: var(--cps-azul-escuro);
  text-decoration: none;
}
.voltar-painel:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.navegacao-conteudo,
.navegacao-conhecimentos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
}
.pagina-listagem__cabecalho .voltar-painel { margin-bottom: 12px; }
.fluxo-editorial {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0 0 23px;
  list-style: none;
}
.fluxo-editorial li {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie-suave);
  color: var(--cor-texto-secundario);
  font-size: 13px;
  font-weight: 660;
}
.fluxo-editorial li[aria-current="step"] {
  background: #d6eef1;
  border-color: var(--cps-azul);
  color: var(--cps-azul-escuro);
  box-shadow: inset 0 0 0 1px var(--cps-azul);
}
.fluxo-editorial li.fluxo-editorial__concluido {
  border-color: #a0c340;
  color: var(--cor-sucesso-texto);
  background: var(--cor-sucesso-suave);
}
.proxima-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 15px;
  margin: 16px 0 22px;
  padding: 18px;
  border: 1px solid #88abb2;
  border-left: 5px solid var(--cps-azul);
  border-radius: var(--raio-sm);
  background: #f0f9fa;
}
.proxima-acao p { flex: 1 1 280px; margin: 0; color: var(--cor-texto-forte); }
.proxima-acao .botao { flex: 0 1 auto; }
.proxima-acao--sucesso {
  background: var(--cor-sucesso-suave);
  border-color: #a0c340;
  border-left-color: #6f8f24;
}
.proxima-acao--sucesso p { color: var(--cor-sucesso-texto); }
.acoes-revisao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--cor-borda);
}
.acoes-revisao form { margin: 0; }
.acoes-revisao .botao { min-height: 44px; }
.acao-tabela { display: inline-flex; white-space: nowrap; }
@media(max-width: 600px) {
 .fluxo-editorial {grid-template-columns: 1fr;}
 .navegacao-conteudo .voltar-painel, .navegacao-conhecimentos .voltar-painel {flex: 1 1 100%; justify-content: center;}
 .proxima-acao .botao, .acoes-revisao .botao, .acoes-revisao form {width:100%;}
}

/* Go-Live M.2 — prazo editorial acessível e consistente nos formulários. */
.pagina-formulario .formulario-painel .validade-editorial {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 18px 0;
  padding: 20px;
  border: 1px solid #8cbcc5;
  border-left: 5px solid var(--cps-azul);
  border-radius: var(--raio-sm);
  background: #f0f9fa;
}
.pagina-formulario .validade-editorial legend {
  padding: 0 7px;
  color: var(--cps-azul-escuro);
  font-weight: 750;
}
.pagina-formulario .validade-editorial label {
  color: var(--cor-texto-forte);
  font-weight: 650;
}
.pagina-formulario .validade-editorial input,
.pagina-formulario .validade-editorial select { max-width: 100%; }
.pagina-formulario .validade-editorial .ajuda { margin: 0 0 5px; }
@media (max-width: 600px) {
  .pagina-formulario .formulario-painel .validade-editorial { padding: 15px; }
}

/* GO-LIVE M.3 — revisão editorial no painel Sistema e Manutenção. */
.pagina-sistema .secao-sistema--validade .grade-metricas--validade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.secao-sistema--validade .metrica--vencidos {
  border-top-color: var(--cps-vermelho);
}

.secao-sistema--validade .metrica--proximos {
  border-top-color: var(--cps-azul-destaque);
}

.lista-validade-editorial {
  display: grid;
  gap: 10px;
}

.item-validade-editorial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--cps-cinza-hover);
  border-left: 4px solid var(--cps-azul-destaque);
  border-radius: 8px;
}

.item-validade-editorial--vencido {
  border-left-color: var(--cps-vermelho);
}

.item-validade-editorial > div {
  flex: 1 1 230px;
  min-width: 0;
}

.item-validade-editorial h3 {
  margin: 4px 0 6px;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.item-validade-editorial p {
  margin: 0;
}

.rotulo-validade-editorial {
  color: var(--cor-texto-secundario);
  font-size: .82rem;
  font-weight: 700;
}

/* Gestão Editorial E.3.1 — filtros de listagens responsivos */
.filtros-editoriais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .75rem 0 1.25rem;
}
.filtros-editoriais__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem .75rem;
  border: 1px solid #b6d9dd;
  border-radius: .65rem;
  background: #fff;
  color: #004854;
  font-weight: 600;
  text-decoration: none;
}
.filtros-editoriais__item:hover,
.filtros-editoriais__item:focus-visible {
  background: #d6eef1;
  color: #002f38;
}
.filtros-editoriais__item--atual {
  background: #005c6d;
  color: #fff;
  border-color: #005c6d;
}
.filtros-editoriais__item--atual:hover,
.filtros-editoriais__item--atual:focus-visible {
  background: #004854;
  color: #fff;
}
.filtros-editoriais__quantidade {
  font-size: .82em;
  border-radius: 1rem;
  padding: 0 .35rem;
  border: 1px solid currentColor;
}

/* A.1.2 — Aviso sem recarregar nem apagar rascunhos em edição. */
.aviso-sessao[hidden], .aviso-sessao [hidden] { display: none !important; }
.aviso-sessao {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 12px max(16px, calc((100% - 1160px) / 2));
  background: var(--cor-superficie, #fff);
  border-top: 3px solid var(--cps-vermelho, #b20000);
  box-shadow: 0 -5px 22px rgb(0 0 0 / 0.13);
}
.aviso-sessao__conteudo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aviso-sessao__conteudo h2 { font-size: 1rem; margin: 0; }
.aviso-sessao__conteudo p { flex: 1 1 240px; margin: 0; }
.aviso-sessao__conteudo button { min-height: 44px; }


/* UX — alternância de aparência em todas as páginas, inclusive login/2FA. */
.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 8px;
  text-decoration: none;
}
.botao-icone svg { width: 23px; height: 23px; display: block; }
.alternar-tema { margin-inline-start: auto; }
.tema-icone--sol { display: none !important; }
html[data-theme="escuro"] .tema-icone--lua { display: none !important; }
html[data-theme="escuro"] .tema-icone--sol { display: block !important; }

/* Identidade CPS preservada; superfícies e textos adaptados sem filtros/inversões. */
html[data-theme="escuro"] {
  color-scheme: dark;
  --cor-fundo: #101b22;
  --cor-superficie: #1b2c35;
  --cor-superficie-suave: #223842;
  --cor-texto: #e1ebed;
  --cor-texto-forte: #f0f8fa;
  --cor-texto-secundario: #b7cbd0;
  --cor-borda: #49616b;
  --cor-borda-forte: #8ba9b1;
  --cor-topo: #002f38;
  --cor-topo-suave: #004854;
  --cor-primaria: #b20000;
  --cor-primaria-hover: #9b0000;
  --cor-primaria-suave: rgb(255 119 119 / 0.15);
  --cor-destaque: #72e2ee;
  --cor-destaque-hover: #9af0f7;
  --cor-sucesso: #a0c340;
  --cor-sucesso-texto: #def49f;
  --cor-sucesso-suave: rgb(160 195 64 / 0.15);
  --cor-aviso: #ffc24c;
  --cor-aviso-texto: #ffe09e;
  --cor-aviso-suave: rgb(255 194 76 / 0.15);
  --cor-perigo: #ff7b83;
  --cor-perigo-hover: #ff989c;
  --cor-perigo-suave: rgb(255 101 111 / 0.15);
  --cor-info: #72e2ee;
  --cor-info-suave: rgb(114 226 238 / 0.13);
  --cor-link: #85e9f1;
  --cor-link-hover: #b2f5f9;
  --foco: #76e2eb;
  --foco-anel: rgb(114 226 238 / 0.35);
  --sombra-sm: 0 1px 3px rgb(0 0 0 / 0.25);
  --sombra-md: 0 8px 24px rgb(0 0 0 / 0.3);
  /* Superfícies históricas que ainda consomem tokens CPS. */
  --cps-cinza-texto: #b7cbd0;
  --cps-cinza-claro: #49616b;
  --cps-cinza-hover: #2a424e;
  --cps-prata: #101b22;
  --cps-azul-claro: #284b55;
}

html[data-theme="escuro"] .detalhes-tecnicos > summary {
  color: var(--cor-link);
}

html[data-theme="escuro"] .detalhes-tecnicos > summary:hover,
html[data-theme="escuro"] .detalhes-tecnicos > summary:focus-visible {
  color: var(--cor-link-hover);
}

html[data-theme="escuro"] input,
html[data-theme="escuro"] textarea,
html[data-theme="escuro"] select {
  background-color: var(--cor-superficie);
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
}
html[data-theme="escuro"] input::placeholder,
html[data-theme="escuro"] textarea::placeholder { color: var(--cor-texto-secundario); opacity: 1; }
html[data-theme="escuro"] option { background: var(--cor-superficie); color: var(--cor-texto); }
html[data-theme="escuro"] .etiqueta--em_atendimento,
html[data-theme="escuro"] .janela--fechada,
html[data-theme="escuro"] .filtro-atendimento--ativo,
html[data-theme="escuro"] .pagina-formulario .informacao,
html[data-theme="escuro"] .login-recuperar,
html[data-theme="escuro"] .campo-senha .campo-senha__botao {
  color: var(--cor-link);
}
html[data-theme="escuro"] .erro,
html[data-theme="escuro"] .login-identidade__rotulo { color: #ff9fa5; }
html[data-theme="escuro"] .pagina-formulario .formulario-painel input::placeholder,
html[data-theme="escuro"] .pagina-formulario .formulario-painel textarea::placeholder {
  color: var(--cor-texto-secundario);
}
html[data-theme="escuro"] .pagina-formulario .formulario-painel input[type="file"]::file-selector-button { color: var(--cor-texto-forte); }
html[data-theme="escuro"] .filtros-editoriais__item {
  background: var(--cor-superficie);
  border-color: var(--cor-borda);
  color: var(--cor-texto);
}
html[data-theme="escuro"] .filtros-editoriais__item:hover,
html[data-theme="escuro"] .filtros-editoriais__item:focus-visible { background: var(--cor-superficie-suave); color: var(--cor-texto-forte); }
html[data-theme="escuro"] .filtros-editoriais__item--atual,
html[data-theme="escuro"] .filtros-editoriais__item--atual:hover,
html[data-theme="escuro"] .filtros-editoriais__item--atual:focus-visible { background: var(--cps-azul); color: #fff; }
html[data-theme="escuro"] .item-validade-editorial { border-color: var(--cor-borda); border-left-color: var(--cor-destaque); }
html[data-theme="escuro"] .item-validade-editorial--vencido { border-left-color: var(--cor-perigo); }
html[data-theme="escuro"] .resultado-simulacao { border-color: var(--cor-destaque); }

@media (max-width: 800px) {
  .topo-painel__conteudo { flex-wrap: wrap; }
  .sessao-painel { flex-wrap: wrap; }
  .sessao-painel__nome { max-width: min(50vw, 220px); }
}
@media (prefers-reduced-motion: reduce) {
  .botao-icone { transition: none; }
}


/* Componentes legados com cores literais: estados escuros específicos. */
html[data-theme="escuro"] .tabela-dados th {
  background: #243e48;
  color: var(--cor-texto-forte);
}
html[data-theme="escuro"] .tabela-dados tbody tr:hover { background: var(--cor-superficie-suave); }
html[data-theme="escuro"] .voltar-painel,
html[data-theme="escuro"] .fluxo-editorial li[aria-current="step"],
html[data-theme="escuro"] .proxima-acao,
html[data-theme="escuro"] .pagina-formulario .formulario-painel .validade-editorial {
  background: var(--cor-superficie-suave);
  border-color: var(--cor-borda);
  color: var(--cor-texto-forte);
}
html[data-theme="escuro"] .voltar-painel:hover { background: #2a4d59; }
html[data-theme="escuro"] .proxima-acao { border-left-color: var(--cor-destaque); }
html[data-theme="escuro"] .proxima-acao--sucesso { background: var(--cor-sucesso-suave); }
html[data-theme="escuro"] .pagina-formulario .validade-editorial legend { color: var(--cor-texto-forte); }
html[data-theme="escuro"] .pagina-formulario .erro { color: var(--cor-perigo); }
html[data-theme="escuro"] .pagina-formulario .formulario-painel input[type="file"]::file-selector-button {
  background: var(--cor-superficie-suave);
  border-color: var(--cor-borda);
  color: var(--cor-texto);
}
html[data-theme="escuro"] .login-confirmacao { border-color: var(--cor-info); }
html[data-theme="escuro"] .conta-cartao { box-shadow: var(--sombra-sm); }
html[data-theme="escuro"] .conta-etiqueta { color: #d6eef1; }
html[data-theme="escuro"] .botao--secundario:hover,
html[data-theme="escuro"] .botao-secundario:hover { color: var(--cor-texto-forte); }

/* Botões destrutivos mantêm letras claras legíveis nas duas aparências. */
html[data-theme="escuro"] .botao--perigo { background: #b20000; color: #fff; }
html[data-theme="escuro"] .botao--perigo:hover { background: #7e0000; color: #fff; }


/* UX: contraste pontual nas métricas e etiquetas do painel em modo escuro.
   A aparência clara não é alterada; proteção CSRF e rotas permanecem intactas. */
html[data-theme="escuro"] .cartao-modulo__destaque strong,
html[data-theme="escuro"] .perfil-resumo strong {
  color: var(--cor-texto-forte);
}
html[data-theme="escuro"] .status-pilula--info {
  background: #244551;
  border-color: #4eafbc;
  color: #f0f8fa;
}
html[data-theme="escuro"] .status-pilula--neutro {
  background: var(--cor-superficie-suave);
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto-forte);
}


/* UX — métricas do Sistema: leitura acessível e colunas que se adaptam à largura.
   Escopo restrito à interface; valores operacionais e tema claro preservados. */
.pagina-sistema .grade-metricas--telemetria {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.pagina-sistema .grade-metricas--telemetria .metrica {
  min-width: 0;
}
html[data-theme="escuro"] .pagina-sistema .metrica strong {
  color: var(--cor-texto-forte);
}

/* Home B4: dois destaques irmãos, separados da grade dos módulos. */
.grade-destaques-inicio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.grade-destaques-inicio > :only-child { grid-column: 1 / -1; }
.grade-destaques-inicio > .chamada-revisao {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 15px;
}
.grade-destaques-inicio > .chamada-revisao > div {
  min-width: 0;
  flex: 0 1 auto;
}
.grade-destaques-inicio > .chamada-revisao > .botao {
  align-self: flex-start;
  margin-top: auto;
}
.grade-destaques-inicio > .chamada-administracao {
  border-left-color: var(--cps-vermelho);
}
.grade-destaques-inicio .chamada-administracao__contagem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  margin: 10px 0 0;
}
.grade-destaques-inicio .chamada-administracao__contagem strong {
  color: var(--cor-texto-forte);
  font-size: 1.55rem;
  line-height: 1.25;
}
.grade-destaques-inicio .chamada-administracao .aviso-painel,
.grade-destaques-inicio .chamada-administracao .texto-secundario {
  margin-top: 10px;
}
@media (max-width: 860px) {
  .grade-destaques-inicio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .grade-destaques-inicio > .chamada-revisao > .botao {
    align-self: stretch;
  }
}

/* Central de revisão: apenas leitura, com cores semânticas dos dois temas. */
.chamada-revisao {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  border-left: 5px solid var(--cor-destaque);
}
.chamada-revisao--pendente { border-left-color: var(--cor-aviso); }
.chamada-revisao > div { min-width: 0; flex: 1 1 320px; }
.chamada-revisao h2 { margin: 4px 0 7px; color: var(--cor-texto-forte); }
.chamada-revisao p { margin: 0; color: var(--cor-texto-secundario); }
.chamada-revisao__rotulo,
.revisao-resumo__rotulo {
  display: block;
  color: var(--cor-texto-secundario);
  font-size: .8rem;
  font-weight: 750;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.pagina-revisao-editorial { display: grid; gap: 18px; }
.revisao-resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  border-left: 5px solid var(--cor-aviso);
}
.revisao-resumo strong {
  display: block;
  color: var(--cor-texto-forte);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
}
.revisao-resumo p { margin: 2px 0 0; color: var(--cor-texto-secundario); }
.revisao-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.revisao-filtro {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 9px 13px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--cor-texto-forte);
  text-decoration: none;
  font-weight: 650;
}
.revisao-filtro span {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--cor-superficie-suave);
  color: var(--cor-texto-forte);
  text-align: center;
}
.revisao-filtro:hover { background: var(--cor-superficie-suave); }
.revisao-filtro--ativo,
.revisao-filtro--ativo:hover { background: var(--cps-azul); color: #fff; }
.revisao-filtro--ativo span { background: rgb(255 255 255 / .17); color: #fff; }
.revisao-titulo { color: var(--cor-texto-forte); overflow-wrap: anywhere; }
.revisao-vazio h2 { margin-top: 0; color: var(--cor-texto-forte); }
.revisao-vazio p { margin-bottom: 0; }
@media (max-width: 620px) {
  .chamada-revisao > .botao,
  .revisao-resumo > .botao { width: 100%; text-align: center; }
  .revisao-filtro { flex: 1 1 auto; justify-content: space-between; }
}


@media (max-width: 700px) {
  .visao-rapida-operacional {
    padding: 18px;
  }

  .visao-rapida-operacional__cabecalho {
    align-items: stretch;
    flex-direction: column;
  }

  .status-visao {
    align-self: flex-start;
  }

  .detalhes-tecnicos__conteudo {
    padding: 14px;
  }
}

@media (max-width: 460px) {
  .grade-visao-rapida,
  .historico-operacional__grade {
    grid-template-columns: 1fr;
  }
}

/* IO10X-J hotfix: atalho enxuto, consistente com o cabeçalho. */
.atalho-painel-principal{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;min-height:38px;padding:7px 12px;border:1px solid rgb(255 255 255 / .22);border-radius:999px;background:rgb(255 255 255 / .07);color:#fff;font-size:.875rem;font-weight:650;text-decoration:none;margin-inline-start:auto}
.atalho-painel-principal:hover{background:rgb(255 255 255 / .17);color:#fff}
.atalho-painel-principal:focus-visible{outline:3px solid var(--cps-azul-destaque);outline-offset:2px}
.atalho-painel-principal svg{flex:none}
@media (max-width:460px){.atalho-painel-principal{margin-inline-start:0}}
/* Acesso em destaque à agenda, junto da Central de Mídias. */
.faixa-agenda-inicio{display:grid;gap:14px;padding:18px 22px;border-top:4px solid var(--cps-azul);background:var(--cor-superficie)}
.faixa-agenda-inicio__cabecalho{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.faixa-agenda-inicio__cabecalho h2{font-size:1.18rem;margin:3px 0 5px}
.faixa-agenda-inicio__cabecalho p{margin:0;color:var(--cor-texto-secundario)}
.faixa-agenda-inicio__cabecalho .botao{white-space:nowrap}
.faixa-agenda-inicio__eventos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0}
.faixa-agenda-inicio__eventos li{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:5px 8px;padding:12px;border:1px solid var(--cor-borda);border-radius:var(--raio-sm);background:var(--cor-superficie-suave)}
.faixa-agenda-inicio__data{font-weight:800;color:var(--cor-link)}
.faixa-agenda-inicio__titulo{font-weight:650;overflow-wrap:anywhere}
.faixa-agenda-inicio__status{grid-column:1/-1;color:var(--cor-texto-secundario);font-size:.84rem}
.faixa-agenda-inicio__vazia{margin:0;color:var(--cor-texto-secundario)}
.faixa-midias-inicio__acoes{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media(max-width:760px){.faixa-agenda-inicio__eventos{grid-template-columns:1fr}.faixa-agenda-inicio{padding:16px}}


/* IO10X-K — homepage compacta, agenda prioritária e atalhos sem colisões. */
.pagina-inicial>.painel-cabecalho--inicio{padding:12px 20px;gap:12px;min-height:0}
.pagina-inicial>.painel-cabecalho--inicio h1{font-size:clamp(1.24rem,2vw,1.65rem);margin:2px 0}
.pagina-inicial>.painel-cabecalho--inicio p{margin:3px 0 0;font-size:.9rem}
.pagina-inicial .perfil-resumo{padding:8px 11px;min-width:0}
.faixa-midias-inicio__acoes{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.faixa-midias-inicio__acoes .botao{width:auto;min-width:135px;max-width:100%;flex:1 1 155px;white-space:normal;padding:.7rem .85rem;min-height:44px;line-height:1.25}
@media(max-width:640px){.pagina-inicial>.painel-cabecalho--inicio{flex-wrap:wrap;padding:12px}.faixa-midias-inicio__acoes .botao{flex:1 1 100%}}

/* Item 10: links legais públicos no painel e login. */
.rodape-legal-painel{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.65rem 1.2rem;padding:1.2rem 1rem;border-top:1px solid var(--cor-borda,#ccc);font-size:.9rem}
.rodape-legal-painel a{color:var(--cor-link,#005c6d);text-decoration:underline;text-underline-offset:3px}
.rodape-legal-painel a:focus-visible{outline:3px solid #b20000;outline-offset:3px}