/* ============================================================
   CNPA Boleto · Design System "Maré" — base + micro-animações
   Portado 1:1 do bundle Claude Design (index.html <style>).
   Decorativo e seguro: se um quadro congelar, nada de conteúdo
   some. Respeita prefers-reduced-motion.
   Depende de tokens.css (variáveis --mare-*, --nevoa-*, etc).
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: var(--font-sans); }

.ps-scroll::-webkit-scrollbar { width: 0; height: 0; }
.ps-scroll { scrollbar-width: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--nevoa-300); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

@keyframes cnpaFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cnpaPop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes cnpaToast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cnpaSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes cnpaIn { from { transform: translateY(8px); } to { transform: none; } }
@keyframes cnpaShimmer { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }
@keyframes cnpaSpin { to { transform: rotate(360deg); } }
/* Entrada de tela: fade (sem deslocamento — o slide cnpaIn dava um
   "soco" visual a cada navegação). 400ms: acima dos tokens de motion
   (--dur-slow 250ms) de propósito — fade de tela inteira precisa de um
   pouco mais para ser percebido. */
.cnpa-enter { animation: cnpaFade 400ms var(--ease-out); }
/* Mesma tela recarregada (troca de filtro/refresh — classe via cnpa.js
   pageEnterOnce): sem a entrada; só navegação real anima. */
.cnpa-same-page .cnpa-enter { animation: none; }
.cnpa-skel { background: linear-gradient(90deg, var(--nevoa-100) 25%, var(--nevoa-200) 37%, var(--nevoa-100) 63%); background-size: 200% 100%; animation: cnpaShimmer 1.4s ease-in-out infinite; border-radius: 8px; }
.cnpa-spin { animation: cnpaSpin 0.8s linear infinite; }

