/* Tokens (paleta categórica validada; claro e escuro). */
:root {
  color-scheme: light;
  --bg: #f3f3f0; --surface-1: #fcfcfb; --surface-2: #f0efec; --borda: #dcdbd5; --grade: #e6e5e0;
  --txt: #0b0b0b; --txt-2: #52514e; --txt-3: #75746f;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  --seq: #2a78d6; --seq-claro: #cde2fb;
  --alerta-bg: #fff4d6; --alerta-txt: #6b4a00; --erro-bg: #fde7e7; --erro-txt: #8a1c1c; --ok: #0a7a3d; --info-bg: #e6f0fc;
  --foco: #2a78d6; --lateral-bg: #17202b; --lateral-txt: #dfe6ee; --lateral-sel: #25364a;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #121211; --surface-1: #1a1a19; --surface-2: #262624; --borda: #3a3a37; --grade: #2d2d2b;
    --txt: #fff; --txt-2: #c3c2b7; --txt-3: #9c9b92;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --seq: #3987e5; --seq-claro: #184f95;
    --alerta-bg: #3a2e0a; --alerta-txt: #f3d58a; --erro-bg: #3b1a1a; --erro-txt: #f3b0b0; --ok: #4cc27e; --info-bg: #1c2b40; --foco: #6da7ec;
    --lateral-bg: #0d1218; --lateral-sel: #1c2a3a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211; --surface-1: #1a1a19; --surface-2: #262624; --borda: #3a3a37; --grade: #2d2d2b;
  --txt: #fff; --txt-2: #c3c2b7; --txt-3: #9c9b92;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --seq: #3987e5; --seq-claro: #184f95;
  --alerta-bg: #3a2e0a; --alerta-txt: #f3d58a; --erro-bg: #3b1a1a; --erro-txt: #f3b0b0; --ok: #4cc27e; --info-bg: #1c2b40; --foco: #6da7ec;
  --lateral-bg: #0d1218; --lateral-sel: #1c2a3a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface-1); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

.faixa-demo { background: var(--alerta-bg); color: var(--alerta-txt); padding: 7px 16px; font-size: 13px; border-bottom: 1px solid var(--borda); text-align: center; position: sticky; top: 0; z-index: 30; }

/* layout */
.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .32s cubic-bezier(.22, .8, .25, 1); }
.app.lateral-recolhida { grid-template-columns: 58px minmax(0, 1fr); }
.lateral { background: var(--lateral-bg); color: var(--lateral-txt); padding: 14px 10px; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.app.lateral-recolhida .lateral { padding-left: 6px; padding-right: 6px; overflow: visible; }
/* Menu "sanfona": recolhe/expande a barra lateral inteira (ver #btn-recolher em main.js); sem ícone por item,
   o estado recolhido mostra uma sigla de 2 letras no lugar do texto (ver sigla() em desenharMenu()). */
.lateral-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 2px 14px; }
.app.lateral-recolhida .lateral-cab { justify-content: center; padding-right: 0; }
.marca { display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 6px; font-size: 17px; min-width: 0; overflow: hidden; }
.selo-fonte { font-size: 10px; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.selo-fonte.demo { color: #f3d58a; }
.selo-fonte.real { color: #7be0a6; }
.lateral-toggle { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: var(--lateral-txt); cursor: pointer; transition: background .2s, border-color .2s; }
.lateral-toggle:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); }
.lateral-toggle svg { display: block; transition: transform .32s cubic-bezier(.22, .8, .25, 1); }
.app.lateral-recolhida .lateral-toggle svg { transform: rotate(180deg); }
.app.lateral-recolhida .marca strong, .app.lateral-recolhida .marca .selo-fonte,
.app.lateral-recolhida .chave-carnaval, .app.lateral-recolhida .menu .grupo,
.app.lateral-recolhida .menu a .rotulo, .app.lateral-recolhida .menu a .n,
.app.lateral-recolhida .lateral-rodape { display: none; }
.app.lateral-recolhida .menu a { justify-content: center; padding: 8px 2px; gap: 0; }
.app.lateral-recolhida .menu a .sigla { display: flex; }
/* Chave Carnaval/Todos: switch neumórfico de duas zonas, baseado em uiverse.io/williamvdm/fluffy-dog-42
   (mesma mecânica: trilho com duas metades coloridas + botão deslizante), com tamanho e cores adaptados à
   barra lateral. Filtra a lista de módulos (ver desenharMenu()/atualizarChaveCarnaval() em main.js);
   marcado (padrão) = "Todos" à direita acesa; desmarcado = "Carnaval" à esquerda acesa. */
.chave-carnaval { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 2px 14px; }
.chave-rotulo { font-size: 10px; font-weight: 750; letter-spacing: .03em; color: var(--lateral-txt); opacity: .5; white-space: nowrap; cursor: pointer; transition: opacity .25s, color .25s, text-shadow .25s; }
.chave-rotulo-esq.ativo { opacity: 1; color: #ffb268; text-shadow: 0 0 10px rgba(255, 149, 46, .45); }
.chave-rotulo-dir.ativo { opacity: 1; color: #bcd6f5; text-shadow: 0 0 10px rgba(130, 180, 240, .4); }
.chave-input { display: none; }
/* Versão da chave dentro das páginas (Ouvidoria e Monitoramento): "pílula" escura própria, para o brilho/sombra da chave
   funcionar também sobre fundo claro. */
.chave-pagina { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 12px; background: #142033; flex: none; }
.chave-pagina .chave-rotulo:not(.ativo) { color: #cfe0f5; }
.mon-controls-line .chave-pagina { margin-left: auto; }
@media print { .chave-pagina { display: none !important; } }
.chave-switch {
  --hue: 213deg; --accent-hue: 28deg; --width: 3.5rem; --duration: .45s; --easing: cubic-bezier(.2, .8, .2, 1);
  position: relative; cursor: pointer; display: flex; align-items: center; flex: none;
  width: var(--width); height: calc(var(--width) / 2.4); border-radius: var(--width);
  box-shadow: inset 2px 2px 3px hsl(var(--hue) 35% 8%), inset -2px -2px 3px hsl(var(--hue) 30% 26%);
}
.chave-indicador {
  position: absolute; width: 40%; height: 58%; transition: box-shadow var(--duration) var(--easing);
  box-shadow: inset 0 0 1.5px hsl(var(--hue) 20% 4% / 65%), inset 0 0 2px 1px hsl(var(--hue) 20% 4% / 65%), inset 0 0 3px 1px hsl(var(--hue) 20% 34% / 65%);
}
.chave-esq {
  --hue: var(--accent-hue); left: 9%; overflow: hidden; border-radius: 100px 0 0 100px;
  background: linear-gradient(180deg, hsl(calc(var(--accent-hue) + 20deg) 95% 68%) 10%, hsl(calc(var(--accent-hue) + 20deg) 100% 54%) 30%, hsl(var(--accent-hue) 90% 46%) 60%, hsl(var(--accent-hue) 90% 54%) 75%, hsl(var(--accent-hue) 90% 46%));
}
.chave-dir {
  right: 9%; border-radius: 0 100px 100px 0;
  background-image: linear-gradient(180deg, hsl(var(--hue) 35% 58%), hsl(var(--hue) 35% 24%) 60%, hsl(var(--hue) 35% 29%) 70%, hsl(var(--hue) 35% 24%));
}
.chave-botao {
  position: absolute; z-index: 1; width: 54%; height: 78%; left: 5%; border-radius: 100px;
  background-image: linear-gradient(160deg, #fdfefe 40%, #c7d7ea 75%);
  transition: left var(--duration) var(--easing);
  box-shadow: 1px 1px 1.5px rgba(0, 0, 0, .55), 1px 1px 3px rgba(0, 0, 0, .3), 2.5px 5px 3px rgba(0, 0, 0, .25), 4px 7px 6px rgba(0, 0, 0, .32);
}
.chave-input:checked ~ .chave-botao { left: 41%; }
.chave-input:not(:checked) ~ .chave-esq,
.chave-input:checked ~ .chave-dir {
  box-shadow: inset 0 0 3px hsl(var(--hue) 20% 4% / 100%), inset 4px 4px 3px hsl(var(--hue) 20% 4% / 100%), inset 4px 4px 4px hsl(var(--hue) 20% 34% / 100%);
}
.menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu a { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-size: 14px; color: var(--lateral-txt); }
.menu a:hover { background: var(--lateral-sel); }
.menu a[aria-current="page"] { background: var(--lateral-sel); font-weight: 600; box-shadow: inset 3px 0 0 var(--s1); }
.menu a .rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu a .sigla { display: none; flex: none; width: 27px; height: 27px; border-radius: 8px; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; background: rgba(255, 255, 255, .08); }
.menu a[aria-current="page"] .sigla { background: var(--s1); color: #fff; }
.menu .grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; padding: 12px 10px 4px; }
.menu .n { font-size: 11px; opacity: .6; }
.lateral-rodape { font-size: 12px; opacity: .85; padding: 10px 8px 2px; border-top: 1px solid rgba(255,255,255,.12); margin-top: 10px; }
.lateral-rodape button { margin-top: 6px; }

.principal { min-width: 0; }
.topo { display: flex; align-items: center; gap: 10px; padding: 14px 20px 6px; max-width: 1500px; margin: 0 auto; }
.topo h1 { margin: 0; font-size: 20px; letter-spacing: -.01em; flex: 1; }
.topo-acoes { display: flex; gap: 8px; }
.menu-toggle { display: none; }

.btn { border: 1px solid var(--borda); background: var(--surface-1); color: var(--txt); padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; min-height: 32px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: var(--surface-2); }
.btn-icone { width: 36px; padding: 0; justify-content: center; }
.btn-primario { background: var(--seq); color: #fff; border-color: transparent; }
.btn-primario:hover { filter: brightness(1.08); background: var(--seq); }
.btn-mini { font-size: 12px; padding: 2px 8px; min-height: 26px; border-radius: 6px; }
.btn:disabled { opacity: .5; cursor: default; }

/* filtros */
.filtros { max-width: 1500px; margin: 0 auto; padding: 6px 20px 8px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
/* Variante "cartão" com cabeçalho de ícone (só a página Mapa · Carnaval usa, ver montarFiltros em filtros.js);
   as demais páginas continuam com a barra simples de sempre. */
.filtros.filtros-card { background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--borda) 65%); border-radius: 14px; padding: 16px 18px 14px; margin: 10px auto 14px; box-shadow: 0 6px 18px color-mix(in srgb, var(--ok) 8%, transparent); }
.filtros.filtros-card .secao-cab { margin-bottom: 4px; }
.fg { display: flex; flex-direction: column; gap: 3px; position: relative; }
.fg > label, .fg > .rot { font-size: 11px; color: var(--txt-2); text-transform: uppercase; letter-spacing: .04em; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: var(--surface-1); }
.seg button { border: 0; border-right: 1px solid var(--borda); background: transparent; color: var(--txt-2); padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; min-height: 32px; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--seq); color: #fff; }
select, input[type="date"], input[type="search"], input[type="text"], input[type="password"] { border: 1px solid var(--borda); background: var(--surface-1); color: var(--txt); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; min-height: 32px; }
.ms-btn { min-width: 150px; justify-content: space-between; }
.ms-painel { position: absolute; top: 100%; left: 0; z-index: 25; width: 280px; max-height: 320px; overflow: auto; background: var(--surface-1); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); padding: 8px; margin-top: 4px; }
.ms-painel input[type="search"] { width: 100%; margin-bottom: 6px; }
.ms-painel label { display: flex; gap: 8px; align-items: center; padding: 4px 4px; font-size: 13px; cursor: pointer; }
.ms-acoes { display: flex; justify-content: space-between; margin-bottom: 6px; }

main { max-width: 1500px; margin: 0 auto; padding: 4px 20px 30px; }
.rodape { max-width: 1500px; margin: 0 auto; padding: 0 20px 30px; color: var(--txt-3); font-size: 12px; }

/* widgets */
.secao-titulo { margin: 22px 0 8px; font-size: 15px; font-weight: 650; color: var(--txt); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.w { grid-column: span 12; min-width: 0; }
.w-1 { grid-column: span 1; } .w-2 { grid-column: span 2; } .w-3 { grid-column: span 3; } .w-4 { grid-column: span 4; }
.w-5 { grid-column: span 5; } .w-6 { grid-column: span 6; } .w-7 { grid-column: span 7; } .w-8 { grid-column: span 8; }
.w-9 { grid-column: span 9; } .w-10 { grid-column: span 10; } .w-11 { grid-column: span 11; } .w-12 { grid-column: span 12; }
@media (max-width: 1100px) { .w-3 { grid-column: span 6; } .w-4, .w-5, .w-7, .w-8, .w-9 { grid-column: span 12; } }
@media (max-width: 640px) { .grid12 > .w { grid-column: span 12; } }

/* "Masonry" por colunas CSS (ex.: seções extras da página ASCOM): cartões de altura muito desigual (um KPI de
   1 linha ao lado de um ranking de 15 barras) empacotam sem a sobra de espaço do grid12 normal (que força a
   mesma altura de linha pros dois). grid-column/.w-N não se aplicam aqui (não é display:grid): cada cartão
   ocupa a largura cheia da sua coluna. */
.masonry { columns: 3 300px; column-gap: 12px; margin-bottom: 12px; }
.masonry > .w { display: block; width: 100%; break-inside: avoid; margin-bottom: 12px; }
@media (max-width: 1100px) { .masonry { columns: 2 260px; } }
@media (max-width: 640px) { .masonry { columns: 1; } }

.card { background: var(--surface-1); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; height: 100%; transition: box-shadow .3s ease, border-color .3s ease; }
.card.clicavel { cursor: pointer; }
.card.destaque-foco { border-color: var(--s1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s1) 35%, transparent); }
.card-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.card h3 { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.card .sub { color: var(--txt-3); font-size: 11.5px; margin-top: 1px; }
.card-acoes { display: flex; gap: 4px; flex-shrink: 0; position: relative; }
.card-corpo { flex: 1; min-height: 70px; }
.chip { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--borda); color: var(--txt-2); white-space: nowrap; }
.chip.est { color: var(--ok); border-color: var(--ok); }
.chip-contagem { display: inline-block; margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); white-space: nowrap; }

/* Cabeçalho de seção com ícone em distintivo colorido (ex.: página Mapa · Carnaval): ícone + título + subtítulo opcional. */
.secao-cab { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.secao-cab h3 { margin: 0; font-size: 15px; font-weight: 650; color: var(--txt); }
.secao-cab .sub { margin: 2px 0 0; font-size: 12px; color: var(--txt-3); }
.secao-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.secao-ico-verde { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.secao-ico-azul { background: color-mix(in srgb, var(--s1) 16%, transparent); color: var(--s1); }
.chip.dep { color: var(--alerta-txt); background: var(--alerta-bg); border-color: transparent; }
.chip.inv { color: var(--erro-txt); background: var(--erro-bg); border-color: transparent; }
.chip.demo { color: var(--alerta-txt); background: var(--alerta-bg); border-color: transparent; }

.kpi-val { font-size: 32px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-un { font-size: 12px; color: var(--txt-2); margin-left: 4px; font-weight: 400; }
.kpi-var { margin-top: 6px; font-size: 12px; color: var(--txt-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kpi-var b { font-variant-numeric: tabular-nums; }
.kpi-ant { color: var(--txt-3); }

/* Cards da página ASCOM · Carnaval: faixa verde no topo com as 2 linhas de cabeçalho dentro dela, corpo em
   "vidro" (translúcido + blur) com só o valor embaixo. Escopado a #ascom-cards para não afetar os cards de
   indicador do resto do app. Vermelho só no card com erro (sem dado); os demais são todos verdes. */
#ascom-cards .ascom-card {
  padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--borda) 60%);
  background: color-mix(in srgb, var(--surface-1) 65%, transparent);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ok) 16%, transparent), 0 1px 2px rgba(0, 0, 0, .08);
}
#ascom-cards .ascom-card-erro { border-color: color-mix(in srgb, var(--erro-txt) 45%, var(--borda) 55%); box-shadow: 0 10px 26px color-mix(in srgb, var(--erro-txt) 16%, transparent), 0 1px 2px rgba(0, 0, 0, .08); }
#ascom-cards .ascom-faixa {
  position: relative; overflow: hidden; padding: 10px 14px; margin-bottom: 12px;
  background: linear-gradient(135deg, #1fa15a, #0e6b3a);
}
#ascom-cards .ascom-card-erro .ascom-faixa { background: linear-gradient(135deg, #d4615a, #9c2f2a); }
#ascom-cards .ascom-faixa::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 45%);
}
#ascom-cards .ascom-faixa h3, #ascom-cards .ascom-faixa .sub { position: relative; color: #fff; }
#ascom-cards .ascom-faixa h3 { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
#ascom-cards .ascom-faixa .sub { color: rgba(255, 255, 255, .85); }
#ascom-cards .ascom-card .card-corpo { padding: 0 14px 12px; min-height: 44px; }

.chart-box { position: relative; height: 250px; }
.barras { display: grid; gap: 7px; }
.barra { display: grid; grid-template-columns: minmax(80px, 36%) 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; }
.barra.clic { cursor: pointer; border-radius: 6px; padding: 1px 2px; }
.barra.clic:hover { background: var(--surface-2); }
.barra .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra .trilho { background: var(--surface-2); border-radius: 4px; height: 11px; overflow: hidden; }
.barra .preench { background: var(--seq); height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.barra .num { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3ch; text-align: right; }
.funil { display: grid; gap: 6px; }
.funil .etapa { position: relative; background: var(--surface-2); border-radius: 6px; height: 30px; overflow: hidden; }
.funil .etapa i { position: absolute; inset: 0 auto 0 0; background: var(--seq); opacity: .85; }
.funil .etapa span { position: relative; display: flex; justify-content: space-between; padding: 6px 10px; font-size: 12.5px; color: var(--txt); mix-blend-mode: normal; }
.vazio, .erro-w, .inviavel-w { color: var(--txt-2); font-size: 13px; padding: 10px 2px; }
.inviavel-w { background: var(--erro-bg); color: var(--erro-txt); border-radius: 8px; padding: 10px; }
.erro-w { color: var(--erro-txt); }
.sk { background: linear-gradient(90deg, var(--surface-2), var(--grade), var(--surface-2)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 6px; height: 14px; margin: 8px 0; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

table.tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tab th, table.tab td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--grade); vertical-align: top; }
table.tab th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--txt-2); font-weight: 600; position: sticky; top: 0; background: var(--surface-1); cursor: pointer; white-space: nowrap; }
table.tab td.n, table.tab th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.tab tr.clic { cursor: pointer; }
table.tab tr.clic:hover td { background: var(--surface-2); }
.tab-wrap { overflow: auto; max-height: 440px; border: 1px solid var(--grade); border-radius: 8px; }
.tab-barra { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.tab-barra .esp { flex: 1; }
.pag { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--txt-2); }

.alertas { display: grid; gap: 6px; margin: 10px 0; }
.alerta { padding: 8px 12px; border-radius: 8px; font-size: 13px; background: var(--info-bg); border-left: 4px solid var(--s1); }
.alerta.atencao { background: var(--alerta-bg); color: var(--alerta-txt); border-left-color: var(--s4); }
.alerta.critico { background: var(--erro-bg); color: var(--erro-txt); border-left-color: var(--s8); }
.aviso { background: var(--alerta-bg); color: var(--alerta-txt); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 8px 0; }
.erro { color: var(--erro-txt); font-size: 13px; }
.lead { color: var(--txt-2); font-size: 13px; margin: 2px 0 8px; max-width: 90ch; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1200; /* acima do botão "Perguntar" (1100) */ display: flex; align-items: flex-start; justify-content: center; padding: 4vh 12px; overflow: auto; }
.modal-caixa { background: var(--surface-1); border: 1px solid var(--borda); border-radius: 14px; width: min(1100px, 100%); }
.modal-cab { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--grade); }
.modal-cab h2 { margin: 0; font-size: 16px; }
.modal-corpo { padding: 14px 16px 18px; }
.meto dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--txt-2); margin-top: 12px; }
.meto dd { margin: 2px 0 0; font-size: 13.5px; }
.meto code, pre.sql { background: var(--surface-2); border-radius: 6px; padding: 1px 5px; font-size: 12px; }
pre.sql { padding: 10px; overflow: auto; max-height: 300px; white-space: pre-wrap; }
.meto ul { margin: 4px 0 0; padding-left: 18px; }

