/* Portal CIOP — liquid glass em cabeçalho e painéis (produção). */

html:not(:has(#kiosk)) body:has(.header):not(.login-v2):not(:has(.bg-wall)):not(:has(.body-bg-wall)) {
  background:
    radial-gradient(1200px 520px at -8% -20%, rgba(56, 189, 248, 0.22), transparent 58%),
    radial-gradient(900px 480px at 108% -10%, rgba(255, 107, 0, 0.14), transparent 52%),
    linear-gradient(180deg, #eef3fb 0%, #f5f6f8 100%) !important;
}

html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2):not(:has(.bg-wall)):not(:has(.body-bg-wall)) {
  background:
    radial-gradient(1200px 520px at -8% -20%, rgba(56, 189, 248, 0.16), transparent 58%),
    radial-gradient(900px 480px at 108% -10%, rgba(255, 107, 0, 0.10), transparent 52%),
    linear-gradient(180deg, #10141c 0%, #12151a 100%) !important;
}

html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .header,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .header.header-v2 {
  position: relative !important;
  isolation: isolate;
  backdrop-filter: var(--lg-blur, blur(32px) saturate(190%)) !important;
  -webkit-backdrop-filter: var(--lg-blur, blur(32px) saturate(190%)) !important;
  border-bottom: 1px solid var(--lg-border, rgba(255, 255, 255, 0.42)) !important;
  box-shadow: var(--lg-shadow) !important;
}
html:not(.dk-dark):not(:has(#kiosk)) body:has(.header):not(.login-v2) .header,
html:not(.dk-dark):not(:has(#kiosk)) body:has(.header):not(.login-v2) .header.header-v2 {
  background-image:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), rgba(56, 189, 248, 0.22), transparent),
    var(--ciop-light-grad-fx, var(--lg-fill-header)) !important;
  background-size: 26% 100%, auto, auto !important;
  background-repeat: no-repeat !important;
  background-position: -28% 0, 0 0, 0 0 !important;
  animation: ciop-header-scan 11s ease-in-out infinite;
}
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .header,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .header.header-v2 {
  background-image:
    linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.42), transparent),
    var(--lg-fill-header) !important;
  background-size: 26% 100%, auto, auto !important;
  background-repeat: no-repeat !important;
  background-position: -28% 0, 0 0, 0 0 !important;
  animation: ciop-header-scan 11s ease-in-out infinite;
}

html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .ciop-command-inner,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .menu-toggle,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) footer.portal-site-footer {
  background: var(--lg-fill) !important;
  backdrop-filter: var(--lg-blur-soft, blur(24px) saturate(175%)) !important;
  -webkit-backdrop-filter: var(--lg-blur-soft, blur(24px) saturate(175%)) !important;
  border-color: var(--lg-border, rgba(255, 255, 255, 0.42)) !important;
  box-shadow: var(--lg-shadow) !important;
}

html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .card,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .grid .card,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .panel,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .kpi,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .kpi-card,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .stat-card,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .chart-card,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .table-card,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .notice-board,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .topbar,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .filters-panel,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .password-panel {
  background: var(--lg-fill-data) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  box-shadow:
    0 14px 32px -20px rgba(6, 36, 92, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  color: #0f172a !important;
}

html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .card,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .grid .card,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .panel,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .kpi,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .kpi-card,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .stat-card,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .chart-card,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .table-card,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .notice-board,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .topbar,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .filters-panel,
html.dk-dark:not(:has(#kiosk)) body:has(.header):not(.login-v2) .password-panel {
  border-color: rgba(186, 210, 230, 0.28) !important;
  color: #f4f6f8 !important;
  box-shadow:
    0 14px 32px -18px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .chart-card,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .table-card,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .table-wrap,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .data-table-wrap {
  background: var(--lg-fill-data) !important;
}

html:not(.dk-dark):not(:has(#kiosk)) body:has(#portalAbas) .grid .card-title,
html:not(.dk-dark):not(:has(#kiosk)) body:has(#portalAbas) .grid .card-title *,
html:not(.dk-dark):not(:has(#kiosk)) body:has(#portalAbas) .grid .card-desc {
  text-shadow: none !important;
}

html:not(.dk-dark):not(:has(#kiosk)) body:has(#portalAbas) .grid .card-title,
html:not(.dk-dark):not(:has(#kiosk)) body:has(#portalAbas) .grid .card-title * {
  color: #06245c !important;
  -webkit-text-fill-color: #06245c !important;
}

html:not(.dk-dark):not(:has(#kiosk)) body:has(#portalAbas) .grid .card-desc {
  color: #334155 !important;
}

html.dk-dark:not(:has(#kiosk)) body:has(#portalAbas) .grid .card-title,
html.dk-dark:not(:has(#kiosk)) body:has(#portalAbas) .grid .card-title * {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html.dk-dark:not(:has(#kiosk)) body:has(#portalAbas) .grid .card-desc {
  color: #cbd5e1 !important;
}
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .header .header-title,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .card-title,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .kpi-value,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .panel-title {
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
}

html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .filters input,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .filters select,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .toolbar input,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .toolbar select,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .filters-panel input,
html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .filters-panel select {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not(:has(#kiosk)) body.oa-page #map,
html:not(:has(#kiosk)) body.oa-page .leaflet-container,
html:not(:has(#kiosk)) body.oa-page .map-shell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Card de boas-vindas: faixa do mês + azul iluminado até quase branco */
html:not(.dk-dark):not(:has(#kiosk)) body:has(#portalAbas) .hero-pro-panel {
  background:
    linear-gradient(90deg, var(--hero-mes-cor, #2563eb) 0 5px, transparent 5px),
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.98) 0%, transparent 48%),
    linear-gradient(135deg, #6ea6d4 0%, #b4d4ee 36%, #e4f1fa 72%, #f8fbfe 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  box-shadow:
    inset 5px 0 0 0 var(--hero-mes-cor, #2563eb),
    inset 12px 0 22px -10px color-mix(in srgb, var(--hero-mes-cor, #2563eb) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 14px 32px -18px rgba(6, 36, 92, 0.28) !important;
}
html:not(.dk-dark):not(:has(#kiosk)) body:has(#portalAbas) .hero-pro-saudacao-label,
html:not(.dk-dark):not(:has(#kiosk)) body:has(#portalAbas) .header-hero-mes {
  color: #3d5a80 !important;
}
html:not(.dk-dark):not(:has(#kiosk)) body:has(#portalAbas) .hero-pro-nome {
  background: none !important;
  -webkit-text-fill-color: #06245c !important;
  color: #06245c !important;
}
html.dk-dark:not(:has(#kiosk)) body:has(#portalAbas) .hero-pro-panel {
  background:
    linear-gradient(90deg, var(--hero-mes-cor, #38bdf8) 0 5px, transparent 5px),
    radial-gradient(120% 160% at 92% 0%, #3d6aa8 0%, transparent 46%),
    linear-gradient(135deg, #0b1628 0%, #152a4a 52%, #1c3d66 100%) !important;
  border-color: rgba(186, 210, 230, 0.28) !important;
  box-shadow:
    inset 5px 0 0 0 var(--hero-mes-cor, #38bdf8),
    inset 12px 0 22px -10px color-mix(in srgb, var(--hero-mes-cor, #38bdf8) 45%, transparent),
    0 14px 32px -16px rgba(0, 0, 0, 0.5) !important;
}

@keyframes ciop-header-scan {
  0%, 18% { background-position: -28% 0, 0 0, 0 0; }
  52% { background-position: 128% 0, 0 0, 0 0; }
  53%, 100% { background-position: 128% 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .header,
  html:not(:has(#kiosk)) body:has(.header):not(.login-v2) .header.header-v2 {
    animation: none !important;
  }
}

html:not(:has(#kiosk)) body:has(#portalAbas) .header.header-v2 {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
html:not(:has(#kiosk)) body:has(#portalAbas) .toolbar {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html:not(:has(#kiosk)) body:has(#portalAbas) .ciop-command-inner,
html:not(:has(#kiosk)) body:has(#portalAbas) .notice-board {
  border-radius: 0 !important;
}