:root {
  --azul: #1f3864;
  --azul-claro: #d9e2f3;
  --azul-hover: #2c4d8a;
  --texto: #1a1f2b;
  --texto-fraco: #6b7280;
  --borda: #d7dce5;
  --fundo: #f4f6fa;
  --branco: #ffffff;
  --verde: #16794a;
  --verde-fundo: #e6f4ec;
  --vermelho: #b42318;
  --vermelho-fundo: #fdeceb;
  --ambar: #92620a;
  --ambar-fundo: #fdf4e3;
  --raio: 8px;
  --sombra: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
}

* { box-sizing: border-box; }

/* Regras de display abaixo (button, .botao) sobrescreveriam o display:none
   padrao do navegador para [hidden]; esta linha garante a precedencia. */
[hidden] { display: none !important; }

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

/* ---------- Cabecalho ---------- */
header.topo {
  background: var(--azul);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

header.topo h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

header.topo .subtitulo {
  font-size: 12px;
  opacity: 0.75;
  font-weight: 400;
}

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

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}

/* ---------- Botoes ---------- */
button, .botao {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--raio);
  border: 1px solid transparent;
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.botao-primario { background: var(--azul); color: #fff; }
.botao-primario:hover { background: var(--azul-hover); }

.botao-claro { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.botao-claro:hover { background: rgba(255, 255, 255, 0.24); }

.botao-neutro { background: var(--branco); color: var(--texto); border-color: var(--borda); }
.botao-neutro:hover { background: #eef1f7; }

.botao-perigo { background: var(--branco); color: var(--vermelho); border-color: #f0c2be; }
.botao-perigo:hover { background: var(--vermelho-fundo); }

.botao-mini { padding: 4px 9px; font-size: 12px; }

button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Cards de resumo ---------- */
.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
}

.card .rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-fraco);
  font-weight: 600;
}

.card .numero { font-size: 24px; font-weight: 700; color: var(--azul); margin-top: 2px; }

/* ---------- Painel / secoes ---------- */
.painel {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: 18px;
  overflow: hidden;
}

.painel > h2 {
  margin: 0;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: var(--azul);
  color: #fff;
}

.painel-corpo { padding: 16px; }

/* ---------- Formulario ---------- */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo.largo { grid-column: 1 / -1; }

.campo label {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.campo label .obrigatorio { color: var(--vermelho); }

input, select, textarea {
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--branco);
  color: var(--texto);
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azul-claro);
  outline-offset: -1px;
  border-color: var(--azul);
}

input.invalido, select.invalido { border-color: var(--vermelho); background: var(--vermelho-fundo); }

textarea { resize: vertical; min-height: 84px; }

.dica { font-size: 11px; color: var(--texto-fraco); }

/* ---------- Tabelas ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
  background: var(--azul-claro);
  color: var(--azul);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

tbody td { padding: 7px 10px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
tbody tr:hover { background: #f8fafd; }
.tabela-rolagem { overflow-x: auto; }

td.numerico, th.numerico { text-align: right; font-variant-numeric: tabular-nums; }
td.centro, th.centro { text-align: center; }

/* Tabela de beneficiarios: inputs embutidos */
table.beneficiarios input,
table.beneficiarios select { padding: 5px 7px; font-size: 13px; }
table.beneficiarios td { padding: 4px 5px; }
table.beneficiarios { min-width: 1020px; }

/* ---------- Faixas etarias ---------- */
.faixas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.faixa {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafd;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 6px 10px;
}

.faixa span { font-size: 12px; font-weight: 600; color: var(--azul); min-width: 52px; }
.faixa input { width: 56px; padding: 4px 6px; text-align: center; }

.totalizador {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}

.totalizador .bloco { display: flex; flex-direction: column; }
.totalizador .rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-fraco);
  font-weight: 600;
}
.totalizador .valor { font-size: 22px; font-weight: 700; color: var(--azul); }

/* ---------- Documentos ---------- */
.documentos { display: flex; flex-direction: column; gap: 7px; }
.documento { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; }
.documento input { width: auto; margin-top: 2px; flex-shrink: 0; }

/* ---------- Anexos ---------- */
.anexos-item { display: flex; flex-direction: column; gap: 5px; margin: 0 0 8px 24px; }
#anexosOutros .anexos-item { margin-left: 0; }
.anexos-barra { display: flex; align-items: center; gap: 8px; }
.anexo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.anexo-nome { font-weight: 600; word-break: break-all; }
.anexo-meta { color: var(--texto-fraco); }
.anexo-vazio { font-size: 12px; color: var(--texto-fraco); }
.anexo-falha { font-size: 12px; color: var(--vermelho); }
.aviso-anexos { margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--ambar); }
.dica-anexos { display: block; margin: 0 0 10px; }

/* ---------- Etiquetas de status ---------- */
.etiqueta {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.etiqueta[data-status="RASCUNHO"] { background: #eceff4; color: #4b5563; }
.etiqueta[data-status="ENVIADA"] { background: var(--azul-claro); color: var(--azul); }
.etiqueta[data-status="EM ANÁLISE"] { background: #e4e9fb; color: #35408a; }
.etiqueta[data-status="PENDÊNCIA"] { background: var(--ambar-fundo); color: var(--ambar); }
.etiqueta[data-status="IMPLANTADA"] { background: var(--verde-fundo); color: var(--verde); }
.etiqueta[data-status="RECUSADA"],
.etiqueta[data-status="CANCELADA"] { background: var(--vermelho-fundo); color: var(--vermelho); }

/* ---------- Mensagens ---------- */
.mensagens { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.aviso {
  border-radius: var(--raio);
  padding: 11px 14px;
  font-size: 13px;
  border: 1px solid;
}
.aviso h3 { margin: 0 0 5px; font-size: 13px; }
.aviso ul { margin: 0; padding-left: 18px; }
.aviso.erro { background: var(--vermelho-fundo); border-color: #f0c2be; color: var(--vermelho); }
.aviso.atencao { background: var(--ambar-fundo); border-color: #f0dcae; color: var(--ambar); }
.aviso.sucesso { background: var(--verde-fundo); border-color: #b8e0c9; color: var(--verde); }

.vazio { text-align: center; padding: 40px 20px; color: var(--texto-fraco); }

/* ---------- Barra de filtros / acoes ---------- */
.barra {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
}
.barra .campo { min-width: 160px; flex: 0 1 auto; }
.barra .campo.busca { flex: 1 1 260px; }

.acoes-rodape {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  bottom: 0;
  background: var(--fundo);
  padding: 14px 0;
  border-top: 1px solid var(--borda);
}

.acoes-linha { display: flex; gap: 5px; }

@media (max-width: 640px) {
  main { padding: 16px 12px 40px; }
  header.topo { padding: 12px 14px; }
}

/* ---------- Tela de acesso (login / primeiro acesso) ---------- */
body.tela-acesso { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.acesso { width: 100%; max-width: 420px; padding: 24px; }

.acesso-marca { text-align: center; margin-bottom: 22px; }
.acesso-marca h1 { margin: 0; font-size: 22px; color: var(--azul); letter-spacing: 0.2px; }
.acesso-marca p { margin: 4px 0 0; font-size: 13px; color: var(--texto-fraco); }

.acesso .painel { margin-bottom: 0; }

/* ---------- Menu do usuario no canto superior direito ---------- */
.menu-usuario { position: relative; }

.menu-gatilho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--raio);
  color: #fff;
}
.menu-gatilho:hover,
.menu-gatilho[aria-expanded="true"] { background: rgba(255, 255, 255, 0.26); }
.menu-gatilho:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.menu-identidade { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.usuario-nome { font-size: 13px; font-weight: 600; color: #fff; }
.usuario-perfil { font-size: 11px; color: rgba(255, 255, 255, 0.72); }

/* Seta desenhada em CSS: sem imagem externa e sem inline style (bloqueado pela CSP). */
.menu-seta {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255, 255, 255, 0.85);
  transition: transform 0.12s ease;
}
.menu-gatilho[aria-expanded="true"] .menu-seta { transform: rotate(180deg); }

.menu-lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 5px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.18);
}

.menu-lista.alinhado-esquerda { right: auto; left: 0; }

.menu-lista .menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.menu-lista .menu-item:hover,
.menu-lista .menu-item:focus-visible { background: #eef1f7; outline: none; }

.menu-lista .item-sair { color: var(--vermelho); }
.menu-lista .item-sair:hover,
.menu-lista .item-sair:focus-visible { background: var(--vermelho-fundo); }

.menu-divisor { border: none; border-top: 1px solid var(--borda); margin: 4px 2px; }

.marca-voce {
  display: inline-block;
  margin-left: 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-fraco);
  background: #eceff4;
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: middle;
}

/* ---------- Etiquetas de perfil e situacao ---------- */
.etiqueta[data-perfil="ADM"] { background: var(--azul-claro); color: var(--azul); }
.etiqueta[data-perfil="USUARIO"] { background: #eceff4; color: #4b5563; }
.etiqueta[data-perfil="BACKOFFICE"] { background: var(--ambar-fundo); color: var(--ambar); }

.seletor-mini { width: auto; padding: 3px 6px; font-size: 12px; }
.etiqueta[data-situacao="ATIVO"] { background: var(--verde-fundo); color: var(--verde); }
.etiqueta[data-situacao="INATIVO"] { background: var(--vermelho-fundo); color: var(--vermelho); }

/* ---------- Utilitarios de layout ----------
   A CSP do servidor bloqueia estilos inline (style-src 'self'), entao todo
   ajuste de layout mora aqui, em classe. */
.estreito { max-width: 560px; }

.form-vertical .campo + .campo { margin-top: 14px; }
.form-vertical button[type="submit"] { margin-top: 18px; }
.form-vertical .dica-bloco { margin: 0 0 16px; }
.form-vertical .dica-rodape { margin: 16px 0 0; }

.botao-largo { width: 100%; justify-content: center; }

.campo-acao { justify-content: flex-end; }
.campo-valor { min-width: 200px; }

.acao-abaixo { margin-top: 12px; }

.linha-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

.subtitulo-secao {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-fraco);
  margin: 20px 0 8px;
}

.linha-clicavel { cursor: pointer; }

/* Larguras da tabela de beneficiarios */
table.beneficiarios th:nth-child(1) { width: 130px; }
table.beneficiarios th:nth-child(2) { width: 230px; }
table.beneficiarios th:nth-child(3) { width: 135px; }
table.beneficiarios th:nth-child(4) { width: 60px; }
table.beneficiarios th:nth-child(5) { width: 150px; }
table.beneficiarios th:nth-child(6) { width: 130px; }
table.beneficiarios th:nth-child(7) { width: 200px; }
table.beneficiarios th:nth-child(8) { width: 145px; }
table.beneficiarios th:nth-child(9) { width: 36px; }

/* Etiquetas do tipo de contratacao */
.etiqueta[data-tipo="PME"] { background: var(--azul-claro); color: var(--azul); }
.etiqueta[data-tipo="PF"] { background: #e7f0e9; color: var(--verde); }
.etiqueta[data-tipo="ADESÃO"] { background: #f0e8f7; color: #6b3fa0; }

/* Etiquetas de produto */
.etiqueta[data-produto="SAÚDE"] { background: #e4f0fb; color: #17518a; }
.etiqueta[data-produto="ODONTO"] { background: #e8f6f3; color: #10786c; }

/* ---------- Logo do cliente ----------
   O SVG entra por <img> (e não inline) porque o arquivo traz um <style>
   interno, que a CSP da página bloquearia. Como imagem, ele carrega normal. */

/* Tela de acesso: logo colorido sobre fundo claro. */
.logo-acesso {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto 18px;
}

/* Cabeçalho: versão clara, porque o azul-marinho do logo somiria no fundo. */
.marca-topo {
  display: flex;
  align-items: center;
  padding-right: 16px;
  margin-right: 2px;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

/* 42px e o menor tamanho em que a linha "BUSINESS INTELLIGENCE" do logo
   ainda se le. Abaixo disso ela vira um borrao. */
.logo-topo { height: 42px; width: auto; display: block; }

/* O cabecalho e space-between; sem isto o titulo ficaria centralizado entre
   o logo e os botoes. Assim logo e titulo ficam juntos a esquerda. */
.marca-topo + div { margin-right: auto; }

@media (max-width: 640px) {
  .marca-topo {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding-bottom: 10px;
    margin-bottom: 4px;
    width: 100%;
  }
  .logo-topo { height: 34px; }
}