/* ============================================================ login (tela de acesso) ============================================================
   Tema visual próprio (escuro, cubo 3D animado), isolado do tema claro/escuro do resto do app: todo seletor que no
   design original era global (:root, body, *) aqui está escopado em #login, para nunca vazar para o dashboard. */
#login { --ink:#eef5ff; --muted:#9badc7; --cyan:#4ce0ff; --blue:#4387ff; --violet:#8b74ff; --border:rgba(124,175,249,.23); --glass:rgba(10,27,58,.76); --active:#52dfff; }
#login:not([hidden]) {
  display: block;
  color-scheme: dark; color: var(--ink); font-family: Inter, "Segoe UI", Arial, sans-serif;
  min-width: 320px; min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(ellipse 70% 64% at 60% 17%, #10275b 0%, transparent 72%), radial-gradient(ellipse 65% 55% at 90% 90%, #091f43 0, transparent 68%), #040a1a;
  overflow-x: hidden;
}
#login *, #login *:before, #login *:after { box-sizing: border-box; }
#login button, #login input { font: inherit; }
#login button { cursor: pointer; }
.login-shell { position: relative; isolation: isolate; min-height: 930px; max-width: 1680px; width: calc(100% - 64px); margin: 28px auto; border-radius: 32px; border: 1px solid rgba(112,166,255,.36); background: linear-gradient(112deg, rgba(7,17,41,.98) 0%, rgba(5,16,39,.88) 48%, rgba(5,13,32,.98) 100%); box-shadow: 0 28px 100px #010514, 0 0 0 9px rgba(20,48,103,.06), inset 0 1px rgba(200,233,255,.12); overflow: hidden; }
.login-shell:before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 43% 38% at 67% 51%, rgba(39,96,208,.20), transparent 88%), radial-gradient(ellipse 30% 30% at 80% 44%, rgba(89,42,174,.17), transparent 93%); }
.login-shell .noise { pointer-events: none; position: absolute; inset: 0; opacity: .21; background-image: radial-gradient(rgba(142,205,255,.35) .6px, transparent .9px); background-size: 23px 23px; mask-image: linear-gradient(to right, transparent 20%, black 100%); }
.login-shell .topbar { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 34px 44px 10px; gap: 20px; }
.login-shell .brand { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.login-shell .brand-symbol { width: 53px; height: 53px; filter: drop-shadow(0 0 13px rgba(63,173,255,.36)); flex-shrink: 0; }
.login-shell .brand-name { font-size: 30px; font-weight: 850; letter-spacing: -1.7px; line-height: 1; }
.login-shell .brand-name span { background: linear-gradient(100deg, #a2f9ff, #4bc9ff); background-clip: text; -webkit-background-clip: text; color: transparent; }
.login-shell .brand-sub { font-size: 10px; line-height: 1.35; letter-spacing: 1.5px; color: #a0b4d3; margin-top: 7px; text-transform: uppercase; display: block; }
.login-shell .page-content { position: relative; min-height: 795px; }
.login-shell .hero-copy { position: absolute; z-index: 8; top: 30px; left: 5.5%; max-width: 440px; }
.login-shell .eyebrow { font-size: 11px; letter-spacing: 5px; font-weight: 700; color: #69c8ee; }
.login-shell .hero-copy h1 { font-weight: 800; font-size: clamp(36px,3.1vw,46px); letter-spacing: -1.7px; line-height: 1.09; margin: 19px 0 16px; }
.login-shell .hero-copy h1 span { background: linear-gradient(95deg, #44e4f8, #508cff); background-clip: text; -webkit-background-clip: text; color: transparent; }
.login-shell .hero-copy p { color: #b6c6dd; font-size: 14px; line-height: 1.65; margin: 0; max-width: 375px; }
/* Cartão de login flutuante, integrado à cena (não é um split convencional). */
.login-shell .login-card { position: relative; z-index: 18; width: min(305px,88%); margin-left: 5.1%; top: 315px; padding: 22px 26px 20px; border: 1px solid rgba(113,177,255,.48); border-radius: 22px; background: linear-gradient(152deg, rgba(20,43,84,.90), rgba(6,20,46,.95) 75%); box-shadow: 0 18px 60px rgba(0,4,19,.45), inset 0 1px rgba(255,255,255,.09), 0 0 45px rgba(55,111,204,.08); backdrop-filter: blur(18px); }
.login-shell .login-card:before { content: ""; height: 90px; width: 80%; position: absolute; z-index: -1; top: -34px; left: 28px; border-radius: 100%; background: rgba(45,106,223,.16); filter: blur(35px); }
.login-shell .login-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login-shell .lock-badge { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(72,200,255,.65); border-radius: 12px; background: rgba(32,96,168,.20); color: #62e3ff; box-shadow: inset 0 0 15px rgba(54,168,245,.12), 0 0 19px rgba(14,142,252,.15); flex: none; }
.login-shell .login-heading h2 { font-size: 20px; letter-spacing: -.4px; margin: 0 0 4px; }
.login-shell .login-heading p { font-size: 11.5px; color: #aebfda; line-height: 1.4; margin: 0; }
.login-shell .field-row { margin-bottom: 21px; }
.login-shell .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Geometria vetorial do campo biselado: as três faces compartilham as mesmas coordenadas (sem skew nem bordas soltas). */
.login-shell .cube-input { --bevel: 11px; position: relative; width: 100%; height: 63px; isolation: isolate; }
.login-shell .cube-input .cube-geometry { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 8px rgba(42,174,255,.17)); transition: filter .25s; }
.login-shell .cube-geometry .top-face { stroke: #7edaff; stroke-width: 1; stroke-linejoin: round; }
.login-shell .cube-geometry .side-face { stroke: #5ea9f9; stroke-width: 1; stroke-linejoin: round; }
.login-shell .cube-geometry .front-face { stroke: #5baefa; stroke-width: 1.1; stroke-linejoin: round; }
.login-shell .cube-geometry .bevel-edge { fill: none; stroke: #81ddff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.login-shell .cube-geometry .bevel-back { fill: none; stroke: #c0f3ff; stroke-width: 1; opacity: .62; }
.login-shell .cube-input:focus-within .cube-geometry { filter: drop-shadow(0 0 12px rgba(63,210,255,.44)); }
.login-shell .cube-input:focus-within .cube-geometry .front-face { stroke: #83f2ff; stroke-width: 1.6; }
.login-shell .cube-input:focus-within .cube-geometry .bevel-edge { stroke: #bbfaff; opacity: 1; }
.login-shell .cube-input input { position: absolute; z-index: 2; left: 0; top: var(--bevel); width: calc(100% - var(--bevel)); height: calc(100% - var(--bevel)); background: transparent; border: 0; outline: 0; color: #edf6ff; font-size: 13px; padding: 0 46px 0 45px; min-width: 0; border-radius: 8px 0 0 8px; }
.login-shell .cube-input input::placeholder { color: #8ea6c7; opacity: 1; }
.login-shell .cube-input input:-webkit-autofill { box-shadow: 0 0 0 1000px rgba(14,31,69,.78) inset; -webkit-text-fill-color: #eef6ff; }
.login-shell .field-icon { position: absolute; z-index: 3; width: 19px; height: 19px; left: 16px; top: calc(var(--bevel) + 17px); color: #78c9ff; pointer-events: none; }
.login-shell .reveal { position: absolute; z-index: 4; right: calc(var(--bevel) + 4px); top: calc(var(--bevel) + 6px); height: 40px; width: 38px; display: grid; place-items: center; border: none; background: none; color: #b2cfff; border-radius: 8px; }
.login-shell .reveal:hover, .login-shell .reveal:focus-visible { color: #6ce6ff; outline: 1px solid #72bfff; }
.login-shell .login-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: #b6cae2; margin: -2px 0 21px; }
.login-shell .remember { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.login-shell .remember input { accent-color: #45bdfa; width: 15px; height: 15px; cursor: pointer; }
.login-shell .forgot { background: none; border: 0; padding: 3px 0; color: #69d8ff; text-decoration: underline; text-underline-offset: 3px; font-size: 11px; }
.login-shell .login-submit { width: 100%; min-height: 48px; border: 1px solid rgba(110,217,255,.7); border-radius: 10px; color: white; font-weight: 760; font-size: 13px; letter-spacing: .2px; box-shadow: 0 7px 25px rgba(50,116,240,.31); background: linear-gradient(100deg, #1875f7 0%, #484af3 55%, #33cae8 100%); transition: transform .2s, box-shadow .2s; }
.login-shell .login-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(49,137,252,.49); }
.login-shell .login-submit:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.login-shell .login-submit svg { vertical-align: middle; margin-left: 8px; }
.login-shell .secure-line { border-top: 1px solid rgba(123,170,218,.18); margin-top: 19px; padding-top: 15px; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 11px; color: #8fa9c8; }
.login-shell .secure-line svg { color: #68dff8; }
.login-shell .form-message, .login-shell .login-notice { display: none; margin: 14px 0 0; font-size: 11px; line-height: 1.5; padding: 12px; border-radius: 9px; color: #cce7f9; background: rgba(18,76,134,.3); border: 1px solid rgba(103,179,247,.25); }
.login-shell .form-message:not([hidden]), .login-shell .login-notice:not([hidden]) { display: block; }
.login-shell .form-message.erro { color: #ffd9d9; background: rgba(140,30,30,.28); border-color: rgba(255,120,120,.35); }
/* .login-notice (ex.: aviso de ambiente de demonstração) é permanente enquanto visível, não some sozinho e não
   deve virar overlay flutuante como .form-message (senão se sobrepõe ao erro/aviso do formulário). */
.login-shell .login-notice { margin: 0 0 16px; }
/* palco multidimensional */
.login-shell .stage { position: absolute; z-index: 4; top: 3px; right: 0; width: 69%; height: 702px; pointer-events: none; }
.login-shell .stage:before { content: ""; position: absolute; inset: 5% 0 3% 3%; background: radial-gradient(ellipse 46% 38% at 53% 56%, rgba(17,82,189,.25), transparent 100%); pointer-events: none; }
.login-shell .links-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .8; }
.login-shell .stage-grid { position: absolute; z-index: 0; bottom: 12px; left: 6%; right: 1%; height: 43%; opacity: .25; background-image: linear-gradient(rgba(35,141,240,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(35,141,240,.25) 1px, transparent 1px); background-size: 34px 34px; transform: perspective(370px) rotateX(69deg); mask-image: linear-gradient(0deg, transparent 0%, black 75%); }
.login-shell .cube-viewport { pointer-events: none; position: absolute; z-index: 3; left: 51%; top: 47%; width: 380px; height: 380px; transform: translate(-50%,-50%); perspective: 900px; filter: drop-shadow(0 0 24px rgba(33,145,253,.19)); }
.login-shell .cube-glow { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; transform: translate(-50%,-50%); border-radius: 100%; background: radial-gradient(circle, rgba(63,123,245,.17), transparent 69%); filter: blur(12px); }
.login-shell .cube-rotor { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-style: preserve-3d; animation: login-rotor 26s linear infinite; }
@keyframes login-rotor { 0% { transform: rotateX(-23deg) rotateY(-29deg); } 45% { transform: rotateX(-17deg) rotateY(135deg); } 100% { transform: rotateX(-23deg) rotateY(331deg); } }
.login-shell .piece { position: absolute; width: 69px; height: 69px; left: -34.5px; top: -34.5px; transform-style: preserve-3d; opacity: 0; transform: translate3d(var(--sx),var(--sy),var(--sz)) rotateX(var(--rx)) rotateY(var(--ry)) scale(.26); transition: transform 2.25s cubic-bezier(.17,.75,.15,1.04), opacity .9s ease; transition-delay: var(--delay); will-change: transform; }
.login-shell .assembled .piece { opacity: 1; transform: translate3d(var(--x),var(--y),var(--z)) rotateX(0deg) rotateY(0deg) scale(1); }
.login-shell .piece .side3d { position: absolute; inset: 0; display: block; backface-visibility: visible; border: 1px solid rgba(111,221,255,.67); border-radius: 3px; background: linear-gradient(135deg, rgba(65,175,249,.65), rgba(25,61,157,.77) 46%, rgba(75,57,181,.79)); box-shadow: inset 0 0 25px rgba(23,152,255,.18), 0 0 9px rgba(49,154,250,.14); }
.login-shell .piece:nth-child(3n+1) .side3d { background: linear-gradient(145deg, rgba(42,197,242,.53), rgba(14,83,172,.68), rgba(62,71,171,.74)); }
.login-shell .piece:nth-child(5n+2) .side3d { background: linear-gradient(145deg, rgba(127,123,250,.57), rgba(32,71,179,.72), rgba(18,175,208,.58)); }
.login-shell .piece .side3d:after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(183,242,255,.13); border-radius: 2px; background: linear-gradient(45deg, transparent 48%, rgba(138,228,255,.08) 49%, transparent 50%); }
.login-shell .piece .f { transform: translateZ(34.5px); }
.login-shell .piece .b { transform: rotateY(180deg) translateZ(34.5px); }
.login-shell .piece .r { transform: rotateY(90deg) translateZ(34.5px); }
.login-shell .piece .l { transform: rotateY(-90deg) translateZ(34.5px); }
.login-shell .piece .t { transform: rotateX(90deg) translateZ(34.5px); background: linear-gradient(130deg, rgba(87,215,255,.77), rgba(62,112,227,.75)); }
.login-shell .piece .d { transform: rotateX(-90deg) translateZ(34.5px); }
.login-shell .piece .surface { position: absolute; inset: 5px; border-radius: 2px; background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(136,216,255,.11) 11px 12px), repeating-linear-gradient(0deg, transparent 0 11px, rgba(136,216,255,.11) 11px 12px); }
.login-shell .cube-inner-core { width: 74px; height: 74px; position: absolute; left: -37px; top: -37px; border-radius: 50%; background: radial-gradient(circle, #9afbff 0%, #22dcfc 12%, rgba(17,117,251,.7) 24%, transparent 65%); box-shadow: 0 0 60px rgba(80,214,255,.55); transform: translateZ(0); pointer-events: none; opacity: .84; animation: login-core-pulse 3.5s ease-in-out infinite; }
@keyframes login-core-pulse { 50% { opacity: .45; filter: blur(4px); } }
.login-shell .assembled .piece[data-dim="active"] .side3d { border-color: #f9fdff; box-shadow: 0 0 18px var(--active), inset 0 0 20px var(--active); }
.login-shell .cube-halo { position: absolute; z-index: 2; left: 51%; top: 72%; width: 350px; height: 108px; transform: translate(-50%,-50%); border: 2px solid rgba(39,154,255,.60); border-radius: 50%; box-shadow: 0 0 16px rgba(0,162,255,.5), inset 0 0 15px rgba(21,137,235,.23); background: radial-gradient(ellipse, rgba(36,104,238,.22), transparent 66%); }
.login-shell .cube-halo:before, .login-shell .cube-halo:after { content: ""; position: absolute; inset: 11px 20px; border: 1px dashed rgba(87,229,255,.47); border-radius: 50%; animation: login-halo 17s linear infinite; }
.login-shell .cube-halo:after { inset: 21px 42px; opacity: .5; animation-direction: reverse; }
@keyframes login-halo { 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.login-shell .dimension { position: absolute; z-index: 6; width: 145px; padding: 11px 11px 10px; border: 1px solid rgba(109,172,255,.46); border-radius: 12px; color: #e5efff; text-align: left; background: linear-gradient(130deg, rgba(29,57,112,.73), rgba(7,20,47,.87)); backdrop-filter: blur(12px); box-shadow: 0 10px 26px rgba(0,7,35,.28), inset 0 1px rgba(187,231,255,.1); pointer-events: auto; transition: transform .25s, border-color .25s, box-shadow .25s; }
.login-shell .dimension:hover, .login-shell .dimension:focus-visible, .login-shell .dimension.selected { transform: translateY(-5px); border-color: #64d9ff; box-shadow: 0 11px 30px rgba(33,118,246,.27), inset 0 1px rgba(215,239,255,.16); outline: 0; }
.login-shell .dimension.selected:after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 3px; background: linear-gradient(90deg, #3dd8fb, #907cfe); }
.login-shell .dim-head { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 740; }
.login-shell .dim-icon { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; background: rgba(67,126,234,.22); color: #70cfff; }
.login-shell .dim-sub { font-size: 9px; margin-top: 8px; color: #8fa9d6; letter-spacing: .4px; }
.login-shell .microchart { display: flex; align-items: end; height: 22px; gap: 4px; margin-top: 7px; }
.login-shell .microchart i { display: block; width: 12%; max-width: 14px; height: var(--h); min-height: 3px; border-radius: 2px 2px 0 0; background: linear-gradient(#67e1fa,#416aff); box-shadow: 0 0 6px rgba(77,166,247,.15); }
.login-shell .dimension:nth-of-type(2n) .microchart i { background: linear-gradient(#b69cff,#4c89ff); }
.login-shell .dimension[data-dim="processos"] { top: 6%; left: 23%; }
.login-shell .dimension[data-dim="arrecadacao"] { top: 3%; left: 54%; }
.login-shell .dimension[data-dim="eventos"] { top: 12%; right: 5%; }
.login-shell .dimension[data-dim="territorio"] { top: 57%; left: 19%; }
.login-shell .dimension[data-dim="fiscalizacao"] { top: 45%; right: 0%; }
.login-shell .dimension[data-dim="metas"] { top: 78%; right: 9%; }
.login-shell .dimension[data-dim="metas"] .microchart { height: 14px; }
.login-shell .select-caption { position: absolute; z-index: 9; right: 6%; top: 67%; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; pointer-events: none; }
.login-shell .select-caption small { font-size: 9px; color: #73a9d5; letter-spacing: 2.7px; }
.login-shell .select-caption strong { font-size: 18px; color: #eff7ff; letter-spacing: -.5px; }
.login-shell .select-caption em { font-size: 11px; color: #7dd9f2; font-style: normal; letter-spacing: .2px; }
.login-shell .page-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 44px 22px; display: flex; justify-content: space-between; align-items: center; z-index: 10; font-size: 10px; color: #7189ae; }
@media (prefers-reduced-motion: reduce) {
  #login *, #login *:before, #login *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .login-shell .piece { opacity: 1; transform: translate3d(var(--x),var(--y),var(--z)) !important; }
}

/* ---- viewport-fit: a cena ocupa a altura visível, sem rolagem ---- */
.login-shell { width: calc(100% - 36px); max-width: 1800px; height: calc(100dvh - 36px); min-height: 0; margin: 18px auto; display: grid; grid-template-rows: 84px minmax(0,1fr) 34px; border-radius: 28px; overflow: hidden; }
.login-shell .topbar { height: 100%; min-height: 0; padding: 18px 36px 5px; justify-content: flex-start; }
.login-shell .brand-symbol { width: 49px; height: 49px; }
.login-shell .brand-name { font-size: 28px; }
/* width:100% explícito: sem ele, este grid (aninhado, com coluna fr) não estica na linha do grid externo
   (fica do tamanho do conteúdo) em vez de ocupar a largura real do .login-shell — confirmado comparando
   com o arquivo original lado a lado. */
.login-shell .page-content { width: 100%; min-height: 0; height: 100%; padding: 0 clamp(20px,2.3vw,44px) 0 clamp(20px,2vw,34px); display: grid; grid-template-columns: minmax(0,1fr) clamp(300px,18vw,340px); align-items: stretch; gap: clamp(8px,1vw,18px); }
.login-shell .stage { grid-column: 1; grid-row: 1; position: relative; top: auto; left: auto; right: auto; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: visible; }
.login-shell .stage:before { inset: 14% -2% 8% -3%; }
.login-shell .hero-copy { top: 2%; left: 1%; right: auto; width: min(82%,520px); max-width: none; pointer-events: none; z-index: 7; }
.login-shell .eyebrow { font-size: clamp(8px,.72vw,11px); letter-spacing: clamp(2px,.35vw,4px); }
.login-shell .hero-copy h1 { font-size: clamp(27px,2.6vw,46px); letter-spacing: -1.25px; line-height: 1.08; margin: clamp(8px,1.2vh,15px) 0 clamp(6px,.9vh,12px); }
.login-shell .hero-copy p { font-size: clamp(11px,.90vw,14px); line-height: 1.55; max-width: 440px; }
.login-shell .login-card { grid-column: 2; grid-row: 1; position: relative; top: auto; left: auto; margin: 0; width: 100%; max-width: 320px; align-self: center; justify-self: end; min-width: 0; padding: clamp(20px,2vw,29px) clamp(19px,2.2vw,32px); border-radius: 23px; }
.login-shell .login-heading { margin-bottom: clamp(16px,2.3vh,24px); }
.login-shell .login-heading h2 { font-size: clamp(18px,1.6vw,23px); }
.login-shell .login-heading p { font-size: clamp(10px,.83vw,12px); }
.login-shell .field-row { margin-bottom: clamp(13px,2vh,21px); }
.login-shell .cube-input { height: clamp(52px,7vh,66px); }
.login-shell .cube-input .field-icon { top: calc(var(--bevel) + (100% - var(--bevel) - 19px)/2); }
.login-shell .reveal { top: calc(var(--bevel) + (100% - var(--bevel) - 40px)/2); }
.login-shell .login-options { margin: 0 0 clamp(15px,2.5vh,22px); }
.login-shell .login-submit { min-height: clamp(43px,5.7vh,50px); }
.login-shell .secure-line { margin-top: clamp(14px,2.1vh,19px); padding-top: clamp(12px,1.7vh,15px); }
/* O design original deixa .form-message como overlay (position:absolute) aqui, flutuando sobre o fim do
   cartão — mas isso sobrepõe ".secure-line" (sempre visível) sempre que um erro ou aviso aparece. Mantido em
   fluxo normal: o cartão cresce um pouco, mas nada fica ilegível. */
.login-shell .form-message { font-size: 10px; }
.login-shell .page-foot { position: relative; left: auto; right: auto; bottom: auto; padding: 0 clamp(24px,3vw,44px) 12px; min-height: 0; font-size: 9px; align-self: end; }
/* o cubo não recebe clique: a seleção dos cards não interfere na rotação */
.login-shell .cube-viewport { left: 54%; top: 56%; transform: translate(-50%,-50%) scale(.88); transform-origin: center center; }
.login-shell .cube-halo { left: 54%; top: 77%; transform: translate(-50%,-50%) scale(.88); }
.login-shell .dimension { width: clamp(108px,10.5vw,145px); padding: 9px 10px 8px; border-radius: 10px; }
.login-shell .dim-head { font-size: 10px; gap: 7px; }
.login-shell .dim-icon { width: 24px; height: 24px; border-radius: 7px; }
.login-shell .dim-sub { font-size: 8px; margin-top: 6px; }
.login-shell .microchart { height: 16px; margin-top: 6px; }
.login-shell .dimension[data-dim="processos"] { left: 0%; top: 36%; }
.login-shell .dimension[data-dim="arrecadacao"] { left: 50%; top: 23%; }
.login-shell .dimension[data-dim="eventos"] { right: 1%; top: 37%; }
.login-shell .dimension[data-dim="territorio"] { left: 0%; top: 69%; }
.login-shell .dimension[data-dim="fiscalizacao"] { right: 3%; top: 64%; }
.login-shell .dimension[data-dim="metas"] { right: 20%; top: 82%; }
.login-shell .select-caption { right: 5%; top: 8%; gap: 4px; }
.login-shell .select-caption small { font-size: 8px; }
.login-shell .select-caption strong { font-size: 14px; }
.login-shell .select-caption em { font-size: 9px; }
@media (max-height: 800px) and (min-width: 761px) {
  .login-shell { grid-template-rows: 70px minmax(0,1fr) 24px; }
  .login-shell .topbar { padding-top: 12px; }
  .login-shell .brand-symbol { width: 43px; height: 43px; }
  .login-shell .brand-name { font-size: 26px; }
  .login-shell .page-foot { padding-bottom: 7px; }
  .login-shell .hero-copy { top: 1%; }
  .login-shell .hero-copy h1 { font-size: clamp(25px,2.5vw,38px); }
  .login-shell .login-card { padding: 17px 23px; }
  .login-shell .login-heading { margin-bottom: 13px; }
  .login-shell .login-heading p { font-size: 10px; }
  .login-shell .cube-viewport { transform: translate(-50%,-50%) scale(.74); }
  .login-shell .cube-halo { transform: translate(-50%,-50%) scale(.75); }
  .login-shell .dimension { padding: 7px 9px 7px; }
  .login-shell .dim-sub { margin-top: 4px; }
  .login-shell .microchart { height: 12px; margin-top: 4px; }
}
@media (max-height: 660px) and (min-width: 761px) {
  .login-shell { grid-template-rows: 60px minmax(0,1fr) 0px; }
  .login-shell .page-foot { display: none; }
  .login-shell .hero-copy p { display: none; }
  .login-shell .cube-viewport { top: 56%; transform: translate(-50%,-50%) scale(.61); }
  .login-shell .cube-halo { top: 78%; transform: translate(-50%,-50%) scale(.65); }
  .login-shell .dimension[data-dim="metas"] { top: 82%; }
  .login-shell .login-card { padding: 12px 19px; }
  .login-shell .login-heading { margin-bottom: 10px; }
  .login-shell .login-heading p { display: none; }
  .login-shell .field-row { margin-bottom: 10px; }
  .login-shell .cube-input { height: 49px; }
  .login-shell .login-options { margin-bottom: 10px; }
  .login-shell .secure-line { margin-top: 8px; padding-top: 9px; }
}
@media (max-width: 1150px) and (min-width: 761px) {
  .login-shell .page-content { grid-template-columns: minmax(0,54fr) minmax(315px,46fr); gap: 12px; padding: 0 20px; }
  .login-shell .hero-copy h1 { font-size: clamp(26px,2.8vw,35px); }
  .login-shell .hero-copy p { font-size: 11px; max-width: 310px; }
  .login-shell .dimension { width: 104px; padding: 7px; }
  .login-shell .dim-head { font-size: 9px; gap: 4px; }
  .login-shell .dim-icon { width: 20px; height: 20px; }
  .login-shell .dim-sub { font-size: 7px; }
  .login-shell .cube-viewport { transform: translate(-50%,-50%) scale(.65); }
  .login-shell .cube-halo { transform: translate(-50%,-50%) scale(.68); }
  .login-shell .dimension[data-dim="arrecadacao"] { left: 56%; }
  .login-shell .dimension[data-dim="metas"] { right: 0%; }
  .login-shell .select-caption { right: 0%; top: 11%; }
  .login-shell .select-caption em { display: none; }
  .login-shell .login-card { padding: 19px 18px; }
}
/* tablet/celular: animação em cima, formulário embaixo, sem rolagem vertical */
@media (max-width: 760px) {
  .login-shell { width: 100%; height: 100dvh; margin: 0; border: 0; border-radius: 0; grid-template-rows: 62px minmax(0,1fr); }
  .login-shell .topbar { padding: 11px 17px 3px; }
  .login-shell .brand-symbol { width: 39px; height: 39px; }
  .login-shell .brand { gap: 10px; }
  .login-shell .brand-name { font-size: 23px; }
  .login-shell .brand-sub { font-size: 8px; letter-spacing: 1px; margin-top: 4px; }
  .login-shell .page-content { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(175px,42fr) minmax(280px,58fr); gap: 4px; padding: 0 12px 12px; }
  .login-shell .stage { grid-row: 1; grid-column: 1; }
  .login-shell .login-card { grid-row: 2; grid-column: 1; align-self: center; max-width: 360px; padding: clamp(13px,2.5vh,22px) clamp(17px,3vw,23px); border-radius: 18px; }
  .login-shell .page-foot { display: none; }
  .login-shell .hero-copy { top: 0; left: 3%; max-width: 86%; }
  .login-shell .eyebrow { font-size: 8px; letter-spacing: 2px; }
  .login-shell .hero-copy h1 { font-size: clamp(20px,4.9vw,31px); margin: 5px 0 0; letter-spacing: -.6px; line-height: 1.06; }
  .login-shell .hero-copy p { display: none; }
  .login-shell .cube-viewport { left: 50%; top: 57%; transform: translate(-50%,-50%) scale(.48); }
  .login-shell .cube-halo { left: 50%; top: 84%; transform: translate(-50%,-50%) scale(.50); }
  .login-shell .stage-grid { opacity: .15; }
  .login-shell .select-caption { display: none; }
  .login-shell .dimension { width: clamp(88px,24vw,115px); border-radius: 7px; padding: 5px 7px; }
  .login-shell .dim-icon { height: 18px; width: 18px; border-radius: 4px; }
  .login-shell .dim-icon svg { width: 12px; height: 12px; }
  .login-shell .dim-head { font-size: 8px; gap: 4px; }
  .login-shell .dim-sub { display: none; }
  .login-shell .microchart { height: 10px; margin-top: 4px; gap: 2px; }
  .login-shell .dimension[data-dim="processos"] { top: 28%; left: 0; }
  .login-shell .dimension[data-dim="arrecadacao"] { top: 3%; left: auto; right: 0; }
  .login-shell .dimension[data-dim="eventos"] { top: 38%; right: 0; }
  .login-shell .dimension[data-dim="territorio"] { top: 67%; left: 0; }
  .login-shell .dimension[data-dim="fiscalizacao"] { top: 68%; right: 0; }
  .login-shell .dimension[data-dim="metas"] { display: none; }
  .login-shell .login-heading { margin-bottom: 13px; gap: 10px; }
  .login-shell .login-heading h2 { font-size: 18px; }
  .login-shell .login-heading p { font-size: 10px; }
  .login-shell .lock-badge { width: 38px; height: 38px; }
  .login-shell .cube-input { height: 53px; }
  .login-shell .field-row { margin-bottom: 12px; }
  .login-shell .login-options { margin: 0 0 12px; }
  .login-shell .login-submit { min-height: 42px; }
  .login-shell .secure-line { margin-top: 12px; padding-top: 10px; }
}
@media (max-width: 760px) and (max-height: 730px) {
  .login-shell { grid-template-rows: 51px minmax(0,1fr); }
  .login-shell .topbar { padding: 6px 14px 2px; }
  .login-shell .brand-symbol { width: 33px; height: 33px; }
  .login-shell .brand-name { font-size: 21px; }
  .login-shell .page-content { grid-template-rows: minmax(120px,32fr) minmax(270px,68fr); gap: 0; padding-bottom: 5px; }
  .login-shell .hero-copy h1 { font-size: clamp(17px,4.5vw,25px); }
  .login-shell .eyebrow { display: none; }
  .login-shell .cube-viewport { top: 61%; transform: translate(-50%,-50%) scale(.36); }
  .login-shell .cube-halo { top: 86%; transform: translate(-50%,-50%) scale(.37); }
  .login-shell .dimension { padding: 4px 5px; }
  .login-shell .microchart { display: none; }
  .login-shell .dimension[data-dim="arrecadacao"] { top: 0; }
  .login-shell .dimension[data-dim="territorio"] { top: 67%; }
  .login-shell .dimension[data-dim="fiscalizacao"] { top: 70%; }
  .login-shell .login-card { padding: 11px 15px; }
  .login-shell .login-heading { margin-bottom: 8px; }
  .login-shell .login-heading h2 { font-size: 17px; }
  .login-shell .login-heading p { display: none; }
  .login-shell .cube-input { height: 49px; }
  .login-shell .field-row { margin-bottom: 8px; }
  .login-shell .login-options { margin-bottom: 8px; }
  .login-shell .secure-line { margin-top: 8px; padding-top: 8px; font-size: 9px; }
}
@media (max-width: 365px) {
  .login-shell .login-card { padding-left: 12px; padding-right: 12px; }
  .login-shell .login-options { font-size: 10px; gap: 5px; }
  .login-shell .forgot { font-size: 10px; }
  .login-shell .dimension { width: 86px; }
  .login-shell .dim-head { font-size: 7.5px; }
}
@media (prefers-reduced-motion: reduce) { .login-shell .cube-rotor { animation: none !important; } }

/* formulário compacto: largura fixa e altura preservada (evita que o grid estique o cartão em telas largas) */
@media (min-width: 761px) {
  .login-shell .login-card { box-sizing: border-box; width: 320px; max-width: 320px; height: clamp(352px,47vh,450px); min-height: 0; padding: clamp(15px,2.0vh,22px) 18px; display: flex; flex-direction: column; justify-content: center; }
  .login-shell .login-card form { width: 100%; min-width: 0; }
  .login-shell .login-heading { gap: 10px; margin-bottom: clamp(10px,1.4vh,17px); }
  .login-shell .login-heading h2 { font-size: 19px; white-space: nowrap; }
  .login-shell .login-heading p { font-size: 10px; line-height: 1.35; }
  .login-shell .lock-badge { width: 40px; height: 40px; flex: 0 0 40px; }
  .login-shell .cube-input { height: clamp(52px,6.8vh,63px); }
  .login-shell .field-row { margin-bottom: clamp(10px,1.55vh,17px); }
  .login-shell .login-options { gap: 5px; font-size: 10px; margin-bottom: clamp(10px,1.7vh,17px); }
  .login-shell .remember { gap: 5px; white-space: nowrap; }
  .login-shell .forgot { font-size: 10px; white-space: nowrap; }
  .login-shell .login-submit { min-height: clamp(42px,5.6vh,48px); }
  .login-shell .secure-line { margin-top: clamp(9px,1.5vh,16px); padding-top: clamp(8px,1.3vh,13px); font-size: 9.5px; text-align: center; gap: 5px; }
}
/* seis dimensões distribuídas ao redor do cubo (âncora única mantém a distância proporcional à cena) */
@media (min-width: 761px) {
  .login-shell .stage { --cluster-x: 58%; --cluster-y: 56%; --cluster-rx: clamp(215px,17.2vw,305px); --cluster-ry: clamp(170px,26vh,232px); }
  .login-shell .cube-viewport { left: 58%; }
  .login-shell .cube-halo { left: 58%; }
  .login-shell .stage .dimension { right: auto; left: var(--cluster-x); top: var(--cluster-y); transform: translate(-50%,-50%); }
  .login-shell .stage .dimension:hover, .login-shell .stage .dimension:focus-visible, .login-shell .stage .dimension.selected { transform: translate(-50%,calc(-50% - 4px)); }
  .login-shell .stage .dimension[data-dim="processos"] { left: calc(var(--cluster-x) - var(--cluster-rx)); top: calc(var(--cluster-y) - var(--cluster-ry) * .48); }
  .login-shell .stage .dimension[data-dim="eventos"] { left: calc(var(--cluster-x) + var(--cluster-rx)); top: calc(var(--cluster-y) - var(--cluster-ry) * .48); }
  .login-shell .stage .dimension[data-dim="territorio"] { left: calc(var(--cluster-x) - var(--cluster-rx)); top: calc(var(--cluster-y) + var(--cluster-ry) * .62); }
  .login-shell .stage .dimension[data-dim="fiscalizacao"] { left: calc(var(--cluster-x) + var(--cluster-rx)); top: calc(var(--cluster-y) + var(--cluster-ry) * .62); }
  /* Arrecadação e Metas alinhadas ao eixo central do cubo: uma acima, outra abaixo. */
  .login-shell .stage .dimension[data-dim="arrecadacao"] { right: auto; left: var(--cluster-x); top: calc(var(--cluster-y) - var(--cluster-ry) * 1.08); }
  .login-shell .stage .dimension[data-dim="metas"] { right: auto; left: var(--cluster-x); top: calc(var(--cluster-y) + var(--cluster-ry) * 1.14); }
}
@media (min-width: 761px) and (max-width: 1200px) {
  .login-shell .stage .dimension[data-dim="arrecadacao"] { left: calc(var(--cluster-x) + var(--cluster-rx) * .24); }
}
@media (min-width: 761px) and (max-width: 1150px) {
  .login-shell .stage { --cluster-x: 55%; --cluster-rx: clamp(142px,16vw,193px); --cluster-ry: clamp(115px,19vh,165px); }
  .login-shell .cube-viewport, .login-shell .cube-halo { left: 55%; }
  .login-shell .select-caption { right: 1%; top: 8%; }
  .login-shell .stage .dimension[data-dim="arrecadacao"] { left: var(--cluster-x); top: calc(var(--cluster-y) - var(--cluster-ry) * 1.02); }
  .login-shell .stage .dimension[data-dim="metas"] { left: var(--cluster-x); top: calc(var(--cluster-y) + var(--cluster-ry) * 1.30); }
}
@media (min-width: 761px) and (max-height: 660px) { .login-shell .stage { --cluster-ry: clamp(100px,18vh,140px); } }

/* consultas e catálogo */
.consulta-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.consulta-form input { flex: 1; min-width: 260px; }
.exemplos { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.cob-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.cob-resumo .card .kpi-val { font-size: 26px; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; z-index: 50; left: 0; top: 0; width: 270px; transform: translateX(-100%); transition: transform .2s; }
  .lateral.aberta { transform: none; box-shadow: 4px 0 24px rgba(0,0,0,.4); }
  .menu-toggle { display: inline-flex; }
}
/* Regras gerais de impressão (fundo branco, sem cortar cartão no meio) ficam no FIM do arquivo — depois
   do tema "glass 3D" da ASCOM — porque precisam vencer html.tema-ascom3d na mesma especificidade; ver lá. */

/* ---------- Mapa · Carnaval */
.mapa-aviso { margin-bottom: 10px; max-width: 120ch; }
.mapa-acoes-card, .mapa-tabela-card { margin-bottom: 14px; }
.mapa-acoes-card { padding: 10px 16px; }
.mapa-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mapa-acoes-titulo { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 14px; color: var(--txt); white-space: nowrap; }
.mapa-acoes-titulo .ico-inline { color: var(--s1); display: inline-flex; }
.mapa-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; margin-bottom: 14px; }
.mapa-card { padding: 14px; }
.mapa-el { height: 600px; border-radius: 8px; overflow: hidden; background: var(--surface-2); position: relative; z-index: 0; isolation: isolate; }
.mapa-camadas-cab { margin-bottom: 10px; }
.cam { padding: 8px 0; border-top: 1px solid var(--grade); }
.cam:first-of-type { border-top: 0; }
.cam-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cam-topo label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; }
.cam-acoes { display: inline-flex; gap: 4px; }
.cam-acoes a.btn { text-decoration: none; }
.cam-cor { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--surface-1); box-shadow: 0 0 0 1px var(--txt-3); flex: none; }
.cam-circ { border-radius: 50%; }
.cam-quad { border-radius: 2px; }
.cam-st { margin-top: 3px; }
.cam-st details { margin-top: 3px; }
.mk-quad span { display: block; width: 16px; height: 16px; border-radius: 3px; border: 2px solid var(--surface-1); box-shadow: 0 0 0 1px var(--txt-2); }
.leaflet-container { font: inherit; background: var(--surface-2); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-1); color: var(--txt); }
.leaflet-popup-content { font-size: 13px; line-height: 1.4; }
.leaflet-popup-content .sub { color: var(--txt-3); font-size: 11.5px; }
.leaflet-container a { color: var(--s1); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--surface-1) 80%, transparent) !important; color: var(--txt-2); }
.leaflet-control-attribution a { color: var(--txt-2); }
@media (max-width: 1100px) { .mapa-grid { grid-template-columns: minmax(0, 1fr); } .mapa-el { height: 440px; } }
@media print { .mapa-barra, .mapa-lateral .cam-acoes { display: none !important; } .mapa-el { height: 420px; } }

/* ---- marcador numerado sempre visível (estilo "Plúvio"), usado pela página Monitoramento no mapa ---- */
.mk-num-wrap { background: transparent !important; border: none !important; }
.mk-num { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; border: 2px solid; font-size: 11px; font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; }

/* ================================================================================================
   Página "Monitoramento" — painel gerencial do Carnaval (estrutura/layout seguindo o protótipo local
   fornecido pelo usuário: controle de data dia/semana/mês + calendário próprio, KPIs, mapa com várias
   camadas ligadas ao mesmo tempo num painel flutuante, evolução diária e maiores concentrações).
   Paleta própria (navy/azul), igual ao protótipo, escopada em .mon-page para não vazar pro resto do app
   — mesmo mecanismo de html.tema-ascom3d acima, só que via classe no container em vez de no <html>. */
.mon-page {
  --mon-navy: #10151f; --mon-navy2: #202938; --mon-blue: #1858ec; --mon-edge: #dce5f3; --mon-muted: #697991;
  display: flex; flex-direction: column; gap: 12px; color: #192338;
}
.mon-pane { background: #fff; border: 1px solid var(--mon-edge); border-radius: 15px; box-shadow: 0 6px 24px #0d284016; }

/* ---- controle de data ---- */
.mon-controls { padding: 11px 13px; position: relative; z-index: 4; }
.mon-controls-line { display: flex; align-items: center; gap: 8px; }
.mon-quick { display: flex; gap: 6px; flex: none; }
.mon-mode { border: 1px solid var(--mon-edge); border-radius: 10px; color: #22365b; background: #fff; padding: 9px 13px; font-weight: 750; font-size: 13px; white-space: nowrap; }
.mon-mode:hover { background: #f1f5ff; }
.mon-mode.active { background: var(--mon-blue); color: #fff; border-color: var(--mon-blue); }
.mon-icon-btn { height: 39px; min-width: 42px; display: grid; place-items: center; border: 1px solid var(--mon-edge); border-radius: 11px; background: #fff; color: #2352ad; font-size: 17px; }
.mon-icon-btn:hover { background: #f1f5ff; }
.mon-scale-label { font-weight: 850; letter-spacing: .01em; color: #29395d; margin: 10px 0 7px; font-size: 12px; }
.mon-scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.mon-day-arrow { width: 36px; min-width: 36px; height: 44px; font-size: 20px; }
.mon-track { display: flex; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 3px 1px 5px; }
.mon-track::-webkit-scrollbar { display: none; }
.mon-day { flex: 1 0 46px; min-width: 46px; min-height: 42px; border: 1px solid var(--mon-edge); background: #fff; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; scroll-snap-align: center; color: #243047; }
.mon-day small { font-size: 9px; line-height: 1.1; text-transform: uppercase; color: #76849d; font-weight: 700; white-space: nowrap; }
.mon-day b { font-size: 17px; line-height: 1.15; font-weight: 850; }
.mon-day.hoje:not(.selecionado) { border-color: #a8bdfe; background: #f3f7ff; }
.mon-day.selecionado { background: linear-gradient(180deg, #2169ff, #1049d4); border-color: #1553df; color: #fff; }
.mon-day.selecionado small { color: #dce8ff; }
.mon-period-caption { margin: 6px 0 0; color: #66758e; font-size: 12px; display: flex; align-items: center; gap: 7px; }
.mon-selection-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mon-blue); flex: none; }

/* ---- calendário próprio (sem depender do seletor nativo do navegador) ---- */
.mon-calendar { position: absolute; z-index: 4100; left: 12px; top: calc(100% - 3px); width: 326px; max-width: calc(100vw - 28px); background: #fff; border: 1px solid var(--mon-edge); border-radius: 14px; box-shadow: 0 16px 52px #0e253544; padding: 13px; color: #192338; }
.mon-calendar[hidden] { display: none; }
.mon-calheader, .mon-caltools, .mon-calnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mon-calheader { margin-bottom: 8px; }
.mon-calheader b { font-size: 15px; }
.mon-calx, .mon-calarrow { width: 34px; height: 34px; border-radius: 9px; background: #f1f5fa; border: 1px solid #e1e8f3; color: #203659; font-size: 16px; }
.mon-caltools { justify-content: flex-start; margin-bottom: 11px; gap: 6px; }
.mon-calmode { border: 1px solid var(--mon-edge); color: #284060; background: #fff; border-radius: 9px; padding: 7px 12px; font-size: 12px; font-weight: 800; }
.mon-calmode.active { background: var(--mon-blue); border-color: var(--mon-blue); color: #fff; }
.mon-calnav { margin-bottom: 10px; }
.mon-calnav label { font-weight: 850; color: #1b2b44; text-transform: capitalize; }
.mon-calnav-right { display: flex; gap: 5px; }
.mon-calweek, .mon-calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mon-calweek { margin-bottom: 6px; }
.mon-calweek span { text-align: center; color: #66748d; font-weight: 800; font-size: 10px; }
.mon-calday { height: 37px; background: #fff; border: 1px solid #e6ecf5; border-radius: 8px; color: #26354b; font-weight: 750; }
.mon-calday.outro { color: #b0bad0; background: #f9fafc; }
.mon-calday.hoje { border: 2px solid #6fa0ff; }
.mon-calday.selecionado, .mon-calday.inicio, .mon-calday.fim { background: var(--mon-blue); color: #fff; border-color: var(--mon-blue); }
.mon-calday.entre { background: #e7eeff; border-color: #c7d8ff; }
.mon-calhint { min-height: 33px; margin: 9px 0; color: #64718a; font-size: 12px; }
.mon-calfooter { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mon-calfooter button { padding: 9px 12px; border-radius: 9px; border: 1px solid var(--mon-edge); font-size: 12px; font-weight: 800; background: #f8faff; }
.mon-calfooter #mon-apply-cal { background: var(--mon-blue); color: #fff; border-color: var(--mon-blue); }
.mon-calfooter #mon-apply-cal:disabled { opacity: .4; }

/* ---- KPIs ---- */
.mon-kpi-pane { padding: 11px 12px 12px; }
.mon-section-title { font-size: 14px; font-weight: 850; margin: 0 0 9px; display: flex; align-items: center; gap: 8px; }
.mon-tag { color: #114de6; background: #e9f0ff; padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: 850; }
.mon-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 9px; }
.mon-kpi {
  --accent: #1858ec; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: #fdfefe; border: 1px solid var(--mon-edge); border-top: 5px solid var(--accent); border-radius: 12px; padding: 6px 11px 7px;
  transition: box-shadow .15s, transform .15s;
}
.mon-kpi:hover { box-shadow: 0 3px 10px #0d284020; transform: translateY(-1px); }
.mon-kpi.ativo { box-shadow: 0 0 0 2px var(--accent), 0 3px 10px #0d284020; background: color-mix(in srgb, var(--accent) 6%, #fdfefe); }
.mon-kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: .045em; color: #68758d; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-kpi-cob { margin-top: 3px; font-size: 11px; font-weight: 650; color: #5b6b86; }
.mon-kpi-value { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.06; color: #121c2e; font-weight: 900; }
/* Cartão em duas colunas: o número grande à esquerda e as comparações (mês anterior / ano anterior) à direita */
.mon-kpi-linha { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.mon-kpi-linha .mon-kpi-value { flex: none; }
.mon-kpi-deltas { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 1px; }
.mon-kpi-deltas .mon-kpi-delta { margin-top: 0; white-space: nowrap; font-size: 11px; }

/* ---- mapa ---- */
.mon-map-pane { overflow: hidden; }
.mon-panelbar { background: var(--mon-navy); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; }
.mon-panelbar strong { font-size: 15px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-panelbar-right { display: flex; gap: 6px; flex: none; }
.mon-pill { padding: 6px 10px; color: #e6ecf7; font-size: 11px; border-radius: 50px; background: #252e3d; border: 1px solid #3b4556; white-space: nowrap; }
.mon-map-stage { height: clamp(450px, 61vh, 790px); position: relative; background: #c9dbe4; overflow: hidden; isolation: isolate; }
.mon-mapa-el { position: absolute; inset: 0; width: 100%; height: 100%; }
.mon-layer-toggle { position: absolute; top: 12px; left: 12px; z-index: 900; background: var(--mon-navy); border: 1px solid #394454; color: #fff; border-radius: 11px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; box-shadow: 0 5px 20px #091b3050; max-width: calc(100% - 24px); }
.mon-layer-toggle em { font-style: normal; background: #354357; border-radius: 40px; padding: 2px 7px; font-size: 11px; }
.mon-layers { position: absolute; top: 60px; left: 12px; z-index: 900; width: 290px; max-width: calc(100% - 24px); max-height: min(430px, calc(100% - 76px)); overflow: hidden; background: #ffffffec; backdrop-filter: blur(8px); border: 1px solid #d8e3ee; border-radius: 14px; box-shadow: 0 10px 28px #0b213e3c; display: flex; flex-direction: column; }
.mon-layers[hidden] { display: none; }
.mon-layers-head { background: #f3f6fb; padding: 9px 12px; font-weight: 800; font-size: 12px; color: #1c2a44; border-bottom: 1px solid var(--mon-edge); }
.mon-layers-body { padding: 6px; overflow: auto; }
.mon-layer-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #eaf0f8; cursor: pointer; }
.mon-layer-row:last-child { border: 0; }
.mon-layer-sub { padding-left: 30px; }
.mon-layer-sub .mon-layer-text { font-weight: 650; }
.mon-layer-group input:indeterminate { background: var(--mon-blue); border-color: var(--mon-blue); }
.mon-layer-group input:indeterminate:after { content: '–'; position: absolute; left: 3px; top: -3px; color: #fff; font-size: 15px; font-weight: 800; }
.mon-layer-row input { appearance: none; width: 17px; height: 17px; flex: none; border: 1px solid #bac9df; border-radius: 5px; position: relative; margin: 0; background: #fff; }
.mon-layer-row input:checked { background: var(--mon-blue); border-color: var(--mon-blue); }
.mon-layer-row input:checked:after { content: '✓'; position: absolute; left: 2px; top: -3px; color: #fff; font-size: 15px; font-weight: 800; }
.mon-color-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.mon-layer-text { flex: 1; min-width: 0; font-weight: 750; color: #1e2b45; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-layer-num { flex: none; min-width: 27px; text-align: center; border-radius: 12px; padding: 3px 5px; background: #edf2fa; font-size: 11px; font-weight: 850; color: #2d3b58; }
.mon-info-pop { position: absolute; right: 12px; bottom: 12px; z-index: 950; padding: 12px; background: #fff; border-radius: 12px; box-shadow: 0 6px 22px #17294340; max-width: min(320px, calc(100% - 24px)); font-size: 12px; color: #192338; }
.mon-info-pop[hidden] { display: none; }
.mon-info-pop b { font-size: 14px; }
.mon-info-pop button { position: absolute; right: 7px; top: 6px; border: 0; background: none; font-size: 19px; color: #6e7990; cursor: pointer; }

/* ---- Ficha do ponto (empresa/pessoa vinculada), aberta ao clicar num ponto do mapa ---- */
.mon-ficha .lead { margin: 0 0 8px; font-weight: 700; }
.mon-fi-demo { margin-bottom: 8px; padding: 6px 10px; border-radius: 8px; background: #ffe9e9; color: #7a1010; font-size: 12px; font-weight: 750; }
.mon-fi-lista { display: flex; flex-direction: column; gap: 10px; }
.mon-fi-item { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; background: var(--surface-1); }
.mon-fi-emp { padding: 8px 10px; margin-bottom: 8px; border-left: 4px solid var(--s1); border-radius: 6px; background: color-mix(in srgb, var(--s1) 8%, transparent); }
.mon-fi-emp + .mon-fi-emp { margin-top: -2px; }
.mon-fi-emp.vazio { border-left-color: var(--borda); background: transparent; color: var(--txt-2); font-style: italic; }
.mon-fi-nome { font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.mon-fi-fantasia { font-size: 12.5px; color: var(--txt-2); }
.mon-fi-doc { margin-top: 2px; font-size: 13px; }
.mon-fi-vinc { color: var(--txt-2); }
.mon-fi-grade { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: 13px; }
.mon-fi-grade dt { color: var(--txt-2); }
.mon-fi-grade dd { margin: 0; overflow-wrap: anywhere; }
.mon-fi-notas { margin: 10px 0 0; padding-left: 18px; font-size: 11.5px; color: var(--txt-2); display: grid; gap: 2px; }
@media (max-width: 520px) { .mon-fi-grade { grid-template-columns: 1fr; gap: 0; } .mon-fi-grade dd { margin-bottom: 4px; } }

/* ---- comparativos nos KPIs ---- */
.mon-kpi-delta { margin-top: 3px; font-size: 11px; font-weight: 700; color: #3a4a66; line-height: 1.25; }
.mon-kpi-delta small { font-weight: 600; color: #6b7a94; }
.mon-kpi-delta2 { margin-top: 0; }
.mon-delta { font-weight: 850; white-space: nowrap; }
.mon-delta-alta, .mon-delta-queda { color: #1f3a66; }
.mon-delta-estavel, .mon-delta-sem_base { color: #6b7a94; }
.mon-delta-aviso { color: #b86a00; cursor: help; }

/* ---- resumo para entrevista ---- */
.mon-btn-resumo { margin-left: auto; border: 1px solid var(--mon-blue); background: #fff; color: var(--mon-blue); font: inherit; font-size: 12px; font-weight: 800; padding: 7px 12px; border-radius: 10px; cursor: pointer; }
.mon-btn-resumo:hover:not(:disabled) { background: var(--mon-blue); color: #fff; }
.mon-btn-resumo:disabled { opacity: .55; cursor: default; }
.mon-resumo-titulo { margin: 8px 0 6px; font-size: 16px; }
.mon-resumo h5 { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #5b6b86; }
.mon-resumo-lista { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.4; }
.mon-resumo-ressalvas { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #fff6e5; border: 1px solid #f0d49b; color: #5c3d00; font-size: 13px; }
.mon-resumo-ressalvas.demo { background: #ffe9e9; border-color: #f2a7a7; color: #7a1010; }
.mon-resumo-ressalvas .mon-resumo-lista { margin-top: 4px; gap: 4px; }
.mon-resumo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.mon-resumo-btn { border: 1px solid var(--mon-edge, #dce5f3); background: #f8faff; font: inherit; font-size: 13px; font-weight: 750; padding: 9px 14px; border-radius: 10px; cursor: pointer; color: #1c2a44; }
.mon-resumo-btn:hover { background: #eaf0ff; }
.mon-resumo-aviso { font-size: 12px; color: #4a5b78; }

/* ---- "O que tem aqui?" ---- */
.mon-aqui-btn { position: absolute; top: 12px; right: 12px; z-index: 900; background: #fff; border: 1px solid #c9d6ea; color: #17284a; border-radius: 11px; padding: 10px 13px; font: inherit; font-weight: 800; font-size: 13px; box-shadow: 0 5px 20px #091b3040; cursor: pointer; }
.mon-aqui-btn:disabled { opacity: .7; cursor: progress; }
.mon-escolha { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 960; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 9px 12px; background: var(--mon-navy); color: #fff; border-radius: 12px; font-size: 13px; box-shadow: 0 6px 22px #091b3060; }
.mon-escolha[hidden], .mon-aqui[hidden] { display: none; }
.mon-escolha button { border: 1px solid #4a566b; background: #252e3d; color: #fff; border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.mon-mapa-el.escolhendo, .mon-mapa-el.escolhendo .leaflet-interactive { cursor: crosshair; }
.mon-aqui { position: absolute; left: 12px; bottom: 12px; z-index: 940; width: min(350px, calc(100% - 24px)); max-height: calc(100% - 76px); overflow: auto; padding: 12px 13px; background: #fffffff2; backdrop-filter: blur(8px); border: 1px solid #d8e3ee; border-radius: 14px; box-shadow: 0 10px 28px #0b213e4d; font-size: 12px; color: #192338; }
.mon-aqui-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.mon-aqui-head button { border: 0; background: none; font-size: 20px; line-height: 1; color: #6e7990; cursor: pointer; }
.mon-aqui-sub { margin: 2px 0 8px; color: #5b6b86; }
.mon-aqui-raios { display: flex; gap: 6px; margin-bottom: 8px; }
.mon-raio { flex: 1; border: 1px solid var(--mon-edge); background: #fff; border-radius: 8px; padding: 6px 0; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.mon-raio.ativo { background: var(--mon-blue); border-color: var(--mon-blue); color: #fff; }
.mon-aqui-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mon-aqui-lista li { display: flex; gap: 8px; align-items: flex-start; }
.mon-aqui-lista .mon-color-dot { margin-top: 5px; }
.mon-aqui-lista b { font-size: 15px; }
.mon-aqui-lista small { color: #5b6b86; }
.mon-aqui-top { color: #4a5b78; font-size: 11px; margin-top: 1px; }
.mon-aqui-vazio, .mon-aqui-nota { margin: 8px 0 0; color: #5b6b86; line-height: 1.35; }
.mon-aqui-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mon-aqui-acoes button { border: 1px solid var(--mon-edge); background: #f8faff; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.mon-aqui-acoes button:hover { background: #eaf0ff; }
/* ---- assistente de perguntas (voz/texto) ---- */
.mon-ia { --mon-blue: #1858ec; --mon-navy: #10151f; --mon-edge: #dce5f3; }
.mon-ia-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1100; border: 0; background: var(--mon-blue); color: #fff; font: inherit; font-size: 15px; font-weight: 800; padding: 14px 20px; border-radius: 999px; box-shadow: 0 8px 26px #0b2a6a66; cursor: pointer; }
.mon-ia-fab:hover { filter: brightness(1.08); }
.mon-ia-fab.aberto { background: var(--mon-navy); }
.mon-ia-painel { position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 1100; width: min(430px, calc(100vw - 32px)); height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column; background: #fff; color: #172036; border: 1px solid var(--mon-edge); border-radius: 18px; box-shadow: 0 16px 48px #0b213e55; overflow: hidden; font-size: 14px; }
.mon-ia-painel[hidden] { display: none; }
.mon-ia-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; background: var(--mon-navy); color: #fff; }
.mon-ia-topo-acoes { display: flex; align-items: center; gap: 6px; }
.mon-ia-topo-acoes button { border: 1px solid #3b4556; background: #252e3d; color: #fff; border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.mon-ia-topo-acoes #mon-ia-fechar { font-size: 18px; line-height: 1; padding: 3px 9px; }
.mon-ia-chat { flex: 1; overflow-y: auto; padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 8px; background: #f6f8fc; }
.mon-ia-vazio { margin: auto 6px; color: #5b6b86; line-height: 1.45; text-align: center; }
.mon-ia-msg { max-width: 94%; padding: 9px 12px; border-radius: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.mon-ia-eu { align-self: flex-end; background: var(--mon-blue); color: #fff; border-bottom-right-radius: 4px; }
.mon-ia-bot { align-self: flex-start; background: #fff; border: 1px solid var(--mon-edge); border-bottom-left-radius: 4px; width: 94%; }
.mon-ia-bot p { margin: 0 0 6px; }
.mon-ia-bot ul { margin: 4px 0 6px; padding-left: 18px; display: grid; gap: 4px; }
.mon-ia-resumo-titulo { font-weight: 800; }
.mon-ia-pensando { color: #5b6b86; font-style: italic; }
.mon-ia-erro { background: #ffecec; border-color: #f2a7a7; color: #7a1010; }
.mon-ia-entendi { font-size: 11.5px; color: #5b6b86; margin-bottom: 6px; }
.mon-ia-origem { opacity: .75; }
.mon-ia-demo { margin-bottom: 6px; padding: 5px 8px; border-radius: 8px; background: #ffe9e9; color: #7a1010; font-size: 12px; font-weight: 750; }
.mon-ia-corpo { font-size: 15px; }
.mon-ia-locais, .mon-ia-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mon-ia-locais button, .mon-ia-acoes button, .mon-ia-sugestoes button { border: 1px solid var(--mon-edge); background: #f3f6fd; border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 12px; font-weight: 700; color: #1c2a44; cursor: pointer; }
.mon-ia-locais button:hover, .mon-ia-acoes button:hover, .mon-ia-sugestoes button:hover { background: #e4ecff; }
.mon-ia-avisos { margin-top: 6px; font-size: 12px; color: #5c3d00; background: #fff6e5; border: 1px solid #f0d49b; border-radius: 8px; padding: 5px 8px; }
.mon-ia-avisos summary { cursor: pointer; font-weight: 750; }
.mon-ia-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; background: #f6f8fc; }
.mon-ia-sugestoes:empty { display: none; }
.mon-ia-status { min-height: 0; padding: 0 14px; font-size: 12px; color: #7a4b00; background: #f6f8fc; }
.mon-ia-status:not(:empty) { padding: 4px 14px 6px; }
.mon-ia-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--mon-edge); background: #fff; }
.mon-ia-form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #c9d6ea; border-radius: 12px; background: #fff; color: #172036; }
.mon-ia-mic, .mon-ia-enviar { flex: none; width: 46px; border: 0; border-radius: 12px; font-size: 18px; cursor: pointer; }
.mon-ia-mic { background: #e9f0ff; }
.mon-ia-mic.sem-voz { opacity: .5; }
.mon-ia-mic.ouvindo { background: #e5484d; color: #fff; animation: mon-ia-pulso 1.2s ease-in-out infinite; }
.mon-ia-enviar { background: var(--mon-blue); color: #fff; }
@keyframes mon-ia-pulso { 50% { box-shadow: 0 0 0 7px #e5484d33; } }
@media (max-width: 640px) {
  .mon-ia-painel { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; height: min(78vh, 640px); }
  .mon-ia-fab.aberto { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mon-ia-mic.ouvindo { animation: none; } }

@media (max-width: 640px) {
  .mon-aqui { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 62%; }
  .mon-aqui-btn { top: 62px; right: auto; left: 12px; }
}

/* ---- rodapé: evolução diária + maiores concentrações ---- */
.mon-bottom-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.mon-bottom-panel { overflow: hidden; }
.mon-bottom-inner { padding: 12px; }
.mon-bars { display: flex; gap: 8px; height: 155px; align-items: flex-end; padding-top: 11px; }
.mon-baritem { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: end; height: 100%; gap: 4px; }
.mon-baritem span { font-size: 10px; font-weight: 800; color: #34445d; }
.mon-bar { background: linear-gradient(180deg, #2476ff, #1653d9); width: min(100%, 34px); min-height: 3px; border-radius: 5px 5px 0 0; }
.mon-baritem small { font-size: 10px; color: #77849c; }
.mon-table-scroll { overflow-x: auto; }
.mon-results { width: 100%; }

/* ---- marcador numerado sempre visível (estilo "Plúvio"), usado pela página Monitoramento no mapa ---- */
.mk-num-wrap { background: transparent !important; border: none !important; }
.mk-num { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; border: 2px solid; font-size: 11px; font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; }

@media (max-width: 900px) {
  .mon-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .mon-bottom-grid { grid-template-columns: 1fr; }
  .mon-map-stage { height: clamp(420px, 56vh, 700px); }
}
.mon-kpi-cob .cob-c, .mon-kpi-delta .sh, .mon-kpi-label .sh { display: none; }
@media (max-width: 640px) {
  /* Controles de data numa linha só: Dia / Semana / Mês / calendário / chave Carnaval-Todos (tudo mais compacto) */
  .mon-controls { padding: 8px 9px; }
  .mon-controls-line { flex-wrap: nowrap; gap: 5px; }
  .mon-quick { gap: 4px; }
  .mon-mode { padding: 7px 7px; font-size: 12px; border-radius: 9px; }
  .mon-controls-line .mon-icon-btn { height: 32px; min-width: 32px; font-size: 15px; border-radius: 9px; }
  .mon-controls-line .chave-pagina { padding: 4px 7px; gap: 5px; border-radius: 10px; }
  .mon-controls-line .chave-pagina .chave-rotulo { font-size: 9px; }
  .mon-controls-line .chave-pagina .chave-switch { --width: 2.4rem; }
  .mon-scale { gap: 5px; }
  .mon-day-arrow { width: 30px; min-width: 30px; height: 40px; font-size: 18px; }
  .mon-day { flex: 0 0 46px; min-width: 46px; min-height: 40px; }
  .mon-day b { font-size: 16px; }
  .mon-period-caption { margin-top: 4px; font-size: 11px; }
  .mon-calendar { left: 8px; right: 8px; width: auto; max-width: none; }

  /* Cartões de KPI compactos: 3 por linha, menos altura */
  .mon-kpi-pane { padding: 8px 8px 9px; }
  .mon-section-title { margin-bottom: 6px; }
  .mon-btn-resumo { font-size: 11px; padding: 5px 9px; }
  .mon-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mon-kpi { border-top-width: 4px; border-radius: 10px; padding: 4px 6px 5px; }
  .mon-kpi-label { font-size: 8.5px; letter-spacing: .02em; }
  .mon-kpi-value { font-size: 18px; margin-top: 2px; }
  /* no celular os cartões são estreitos (3 por linha): número em cima e comparações embaixo, como antes */
  .mon-kpi-linha { display: block; margin-top: 0; }
  .mon-kpi-deltas { display: block; }
  .mon-kpi-deltas .mon-kpi-delta { font-size: 9.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mon-kpi-delta small { font-size: 8.5px; }
  .mon-kpi-delta .lg, .mon-kpi-label .lg { display: none; }
  .mon-kpi-delta .sh, .mon-kpi-label .sh { display: inline; }
  .mon-kpi-label { font-size: 9.5px; }
  .mon-kpi-cob { margin-top: 2px; font-size: 9px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mon-kpi-cob .cob-l { display: none; }
  .mon-kpi-cob .cob-c { display: inline; }
}
/* celulares de 360 a 380 px (muito comuns no Android): mais um aperto para a chave caber na linha dos botões */
@media (max-width: 380px) {
  .mon-controls { padding: 8px 7px; }
  .mon-controls-line { gap: 4px; }
  .mon-quick { gap: 3px; }
  .mon-mode { padding: 7px 6px; font-size: 11.5px; }
  .mon-controls-line .mon-icon-btn { height: 30px; min-width: 30px; font-size: 14px; }
  .mon-controls-line .chave-pagina { padding: 4px 6px; gap: 4px; }
  .mon-controls-line .chave-pagina .chave-rotulo { font-size: 8.5px; letter-spacing: 0; }
  .mon-controls-line .chave-pagina .chave-switch { --width: 2.2rem; }
  .mon-kpi { padding: 4px 5px 5px; }
  .mon-kpi-deltas .mon-kpi-delta { font-size: 9px; }
  .mon-kpi-delta small { font-size: 8px; }
}
/* telas muito estreitas (≤340 px): a chave não cabe ao lado dos botões, então quebra para a linha de baixo */
@media (max-width: 340px) {
  .mon-controls-line { flex-wrap: wrap; }
}
@media print {
  .mon-controls, .mon-layer-toggle, .mon-layers, .mon-info-pop, .mon-aqui-btn, .mon-aqui, .mon-escolha, .mon-btn-resumo, .mon-ia { display: none !important; }
  .mon-map-stage { height: 420px; }
}

/* ================================================================================================
   ASCOM · Carnaval — tema "glass 3D" (inspirado em referência local fornecida pelo usuário).
   Ativo só nesta página: public/js/main.js adiciona/remove html.tema-ascom3d em renderPagina() ao
   entrar/sair da rota #/ascom. Reaproveita os MESMOS tokens (--bg, --surface-1, --s1..--s8 etc.) que
   todo o resto do app já usa — por isso a maioria dos componentes (chips, avisos, filtros, textos,
   e os gráficos Chart.js, que leem as cores via cssVar() em util.js, que lê do documentElement) já
   acompanha automaticamente; só os elementos mais "decorativos" (cartão de vidro, barra em relevo)
   precisam de CSS extra abaixo. Sai do tema instantaneamente ao navegar para qualquer outra página.
   ================================================================================================ */
html.tema-ascom3d {
  color-scheme: dark;
  --bg: #050f25; --surface-1: rgba(12, 31, 67, .62); --surface-2: rgba(16, 39, 81, .55);
  --borda: rgba(95, 164, 242, .36); --grade: rgba(123, 176, 232, .16);
  --txt: #eaf4ff; --txt-2: #9fb6d8; --txt-3: #6f8fb8;
  --s1: #408cff; --s2: #ef64c5; --s3: #00dac6; --s4: #ffad5f; --s5: #9b70ff; --s6: #3de6ac; --s7: #09def2; --s8: #ff7a7a;
  --seq: #408cff; --seq-claro: #194a8c;
  --alerta-bg: rgba(255, 173, 95, .16); --alerta-txt: #ffc98c;
  --erro-bg: rgba(239, 100, 125, .16); --erro-txt: #ff9bb2;
  --ok: #3de6ac; --info-bg: rgba(64, 140, 255, .16); --foco: #09def2;
}
html.tema-ascom3d body {
  background:
    radial-gradient(ellipse 42% 30% at 70% 4%, rgba(33, 73, 203, .28), transparent 72%),
    radial-gradient(ellipse 24% 35% at 27% 71%, rgba(10, 72, 152, .14), transparent 72%),
    linear-gradient(115deg, #050d20 0%, #06152f 59%, #06122a 100%);
  background-attachment: fixed;
}
/* cartões "de vidro": translúcido + blur, brilho fino no topo, leve elevação no hover (igual ao .glass/.kpi
   da referência) */
html.tema-ascom3d .card {
  position: relative; overflow: hidden;
  background: linear-gradient(116deg, rgba(11, 29, 66, .74), rgba(11, 31, 71, .48));
  box-shadow: 0 13px 40px rgba(0, 3, 18, .34), 0 0 18px rgba(22, 111, 237, .09), inset 0 1px rgba(180, 225, 255, .12);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: transform .22s, box-shadow .22s, border-color .3s;
}
html.tema-ascom3d .card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(148deg, rgba(115, 190, 255, .08), transparent 34%, transparent 78%, rgba(63, 146, 237, .08));
}
html.tema-ascom3d .card::after {
  content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(86, 184, 255, .94), transparent);
}
html.tema-ascom3d .card:hover { border-color: rgba(71, 163, 255, .77); transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0, 3, 18, .4), 0 0 20px rgba(22, 111, 237, .16); }
html.tema-ascom3d .kpi-val { text-shadow: 0 0 18px color-mix(in srgb, var(--seq) 40%, transparent); }
html.tema-ascom3d .btn { background: rgba(19, 50, 108, .47); border-color: rgba(101, 169, 255, .5); color: #d7eaff; box-shadow: inset 0 0 20px rgba(36, 95, 194, .08); }
html.tema-ascom3d .btn:hover { background: #1b3b72; border-color: #49adff; }
html.tema-ascom3d .btn-primario { background: linear-gradient(135deg, #2e6df0, #09c4d8); border-color: transparent; color: #fff; box-shadow: 0 0 16px rgba(21, 134, 247, .35); }
html.tema-ascom3d .btn-primario:hover { filter: brightness(1.1); }
/* barras em relevo 3D (trilho com leve perspectiva + preenchimento bisotado), igual ao .rank-line da referência */
html.tema-ascom3d .barra .trilho {
  border-radius: 5px; height: 13px; background: rgba(21, 54, 103, .75);
  transform: perspective(240px) rotateX(9deg); box-shadow: inset 0 2px 6px rgba(2, 8, 27, .55);
}
html.tema-ascom3d .barra .preench {
  position: relative; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--seq) 45%, #fff) 0%, var(--seq) 45%, color-mix(in srgb, var(--seq) 55%, #0b1f4d) 100%);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--seq) 45%, #000), 0 0 12px color-mix(in srgb, var(--seq) 55%, transparent);
}
html.tema-ascom3d .barra .preench::after {
  content: ""; position: absolute; right: -4px; top: 1px; height: calc(100% - 2px); width: 4px;
  background: color-mix(in srgb, var(--seq) 70%, #000); transform: skewY(-35deg); filter: brightness(.75);
}
html.tema-ascom3d .barra.clic:hover { background: rgba(44, 109, 180, .19); }
html.tema-ascom3d .secao-titulo { text-shadow: 0 0 14px rgba(64, 140, 255, .2); }
/* cards verdes da ASCOM (IND-01..16): mantém a faixa verde (identidade já aprovada), só o corpo vira vidro escuro */
html.tema-ascom3d #ascom-cards .ascom-card { background: rgba(10, 30, 65, .55); box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 1px rgba(180, 225, 255, .08); }
html.tema-ascom3d #ascom-cards .ascom-card:hover { transform: translateY(-2px); }

/* ================================================================================================
   Impressão / "Imprimir-PDF" (window.print(), botão Imprimir/PDF do topo) — qualquer tema, qualquer página.
   Fica aqui, DEPOIS do tema "glass 3D" da ASCOM, de propósito: o tema define cor com seletores tão
   específicos quanto os daqui (html.tema-ascom3d, mesma especificidade de :root), e o CSS resolve empate
   de especificidade pela ORDEM no arquivo — então, para vencer o tema escuro na impressão, este bloco
   precisa vir depois dele. Sem isso, o PDF saía com fundo escuro/texto claro (gasta tinta, difícil de
   ler) e com cartões cortados ao meio entre páginas (bug conhecido do Chrome: break-inside em item de
   grid/coluna multicolunas não é respeitado de forma confiável na impressão — por isso trocamos o
   layout de grid/colunas por bloco simples só na impressão, onde break-inside funciona direito). */
@media print {
  color-scheme: light;
  :root, html.tema-ascom3d, :root[data-theme="dark"], html[data-theme="dark"] {
    color-scheme: light;
    --bg: #fff; --surface-1: #fff; --surface-2: #f5f5f5; --borda: #ccc; --grade: #ddd;
    --txt: #000; --txt-2: #333; --txt-3: #555;
    --alerta-bg: #fff4d6; --alerta-txt: #6b4a00; --erro-bg: #fde7e7; --erro-txt: #8a1c1c; --ok: #0a7a3d; --info-bg: #eef3fb; --foco: #2a78d6;
  }
  .lateral, .filtros, .topo-acoes, .card-acoes, .faixa-demo.nao-imprimir { display: none !important; }
  .app { display: block; }
  body, html.tema-ascom3d body { background: #fff !important; color: #000; }

  /* cartões: fundo branco liso, sem o vidro/brilho/sombra do tema 3D (backdrop-filter e box-shadow não
     imprimem de forma previsível e só escurecem o resultado) */
  .card, html.tema-ascom3d .card, html.tema-ascom3d #ascom-cards .ascom-card {
    background: #fff !important; color: #000; border: 1px solid #ccc; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  html.tema-ascom3d .card::before, html.tema-ascom3d .card::after { display: none !important; }
  html.tema-ascom3d .btn, html.tema-ascom3d .btn-primario { background: #fff; color: #000; border-color: #ccc; box-shadow: none; }
  html.tema-ascom3d .kpi-val, html.tema-ascom3d .secao-titulo { text-shadow: none; }
  html.tema-ascom3d .barra .trilho { background: #eee; box-shadow: none; transform: none; }
  html.tema-ascom3d .barra .preench { box-shadow: none; }
  html.tema-ascom3d .barra .preench::after { display: none; }

  /* layout de grade/colunas -> bloco simples, para o cartão nunca ficar cortado entre duas páginas */
  .grid12, .masonry { display: block; columns: 1; }
  .w, .card { break-inside: avoid; page-break-inside: avoid; margin-bottom: 12px; }
}

/* ---- Administração > Menu (public/js/admin-menu.js) ---- */
.am-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.am-barra-dir { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.am-estado { font-size: 12px; color: var(--txt-2); }
.am-estado.sujo { color: var(--alerta-txt, #b45309); font-weight: 700; }
.am-ok { color: var(--txt); }
.am-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.am-editor { display: flex; flex-direction: column; gap: 12px; }
.am-grupo, .am-grupo-novo { height: auto; padding: 10px 12px; }
.am-grupo-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.am-titulo { flex: 1; min-width: 160px; font-weight: 700; }
.am-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.am-acoes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.am-acoes select { max-width: 150px; font-size: 12px; }
.am-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.am-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; }
.am-item.oculto { opacity: .55; border-style: dashed; }
.am-tipo { flex: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-2); width: 52px; }
.am-campos { flex: 1; min-width: 180px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.am-campos input[type="text"], .am-campos input:not([type]) { flex: 1; min-width: 140px; }
.am-vazio { padding: 6px 2px; }
.am-novo { margin-top: 8px; font-size: 12px; }
.am-novo summary { cursor: pointer; color: var(--txt-2); }
.am-novo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.am-novo-form input:not([type]), .am-novo-form input[type="text"] { flex: 1; min-width: 150px; }
.am-grupo-novo { display: flex; gap: 8px; padding: 10px 12px; }
.am-grupo-novo input { flex: 1; }
.am-previa { position: sticky; top: 12px; height: auto; align-self: start; max-height: calc(100vh - 24px); overflow: auto; padding: 10px 12px; background: #0b1220; color: #dbe6f7; }
.am-previa h3 { margin: 0 0 8px; font-size: 13px; color: #9fb6d8; }
.am-prev-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .65; padding: 10px 0 3px; }
.am-prev-item { font-size: 13px; padding: 3px 6px; border-radius: 6px; }
.am-prev-item.oculto, .am-prev-grupo.oculto { opacity: .4; text-decoration: line-through; }
.am-prev-item small, .am-prev-titulo small { text-decoration: none; display: inline-block; }
.am-quem-btn.restrito { border-color: var(--s1); color: var(--s1); font-weight: 700; }
.am-quem { flex-basis: 100%; margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--borda); border-radius: 8px; background: color-mix(in srgb, var(--surface-1) 70%, transparent); }
.am-quem[hidden] { display: none; }
.am-quem-modo { display: flex; gap: 14px; margin-bottom: 6px; }
.am-quem-corpo { display: flex; flex-direction: column; gap: 6px; }
.am-quem-perfis { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.am-quem-corpo input[type="search"] { max-width: 260px; }
.am-quem-usuarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; max-height: 170px; overflow: auto; padding: 4px 2px; }
.am-quem-u[hidden] { display: none; }
.am-quem small { color: var(--txt-2); }
.am-como { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; color: #9fb6d8; }
.am-como select { background: #162036; color: #dbe6f7; border: 1px solid #2a3a58; border-radius: 6px; padding: 4px; }
.am-previa-info { color: #9fb6d8; font-size: 11.5px; margin-bottom: 6px; line-height: 1.35; }
@media (max-width: 900px) {
  .am-layout { grid-template-columns: 1fr; }
  .am-previa { position: static; order: -1; }
  .am-barra-dir { margin-left: 0; }
}