/* Auditoria médica — APAS Itapetininga
   Verde APAS (#009541) é a marca; o verde-mata escuro sustenta a navegação e o destaque do painel.
   Carmim fica reservado exclusivamente para glosa. Tipografia: Archivo, com a largura expandida
   nos títulos ecoando o desenho pesado do logotipo. */
:root {
  --apas: #009541;
  --apas-escuro: #007A35;
  --apas-claro: #E3F3E9;
  --mata: #0B2A1D;
  --mata-2: #123B29;
  --fundo: #F3F5F3;
  --papel: #FFFFFF;
  --tinta: #13201A;
  --suave: #5E6C65;
  --linha: #E1E7E3;
  --glosa: #C2263D;
  --glosa-claro: #FBE6E9;
  --alerta-fundo: #FFF5DC;
  --alerta: #7A5200;
  --raio: 12px;
  --raio-p: 8px;
  --fonte: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fundo);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--apas-escuro); text-underline-offset: 2px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--apas); outline-offset: 2px; }
h1, h2, .larga { font-stretch: 118%; }

/* ---------- estrutura ---------- */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.nav {
  background: var(--mata);
  color: #B9CDC2;
  display: flex;
  flex-direction: column;
  padding: 26px 14px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.nav-logo { padding: 0 10px 26px; }
.nav-logo img { width: 150px; height: auto; display: block; }
.nav-logo span { display: block; margin-top: 10px; font-size: 12.5px; color: #8FAE9D; }
.nav nav { display: flex; flex-direction: column; gap: 2px; }
.nav nav a {
  color: #C9DACF;
  text-decoration: none;
  padding: 9px 12px;
  border-radius: var(--raio-p);
  font-weight: 500;
}
.nav nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav nav a.on { background: var(--apas); color: #fff; font-weight: 600; }
.quem { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; font-size: 14px; }
.quem span { color: #fff; font-weight: 600; }
.quem small { color: #8FAE9D; }
.quem a { color: #C9DACF; margin-top: 8px; font-size: 13.5px; }

.conteudo { padding: 30px 38px 64px; min-width: 0; max-width: 1520px; }
.cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.cabeca .periodo { color: var(--suave); font-size: 14px; }
h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -0.005em; margin: 0; }
.sub { color: var(--suave); font-size: 13px; margin-top: 2px; }

/* ---------- filtros ---------- */
.filtros, .linha-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  margin-bottom: 22px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
}
.bloco .linha-form { border: 0; padding: 0; background: none; }
.filtros label, .linha-form label { display: flex; flex-direction: column; font-size: 12.5px; color: var(--suave); gap: 4px; }
.filtros .largo, .linha-form .largo { flex: 1 1 220px; }
input, select, textarea {
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid #CBD6CF;
  border-radius: var(--raio-p);
  padding: 7px 10px;
  min-height: 38px;
}
textarea { width: 100%; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--apas); outline: 3px solid var(--apas-claro); outline-offset: 0; }

.btn {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--apas);
  background: var(--apas);
  color: #fff;
  border-radius: var(--raio-p);
  padding: 8px 16px;
  min-height: 38px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.btn:hover { background: var(--apas-escuro); border-color: var(--apas-escuro); color: #fff; }
.btn-sec { background: var(--papel); color: var(--apas-escuro); border-color: #BFD9C8; }
.btn-sec:hover { background: var(--apas-claro); color: var(--mata); border-color: var(--apas); }
.btn-link { background: none; border-color: transparent; color: var(--apas-escuro); padding: 4px 6px; font-weight: 500; min-height: 0; }
.btn-link:hover { background: none; border-color: transparent; color: var(--tinta); text-decoration: underline; }
.btn-perigo { background: var(--papel); color: var(--glosa); border-color: #E7B3BC; margin-left: auto; }
.btn-perigo:hover { background: var(--glosa); border-color: var(--glosa); color: #fff; }

/* ---------- avisos ---------- */
.aviso { padding: 11px 15px; border-radius: var(--raio-p); margin-bottom: 18px; }
.aviso-ok { background: var(--apas-claro); color: #0B5A2B; }
.aviso-erro { background: var(--glosa-claro); color: var(--glosa); }
.aviso-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.aviso a { color: inherit; font-weight: 650; margin-left: 6px; }

/* ---------- destaque do painel ---------- */
.destaque {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
  gap: 16px;
  margin-bottom: 16px;
}
.destaque-principal {
  background: var(--mata);
  color: #fff;
  border-radius: var(--raio);
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.destaque-principal > * { position: relative; z-index: 1; }
.destaque-principal .rotulo { color: #9FC0AE; font-size: 13px; }
.valor-final { font-size: clamp(28px, 2.5vw, 40px); line-height: 1.08; font-weight: 750; letter-spacing: -0.02em; font-stretch: 108%; white-space: nowrap; }
.regua { display: flex; height: 10px; background: rgba(255,255,255,.12); border-radius: 5px; overflow: hidden; margin-top: 14px; }
.regua-final { background: var(--apas); }
.regua-glosa { background: #F0596E; }
.regua-legenda { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #B9CDC2; margin-top: 6px; flex-wrap: wrap; }
.regua-legenda b { color: #fff; font-weight: 600; }
.regua-legenda .g b { color: #FF8A9A; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.kpi { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.kpi dt { font-size: 12.5px; color: var(--suave); }
.kpi dd { margin: 4px 0 0; font-size: 21px; font-weight: 650; letter-spacing: -0.01em; }
.kpi dd small { display: block; font-size: 12.5px; font-weight: 400; color: var(--suave); letter-spacing: 0; margin-top: 1px; }
.kpi dd.menor { font-size: 15px; font-weight: 550; }
.cor-glosa { color: var(--glosa); }

/* ---------- grade de gráficos ---------- */
.grade-graficos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.g-8 { grid-column: span 8; }
.g-6 { grid-column: span 6; }
.g-4 { grid-column: span 4; }
.g-12 { grid-column: span 12; }
.bloco { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.grade-graficos .bloco { margin-bottom: 0; }
.bloco-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.acoes { display: flex; gap: 8px; }
.totais { margin: 0; color: var(--suave); }
.totais strong { color: var(--tinta); }
.legenda { font-size: 12.5px; color: var(--suave); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.sw-final { background: var(--apas); }
.sw-glosa { background: var(--glosa); }
.sw-linha { height: 2px; background: var(--tinta); border-radius: 0; }
.sw-diaria { background: #7FC79D; }
.grafico { position: relative; height: 290px; }
.grafico.alto { height: 340px; }
.grafico.baixo { height: 240px; }
.sem-dados { display: grid; place-items: center; height: 100%; color: var(--suave); font-size: 14px; text-align: center; }

/* ---------- tabelas ---------- */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--suave); padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 9px 10px; border-bottom: 1px solid #EEF2EF; vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: #F7FAF8; }
.tabela .n { text-align: right; white-space: nowrap; }
.tabela .fraco, .fraco { color: var(--suave); }
.tabela td.fraco { white-space: nowrap; }
.tabela td:first-child a { white-space: nowrap; }
.tabela.compacta td { white-space: nowrap; }
.tabela .diag { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela .vazio { text-align: center; color: var(--suave); padding: 28px; }
.tabela tr.inativo td { color: var(--suave); }
.conteudo > .tabela-rolagem { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 4px 8px; }
.selo { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--glosa-claro); color: var(--glosa); }
.selo-ok { background: var(--apas-claro); color: #0B5A2B; }

.col-barra { min-width: 220px; white-space: nowrap; }
.trilho { display: inline-block; vertical-align: middle; width: 130px; }
.barra { display: block; height: 8px; min-width: 2px; background: var(--apas); border-radius: 4px; position: relative; overflow: hidden; }
.barra-glosa { position: absolute; right: 0; top: 0; bottom: 0; background: var(--glosa); }
.barra-valor { font-size: 13px; color: var(--suave); margin-left: 8px; vertical-align: middle; }

.paginas { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 16px; color: var(--suave); }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
form.inline input, form.inline select { min-height: 32px; padding: 4px 8px; }

/* ---------- formulário de lançamento ---------- */
.form-lanc { max-width: 1000px; }
.form-lanc fieldset { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px 20px; margin: 0 0 14px; }
.form-lanc legend { font-weight: 650; padding: 0 6px; margin-left: -6px; font-stretch: 112%; }
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.grade label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--suave); }
.grade label input, .grade label select { color: var(--tinta); font-size: 15px; }
.grade .col-2 { grid-column: span 2; }
.grade label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: var(--tinta); align-self: end; min-height: 38px; }
.grade label.check input { min-height: 0; width: 18px; height: 18px; accent-color: var(--apas); }
.dinheiro { text-align: right; }
.erro { color: var(--glosa); font-size: 12.5px; }
[hidden] { display: none !important; }
.calculo { margin: 14px 0 0; font-size: 15px; color: var(--suave); min-height: 22px; }
.calculo strong { color: var(--apas-escuro); font-size: 18px; }
.calculo .cor-glosa { font-weight: 600; }
.botoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- login ---------- */
html:has(body.tela-login) { height: 100%; }
body.tela-login {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: minmax(100vh, auto);
  grid-template-rows: minmax(100dvh, auto);
  background: var(--papel);
}
.login-marca {
  background: var(--mata);
  color: #fff;
  padding: clamp(36px, 6vh, 64px) clamp(36px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
  min-height: 100%;
}
/* o "+" do logotipo, inteiro, no canto inferior direito */
.login-marca::before,
.login-marca::after {
  content: "";
  position: absolute;
  background: var(--mata-2);
  border-radius: 26px;
  --cruz: clamp(150px, 14vw, 280px);
  --braco: calc(var(--cruz) * 0.32);
  --margem: clamp(40px, 5vw, 72px);
}
.login-marca::before { width: var(--braco); height: var(--cruz); right: calc(var(--margem) + (var(--cruz) - var(--braco)) / 2); bottom: var(--margem); }
.login-marca::after  { width: var(--cruz); height: var(--braco); right: var(--margem); bottom: calc(var(--margem) + (var(--cruz) - var(--braco)) / 2); }
.login-marca > * { position: relative; z-index: 1; }
.login-marca img { width: clamp(220px, 24vw, 360px); height: auto; display: block; }
.login-frase { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.08; font-weight: 700; font-stretch: 120%; letter-spacing: -0.02em; max-width: 12ch; margin: 0; }
.login-frase + p { color: #A9C4B5; max-width: 36ch; margin: 18px 0 0; font-size: clamp(15px, 1.1vw, 17px); }
.login-rodape { color: #7FA08E; font-size: 13px; max-width: 60%; }
.login-lado { display: grid; place-items: center; padding: 40px clamp(24px, 5vw, 72px); }
.cartao-login { width: min(400px, 100%); display: flex; flex-direction: column; gap: 16px; }
.cartao-login .logo-mobile { display: none; width: 190px; height: auto; margin-bottom: 8px; }
.cartao-login h1 { font-size: 28px; }
.cartao-login .sub { margin: -8px 0 6px; font-size: 14.5px; }
.cartao-login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); font-weight: 500; }
.cartao-login input, .cartao-login select { min-height: 48px; font-size: 15.5px; padding: 10px 12px; }
.cartao-login .btn { min-height: 50px; font-size: 15.5px; margin-top: 4px; }
.cartao-login .aviso { margin-bottom: 0; }

/* ---------- telas menores ---------- */
@media (max-width: 1250px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-8, .g-4 { grid-column: span 12; }
}
@media (max-width: 1000px) {
  .destaque { grid-template-columns: minmax(0, 1fr); }
  .g-6 { grid-column: span 12; }
  body.tela-login { grid-template-columns: minmax(0, 1fr); }
  .login-marca { display: none; }
  .cartao-login .logo-mobile { display: block; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav { position: static; height: auto; padding: 16px 12px 10px; }
  .nav-logo { padding: 0 6px 12px; display: flex; align-items: center; gap: 12px; }
  .nav-logo img { width: 110px; }
  .nav-logo span { margin: 0; }
  .nav nav { flex-direction: row; overflow-x: auto; gap: 4px; }
  .nav nav a { white-space: nowrap; }
  .quem { flex-direction: row; gap: 10px; align-items: baseline; padding: 10px 6px 0; margin-top: 10px; }
  .quem a { margin: 0 0 0 auto; }
  .conteudo { padding: 20px 14px 48px; }
  .kpi dd { font-size: 18px; }
  .valor-final { font-size: 32px; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }