/* ============================================================
   Camada visual — carregada depois de estilo.css, sobrepõe o que precisa.

   Três decisões guiam este arquivo:

   1. TIPOGRAFIA. O sistema passa a usar Outfit, a mesma família da interface
      do Sienge. A serifada continua viva só na marca (topo e login): é o que
      identifica o Grupo Hoffmann e não tem equivalente no Sienge.

   2. CABEÇALHO DE TELA. A trilha ("Início › Página inicial") e o título em
      caixa alta saíram. No lugar, o nome da tela aparece discreto na barra
      superior, ao lado da marca — o conteúdo começa direto no primeiro cartão.

   3. ACABAMENTO. Elevação em três níveis, transições curtas em tudo que
      responde ao mouse e entrada suave a cada troca de tela. Nada de
      animação longa: o sistema é ferramenta de trabalho, não vitrine.
   ============================================================ */

:root {
  --sans: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --serif: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* elevação */
  --e1: 0 1px 2px rgba(13, 27, 53, .06), 0 1px 3px rgba(13, 27, 53, .04);
  --e2: 0 2px 6px rgba(13, 27, 53, .08), 0 4px 12px rgba(13, 27, 53, .05);
  --e3: 0 8px 24px rgba(13, 27, 53, .12), 0 2px 6px rgba(13, 27, 53, .06);
  --curva: cubic-bezier(.2, .7, .3, 1);
}

body {
  font-family: var(--sans);
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* a serifada fica só na marca */
h1, h2, h3 { font-family: var(--sans); letter-spacing: -.1px; }
h1 { font-size: 22px; font-weight: 500; }
h2 { font-size: 18px; font-weight: 500; }
h3 { font-size: 15px; font-weight: 500; }
.barra-marca, .cartao-login h1, .wa-vazio-marca { font-family: var(--serif); }
.kpi b, .barras .val, .linha-din .calc, .divisor-faixa,
.ind-quem b, .ind-numeros b { font-family: var(--sans) !important; font-style: normal !important; }
.kpi b { font-weight: 500; letter-spacing: -.5px; }

/* ---------------- cabeçalho de tela ---------------- */
.trilha, .titulo-tela { display: none !important; }

.barra-contexto {
  display: flex; flex-direction: column; justify-content: center;
  margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--linha);
  min-width: 0; max-width: 340px;
}
.barra-contexto .caminho {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--suave); line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.barra-contexto .atual {
  font-size: 14px; color: var(--navy); font-weight: 500; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 900px) { .barra-contexto { display: none; } }

/* ---------------- estrutura ---------------- */
.barra { box-shadow: var(--e1); }
.area { padding-top: 20px; animation: sobe .28s var(--curva) both; }
.area.trocando { animation: none; }

@keyframes sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------- menu lateral ---------------- */
.lateral { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04); }
.mod-cabeca { transition: background .16s var(--curva), color .16s var(--curva); }
.mod-corpo { animation: fade .2s var(--curva) both; }
.item {
  position: relative; transition: background .14s var(--curva),
    color .14s var(--curva), padding-left .16s var(--curva);
}
.item::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--gold); transform: scaleY(0); transform-origin: center;
  transition: transform .18s var(--curva);
}
.item:hover { padding-left: 30px; }
.item.ativo::before, .item:hover::before { transform: scaleY(1); }

/* ---------------- blocos e cartões ---------------- */
.bloco, .cartao, .kpi {
  border-radius: 6px;
  box-shadow: var(--e1);
  transition: box-shadow .2s var(--curva), transform .2s var(--curva),
    border-color .2s var(--curva);
}
.bloco:hover { box-shadow: var(--e2); }
.cartao:hover, .kpi:hover {
  box-shadow: var(--e2); transform: translateY(-2px); border-color: #cfd6df;
}
.cartao-clinica { cursor: pointer; }

.bloco-titulo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 500; letter-spacing: .2px;
}
.bloco-titulo::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px; margin-right: 9px;
  background: var(--gold); flex: 0 0 3px;
}

/* entrada escalonada dos cartões da grade */
.grade > * { animation: sobe .3s var(--curva) both; }
.grade > *:nth-child(2) { animation-delay: .04s; }
.grade > *:nth-child(3) { animation-delay: .08s; }
.grade > *:nth-child(4) { animation-delay: .12s; }
.grade > *:nth-child(5) { animation-delay: .16s; }
.grade > *:nth-child(n+6) { animation-delay: .2s; }

/* ---------------- tabelas ---------------- */
/* Nada de cabeçalho fixo aqui.
   A primeira versão usava position:sticky no <th>. Em tabelas dentro de
   blocos que rolam junto com a página, o cabeçalho descolava e passava por
   cima da primeira linha — foi o que apareceu na tela de indicadores. O
   cabeçalho rola com a tabela, como no Sienge. */
table { border-radius: 5px; }
thead th {
  background: #eef1f5; color: var(--navy); font-weight: 500;
  letter-spacing: .2px; text-transform: none;
}
tbody tr { transition: background .12s var(--curva); }
tbody tr:hover { background: #f6f8fb; }

/* ---------------- botões ---------------- */
.acao, .leve, .barra-sair {
  border-radius: 4px;
  transition: transform .12s var(--curva), box-shadow .16s var(--curva),
    background .16s var(--curva), border-color .16s var(--curva), color .16s var(--curva);
}
.acao { box-shadow: var(--e1); }
.acao:hover { transform: translateY(-1px); box-shadow: var(--e2); }
.acao:active, .leve:active { transform: translateY(0); box-shadow: none; }
.leve:hover { border-color: var(--gold); color: var(--navy); box-shadow: var(--e1); }

/* foco visível: acessibilidade sem poluir o desenho */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(201, 160, 80, .55); outline-offset: 1px;
}
input, select, textarea { transition: border-color .16s var(--curva), box-shadow .16s var(--curva); }
input:focus, select:focus, textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 160, 80, .14); outline: none;
}

/* ---------------- pílulas e selos ---------------- */
.pilula {
  border-radius: 20px; font-weight: 500; letter-spacing: .2px;
  transition: box-shadow .16s var(--curva);
}

/* ---------------- modal ---------------- */
.fundo { animation: fade .16s var(--curva) both; backdrop-filter: blur(2px); }
.modal { animation: sobeModal .24s var(--curva) both; box-shadow: var(--e3); border-radius: 8px; }
@keyframes sobeModal {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ---------------- carregando ---------------- */
.vazio { color: var(--suave); }
.esqueleto {
  background: linear-gradient(90deg, #eef1f5 25%, #f7f9fb 37%, #eef1f5 63%);
  background-size: 400% 100%; animation: brilho 1.2s ease-in-out infinite;
  border-radius: 4px; height: 13px; margin: 8px 0;
}
@keyframes brilho { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ---------------- quem prefere menos movimento ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   Gestão Comercial
   ============================================================ */

/* faixa de identificação do contrato, no topo da ficha */
.ct-capa {
  position: relative; overflow: hidden; border-radius: 8px; color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 62%, #1d3260 100%);
  padding: 20px 24px; box-shadow: var(--e2); margin-bottom: 18px;
  animation: sobe .3s var(--curva) both;
}
.ct-capa::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(201, 160, 80, .12);
}
.ct-capa .eyebrow { color: rgba(255, 255, 255, .62); }
.ct-capa h2 { color: #fff; margin: 4px 0 2px; font-size: 21px; }
.ct-capa .sub { color: rgba(255, 255, 255, .78); font-size: 12.5px; }
.ct-capa .topo { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.ct-capa .numeros { margin-left: auto; display: flex; gap: 26px; flex-wrap: wrap; }
.ct-capa .numeros div + div { margin-left: 26px; }   /* apoio para quem não faz gap */
.ct-capa .numeros div { text-align: right; }
.ct-capa .numeros b { display: block; font-size: 19px; font-weight: 500; color: #fff; }
.ct-capa .numeros span { font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); }

/* semáforo de vigência */
.selo-vig {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 20px;
  padding: 3px 11px; font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.selo-vig::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo-vig.verde { background: rgba(95, 145, 96, .14); color: #3f7541; }
.selo-vig.amarelo { background: rgba(201, 160, 80, .18); color: #8d6d24; }
.selo-vig.vermelho { background: rgba(185, 87, 63, .14); color: #a4442c; }
.selo-vig.cinza { background: rgba(90, 107, 134, .12); color: #5a6b86; }
.ct-capa .selo-vig.verde { background: rgba(255, 255, 255, .16); color: #cfe6cf; }
.ct-capa .selo-vig.amarelo { background: rgba(255, 255, 255, .16); color: #f0d59a; }
.ct-capa .selo-vig.vermelho { background: rgba(255, 255, 255, .16); color: #f3b3a2; }
.ct-capa .selo-vig.cinza { background: rgba(255, 255, 255, .14); color: #d6dce8; }

/* pulso discreto no que está vencido — chama atenção sem piscar */
.selo-vig.vermelho.pulsa { animation: pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 87, 63, .32); }
  50% { box-shadow: 0 0 0 5px rgba(185, 87, 63, 0); }
}

/* linha da tabela conforme a situação */
tr.risco-vermelho td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }
tr.risco-amarelo td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
tr.risco-verde td:first-child { box-shadow: inset 3px 0 0 var(--verde); }

/* abas internas do contrato */
.ct-abas button + button { margin-left: 4px; }
.ct-abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--linha);
  margin-bottom: 16px; }
.ct-abas button {
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 9px 14px; color: var(--rotulo); font-weight: 500; font-size: 13px;
  transition: color .16s var(--curva), border-color .16s var(--curva), background .16s var(--curva);
  border-radius: 4px 4px 0 0;
}
.ct-abas button:hover { color: var(--navy); background: #f2f5f9; }
.ct-abas button.ativa { color: var(--navy); border-bottom-color: var(--gold); }

/* cartões de alerta do painel comercial */
.ct-alerta {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 6px; margin-bottom: 8px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--linha); background: var(--superficie); box-shadow: var(--e1);
  transition: transform .16s var(--curva), box-shadow .16s var(--curva);
}
.ct-alerta:hover { transform: translateX(3px); box-shadow: var(--e2); }
.ct-alerta.vermelho { border-left: 3px solid var(--vermelho); }
.ct-alerta.amarelo { border-left: 3px solid var(--gold); }
.ct-alerta .quando { margin-left: auto; color: var(--suave); font-size: 11.5px; white-space: nowrap; }

/* barra de progresso do recebimento */
.ct-barra { height: 6px; border-radius: 4px; background: #e7ebf1; overflow: hidden; margin-top: 8px; }
.ct-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #e0bd76);
  border-radius: 4px; transition: width .5s var(--curva); }

/* cartões de relatório impresso */
.rel-cartao {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  border: 1px solid var(--linha); border-radius: 6px; background: var(--superficie);
  box-shadow: var(--e1); transition: transform .18s var(--curva), box-shadow .18s var(--curva);
}
.rel-cartao:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.rel-cartao b { color: var(--navy); font-weight: 500; font-size: 14px; }
.rel-cartao p { margin: 0; font-size: 12.5px; color: var(--texto); line-height: 1.5; }
.rel-cartao .pe { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; }