/* Foco visível em todos os controles (acessibilidade — anel ciano da Maré) */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2.5px solid var(--ring); outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
@media (prefers-reduced-motion: reduce) {
  .cnpa-enter { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   Micro-animações marítimas (água, sol, maré, espuma)
   ============================================================ */
.cnpa-water { background: linear-gradient(110deg, var(--mare-700), var(--mare-500), var(--mare-400), var(--mare-500), var(--mare-700)) !important; background-size: 280% 100% !important; animation: cnpaWaterFlow 7s linear infinite; }
@keyframes cnpaWaterFlow { to { background-position: -280% 0; } }
.cnpa-shimmer { position: relative; overflow: hidden; }
.cnpa-shimmer::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36%; left: -45%; pointer-events: none; z-index: 3; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); animation: cnpaSweep 6s ease-in-out infinite; }
.cnpa-shimmer.d1::after { animation-delay: 1.1s; } .cnpa-shimmer.d2::after { animation-delay: 2.2s; } .cnpa-shimmer.d3::after { animation-delay: 3.3s; }
@keyframes cnpaSweep { 0% { left: -45%; } 55%, 100% { left: 130%; } }
.cnpa-tide { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; opacity: .5; z-index: 0; pointer-events: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='6'><path d='M0 3 C 5 0,5 6,10 3 S 15 0,20 3' fill='none' stroke='%2322B8CF' stroke-width='1.3'/></svg>") repeat-x; background-size: 20px 6px; animation: cnpaFoam 3.2s linear infinite; }
@keyframes cnpaFoam { to { background-position: 20px 0; } }

/* ícones vivos */
.cnpa-ic-float svg { animation: cnpaFloat 2.6s ease-in-out infinite; }
@keyframes cnpaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
.cnpa-ic-sway svg { animation: cnpaSway 3s ease-in-out infinite; transform-origin: 50% 40%; }
@keyframes cnpaSway { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.cnpa-ic-pulse svg { animation: cnpaPulseIc 1.6s ease-in-out infinite; }
@keyframes cnpaPulseIc { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
.cnpa-ic-bob svg { animation: cnpaBob 2.6s ease-in-out infinite; }
@keyframes cnpaBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.cnpa-ic-fade svg { animation: cnpaFadeIc 2.8s ease-in-out infinite; }
@keyframes cnpaFadeIc { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.cnpa-ic-draw svg path { stroke-dasharray: 16; animation: cnpaDraw 3.4s ease-in-out infinite; }
@keyframes cnpaDraw { 0% { stroke-dashoffset: 16; } 28%, 100% { stroke-dashoffset: 0; } }
.cnpa-badge svg *, .cnpa-ic-pulse svg *, .cnpa-ic-sway svg * { transform-box: fill-box; transform-origin: center; }
.cnpa-water:hover svg:last-child { animation: cnpaSail 1.1s var(--ease-out) infinite; }
@keyframes cnpaSail { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .cnpa-water, .cnpa-shimmer::after, .cnpa-tide, .cnpa-badge svg, [class*="cnpa-ic-"] svg, [class*="cnpa-ic-"] svg path { animation: none !important; }
}

/* ====== Botões — micro-animações por tipo ====== */
.cnpa-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
/* gap herda o valor de .btn/.btn-sm/.btn-lg (8/7/9px) — fiel ao bundle (ds.jsx:116,
   que aplica o gap no .cnpa-btn-in, não no .btn). Sem isto o ícone cola no texto. */
.cnpa-btn-in { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: inherit; }
.cnpa-btn:not(:disabled):hover { transform: translateY(-1px); }
.cnpa-btn:not(:disabled):active { transform: translateY(1px); }
/* primário — corrente de água + onda de luz varrendo + barquinho */
.cnpa-btn-primary { position: relative; }
.cnpa-btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); animation: cnpaSweep 3.4s ease-in-out infinite; }
.cnpa-btn-primary:not(:disabled):hover { box-shadow: 0 16px 34px rgba(14,124,134,0.38) !important; }
/* secundário — sol: brilho + giro do ícone */
.cnpa-btn-sun:not(:disabled):hover { box-shadow: 0 0 22px 1px rgba(244,162,59,.6) !important; }
.cnpa-btn-sun:not(:disabled):hover .cnpa-btn-in svg { animation: cnpaSunSpin 5s linear infinite; filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
@keyframes cnpaSunSpin { to { transform: rotate(360deg); } }
/* contorno "maré" — BORDA NA LINHA D'ÁGUA  (bundle Claude Design CMN5ohD, 2026-06-08)
   1:1 com o HTML do design: uma var --tide (registrada via @property p/ poder
   transicionar) comanda, sincronizadas, as 3 camadas-filho injetadas em todo
   .cnpa-btn-tide (.cnpa-tide-water / .cnpa-tide-crest / .cnpa-tide-edge):
     • água   → height = var(--tide)              (enche de baixo p/ cima)
     • espuma → bottom = var(--tide) + animação   (faixa ondulada DESLIZA na linha)
     • borda  → clip-path inset(... var(--tide))  (some sob a linha d'água)
   Única adaptação ao CNPA Boleto: a transição leva !important — senão o .btn/.cnpa-btn
   (carregados depois) redefinem `transition` e tiram --tide da lista → maré instantânea
   ("o que mudou aqui"). As camadas são injetadas por JS (base.html) → mesmo DOM do
   protótipo, sem editar cada template. A "borda" inset do .btn-outline fica só como
   fallback até as camadas existirem (:has) — a borda real, recortável, é a .edge. */
@property --tide { syntax: "<percentage>"; inherits: true; initial-value: 2%; }

.cnpa-btn-tide {
  --tide: 2%;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--nevoa-0);
  color: var(--mare-700);
  transition: --tide .65s var(--ease-out), color .4s var(--ease-out),
              transform var(--dur-fast) var(--ease-out) !important;
}
/* com as camadas presentes, desliga a borda inset do .btn-outline (a borda real é a .edge);
   sem elas (pré-JS / sem JS) o botão mantém a borda outline como fallback gracioso. */
.cnpa-btn-tide:has(.cnpa-tide-edge) { box-shadow: none !important; }

/* água que sobe (mare-50 → mare-100) — cantos inferiores acompanham o botão */
.cnpa-tide-water {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: var(--tide); pointer-events: none;
  background: linear-gradient(180deg, var(--mare-50), var(--mare-100));
}
.cnpa-tide-water::before { /* brilho na superfície da água */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
/* espuma deslizando exatamente na linha d'água (opacidade cresce com a maré) */
.cnpa-tide-crest {
  position: absolute; left: 0; right: 0; z-index: 1; height: 7px;
  bottom: var(--tide); transform: translateY(50%); pointer-events: none;
  opacity: calc(min(var(--tide) / 6%, 1));
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='7'><path d='M0 4 C 5.5 0,5.5 7,11 4 S 16.5 0,22 4' fill='none' stroke='%230E7C86' stroke-width='1.4'/></svg>") repeat-x;
  background-size: 22px 7px;
  animation: cnpaTideFoam 2.6s linear infinite;
}
@keyframes cnpaTideFoam { to { background-position: 22px 0; } }
/* a borda, recortada na linha d'água: inset inferior = var(--tide) → some sob a água */
.cnpa-tide-edge {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 1.8px solid var(--mare-600); border-radius: var(--radius-md);
  clip-path: inset(0 0 var(--tide) 0 round var(--radius-md));
}
.cnpa-btn-tide:not(:disabled):hover { --tide: 87%; color: var(--mare-800); }
/* fantasma — linha d'água ondulando */
.cnpa-btn-wave::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 7px; height: 6px; z-index: 0; opacity: 0; transition: opacity .3s; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='6'><path d='M0 3 C 4 0,4 6,8 3 S 12 0,16 3' fill='none' stroke='%230F636C' stroke-width='1.5'/></svg>") repeat-x; background-size: 16px 6px; }
.cnpa-btn-wave:not(:disabled):hover::after { opacity: 1; animation: cnpaFoam 1s linear infinite; }
/* perigo — anel pulsa + ícone balança */
.cnpa-btn-alert:not(:disabled):hover { animation: cnpaDangerPulse 1.3s ease-in-out infinite; }
@keyframes cnpaDangerPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 0 5px rgba(239,68,68,.22); } }
.cnpa-btn-alert:not(:disabled):hover .cnpa-btn-in svg { animation: cnpaShake .55s ease-in-out infinite; }
@keyframes cnpaShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-13deg); } 75% { transform: rotate(13deg); } }
@media (prefers-reduced-motion: reduce) {
  .cnpa-btn-primary::after, .cnpa-btn-tide, .cnpa-tide-crest, .cnpa-btn-wave::after, .cnpa-btn-sun:hover .cnpa-btn-in svg, .cnpa-btn-alert:hover, .cnpa-btn-alert:hover .cnpa-btn-in svg { animation: none !important; transition: none !important; }
}
input[type="checkbox"] { cursor: pointer; }

/* ====== Filtros & Dropdowns — entrada/abertura (bundle DBqNQhkY) ======
   Keyframes do contrato "Cobrancas - Filtro e Dropdown.html"; as classes
   que os usam vivem em filters.css (.filter-* / .dd-*). */
/* entrada dos chips — Pop */
@keyframes cnpaFilEnterPop { 0% { opacity: 0; transform: scale(.82); } 60% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
/* destaque do filtro — Pop */
@keyframes cnpaFilHlPop { 0% { transform: scale(.84); opacity: .35; } 55% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
/* ícone do filtro selecionado — Pulsar */
@keyframes cnpaFilIcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
/* menu do dropdown + opções em cascata */
@keyframes cnpaSelFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cnpaSelOptDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }