/**
 * Politapp — Tema Executivo Político  v9  "Vibrant"
 * Direção: azul elétrico + ciano + dourado/âmbar + violeta de destaque.
 * Gradientes vivos, glow, micro-interações e utilitários interativos.
 * Mantém toda a especificidade (html body + !important) e classes da v8.
 */

/* ══════════════════════════════════════════════════
   TOKENS
   ══════════════════════════════════════════════════ */
:root {
  /* Fundo */
  --bg:      #0a1628;
  --bg-deep: #060f1e;

  /* Superfícies — semi-transparentes para glass effect */
  --surface:       rgba(12,22,46,0.78);
  --surface2:      rgba(16,28,58,0.86);
  --surface-solid: #0d1a36;

  /* Bordas */
  --border:       rgba(255,255,255,0.08);
  --border-hi:    rgba(59,130,246,0.45);
  --border-gold:  rgba(245,158,11,0.38);

  /* Textos */
  --text:  #eaf2fd;
  --muted: #86a2c4;

  /* Cores base */
  --accent:      #3b82f6;
  --accent-2:    #22d3ee;   /* ciano — par do gradiente */
  --accent-3:    #8b5cf6;   /* violeta — destaque pop */
  --accent-dim:  rgba(59,130,246,0.15);
  --accent-soft: rgba(59,130,246,0.22);
  --ok:          #10b981;
  --gold:        #f59e0b;
  --gold-hi:     #fbbf24;
  --gold-dim:    rgba(245,158,11,0.16);
  --danger:      #ef4444;
  --wa:          #25d366;   /* verde WhatsApp */
  --warn:        #f59e0b;

  /* Estrutura */
  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 24px 64px rgba(0,0,0,0.65);
  --shadow-sm: 0 8px 30px rgba(0,0,0,0.48);
  --shadow-soft: 0 8px 32px rgba(0,0,0,0.42);

  /* Glows vibrantes */
  --glow-accent: 0 0 0 1px rgba(59,130,246,0.35), 0 8px 32px rgba(59,130,246,0.28);
  --glow-gold:   0 0 0 1px rgba(245,158,11,0.35), 0 8px 32px rgba(245,158,11,0.24);
  --glow-violet: 0 0 0 1px rgba(139,92,246,0.35), 0 8px 32px rgba(139,92,246,0.26);

  /* Gradientes de marca */
  --grad-brand:  linear-gradient(120deg, #3b82f6 0%, #22d3ee 55%, #8b5cf6 100%);
  --grad-gold:   linear-gradient(120deg, #f59e0b 0%, #fbbf24 100%);
  --grad-heat:   linear-gradient(120deg, #8b5cf6, #3b82f6, #22d3ee);

  /* Cores extra */
  --caution: #f59e0b;
  --bad:     #ef4444;
  --risk:    #ef4444;
  --mint:    #10b981;

  /* Animações */
  --ease:     cubic-bezier(0.16,1,0.3,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --dur:      0.22s;
  --dur-fast: 0.14s;
  --dur-slow: 0.45s;

  /* ── Aliases de compatibilidade com variáveis antigas ── */
  --a:    var(--accent);
  --b:    var(--border);
  --t:    var(--text);
  --m:    var(--muted);
  --r:    var(--radius);
  --surf: var(--surface);
  --surf2: var(--surface2);
  --tx:   var(--text);
}

/* ══════════════════════════════════════════════════
   RESET GLOBAL
   ══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box !important; }

/* ══════════════════════════════════════════════════
   CORPO — fundo animado executivo
   ══════════════════════════════════════════════════ */
html, body {
  margin: 0 !important;
  min-height: 100vh !important;
}

html body {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif !important;
  color: var(--text) !important;
  line-height: 1.58 !important;
  position: relative !important;
  isolation: auto !important;

  /* Fundo: cor sólida + brilho radial sutil; rede de dados via canvas */
  background-color: var(--bg-deep) !important;
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(59,130,246,0.14), transparent 60%),
    radial-gradient(760px 480px at 100% 0%, rgba(139,92,246,0.12), transparent 55%),
    radial-gradient(680px 520px at 50% 120%, rgba(34,211,238,0.08), transparent 60%) !important;
  background-attachment: fixed !important;
}

html body::before { content: none !important; }
html body::after  { content: none !important; }

/* ══════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════ */
html body .wrap,
html body .page,
html body > .wrap,
html body > .page {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: min(1300px, calc(100vw - 2rem)) !important;
  margin-inline: auto !important;
  padding-inline: clamp(.9rem, 3vw, 1.75rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

/* ══════════════════════════════════════════════════
   TIPOGRAFIA
   ══════════════════════════════════════════════════ */
html body h1 {
  font-size: clamp(1.55rem, 3.4vw, 2.3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  line-height: 1.13 !important;
  margin: 0 0 .45rem !important;
  /* Título com gradiente vibrante */
  background: var(--grad-brand) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #f3f7fd !important;
}
/* Fallback: navegadores sem clip mostram branco */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  html body h1 { color: #f3f7fd !important; -webkit-text-fill-color: currentColor !important; }
}
html body h2 {
  font-size: clamp(1.05rem, 2vw, 1.3rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 .65rem !important;
  color: var(--text) !important;
}
html body header p,
html body header .lead {
  color: var(--muted) !important;
  max-width: 72ch !important;
  font-size: .95rem !important;
  margin: 0 !important;
}
html body header a { color: var(--accent) !important; }
html body a { transition: color var(--dur-fast) ease !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(59,130,246,0.5), rgba(139,92,246,0.5));
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(59,130,246,0.85), rgba(139,92,246,0.85)); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: rgba(59,130,246,0.5) transparent; }

/* ══════════════════════════════════════════════════
   PAINÉIS — glass vibrante com brilho de topo
   ══════════════════════════════════════════════════ */
html body .panel {
  position: relative !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 40%),
    var(--surface) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius) !important;
  padding: 1.4rem 1.45rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
  overflow: hidden !important;
  transition:
    border-color var(--dur) ease,
    box-shadow var(--dur) ease,
    transform var(--dur) var(--ease) !important;
}
/* Fio de luz superior gradiente */
html body .panel::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: var(--grad-brand) !important;
  opacity: .55 !important;
  transition: opacity var(--dur) ease !important;
}
html body .panel:hover {
  border-color: rgba(59,130,246,0.30) !important;
  box-shadow: var(--shadow-sm), 0 10px 40px rgba(59,130,246,0.14) !important;
  transform: translateY(-2px) !important;
}
html body .panel:hover::before { opacity: 1 !important; }
html body .panel h2 {
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  margin: 0 0 .75rem !important;
  color: var(--text) !important;
}

/* Painel destaque (opcional) */
html body .panel.panel-gold::before { background: var(--grad-gold) !important; }
html body .panel.panel-violet::before { background: linear-gradient(120deg,#8b5cf6,#c084fc) !important; }

/* ══════════════════════════════════════════════════
   TABELAS — executivo
   ══════════════════════════════════════════════════ */
html body .table-wrap {
  overflow-x: auto !important;
  border-radius: 12px !important;
  border: 1px solid rgba(59,130,246,0.16) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow-y: auto !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
html body table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: .85rem !important;
}
html body th {
  position: sticky !important; top: 0 !important;
  background: linear-gradient(180deg, rgba(8,16,36,0.99), rgba(6,14,32,0.98)) !important;
  color: rgba(150,178,212,0.95) !important;
  font-weight: 700 !important;
  font-size: .68rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: .62rem .72rem !important;
  border-bottom: 1px solid rgba(59,130,246,0.28) !important;
  z-index: 1 !important;
}
html body td {
  padding: .5rem .65rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  vertical-align: top !important;
  color: var(--text) !important;
  transition: background var(--dur-fast) ease !important;
}
html body tr:hover td {
  background: rgba(59,130,246,0.09) !important;
}

/* ══════════════════════════════════════════════════
   FORMULÁRIOS
   ══════════════════════════════════════════════════ */
html body input:not([type=checkbox]):not([type=radio]):not([type=range]),
html body select,
html body textarea {
  font: inherit !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
  padding: .52rem .72rem !important;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease !important;
}
html body input:focus-visible:not([type=checkbox]):not([type=radio]),
html body select:focus-visible,
html body textarea:focus-visible {
  border-color: rgba(59,130,246,0.7) !important;
  background: rgba(59,130,246,0.06) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18), 0 0 22px rgba(59,130,246,0.12) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════
   BOTÕES — gradiente vibrante + glow + ripple
   ══════════════════════════════════════════════════ */
html body button:not(.politapp-nav-toggle):not(.politapp-brand):not(.pn-toggle):not(.pn-brand) {
  position: relative !important;
  overflow: hidden !important;
  font: inherit !important;
  cursor: pointer !important;
  border-radius: 9px !important;
  padding: .52rem .85rem !important;
  font-weight: 600 !important;
  background: var(--grad-brand) !important;
  background-size: 160% 160% !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(59,130,246,0.24) !important;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease, background-position var(--dur) ease, filter var(--dur-fast) ease !important;
}
html body button:not(.politapp-nav-toggle):not(.politapp-brand):not(.pn-toggle):not(.pn-brand):hover {
  background-position: 100% 50% !important;
  box-shadow: 0 8px 28px rgba(59,130,246,0.42), 0 0 0 1px rgba(120,180,255,0.4) inset !important;
  transform: translateY(-1px) !important;
}
html body button:not(.politapp-nav-toggle):not(.politapp-brand):not(.pn-toggle):not(.pn-brand):active {
  transform: translateY(0) scale(0.98) !important;
}
html body button:disabled { opacity: .55 !important; cursor: not-allowed !important; filter: grayscale(.3) !important; }

/* Botões WhatsApp (verde) */
html body button.btn-wa:not(.secondary):not(.btn-ghost),
html body a.btn-wa {
  background: linear-gradient(120deg,#25d366,#1ebd5a) !important;
  color: #04210f !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.28) !important;
}
html body button.btn-wa:hover,
html body a.btn-wa:hover { box-shadow: 0 8px 26px rgba(37,211,102,0.42) !important; transform: translateY(-1px) !important; }

/* Botão dourado */
html body button.btn-gold, html body a.btn-gold {
  background: var(--grad-gold) !important;
  color: #241500 !important;
  box-shadow: 0 4px 16px rgba(245,158,11,0.30) !important;
}
html body button.btn-gold:hover, html body a.btn-gold:hover { box-shadow: 0 8px 28px rgba(245,158,11,0.45) !important; transform: translateY(-1px) !important; }

/* Secundário (ghost) */
html body button.secondary,
html body button.btn-ghost {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}
html body button.secondary:hover,
html body button.btn-ghost:hover {
  filter: none !important;
  background: rgba(59,130,246,0.14) !important;
  border-color: rgba(59,130,246,0.4) !important;
  box-shadow: 0 4px 18px rgba(59,130,246,0.18) !important;
}

/* Ripple (efeito propagado via site-interactions.js) */
html body .ripple-ink {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.45);
  pointer-events: none;
  animation: ripple-anim .6s var(--ease);
  mix-blend-mode: overlay;
}
@keyframes ripple-anim { to { transform: scale(2.6); opacity: 0; } }

/* ══════════════════════════════════════════════════
   LABELS
   ══════════════════════════════════════════════════ */
html body label {
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--muted) !important;
}
html body label:has(input[type="checkbox"]),
html body label:has(input[type="radio"]),
html body .check-line,
html body .checklist label,
html body .crm-filters label {
  font-size: .9rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--text) !important;
  line-height: 1.5 !important;
}
html body select option,
html body select optgroup {
  background-color: #0b1730 !important;
  color: var(--text) !important;
}
html body select option:checked {
  background-color: var(--accent) !important;
  color: #fff !important;
}
html body label:has(input[type="checkbox"]) strong,
html body label:has(input[type="radio"]) strong,
html body .check-line strong {
  color: #fff !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════
   UTILITÁRIOS
   ══════════════════════════════════════════════════ */
html body .note,
html body .muted { color: var(--muted) !important; font-size: .85rem !important; }
html body .alert {
  background: rgba(239,68,68,0.12) !important;
  border: 1px solid rgba(239,68,68,0.30) !important;
  color: #fecaca !important;
  border-radius: 9px !important;
  padding: .75rem !important;
}

/* Badges / chips vibrantes */
html body .badge, html body .chip-tag {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .18em .6em !important;
  border-radius: 999px !important;
  font-size: .72rem !important; font-weight: 700 !important;
  letter-spacing: .02em;
  background: var(--accent-dim) !important;
  color: #bfdbfe !important;
  border: 1px solid rgba(59,130,246,0.3) !important;
}
html body .badge.badge-gold { background: var(--gold-dim) !important; color: #fde68a !important; border-color: rgba(245,158,11,0.35) !important; }
html body .badge.badge-ok { background: rgba(16,185,129,0.14) !important; color: #a7f3d0 !important; border-color: rgba(16,185,129,0.35) !important; }
html body .badge.badge-danger { background: rgba(239,68,68,0.14) !important; color: #fecaca !important; border-color: rgba(239,68,68,0.35) !important; }
html body .badge.badge-violet { background: rgba(139,92,246,0.16) !important; color: #ddd6fe !important; border-color: rgba(139,92,246,0.35) !important; }

/* ══════════════════════════════════════════════════
   ENTRADA DE PÁGINA + SCROLL REVEAL
   ══════════════════════════════════════════════════ */
@keyframes page-in {
  from { opacity:0; transform: translateY(14px); }
  to   { opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  html body .wrap > *:not(nav):not(.pn-topbar):not(.pn-backdrop):not(.politapp-topbar):not(.politapp-nav-drawer) {
    animation: page-in .5s var(--ease) both;
  }
  html body .wrap > *:nth-child(1) { animation-delay: .03s; }
  html body .wrap > *:nth-child(2) { animation-delay: .09s; }
  html body .wrap > *:nth-child(3) { animation-delay: .15s; }
  html body .wrap > *:nth-child(4) { animation-delay: .20s; }
  html body .wrap > *:nth-child(n+5) { animation-delay: .25s; }
}

/* Scroll-reveal (aplicado por site-interactions.js) */
html body [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
html body [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html body [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════
   TOOLTIPS  (data-tip="...")
   ══════════════════════════════════════════════════ */
html body [data-tip] { position: relative; }
html body [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(6,12,28,0.98);
  color: #eaf2fd;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  padding: .4rem .6rem;
  border-radius: 8px;
  border: 1px solid rgba(59,130,246,0.3);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  white-space: nowrap;
  max-width: 260px;
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease);
}
html body [data-tip]:hover::after,
html body [data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════
   TOASTS  (criados por site-interactions.js → window.toast)
   ══════════════════════════════════════════════════ */
html body #pt-toasts {
  position: fixed;
  right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 10000;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}
html body .pt-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .6rem;
  background: rgba(10,18,38,0.97);
  border: 1px solid rgba(59,130,246,0.3);
  border-left: 3px solid var(--accent);
  border-radius: 11px;
  padding: .7rem .85rem;
  color: var(--text);
  font-size: .86rem;
  box-shadow: 0 16px 44px rgba(0,0,0,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateX(120%);
  opacity: 0;
  transition: transform .35s var(--ease-bounce), opacity .3s ease;
}
html body .pt-toast.is-in { transform: translateX(0); opacity: 1; }
html body .pt-toast.pt-ok { border-left-color: var(--ok); }
html body .pt-toast.pt-gold { border-left-color: var(--gold); }
html body .pt-toast.pt-danger { border-left-color: var(--danger); }
html body .pt-toast .pt-toast__icon { flex-shrink: 0; margin-top: .05rem; }
html body .pt-toast .pt-toast__close {
  margin-left: auto; background: none !important; border: none !important;
  color: var(--muted); cursor: pointer; padding: 0 !important; box-shadow: none !important;
  font-size: 1rem; line-height: 1;
}

/* ══════════════════════════════════════════════════
   TABS  (.pt-tabs > [role=tablist] [role=tab] / [role=tabpanel])
   ══════════════════════════════════════════════════ */
html body .pt-tablist {
  display: flex; gap: .25rem; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 1rem;
}
html body .pt-tab {
  position: relative;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  padding: .55rem .85rem !important;
  border-radius: 9px 9px 0 0 !important;
  cursor: pointer;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease !important;
}
html body .pt-tab:hover { color: var(--text) !important; background: rgba(255,255,255,0.04) !important; transform: none !important; }
html body .pt-tab[aria-selected="true"] { color: #fff !important; }
html body .pt-tab[aria-selected="true"]::after {
  content: ''; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px;
  background: var(--grad-brand); border-radius: 2px;
}
html body .pt-tabpanel[hidden] { display: none !important; }
html body .pt-tabpanel { animation: page-in .35s var(--ease) both; }

/* ══════════════════════════════════════════════════
   ACORDEÃO  (<details class="pt-acc">)
   ══════════════════════════════════════════════════ */
html body details.pt-acc {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 11px;
  margin-bottom: .7rem;
  background: rgba(255,255,255,0.025);
  overflow: hidden;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
html body details.pt-acc[open] {
  border-color: rgba(59,130,246,0.3);
  box-shadow: 0 8px 30px rgba(59,130,246,0.12);
}
html body details.pt-acc > summary {
  cursor: pointer;
  list-style: none;
  padding: .85rem 1rem;
  font-weight: 600;
  color: var(--text);
  display: flex; align-items: center; gap: .5rem;
}
html body details.pt-acc > summary::-webkit-details-marker { display: none; }
html body details.pt-acc > summary::after {
  content: ''; margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
html body details.pt-acc[open] > summary::after { transform: rotate(-135deg); }
html body details.pt-acc > *:not(summary) { padding: 0 1rem 1rem; }

/* ══════════════════════════════════════════════════
   SKELETON LOADING  (.pt-skel)
   ══════════════════════════════════════════════════ */
html body .pt-skel {
  background: linear-gradient(100deg, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 70%);
  background-size: 200% 100%;
  animation: pt-shimmer 1.3s linear infinite;
  border-radius: 8px;
  color: transparent !important;
}
@keyframes pt-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { html body .pt-skel { animation: none; } }

/* ══════════════════════════════════════════════════
   BOTÃO "VOLTAR AO TOPO"  (site-interactions.js)
   ══════════════════════════════════════════════════ */
html body #pt-totop {
  position: fixed;
  right: 18px; bottom: 18px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50% !important;
  background: var(--grad-brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 26px rgba(59,130,246,0.4) !important;
  cursor: pointer;
  z-index: 9997;
  opacity: 0;
  transform: translateY(16px) scale(.85);
  pointer-events: none;
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease-bounce) !important;
}
html body #pt-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
html body #pt-totop:hover { box-shadow: 0 12px 34px rgba(59,130,246,0.55) !important; }

/* ══════════════════════════════════════════════════
   ÍCONES (FontAwesome)
   ══════════════════════════════════════════════════ */
html body .fa,
html body .fas,
html body .far,
html body .fab,
html body [class^="fa-"],
html body [class*=" fa-"] {
  font-size: 1em !important;
  line-height: inherit !important;
  vertical-align: -0.05em;
}
html body button > .fa-icon + *,
html body a > .fa-icon + * { margin-left: .4rem; }
html body button .fa-icon,
html body a .fa-icon { margin-right: .45rem; }

/* Skip link */
html body .politapp-skip {
  position: fixed; left: 50%; top: -60px; transform: translateX(-50%);
  z-index: 10001; background: var(--accent); color: #fff;
  padding: .55rem 1rem; border-radius: 0 0 10px 10px; font-weight: 600;
  text-decoration: none; transition: top var(--dur) var(--ease);
}
html body .politapp-skip:focus { top: 0; outline: none; }

/* ══════════════════════════════════════════════════
   RESPONSIVIDADE
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  html body .wrap,
  html body .page { max-width: 100% !important; }
}

@media (max-width: 768px) {
  html body th, html body td {
    padding: .5rem .6rem !important;
    font-size: max(.78rem, .85em) !important;
  }
  html body button:not(.pn-toggle),
  html body a.social-mini,
  html body .pager button {
    min-height: 42px !important;
  }
  html body input:not([type=checkbox]):not([type=radio]),
  html body select {
    min-height: 42px !important;
    font-size: 16px !important;
  }
  html body .filters,
  html body .grid,
  html body .cards,
  html body .cols,
  html body .grid-2,
  html body .grid-3 {
    grid-template-columns: 1fr !important;
  }
  html body .table-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  html body .panel { padding: 1rem 1rem !important; }
  html body #pt-toasts { left: 16px; right: 16px; max-width: none; }
  /* tooltip vira topo-fixo em telas pequenas para não estourar */
  html body [data-tip]::after { white-space: normal; }
}

@media (max-width: 480px) {
  html body h1 { font-size: clamp(1.35rem, 6vw, 1.75rem) !important; }
  html body .actions { width: 100%; }
  html body .actions button { flex: 1 1 auto; }
  html body #pt-totop { width: 42px; height: 42px; right: 12px; bottom: 12px; }
}

/* UX refresh — conteúdo calmo; o fundo existente segue como protagonista. */
:root {
  --surface: rgba(9, 19, 37, .88);
  --surface2: rgba(13, 26, 47, .94);
  --border: rgba(148, 163, 184, .18);
  --text: #f1f5f9;
  --muted: #a8b5c7;
  --accent: #60a5fa;
  --radius: 12px;
  --shadow-sm: 0 12px 32px rgba(0, 0, 0, .28);
}
html body { line-height: 1.55 !important; }
html body h1 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #f8fafc !important;
  max-width: 28ch;
}
html body header { margin-bottom: clamp(1.25rem, 3vw, 2rem) !important; }
html body header p,
html body header .lead,
html body header .lede { max-width: 78ch !important; color: var(--muted) !important; }
html body .panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  overflow: visible !important;
}
html body .panel::before { content: none !important; }
html body .panel:hover {
  transform: none !important;
  border-color: rgba(148, 163, 184, .26) !important;
  box-shadow: var(--shadow-sm) !important;
}
html body button:not(.pn-toggle):not(.pt-tab),
html body a.btn,
html body a.button {
  background: #2563eb !important;
  color: #fff !important;
  box-shadow: none !important;
}
html body button:not(.pn-toggle):not(.pt-tab):hover,
html body a.btn:hover,
html body a.button:hover {
  background: #1d4ed8 !important;
  box-shadow: none !important;
  transform: none !important;
}
html body button.secondary,
html body button.btn-ghost {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
html body input:not([type=checkbox]):not([type=radio]):not([type=range]),
html body select,
html body textarea {
  min-height: 44px;
  background: rgba(3, 10, 23, .72) !important;
  border-color: rgba(148, 163, 184, .25) !important;
}
html body :focus-visible {
  outline: 3px solid rgba(96, 165, 250, .75) !important;
  outline-offset: 3px !important;
}
html body .table-wrap { background: rgba(6, 14, 28, .88) !important; }
html body th { background: #101d31 !important; color: #cbd5e1 !important; }
html body tr:hover td { background: rgba(96, 165, 250, .07) !important; }
html body .actions { gap: .65rem !important; }
html body .note {
  color: #b8c5d6 !important;
  background: rgba(96, 165, 250, .07) !important;
  border-left: 3px solid rgba(96, 165, 250, .55) !important;
  padding: .75rem .9rem !important;
}
@media (prefers-reduced-motion: no-preference) {
  html body .wrap > * { animation-duration: .24s !important; }
}
@media (max-width: 768px) {
  html body .wrap,
  html body .page,
  html body > .wrap,
  html body > .page {
    max-width: 100% !important;
    padding-inline: 1rem !important;
  }
  html body .panel { padding: 1rem !important; }
  html body table { font-size: .8rem !important; }
}