/* ══════════════════════════════════════════
   TOKENS
══════════════════════════════════════════ */
:root {
  --azul:        #0B4F8A;
  --azul-escuro: #071E3D;
  --azul-mid:    #1565C0;
  --azul-light:  #E3F0FF;
  --verde:       #1B6E3F;
  --verde-bg:    #E6F4ED;
  --vermelho:    #C0392B;
  --vermelho-bg: #FDECEA;
  --ambar:       #B7791F;
  --ambar-bg:    #FEF3C7;
  --cinza-bg:    #F4F7FB;
  --cinza-borda: #DDE3EA;
  --texto:       #111827;
  --muted:       #6B7280;
  --surface:     #FFFFFF;
  --r:           10px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.14);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--cinza-bg);
  color: var(--texto);
  font-size: 14px;
  min-height: 100vh;
}

/* ══════════════════════════════════════════
   TELA DE LOGIN
══════════════════════════════════════════ */
#tela-login {
  min-height: 100vh;
  background: var(--azul-escuro);
  display: flex;
  flex-direction: column;
}
.login-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  position: relative;
  overflow: hidden;
}
.login-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 500px at 50% 0%, rgba(21,101,192,.25) 0%, transparent 70%);
  pointer-events: none;
}
.login-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 32px;
}
.login-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: .5px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.login-eyebrow span { color: #60A5FA; }
.login-card h2 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -.3px;
}
.login-card > p {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
  margin-bottom: 24px;
}
.login-field { margin-bottom: 16px; }
.login-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  margin-bottom: 6px;
}
.login-field input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #fff;
  outline: none;
  transition: border-color .15s, background .15s;
}
.login-field input::placeholder { color: rgba(255,255,255,.3); }
.login-field input:focus { border-color: var(--azul-mid); background: rgba(255,255,255,.09); }
.login-erro {
  min-height: 16px;
  font-size: 12px;
  color: #FCA5A5;
  margin-bottom: 8px;
}
.login-btn {
  width: 100%;
  background: linear-gradient(135deg, #1565C0, #0B4F8A);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.login-btn:hover { opacity: .88; }
.login-link {
  display: block; margin: 18px auto 0; border: 0; background: none;
  color: #93C5FD; font: inherit; font-size: 12px; cursor: pointer;
}
.login-link:hover { color: #fff; text-decoration: underline; }
.saas-screen {
  min-height: 100vh; width: 100%; padding: 28px; align-items: center;
  justify-content: center; background: var(--cinza-bg);
}
.signup-card { max-width: 540px; max-height: calc(100vh - 56px); overflow-y: auto; background: #fff; color: var(--texto); box-shadow: var(--shadow-lg); }
.signup-card h2 { color: var(--azul-escuro); margin-bottom: 8px; }
.signup-card > p { color: var(--muted); }
.signup-card .login-field label { color: #344054; }
.signup-card .login-field input { background: #fff; color: var(--texto); border-color: var(--cinza-borda); }
.signup-card .login-field input:focus { border-color: var(--azul-mid); background: #fff; }
.signup-card small { display: block; margin-top: 5px; color: var(--muted); }
.consent-line { display: flex; align-items: flex-start; gap: 8px; margin: 11px 0; color: #475467; font-size: 12px; line-height: 1.5; }
.consent-line input { margin-top: 3px; }
.consent-line a { color: var(--azul-mid); }
.signup-success { margin: 16px 0; padding: 14px; border-radius: 9px; background: var(--verde-bg); color: #14532D; overflow-wrap: anywhere; line-height: 1.7; }
.signup-success code { display: inline-block; padding: 4px 7px; background: #fff; border-radius: 5px; font-size: 13px; }
.license-card { width: min(520px, 100%); padding: 32px; background: #fff; border: 1px solid var(--cinza-borda); border-radius: 18px; box-shadow: var(--shadow-lg); }
.license-card h1 { margin: 12px 0; color: var(--azul-escuro); font-size: 25px; }
.license-card p { color: var(--muted); line-height: 1.6; }
#licenca-dados { margin: 18px 0; padding: 12px; border-radius: 8px; background: var(--cinza-bg); }
.checkout-actions { display: grid; gap: 10px; margin-top: 18px; }
.admin-shell { width: min(1280px, 100%); margin: auto; }
.admin-shell > header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.admin-shell h1 { color: var(--azul-escuro); font-size: 30px; }
.admin-shell header p { color: var(--muted); }
.admin-refresh,.admin-action { padding: 9px 13px; border: 1px solid var(--cinza-borda); border-radius: 8px; background: #fff; color: var(--azul); font-weight: 700; cursor: pointer; }
.admin-kpis { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.admin-kpis article,.admin-panel { padding: 18px; border: 1px solid var(--cinza-borda); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.admin-kpis strong,.admin-kpis span { display: block; }
.admin-kpis strong { color: var(--azul); font-size: 25px; }
.admin-kpis span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.admin-panel { margin-bottom: 18px; }
.admin-panel h2 { margin-bottom: 14px; font-size: 17px; }
.admin-table-wrap { overflow-x: auto; }
.admin-panel table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.admin-panel th,.admin-panel td { padding: 10px; border-bottom: 1px solid var(--cinza-borda); text-align: left; }
.admin-panel th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.admin-panel td small { display: block; margin-top: 3px; color: var(--muted); }
#admin-auditoria p { padding: 9px 0; border-bottom: 1px solid var(--cinza-borda); color: var(--muted); }
@media(max-width:850px){ .admin-kpis {grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .saas-screen{padding:14px}.signup-card,.license-card{padding:22px}.admin-shell>header{align-items:flex-start;flex-direction:column}.admin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ══════════════════════════════════════════
   TELA INICIAL
══════════════════════════════════════════ */
#tela-inicial {
  min-height: 100vh;
  background: var(--cinza-bg);
  display: flex;
  flex-direction: column;
}

.home-header {
  padding: 28px 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.home-logo {
  width: 42px; height: 42px;
  background: var(--azul-mid);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.home-header-text h1 {
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.2px;
}
.home-header-text p {
  font-size: 12px; color: rgba(255,255,255,.5); margin-top: 1px;
}
.btn-sair {
  margin-left: auto;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-sair:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-outline-header {
  margin-left: auto;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-outline-header:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-outline-header + .btn-sair { margin-left: 0; }

.home-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 60px 24px;
  text-align: center;
  position: relative;
}
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 500px at 50% 0%, rgba(21,101,192,.25) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 80% 80%, rgba(27,110,63,.12) 0%, transparent 60%);
  pointer-events: none;
}

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: .5px;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.home-eyebrow span { color: #60A5FA; }

.home-hero h2 {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -1px;
  max-width: 640px;
  margin-bottom: 16px;
  position: relative;
}
.home-hero h2 em {
  font-style: normal;
  background: linear-gradient(90deg, #60A5FA, #34D399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-hero p {
  font-size: 16px;
  color: rgba(255,255,255,.55);
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 56px;
  position: relative;
}

/* ══════════════════════════════════════════
   DASHBOARD GERAL MUNICIPAL
══════════════════════════════════════════ */
.dashboard-municipal {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 32px 48px;
  text-align: left;
}

.dash-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--ambar-bg);
  border: 1px solid #FDE68A;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--ambar);
  line-height: 1.5;
  margin-bottom: 28px;
}
.dash-disclaimer strong { color: var(--ambar); }
/* variante informativa (sem alerta): usada quando não há valores ilustrativos */
.dash-disclaimer.info {
  background: var(--azul-light);
  border-color: #BFDBFE;
  color: var(--azul);
}
.dash-disclaimer.info strong { color: var(--azul); }


.dash-group { margin-bottom: 36px; }
.dash-group-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cinza-borda);
}
.dash-group-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--texto);
  letter-spacing: -.2px;
}
.dash-group-header span {
  font-size: 12px;
  color: var(--muted);
}

.indic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.indic-card {
  background: var(--surface);
  border: 1px solid var(--cinza-borda);
  border-radius: 12px;
  padding: 18px 20px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.indic-card.clickable { cursor: pointer; }
.indic-card.clickable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--azul-mid);
}

.indic-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.indic-code {
  font-size: 11px;
  font-weight: 800;
  color: var(--azul);
  letter-spacing: .3px;
}
.indic-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.indic-tag.ativo    { background: var(--verde-bg); color: var(--verde); }
.indic-tag.pendente { background: var(--ambar-bg); color: var(--ambar); }
.indic-tag.breve    { background: var(--cinza-bg); color: var(--muted); border: 1px solid var(--cinza-borda); }

.indic-value { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.indic-value .num { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.indic-value .unit { font-size: 13px; font-weight: 600; color: var(--muted); }
.indic-value.bom .num      { color: var(--verde); }
.indic-value.regular .num  { color: var(--ambar); }
.indic-value.atencao .num  { color: var(--vermelho); }
.indic-value.neutro .num   { color: var(--azul); }

.indic-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 4px;
}
.indic-desc {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 10px;
  min-height: 32px;
}

.indic-bar { height: 5px; border-radius: 99px; background: var(--cinza-borda); overflow: hidden; margin-bottom: 10px; }
.indic-bar-fill { height: 100%; border-radius: 99px; }
.indic-bar-fill.bom     { background: var(--verde); }
.indic-bar-fill.regular { background: var(--ambar); }
.indic-bar-fill.atencao { background: var(--vermelho); }
.indic-bar-fill.neutro  { background: var(--azul); }

.indic-link {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--azul);
}

/* CVAT — card em destaque, formato diferenciado */
.cvat-card {
  background: var(--surface);
  border: 1px solid var(--cinza-borda);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.cvat-score { text-align: center; flex-shrink: 0; }
.cvat-score .num { font-size: 40px; font-weight: 800; letter-spacing: -1px; color: var(--azul-escuro); }
.cvat-score .max { font-size: 15px; color: var(--muted); font-weight: 600; }
.cvat-dims { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.cvat-dim-row { display: flex; align-items: center; gap: 10px; }
.cvat-dim-label { font-size: 12px; color: var(--muted); width: 168px; flex-shrink: 0; }
.cvat-dim-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--cinza-borda); overflow: hidden; }
.cvat-dim-fill { height: 100%; border-radius: 99px; background: var(--azul-mid); }
.cvat-dim-pts { font-size: 12px; font-weight: 700; color: var(--texto); width: 48px; text-align: right; flex-shrink: 0; }
.cvat-card.clickable { cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.cvat-card.clickable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--azul-mid);
}
.cvat-vazio { font-size: 13px; color: var(--muted); }
.cvat-vazio .indic-link { display: inline; margin-left: 6px; }

/* ── Navegação lateral (Painel + Módulo) ── */
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.app-nav-item:hover { background: var(--cinza-bg); color: var(--texto); }
.app-nav-item.active { background: var(--azul-light); color: var(--azul); }
.app-nav-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }

/* ── Abas Relatório Nominal / Consolidado ── */
.mod-tabs {
  display: flex; gap: 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--cinza-borda);
  padding: 0 16px;
}
.tab-btn {
  background: none; border: none; cursor: pointer;
  padding: 10px 14px;
  font-size: 12.5px; font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--azul); }

/* Relatório consolidado: cartões e referências no padrão KODE APS */
#consolidado-container { min-width:0; padding:18px; overflow:auto; }
.consolidado-dashboard { display:flex; flex-direction:column; gap:18px; min-width:0; }
.consolidado-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.consolidado-eyebrow { color:var(--azul); font-size:10px; font-weight:800; letter-spacing:1px; }
.consolidado-heading h2 { margin:4px 0; color:var(--azul-escuro); font-size:22px; }
.consolidado-heading p, .consolidado-section-head p { margin:0; color:var(--muted); font-size:12px; }
.consolidado-reference { display:flex; flex-direction:column; gap:4px; max-width:360px; padding:12px 14px; background:#EDF3FF; border:1px solid #D7E4FC; border-radius:10px; color:#435574; font-size:11px; line-height:1.45; }
.consolidado-reference strong { color:#164EA9; font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
.consolidado-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.consolidado-kpi { display:flex; flex-direction:column; gap:5px; min-width:0; padding:17px 18px; background:#fff; border:1px solid #E1E7F0; border-radius:13px; box-shadow:0 2px 7px rgba(15,35,75,.04); }
.consolidado-kpi > span { color:#728098; font-size:9px; font-weight:800; letter-spacing:.7px; }
.consolidado-kpi > strong { color:#245FE5; font-size:28px; line-height:1.1; }
.consolidado-kpi > strong small { color:#71809A; font-size:11px; }
.consolidado-kpi > small { color:#78859A; font-size:10px; }
.consolidado-kpi.is-good > strong { color:#07966D; }
.consolidado-kpi.is-pending > strong { color:#D34242; }
.consolidado-kpi.is-score > strong { color:#1C4FAE; }
.consolidado-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:2px; padding-bottom:9px; border-bottom:1px solid #DDE4EE; }
.consolidado-section-head h3 { margin:0 0 3px; color:#0B1730; font-size:15px; }
.consolidado-section-head > span { color:#60718C; font-size:10px; font-weight:700; white-space:nowrap; }
.consolidado-criterios-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:12px; }
.consolidado-criterio { padding:15px 16px; background:#fff; border:1px solid #E1E7F0; border-radius:12px; box-shadow:0 2px 7px rgba(15,35,75,.04); }
.consolidado-criterio-top { display:flex; align-items:center; justify-content:space-between; }
.consolidado-letra { display:inline-flex; align-items:center; justify-content:center; width:29px; height:29px; border-radius:8px; color:#245FE5; background:#EDF3FF; font-size:13px; font-weight:900; }
.consolidado-pontos { color:#52627D; font-size:10px; font-weight:800; }
.consolidado-criterio h4 { min-height:34px; margin:10px 0 9px; color:#17243D; font-size:12px; line-height:1.4; }
.consolidado-criterio-count { display:flex; align-items:baseline; gap:5px; color:#75829A; font-size:10px; }
.consolidado-criterio-count strong { color:#142546; font-size:19px; }
.consolidado-criterio-count b { margin-left:auto; color:#07966D; font-size:12px; }
.consolidado-bar { height:6px; margin:8px 0; overflow:hidden; background:#EDF1F7; border-radius:99px; }
.consolidado-bar span { display:block; height:100%; background:linear-gradient(90deg,#2871F0,#4A8BFF); border-radius:99px; }
.consolidado-criterio > small { color:#8894A7; font-size:9px; }
.consolidado-table-head { margin-top:8px; }
.consolidado-table-scroll { overflow:auto; background:#fff; border:1px solid #DDE4EE; border-radius:12px; box-shadow:0 2px 8px rgba(15,35,75,.05); }
.consolidado-table { min-width:760px; }
.consolidado-table thead th { position:sticky; top:0; z-index:1; background:#F4F7FC; color:#64728A; font-size:9px; }
.consolidado-table .consolidado-crit-th { min-width:105px; text-align:center; }
.consolidado-crit-th strong, .consolidado-crit-th small { display:block; }
.consolidado-crit-th strong { color:#245FE5; font-size:11px; }
.consolidado-crit-th small { margin-top:3px; color:#66758E; font-size:9px; font-weight:600; line-height:1.3; text-transform:none; white-space:normal; }
.consolidado-table tfoot { background:#F3F6FC; }
@media (max-width:900px) { .consolidado-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .consolidado-heading { flex-direction:column; } .consolidado-reference { max-width:none; } }
@media (max-width:560px) { #consolidado-container { padding:12px; } .consolidado-kpis { gap:9px; } .consolidado-kpi { padding:13px; } .consolidado-kpi > strong { font-size:23px; } .consolidado-criterios-grid { grid-template-columns:1fr; } }.tab-btn.active { color: var(--azul); border-bottom-color: var(--azul); }

.home-footer {
  padding: 20px 40px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.home-footer p { font-size: 12px; color: rgba(255,255,255,.3); }

/* ══════════════════════════════════════════
   TELA DE IMPORTAÇÃO
══════════════════════════════════════════ */
#tela-upload {
  min-height: 100vh;
  background: var(--azul-escuro);
  display: flex;
  flex-direction: column;
}
.upload-hero {
  flex: 1;
  padding: 48px 40px 60px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}
.upload-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 400px at 50% 0%, rgba(21,101,192,.20) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.upload-hero h2 {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.6px;
  margin-bottom: 10px;
}
.upload-hero > p {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 36px;
}
.upload-hero > p strong { color: rgba(255,255,255,.85); }

.upload-section { margin-bottom: 30px; }
.upload-section-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: rgba(255,255,255,.4);
  margin-bottom: 12px;
}
.upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.upload-grid-single { grid-template-columns: minmax(210px, 340px); }

.upload-box {
  border: 1.5px dashed rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
  background: rgba(255,255,255,.03);
}
.upload-box:hover, .upload-box.dragover {
  border-color: #60A5FA;
  background: rgba(96,165,250,.08);
}
.upload-box.loaded {
  border-style: solid;
  border-color: #34D399;
  background: rgba(52,211,153,.08);
}
.upload-box input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.upload-box h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.upload-box p { font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 0; }
.upload-box .status { font-size: 11px; font-weight: 600; color: #34D399; margin-top: 6px; word-break: break-all; }
.upload-box-disabled {
  opacity: .4; cursor: not-allowed; pointer-events: none;
  border-style: solid; border-color: rgba(255,255,255,.08);
}

/* Upload unificado SIAPS — área maior para múltiplos arquivos */
#card-siaps-unificado, #m-card-siaps-unificado {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#card-siaps-unificado h4, #m-card-siaps-unificado h4 {
  font-size: 15px;
  margin-bottom: 6px;
}
#card-siaps-unificado p, #m-card-siaps-unificado p {
  font-size: 12px;
  max-width: 320px;
}

/* Filtro de equipe na toolbar */
#fil-equipe {
  min-width: 160px;
}
#fil-equipe option[value=""] {
  color: #F59E0B;
  font-weight: 700;
}

/* Badge de equipes no dashboard */
.equipe-badge {
  font-size: 10px;
  color: #60A5FA;
  margin-top: 2px;
  font-weight: 600;
}

/* Badges de condição PEC */
.badge-cond-ok       { color: var(--verde); font-weight: 700; }
.badge-cond-inativa  { color: #D97706; font-weight: 700; }
.badge-cond-nao      { color: var(--vermelho); font-weight: 700; }
.badge-cond-faltante { color: var(--azul-mid); font-weight: 700; }

.btn-importar {
  background: linear-gradient(135deg, #1565C0, #0B4F8A);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.btn-importar:hover:not(:disabled) { opacity: .88; }
.btn-importar:disabled { opacity: .35; cursor: not-allowed; }

/* Fonte dos dados — sidebar do módulo */
.fonte-dados { display: flex; flex-direction: column; gap: 8px; }
.fonte-item {
  background: var(--cinza-bg);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--muted);
}
.fonte-item strong { color: var(--azul); font-size: 13px; }

/* ══════════════════════════════════════════
   MODAL — IMPORTAR MAIS PLANILHAS
   (painel escuro para reaproveitar o estilo .upload-box da tela de importação)
══════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(7,30,61,.62);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-painel {
  background: var(--azul-escuro);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 860px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 8px;
}
.modal-header h3 { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.3px; margin-bottom: 6px; }
.modal-header p { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.55; max-width: 620px; }
.modal-header p strong { color: rgba(255,255,255,.85); }
.modal-fechar {
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: rgba(255,255,255,.55);
  padding: 2px 8px; border-radius: 6px;
}
.modal-fechar:hover { color: #fff; background: rgba(255,255,255,.08); }
.modal-corpo { padding: 12px 26px 4px; overflow-y: auto; }
.modal-rodape { padding: 14px 26px 22px; display: flex; justify-content: flex-end; }

/* ══════════════════════════════════════════
   TELA DO MÓDULO C6
══════════════════════════════════════════ */
#tela-modulo { display: none; min-height: 100vh; flex-direction: column; }

/* ── Top Bar ── */
.mod-topbar {
  background: var(--azul-escuro);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  z-index: 100;
}
.btn-voltar {
  display: flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.6);
  font-size: 13px; font-weight: 500;
  background: none; border: none; cursor: pointer;
  padding: 6px 10px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.btn-voltar:hover { color: #fff; background: rgba(255,255,255,.07); }
.topbar-sep { width: 1px; height: 20px; background: rgba(255,255,255,.12); }
.topbar-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 8px;
  background: var(--azul-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.topbar-title {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 14px; font-weight: 700; color: #fff;
  line-height: 1.3;
}
.topbar-title small {
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,.5);
}
.topbar-actions { margin-left: auto; display: flex; gap: 8px; }
.btn-top {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 7px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; border: none; transition: opacity .15s;
  white-space: nowrap;
}
.btn-top:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--azul-mid); color: #fff; }
.btn-primary:not(:disabled):hover { opacity: .88; }
.btn-outline {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
}
.btn-outline:not(:disabled):hover { background: rgba(255,255,255,.12); }
.btn-pdf {
  background: rgba(192,57,43,.25);
  border: 1px solid rgba(192,57,43,.4);
  color: #FCA5A5;
}
.btn-pdf:not(:disabled):hover { background: rgba(192,57,43,.4); }

/* ── Layout do módulo ── */
.mod-body {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 56px);
}

/* ── Sidebar ── */
.mod-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--cinza-borda);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}
.sidebar-section {
  padding: 16px;
  border-bottom: 1px solid var(--cinza-borda);
}
.sidebar-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin-bottom: 10px;
}

/* Filtros na sidebar */
.filtro-group { margin-bottom: 12px; }
.filtro-group label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.filtro-group select,
.filtro-group input {
  width: 100%;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12px;
  font-family: inherit;
  color: var(--texto);
  background: var(--cinza-bg);
  outline: none;
  transition: border-color .15s;
}
.filtro-group select:focus, .filtro-group input:focus { border-color: var(--azul); }

/* Stats cards na sidebar */
.stat-mini {
  background: var(--cinza-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color .15s, background .15s;
}
.stat-mini:hover { border-color: var(--cinza-borda); background: #ECF2FA; }
.stat-mini.active-filter { border-color: var(--azul); background: var(--azul-light); }
.stat-mini-label { font-size: 11px; font-weight: 600; color: var(--muted); }
.stat-mini-val { font-size: 20px; font-weight: 800; }
.stat-mini-sub { font-size: 10px; color: var(--muted); }
.stat-mini.cor-total .stat-mini-val  { color: var(--azul); }
.stat-mini.cor-sem   .stat-mini-val  { color: var(--ambar); }
.stat-mini.cor-ok    .stat-mini-val  { color: var(--verde); }
.stat-mini.cor-pend  .stat-mini-val  { color: var(--vermelho); }

/* ── Área principal ── */
.mod-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}

/* Barra de ferramentas da tabela — busca + filtros no cabeçalho */
.table-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--cinza-borda);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--cinza-bg);
  border: 1.5px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 9px 14px;
  flex: 1; min-width: 200px; max-width: 340px;
  transition: border-color .15s;
}
.search-box:focus-within { border-color: var(--azul); }
.search-box input {
  border: none; background: none; outline: none;
  font-size: 13.5px; font-family: inherit; color: var(--texto); width: 100%;
}
.toolbar-select {
  border: 1.5px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--texto);
  background: var(--cinza-bg);
  outline: none;
  min-width: 175px;
  transition: border-color .15s;
}
.toolbar-select:focus { border-color: var(--azul); }
.toolbar-btn {
  border: 1.5px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--muted);
  background: var(--cinza-bg);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.toolbar-btn:hover { border-color: var(--azul); color: var(--azul); }
.toolbar-btn .lbl-ocultar { display: none; }
body.mostrar-telefone .toolbar-btn#btn-telefone {
  border-color: var(--azul); color: var(--azul); background: var(--azul-light);
}
body.mostrar-telefone #btn-telefone .lbl-mostrar { display: none; }
body.mostrar-telefone #btn-telefone .lbl-ocultar { display: inline; }
.count-label { font-size: 12px; color: var(--muted); margin-left: auto; }

/* Coluna Telefone: oculta por padrão; o botão da toolbar alterna a classe
   "mostrar-telefone" no <body>. No PDF ela nunca sai (regra em @media print). */
.col-telefone { display: none; }
body.mostrar-telefone th.col-telefone,
body.mostrar-telefone td.col-telefone { display: table-cell; }
td.col-telefone { white-space: nowrap; }

/* Modo privacidade (olho na topbar do módulo): os textos dos dados pessoais
   já são trocados por máscara no JS; aqui só o estilo do botão, da máscara e
   do campo de busca (que, em navegadores Chromium, passa a mostrar bolinhas). */
.btn-privacidade .ico-eye-off, .btn-privacidade .lbl-on { display: none; }
body.privacidade .btn-privacidade .ico-eye,
body.privacidade .btn-privacidade .lbl-off { display: none; }
body.privacidade .btn-privacidade .ico-eye-off { display: inline-block; }
body.privacidade .btn-privacidade .lbl-on { display: inline; }
body.privacidade .btn-privacidade {
  background: rgba(96,165,250,.22);
  border-color: #60A5FA;
  color: #fff;
}
/* Toggle "Critérios no PDF" */
.btn-toggle { display: inline-flex; align-items: center; gap: 8px; }
.toggle-track {
  position: relative; width: 28px; height: 16px; border-radius: 99px;
  background: rgba(255,255,255,.25); transition: background .15s;
}
.toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.btn-toggle[aria-pressed="true"] { background: rgba(96,165,250,.22); border-color: #60A5FA; color: #fff; }
.btn-toggle[aria-pressed="true"] .toggle-track { background: #60A5FA; }
.btn-toggle[aria-pressed="true"] .toggle-knob { left: 14px; }
.mascarado { color: var(--muted); letter-spacing: 1px; user-select: none; }
td.mono.mascarado { letter-spacing: 0; }   /* a coluna CPF tem largura máxima fixa */
body.privacidade #busca { -webkit-text-security: disc; }

/* Tooltip dos critérios (A, B, C…): caixa única, posicionada por JS */
#tip-box {
  position: fixed;
  z-index: 1000;
  max-width: 280px;
  pointer-events: none;
  background: var(--azul-escuro);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 11px;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity .12s;
}
#tip-box.visivel { opacity: 1; }
#tip-box strong { display: block; color: #93C5FD; font-size: 11px; margin-bottom: 2px; }
.legenda-letra { cursor: help; }

/* Tabela */
.table-scroll {
  flex: 1;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead th {
  background: var(--azul-escuro);
  color: rgba(255,255,255,.85);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
  border-right: 1px solid rgba(255,255,255,.05);
}
thead th:last-child { border-right: none; }
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { background: #122F52; }
#table-container th:nth-child(2), #table-container td:nth-child(2) { min-width:145px !important; max-width:145px !important; width:145px !important; white-space:nowrap; }
.crit-header-resumo { display:block; margin-top:4px; color:rgba(255,255,255,.78); font-size:11px; font-weight:500; line-height:1.25; letter-spacing:0; text-transform:none; white-space:normal; min-width:92px; max-width:150px; }
tbody tr { border-bottom: 1px solid #F0F4F8; }
tbody tr:hover { background: #F0F7FF; }
tbody td {
  padding: 9px 14px;
  vertical-align: middle;
}
td.mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; min-width: 145px; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.center { text-align: center; }
td.nome-cell { min-width: 260px; width: 35%; }
td.nome-cell strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td.nome-cell .sem { color: var(--muted); font-style: italic; font-size: 12px; }

/* Badges e tags */
.badge-crit {
  display: inline-block; background: none; border: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .3px;
}
.badge-crit.ok  { color: var(--verde);    }
.badge-crit.no  { color: var(--vermelho); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700;
}
.tag.ok      { background: var(--verde-bg);    color: var(--verde);    }
.tag.pend    { background: var(--vermelho-bg);  color: var(--vermelho); }
.tag.sem     { background: #FFF7ED;             color: #C2410C;         }
.tag.mid     { background: var(--ambar-bg);      color: var(--ambar);    }

/* Barra de score visual */
.score-bar { display: flex; align-items: center; gap: 3px; }
.pip { width: 14px; height: 14px; border-radius: 3px; }
.pip.on  { background: var(--verde); }
.pip.off { background: #E2E8F0; }
.score-pts {
  margin-left: 6px; font-size: 12px; font-weight: 700;
}
.pts-100 { color: var(--verde); }
.pts-0   { color: var(--vermelho); }
.pts-mid { color: var(--ambar); }

/* Paginador */
.pager {
  background: var(--surface);
  border-top: 1px solid var(--cinza-borda);
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  font-size: 12px; color: var(--muted);
}
.pager button {
  padding: 5px 12px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.pager button:disabled { opacity: .35; cursor: not-allowed; }
.pager button:not(:disabled):hover { border-color: var(--azul); color: var(--azul); }

/* Estado vazio */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 80px 24px; color: var(--muted);
  flex: 1;
}
.empty-state .icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { font-size: 17px; font-weight: 700; color: var(--texto); margin-bottom: 6px; }
.empty-state p  { font-size: 13px; max-width: 320px; }

/* ══════════════════════════════════════════
   CARDS VISUAIS DO MÓDULO (gráficos)
══════════════════════════════════════════ */
.modulo-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding: 20px 24px;
  background: var(--cinza-bg);
  border-bottom: 1px solid var(--cinza-borda);
}
.modulo-charts:empty { display: none; }

.chart-card {
  background: var(--surface);
  border: 1px solid var(--cinza-borda);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
}
.chart-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 14px;
}

/* Gráfico de barras horizontais */
.chart-bars { display: flex; flex-direction: column; gap: 8px; }
.chart-bar-row {
  display: flex; align-items: center; gap: 10px;
}
.chart-bar-label {
  font-size: 12px; font-weight: 600; color: var(--texto);
  width: 110px; flex-shrink: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-bar-track {
  flex: 1; height: 20px; border-radius: 6px;
  background: var(--cinza-bg); overflow: hidden;
  position: relative;
}
.chart-bar-fill {
  height: 100%; border-radius: 6px;
  transition: width .4s ease;
  min-width: 2px;
}
.chart-bar-fill.cor-siaps    { background: var(--azul-mid); }
.chart-bar-fill.cor-somente-siaps { background: #60A5FA; }
.chart-bar-fill.cor-somente-pec   { background: var(--ambar); }
.chart-bar-fill.cor-ativa     { background: var(--verde); }
.chart-bar-fill.cor-inativa   { background: #D97706; }
.chart-bar-fill.cor-completo  { background: var(--verde); }
.chart-bar-fill.cor-pendente  { background: var(--vermelho); }
.chart-bar-value {
  font-size: 12px; font-weight: 700; color: var(--texto);
  width: 52px; flex-shrink: 0; text-align: right;
}

/* Donut chart (CSS puro) */
.chart-donut-wrap {
  display: flex; align-items: center; gap: 20px;
  position: relative;
}
.chart-donut {
  width: 90px; height: 90px; flex-shrink: 0;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(var(--verde) 0% var(--pct-ok), var(--vermelho) var(--pct-ok) var(--pct-total), var(--cinza-borda) var(--pct-total) 100%);
}
.chart-donut::after {
  content: '';
  position: absolute; inset: 18px;
  border-radius: 50%;
  background: var(--surface);
}
.chart-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 1;
}
.chart-donut-center .num { font-size: 20px; font-weight: 800; color: var(--texto); }
.chart-donut-center .lbl { font-size: 9px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.chart-donut-legend {
  display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.chart-legend-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--texto);
}
.chart-legend-dot {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.chart-legend-dot.cor-ok    { background: var(--verde); }
.chart-legend-dot.cor-pend  { background: var(--vermelho); }
.chart-legend-dot.cor-sem   { background: var(--ambar); }
.chart-legend-val { margin-left: auto; font-weight: 700; font-size: 12px; }

/* Cards de resumo numérico (KPIs) */
.chart-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}
.chart-kpi {
  text-align: center; padding: 10px 6px;
  background: var(--cinza-bg); border-radius: 8px;
}
.chart-kpi .val { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.chart-kpi .lbl { font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .3px; }
.chart-kpi.cor-azul .val   { color: var(--azul); }
.chart-kpi.cor-verde .val  { color: var(--verde); }
.chart-kpi.cor-vermelho .val { color: var(--vermelho); }
.chart-kpi.cor-ambar .val  { color: var(--ambar); }

/* Panorama Geral no Dashboard */
.panorama-section {
  display: flex; flex-direction: column; gap: 16px;
}
.panorama-kpis {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.panorama-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 768px) {
  .panorama-row { grid-template-columns: 1fr; }
}
.panorama-condicoes, .panorama-criterios, .panorama-indicadores {
  break-inside: avoid;
}

/* ══════════════════════════════════════════
   IMPRESSÃO / PDF
══════════════════════════════════════════ */
@media print {
  body { background: #fff !important; color: #17243D !important; font-family: Arial, sans-serif; }
  #tela-login   { display: none !important; }
  #tela-upload  { display: none !important; }
  #tela-inicial { display: none !important; }
  #tela-modulo  { display: flex !important; }
  .mod-topbar, .mod-sidebar, .table-toolbar, .pager, .btn-top, .btn-pdf, .mod-tabs, #consolidado-container, .modulo-charts { display: none !important; }
  #tip-box, .modal-overlay { display: none !important; }
  #table-container { display: flex !important; width: 100%; }
  .mod-body { display: block; }
  .mod-main { display:block !important; overflow: visible; padding: 0; background: #fff; }
  #table-container { display:block !important; flex:none !important; width:100%; }
  #table-container .table-scroll { flex:none !important; }
  .table-scroll { overflow: visible; height: auto; }

  /* Coluna de telefone não sai no PDF — libera espaço para as demais */
  .col-telefone { display: none !important; }

  /* A tabela precisa caber na largura da página impressa: sem isso os
     min-width/width fixos definidos para a tela (ex.: Nome a 320px)
     ultrapassam a página e o navegador corta as colunas excedentes
     em vez de encolhê-las. */
  #table-container table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 9.5px;
  }
  #table-container thead th, #table-container tbody td {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    white-space: normal !important;
    word-break: break-word;
    padding: 5px 6px;
  }
  #table-container td.nome-cell, #table-container th:first-child { width: 20% !important; }
  #table-container td.nome-cell strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  #table-container td.mono { overflow: visible !important; text-overflow: clip !important; }

  /* Os "pips" coloridos da pontuação repetem a mesma info das colunas
     A-F; no PDF eles só espremem a coluna e forçam a quebra do texto
     "pts". Mantém só o número. */
  #table-container .pip { display: none !important; }
  #table-container .score-bar { gap: 0; }
  #table-container .score-pts { margin-left: 0 !important; white-space: nowrap; }

  #table-container thead { display: table-header-group; }
  #table-container tbody tr { page-break-inside: avoid; }

  #table-container thead th { background: #245FE5 !important; color: #fff !important; }
  #table-container tbody tr:hover { background: none; }
  .print-header { display: block !important; }

  /* Padrão visual do PDF: grade com bordas em todas as células,
     zebra nas linhas e status em texto colorido (sem ícones). */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #table-container table { border-collapse: collapse !important; border: 1.2px solid #9FB8E8; }
  #table-container thead th, #table-container tbody td { border: 1px solid #C9D8F3 !important; vertical-align: middle; }
  #table-container thead th { text-align: center; font-size: 8px; }
  #table-container thead th, #table-container tbody td { font-size: 9.5px !important; }
  #table-container tbody tr:nth-child(even) td { background: #EFF5FF; }
  #table-container .badge-crit, #table-container .tag {
    display: block; width: 100%; padding: 2px 0; border-radius: 0;
    font-size: 8.5px; font-weight: 800; text-align: center; letter-spacing: .3px;
  }
  #table-container .badge-crit, #table-container .tag { background: none !important; }
  #table-container .badge-crit.ok, #table-container .tag.ok   { color: #087653 !important; }
  #table-container .badge-crit.no, #table-container .tag.pend { color: #B42332 !important; }
  #table-container .score-pts { font-weight: 800; font-size: 9.5px; }
  #tela-modulo.c5-print #table-container th:nth-child(2),
  #tela-modulo.c5-print #table-container td:nth-child(2) { width: 16% !important; white-space:nowrap !important; }
  #tela-modulo.c5-print #table-container th:nth-child(5), #tela-modulo.c5-print #table-container td:nth-child(5) { width: 9% !important; }
  #tela-modulo.c5-print #table-container th:nth-child(6), #tela-modulo.c5-print #table-container td:nth-child(6) { width: 5% !important; }
  #tela-modulo.c5-print #table-container th:nth-child(3),
  #tela-modulo.c5-print #table-container td:nth-child(3) { width: 5% !important; }
  #tela-modulo.c5-print #table-container th:nth-child(4), #tela-modulo.c5-print #table-container td:nth-child(4),
  #tela-modulo.c5-print #table-container th:nth-child(12), #tela-modulo.c5-print #table-container td:nth-child(12),
  #tela-modulo.c5-print #table-container th:nth-child(13), #tela-modulo.c5-print #table-container td:nth-child(13),
  #tela-modulo.c5-print #table-container th:nth-child(14), #tela-modulo.c5-print #table-container td:nth-child(14),
  #tela-modulo.c5-print #table-container th:nth-child(15), #tela-modulo.c5-print #table-container td:nth-child(15) { display: none !important; }

  .print-legenda { display:block !important; position:static !important; flex:none !important; clear:both; margin-top:14px; }
  .print-legenda-completa { break-before:page; page-break-before:always; }
  .print-legenda-tb tr { break-inside:avoid; page-break-inside:avoid; }
  .crit-header-resumo { min-width:0; max-width:none; margin-top:2px; color:#fff !important; font-size:7.5px; line-height:1.15; text-transform:uppercase; }
  .print-legenda-titulo { margin:0 0 6px; color:#10234A; font-size:10px; text-transform:uppercase; }
  .print-legenda:empty { display: none; }
  .print-legenda-tb { width: min(100%, 700px) !important; table-layout: auto !important; font-size: 10px; border-collapse: collapse; }
  .print-legenda-tb th, .print-legenda-tb td { text-align: left; border: 1px solid #D5DDE8; padding: 5px 7px; }
  .print-legenda-tb th { background: #245FE5 !important; color: #fff !important; text-transform:uppercase; }
  .print-legenda-tb td:first-child, .print-legenda-tb td:last-child { width: 60px !important; }
  .print-legenda-tb td:nth-child(2), .print-legenda-tb td:nth-child(3) { width: auto !important; }
  .print-header { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 0; }
  .print-brandline { display: flex; align-items: center; gap: 12px; min-height: 62px; margin-bottom: 7px; padding-bottom: 7px; color: #132344; border-bottom: 2px solid #245FE5; }
  .print-report-identity { display: flex; flex-direction: column; gap: 3px; }
  .print-report-identity strong { color: #10234A; font-size: 16px; letter-spacing: .2px; }
  .print-report-identity b { color: #245FE5; font-size: 8.5px; }
  .print-report-identity small { color: #52617A; font-size: 8px; }
  .print-issuer { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-left: auto; }
  .print-kode-logo { width: 150px; height: 43px; object-fit: contain; }
  .print-issuer span { color: #364867; font-size: 7px; font-weight: 700; text-align: right; }
  .print-header h2 { display: none; }
  .print-header p { margin: 0 0 8px; color: #24467F; font-size: 7.5px; font-weight: 700; text-align: right; }
  .print-filterline { display: flex; align-items: center; gap: 16px; min-height: 29px; margin: 8px 0; padding: 6px 10px; border: 1px solid #BFD1F3; border-radius: 6px; color: #34425B; font-size: 7.5px; background: #F7FAFF; }
  .print-filterline strong { color: #15223B; font-size: 7px; white-space: nowrap; }
  .print-filterline span { white-space: nowrap; }
  .print-filterline b { color: #15223B; }
  .print-header .print-stats { display: flex; gap: 8px; min-height: 27px; margin-top: 0; padding: 6px 10px; border: 1px solid #D7E3F8; border-radius: 6px; background: #fff; }
  .print-stat { display: flex; flex: 0 0 auto; gap: 5px; align-items: baseline; padding: 0; border: 0; background: transparent; }
  .print-stat small { color: #245FE5; font-size: 7.5px; font-weight: 700; }
  .print-stat strong { color: #25334A; font-size: 8px; }
  .print-stat em { color: #25334A; font-size: 8px; font-style: normal; font-weight: 500; }
  @page { size: A4 landscape; margin: 9mm; }
}
.print-legenda { display: none; }
@media print { .print-legenda { display:block !important; } }
.print-header {
  display: none;
  margin-bottom: 16px;
}
.print-header h2 { font-size: 16px; font-weight: 800; color: var(--azul-escuro); }
.print-header p  { font-size: 12px; color: var(--muted); margin-top: 2px; }
.print-header .print-stats {
  display: flex; gap: 24px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--cinza-borda);
}
.print-stats span { font-size: 11px; }
.print-stats strong { color: var(--azul-escuro); }
.print-brandline { display: none; }

/* ══════════════════════════════════════════
   KODE APS · ECOSYSTEM REFRESH
   Camada visual aplicada sem alterar a lógica dos relatórios.
══════════════════════════════════════════ */
:root {
  --azul:        #245FE5;
  --azul-escuro: #0B1730;
  --azul-mid:    #2E67EC;
  --azul-light:  #EDF3FF;
  --verde:       #0E9F75;
  --verde-bg:    #EAF9F3;
  --vermelho:    #D13C42;
  --vermelho-bg: #FFF0F1;
  --ambar:       #D58A00;
  --ambar-bg:    #FFF7DF;
  --cinza-bg:    #F4F7FB;
  --cinza-borda: #E1E7F0;
  --texto:       #0F1B33;
  --muted:       #65738A;
  --surface:     #FFFFFF;
  --r:           12px;
  --shadow-sm:   0 1px 2px rgba(15, 27, 51, .05);
  --shadow-md:   0 8px 24px rgba(15, 27, 51, .07);
  --shadow-lg:   0 18px 48px rgba(15, 27, 51, .14);
}

@media screen {
  body { background: var(--cinza-bg); color: var(--texto); }
  button, input, select { font: inherit; }
  button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid rgba(46, 103, 236, .25);
    outline-offset: 2px;
  }

  /* Marca KODE em CSS para manter o projeto estático e autocontido. */
  .kode-brand { display: flex; align-items: center; gap: 14px; }
  .kode-logo { display: block; object-fit: contain; }
  .login-logo { width: 232px; height: 78px; }
  .header-logo { width: 112px; height: 38px; flex: 0 0 auto; }
  .topbar-logo { width: 104px; height: 34px; flex: 0 0 auto; }
  .kode-brand-copy { display: flex; flex-direction: column; gap: 3px; }
  .kode-brand-copy strong { color: var(--azul-escuro); font-size: 23px; line-height: 1; letter-spacing: -.8px; }
  .kode-brand-copy small { color: #77849A; font-size: 9px; font-weight: 700; letter-spacing: 1.25px; text-transform: uppercase; }
  .kode-mark {
    position: relative; display: inline-block; flex: 0 0 auto;
    width: 54px; height: 44px;
  }
  .kode-mark i {
    position: absolute; display: block; width: 30px; height: 17px;
    border-radius: 4px;
    clip-path: polygon(0 50%, 42% 0, 100% 0, 55% 50%, 100% 100%, 42% 100%);
    transform: rotate(0deg);
  }
  .kode-mark i:nth-child(1) { left: 0; top: 13px; background: linear-gradient(135deg, #75C9FF, #276FF0); }
  .kode-mark i:nth-child(2) { left: 11px; top: 4px; background: linear-gradient(135deg, #2E8DFF, #1558E8); }
  .kode-mark i:nth-child(3) { left: 20px; top: 20px; background: linear-gradient(135deg, #1E64F0, #0A3FCC); }
  .kode-mark-sm { width: 42px; height: 36px; transform: scale(.78); transform-origin: left center; margin-right: -8px; }
  .kode-mark-xs { width: 34px; height: 30px; transform: scale(.63); transform-origin: left center; margin-right: -10px; }

  /* Login */
  #tela-login {
    position: relative; isolation: isolate; overflow: hidden;
    background: linear-gradient(118deg, #24438F 0 49%, #213F8C 49% 100%);
  }
  #tela-login::before {
    content: ''; position: absolute; z-index: -1; inset: -15% 39% -10% 53%;
    background: rgba(10, 48, 128, .23); transform: rotate(-12deg);
  }
  #tela-login .login-hero { padding: 44px 24px 18px; }
  #tela-login .login-hero::before { display: none; }
  #tela-login .login-card {
    max-width: 406px; padding: 40px 36px 32px;
    background: #fff; border: 0; border-radius: 16px;
    box-shadow: 0 24px 70px rgba(4, 24, 76, .25);
  }
  .login-brand { justify-content: center; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #EDF0F5; }
  .login-intro { margin-bottom: 24px; }
  #tela-login .login-eyebrow {
    margin: 0 0 12px; padding: 0; gap: 7px;
    color: #63728A; background: none; border: 0; letter-spacing: .75px;
  }
  #tela-login .login-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #2E67EC; }
  #tela-login .login-card h2 { color: var(--azul-escuro); font-size: 24px; margin-bottom: 7px; }
  #tela-login .login-intro p { color: #69768A; font-size: 13px; line-height: 1.55; }
  #tela-login .login-field { margin-bottom: 17px; }
  #tela-login .login-field label { color: #15223C; font-size: 11px; font-weight: 800; letter-spacing: .1px; text-transform: uppercase; }
  #tela-login .login-field input {
    height: 46px; padding: 0 14px; color: #17233B; background: #FBFCFE;
    border: 1px solid #C9D4E4; border-radius: 10px;
  }
  #tela-login .login-field input::placeholder { color: #9AA5B5; }
  #tela-login .login-field input:focus { border-color: #2E67EC; background: #fff; box-shadow: 0 0 0 3px rgba(46,103,236,.10); }
  #tela-login .login-erro { color: #C52F38; margin: -2px 0 9px; }
  #tela-login .login-btn {
    min-height: 50px; background: #2E67EC; border-radius: 10px;
    box-shadow: 0 9px 18px rgba(46,103,236,.22); transition: transform .15s, background .15s, box-shadow .15s;
  }
  #tela-login .login-btn:hover { opacity: 1; background: #2459D2; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(46,103,236,.28); }
  #tela-login .login-btn:disabled { cursor: wait; opacity: .7; transform: none; }
  .login-helper { margin: 22px 0 0 !important; padding-top: 18px; border-top: 1px solid #EDF0F5; color: #8894A6 !important; font-size: 10px !important; text-align: center; text-transform: uppercase; line-height: 1.5 !important; }
  #tela-login .home-footer { padding: 18px 32px 24px; display: flex; justify-content: center; gap: 28px; }
  #tela-login .home-footer p { color: rgba(255,255,255,.76); }

  /* Cabeçalhos compartilhados */
  .home-header, .mod-topbar {
    background: #fff; border-bottom: 1px solid var(--cinza-borda);
    box-shadow: 0 1px 0 rgba(15, 27, 51, .02);
  }
  .home-header { min-height: 66px; padding: 10px 28px; }
  .home-header-text h1 { color: var(--azul-escuro); font-size: 14px; }
  .home-header-text h1 span { color: var(--azul); }
  .home-header-text p { color: var(--muted); }
  .btn-sair {
    color: #43506A; background: #fff; border-color: #D4DCE8; padding: 8px 16px;
  }
  .btn-sair:hover { color: #14213B; background: #F5F7FB; }

  /* Importação */
  #tela-upload { min-height: 100vh; background: var(--cinza-bg); }
  .upload-hero {
    width: min(1400px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 56px;
    color: var(--texto); text-align: left;
  }
  .upload-hero::before { display: none; }
  .upload-hero .home-eyebrow {
    color: var(--azul); background: var(--azul-light); border: 1px solid #D9E6FF;
    margin-bottom: 14px; padding: 5px 11px; font-size: 10px;
  }
  .upload-hero .home-eyebrow span { color: var(--azul); }
  .upload-hero h2 { color: var(--azul-escuro); font-size: 32px; margin-bottom: 8px; }
  .upload-hero > p { color: var(--muted); max-width: 820px; margin-bottom: 30px; font-size: 14px; }
  .upload-hero > p strong { color: var(--texto); }
  .upload-section {
    margin-bottom: 18px; padding: 22px; background: #fff;
    border: 1px solid var(--cinza-borda); border-radius: 15px; box-shadow: var(--shadow-sm);
  }
  .upload-section-label { color: #7C899D; font-size: 10px; letter-spacing: 1px; margin-bottom: 14px; }
  .upload-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .upload-grid-single { grid-template-columns: minmax(280px, 520px); }
  .upload-box {
    min-height: 112px; padding: 18px; background: #FAFBFD;
    border: 1.5px dashed #C9D5E7; border-radius: 12px;
  }
  .upload-box:hover, .upload-box.dragover { background: #F2F6FF; border-color: var(--azul); transform: translateY(-1px); }
  .upload-box.loaded { background: var(--verde-bg); border-color: #8FD8BE; }
  .upload-box h4 { color: var(--texto); font-size: 13px; }
  .upload-box p { color: var(--muted); font-size: 11px; }
  .upload-box .status { color: var(--verde); }
  .upload-box-disabled { opacity: .56; background: #F4F6F9; }
  .btn-importar {
    min-height: 46px; padding: 0 24px; border-radius: 10px; background: var(--azul-mid);
    box-shadow: 0 8px 18px rgba(46,103,236,.19);
  }
  .btn-importar:hover:not(:disabled) { opacity: 1; background: #2459D2; }
  #tela-upload .home-footer { background: #fff; border-top: 1px solid var(--cinza-borda); }
  #tela-upload .home-footer p { color: #7A8799; }

  /* Estrutura principal e navegação */
  #tela-inicial, #tela-modulo { background: var(--cinza-bg); }
  .mod-topbar {
    position: relative; z-index: 20; flex: 0 0 66px; min-height: 66px; padding: 0 24px; color: var(--texto);
  }
  .topbar-brand { color: var(--azul-escuro); font-size: 13px; font-weight: 800; letter-spacing: -.2px; }
  .mod-topbar .topbar-sep { background: #DCE3EE; }
  .topbar-icon { background: var(--azul-light); color: var(--azul); border-radius: 9px; }
  .topbar-title span { color: var(--azul-escuro); font-size: 14px; }
  .topbar-title small { color: var(--muted); }
  .mod-topbar .btn-voltar { color: #4B5870; }
  .mod-topbar .btn-voltar:hover { color: var(--azul); background: var(--azul-light); }
  .mod-topbar .btn-top {
    color: #3D4B63; background: #fff; border-color: #D5DDE9; border-radius: 8px; min-height: 34px;
  }
  .mod-topbar .btn-toggle {
    gap: 9px; color: #33425D; background: #F5F7FB; border-color: #CAD4E3;
    font-weight: 700;
  }
  .mod-topbar .btn-toggle .toggle-track {
    width: 32px; height: 18px; flex: 0 0 32px; background: #9AA8BC;
    box-shadow: inset 0 0 0 1px rgba(15,27,51,.12);
  }
  .mod-topbar .btn-toggle .toggle-knob {
    top: 3px; left: 3px; width: 12px; height: 12px;
    background: #fff; box-shadow: 0 1px 3px rgba(15,27,51,.28);
  }
  .mod-topbar .btn-toggle[aria-pressed="true"] { color: #1646A8; background: #EDF3FF; border-color: #8EAEF4; }
  .mod-topbar .btn-toggle[aria-pressed="true"] .toggle-track { background: #2E67EC; }
  .mod-topbar .btn-toggle[aria-pressed="true"] .toggle-knob { left: 17px; }
  .mod-topbar .btn-outline:not(:disabled):hover { color: var(--azul); background: var(--azul-light); border-color: #BED1FA; }
  .mod-topbar .btn-pdf { color: #fff; background: #17243D; border-color: #17243D; }
  .mod-topbar .btn-pdf:not(:disabled):hover { background: #0C172C; }
  .mod-body { background: var(--cinza-bg); }
  .mod-sidebar {
    width: 255px; flex: 0 0 255px; padding: 18px 14px;
    color: #fff; background: linear-gradient(180deg, #294894 0%, #233D82 100%);
    border-right: 0; box-shadow: 8px 0 24px rgba(28, 56, 123, .08);
  }
  .sidebar-section { border-color: rgba(255,255,255,.11); padding: 8px 0 18px; }
  .sidebar-section:last-child p { color: rgba(255,255,255,.54) !important; padding: 0 9px; }
  #legenda-criterios,
  #legenda-criterios > div,
  #legenda-criterios span,
  #legenda-criterios strong { color: #fff !important; }
  #legenda-criterios .legenda-letra { color: #BFD3FF !important; }
  #legenda-criterios > div:last-child { border-color: rgba(255,255,255,.2) !important; }
  .sidebar-kicker, .sidebar-label {
    color: rgba(255,255,255,.78); font-size: 9px; font-weight: 800;
    letter-spacing: 1.35px; text-transform: uppercase; padding: 7px 10px 10px;
  }
  .app-nav { gap: 4px; }
  .app-nav-item {
    min-height: 42px; padding: 9px 11px; color: rgba(255,255,255,.78);
    border-radius: 9px; font-size: 12px; font-weight: 600;
  }
  .app-nav-item:hover { color: #fff; background: rgba(255,255,255,.09); }
  .app-nav-item.active { color: #fff; background: #2F67E8; box-shadow: 0 7px 16px rgba(12,37,100,.22); }
  .app-nav-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; color: inherit; font-size: 14px;
  }
  .fonte-item { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.68); }
  .fonte-item strong { color: #fff; }
  .mod-main { padding: 28px; background: var(--cinza-bg); }
  .dashboard-municipal { max-width: 1500px; margin: 0 auto; }

  /* Dashboard */
  .dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
  .page-eyebrow { color: var(--azul); font-size: 10px; font-weight: 800; letter-spacing: 1.25px; text-transform: uppercase; }
  .dashboard-heading h1 { margin-top: 5px; color: var(--azul-escuro); font-size: 27px; line-height: 1.2; letter-spacing: -.7px; }
  .dashboard-heading p { margin-top: 6px; color: var(--muted); font-size: 13px; }
  .dashboard-import {
    min-height: 42px; padding: 0 17px; color: #fff; background: var(--azul-mid);
    border: 0; border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer;
    box-shadow: 0 8px 18px rgba(46,103,236,.18);
  }
  .dashboard-import:hover { background: #2459D2; transform: translateY(-1px); }
  .dashboard-import span { margin-right: 5px; font-size: 16px; }
  .dash-disclaimer {
    align-items: flex-start; padding: 14px 16px; border-radius: 11px;
    background: #EBF3FF; border-color: #C5D9FC; color: #47617F;
  }
  .dash-disclaimer.info strong { color: #164EA9; }
  .info-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 19px; height: 19px; border-radius: 50%; color: #fff; background: var(--azul); font-size: 11px; font-weight: 800;
  }
  .dash-group { margin-bottom: 30px; }
  .dash-group-header { padding-bottom: 11px; border-bottom-color: #DDE4EE; }
  .dash-group-header h3 { color: var(--azul-escuro); font-size: 15px; }
  .indic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .indic-card {
    min-height: 190px; padding: 20px; border-color: #E1E7F0; border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15,27,51,.04); display: flex; flex-direction: column;
  }
  .indic-card.clickable:hover { transform: translateY(-3px); border-color: #B9CDF8; box-shadow: 0 14px 30px rgba(32,73,155,.10); }
  .indic-code { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 9px; color: var(--azul); background: var(--azul-light); border-radius: 8px; }
  .indic-name { color: var(--azul-escuro); font-size: 15px; margin-top: 10px; }
  .indic-desc { color: var(--muted); line-height: 1.5; }
  .indic-bar { margin-top: auto; }
  .indic-link { color: var(--azul); font-size: 10px; letter-spacing: .45px; text-transform: uppercase; }
  .indic-tag { font-size: 8px; letter-spacing: .5px; }
  .cvat-card, .chart-card, .panorama-section {
    border-color: #E1E7F0; border-radius: 14px; box-shadow: 0 2px 8px rgba(15,27,51,.04);
  }
  .panorama-section { padding: 18px; background: #fff; }
  .panorama-kpis { padding-bottom: 18px; border-bottom: 1px solid #E7EBF2; }
  .panorama-row {
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
    gap: 18px;
    align-items: stretch;
  }
  .panorama-condicoes { min-height: 184px; padding: 19px 21px; }
  .panorama-condicoes .chart-donut-wrap { gap: 19px; }
  .panorama-condicoes .chart-donut { width: 86px; height: 86px; }
  .panorama-condicoes .chart-donut::after { inset: 17px; }
  .panorama-condicoes .chart-donut-center .num { font-size: 19px; }
  .panorama-condicoes .chart-legend-item { font-size: 11.5px; }
  .panorama-condicoes .chart-legend-val { font-size: 11.5px; }
  .panorama-condicoes .chart-card-title { color: #40516C; }
  .panorama-condicoes .chart-donut-wrap { gap: 14px; }
  .panorama-condicoes .chart-donut { width: 72px; height: 72px; }
  .panorama-condicoes .chart-donut::after { inset: 14px; }
  .panorama-condicoes .chart-donut-center .num { font-size: 17px; }
  .panorama-condicoes .chart-legend-item { gap: 6px; font-size: 10.5px; }
  .panorama-condicoes .chart-legend-val { font-size: 10.5px; }
  .panorama-criterios { padding: 18px 20px; }
  .panorama-criterios .chart-bar-label {
    width: 210px; white-space: normal; overflow: visible;
    text-overflow: clip; line-height: 1.3;
  }
  .panorama-criterios .chart-bar-label { color: #17243D; }
  .panorama-criterios .chart-bar-row { gap: 12px; }
  .panorama-criterios .chart-bar-track { height: 18px; }
  .chart-kpi { border-radius: 10px; }
  .chart-kpi .val { font-size: 24px; }
  .chart-card-title { color: #536079; font-size: 10px; letter-spacing: .65px; text-transform: uppercase; }
  .chart-bar-track { background: #EFF2F7; }
  .chart-donut { box-shadow: inset 0 0 0 1px rgba(15,27,51,.04); }

  /* Módulos, filtros e tabelas */
  .modulo-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .table-toolbar, .mod-tabs, .table-scroll, #consolidado-container {
    background: #fff; border-color: var(--cinza-borda);
  }
  .table-toolbar { border-radius: 12px 12px 0 0; box-shadow: var(--shadow-sm); }
  .search-box, .toolbar-select, .toolbar-btn { background: #FAFBFD; border-color: #D8E0EB; }
  .toolbar-select { color: #34415A; }
  .mod-tabs { padding: 0 18px; }
  .tab-btn.active { color: var(--azul); border-bottom-color: var(--azul); }
  .stat-mini { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); }
  .stat-mini-label, .stat-mini-sub { color: rgba(255,255,255,.58); }
  .stat-mini:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
  .stat-mini.active-filter { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
  .stat-mini.cor-total .stat-mini-val, .stat-mini.cor-sem .stat-mini-val,
  .stat-mini.cor-ok .stat-mini-val, .stat-mini.cor-pend .stat-mini-val { color: #fff; }

  /* Modais */
  .modal-overlay { background: rgba(6, 17, 40, .62); backdrop-filter: blur(4px); }
  .modal-painel { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--shadow-lg); }
  .modal-header { padding: 24px 26px 18px; background: #fff; border-bottom: 1px solid var(--cinza-borda); }
  .modal-header h3 { color: var(--azul-escuro); }
  .modal-header p { color: var(--muted); }
  .modal-header p strong { color: var(--texto); }
  .modal-fechar { color: #6C788C; }
  .modal-fechar:hover { color: var(--texto); background: #F0F3F7; }
  .modal-corpo { padding: 20px 26px 6px; }
  .modal-rodape { gap: 10px; }
  .modal-painel .btn-outline { color: #46536A; background: #fff; border: 1px solid #D5DDE8; border-radius: 9px; }
  .modal-painel .btn-outline:hover { color: var(--azul); background: var(--azul-light); }
  #input-nome-equipe {
    color: var(--texto) !important; background: #FAFBFD !important; border-color: #CFD8E6 !important;
  }
  .equipe-chip {
    display: inline-flex; padding: 7px 10px; color: #2455B8; background: #EDF3FF;
    border: 1px solid #CBDBFB; border-radius: 999px; font-size: 11px; font-weight: 700; cursor: pointer;
  }
  .equipe-chip:hover { background: #DCE8FF; }
}

@media screen and (max-width: 1180px) {
  .indic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modulo-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod-sidebar { width: 226px; flex-basis: 226px; }
  .upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 860px) {
  .mod-topbar { padding: 0 14px; }
  .topbar-brand, .mod-topbar > .kode-mark, .mod-topbar > .topbar-logo, .mod-topbar > .topbar-sep { display: none; }
  .topbar-actions { gap: 5px; }
  .mod-body { display: block; overflow: visible; }
  .mod-sidebar {
    position: relative; width: 100%; height: auto; min-height: 0; padding: 10px 12px;
    display: block; box-shadow: none;
  }
  .mod-sidebar .sidebar-section { padding: 0; }
  .mod-sidebar .sidebar-section:last-child, .sidebar-kicker { display: none; }
  .app-nav { flex-direction: row; overflow-x: auto; padding-bottom: 2px; }
  .app-nav-item { flex: 0 0 auto; min-height: 36px; }
  .mod-main { min-height: calc(100vh - 116px); padding: 22px 18px; overflow: visible; }
  .panorama-row { grid-template-columns: 1fr; }
  .panorama-criterios .chart-bar-label { width: min(190px, 42vw); }
  .dashboard-heading { align-items: flex-start; }
  .upload-hero { width: min(100% - 32px, 1400px); }
}

@media screen and (max-width: 640px) {
  #tela-login .login-hero { align-items: flex-start; padding: 24px 16px 10px; }
  #tela-login .login-card { max-width: 100%; padding: 30px 24px 26px; }
  #tela-login .home-footer { padding: 16px; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
  .home-header { padding: 9px 16px; }
  .upload-hero { width: calc(100% - 24px); padding-top: 26px; }
  .upload-hero h2 { font-size: 26px; }
  .upload-section { padding: 16px; }
  .upload-grid, .upload-grid-single, .indic-grid, .modulo-charts { grid-template-columns: 1fr; }
  .dashboard-heading { display: block; }
  .dashboard-import { width: 100%; margin-top: 16px; }
  .dashboard-heading h1 { font-size: 23px; }
  .mod-main { padding: 18px 12px; }
  .topbar-title { min-width: 0; flex: 1 1 auto; }
  .topbar-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-title small { display: none; }
  #tela-modulo .mod-topbar { min-height: 104px; padding: 9px 12px; flex-wrap: wrap; align-content: center; }
  #tela-modulo .mod-topbar .topbar-icon { display: none; }
  #tela-modulo .topbar-actions {
    order: 5; width: 100%; margin-left: 0; padding-top: 7px;
    border-top: 1px solid var(--cinza-borda); overflow-x: auto;
  }
  .mod-topbar .btn-top { flex: 0 0 auto; padding: 6px 9px; font-size: 10px; }
  .mod-topbar .btn-toggle, .mod-topbar .btn-privacidade { display: none; }
  .table-toolbar { align-items: stretch; }
  .search-box, .toolbar-select, .toolbar-btn { width: 100%; }
  .count-label { width: 100%; margin-left: 0; }
  .panorama-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-donut-wrap { align-items: flex-start; }
}