* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #1c2b3a;
  background: #eef1f4;
  font-size: 14px;
}
.topo {
  background: linear-gradient(90deg, #0a2240, #123b6e);
  color: #fff;
  padding: 14px 28px;
}
.topo-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
}
.topo-inner h1 { margin: 0; font-size: 20px; letter-spacing: 1px; }
.topo-inner .topo-esquerda span { font-size: 12px; color: #f1c75b; }
.topo-esquerda { display: flex; flex-direction: column; }
.topo-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 184px;
  height: 60px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  border: 2px solid #f1c75b;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.topo-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.topo-direita { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topo-user { text-align: right; font-size: 12px; color: #f1c75b; }
.topo-user b { color: #fff; }

/* Blocos / listas / dashboard */
h3 { font-size: 14px; color: #0a2240; margin: 18px 0 8px; border-left: 4px solid #f1c75b; padding-left: 8px; }
.login-card { max-width: 560px; margin-left: auto; margin-right: auto; }
.msg { color: #c0392b; font-size: 13px; }
.msg.ok { color: #2e7d32; }
.lista { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lista-item {
  border: 1px solid #dfe5ec; border-radius: 8px; padding: 10px 12px;
  background: #fafbfd; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.lista-item .info { flex: 1; }
.lista-item .titulo { font-weight: bold; color: #0a2240; }
.lista-item .subtitulo { font-size: 12px; color: #44525f; }
.barra { height: 10px; background: #e4e9ef; border-radius: 6px; overflow: hidden; width: 140px; }
.barra > span { display: block; height: 100%; background: #0a2240; }
.barra.ok > span { background: #2e7d32; }
.barra.warn > span { background: #c9a227; }
.pct { font-size: 12px; font-weight: bold; color: #33475b; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 12px; color: #fff; }
.chip.sp { background: #2e7d32; }
.chip.federal { background: #6a1b9a; }
.chip.et { background: #b26a00; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }
.painel-esq, .painel-dir { background: #fafbfd; border: 1px solid #e4e9ef; border-radius: 8px; padding: 12px; }
.inp { width: 100%; padding: 7px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 13px; margin-top: 3px; }
.lbl { display: block; font-size: 12px; font-weight: bold; color: #33475b; margin-top: 8px; }
.doc-lista { font-size: 12px; color: #33475b; }
.doc-lista div { padding: 4px 0; border-bottom: 1px dashed #e4e9ef; }
.doc-lista .ok-c { color: #2e7d32; }
.titulo2 { font-weight: bold; font-size: 13px; color: #0a2240; }
.conteudo {
  max-width: 1180px;
  margin: 22px auto;
  padding: 0 16px 60px;
}
.card {
  background: #fff;
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 18px;
  border: 1px solid #dfe5ec;
  box-shadow: 0 1px 3px rgba(10,34,64,.06);
}
.card h2 { margin: 0 0 10px; font-size: 16px; color: #0a2240; border-bottom: 2px solid #f1c75b; padding-bottom: 6px; }
.linha { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.linha label { flex: 1; min-width: 220px; font-size: 12px; font-weight: bold; color: #33475b; }
.linha input, .linha select {
  width: 100%; margin-top: 4px; padding: 8px;
  border: 1px solid #c7d1da; border-radius: 6px; font-size: 13px;
}
.nota { font-size: 12px; color: #66788a; margin: 6px 0 10px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.btn {
  padding: 9px 14px; border: 1px solid #b8c4cf; border-radius: 7px;
  background: #fff; cursor: pointer; font-size: 13px; font-weight: bold; color: #0a2240;
}
.btn:hover { background: #f3f6f9; }
.btn.primario { background: #0a2240; color: #fff; border-color: #0a2240; }
.btn.primario:hover { background: #123b6e; }
.btn.secundario { background: #f1c75b; border-color: #d9ae3a; color: #3a2c00; }

/* Tabela de itens */
#tabelaitens { margin-top: 8px; }
.item-linha {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 8px; border: 1px solid #e4e9ef; border-radius: 8px; margin-bottom: 6px; background: #fafbfd;
}
.etapa-tag { font-size: 10px; font-weight: bold; padding: 3px 8px; border-radius: 12px; color: #fff; white-space: nowrap; }
.etapa-tag.et1 { background: #2e7d32; }
.etapa-tag.et2 { background: #b26a00; }
.etapa-tag.et3 { background: #6a1b9a; }
.item-linha input { padding: 6px; border: 1px solid #cbd5e0; border-radius: 5px; font-size: 12px; flex: 1; min-width: 120px; }
.total-item { font-weight: bold; font-size: 12px; min-width: 90px; text-align: right; }
.remover { border: none; background: transparent; color: #c0392b; font-size: 18px; cursor: pointer; }
.resumo { margin-top: 12px; padding: 12px; background: #f3f6f9; border-radius: 8px; font-size: 13px; }
.destacado { font-weight: bold; color: #0a2240; font-size: 14px; }

/* Pareceres */
.parecer { padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; border-left: 5px solid; font-size: 13px; }
.parecer.ok { background: #eaf6ee; border-color: #2e7d32; color: #1d5e27; }
.parecer.alert { background: #fdefec; border-color: #c0392b; color: #8a241b; }
.parecer-det { font-size: 12px; margin-top: 4px; color: #44525f; }
.parecer-det small { color: #66788a; }

/* Equipe */
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.perfil {
  display: block; border: 1px solid #e4e9ef; border-radius: 8px; padding: 10px;
  background: #fafbfd; font-size: 13px; cursor: pointer;
}
.perfil strong { color: #0a2240; }
.perfil-obs { font-size: 11px; color: #44525f; margin: 3px 0; }
.perfil small { color: #66788a; }

/* Abas (navegação por áreas) */
.tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
  border-bottom: 2px solid #dfe5ec; padding-bottom: 8px;
}
.tab {
  padding: 9px 16px; border: 1px solid #cfd8e1; border-radius: 8px 8px 0 0;
  background: #f3f6f9; cursor: pointer; font-size: 13px; font-weight: bold; color: #44525f;
}
.tab.ativa { background: #0a2240; color: #fff; border-color: #0a2240; }
.tab:hover:not(.ativa) { background: #e6ecf2; }
.aba { display: none; }
.aba.ativa { display: block; }
.aba-card {
  background: #fafbfd; border: 1px solid #e4e9ef; border-radius: 8px; padding: 16px;
}
.aba-card h3 { margin-top: 0; }
.cola > * { margin-bottom: 6px; }
.pm-linha { display: flex; gap: 6px; margin: 4px 0; }
.desp-grid { display: grid; grid-template-columns: 280px repeat(12, 88px) 110px; gap: 2px; margin: 8px 0; min-width: 1450px; font-size: 12px; }
.desp-cell { border: 1px solid #d5dde4; padding: 3px 4px; }
.desp-head { background: #eef3f7; font-weight: 600; text-align: center; }
.desp-body { overflow: hidden; }
.desp-tot { text-align: right; color: #44525f; }
.desp-inp { width: 62px; padding: 2px 4px; border: 1px solid #cfd8df; }
.periodo-cronograma { margin: 12px 0; padding: 10px; border: 1px solid #dce4ec; border-radius: 8px; background: #f8fafc; }
.meses-editaveis { display: grid; grid-template-columns: repeat(12, minmax(88px, 1fr)); gap: 4px; min-width: 1100px; overflow: visible; }
.periodo-cronograma { overflow-x: auto; }
.cronograma-scroll { overflow-x: auto; margin: 8px 0; padding-bottom: 4px; }
.cf-grid { display: grid; grid-template-columns: 80px 220px 320px repeat(12, 78px); gap: 2px; min-width: 1560px; font-size: 12px; }
.cf-texto { min-width: 0; width: 100%; padding: 6px; font-size: 11px; }
.cf-cell { border: 1px solid #d5dde4; padding: 3px 4px; }
.cf-head { background: #eef3f7; font-weight: 600; text-align: center; }
.cf-chk { width: 15px; height: 15px; }
.ck-ok { display:inline-block; width:16px; height:16px; line-height:15px; text-align:center; background:#2e7d32; color:#fff; border-radius:3px; font-size:11px; font-weight:700; }
.ck-no { display:inline-block; width:14px; height:14px; border:1px solid #b8c4ce; border-radius:3px; background:#fff; }

/* Prévia */
.previa {
  margin-top: 14px; padding: 14px; background: #0f172a; color: #d3e2ff;
  border-radius: 8px; font-family: Consolas, monospace; font-size: 12px; white-space: pre-wrap; min-height: 120px;
}
.rodape {
  border-top: 2px solid #f1c75b; background: #0a2240; color: #cfe0f5;
  font-size: 11px; padding: 14px 26px 22px;
}
.rodape span { display: block; margin-top: 4px; }
.rodape a { color: #f7d774; }

/* Mensalidade Pix e bloqueio progressivo do cliente */
.pagamento-admin { margin: 20px 0; padding: 16px; border: 1px solid #d9ae3a; border-radius: 10px; background: #fffdf4; }
.mensalidade-destaque {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 6px 16px;
  align-items: center;
  margin: 12px 0 16px;
  padding: 14px;
  border: 2px solid #d9ae3a;
  border-radius: 9px;
  background: #fff;
}
.mensalidade-destaque label { font-weight: 800; color: #0a2240; }
.mensalidade-destaque input {
  width: 100%;
  padding: 10px;
  border: 1px solid #9eabb7;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
}
.mensalidade-destaque small { color: #66788a; }
.mensalidade-destaque strong { color: #18794e; }
.pagamento-painel { margin-bottom: 14px; padding: 14px; border: 1px solid #dfe5ec; border-radius: 10px; background: #fff; }
.pagamento-painel.liberado { border-left: 6px solid #2e7d32; background: #f4fbf6; }
.pagamento-painel.pendente { border-left: 6px solid #d69e00; background: #fffaf0; }
.pagamento-dados { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; margin: 10px 0; }
.pagamento-dado { padding: 9px; background: #f3f6f9; border-radius: 7px; font-size: 12px; overflow-wrap: anywhere; }
.pagamento-qr { max-width: 220px; max-height: 220px; padding: 8px; background: #fff; border: 1px solid #dfe5ec; border-radius: 8px; }
.pagamento-cliente-item { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed #dfe5ec; }
.bloqueio-aviso { margin: 8px 0 12px; padding: 10px; border-radius: 7px; background: #fff3cd; color: #684f00; border-left: 5px solid #d69e00; font-size: 12px; }
.area-restrita.bloqueada .conteudo-restrito { opacity: .5; pointer-events: none; user-select: none; }
.tab.bloqueada::after { content: " 🔒"; font-size: 11px; }
.btn:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .65; }

/* Relatório Situacional em quatro etapas */
.situacional-resumo { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 10px 0; padding: 11px; background: #eef3f7; border-radius: 8px; font-size: 12px; }
.situacional-etapa { margin: 13px 0; padding: 14px; border: 1px solid #dfe5ec; border-radius: 10px; background: #fff; }
.situacional-etapa.respondida { border-left: 6px solid #2e7d32; }
.situacional-etapa.disponivel { border-left: 6px solid #0a2240; }
.situacional-etapa.bloqueada { border-left: 6px solid #b8c4cf; background: #fafbfd; }
.situacional-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.situacional-numero { display: inline-flex; width: 26px; height: 26px; margin-right: 8px; align-items: center; justify-content: center; border-radius: 50%; background: #0a2240; color: #fff; font-weight: 800; }
.situacional-pendencia { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #e4e9ef; font-size: 12px; }
.situacional-pendencia .btn { flex: 0 0 auto; }
.situacional-ok { padding: 9px; color: #1d5e27; background: #eaf6ee; border-radius: 7px; font-size: 12px; }
.situacional-alertas { margin-top: 9px; padding: 9px; background: #fff8e1; border-radius: 7px; color: #745200; font-size: 12px; }
.situacional-resposta { margin: 10px 0; padding: 10px; background: #f3f6f9; border-radius: 7px; font-size: 12px; white-space: pre-wrap; }
.situacional-liberacao { margin: 8px 0; padding: 8px; background: #fff3cd; border-radius: 7px; color: #684f00; font-size: 12px; }
.situacional-historico { margin-top: 14px; font-size: 11px; color: #44525f; }
.situacional-historico div { padding: 5px 0; border-bottom: 1px dashed #e4e9ef; }

/* Auditoria e pacote final */
.final-status, .final-config, .final-auditoria, .final-historico {
  margin-top: 12px; padding: 12px; border: 1px solid #dfe5ec; border-radius: 8px; background: #fff;
}
.final-status { border-left: 5px solid #0a2240; }
.final-status .btn { margin: 8px 6px 0 0; }
.final-hash { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: 10px; color: #66788a; }
.final-cond { display: grid; grid-template-columns: minmax(220px, 1fr) 170px; gap: 10px; align-items: center; margin: 7px 0; }
.final-regras { padding-left: 22px; font-size: 12px; color: #44525f; }
.final-regras li { margin: 5px 0; }
.final-confirmacao { display: block; margin: 10px 0; padding: 10px; background: #fff8e1; border-radius: 6px; font-weight: 600; }
.final-apto, .final-bloqueado, .final-alertas { margin: 8px 0; padding: 10px; border-radius: 7px; }
.final-apto { background: #eaf6ee; color: #1d5e27; border-left: 5px solid #2e7d32; }
.final-bloqueado { background: #fdefec; color: #8a241b; border-left: 5px solid #c0392b; }
.final-alertas { background: #fff8e1; color: #745200; border-left: 5px solid #d69e00; }
.final-grupo { margin: 10px 0; }
.final-grupo h4 { margin: 8px 0 4px; color: #44525f; }
.final-pendencia { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px; border-bottom: 1px dashed #dfe5ec; font-size: 12px; }
.final-pendencia .btn { flex: 0 0 auto; }
.final-acoes { margin-top: 14px; }
.final-btn { font-weight: 800; letter-spacing: .3px; }
.final-historico-item { padding: 6px 0; border-bottom: 1px dashed #dfe5ec; font-size: 11px; }

/* Telas estreitas: reduz a logo central para não sobrepor o título */
@media (max-width: 900px) {
  .topo-logo { position: static; transform: none; order: -1; flex: none; }
  .topo-inner { flex-wrap: wrap; justify-content: center; text-align: center; }
  .topo-esquerda { align-items: center; }
  .final-cond { grid-template-columns: 1fr; }
  .final-pendencia { align-items: flex-start; flex-direction: column; }
  .mensalidade-destaque { grid-template-columns: 1fr; }
}