:root {
  --blue: #1A4F9C; --blue-dark: #0d3a7a; --blue-light: #EEF3FB;
  --red: #C0272D; --green: #10B981; --yellow: #F59E0B; --purple: #8B5CF6;
  --gray: #64748B; --gray-light: #F4F6FA; --white: #fff;
  --border: #E2E8F0; --text: #1a2a4a; --text-light: #6b7c99;
  --sidebar-w: 240px; --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --card-radius: 16px; --transition: all .2s cubic-bezier(.4,0,.2,1);
  --bg-page: #F4F6FA; --bg-card: #fff; --bg-sidebar: #0d3a7a;
  --border-color: #E2E8F0; --text-main: #1a2a4a; --text-muted: #6b7c99;
  /* Fundo de realce (cabecalho de tabela, linha sob o mouse). Ficou sem definicao:
     todo `background:var(--bg-hover)` do painel resolvia para TRANSPARENTE, e onde a
     celula era sticky a coluna de baixo aparecia por tras (Acoes x Responsavel nos
     agendamentos, so em tela estreita, quando a tabela rola de lado). */
  --bg-hover: #F1F5F9;
}
body.dark {
  --bg-page: #0f172a; --bg-card: #1e293b; --bg-sidebar: #020c1b;
  --border-color: #334155; --text-main: #e2e8f0; --text-muted: #94a3b8;
  --blue-light: #1e3a5f; --gray-light: #1e293b; --white: #1e293b;
  --border: #334155; --text: #e2e8f0; --text-light: #94a3b8;
  --bg-hover: #273449;
}
body { background: var(--bg-page); color: var(--text-main); transition: background .3s, color .3s; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
body { display: flex; min-height: 100vh; }

/* Custom scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(99,102,241,.25); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(99,102,241,.45); }
body.dark ::-webkit-scrollbar-thumb { background:rgba(148,163,184,.2); }
body.dark ::-webkit-scrollbar-thumb:hover { background:rgba(148,163,184,.4); }
/* Firefox */
* { scrollbar-width:thin; scrollbar-color:rgba(99,102,241,.25) transparent; }
body.dark * { scrollbar-color:rgba(148,163,184,.2) transparent; }

/* Navbar (top) — two-row layout */
#navbar { position:fixed; top:0; left:0; right:0; background:var(--bg-sidebar); color:#fff; z-index:100; display:flex; flex-direction:column; box-shadow:0 2px 16px rgba(0,0,0,.25); transition:background .3s; }
#navbar-top { display:flex; align-items:center; padding:0 16px; height:46px; gap:10px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; }
#navbar-bottom { display:flex; align-items:center; padding:0 12px; height:38px; gap:1px; background:rgba(0,0,0,.15); }
#navbar-logo { display:flex; flex-direction:column; flex-shrink:0; text-decoration:none; cursor:default; gap:2px; }
#navbar-logo img { height:28px; width:auto; object-fit:contain; display:block; }
#navbar-logo .sub { font-size:8.5px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; margin-top:1px; }
#navbar-nav { display:flex; align-items:center; gap:1px; flex:1; min-width:0; overflow:visible; }
.nav-item { display:flex; align-items:center; gap:6px; padding:5px 10px; cursor:pointer; color:rgba(255,255,255,.85); font-size:13px; font-weight:500; border-radius:7px; transition:background .15s, color .15s; white-space:nowrap; position:relative; background:none; }
.nav-item:hover { background:rgba(255,255,255,.12); color:#fff; }
.nav-item.active { background:rgba(255,255,255,.18); color:#fff; }
.nav-item .icon { width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-svg { width:15px; height:15px; display:block; color:rgba(255,255,255,.75); transition:color .15s; }
.nav-item:hover .nav-svg, .nav-item.active .nav-svg { color:#fff; }
/* Dropdown items use different colors */
.nav-dropdown .nav-item { color:var(--text-main); background:none; padding:8px 12px; }
.nav-dropdown .nav-item:hover { background:var(--bg-page); color:var(--text-main); }
.nav-dropdown .nav-item.active { background:var(--blue-light); color:var(--blue); }
.nav-dropdown .nav-item .nav-svg { color:var(--text-muted); }
.nav-dropdown .nav-item:hover .nav-svg { color:var(--blue); }
.nav-dropdown .nav-item.active .nav-svg { color:var(--blue); }
/* Nav groups */
.nav-group { position:relative; }
.nav-group-btn { display:flex; align-items:center; gap:6px; padding:5px 10px; cursor:pointer; color:rgba(255,255,255,.85); font-size:13px; font-weight:500; border-radius:7px; transition:background .15s, color .15s; white-space:nowrap; background:none; border:none; }
.nav-group:hover > .nav-group-btn, .nav-group-btn.active { background:rgba(255,255,255,.12); color:#fff; }
.nav-group-btn.active { background:rgba(255,255,255,.18) !important; }
.nav-group-btn .nav-svg { color:rgba(255,255,255,.75); }
.nav-group-btn:hover .nav-svg, .nav-group-btn.active .nav-svg { color:#fff; }
.nav-chevron { transition:transform .2s; opacity:.55; flex-shrink:0; }
.nav-group:hover .nav-chevron { transform:rotate(180deg); }
/* Dropdown panel */
/* SEM VÃO entre o botão e o menu (top:100%): não há "zona morta" pra atravessar, então o menu
   não fecha ao mover o mouse do botão para os itens. Sem ponte (era cortada pelo overflow) e
   sem atraso de fechamento (que deixava o menu grudado bloqueando cliques). Fecha rápido só
   quando o mouse realmente sai do conjunto botão+menu. */
.nav-dropdown { position:absolute; top:100%; left:0; background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:5px; min-width:185px; box-shadow:0 8px 32px rgba(0,0,0,.18); opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .14s ease, transform .14s ease, pointer-events 0s .14s; z-index:200; max-height:calc(100vh - 80px); overflow-y:auto; overflow-x:hidden; }
.nav-group:hover .nav-dropdown { opacity:1; pointer-events:auto; transform:translateY(0); transition:opacity .14s ease, transform .14s ease; }
/* Itens sempre visíveis e clicáveis na hora (a animação em cascata com delays causava o flicker
   e deixava itens inclicáveis ao mover o mouse). Desligada de vez. */
.nav-group:hover .nav-dropdown .nav-item { animation:none !important; opacity:1 !important; transform:none !important; }
/* Navbar right (lives inside #navbar-top) */
#navbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
/* User dropdown */
#navbar-user { position:relative; }
#navbar-user-btn { display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:8px; cursor:pointer; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); transition:background .15s; }
#navbar-user-btn:hover { background:rgba(255,255,255,.18); }
#navbar-user-dropdown { position:absolute; top:calc(100% + 8px); right:0; background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:8px; min-width:170px; box-shadow:0 8px 32px rgba(0,0,0,.18); opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .18s, transform .18s; z-index:200; }
#navbar-user-dropdown::before { content:''; position:absolute; top:-12px; left:0; right:0; height:14px; }
#navbar-user:hover #navbar-user-dropdown { opacity:1; pointer-events:auto; transform:translateY(0); }

/* ── SVG Icon Animations — contained, GPU-only (transform+opacity) ──── */

/* Shared: SVG child elements animate inside their own bounding box */
.nav-svg * { transform-box:fill-box; transform-origin:center; }

/* Dashboard bars: grow from bottom sequentially */
.nav-svg .bar { transform-origin:bottom center; }
@keyframes barUp { from{transform:scaleY(.15);opacity:.4} to{transform:scaleY(1);opacity:1} }
.nav-item:hover .bar-1 { animation:barUp .38s .00s cubic-bezier(.34,1.4,.64,1) both; }
.nav-item:hover .bar-2 { animation:barUp .38s .07s cubic-bezier(.34,1.4,.64,1) both; }
.nav-item:hover .bar-3 { animation:barUp .38s .14s cubic-bezier(.34,1.4,.64,1) both; }

/* Clientes: two people bob up independently */
@keyframes personBob { 0%{transform:translateY(0)} 40%{transform:translateY(-2.5px)} 70%{transform:translateY(.6px)} 100%{transform:translateY(0)} }
.nav-item:hover .person-1 { animation:personBob .45s .00s ease both; }
.nav-item:hover .person-2 { animation:personBob .45s .10s ease both; }

/* Cotações: text lines reveal from left */
.nav-svg .doc-line { transform-origin:left center; }
@keyframes lineReveal { from{transform:scaleX(0);opacity:.3} to{transform:scaleX(1);opacity:1} }
.nav-item:hover .doc-line-1 { animation:lineReveal .32s .08s ease both; }
.nav-item:hover .doc-line-2 { animation:lineReveal .32s .18s ease both; }

/* Sinistros: exclamation + triangle flash */
@keyframes alertFlash { 0%,100%{opacity:1} 25%{opacity:.1} 55%{opacity:.95} 80%{opacity:.3} }
.nav-item:hover .alert-mark { animation:alertFlash .55s ease both; }

/* Busca: glass tilts to scan */
@keyframes glassTilt { 0%{transform:rotate(0)} 50%{transform:rotate(-18deg)} 100%{transform:rotate(0)} }
.nav-item:hover .search-g { animation:glassTilt .40s ease both; }

/* Pin: drops from above, sticks */
@keyframes pinDrop { 0%{transform:translateY(-5px);opacity:.3} 65%{transform:translateY(1px);opacity:1} 100%{transform:translateY(0);opacity:1} }
.nav-item:hover .pin-g { animation:pinDrop .40s cubic-bezier(.34,1.5,.64,1) both; }

/* Assistências: cross beats once */
@keyframes crossBeat { 0%,100%{transform:scale(1)} 45%{transform:scale(1.18)} }
.nav-item:hover .cross-g { animation:crossBeat .38s ease both; }

/* Documento: lifts slightly */
@keyframes docLift { 0%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-2px) rotate(-4deg)} 100%{transform:translateY(0) rotate(0)} }
.nav-item:hover .file-g { animation:docLift .40s ease both; }

/* Financeiro: trend line slides in from left */
@keyframes trendIn { from{transform:translateX(-3px);opacity:.2} to{transform:translateX(0);opacity:1} }
.nav-item:hover .trend-g { animation:trendIn .35s ease both; }

/* Importar: arrow drops down */
@keyframes arrowDrop { 0%{transform:translateY(-4px);opacity:.3} 65%{transform:translateY(1px);opacity:1} 100%{transform:translateY(0);opacity:1} }
.nav-item:hover .down-g { animation:arrowDrop .38s cubic-bezier(.34,1.5,.64,1) both; }

/* Relatórios: frame tilts, lines reveal from left sequentially */
@keyframes relFrameTilt { 0%{transform:rotate(0)} 35%{transform:rotate(-3deg)} 65%{transform:rotate(1.5deg)} 100%{transform:rotate(0)} }
.nav-item:hover .rel-frame { animation:relFrameTilt .42s ease both; transform-origin:center; }
.rel-line { transform-origin:left center; }
.nav-item:hover .rel-line-1 { animation:lineReveal .30s .06s ease both; }
.nav-item:hover .rel-line-2 { animation:lineReveal .30s .14s ease both; }
.nav-item:hover .rel-line-3 { animation:lineReveal .30s .22s ease both; }

/* Retenção: face shakes, exclamation flashes */
@keyframes retShake { 0%{transform:rotate(0)} 20%{transform:rotate(-6deg)} 40%{transform:rotate(6deg)} 60%{transform:rotate(-3deg)} 80%{transform:rotate(2deg)} 100%{transform:rotate(0)} }
@keyframes retMarkFlash { 0%,100%{opacity:1} 30%{opacity:.1} 65%{opacity:1} 85%{opacity:.2} }
.nav-item:hover .ret-g { animation:retShake .5s ease both; transform-origin:center; }
.nav-item:hover .ret-mark { animation:retMarkFlash .55s ease both; }

/* Mapa: pin drops and bounces */
@keyframes mapaBounce { 0%{transform:translateY(-5px);opacity:.3} 50%{transform:translateY(1.5px);opacity:1} 70%{transform:translateY(-1.5px)} 100%{transform:translateY(0);opacity:1} }
@keyframes mapaDotPulse { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
.nav-item:hover .mapa-g { animation:mapaBounce .48s cubic-bezier(.34,1.5,.64,1) both; }
.nav-item:hover .mapa-dot { animation:mapaDotPulse .4s .2s ease both; transform-origin:center; }

/* Régua: bar stretches, ticks grow from bottom sequentially */
@keyframes reguaStretch { 0%{transform:scaleX(1)} 40%{transform:scaleX(.9)} 70%{transform:scaleX(1.04)} 100%{transform:scaleX(1)} }
.regua-tick { transform-origin:bottom center; }
@keyframes tickGrow { from{transform:scaleY(0);opacity:.3} to{transform:scaleY(1);opacity:1} }
.nav-item:hover .regua-bar { animation:reguaStretch .42s ease both; transform-origin:center; }
.nav-item:hover .regua-t1 { animation:tickGrow .3s .05s cubic-bezier(.34,1.4,.64,1) both; }
.nav-item:hover .regua-t2 { animation:tickGrow .3s .12s cubic-bezier(.34,1.4,.64,1) both; }
.nav-item:hover .regua-t3 { animation:tickGrow .3s .19s cubic-bezier(.34,1.4,.64,1) both; }
.nav-item:hover .regua-t4 { animation:tickGrow .3s .26s cubic-bezier(.34,1.4,.64,1) both; }

/* Gestão Saúde nav: whole calendar beats on button hover */
@keyframes gsCalBeat { 0%{transform:scale(1)} 25%{transform:scale(1.18)} 42%{transform:scale(.94)} 62%{transform:scale(1.1)} 100%{transform:scale(1)} }
.nav-group-btn:hover .gs-g { animation:gsCalBeat .48s ease both; }
/* Visão Geral: 4 squares pop in staggered (Patrimonial, Saúde e Gestão Saúde) */
@keyframes cellPop { from{transform:scale(0);opacity:.2} to{transform:scale(1);opacity:1} }
.nav-item:hover .gs-cell-1 { animation:cellPop .28s .04s cubic-bezier(.34,1.5,.64,1) both; }
.nav-item:hover .gs-cell-2 { animation:cellPop .28s .11s cubic-bezier(.34,1.5,.64,1) both; }
.nav-item:hover .gs-cell-3 { animation:cellPop .28s .18s cubic-bezier(.34,1.5,.64,1) both; }
.nav-item:hover .gs-cell-4 { animation:cellPop .28s .25s cubic-bezier(.34,1.5,.64,1) both; }
/* Agendamentos: clock hand ticks forward */
@keyframes gsClockTick { 0%{transform:rotate(-20deg);opacity:.5} 65%{transform:rotate(5deg);opacity:1} 100%{transform:rotate(0);opacity:1} }
.nav-item:hover .gs-clock-hand { animation:gsClockTick .42s cubic-bezier(.34,1.5,.64,1) both; }
/* Atestados: document lines reveal from left */
.nav-item:hover .gs-doc-l1 { animation:lineReveal .28s .05s ease both; }
.nav-item:hover .gs-doc-l2 { animation:lineReveal .28s .13s ease both; }
.nav-item:hover .gs-doc-l3 { animation:lineReveal .28s .21s ease both; }

/* Controle de Senhas: cadeado quica, Prontuários: cruz cresce */
@keyframes gsLockBounce { 0%{transform:translateY(0)} 35%{transform:translateY(-3px)} 65%{transform:translateY(.8px)} 100%{transform:translateY(0)} }
@keyframes gsPronCross { from{transform:scale(0) rotate(-45deg);opacity:.2} to{transform:scale(1) rotate(0);opacity:1} }
.nav-item:hover .gs-lock-shackle { animation:gsLockBounce .4s cubic-bezier(.34,1.5,.64,1) both; }
.nav-item:hover .gs-pron-cross { animation:gsPronCross .32s .06s cubic-bezier(.34,1.5,.64,1) both; }

/* Agente: head bobs, gear spins, eyes blink */
@keyframes agenteBob { 0%{transform:translateY(0)} 40%{transform:translateY(-2px)} 70%{transform:translateY(.5px)} 100%{transform:translateY(0)} }
@keyframes agenteGearSpin { from{transform:rotate(0)} to{transform:rotate(90deg)} }
@keyframes agenteBlink { 0%,42%,58%,100%{transform:scaleY(1)} 50%{transform:scaleY(.1)} }
.nav-item:hover .agente-g { animation:agenteBob .5s ease both; }
.nav-item:hover .agente-gear { animation:agenteGearSpin .5s ease both; transform-origin:12.5px 4px; }
.nav-item:hover .agente-eye { animation:agenteBlink .5s .15s ease both; transform-origin:center; }

/* ── Agente de Organização ─────────────────────────────────── */
@keyframes agenteScan {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
@keyframes agenteCardIn {
  from { opacity:0; transform:translateY(16px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes modalOverlayIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes modalOverlayOut {
  from { opacity:1; }
  to   { opacity:0; }
}
@keyframes modalBoxIn {
  from { opacity:0; transform:scale(.94) translateY(24px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}
@keyframes modalBoxOut {
  from { opacity:1; transform:scale(1)   translateY(0); }
  to   { opacity:0; transform:scale(.94) translateY(16px); }
}
@keyframes agenteFixPulse {
  0%   { box-shadow:0 0 0 0 rgba(16,185,129,.4); }
  70%  { box-shadow:0 0 0 12px rgba(16,185,129,0); }
  100% { box-shadow:0 0 0 0 rgba(16,185,129,0); }
}
@keyframes agenteCheckPop {
  0%   { transform:scale(0) rotate(-20deg); opacity:0; }
  60%  { transform:scale(1.2) rotate(5deg); opacity:1; }
  100% { transform:scale(1) rotate(0); opacity:1; }
}
@keyframes agenteProgress {
  from { width:0; }
}
@keyframes agenteScanLine {
  0%   { top:0; opacity:1; }
  100% { top:100%; opacity:0; }
}
@keyframes agenteGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(99,102,241,.2); }
  50%     { box-shadow:0 0 20px 4px rgba(99,102,241,.25); }
}
.agente-scan-active {
  background:linear-gradient(90deg, transparent 30%, rgba(99,102,241,.08) 50%, transparent 70%);
  background-size:200% 100%;
  animation:agenteScan 1.5s ease-in-out infinite;
}
.agente-issue-card {
  background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px;
  padding:16px; cursor:pointer; transition:all .2s;
  animation:agenteCardIn .4s cubic-bezier(.22,1,.36,1) both;
  position:relative; overflow:hidden;
}
.agente-issue-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08); border-color:var(--blue); }
.agente-issue-card.fixing {
  animation:agenteGlow 1s ease-in-out infinite;
  pointer-events:none;
}
.agente-issue-card.fixed {
  border-color:#10B981 !important;
  animation:agenteFixPulse .6s ease both;
}
.agente-issue-card.fixed::after {
  content:''; position:absolute; top:8px; right:8px; width:24px; height:24px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8,12 11,15 16,9'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:agenteCheckPop .4s .1s cubic-bezier(.34,1.5,.64,1) both;
}
.agente-progress-bar {
  height:4px; border-radius:2px; background:var(--border-color); overflow:hidden; margin-top:10px;
}
.agente-progress-fill {
  height:100%; border-radius:2px; background:linear-gradient(90deg,#6366F1,#10B981);
  transition:width .4s ease;
}
.agente-robot {
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
  box-shadow:0 4px 14px rgba(99,102,241,.3);
}
.agente-stat { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); }
.agente-stat-num { font-size:20px; font-weight:800; color:var(--text-main); }
.agente-detail-row {
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border-color);
  font-size:13px; transition:background .12s;
}
.agente-detail-row:hover { background:var(--bg-page); }
.agente-detail-row:last-child { border-bottom:none; }
.agente-tag { display:inline-block; padding:2px 8px; border-radius:6px; font-size:10px; font-weight:700; }
/* ── Import hourglass animation ─────────────────────────── */
@keyframes hgFlip { 0%,45%{transform:rotate(0)} 50%,95%{transform:rotate(180deg)} 100%{transform:rotate(360deg)} }
@keyframes hgSandFlow { 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-8} }
@keyframes hgSandTop { 0%,49%{opacity:1} 50%,99%{opacity:.3} }
@keyframes hgSandBot { 0%,49%{opacity:.3} 50%,99%{opacity:1} }
.import-hourglass { animation:hgFlip 2.4s cubic-bezier(.4,0,.2,1) infinite; transform-origin:center; }
.hg-sand-flow { animation:hgSandFlow .8s linear infinite; }
.hg-sand-top { animation:hgSandTop 2.4s ease infinite; transform-origin:center; }
.hg-sand-bot { animation:hgSandBot 2.4s ease infinite; transform-origin:center; }

.agente-scan-line {
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#6366F1,transparent);
  animation:agenteScanLine 1.2s ease-in-out infinite;
  pointer-events:none;
}

/* ══ Chat Inteligente — "Dossiê" ═══════════════════════════════════════════
   O chat saiu do roxo-indigo (a cor que todo produto de IA usa) e voltou para o
   azul da casa. O sotaque quente e o AMBAR DE CARIMBO, reservado a uma coisa so:
   a marca de origem embaixo da resposta, que diz onde o dado foi buscado. E o
   unico lugar barulhento da tela, de proposito: e o ponto da ferramenta.
   Tokens ficam no escopo de .chat-layout — nada vaza para o resto do painel. */
.chat-layout {
  --cx-ink:#0C2340; --cx-blue:#1A4F9C; --cx-azure:#3B82C4;
  --cx-stamp:#B45309; --cx-stamp-bg:rgba(180,83,9,.07);
  --cx-rule:rgba(12,35,64,.11);
  --cx-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --cx-ease:cubic-bezier(.22,1,.36,1);
  --cx-fill:#1A4F9C;
  --cx-lift:0 1px 2px rgba(12,35,64,.05), 0 10px 28px -14px rgba(12,35,64,.30);
  display:flex; height:calc(100vh - 136px); overflow:hidden;
}
body.dark .chat-layout {
  --cx-ink:#E6EDF7; --cx-blue:#4E8DD8; --cx-azure:#7FB2E8;
  --cx-stamp:#F0A868; --cx-stamp-bg:rgba(240,168,104,.10);
  --cx-fill:#1E4F8A;
  --cx-rule:rgba(226,232,240,.13);
  --cx-lift:0 1px 2px rgba(0,0,0,.32), 0 12px 30px -14px rgba(0,0,0,.7);
}
.chat-layout :focus-visible { outline:2px solid var(--cx-azure); outline-offset:2px; border-radius:6px; }

/* ── Sidebar ── */
.chat-sidebar { width:264px; min-width:264px; background:var(--bg-sidebar); border-right:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; overflow:hidden; transition:min-width .3s var(--cx-ease), width .3s var(--cx-ease); flex-shrink:0; }
.chat-sidebar.collapsed { width:0; min-width:0; }
.chat-sidebar-head { display:flex; align-items:center; gap:9px; padding:16px 14px 12px; flex-shrink:0; }
.chat-sidebar-title { font-size:11px; font-weight:700; color:rgba(255,255,255,.62); flex:1; white-space:nowrap; overflow:hidden; font-family:var(--cx-mono); letter-spacing:.09em; text-transform:uppercase; }
.chat-sidebar-ico-btn { width:29px; height:29px; border-radius:8px; background:rgba(255,255,255,.06); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); transition:background .18s, color .18s, transform .18s var(--cx-ease); flex-shrink:0; }
.chat-sidebar-ico-btn:hover { background:rgba(255,255,255,.14); color:#fff; transform:translateY(-1px); }
.chat-sidebar-new-btn { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 12px 14px; padding:10px 12px; border-radius:11px; background:var(--cx-fill); border:1px solid rgba(255,255,255,.14); cursor:pointer; font-size:12.5px; font-weight:600; color:#fff; transition:background .18s, transform .18s var(--cx-ease), box-shadow .22s; flex-shrink:0; box-shadow:0 4px 14px -6px rgba(0,0,0,.6); }
.chat-sidebar-new-btn:hover { background:var(--cx-azure); transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(0,0,0,.7); }
.chat-sidebar-new-btn:active { transform:translateY(0); }
.chat-sidebar-body { flex:1; overflow-y:auto; padding:0 8px 12px; }
.chat-sidebar-body::-webkit-scrollbar { width:4px; }
.chat-sidebar-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:2px; }
.chat-folder-header { display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:8px; cursor:pointer; margin-bottom:2px; transition:background .16s; user-select:none; }
.chat-folder-header:hover { background:rgba(255,255,255,.05); }
.chat-folder-label { font-size:10px; font-weight:700; color:rgba(255,255,255,.42); text-transform:uppercase; letter-spacing:.09em; font-family:var(--cx-mono); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-folder-count { font-size:10px; color:rgba(255,255,255,.28); font-family:var(--cx-mono); }
/* Conversa da lista: a barra de tinta a esquerda cresce ao passar o mouse e fica
   inteira na conversa aberta. E o mesmo gesto da aba de pasta usado nas fichas. */
.chat-session-item { display:flex; align-items:center; gap:7px; padding:8px 10px 8px 16px; border-radius:9px; cursor:pointer; margin-bottom:1px; transition:background .16s; position:relative; }
.chat-session-item::before { content:''; position:absolute; left:5px; top:9px; bottom:9px; width:2px; border-radius:2px; background:var(--cx-azure); transform:scaleY(0); transform-origin:center; transition:transform .28s var(--cx-ease); }
.chat-session-item:hover { background:rgba(255,255,255,.06); }
.chat-session-item:hover::before { transform:scaleY(.5); }
.chat-session-item.active { background:rgba(59,130,196,.16); }
.chat-session-item.active::before { transform:scaleY(1); }
.chat-session-title { font-size:12px; color:rgba(255,255,255,.72); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35; }
.chat-session-item.active .chat-session-title { color:#fff; font-weight:600; }
.chat-session-date { font-size:9.5px; color:rgba(255,255,255,.3); white-space:nowrap; font-family:var(--cx-mono); }
.chat-session-del { opacity:0; width:20px; height:20px; border-radius:5px; background:rgba(220,38,38,.16); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity .16s, background .16s; }
.chat-session-item:hover .chat-session-del { opacity:1; }
.chat-session-del:hover { background:rgba(220,38,38,.34); }
.chat-sidebar-strip { width:0; overflow:hidden; display:flex; align-items:flex-start; padding-top:16px; justify-content:center; background:var(--bg-sidebar); border-right:1px solid rgba(255,255,255,.06); transition:width .3s var(--cx-ease); flex-shrink:0; }
.chat-sidebar-strip.visible { width:38px; }

/* ── Area principal ── */
.chat-main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; padding:18px 26px 18px; }
.chat-messages { flex:1; overflow-y:auto; padding:10px 0 16px; display:flex; flex-direction:column; gap:14px; }
.chat-messages::-webkit-scrollbar { width:5px; }
.chat-messages::-webkit-scrollbar-thumb { background:var(--cx-rule); border-radius:4px; }
.chat-messages::-webkit-scrollbar-thumb:hover { background:var(--cx-azure); }

/* ── Abertura: sequencia de entrada ── */
@keyframes cxSobe { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.cx-in { animation:cxSobe .52s var(--cx-ease) both; }

.cx-hero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  /* Centro OPTICO: com a barra de entrada ancorando o olhar embaixo, o centro
     geometrico parece baixo. A folga extra no pe sobe o bloco uns 40px. */
  padding:24px 20px 96px; text-align:center; }
.cx-hero-mark { width:52px; height:52px; border-radius:15px; background:var(--cx-fill); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -10px rgba(26,79,156,.75); position:relative; margin-bottom:20px; }
.cx-hero-mark::after { content:''; position:absolute; inset:0; border-radius:15px; border:1px solid rgba(255,255,255,.22); }
.cx-hero-eyebrow { font-family:var(--cx-mono); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cx-stamp); margin-bottom:10px; }
.cx-hero-title { font-size:29px; font-weight:800; letter-spacing:-.6px; color:var(--cx-ink); line-height:1.15; margin-bottom:9px; }
.cx-hero-sub { font-size:13.5px; line-height:1.65; color:var(--text-muted); max-width:44ch; margin-bottom:20px; }
/* A linha de alcance nao e enfeite: os selos sao as consultas que ESTA usuaria
   realmente pode fazer, vindas do backend. Perfil diferente ve lista diferente. */
.cx-alcance { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px; max-width:560px; margin-bottom:26px; }
.cx-alcance-lbl { font-family:var(--cx-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-right:3px; }
.cx-alcance-item { font-size:11px; color:var(--text-muted); padding:3px 9px; border-radius:20px; border:1px solid var(--cx-rule); background:var(--bg-card); white-space:nowrap; }

/* ── Fichas de sugestao ──────────────────────────────────────────────────
   Seis tons, nao seis cores avulsas: azul da casa para o panorama, ambar e
   laranja para o que tem prazo, vermelho para sinistro, teal para o que esta em
   processo e verde para o que fecha. Cada tom tem versao clara e escura aqui no
   CSS (e nao no JS) para o tema poder virar sem redesenhar a tela. */
.chat-layout {
  --t-azul:#1A4F9C;    --t-azul-b:rgba(26,79,156,.42);    --t-azul-f:rgba(26,79,156,.10);
  --t-ambar:#B45309;   --t-ambar-b:rgba(180,83,9,.42);    --t-ambar-f:rgba(180,83,9,.10);
  --t-laranja:#C2410C; --t-laranja-b:rgba(194,65,12,.42); --t-laranja-f:rgba(194,65,12,.10);
  --t-vermelho:#B91C1C;--t-vermelho-b:rgba(185,28,28,.42);--t-vermelho-f:rgba(185,28,28,.10);
  --t-teal:#0F766E;    --t-teal-b:rgba(15,118,110,.42);   --t-teal-f:rgba(15,118,110,.10);
  --t-verde:#15803D;   --t-verde-b:rgba(21,128,61,.42);   --t-verde-f:rgba(21,128,61,.10);
}
body.dark .chat-layout {
  --t-azul:#6FA8DC;    --t-azul-b:rgba(111,168,220,.40);    --t-azul-f:rgba(111,168,220,.13);
  --t-ambar:#F0A868;   --t-ambar-b:rgba(240,168,104,.40);   --t-ambar-f:rgba(240,168,104,.13);
  --t-laranja:#F58A5B; --t-laranja-b:rgba(245,138,91,.40);  --t-laranja-f:rgba(245,138,91,.13);
  --t-vermelho:#F08080;--t-vermelho-b:rgba(240,128,128,.40);--t-vermelho-f:rgba(240,128,128,.13);
  --t-teal:#5EC4B6;    --t-teal-b:rgba(94,196,182,.40);     --t-teal-f:rgba(94,196,182,.13);
  --t-verde:#6BCB84;   --t-verde-b:rgba(107,203,132,.40);   --t-verde-f:rgba(107,203,132,.13);
}
.cx-ficha[data-tom="azul"]     { --fc:var(--t-azul);     --fcs:var(--t-azul-b);     --fcb:var(--t-azul-f); }
.cx-ficha[data-tom="ambar"]    { --fc:var(--t-ambar);    --fcs:var(--t-ambar-b);    --fcb:var(--t-ambar-f); }
.cx-ficha[data-tom="laranja"]  { --fc:var(--t-laranja);  --fcs:var(--t-laranja-b);  --fcb:var(--t-laranja-f); }
.cx-ficha[data-tom="vermelho"] { --fc:var(--t-vermelho); --fcs:var(--t-vermelho-b); --fcb:var(--t-vermelho-f); }
.cx-ficha[data-tom="teal"]     { --fc:var(--t-teal);     --fcs:var(--t-teal-b);     --fcb:var(--t-teal-f); }
.cx-ficha[data-tom="verde"]    { --fc:var(--t-verde);    --fcs:var(--t-verde-b);    --fcb:var(--t-verde-f); }
.cx-fichas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:100%; max-width:700px; }
.cx-ficha { position:relative; text-align:left; padding:14px 14px 13px 17px; border-radius:12px; background:var(--bg-card); border:1px solid var(--border-color); cursor:pointer; overflow:hidden; box-shadow:0 1px 2px rgba(12,35,64,.04); transition:transform .32s var(--cx-ease), box-shadow .32s var(--cx-ease), border-color .22s; }
.cx-ficha::before { content:''; position:absolute; left:0; top:13px; bottom:13px; width:3px; border-radius:0 3px 3px 0; background:var(--fc,var(--cx-azure)); transform:scaleY(.62); transform-origin:center; transition:transform .34s var(--cx-ease); }
.cx-ficha:hover, .cx-ficha:focus-visible { transform:translateY(-3px); box-shadow:var(--cx-lift); border-color:var(--fcs,var(--cx-rule)); }
.cx-ficha:hover::before, .cx-ficha:focus-visible::before { transform:scaleY(1); }
.cx-ficha:active { transform:translateY(-1px); }
.cx-ficha-ico { width:29px; height:29px; border-radius:9px; background:var(--fcb,rgba(59,130,196,.1)); color:var(--fc,var(--cx-azure)); display:flex; align-items:center; justify-content:center; margin-bottom:10px; transition:transform .34s var(--cx-ease); }
.cx-ficha:hover .cx-ficha-ico { transform:scale(1.08) rotate(-3deg); }
.cx-ficha-nome { display:block; font-size:12.5px; font-weight:700; color:var(--cx-ink); letter-spacing:-.1px; margin-bottom:3px; }
.cx-ficha-sub { display:block; font-size:10.5px; color:var(--text-muted); line-height:1.45; }
.cx-hero-dica { margin-top:22px; font-size:10.5px; color:var(--text-muted); opacity:.65; font-family:var(--cx-mono); letter-spacing:.03em; }
.cx-tecla { padding:2px 6px; border-radius:5px; border:1px solid var(--cx-rule); font-size:9.5px; }

/* ── Mensagens ── */
.chat-msg-bot-row { display:flex; align-items:flex-start; gap:10px; align-self:flex-start; max-width:min(86%, 880px); animation:cxSobe .38s var(--cx-ease) both; }
.chat-bot-avatar { width:29px; height:29px; border-radius:9px; background:var(--cx-fill); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:3px; box-shadow:0 4px 12px -4px rgba(26,79,156,.6); }
.chat-msg { font-size:13px; line-height:1.68; animation:cxSobe .38s var(--cx-ease) both; }
.chat-msg.user { align-self:flex-end; max-width:min(74%, 620px); background:var(--cx-fill); color:#fff; border-radius:16px 16px 5px 16px; padding:12px 17px; box-shadow:0 6px 18px -8px rgba(26,79,156,.6); }
.chat-msg.bot { align-self:flex-start; max-width:100%; background:var(--bg-card); border:1px solid var(--border-color); border-left:2px solid var(--cx-azure); color:var(--text-main); border-radius:5px 16px 16px 16px; padding:14px 18px; box-shadow:0 1px 2px rgba(12,35,64,.04); }
body.dark .chat-msg.bot { box-shadow:0 2px 10px rgba(0,0,0,.28); }
.chat-msg.bot strong { color:var(--cx-ink); }
.chat-msg.bot .chat-table { width:100%; font-size:12px; margin-top:10px; border-collapse:collapse; }
.chat-msg.bot .chat-table td, .chat-msg.bot .chat-table th { white-space:nowrap; }
.chat-msg.bot .chat-table th { text-align:left; font-size:9.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; font-family:var(--cx-mono); padding:5px 9px; border-bottom:1px solid var(--cx-rule); }
.chat-msg.bot .chat-table td { padding:7px 9px; border-bottom:1px solid var(--cx-rule); }
.chat-msg.bot .chat-table tr:last-child td { border-bottom:none; }

/* ── ASSINATURA: a marca de origem ────────────────────────────────────────
   Resposta com dado e resposta inventada tinham a mesma cara. Agora cada
   consulta feita deixa um carimbo, e ele bate no papel um de cada vez. */
.cx-fontes { margin-top:14px; padding-top:11px; border-top:1px dashed var(--cx-rule); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cx-fontes-lbl { display:inline-flex; align-items:center; gap:5px; font-family:var(--cx-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-right:2px; }
.cx-carimbo { font-family:var(--cx-mono); font-size:10px; padding:3px 9px; border-radius:5px; color:var(--cx-stamp); background:var(--cx-stamp-bg); border:1px solid currentColor; white-space:nowrap; animation:cxCarimbo .4s var(--cx-ease) both; }
@keyframes cxCarimbo {
  0%   { opacity:0; transform:scale(1.3) rotate(-2.5deg); }
  55%  { opacity:1; transform:scale(.96) rotate(.5deg); }
  100% { opacity:.92; transform:scale(1) rotate(0); }
}

/* ── Abrir no PC ─────────────────────────────────────────────────────────
   Os caminhos vem estruturados do backend (nao garimpados do texto): o painel
   nao consegue abrir uma pasta do Windows sozinho, entao o clique enfileira a
   tarefa para o agente que roda na maquina de quem esta lendo. */
.cx-abrir-linha { margin-top:13px; padding-top:11px; border-top:1px dashed var(--cx-rule); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cx-abrir-lbl { font-family:var(--cx-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-right:2px; }
.cx-abrir { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:4px 10px; border-radius:7px; border:1px solid var(--border-color); background:var(--bg-page); color:var(--cx-azure); font-size:11px; font-family:inherit; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:border-color .2s, background .2s, transform .22s var(--cx-ease); }
.cx-abrir:hover { border-color:var(--cx-azure); background:var(--bg-card); transform:translateY(-1px); }
.cx-abrir:disabled { opacity:.65; cursor:default; transform:none; }
.cx-abrir svg { flex-shrink:0; }

/* ── Console de entrada ── */
.chat-input-wrap { display:flex; gap:8px; padding:9px 9px 9px 12px; margin-top:12px; border:1px solid var(--border-color); border-radius:17px; background:var(--bg-card); flex-shrink:0; align-items:center; transition:border-color .22s, box-shadow .28s var(--cx-ease); box-shadow:0 1px 2px rgba(12,35,64,.04); }
.chat-input-wrap:focus-within { border-color:var(--cx-azure); box-shadow:0 0 0 4px rgba(59,130,196,.13), 0 8px 24px -14px rgba(12,35,64,.4); }
.chat-input { flex:1; background:transparent; border:none; border-radius:0; padding:9px 4px; font-size:13.5px; color:var(--text-main); outline:none; }
.chat-input::placeholder { color:var(--text-muted); opacity:.75; }
.chat-send-btn { width:40px; height:40px; border-radius:13px; background:var(--cx-fill); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .18s, transform .22s var(--cx-ease), box-shadow .22s; flex-shrink:0; box-shadow:0 5px 16px -7px rgba(26,79,156,.8); }
.chat-send-btn:hover { background:var(--cx-azure); transform:translateY(-1px) scale(1.03); }
.chat-send-btn:active { transform:translateY(0) scale(.97); }
.chat-send-btn:disabled { opacity:.38; cursor:default; transform:none; box-shadow:none; }
.chat-suggestions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chat-chip { padding:5px 12px; border-radius:20px; font-size:11px; background:var(--bg-card); border:1px solid var(--border-color); cursor:pointer; color:var(--text-muted); transition:border-color .2s, color .2s, transform .24s var(--cx-ease); }
.chat-chip:hover { border-color:var(--cx-azure); color:var(--cx-azure); transform:translateY(-1px); }
.chat-typing { display:flex; gap:4px; padding:8px 16px; }
.chat-typing span { width:6px; height:6px; border-radius:50%; background:var(--text-muted); animation:chatDot .6s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay:.15s; }
.chat-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes chatDot { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-4px)} }

/* ── Cartao "pensando": a espinha de progresso ──────────────────────────
   Antes era um spinner por passo, tudo girando ao mesmo tempo. Agora uma linha
   unica se preenche conforme cada consulta termina: da para ver o progresso. */
.chat-thinking-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:5px 16px 16px 16px; padding:14px 18px; max-width:430px; align-self:flex-start; animation:cxSobe .38s var(--cx-ease) both; box-shadow:0 1px 2px rgba(12,35,64,.04); }
.chat-thinking-header { display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.chat-thinking-label { font-size:12px; font-weight:600; color:var(--text-main); }
.chat-thinking-toggle { font-family:var(--cx-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-left:auto; opacity:.7; transition:opacity .18s; }
.chat-thinking-header:hover .chat-thinking-toggle { opacity:1; }
.chat-thinking-steps { margin-top:11px; padding-left:17px; display:flex; flex-direction:column; gap:8px; overflow:hidden; position:relative; }
.chat-thinking-steps::before { content:''; position:absolute; left:5px; top:7px; bottom:7px; width:1.5px; border-radius:2px; background:var(--cx-rule); }
.chat-thinking-steps::after { content:''; position:absolute; left:5px; top:7px; width:1.5px; border-radius:2px; background:var(--cx-azure); height:var(--cx-progresso,0%); transition:height .55s var(--cx-ease); }
.chat-thinking-steps.hidden { display:none; }
.chat-thinking-step { display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--text-muted); animation:cxSobe .3s var(--cx-ease) both; position:relative; }
.chat-thinking-step.done { color:var(--text-main); }
.chat-thinking-step.active { color:var(--cx-azure); font-weight:600; }
.chat-thinking-step-icon { flex-shrink:0; margin-top:1px; margin-left:-17px; width:11px; display:flex; justify-content:center; background:var(--bg-card); padding:1px 0; z-index:1; }
@keyframes thinkSpin { to { transform:rotate(360deg); } }
.chat-thinking-spinner { width:13px; height:13px; border:2px solid var(--cx-rule); border-top-color:var(--cx-azure); border-radius:50%; animation:thinkSpin .7s linear infinite; flex-shrink:0; }

/* ── Telas menores ── */
@media (max-width:980px) {
  .cx-fichas { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:420px; }
  .chat-main { padding:14px 16px; }
  .chat-msg.user, .chat-msg-bot-row { max-width:94%; }
}
@media (max-width:640px) {
  .chat-sidebar { position:absolute; z-index:40; height:100%; box-shadow:12px 0 40px -18px rgba(0,0,0,.7); }
  .cx-fichas { grid-template-columns:1fr; max-width:340px; }
  .cx-hero-title { font-size:24px; }
  .cx-hero-sub { font-size:12.5px; }
  .cx-alcance { display:none; }
}

/* Quem pediu menos movimento no sistema recebe a tela inteira, sem a coreografia. */
@media (prefers-reduced-motion:reduce) {
  .chat-layout *, .chat-layout *::before, .chat-layout *::after {
    animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important;
  }
  .chat-thinking-spinner { animation-duration:.7s !important; }
}

/* Sidebar chat animation */
@keyframes chatBubble { 0%{transform:scale(1)} 40%{transform:scale(1.15)} 70%{transform:scale(.95)} 100%{transform:scale(1)} }
.nav-item:hover .chat-icon-g { animation:chatBubble .45s ease both; }
/* Playground beaker tilt */
@keyframes pgBeakerTilt { 0%{transform:rotate(0)} 40%{transform:rotate(-14deg)} 70%{transform:rotate(4deg)} 100%{transform:rotate(0)} }
.nav-item:hover .pg-g { animation:pgBeakerTilt .42s ease both; transform-origin:50% 80%; }

/* ── Playground layout ────────────────────────────── */
.pg-layout { display:flex; height:calc(100vh - 136px); overflow:hidden; }
.pg-agents { width:210px; min-width:210px; background:var(--bg-card); border-right:1px solid var(--border-color); display:flex; flex-direction:column; overflow:hidden; flex-shrink:0; }
.pg-agents-head { padding:14px 14px 8px; border-bottom:1px solid var(--border-color); flex-shrink:0; }
.pg-agents-title { font-size:13px; font-weight:800; color:var(--text-main); }
.pg-agents-sub { font-size:10px; color:var(--text-muted); margin-top:2px; }
.pg-agents-body { flex:1; overflow-y:auto; padding:8px 6px; }
.pg-agent-item { display:flex; align-items:center; gap:9px; padding:9px 10px; cursor:pointer; border-radius:10px; margin-bottom:2px; transition:background .13s; }
.pg-agent-item:hover { background:var(--bg-page); }
.pg-agent-item.active { background:var(--blue-light); }
.pg-agent-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.pg-agent-info { flex:1; min-width:0; }
.pg-agent-name { font-size:12px; font-weight:700; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pg-agent-desc { font-size:10px; color:var(--text-muted); }
.pg-agent-lock { color:var(--text-muted); flex-shrink:0; opacity:.45; }
.pg-main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.pg-main-top { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border-color); flex-shrink:0; background:var(--bg-card); }
.pg-main-agent-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.pg-main-title { font-size:13px; font-weight:700; color:var(--text-main); }
.pg-main-badge { font-size:10px; color:var(--text-muted); background:var(--bg-page); border:1px solid var(--border-color); border-radius:6px; padding:2px 7px; }
.pg-messages { flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:14px; }
.pg-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:40px; text-align:center; }
.pg-empty-icon { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.pg-input-area { padding:12px 16px 14px; border-top:1px solid var(--border-color); background:var(--bg-card); display:flex; gap:8px; align-items:flex-end; flex-shrink:0; }
.pg-input { flex:1; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-page); color:var(--text-main); font-size:13px; padding:10px 14px; resize:none; height:42px; max-height:120px; font-family:inherit; overflow-y:auto; line-height:1.5; transition:border-color .15s; }
.pg-input:focus { outline:none; border-color:#6366F1; }
.pg-send-btn { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#6366F1,#8B5CF6); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity .15s; }
.pg-send-btn:hover { opacity:.85; }
.pg-send-btn:disabled { opacity:.4; cursor:default; }
.pg-msg-user { align-self:flex-end; background:linear-gradient(135deg,#6366F1,#8B5CF6); color:#fff; padding:10px 16px; border-radius:18px; border-bottom-right-radius:5px; max-width:75%; font-size:13px; line-height:1.55; word-break:break-word; }
.pg-msg-bot { align-self:flex-start; background:var(--bg-card); border:1px solid var(--border-color); padding:12px 16px; border-radius:18px; border-bottom-left-radius:5px; max-width:80%; font-size:13px; line-height:1.6; word-break:break-word; }
.pg-msg-bot p { margin:0 0 8px; } .pg-msg-bot p:last-child { margin:0; }
.pg-msg-bot ul, .pg-msg-bot ol { margin:6px 0 6px 18px; }
.pg-msg-bot li { margin-bottom:3px; }
.pg-msg-bot strong { color:var(--text-main); }
.pg-msg-bot code { background:var(--bg-page); padding:1px 5px; border-radius:4px; font-size:11px; }
.pg-config { width:270px; min-width:270px; background:var(--bg-card); border-left:1px solid var(--border-color); display:flex; flex-direction:column; overflow-y:auto; flex-shrink:0; }
.pg-config-head { padding:14px 16px 10px; border-bottom:1px solid var(--border-color); flex-shrink:0; }
.pg-config-body { padding:14px 16px; display:flex; flex-direction:column; gap:16px; flex:1; }
.pg-config-label { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.pg-config-value { font-size:11px; font-weight:700; color:#6366F1; }
.pg-textarea { width:100%; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-page); color:var(--text-main); font-size:11.5px; line-height:1.6; padding:10px 12px; resize:vertical; min-height:140px; font-family:inherit; box-sizing:border-box; transition:border-color .15s; }
.pg-textarea:focus { outline:none; border-color:#6366F1; }
.pg-range { width:100%; accent-color:#6366F1; cursor:pointer; }
.pg-divider { border:none; border-top:1px solid var(--border-color); margin:0; }
.pg-config-footer { padding:0 16px 16px; display:flex; flex-direction:column; gap:6px; }
.pg-thinking { align-self:flex-start; display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:14px; border-bottom-left-radius:4px; background:var(--bg-card); border:1px solid var(--border-color); font-size:12px; color:var(--text-muted); animation:agenteCardIn .3s ease both; }
.pg-thinking-dot { width:7px; height:7px; border-radius:50%; background:#6366F1; animation:pgDotBounce .9s ease infinite; }
.pg-thinking-dot:nth-child(2) { animation-delay:.15s; }
.pg-thinking-dot:nth-child(3) { animation-delay:.3s; }
@keyframes pgDotBounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }
@keyframes pgDot { from{opacity:.3;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
/* Playground tabs */
.pg-tab-btn { padding:0 14px; height:100%; font-size:12px; font-weight:600; color:var(--text-muted); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; transition:color .2s, border-color .2s; white-space:nowrap; }
.pg-tab-btn:hover { color:var(--text-main); }
.pg-tab-btn.active { color:#6366F1; border-bottom-color:#6366F1; }
/* Tab & view transitions */
@keyframes pgTabSlide { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
@keyframes pgTabSlideLeft { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes cbViewFade { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes cbItemCascade { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:translateX(0)} }
.pg-tab-enter-r { animation:pgTabSlide .22s cubic-bezier(.4,0,.2,1) both; }
.pg-tab-enter-l { animation:pgTabSlideLeft .22s cubic-bezier(.4,0,.2,1) both; }
.cb-view-enter { animation:cbViewFade .2s cubic-bezier(.4,0,.2,1) both; }
.cb-item-cascade { animation:cbItemCascade .18s cubic-bezier(.34,1.4,.64,1) both; }
/* Flow canvas */
.pg-flow-scroll { flex:1; overflow:auto; position:relative; background:var(--bg-page); }
.pg-flow-canvas { position:relative; min-width:1250px; min-height:660px; }
.pg-flow-scroll { background-image:radial-gradient(circle, var(--border-color) 1.2px, transparent 1.2px); background-size:24px 24px; }
.pg-flow-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.pg-flow-edge { pointer-events:stroke !important; cursor:pointer; }
.pg-flow-node { position:absolute; width:180px; background:var(--bg-card); border:1.5px solid var(--border-color); border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.09); }
.pg-flow-node-head { padding:10px 12px 8px; border-radius:10px 10px 0 0; cursor:grab; display:flex; align-items:center; gap:8px; }
.pg-flow-node-head:active { cursor:grabbing; }
.pg-flow-node-title { font-size:11.5px; font-weight:800; color:#fff; line-height:1.2; }
.pg-flow-node-tipo { font-size:9px; color:rgba(255,255,255,.6); font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-top:1px; }
.pg-flow-node-body { padding:7px 12px 11px; }
.pg-flow-node-desc { font-size:11px; color:var(--text-muted); line-height:1.4; }
.pg-flow-port { width:14px; height:14px; border-radius:50%; background:var(--bg-card); border:2.5px solid var(--border-color); position:absolute; top:50%; margin-top:-7px; z-index:3; transition:transform .12s, border-color .12s, background .12s; cursor:crosshair; }
.pg-flow-port-in  { left:-8px; }
.pg-flow-port-out { right:-8px; }
.pg-flow-port-in:hover  { transform:scale(1.35); border-color:#10B981; background:#10B981; }
.pg-flow-port-out:hover { transform:scale(1.35); border-color:#6366F1; background:#6366F1; }
.pg-flow-toolbar { display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--bg-card); border-bottom:1px solid var(--border-color); flex-shrink:0; font-size:11px; color:var(--text-muted); }
.pg-flow-toolbar-sep { width:1px; height:16px; background:var(--border-color); margin:0 4px; }
.pg-flow-zoom-btn { width:24px; height:24px; border-radius:6px; border:1px solid var(--border-color); background:var(--bg-card); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-main); font-size:14px; line-height:1; transition:background .12s; flex-shrink:0; }
.pg-flow-zoom-btn:hover { background:var(--bg-page); }
#pg-flow-inner { cursor:grab; transform-origin:0 0; will-change:transform; }
#pg-flow-inner.panning { cursor:grabbing; }
/* Agent icon badge */
.pg-agent-icon { border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
/* Usage display in agents panel */
.pg-usage-wrap { padding:6px 10px 8px; border-bottom:1px solid var(--border-color); flex-shrink:0; }
.pg-usage-track { height:3px; border-radius:2px; background:var(--border-color); margin-top:4px; overflow:hidden; }
.pg-usage-fill { height:100%; border-radius:2px; transition:width .4s; }
/* Patrimonial: house bounces */
@keyframes patriBounce { 0%{transform:translateY(0)} 35%{transform:translateY(-3px)} 65%{transform:translateY(.5px)} 100%{transform:translateY(0)} }
.nav-item:hover .patri-g { animation:patriBounce .45s ease both; }
/* Saude: heart beat */
@keyframes saudeHeartBeat { 0%{transform:scale(1)} 25%{transform:scale(1.18)} 40%{transform:scale(.95)} 60%{transform:scale(1.1)} 100%{transform:scale(1)} }
.nav-group-btn:hover .saude-g { animation:saudeHeartBeat .55s ease both; }
/* Saude dropdown: icon animations on hover */
@keyframes saudeGlobeSpin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes saudeFileLift { 0%{transform:translateY(0)} 40%{transform:translateY(-2px) rotate(-3deg)} 100%{transform:translateY(0)} }
@keyframes saudeCellPop { 0%{stroke-dasharray:0 40} 100%{stroke-dasharray:40 0} }
@keyframes saudeUserX { 0%{transform:scale(1)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }
/* Faturamento (Juliana): card lifts, stripe slides, coin spins */
@keyframes fatCardLift { 0%{transform:translateY(0)} 45%{transform:translateY(-1.5px) rotate(-2deg)} 100%{transform:translateY(0)} }
@keyframes fatStripeSlide { from{transform:translateX(-3px);opacity:.3} to{transform:translateX(0);opacity:1} }
@keyframes fatCoinFlip { 0%{transform:rotateY(0)} 50%{transform:rotateY(180deg)} 100%{transform:rotateY(360deg)} }
@keyframes fatRowReveal { from{transform:scaleX(0);opacity:.2} to{transform:scaleX(1);opacity:1} }
.fat-card { transform-box:fill-box; transform-origin:center; }
.fat-stripe { transform-box:fill-box; transform-origin:left center; }
.fat-coin, .fat-coin-mark { transform-box:fill-box; transform-origin:center; }
.fat-row { transform-box:fill-box; transform-origin:left center; }
/* Saúde — animações POR CLASSE do ícone (robusto a reordenação/inserção de itens;
   antes usava :nth-child e quebrava toda vez que um item entrava no meio). */
#nav-saude .nav-dropdown .nav-item:hover .fat-card  { animation:fatCardLift .42s ease both; }
#nav-saude .nav-dropdown .nav-item:hover .fat-stripe{ animation:fatStripeSlide .35s ease both; }
#nav-saude .nav-dropdown .nav-item:hover .fat-coin  { animation:fatCoinFlip .55s ease both; }
#nav-saude .nav-dropdown .nav-item:hover .fat-r1    { animation:fatRowReveal .3s .08s ease both; }
#nav-saude .nav-dropdown .nav-item:hover .fat-r2    { animation:fatRowReveal .3s .16s ease both; }
#nav-saude .nav-dropdown .nav-item:hover .caged-g   { animation:saudeFileLift .35s ease both; }
#nav-saude .nav-dropdown .nav-item:hover .deslig-g  { animation:saudeUserX .4s ease both; }
#nav-saude .nav-dropdown .nav-item:hover .globe-g   { animation:saudeGlobeSpin .6s ease both; transform-box:fill-box; transform-origin:center; }
#nav-saude .nav-dropdown .nav-item:hover .users-g   { animation:personBob .45s ease both; transform-box:fill-box; transform-origin:center; }
#nav-saude .nav-dropdown .nav-item:hover .pres-g    { animation:saudeFileLift .4s ease both; transform-box:fill-box; transform-origin:center; }
#nav-saude .nav-dropdown .nav-item:hover .auto-g    { animation:saudeFileLift .35s ease both; }
/* E-mails: a aba do envelope abre ao passar o mouse */
#nav-saude .nav-dropdown .nav-item:hover .mail-flap { animation:mailFlap .45s ease both; transform-box:fill-box; transform-origin:top center; }
#nav-saude .nav-dropdown .nav-item:hover .mail-g    { animation:saudeFileLift .35s ease both; }
@keyframes mailFlap { 0%{transform:scaleY(1)} 45%{transform:scaleY(.25)} 100%{transform:scaleY(1)} }
/* Vidas PME: as colunas do prédio sobem uma após a outra */
#nav-saude .nav-dropdown .nav-item:hover .pme-b1 { animation:barUp .34s cubic-bezier(.34,1.4,.64,1) both; }
#nav-saude .nav-dropdown .nav-item:hover .pme-b2 { animation:barUp .34s .07s cubic-bezier(.34,1.4,.64,1) both; }

/* Sub-item do menu cascata: recuado, com um fio à esquerda ligando ao pai.
   Sem isso os 17 itens do Saúde ficavam todos no mesmo nível visual. */
.nav-dropdown .nav-item.nav-sub { padding-left:30px; position:relative; font-size:12.5px; }
.nav-dropdown .nav-item.nav-sub::before { content:''; position:absolute; left:17px; top:0; bottom:0;
  width:1.5px; background:var(--border-color); border-radius:2px; }
.nav-dropdown .nav-item.nav-sub:hover::before { background:var(--blue); }
/* Movimentação/PAD/Regras (.file-g→docLift), Tradutor (.globe-g), Estipulantes (.rel-frame),
   Reajustes (.ret-g), Boas-Vindas (.cross-g), Contatos (.person-1/2), Sinistros (.alert-mark),
   Base de Clientes (.users-g), Cotações (.pres-g) — todos animam pelas próprias classes. */
#nav-gestao-saude .nav-dropdown .nav-item:nth-child(5):hover .gs-card-stripe { animation:saudeFileLift .35s ease both; }
#nav-gestao-saude .nav-dropdown .nav-item:nth-child(5):hover .gs-card-chip { animation:barUp .3s cubic-bezier(.34,1.4,.64,1) both; }
#nav-gestao-saude .nav-dropdown .nav-item:nth-child(7):hover .gs-pauta-l1 { animation:saudeFileLift .25s ease both; }
#nav-gestao-saude .nav-dropdown .nav-item:nth-child(7):hover .gs-pauta-l2 { animation:saudeFileLift .35s ease .05s both; }
#nav-gestao-saude .nav-dropdown .nav-item:nth-child(7):hover .gs-pauta-l3 { animation:saudeFileLift .35s ease .1s both; }
#nav-gestao-saude .nav-dropdown .nav-item:nth-child(8):hover .gs-pill-g { animation:saudeGlobeSpin .5s ease both; }

/* Floating Agentes button (FAB) */
.orc-pag-flex > div { flex:1 1 150px; min-width:120px; }
.fab-agentes { position:fixed; bottom:28px; right:28px; z-index:9000; display:flex; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none; }
.fab-agentes > * { pointer-events:auto; }
.fab-agentes-btn { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#6366F1,#8B5CF6); border:none; cursor:pointer; box-shadow:0 4px 20px rgba(99,102,241,.45); display:flex; align-items:center; justify-content:center; transition:transform .2s, box-shadow .2s; }
.fab-agentes-btn:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(99,102,241,.65); }
/* Arrastável: some de cima do que estiver embaixo em vez de bloquear o clique. */
.fab-agentes-btn { cursor:grab; touch-action:none; }
.fab-agentes-btn:active { cursor:grabbing; transform:scale(1.04); }
.fab-agentes-btn svg { transition:transform .3s; }
.fab-agentes-btn.open svg { transform:rotate(15deg); }
.fab-panel { background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,.2); width:258px; overflow:hidden; transform-origin:bottom right; animation:fabPanelIn .22s cubic-bezier(.22,1,.36,1) both; }
.fab-panel-header { padding:11px 14px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; }
.fab-agent-item { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; transition:background .12s; border-bottom:1px solid var(--border-color); }
.fab-agent-item:last-child { border-bottom:none; }
.fab-agent-item:hover { background:var(--bg-hover,rgba(99,102,241,.06)); }
@keyframes fabPanelIn { from{opacity:0;transform:scale(.85) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
/* ── Mini-chat overlay ── */
.fmc-backdrop { position:fixed;inset:0;z-index:8990;background:rgba(0,0,0,.18);opacity:0;transition:opacity .25s;pointer-events:none; }
.fmc-backdrop.fmc-vis { opacity:1; }
.fmc-panel { position:fixed;top:0;right:0;bottom:0;z-index:8995;width:375px;background:var(--bg-card);border-left:1px solid var(--border-color);display:flex;flex-direction:column;box-shadow:-10px 0 50px rgba(0,0,0,.22);transform:translateX(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);pointer-events:none; }
.fmc-panel.fmc-vis { transform:translateX(0);pointer-events:all; }
.fmc-hdr { padding:10px 12px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:8px;flex-shrink:0; }
.fmc-agents-row { padding:6px 12px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex-shrink:0;min-height:36px;position:relative; }
.fmc-chip { display:inline-flex;align-items:center;gap:4px;padding:3px 7px 3px 5px;border-radius:20px;font-size:10px;font-weight:700;cursor:default; }
.fmc-chip-rm { background:none;border:none;cursor:pointer;padding:1px;border-radius:50%;opacity:.55;line-height:0;transition:opacity .12s; }
.fmc-chip-rm:hover { opacity:1; }
.fmc-add-btn { display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:700;cursor:pointer;border:1px dashed var(--border-color);background:none;color:var(--text-muted);transition:all .15s; }
.fmc-add-btn:hover { border-color:#6366F1;color:#6366F1; }
.fmc-add-drop { position:absolute;left:0;right:0;top:100%;background:var(--bg-card);border:1px solid var(--border-color);border-top:none;border-radius:0 0 12px 12px;box-shadow:0 8px 30px rgba(0,0,0,.18);z-index:30;overflow:hidden; }
.fmc-add-row { display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .12s; }
.fmc-add-row:hover { background:var(--bg-hover,rgba(99,102,241,.06)); }
.fmc-ctx-bar { padding:5px 12px;border-bottom:1px solid var(--border-color);background:rgba(99,102,241,.05);flex-shrink:0; }
.fmc-msgs { flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px; }
.fmc-msg-u { align-self:flex-end;background:linear-gradient(135deg,#6366F1,#8B5CF6);color:#fff;padding:9px 13px;border-radius:14px 14px 4px 14px;font-size:12.5px;max-width:88%;line-height:1.55;word-break:break-word; }
.fmc-msg-a-wrap { align-self:flex-start;max-width:92%;display:flex;flex-direction:column;gap:3px; }
.fmc-msg-label { font-size:9.5px;font-weight:800;letter-spacing:.3px;padding-left:4px; }
.fmc-msg-a { background:var(--bg-alt,rgba(0,0,0,.04));color:var(--text-main);padding:9px 13px;border-radius:14px 14px 14px 4px;font-size:12.5px;line-height:1.55;border:1px solid var(--border-color);word-break:break-word; }
.fmc-msg-a p { margin:0; }
.fmc-msg-a p+p { margin-top:6px; }
.fmc-think-wrap { align-self:flex-start;max-width:92%;display:flex;flex-direction:column;gap:3px; }
.fmc-think-lbl { font-size:9.5px;font-weight:800;letter-spacing:.3px;padding-left:4px; }
.fmc-think-bubble { display:flex;align-items:center;gap:8px;background:var(--bg-alt,rgba(0,0,0,.04));padding:9px 13px;border-radius:14px 14px 14px 4px;border:1px solid var(--border-color);font-size:11.5px;color:var(--text-muted); }
.fmc-think-dots { display:flex;gap:3px;flex-shrink:0; }
.fmc-think-dots span { width:5px;height:5px;border-radius:50%;background:currentColor;animation:fmcDot 1.2s infinite; }
.fmc-think-dots span:nth-child(2){animation-delay:.22s} .fmc-think-dots span:nth-child(3){animation-delay:.44s}
@keyframes fmcDot { 0%,80%,100%{opacity:.25;transform:scale(.75)} 40%{opacity:1;transform:scale(1)} }
.fmc-inp-area { padding:10px 12px;border-top:1px solid var(--border-color);flex-shrink:0; }
.fmc-textarea { width:100%;resize:none;border:1px solid var(--border-color);border-radius:10px;padding:9px 12px;font-size:12.5px;font-family:inherit;background:var(--bg-main);color:var(--text-main);outline:none;transition:border-color .15s;box-sizing:border-box;min-height:40px;max-height:120px;line-height:1.5; }
.fmc-textarea:focus { border-color:#6366F1; }
/* History panel (slides in over fmc-panel) */
.fmc-hist { position:absolute;inset:0;background:var(--bg-card);z-index:25;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .25s cubic-bezier(.22,1,.36,1); }
.fmc-hist.fmc-hist-vis { transform:translateX(0); }
.fmc-hist-item { padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border-color);transition:background .12s; }
.fmc-hist-item:hover { background:var(--bg-hover,rgba(99,102,241,.06)); }
/* Nav group button icons */
@keyframes gstBriefcase { 0%{transform:translateY(0)} 35%{transform:translateY(-3px) scaleX(1.05)} 65%{transform:translateY(.5px)} 100%{transform:translateY(0)} }
@keyframes acompLens { 0%,100%{transform:scale(1) rotate(0)} 40%{transform:scale(1.15) rotate(-10deg)} 70%{transform:scale(.97) rotate(4deg)} }
@keyframes ferrSpin { 0%{transform:rotate(0)} 60%{transform:rotate(-25deg)} 100%{transform:rotate(0)} }
.nav-group-btn:hover .gst-g { animation:gstBriefcase .45s ease both; }
.nav-group-btn:hover .acomp-g { animation:acompLens .5s ease both; }
.nav-group-btn:hover .ferr-g { animation:ferrSpin .5s ease both; }
/* ── Nav dropdown cascade animation ── */
@keyframes navItemCascade { from{opacity:0;transform:translateX(-7px)} to{opacity:1;transform:translateX(0)} }
.nav-group:hover .nav-dropdown .nav-item { animation:navItemCascade .21s ease both; }
@keyframes clockTick { 0%{transform:rotate(0)} 40%{transform:rotate(28deg)} 70%{transform:rotate(-7deg)} 100%{transform:rotate(0)} }
.nav-item:hover .clock-hand { animation:clockTick .48s ease both; transform-origin:8px 8px; }
.nav-group:hover .nav-dropdown .nav-item:nth-child(1){animation-delay:.05s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(2){animation-delay:.10s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(3){animation-delay:.15s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(4){animation-delay:.20s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(5){animation-delay:.25s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(6){animation-delay:.30s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(7){animation-delay:.35s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(8){animation-delay:.40s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(9){animation-delay:.45s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(10){animation-delay:.50s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(11){animation-delay:.55s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(12){animation-delay:.60s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(13){animation-delay:.65s}
/* O menu de Saúde tem 16 itens (Cotações/Sinistros/Base/Automações entraram depois);
   estende a cascata até o 20º pra todos animarem e dar folga a novos itens. */
.nav-group:hover .nav-dropdown .nav-item:nth-child(14){animation-delay:.70s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(15){animation-delay:.75s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(16){animation-delay:.80s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(17){animation-delay:.85s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(18){animation-delay:.90s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(19){animation-delay:.95s}
.nav-group:hover .nav-dropdown .nav-item:nth-child(20){animation-delay:1s}
/* ── Patrimonial page styles ──────────────────────── */
/* As abas do Patrimonial passaram de 13 e não cabem mais em uma linha. Antes a
   barra rolava na horizontal com a barra de rolagem escondida, o que só parecia
   corte ("Cont..." no fim, ago/2026). Agora ela quebra em duas linhas: tudo fica
   visível de uma vez, que é como a equipe usa. */
.patri-tabs { display:flex; gap:3px 2px; border-bottom:2px solid var(--border-color); margin-bottom:20px; flex-wrap:wrap; }
.patri-tab { padding:7px 9px; font-size:11px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; border-radius:8px; background:none; border-left:none; border-right:none; border-top:none; white-space:nowrap; flex-shrink:0; display:flex; align-items:center; gap:4px; }
.patri-tab:hover { color:var(--text-main); background:var(--bg-hover); }
/* Com várias linhas, só o sublinhado não bastava para achar a aba aberta (na
   linha de cima ele fica solto no meio da barra): o fundo é o que marca. */
.patri-tab.active { color:#6366F1; border-bottom-color:#6366F1; background:rgba(99,102,241,.10); }
/* Telas estreitas: volta a ser uma faixa que rola, senão viram 6 linhas de aba. */
@media (max-width:700px) {
  .patri-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
}
.patri-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; padding:16px; }
.patri-stat { text-align:center; padding:12px; }
.patri-stat-val { font-size:22px; font-weight:800; line-height:1.1; }
.patri-stat-label { font-size:10px; color:var(--text-muted); margin-top:4px; }
.patri-table { width:100%; border-collapse:collapse; font-size:12px; }
.patri-table th { text-align:left; font-size:10px; text-transform:uppercase; color:var(--text-muted); padding:8px; border-bottom:1px solid var(--border-color); }
.patri-table td { padding:8px; border-bottom:1px solid var(--border-color); }
.patri-table tr:last-child td { border-bottom:none; }
.patri-table tr:hover { background:var(--bg-page); }
.patri-badge { display:inline-block; padding:2px 8px; border-radius:8px; font-size:10px; font-weight:700; }
.patri-badge.emitido { background:#D1FAE5; color:#059669; }
.patri-badge.pendente { background:#FEF3C7; color:#D97706; }
.patri-badge.cancelado,.patri-badge.nao_fechado,.patri-badge.nao_renovado { background:#FEE2E2; color:#DC2626; }
.patri-badge.fechado { background:#D1FAE5; color:#059669; }
.patri-badge.aviso_enviado { background:#DBEAFE; color:#1E40AF; }
.patri-badge.em_negociacao { background:#EDE9FE; color:#7C3AED; }
.patri-badge.aprovado { background:#DBEAFE; color:#1E40AF; }
.patri-badge.pago { background:#D1FAE5; color:#059669; }
.patri-badge.transferencia { background:#FEF3C7; color:#D97706; }
/* Tipos de proposta (importados do Excel: novo/renova/endosso) */
.patri-badge.novo { background:#DBEAFE; color:#1E40AF; }
.patri-badge.renova,.patri-badge.renovacao { background:#EDE9FE; color:#7C3AED; }
.patri-badge.endosso { background:#FEF3C7; color:#D97706; }
.patri-badge.prospeccao { background:#E0F2FE; color:#0369A1; }
.patri-badge.transmitido { background:#DBEAFE; color:#1E40AF; }
/* ══════════════════════════════════════════════════════════════════════════
   KIT PREMIUM DO PATRIMONIAL (Pedro, 20/08/2026: "quero que TODA A PARTE do
   patrimonial tenha esse design premium com animações premium")

   O ganho vem de subir as classes COMPARTILHADAS — `.patri-card`, `.patri-table`,
   `.patri-badge` e o cabeçalho `.patri-head` — em vez de repintar tela por tela.
   Carteira, Assistências, Sinistro, Cancelamentos, Cobranças, Renovações,
   Prospecções, Avisos, Orçamentos, Cotação e Contatos usam todas essas mesmas
   classes, então sobem juntas e continuam iguais entre si na próxima mudança.

   Regra de movimento: transform/opacity (o que a GPU compõe), 150-300ms, ease-out
   para entrar. Nada pisca sozinho, e tudo cai fora em prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --pt-ease:cubic-bezier(.22,1,.36,1); }

.patri-card { border-radius:15px; transition:transform .2s var(--pt-ease), box-shadow .2s, border-color .2s; }
.patri-card:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(15,23,42,.09); }
body.dark .patri-card:hover { box-shadow:0 10px 26px rgba(0,0,0,.34); }
.patri-stat:hover .patri-stat-val { transform:scale(1.08); }
.patri-stat-val { transition:transform .2s var(--pt-ease); font-variant-numeric:tabular-nums; }
.patri-menu-item:hover { background:var(--bg-page) !important; }

/* Cabeçalho de tela: ícone com halo da cor do módulo, título e subtítulo.
   Substitui o bloco inline que estava copiado em 14 lugares. */
.patri-head { display:flex; align-items:center; gap:13px; margin-bottom:20px;
  animation:patriSobe .4s var(--pt-ease) both; }
.patri-head-ico { width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--pt-c1,#3B82F6), var(--pt-c2,#1A4F9C));
  box-shadow:0 6px 16px color-mix(in srgb, var(--pt-c2,#1A4F9C) 32%, transparent);
  transition:transform .25s var(--pt-ease); }
.patri-head:hover .patri-head-ico { transform:scale(1.05) rotate(-3deg); }
.patri-head-t { font-size:16px; font-weight:800; color:var(--text-main); line-height:1.2; letter-spacing:-.01em; }
.patri-head-d { font-size:11.5px; color:var(--text-muted); margin-top:2px; }

/* Tabela: cabeçalho fixo com fundo próprio, linha que acende sob o cursor e
   números alinhados. O `.patri-card` em volta é que dá o recorte arredondado. */
.patri-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
.patri-table thead th { position:sticky; top:0; z-index:1; background:var(--bg-page);
  font-size:9.5px; letter-spacing:.055em; font-weight:800; padding:10px 10px; white-space:nowrap; }
.patri-table td { padding:10px; transition:background .14s; }
.patri-table tbody tr { transition:background .14s; }
.patri-table tbody tr:hover { background:var(--bg-page); }
/* Fio na cor do módulo à esquerda da linha sob o cursor: mostra onde o olho está
   sem repintar a linha inteira (que competiria com as tags de status). */
.patri-table tbody tr td:first-child { position:relative; }
.patri-table tbody tr td:first-child::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px;
  border-radius:2px; background:var(--pt-c1,#1A4F9C); opacity:0; transform:scaleY(.4);
  transition:opacity .16s, transform .16s var(--pt-ease); }
.patri-table tbody tr:hover td:first-child::before { opacity:.85; transform:none; }
.patri-table .num { text-align:right; font-variant-numeric:tabular-nums; }

/* Selo de status: pílula com contorno, some o retângulo chapado */
.patri-badge { display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px; border-radius:20px;
  font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  border:1px solid transparent; white-space:nowrap; }

/* Filtros em chip (Assistências, Sinistro, Cobranças...) */
.patri-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; cursor:pointer;
  font-size:12px; font-weight:700; white-space:nowrap; background:var(--bg-card);
  border:1px solid var(--border-color); color:var(--text-muted);
  transition:transform .16s var(--pt-ease), color .16s, border-color .16s, box-shadow .16s; }
.patri-chip:hover { transform:translateY(-1px); color:var(--text-main); border-color:#94A3B8; }
.patri-chip.on { color:#fff; background:var(--pt-c1,#1A4F9C); border-color:var(--pt-c1,#1A4F9C);
  box-shadow:0 4px 12px color-mix(in srgb, var(--pt-c1,#1A4F9C) 30%, transparent); }
.patri-chip .qt { font-size:10px; font-weight:800; padding:0 6px; border-radius:20px;
  background:var(--border-color); color:var(--text-muted); }
.patri-chip.on .qt { background:rgba(255,255,255,.26); color:#fff; }

/* Entrada em cascata de listas e cartões */
@keyframes patriSobe { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.patri-in { animation:patriSobe .38s var(--pt-ease) both; }
.patri-in:nth-child(2){animation-delay:.04s} .patri-in:nth-child(3){animation-delay:.08s}
.patri-in:nth-child(4){animation-delay:.12s} .patri-in:nth-child(5){animation-delay:.16s}
.patri-in:nth-child(6){animation-delay:.2s}  .patri-in:nth-child(n+7){animation-delay:.24s}

@media (prefers-reduced-motion:reduce) {
  .patri-card, .patri-head, .patri-in, .patri-chip, .patri-head-ico, .patri-stat-val,
  .patri-table tbody tr td:first-child::before { animation:none !important; transition:none !important; }
}

/* Cartão da lista de Assistências: acento da cor do status na LATERAL. A barrinha de 3px
   no rodapé não se lia numa lista longa — o olho corre pela margem esquerda, não pelo pé. */
.ass-card { position:relative; border-left:3px solid var(--ass-cor,#D97706);
  transition:transform .18s var(--pt-ease), box-shadow .18s; }
.ass-card:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(15,23,42,.10); }
body.dark .ass-card:hover { box-shadow:0 10px 26px rgba(0,0,0,.34); }
@media (prefers-reduced-motion:reduce) { .ass-card { transition:none !important; } }

/* ── Modal premium: o acabamento da ficha da apólice, sem reescrever o HTML ─────
   O corpo destes modais é gerado em pages/*.js com .form-group/.form-row/.form-control.
   Em vez de refazer 200 linhas de formulário (e ter que refazer de novo na próxima
   mudança), o visual sobe pela FOLHA: rótulo micro em caixa alta como nos quadros do
   ADMSEG, campo com anel de foco, linhas entrando em cascata. Basta a classe
   `modal-premium` no `.modal` para qualquer outro modal do painel herdar isso. */
/* Vale de duas formas: a classe no `.modal` inteiro (quando o modal é só daquela tela) ou
   um `<div class="form-premium">` em volta do formulário — que é o caso do `modal-generic`,
   compartilhado por meia dúzia de telas: estilizar o modal ali vazaria para todas elas. */
.modal-premium .modal-body { padding-top:16px; }
.modal-premium .modal-body .form-group,
.form-premium > .form-group { animation:patriSobe .34s var(--pt-ease) both; }
.modal-premium .modal-body .form-row,
.form-premium > .form-row { display:flex; gap:12px; flex-wrap:wrap; animation:patriSobe .34s var(--pt-ease) both; }
.modal-premium .modal-body .form-row > .form-group,
.form-premium .form-row > .form-group { flex:1; min-width:170px; animation:none; }
.modal-premium .modal-body > *:nth-child(2), .form-premium > *:nth-child(2) { animation-delay:.03s; }
.modal-premium .modal-body > *:nth-child(3), .form-premium > *:nth-child(3) { animation-delay:.06s; }
.modal-premium .modal-body > *:nth-child(4), .form-premium > *:nth-child(4) { animation-delay:.09s; }
.modal-premium .modal-body > *:nth-child(5), .form-premium > *:nth-child(5) { animation-delay:.12s; }
.modal-premium .modal-body > *:nth-child(n+6), .form-premium > *:nth-child(n+6) { animation-delay:.15s; }
.modal-premium .form-label,
.form-premium .form-label { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:4px; display:block; }
.modal-premium .form-control,
.form-premium .form-control { border-radius:9px; padding:9px 11px; font-size:12.5px;
  border:1px solid var(--border-color); background:var(--bg-page); color:var(--text-main);
  transition:border-color .16s, box-shadow .16s, background .16s; }
.modal-premium .form-control:hover,
.form-premium .form-control:hover { border-color:#94A3B8; }
.modal-premium .form-control:focus,
.form-premium .form-control:focus { outline:none; border-color:#1A4F9C; background:var(--bg-card);
  box-shadow:0 0 0 3px rgba(26,79,156,.14); }
body.dark .modal-premium .form-control:focus,
body.dark .form-premium .form-control:focus { border-color:#7FA9E8; box-shadow:0 0 0 3px rgba(127,169,232,.18); }
.modal-premium textarea.form-control,
.form-premium textarea.form-control { min-height:74px; resize:vertical; line-height:1.5; }
.modal-premium select.form-control,
.form-premium select.form-control { cursor:pointer; }

/* ── Formulário em BLOCOS dentro de modal (`apx-form`) ─────────────────────────
   A rodada anterior só refinou rótulo e campo — e o painel já era assim, então não
   dava para ver diferença. O que muda de verdade é a ESTRUTURA: o formulário deixa
   de ser uma lista corrida de 10 campos e vira quadros por assunto (Segurado,
   Apólice, Pagamento, Boleto), no mesmo desenho da ficha da apólice. Reusa `.apx-*`,
   que já existe; aqui só ficam os ajustes de dentro do modal. */
/* Seção que vira QUADRO sem mexer na marcação (Nova Apólice, 53 campos em 6 seções).
   O título recebe a classe `.apx-sec` e a GRADE IRMÃ logo abaixo ganha borda e fundo —
   o mesmo desenho do `.apx-bloco`, mas sem precisar envolver 53 campos num wrapper novo
   (o que exigiria achar o fim de cada grade no meio de divs aninhadas). */
.apx-form .apx-sec { font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--pt-c1,#10B981); margin:0 0 8px; display:flex; align-items:center; gap:7px; }
.apx-form .apx-sec + div { border:1px solid var(--border-color); border-radius:12px;
  background:var(--bg-page); padding:12px 13px; margin-bottom:14px !important;
  animation:patriSobe .38s var(--pt-ease) both; }
.apx-form .apx-c-r { margin-bottom:4px; }
@media (prefers-reduced-motion:reduce) { .apx-form .apx-sec + div { animation:none !important; } }

/* Em DUAS colunas, como a ficha da apólice — foi o que faltou na primeira tentativa: em
   coluna única o formulário continua parecendo uma lista, por mais quadro que tenha.
   O bloco que precisa da linha inteira (observação, anexo) leva `.larga`. */
/* `stretch` (e não `start`): na ficha da apólice os dois quadros de uma linha terminam na
   mesma altura, e é isso que faz a grade parecer uma grade. Com `start` o quadro curto
   parava no meio e deixava um degrau branco ao lado do quadro comprido. */
.apx-form .apx-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch; margin-bottom:12px; }
.apx-form .apx-grid > .apx-bloco { margin-bottom:0; }
.apx-form .apx-bloco.larga { grid-column:1/-1; }
@media (max-width:820px) { .apx-form .apx-grid { grid-template-columns:1fr; } }
.apx-form .apx-bloco { margin-bottom:11px; animation:patriSobe .38s var(--pt-ease) both; }
.apx-form .apx-bloco:nth-child(3) { animation-delay:.05s; }
.apx-form .apx-bloco:nth-child(4) { animation-delay:.1s; }
.apx-form .apx-bloco:nth-child(5) { animation-delay:.15s; }
.apx-form .apx-bloco:nth-child(6) { animation-delay:.2s; }
/* `justify-content:flex-start` é obrigatório aqui: a regra base do `.apx-bloco-t` usa
   space-between (ela foi feita para "título + botão à direita"), e sem isso o ícone fica
   colado na esquerda e o texto do título voa para a outra ponta do quadro. */
.apx-form .apx-bloco-t { display:flex; align-items:center; justify-content:flex-start; gap:7px;
  color:var(--pt-c1,#1A4F9C); }
.apx-form .apx-bloco-t svg { width:13px; height:13px; }
.apx-form .apx-campos { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
/* Quadro que ocupa a linha inteira tem o dobro da largura, entao o auto-fit gera 6 colunas
   e um campo de texto solto vira uma tirinha. Coluna maior aqui deixa 4, que e o que se le. */
.apx-form .apx-bloco.larga .apx-campos { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
/* Capa do formulario: quem e o cliente, antes dos quadros. Fio na cor do assunto do lado
   esquerdo (o mesmo recurso do .patri-table), que separa sem competir com os quadros. */
.apx-capa { border:1px solid var(--border-color); border-left:3px solid var(--pt-c1,#1A4F9C);
  border-radius:12px; background:var(--bg-page); padding:14px 16px;
  animation:patriSobe .34s var(--pt-ease) both; }
.apx-capa-r { font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--pt-c1,#1A4F9C); margin-bottom:3px; }
.apx-form .apx-in { background:var(--bg-card); }
.apx-form .apx-in:focus { border-color:var(--pt-c1,#1A4F9C);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pt-c1,#1A4F9C) 16%, transparent); }
.apx-form textarea.apx-in { min-height:64px; resize:vertical; line-height:1.5; }
/* Busca com a lupa dentro do campo */
.apx-busca { position:relative; }
.apx-busca svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px;
  color:var(--text-muted); pointer-events:none; }
.apx-busca .apx-in { padding-left:31px; }
.apx-sug { margin-top:4px; border:1px solid var(--border-color); border-radius:10px; overflow:hidden;
  background:var(--bg-card); box-shadow:0 12px 28px rgba(15,23,42,.14); }
/* Escolher arquivo: o controle nativo do navegador não tem acabamento nenhum */
.apx-arquivo { display:flex; align-items:center; gap:8px; cursor:pointer; padding:9px 12px; border-radius:9px;
  border:1.5px dashed var(--border-color); background:var(--bg-card); color:var(--text-muted);
  font-size:12px; font-weight:600; transition:border-color .16s, color .16s, background .16s; }
.apx-arquivo:hover { border-color:var(--pt-c1,#6366F1); color:var(--pt-c1,#6366F1); }
.apx-arquivo svg { width:14px; height:14px; flex-shrink:0; }
.apx-arquivo input[type=file] { display:none; }
.apx-dica { font-size:10.5px; color:var(--text-muted); margin-top:5px; line-height:1.4; }
@media (prefers-reduced-motion:reduce) {
  .apx-form .apx-bloco { animation:none !important; }
  .apx-arquivo, .apx-form .apx-in { transition:none !important; }
}

/* Campos com estilo INLINE (Prospecção monta os campos por string, e `style=` vence
   qualquer classe). O que o inline NÃO alcança é pseudo-estado: hover e foco continuam
   sendo do CSS, e é por aqui que esses formulários ganham o mesmo anel dos demais. */
.form-premium input:not([type=checkbox]):not([type=radio]):hover,
.form-premium select:hover, .form-premium textarea:hover { border-color:#94A3B8; }
.form-premium input:not([type=checkbox]):not([type=radio]):focus,
.form-premium select:focus, .form-premium textarea:focus {
  outline:none; border-color:var(--fp-cor,#1A4F9C);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--fp-cor,#1A4F9C) 18%, transparent); }

/* Sugestão da busca (o "digite e escolha" da cobrança): item que acende sob o cursor. */
.form-premium .sug-item { padding:9px 11px; cursor:pointer; border-bottom:1px solid var(--border-color);
  transition:background .14s, padding-left .14s var(--pt-ease); }
.form-premium .sug-item:last-child { border-bottom:none; }
.form-premium .sug-item:hover { background:var(--bg-page); padding-left:14px; }
/* Botão de ação do formulário premium */
.form-premium .btn-salvar { width:100%; margin-top:12px; padding:11px; border-radius:10px; border:none; cursor:pointer;
  font-size:13px; font-weight:800; letter-spacing:.01em; color:#fff; background:var(--fp-cor,#10B981);
  transition:transform .16s var(--pt-ease), box-shadow .16s, filter .16s; }
.form-premium .btn-salvar:hover { transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 8px 20px color-mix(in srgb, var(--fp-cor,#10B981) 38%, transparent); }
.form-premium .btn-salvar:active { transform:none; }
.form-premium .btn-salvar:disabled { opacity:.6; cursor:default; transform:none; box-shadow:none; }
@media (prefers-reduced-motion:reduce) {
  .form-premium > .form-group, .form-premium > .form-row { animation:none !important; }
  .form-premium .form-control, .form-premium .sug-item, .form-premium .btn-salvar { transition:none !important; }
}
/* Separadores: o formulário longo ganha respiro entre os assuntos sem precisar de títulos
   novos no HTML — a linha nasce antes do campo de data e antes do status. */
.modal-premium .modal-footer { border-top:1px solid var(--border-color); }
@media (prefers-reduced-motion:reduce) {
  .modal-premium .modal-body .form-group, .modal-premium .modal-body .form-row { animation:none !important; }
  .modal-premium .form-control { transition:none !important; }
}
/* ── Saude page styles ──────────────────────────── */
/* Mesmo padrão do Patrimonial: a barra quebra em linhas e a aba aberta é marcada
   pelo FUNDO, não só pelo sublinhado. Em duas linhas o sublinhado sozinho fica
   solto no meio da barra e não diz onde você está. */
.saude-tabs { display:flex; gap:3px 4px; border-bottom:2px solid var(--border-color); margin-bottom:20px; flex-wrap:wrap; }
.saude-tab { padding:8px 14px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; border-radius:8px; background:none; border-left:none; border-right:none; border-top:none; white-space:nowrap; flex-shrink:0; }
.saude-tab:hover { color:var(--text-main); background:var(--bg-hover); }
.saude-tab.active { color:#10B981; border-bottom-color:#10B981; background:rgba(16,185,129,.10); }
.gs-tabs { display:flex; gap:3px 4px; border-bottom:2px solid var(--border-color); margin-bottom:20px; flex-wrap:wrap; }
.gs-tab { padding:8px 14px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; border-radius:8px; background:none; border-left:none; border-right:none; border-top:none; display:flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0; }
.gs-tab:hover { color:var(--text-main); background:var(--bg-hover); }
.gs-tab.active { color:#14B8A6; border-bottom-color:#14B8A6; background:rgba(20,184,166,.10); }
.saude-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; padding:16px; transition:all .2s; }
.saude-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.saude-stat { text-align:center; padding:12px; }
.saude-stat-val { font-size:22px; font-weight:800; line-height:1.1; transition:transform .2s; }
.saude-stat:hover .saude-stat-val { transform:scale(1.08); }
.saude-stat-label { font-size:10px; color:var(--text-muted); margin-top:4px; }
.saude-table { width:100%; border-collapse:collapse; font-size:12px; }
.saude-table th { text-align:left; font-size:10px; text-transform:uppercase; color:var(--text-muted); padding:8px; border-bottom:1px solid var(--border-color); }
.saude-table td { padding:8px; border-bottom:1px solid var(--border-color); }
.saude-table tr:last-child td { border-bottom:none; }
.saude-table tr:hover { background:var(--bg-page); }
.saude-badge { display:inline-block; padding:2px 8px; border-radius:8px; font-size:10px; font-weight:700; }
.saude-badge.ativo { background:#D1FAE5; color:#059669; }
.saude-badge.pendente { background:#FEF3C7; color:#D97706; }
.saude-badge.concluido { background:#DBEAFE; color:#1E40AF; }
.saude-badge.exclusao { background:#FEE2E2; color:#DC2626; }
.saude-badge.admissao { background:#D1FAE5; color:#059669; }
.saude-badge.aumento { background:#EDE9FE; color:#7C3AED; }
.saude-badge.declinio { background:#FEF3C7; color:#D97706; }
.saude-badge.pad { background:#DBEAFE; color:#1E40AF; }
.saude-menu-item:hover { background:var(--bg-page) !important; }
/* Saude pulse animation for pending items */
@keyframes saudePulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.3)} 50%{box-shadow:0 0 0 8px rgba(16,185,129,0)} }
.saude-pulse { animation:saudePulse 2s infinite; }
/* Saude card stagger animation */
@keyframes saudeCardIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.saude-card { animation:saudeCardIn .35s cubic-bezier(.4,0,.2,1) both; }
.saude-card:nth-child(1){animation-delay:.05s} .saude-card:nth-child(2){animation-delay:.1s}
.saude-card:nth-child(3){animation-delay:.15s} .saude-card:nth-child(4){animation-delay:.2s}
.saude-card:nth-child(5){animation-delay:.25s} .saude-card:nth-child(6){animation-delay:.3s}
/* Saude + Patri tabs slide in */
@keyframes saudeTabSlide { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
.saude-tab,.patri-tab { animation:saudeTabSlide .25s ease both; }
.saude-tab:nth-child(1),.patri-tab:nth-child(1){animation-delay:.02s}
.saude-tab:nth-child(2),.patri-tab:nth-child(2){animation-delay:.05s}
.saude-tab:nth-child(3),.patri-tab:nth-child(3){animation-delay:.08s}
.saude-tab:nth-child(4),.patri-tab:nth-child(4){animation-delay:.11s}
.saude-tab:nth-child(5),.patri-tab:nth-child(5){animation-delay:.14s}
.saude-tab:nth-child(6),.patri-tab:nth-child(6){animation-delay:.17s}
.saude-tab:nth-child(7),.patri-tab:nth-child(7){animation-delay:.20s}
.saude-tab:nth-child(8),.patri-tab:nth-child(8){animation-delay:.23s}
.patri-tab:nth-child(9){animation-delay:.26s}
.patri-tab:nth-child(10){animation-delay:.29s}
/* ── Sub-abas do Saúde (2º nível: Movimentação e E-mails) ────────────────
   A barra principal chegou a 17 abas e virou uma parede. Os itens afins
   passaram a viver dentro de um grupo, que abre esta segunda linha. */
.saude-subtabs { display:flex; gap:6px; flex-wrap:wrap; margin:-12px 0 18px;
  padding:10px 12px; background:var(--bg-page); border:1px solid var(--border-color);
  border-radius:12px; animation:saudeSubIn .28s cubic-bezier(.22,1,.36,1) both; }
.saude-subtab { display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:9px;
  transition:color .18s, background .18s, border-color .18s, transform .18s; }
.saude-subtab:hover { color:var(--text-main); background:var(--bg-card); transform:translateY(-1px); }
.saude-subtab.active { color:#fff; background:var(--sc,#3B82F6); border-color:var(--sc,#3B82F6);
  box-shadow:0 4px 12px color-mix(in srgb, var(--sc,#3B82F6) 34%, transparent); }
.saude-subtab svg { width:14px; height:14px; flex-shrink:0; }
.saude-subtab.active svg { stroke:#fff; }
/* seta que indica "este item abre sub-abas" */
.saude-tab-caret { opacity:.55; transition:transform .22s ease, opacity .18s; }
.saude-tab.active .saude-tab-caret { opacity:1; transform:rotate(180deg); }
@keyframes saudeSubIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.saude-subtab:nth-child(1){animation:saudeTabSlide .24s .02s ease both}
.saude-subtab:nth-child(2){animation:saudeTabSlide .24s .06s ease both}
.saude-subtab:nth-child(3){animation:saudeTabSlide .24s .10s ease both}
.saude-subtab:nth-child(4){animation:saudeTabSlide .24s .14s ease both}

/* Ícone da aba reage ao passar o mouse, como já acontece no menu lateral.
   Antes só o texto mudava de cor e a barra ficava sem vida. */
.saude-tab svg, .saude-subtab svg { transition:transform .28s cubic-bezier(.34,1.4,.64,1); }
.saude-tab:hover svg, .saude-subtab:hover svg { transform:translateY(-2px) scale(1.12); }
.saude-tab.active svg { animation:saudeIconPop .38s cubic-bezier(.34,1.5,.64,1) both; }
@keyframes saudeIconPop { 0%{transform:scale(.8) rotate(-6deg)} 60%{transform:scale(1.16) rotate(3deg)} 100%{transform:none} }
@media (prefers-reduced-motion:reduce) {
  .saude-subtabs, .saude-subtab, .saude-tab svg, .saude-subtab svg { animation:none!important; transition:none!important; }
}

/* Saude stat counter pop */
@keyframes saudeStatPop { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
.saude-stat-val { animation:saudeStatPop .4s .15s cubic-bezier(.34,1.4,.64,1) both; }
/* Saude badge shimmer */
@keyframes saudeBadgeIn { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
.saude-badge { animation:saudeBadgeIn .25s ease both; }
/* Saude timeline fade in */
.saude-timeline-item { animation:saudeCardIn .3s ease both; }
.saude-timeline-item:nth-child(1){animation-delay:.1s} .saude-timeline-item:nth-child(2){animation-delay:.18s}
.saude-timeline-item:nth-child(3){animation-delay:.26s} .saude-timeline-item:nth-child(4){animation-delay:.34s}
/* Saude inline form */
.saude-inline-form { background:var(--bg-page);border:1px solid var(--border-color);border-radius:12px;padding:16px;animation:saudeCardIn .25s ease both; }
/* Saude progress bar */
.saude-progress { height:6px; background:var(--border-color); border-radius:3px; overflow:hidden; }
.saude-progress-bar { height:100%; border-radius:3px; background:linear-gradient(90deg,#10B981,#059669); transition:width .6s cubic-bezier(.4,0,.2,1); }
/* Saude timeline */
.saude-timeline-item { position:relative; padding-left:24px; padding-bottom:16px; border-left:2px solid var(--border-color); margin-left:8px; }
.saude-timeline-item:last-child { border-left-color:transparent; padding-bottom:0; }
/* Comparativo mensal */
@keyframes saude-stat-pop { from{opacity:0;transform:scale(.6)} to{opacity:1;transform:scale(1)} }
@keyframes compFadeInUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.comp-kpi { animation:saude-stat-pop .4s cubic-bezier(.34,1.4,.64,1) both; }
.comp-kpi:nth-child(1){animation-delay:.05s} .comp-kpi:nth-child(2){animation-delay:.12s}
.comp-kpi:nth-child(3){animation-delay:.19s} .comp-kpi:nth-child(4){animation-delay:.26s}
.comp-section { animation:compFadeInUp .35s ease both; }
.comp-section:nth-child(1){animation-delay:.05s} .comp-section:nth-child(2){animation-delay:.12s}
.comp-section:nth-child(3){animation-delay:.19s} .comp-section:nth-child(4){animation-delay:.26s}
.saude-timeline-dot { position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; border:2px solid var(--bg-card); }
.saude-timeline-dot.green { background:#10B981; }
.saude-timeline-dot.yellow { background:#F59E0B; }
.saude-timeline-dot.red { background:#EF4444; }
.saude-timeline-dot.blue { background:#3B82F6; }
/* ── Faturamento (Juliana) ─────────────────────────────────────── */
@keyframes fatHeroFade { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fatHeroShine { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
@keyframes fatNumPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes fatStepperIn { from{opacity:0;transform:translateY(8px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes fatLineGrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes fatBadgeBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
@keyframes fatChipPop { from{transform:scale(.8);opacity:.4} to{transform:scale(1);opacity:1} }

.fat-hero { position:relative; overflow:hidden; border-radius:18px; padding:22px 24px; color:#fff; background:linear-gradient(135deg,#10B981 0%,#0F766E 55%,#0E7490 100%); box-shadow:0 12px 32px rgba(16,185,129,.22); animation:fatHeroFade .45s cubic-bezier(.4,0,.2,1) both; }
.fat-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%); animation:fatHeroShine 3.4s ease-in-out infinite; pointer-events:none; }
body.dark .fat-hero { background:linear-gradient(135deg,#065F46 0%,#0E7490 100%); box-shadow:0 12px 32px rgba(0,0,0,.45); }
.fat-hero-grid { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; position:relative; z-index:1; }
.fat-hero-name { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; opacity:.85; }
.fat-hero-title { font-size:22px; font-weight:800; margin-top:6px; line-height:1.2; }
.fat-hero-sub { font-size:12.5px; opacity:.92; margin-top:6px; max-width:560px; line-height:1.55; }
.fat-hero-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; background:rgba(255,255,255,.18); border-radius:999px; font-size:11px; font-weight:700; backdrop-filter:blur(8px); animation:fatBadgeBob 2.6s ease-in-out infinite; }
.fat-hero-avatar { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; letter-spacing:.5px; backdrop-filter:blur(8px); border:2px solid rgba(255,255,255,.35); }

/* Sub-tabs operadoras */
.fat-subtabs { display:flex; gap:8px; margin:18px 0 16px; flex-wrap:wrap; }
.fat-subtab { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-main); font-size:12.5px; font-weight:600; cursor:pointer; transition:all .18s; }
.fat-subtab:hover { border-color:#10B981; transform:translateY(-1px); box-shadow:0 4px 12px rgba(16,185,129,.12); }
.fat-subtab.active { background:linear-gradient(135deg,#10B981,#059669); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(16,185,129,.32); }
.fat-subtab .fat-dot { width:7px; height:7px; border-radius:50%; }

/* Operadora cards */
.fat-op-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-bottom:18px; }
.fat-op-card { position:relative; background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; padding:16px; overflow:hidden; transition:transform .2s, box-shadow .2s; cursor:pointer; animation:saudeCardIn .35s cubic-bezier(.4,0,.2,1) both; }
.fat-op-card:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.08); }
.fat-op-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--op-color,#10B981); transform-origin:left; transform:scaleX(0); animation:fatLineGrow .55s .15s cubic-bezier(.4,0,.2,1) both; }
.fat-op-head { display:flex; align-items:center; gap:10px; }
.fat-op-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--op-bg,rgba(16,185,129,.12)); color:var(--op-color,#10B981); }
.fat-op-name { font-size:14px; font-weight:800; color:var(--text-main); }
.fat-op-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
.fat-op-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.fat-op-stat { background:var(--bg-page); border-radius:10px; padding:8px 10px; }
.fat-op-stat-num { font-size:18px; font-weight:800; color:var(--op-color,#10B981); animation:fatNumPulse 2.4s ease-in-out infinite; }
.fat-op-stat-lbl { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }

/* Stepper / passo a passo */
.fat-stepper { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.fat-step { display:flex; gap:14px; padding:12px 14px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; animation:fatStepperIn .35s cubic-bezier(.34,1.5,.64,1) both; transition:all .2s; position:relative; }
.fat-step:hover { border-color:#10B981; box-shadow:0 4px 14px rgba(16,185,129,.10); }
.fat-step:nth-child(1){animation-delay:.05s} .fat-step:nth-child(2){animation-delay:.10s}
.fat-step:nth-child(3){animation-delay:.15s} .fat-step:nth-child(4){animation-delay:.20s}
.fat-step:nth-child(5){animation-delay:.25s} .fat-step:nth-child(6){animation-delay:.30s}
.fat-step:nth-child(7){animation-delay:.35s} .fat-step:nth-child(8){animation-delay:.40s}
.fat-step:nth-child(9){animation-delay:.45s} .fat-step:nth-child(10){animation-delay:.50s}
.fat-step-num { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#10B981,#059669); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 12px rgba(16,185,129,.32); }
.fat-step-num.purple { background:linear-gradient(135deg,#8B5CF6,#6D28D9); box-shadow:0 4px 12px rgba(139,92,246,.32); }
.fat-step-num.orange { background:linear-gradient(135deg,#F97316,#C2410C); box-shadow:0 4px 12px rgba(249,115,22,.32); }
.fat-step-num.blue { background:linear-gradient(135deg,#3B82F6,#1D4ED8); box-shadow:0 4px 12px rgba(59,130,246,.32); }
.fat-step-body { flex:1; min-width:0; }
.fat-step-title { font-size:13px; font-weight:700; color:var(--text-main); }
.fat-step-desc { font-size:12px; color:var(--text-muted); line-height:1.5; margin-top:3px; }
.fat-step-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.fat-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; font-size:10.5px; font-weight:600; background:var(--bg-page); color:var(--text-muted); border:1px solid var(--border-color); animation:fatChipPop .28s ease both; }
.fat-chip.green { background:rgba(16,185,129,.12); color:#059669; border-color:rgba(16,185,129,.28); }
.fat-chip.purple { background:rgba(139,92,246,.12); color:#7C3AED; border-color:rgba(139,92,246,.28); }
.fat-chip.orange { background:rgba(249,115,22,.12); color:#C2410C; border-color:rgba(249,115,22,.28); }
.fat-chip.blue { background:rgba(59,130,246,.12); color:#1D4ED8; border-color:rgba(59,130,246,.28); }
.fat-chip.red { background:rgba(239,68,68,.12); color:#B91C1C; border-color:rgba(239,68,68,.28); }
body.dark .fat-chip.green { color:#34D399 } body.dark .fat-chip.purple { color:#A78BFA } body.dark .fat-chip.orange { color:#FB923C } body.dark .fat-chip.blue { color:#60A5FA } body.dark .fat-chip.red { color:#F87171 }

/* Path / caminho copiável */
.fat-path { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--bg-page); border:1px dashed var(--border-color); border-radius:8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; color:var(--text-main); margin-top:8px; transition:all .18s; }
.fat-path:hover { border-color:#10B981; background:rgba(16,185,129,.06); }
.fat-path-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fat-path-btn { background:none; border:none; cursor:pointer; padding:4px; border-radius:6px; color:var(--text-muted); transition:all .18s; flex-shrink:0; }
.fat-path-btn:hover { background:rgba(16,185,129,.12); color:#10B981; }
.fat-path-btn.copied { color:#10B981; }

/* Formula box */
.fat-formula { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(59,130,246,.08)); border:1px solid rgba(16,185,129,.22); border-radius:8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; font-weight:600; color:var(--text-main); margin-top:6px; }
.fat-formula-label { font-size:10px; color:#10B981; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }

/* Sort guide */
.fat-sort-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; margin-top:10px; }
.fat-sort-card { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-page); border:1px solid var(--border-color); border-radius:10px; transition:all .18s; }
.fat-sort-card:hover { border-color:#10B981; transform:translateY(-1px); }
.fat-sort-letter { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#10B981,#059669); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fat-sort-info { font-size:11px; color:var(--text-muted); }
.fat-sort-info b { display:block; font-size:12px; color:var(--text-main); margin-bottom:1px; }

/* Alert/info banner */
.fat-banner { display:flex; gap:12px; padding:12px 14px; border-radius:12px; align-items:flex-start; margin-bottom:14px; animation:saudeCardIn .3s ease both; }
.fat-banner.info { background:rgba(59,130,246,.08); border-left:3px solid #3B82F6; color:var(--text-main); }
.fat-banner.warn { background:rgba(245,158,11,.08); border-left:3px solid #F59E0B; color:var(--text-main); }
.fat-banner.danger { background:rgba(239,68,68,.08); border-left:3px solid #EF4444; color:var(--text-main); }
.fat-banner.success { background:rgba(16,185,129,.08); border-left:3px solid #10B981; color:var(--text-main); }
.fat-banner-ico { width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.fat-banner-text { font-size:12.5px; line-height:1.55; flex:1; }
.fat-banner-text b { display:block; font-size:13px; margin-bottom:2px; }

/* Tag de filtro / valor */
.fat-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; background:var(--bg-page); border:1px solid var(--border-color); border-radius:6px; font-size:11px; font-family:ui-monospace,monospace; color:var(--text-main); }
.fat-tag b { color:#10B981; }

/* Validation status pill */
.fat-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.fat-pill.ok { background:rgba(16,185,129,.14); color:#059669; }
.fat-pill.err { background:rgba(239,68,68,.14); color:#B91C1C; }
body.dark .fat-pill.ok { color:#34D399 } body.dark .fat-pill.err { color:#F87171 }

/* Workflow visual (timeline horizontal) */
.fat-flow { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:18px 0; position:relative; }
.fat-flow-step { background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:14px; text-align:center; transition:all .2s; animation:fatStepperIn .35s cubic-bezier(.34,1.5,.64,1) both; }
.fat-flow-step:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.08); border-color:#10B981; }
.fat-flow-step:nth-child(1){animation-delay:.05s} .fat-flow-step:nth-child(2){animation-delay:.12s}
.fat-flow-step:nth-child(3){animation-delay:.19s} .fat-flow-step:nth-child(4){animation-delay:.26s}
.fat-flow-step:nth-child(5){animation-delay:.33s} .fat-flow-step:nth-child(6){animation-delay:.40s}
.fat-flow-icon { width:42px; height:42px; border-radius:12px; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; }
.fat-flow-step h5 { font-size:12px; font-weight:800; color:var(--text-main); margin-bottom:3px; }
.fat-flow-step p { font-size:10.5px; color:var(--text-muted); line-height:1.45; }

/* Section heading */
.fat-section-head { display:flex; align-items:center; gap:10px; margin:18px 0 10px; }
.fat-section-head h4 { font-size:14px; font-weight:800; color:var(--text-main); }
.fat-section-head .fat-section-line { flex:1; height:1px; background:linear-gradient(90deg, var(--border-color), transparent); }
.fat-section-ico { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; }

/* Upload zones / processar / exportar */
.fat-upload-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:10px 12px; transition:all .2s; animation:saudeCardIn .3s ease both; }
.fat-upload-card:hover { box-shadow:0 4px 14px rgba(16,185,129,.08); }
.fat-btn-process { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; background:linear-gradient(135deg,#10B981,#059669); color:#fff; border:none; border-radius:10px; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 6px 18px rgba(16,185,129,.32); transition:transform .15s, box-shadow .2s; }
.fat-btn-process:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 10px 22px rgba(16,185,129,.42); }
.fat-btn-process:disabled { opacity:.7; cursor:wait; }
.fat-btn-export { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; background:var(--bg-card); border:1px solid #10B981; color:#10B981; border-radius:8px; font-size:11.5px; font-weight:700; cursor:pointer; transition:all .15s; }
.fat-btn-export:hover { background:#10B981; color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(16,185,129,.28); }
@keyframes spin { to { transform:rotate(360deg); } }

/* PROCV mini-diagram */
.fat-procv { display:flex; align-items:center; gap:10px; padding:10px 12px; background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(16,185,129,.06)); border:1px solid var(--border-color); border-radius:10px; font-size:11.5px; margin-top:8px; flex-wrap:wrap; }
.fat-procv-arrow { color:#10B981; font-weight:800; }
.fat-procv-piece { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:6px; font-family:ui-monospace,monospace; font-weight:600; }

/* Automações Avisos */
.av-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;transition:box-shadow .2s}
.av-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.av-urgency{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.av-urgency.critico{background:#EF4444}
.av-urgency.alto{background:#F59E0B}
.av-urgency.normal{background:#6366F1}
.av-slide-sel{border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);padding:5px 8px;font-size:11.5px;color:var(--text-main);cursor:pointer;outline:none}
.av-slide-sel.selected{border-color:#8B5CF6;background:rgba(139,92,246,.07)}
/* Modal overlay */
#av-modal{position:fixed;top:84px;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
#av-modal-box{background:var(--bg-card);border-radius:16px;padding:24px;width:100%;max-width:520px;box-shadow:0 24px 64px rgba(0,0,0,.22)}
@keyframes patriStatIn { from{opacity:0;transform:translateY(12px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes patriGlow { 0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,0)} 50%{box-shadow:0 0 16px 2px rgba(99,102,241,.15)} }

/* KPI icons */
.kpi-icon { margin-bottom:10px; display:flex; align-items:center; }
.kpi-svg { display:block; }
.kpi-svg * { transform-box:fill-box; transform-origin:center; }
@keyframes kpiEnter { from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
.card-kpi .kpi-icon { animation:kpiEnter .5s cubic-bezier(.34,1.4,.64,1) both; }

/* ── KPI hover animations (all contained, compositor-only) ───────── */
/* Bars */
.kpi-svg .kpi-bar { transform-origin:bottom center; }
@keyframes kpiBarUp { from{transform:scaleY(.15);opacity:.4} to{transform:scaleY(1);opacity:1} }
.card-kpi:hover .kpi-b1 { animation:kpiBarUp .35s .00s cubic-bezier(.34,1.4,.64,1) both; }
.card-kpi:hover .kpi-b2 { animation:kpiBarUp .35s .07s cubic-bezier(.34,1.4,.64,1) both; }
.card-kpi:hover .kpi-b3 { animation:kpiBarUp .35s .14s cubic-bezier(.34,1.4,.64,1) both; }
/* Clock hand sweep */
@keyframes kpiHandSweep { from{transform:rotate(-30deg);opacity:.4} to{transform:rotate(0deg);opacity:1} }
.card-kpi:hover .kpi-hand { animation:kpiHandSweep .45s cubic-bezier(.34,1.4,.64,1) both; }
/* Check draw */
@keyframes kpiCheckIn { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
.card-kpi:hover .kpi-check { animation:kpiCheckIn .38s .05s cubic-bezier(.34,1.5,.64,1) both; }
/* Calendar pop */
@keyframes kpiCalPop { 0%{transform:scaleY(1)} 35%{transform:scaleY(.82)} 65%{transform:scaleY(1.06)} 100%{transform:scaleY(1)} }
.card-kpi:hover .kpi-cal { animation:kpiCalPop .42s ease both; transform-origin:bottom center; }
/* Person bob */
.card-kpi:hover .kpi-p1 { animation:personBob .45s .00s ease both; }
.card-kpi:hover .kpi-p2 { animation:personBob .45s .10s ease both; }
/* Doc lift */
.card-kpi:hover .kpi-doc { animation:docLift .40s ease both; }
/* Lines reveal */
.kpi-svg .kpi-ln { transform-origin:left center; }
.card-kpi:hover .kpi-ln1 { animation:lineReveal .30s .06s ease both; }
.card-kpi:hover .kpi-ln2 { animation:lineReveal .30s .15s ease both; }
/* Alert flash */
.card-kpi:hover .kpi-alert { animation:alertFlash .55s ease both; }
/* Cross beat */
.card-kpi:hover .kpi-cross { animation:crossBeat .38s ease both; }
/* Trend slide */
.card-kpi:hover .kpi-trend { animation:trendIn .35s ease both; }

/* ── Rank badge animations ───────────────────────────────────────── */
.rank-badge { flex-shrink:0; }
@keyframes rankEnter  { from{transform:scale(0) rotate(-20deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
/* Gold #1: scale pulse + strong golden ring */
@keyframes rank1Glow  { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0),0 0 6px rgba(245,158,11,0.2)} 50%{box-shadow:0 0 0 8px rgba(245,158,11,0.35),0 0 18px rgba(245,158,11,0.45)} }
@keyframes rank1Scale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
/* Silver #2: glow ring + brightness shimmer (both combined = visible) */
@keyframes rank2Shine { 0%,100%{box-shadow:0 0 0 0 rgba(203,213,225,0);filter:brightness(1)} 50%{box-shadow:0 0 0 7px rgba(203,213,225,0.45);filter:brightness(1.45)} }
/* Bronze #3: warm ember ring */
@keyframes rank3Glow  { 0%,100%{box-shadow:0 0 0 0 rgba(205,127,50,0),0 0 4px rgba(205,127,50,0.1)} 50%{box-shadow:0 0 0 7px rgba(205,127,50,0.38),0 0 14px rgba(205,127,50,0.3)} }
.rank-1 { animation:rankEnter .5s .00s cubic-bezier(.34,1.5,.64,1) both, rank1Glow 2s 1s ease-in-out infinite, rank1Scale 2s 1s ease-in-out infinite; }
.rank-2 { animation:rankEnter .5s .06s cubic-bezier(.34,1.5,.64,1) both, rank2Shine 2.4s 1s ease-in-out infinite; }
.rank-3 { animation:rankEnter .5s .12s cubic-bezier(.34,1.5,.64,1) both, rank3Glow 2.8s 1s ease-in-out infinite; }
.rank-n { animation:rankEnter .5s .18s cubic-bezier(.34,1.5,.64,1) both; }

/* Import table improvements */
.imp-row-selected { background: rgba(26,79,156,0.06) !important; box-shadow: inset 3px 0 0 var(--blue); }
.imp-row-selected:hover { background: rgba(26,79,156,0.10) !important; }
body.dark .imp-row-selected { background: rgba(99,179,237,0.08) !important; box-shadow: inset 3px 0 0 #63B3ED; }
body.dark .imp-row-selected:hover { background: rgba(99,179,237,0.13) !important; }

/* Form controls in dark mode get proper focus glow */
body.dark .form-control:focus { border-color:#63B3ED; box-shadow:0 0 0 3px rgba(99,179,237,0.2); }
body:not(.dark) .form-control:focus { box-shadow:0 0 0 3px rgba(26,79,156,0.12); }

/* Import-specific input highlight */
body.dark input[style*="border-color:#F59E0B"] { background:#2d2a1a !important; color:#FCD34D !important; }

/* Modal bem dark mode */
.modal-imp-bem { background:var(--bg-card); color:var(--text-main); border-radius:16px; padding:28px; width:520px; max-width:95vw; box-shadow:0 8px 40px rgba(0,0,0,.4); }
.modal-imp-bem .form-label { color:var(--text-muted); }
.modal-imp-bem .form-control { background:var(--bg-page); border-color:var(--border-color); color:var(--text-main); }
.nav-badge { background:var(--red); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:2px; }
.logout-btn { width:100%; padding:9px 14px; background:none; border:1px solid var(--border-color); color:var(--text-main); border-radius:8px; cursor:pointer; font-size:13px; font-weight:500; text-align:left; transition:background .15s, border-color .15s, color .15s; }
.logout-btn:hover { background:rgba(220,38,38,0.08); border-color:rgba(220,38,38,0.35); color:#DC2626; }

/* Main */
#main { margin-left:0; margin-top:84px; flex:1; display:flex; flex-direction:column; min-height:calc(100dvh - 84px); min-width:0; overflow-x:hidden; }
#topbar { background:var(--bg-card); border-bottom:1px solid var(--border-color); padding:0 24px; height:52px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:90; transition:background .3s; }
#topbar h1 { font-size:18px; font-weight:700; color:var(--text); }
#topbar .topbar-right { display:flex; align-items:center; gap:14px; }
/* Topbar datetime */
#topbar-datetime { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.tb-date { font-size:10.5px; color:rgba(255,255,255,.6); font-weight:500; text-transform:capitalize; letter-spacing:.2px; }
.tb-time { font-size:19px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-0.5px; }
/* Animated Sun/Moon Toggle */
#btn-dark { position:relative; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.2); border-radius:12px; width:40px; height:40px; cursor:pointer; overflow:hidden; transition:border-color .3s, box-shadow .3s, transform .2s; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#btn-dark:hover { transform:scale(1.08); background:rgba(255,255,255,.15); }
body:not(.dark) #btn-dark:hover { box-shadow:0 0 0 4px rgba(245,158,11,0.25); border-color:#F59E0B; }
body.dark #btn-dark:hover { box-shadow:0 0 0 4px rgba(147,197,253,0.2); border-color:#93C5FD; }
#btn-escritorio { display:none; align-items:center; gap:6px; padding:6px 12px; background:rgba(139,92,246,.18); border:1.5px solid rgba(139,92,246,.4); border-radius:10px; cursor:pointer; color:rgba(255,255,255,.9); font-size:12px; font-weight:600; letter-spacing:.3px; transition:all .2s; flex-shrink:0; text-decoration:none; }
#btn-escritorio:hover { background:rgba(139,92,246,.32); border-color:rgba(139,92,246,.7); box-shadow:0 0 0 3px rgba(139,92,246,.2); color:#fff; transform:translateY(-1px); }
#btn-escritorio svg { width:15px; height:15px; flex-shrink:0; }
.tb-sun { position:absolute; display:flex; align-items:center; justify-content:center; transition:opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); }
.tb-sun svg { animation:rotateSun 12s linear infinite; filter:drop-shadow(0 0 5px rgba(245,158,11,0.7)); will-change:transform; }
body.dark .tb-sun { opacity:0; transform:scale(.4) rotate(100deg); pointer-events:none; }
body:not(.dark) .tb-sun { opacity:1; transform:scale(1) rotate(0deg); }
.tb-moon { position:absolute; display:flex; align-items:center; justify-content:center; transition:opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); }
.tb-moon svg { filter:drop-shadow(0 0 7px rgba(147,197,253,0.9)); }
body:not(.dark) .tb-moon { opacity:0; transform:scale(.4) rotate(-100deg); pointer-events:none; }
body.dark .tb-moon { opacity:1; transform:scale(1) rotate(0deg); }
.tb-star { position:absolute; background:#C7D2FE; border-radius:50%; animation:twinkleStar 2.2s ease-in-out infinite; }
@keyframes rotateSun { to { transform:rotate(360deg); } }
@keyframes twinkleStar { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.25; transform:scale(.5); } }
.search-box { display:flex; align-items:center; gap:8px; background:var(--gray-light); border:1px solid var(--border); border-radius:8px; padding:6px 12px; }
.search-box input { border:none; background:none; outline:none; font-size:13px; color:var(--text); width:200px; }
#content { padding:24px; flex:1; min-width:0; max-width:100%; }

/* Cards */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:16px; margin-bottom:24px; }
.card { background:var(--bg-card); border-radius:var(--card-radius); padding:20px; box-shadow:var(--shadow); border:1px solid var(--border-color); transition: var(--transition); }
.card-stat { display:flex; align-items:flex-start; justify-content:space-between; }
.card-stat .val { font-size:32px; font-weight:800; color:var(--text); line-height:1; }
.card-stat .label { font-size:12px; color:var(--text-light); margin-top:4px; }
.card-stat .icon-wrap { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.card-stat .trend { font-size:12px; margin-top:8px; }
/* KPI Cards */
.card-kpi { position:relative; overflow:hidden; }
.card-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--kpi-color,var(--blue)); border-radius:16px 16px 0 0; }
.kpi-icon { margin-bottom:10px; display:flex; align-items:center; }
.kpi-val { font-size:36px; font-weight:800; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.kpi-val-sm { font-size:22px; }
.kpi-label { font-size:13px; font-weight:600; color:var(--text); margin-top:6px; }
.kpi-sub { font-size:11px; color:var(--text-light); margin-top:2px; }
.card-kpi:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.12), 0 0 0 2px var(--kpi-color), 0 0 28px -6px var(--kpi-color); border-color:var(--kpi-color) !important; }
/* Skeleton */
.skel { background:linear-gradient(90deg,var(--border) 25%,var(--gray-light) 50%,var(--border) 75%); background-size:200% 100%; animation:skelPulse 1.4s ease infinite; border-radius:10px; }
@keyframes skelPulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* card-clickable moved to animation system below */

/* Tables */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-title { font-size:16px; font-weight:700; color:var(--text); }
.table-wrap { background:var(--white); border-radius:14px; box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
thead th { background:var(--gray-light); font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-light); padding:10px 16px; text-align:left; font-weight:600; }
tbody tr { border-top:1px solid var(--border); }
tbody tr:hover { background:var(--gray-light); }
tbody td { padding:12px 16px; font-size:13px; color:var(--text); }
tbody td.light { color:var(--text-light); font-size:12px; }
.table-actions { display:flex; gap:6px; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all .15s; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; }
.btn-sm { padding:4px 10px; font-size:12px; border-radius:6px; }
.btn-outline { background:none; border:1px solid var(--border); color:var(--text); }
.btn-outline:hover { background:var(--gray-light); }
.btn-danger { background:#FEE2E2; color:var(--red); }
.btn-danger:hover { background:#FECACA; }
.btn-success { background:#D1FAE5; color:#065F46; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:700; }
.badge-pendente    { background:#FEF3C7; color:#92400E; }
.badge-em_analise  { background:#DBEAFE; color:#1E40AF; }
.badge-respondida  { background:#D1FAE5; color:#065F46; }
.badge-cancelada   { background:#FEE2E2; color:#991B1B; }
.badge-abertura    { background:#FEF3C7; color:#92400E; }
.badge-analise     { background:#DBEAFE; color:#1E40AF; }
.badge-vistoria    { background:#EDE9FE; color:#4C1D95; }
.badge-aprovado    { background:#D1FAE5; color:#065F46; }
.badge-concluido   { background:#D1FAE5; color:#065F46; }
.badge-negado      { background:#FEE2E2; color:#991B1B; }
/* status do patri_sinistros */
.badge-aberto          { background:#FEF3C7; color:#92400E; }
.badge-em_andamento    { background:#DBEAFE; color:#1E40AF; white-space:nowrap; }
.badge-aguardando_docs { background:#EDE9FE; color:#4C1D95; white-space:nowrap; }
.badge-finalizado      { background:#D1FAE5; color:#065F46; }
.badge-ativo       { background:#D1FAE5; color:#065F46; }
.badge-inativo     { background:#FEE2E2; color:#991B1B; }
.badge-info        { background:#EFF6FF; color:#1A4F9C; }
.badge-a_receber   { background:#FEF3C7; color:#92400E; white-space:nowrap; }
.badge-recebida    { background:#D1FAE5; color:#065F46; }
.badge-cancelada-c { background:#FEE2E2; color:#991B1B; }

/* Filters */
.filters { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.filter-btn { padding:5px 14px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; border:1.5px solid var(--border); background:var(--white); color:var(--text-light); transition:all .15s; }
.filter-btn.active, .filter-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-light); }
/* Filtro de alerta (pedido da Flávia): "Não há cobertura" nasce vermelho, e não
   só quando está selecionado — é o caso que ela precisa enxergar de longe. */
.filter-btn-vermelho { border-color:#DC262655; color:#DC2626; }
.filter-btn-vermelho:hover { border-color:#DC2626; color:#DC2626; background:rgba(220,38,38,.08); }
.filter-btn-vermelho.active { border-color:#DC2626; color:#fff; background:#DC2626; }

/* Modal — enhanced version in animation system below */
.modal { background:var(--white); border-radius:16px; width:560px; max-width:95vw; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.2); flex-shrink:0; }
.modal-header { padding:20px 24px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--white); z-index:1; }
.modal-title { font-size:17px; font-weight:700; }
.modal-close { background:var(--gray-light); border:none; width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:16px; color:var(--text-light); }
.modal-close:hover { background:var(--border); }
.modal-body { padding:20px 24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; position:sticky; bottom:0; background:var(--white); }

/* Form */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:12px; font-weight:600; color:var(--text-light); margin-bottom:5px; text-transform:uppercase; letter-spacing:.3px; }
.form-control { width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; color:var(--text); outline:none; transition:border-color .15s; background:var(--white); }
.form-control:focus { border-color:var(--blue); }
select.form-control { cursor:pointer; }
textarea.form-control { min-height:100px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ── Login Screen ───────────────────────────────────────────────────── */
#login-screen {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background: #0a1628;
  overflow:hidden;
}
/* Animated gradient orbs */
#login-screen::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(26,79,156,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(139,92,246,0.3) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 60% 10%, rgba(16,185,129,0.2) 0%, transparent 50%);
  animation: orbShift 8s ease-in-out infinite alternate;
}
@keyframes orbShift {
  0%   { opacity:1; transform:scale(1) rotate(0deg); }
  100% { opacity:.85; transform:scale(1.06) rotate(2deg); }
}
/* Floating particles */
.lp { position:absolute; border-radius:50%; animation:floatUp linear infinite; opacity:0; }
@keyframes floatUp {
  0%   { transform:translateY(0) scale(1);   opacity:0; }
  10%  { opacity:.6; }
  90%  { opacity:.2; }
  100% { transform:translateY(-100vh) scale(.4); opacity:0; }
}
/* Card */
.login-card {
  position:relative; z-index:2;
  background:rgba(255,255,255,0.97);
  border-radius:24px;
  padding:48px 44px 40px;
  width:400px; max-width:92vw;
  box-shadow:0 32px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.12);
  animation:cardIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(32px) scale(.96); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}
/* Logo */
.login-logo { text-align:center; margin-bottom:10px; animation:fadeSlide .6s .15s both; }
.login-logo .brand {
  font-size:34px; font-weight:900; letter-spacing:-1px;
  background:linear-gradient(135deg,#1A4F9C,#3B82F6);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  display:inline-block;
}
.login-logo .brand span {
  background:linear-gradient(135deg,#C0272D,#EF4444);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.login-logo .sub {
  font-size:11px; color:#6b7c99; text-transform:uppercase;
  letter-spacing:2.5px; margin-top:6px; font-weight:600;
}
/* Divider */
.login-divider {
  height:1px; background:linear-gradient(90deg,transparent,#E2E8F0,transparent);
  margin:20px 0 28px; animation:fadeSlide .6s .2s both;
}
/* Title */
.login-title {
  font-size:19px; font-weight:700; text-align:center;
  color:#1a2a4a; margin-bottom:26px;
  animation:fadeSlide .6s .25s both;
}
/* Input groups with floating effect */
.login-field { position:relative; margin-bottom:18px; animation:fadeSlide .6s both; }
.login-field:nth-child(1) { animation-delay:.3s; }
.login-field:nth-child(2) { animation-delay:.38s; }
.login-field label {
  display:block; font-size:11px; font-weight:700; color:#6b7c99;
  text-transform:uppercase; letter-spacing:1px; margin-bottom:7px;
}
.login-field input {
  width:100%; padding:13px 16px;
  border:1.5px solid #E2E8F0; border-radius:12px;
  font-size:14px; color:#1a2a4a; background:#FAFBFF;
  outline:none; transition:all .25s cubic-bezier(.4,0,.2,1);
}
.login-field input:focus {
  border-color:var(--blue); background:#fff;
  box-shadow:0 0 0 4px rgba(26,79,156,0.1);
  transform:translateY(-1px);
}
/* Error */
#login-error {
  background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA;
  padding:11px 14px; border-radius:10px; font-size:13px;
  margin-bottom:16px; display:none;
  animation:shake .4s cubic-bezier(.36,.07,.19,.97);
}
/* Bloqueio de fim de semana: a senha estava certa, então não sacode nem fica
   vermelho. Aviso azul e explicativo, para ninguém achar que errou a senha. */
#login-error.login-aviso {
  background:#EFF6FF; color:#1E40AF; border-color:#BFDBFE;
  text-align:left; line-height:1.55;
  animation:fadeSlide .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes shake {
  0%,100%{ transform:translateX(0); }
  20%    { transform:translateX(-7px); }
  40%    { transform:translateX(7px); }
  60%    { transform:translateX(-4px); }
  80%    { transform:translateX(4px); }
}
/* Button */
.login-btn {
  width:100%; padding:14px; margin-top:6px;
  background:linear-gradient(135deg,#1A4F9C,#2563EB);
  color:#fff; border:none; border-radius:12px;
  font-size:15px; font-weight:700; cursor:pointer; letter-spacing:.3px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
  animation:fadeSlide .6s .45s both;
}
.login-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
  opacity:0; transition:opacity .2s;
}
.login-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,79,156,0.4); }
.login-btn:hover::after { opacity:1; }
.login-btn:active { transform:translateY(0); box-shadow:none; }
.login-btn:disabled { opacity:.7; cursor:not-allowed; transform:none; }
/* Footer note */
.login-footer {
  text-align:center; font-size:11px; color:#6b7c99;
  margin-top:20px; animation:fadeSlide .6s .5s both;
}
@keyframes fadeSlide {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Pagination */
.pagination { display:flex; gap:4px; margin-top:16px; align-items:center; }
.page-btn { padding:5px 10px; border:1.5px solid var(--border); border-radius:6px; background:var(--white); cursor:pointer; font-size:13px; color:var(--text); }
.page-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.page-btn:hover:not(.active) { background:var(--gray-light); }
.page-info { font-size:13px; color:var(--text-light); margin:0 8px; }

/* Timeline */
.timeline { position:relative; padding-left:24px; }
.timeline-item { position:relative; padding-bottom:20px; }
.timeline-item:before { content:''; position:absolute; left:-20px; top:6px; bottom:-6px; width:2px; background:var(--border); }
.timeline-item:last-child:before { display:none; }
.timeline-dot { position:absolute; left:-25px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--blue); border:2px solid var(--white); box-shadow:0 0 0 2px var(--blue); }
.timeline-title { font-size:14px; font-weight:700; color:var(--text); }
.timeline-desc { font-size:13px; color:var(--text-light); margin-top:2px; }
.timeline-date { font-size:11px; color:#94A3B8; margin-top:3px; }

/* Empty */
.empty { text-align:center; padding:48px 24px; color:var(--text-light); }
.empty-icon { font-size:48px; margin-bottom:12px; }
.empty p { font-size:14px; }

/* Toast */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:0 4px 20px rgba(0,0,0,0.15); min-width:260px; max-width:380px; animation:slideIn .25s ease; }
.toast-success { background:#D1FAE5; color:#065F46; border:1px solid #A7F3D0; }
.toast-error   { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
.toast-info    { background:#DBEAFE; color:#1E40AF; border:1px solid #BFDBFE; }
@keyframes slideIn  { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes slideOut { from { transform:translateX(0); opacity:1; } to { transform:translateX(100%); opacity:0; } }
@keyframes uiFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes uiPop    { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Entrada padrão para os modais/overlays criados via JS: a janela (card) dá um leve "pop".
   Cobre os overlays inline que estavam sem animação, sem precisar editar cada arquivo.
   Exclui o drawer do calendário (tem animação própria de slide). */
[id$="-overlay"]:not(#cal-drawer-overlay) > div:first-child,
[id$="-modal"]:not(#cal-drawer-overlay) > div:first-child { animation: uiPop .22s cubic-bezier(.34,1.4,.64,1) both; }

/* ── Animation System ─────────────────────────────────────────────── */
@keyframes fadeUp    { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInUp  { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeDown  { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn  { from { opacity:0; transform:scale(0.93) translateY(12px); } to { opacity:1; transform:scale(1) translateY(0); } }

/* ── Welcome Modal ─────────────────────────────────────────────────── */
@keyframes wlBackdropIn { from{opacity:0} to{opacity:1} }
@keyframes wlCardIn     { from{opacity:0;transform:scale(.9) translateY(32px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes wlSlideRight { from{opacity:0;transform:translateX(-18px)} to{opacity:1;transform:translateX(0)} }
@keyframes wlStepIn     { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
@keyframes wlOrb        { 0%,100%{transform:scale(1) translate(0,0);opacity:.35} 33%{transform:scale(1.15) translate(8px,-10px);opacity:.55} 66%{transform:scale(.9) translate(-6px,8px);opacity:.3} }
@keyframes wlFeatureIn  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes wlShine      { from{left:-100%} to{left:200%} }
@keyframes wlPulseRing  { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.2);opacity:0} }
@keyframes wlCheckPop   { 0%{transform:scale(0) rotate(-45deg);opacity:0} 70%{transform:scale(1.25) rotate(5deg);opacity:1} 100%{transform:scale(1) rotate(0deg);opacity:1} }
@keyframes wlBounce     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes scaleOut { from { opacity:1; transform:scale(1) translateY(0); } to { opacity:0; transform:scale(0.93) translateY(12px); } }
@keyframes shimmer  { 0% { background-position:-400% 0; } 100% { background-position:400% 0; } }
@keyframes spin     { to { transform:rotate(360deg); } }
@keyframes pulseDot { 0%,100% { box-shadow:0 0 0 0 rgba(192,39,45,0.5); } 60% { box-shadow:0 0 0 7px rgba(192,39,45,0); } }
@keyframes slideInLeft { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
@keyframes navIndicator { from { height:0; opacity:0; } to { height:60%; opacity:1; } }

/* Page transition */
#content { transition:opacity .18s ease; }
#content.fading { opacity:0; pointer-events:none; }
.page-enter > * { animation:fadeUp .38s cubic-bezier(0.22,0.61,0.36,1) both; }
.page-enter > *:nth-child(2) { animation-delay:.05s; }
.page-enter > *:nth-child(3) { animation-delay:.10s; }
.page-enter > *:nth-child(4) { animation-delay:.15s; }
.page-enter > *:nth-child(5) { animation-delay:.20s; }

/* Dashboard cards stagger */
@keyframes dashCardIn { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.cards-grid .card { animation:dashCardIn .4s cubic-bezier(0.22,0.61,0.36,1) both; }
.cards-grid .card:nth-child(1) { animation-delay:.04s; }
.cards-grid .card:nth-child(2) { animation-delay:.08s; }
.cards-grid .card:nth-child(3) { animation-delay:.12s; }
.cards-grid .card:nth-child(4) { animation-delay:.16s; }
.cards-grid .card:nth-child(5) { animation-delay:.20s; }
.cards-grid .card:nth-child(6) { animation-delay:.24s; }
/* KPI cards stagger (dashboard inline grids) */
.card-kpi { animation:dashCardIn .4s cubic-bezier(0.22,0.61,0.36,1) both; }
.kpi-row-1 .card-kpi:nth-child(1) { animation-delay:.04s; }
.kpi-row-1 .card-kpi:nth-child(2) { animation-delay:.09s; }
.kpi-row-1 .card-kpi:nth-child(3) { animation-delay:.14s; }
.kpi-row-1 .card-kpi:nth-child(4) { animation-delay:.19s; }
.kpi-row-2 .card-kpi:nth-child(1) { animation-delay:.12s; }
.kpi-row-2 .card-kpi:nth-child(2) { animation-delay:.17s; }
.kpi-row-2 .card-kpi:nth-child(3) { animation-delay:.22s; }
.kpi-row-2 .card-kpi:nth-child(4) { animation-delay:.27s; }
/* Patrimonial KPI row stagger */
.kpi-row-patri .card-kpi:nth-child(1) { animation-delay:.04s; }
.kpi-row-patri .card-kpi:nth-child(2) { animation-delay:.09s; }
.kpi-row-patri .card-kpi:nth-child(3) { animation-delay:.14s; }
.kpi-row-patri .card-kpi:nth-child(4) { animation-delay:.19s; }
.kpi-row-patri .card-kpi:nth-child(5) { animation-delay:.24s; }

/* Table rows stagger */
.anim-rows tbody tr { opacity:0; animation:fadeUp .3s ease both; }
.anim-rows tbody tr:nth-child(1)  { animation-delay:.03s; }
.anim-rows tbody tr:nth-child(2)  { animation-delay:.06s; }
.anim-rows tbody tr:nth-child(3)  { animation-delay:.09s; }
.anim-rows tbody tr:nth-child(4)  { animation-delay:.12s; }
.anim-rows tbody tr:nth-child(5)  { animation-delay:.15s; }
.anim-rows tbody tr:nth-child(6)  { animation-delay:.18s; }
.anim-rows tbody tr:nth-child(7)  { animation-delay:.21s; }
.anim-rows tbody tr:nth-child(8)  { animation-delay:.24s; }
.anim-rows tbody tr:nth-child(9)  { animation-delay:.27s; }
.anim-rows tbody tr:nth-child(10) { animation-delay:.30s; }
.anim-rows tbody tr:nth-child(n+11) { animation-delay:.33s; }

/* Skeleton loading */
.skeleton { background:linear-gradient(90deg,#edf1f7 25%,#e2e7ef 50%,#edf1f7 75%); background-size:400% 100%; animation:shimmer 1.6s infinite; border-radius:8px; }
.skeleton-line { height:14px; margin:6px 0; border-radius:6px; }
.skeleton-line.w-60 { width:60%; }
.skeleton-line.w-80 { width:80%; }
.skeleton-line.w-40 { width:40%; }
.skeleton-card { background:var(--white); border-radius:14px; padding:20px; border:1px solid var(--border); }

/* Loading spinner */
.spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--blue); border-radius:50%; animation:spin .75s linear infinite; display:inline-block; }

/* Enhanced card hover */
.card-clickable { cursor:pointer; transition:box-shadow .25s, transform .25s, border-color .25s !important; }
.card-clickable:hover { box-shadow:0 8px 28px rgba(26,79,156,0.14) !important; border-color:var(--blue) !important; transform:translateY(-4px) !important; }
/* KPI+clickable cards: kpi-color wins over blue */
.card-clickable.card-kpi:hover { box-shadow:0 8px 24px rgba(0,0,0,0.12), 0 0 0 2px var(--kpi-color), 0 0 28px -6px var(--kpi-color) !important; border-color:var(--kpi-color) !important; transform:translateY(-4px) !important; }
.card-clickable:active { transform:translateY(-1px) !important; }

/* Enhanced modal */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0); z-index:200; align-items:flex-start; justify-content:center; overflow-y:auto; padding:30px 0; transition:background .22s; }
.modal-overlay.open { display:flex; background:rgba(15,23,42,0.45); backdrop-filter:blur(3px); }
.modal-overlay.open .modal { animation:scaleIn .28s cubic-bezier(0.22,0.61,0.36,1) forwards; }
.modal-overlay.closing { display:flex; background:rgba(0,0,0,0); }
.modal-overlay.closing .modal { animation:scaleOut .2s ease forwards; }

/* Button ripple */
.btn { position:relative; overflow:hidden; }
.btn .ripple { position:absolute; border-radius:50%; background:rgba(255,255,255,0.3); transform:scale(0); animation:rippleAnim .55s linear; pointer-events:none; }
@keyframes rippleAnim { to { transform:scale(4); opacity:0; } }

/* Topbar search enhancement */
.search-box { transition:box-shadow .2s, border-color .2s; }
.search-box:focus-within { box-shadow:0 0 0 3px rgba(26,79,156,0.12); border-color:var(--blue); }

/* Counter number animation */
.counter-val { display:inline-block; transition:all .1s; }

/* Urgency pulse on red badges with count */
.badge-urgent-pulse { animation:pulseDot .9s infinite; border-radius:50%; }

/* Dashboard sections */
.dash-two { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.dash-refresh { font-size:11px; color:var(--text-light); display:flex; align-items:center; gap:6px; }
.dash-refresh button { background:none; border:none; cursor:pointer; font-size:12px; color:var(--blue); font-weight:600; padding:2px 6px; border-radius:4px; }
.dash-refresh button:hover { background:var(--blue-light); }

/* Status bar */
.status-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.status-pill { font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; }

/* ── Financeiro tabs ────────────────────────────────── */
.fin-tabs { display:flex; gap:4px; background:var(--bg-page); border-radius:12px; padding:4px; margin-bottom:24px; border:1px solid var(--border-color); width:fit-content; }
.fin-tab { padding:8px 20px; border-radius:9px; border:none; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; background:none; color:var(--text-muted); }
.fin-tab.active { background:var(--bg-card); color:var(--text-main); box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.fin-tab:hover:not(.active) { color:var(--text-main); background:rgba(0,0,0,0.04); }
body.dark .fin-tab.active { box-shadow:0 2px 8px rgba(0,0,0,0.3); }
.fin-pane { animation:fadeIn .25s ease both; }

/* ── Market section ────────────────────────────────── */
.mkt-card { border-radius:12px; padding:14px 16px; border:1px solid var(--border-color); background:var(--bg-page); position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; }
.mkt-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.12); border-color:var(--mkt-color,var(--border-color)); }
.mkt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.mkt-row-card { background:var(--bg-page); border:1px solid var(--border-color); border-radius:10px; padding:10px 12px; transition:all .18s; }
.mkt-row-card:hover { border-color:var(--mkt-color,var(--blue)); box-shadow:0 0 0 1px var(--mkt-color,var(--blue)); transform:translateX(3px); }
.mkt-val { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; color:var(--text-main); margin:4px 0; }
.mkt-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); }
.mkt-sub { font-size:10px; color:var(--text-muted); margin-top:3px; }
.mkt-section-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:10px; padding-left:2px; display:flex; align-items:center; gap:6px; }
.mkt-section-label::after { content:''; flex:1; height:1px; background:var(--border-color); }
.mkt-change-up { color:#10B981; font-weight:700; }
.mkt-change-dn { color:#EF4444; font-weight:700; }
@keyframes mktEnter  { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes mktLive   { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }
@keyframes mktArrow  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2.5px)} }
@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mkt-live-dot { width:7px; height:7px; border-radius:50%; background:#10B981; display:inline-block; animation:mktLive 1.6s ease-in-out infinite; vertical-align:middle; }
.mkt-arrow { display:inline-block; animation:mktArrow 1.8s ease-in-out infinite; }

/* Responsive */
@media (max-width:768px) {
  /* #navbar-bottom agora vira drawer (ver camada RESPONSIVO MOBILE no fim do arquivo);
     não escondemos mais o menu, senão não há navegação no celular. */
  #main { margin-top:46px; }
  .cards-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .dash-two { grid-template-columns:1fr; }
}

/* ── Calendário de Vencimentos ─────────────────────────────── */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day  { min-height:64px; background:var(--bg-page); border:1px solid var(--border-color); border-radius:8px; padding:6px; cursor:default; position:relative; font-size:12px; transition:transform .15s, border-color .15s; }
.cal-day.has-events { cursor:pointer; }
.cal-day.has-events:hover { border-color:var(--blue); transform:translateY(-1px); }
.cal-day.today { border-color:var(--blue); background:var(--blue-light); }
.cal-day.other-month { opacity:.35; }
.cal-day-num { font-size:11px; font-weight:600; color:var(--text-muted); margin-bottom:4px; }
.cal-pill { font-size:9px; font-weight:700; padding:1px 5px; border-radius:8px; margin-bottom:2px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-pill.critico { background:#FEE2E2; color:#DC2626; }
.cal-pill.proximo { background:#FEF3C7; color:#D97706; }
.cal-pill.normal  { background:#D1FAE5; color:#059669; }
.cal-drawer { position:fixed; top:0; right:0; width:380px; height:100vh; background:var(--bg-card); border-left:1px solid var(--border-color); z-index:200; transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1); overflow-y:auto; box-shadow:-4px 0 24px rgba(0,0,0,0.1); }
.cal-drawer.open { transform:translateX(0); }
.cal-drawer-overlay { position:fixed; inset:0; z-index:199; background:rgba(0,0,0,0); display:none; }
.cal-drawer-overlay.open { display:block; }
@keyframes calBell { 0%{transform:rotate(0)} 15%{transform:rotate(-18deg)} 30%{transform:rotate(16deg)} 45%{transform:rotate(-12deg)} 60%{transform:rotate(8deg)} 75%{transform:rotate(-4deg)} 100%{transform:rotate(0)} }
.nav-item:hover .bell-g { animation:calBell .7s ease both; transform-origin:top center; }
@keyframes calFramePop { 0%{transform:scaleY(1)} 35%{transform:scaleY(.84)} 65%{transform:scaleY(1.06)} 100%{transform:scaleY(1)} }
.nav-item:hover .cal-frame { animation:calFramePop .42s ease both; transform-origin:bottom center; }
@keyframes dotsPop { 0%{opacity:0;transform:scale(0)} 60%{opacity:1;transform:scale(1.2)} 100%{opacity:1;transform:scale(1)} }
.nav-item:hover .cal-dot:nth-child(1) { animation:dotsPop .35s .10s ease both; }
.nav-item:hover .cal-dot:nth-child(2) { animation:dotsPop .35s .18s ease both; }
.nav-item:hover .cal-dot:nth-child(3) { animation:dotsPop .35s .26s ease both; }

/* ── Central de Alertas ────────────────────────────────────── */
.alert-card { border-left:4px solid; border-radius:0 10px 10px 0; padding:12px 14px; background:var(--bg-card); margin-bottom:8px; display:flex; align-items:flex-start; gap:12px; box-shadow:0 1px 4px rgba(0,0,0,0.06); transition:transform .15s, box-shadow .15s; }
.alert-card:hover { transform:translateX(2px); box-shadow:0 3px 12px rgba(0,0,0,0.1); }
.alert-card.critico { border-color:#DC2626; }
.alert-card.atencao  { border-color:#D97706; }
.alert-card.info     { border-color:#3B82F6; }
.alert-card.dismissed { opacity:.4; }
.alert-group-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; margin-top:20px; }
.alert-group-title { font-size:14px; font-weight:700; color:var(--text-main); }
.alert-group-count { font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; }
.alert-group-count.critico { background:#FEE2E2; color:#DC2626; }
.alert-group-count.atencao  { background:#FEF3C7; color:#D97706; }
.alert-group-count.info     { background:#DBEAFE; color:#1E40AF; }
.alert-summary-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:4px; }
.alert-sum-card { background:var(--bg-card); border-radius:var(--card-radius); padding:16px; border:1px solid var(--border-color); text-align:center; }
.alert-sum-val { font-size:28px; font-weight:800; line-height:1; margin-bottom:4px; }
.alert-sum-label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }

/* ── Feature 4: Risk Score Badges ─────────────────────────── */
.risk-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:10px; display:inline-block; }
.risk-badge.baixo   { background:#D1FAE5; color:#059669; }
.risk-badge.medio   { background:#FEF3C7; color:#D97706; }
.risk-badge.alto    { background:#FED7AA; color:#EA580C; }
.risk-badge.critico { background:#FEE2E2; color:#DC2626; }

/* ── Feature 6: Kanban ─────────────────────────────────────── */
.kanban-board { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:start; }
.kanban-col { background:var(--bg-page); border-radius:12px; padding:12px; border:1px solid var(--border-color); min-width:0; }
.kanban-col-header { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.kanban-col-count { font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; }
.kanban-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:10px 12px 10px 10px; margin-bottom:8px; cursor:grab; transition:transform .15s, box-shadow .15s; user-select:none; display:flex; gap:8px; align-items:flex-start; }
.kanban-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.1); border-color:var(--blue); }
.kanban-card.dragging { opacity:.45; cursor:grabbing; transform:scale(0.97); }
.kanban-drag-handle { flex-shrink:0; display:flex; flex-direction:column; gap:3px; padding-top:3px; cursor:grab; opacity:.35; transition:opacity .15s; }
.kanban-card:hover .kanban-drag-handle { opacity:.7; }
.kanban-drag-handle span { display:block; width:14px; height:2px; border-radius:2px; background:var(--text-muted); }
.kanban-card-body { flex:1; min-width:0; }
.kanban-drop-zone { min-height:56px; border:2px dashed var(--border-color); border-radius:10px; transition:all .15s; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-muted); gap:6px; }
.kanban-drop-zone.drag-over { border-color:var(--blue); background:var(--blue-light); color:var(--blue); font-weight:700; }
.kanban-card-cliente { font-size:13px; font-weight:700; color:var(--text-main); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kanban-card-tipo { font-size:11px; color:var(--text-muted); margin-bottom:7px; }
.kanban-card-meta { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.kanban-card-date { font-size:10px; color:var(--text-muted); }
.kanban-next-btn { font-size:11px; font-weight:700; padding:3px 10px; border-radius:6px; border:1px solid var(--border-color); background:var(--bg-page); color:var(--blue); cursor:pointer; transition:all .15s; }
.kanban-next-btn:hover { border-color:var(--blue); background:var(--blue); color:#fff; }

/* ── Feature 7: Client Timeline ────────────────────────────── */
.client-timeline { position:relative; padding-left:28px; }
.client-timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--border-color); }
.client-timeline-item { position:relative; margin-bottom:14px; }
.client-timeline-dot { position:absolute; left:-24px; top:4px; width:14px; height:14px; border-radius:50%; border:2px solid var(--bg-card); }
.client-timeline-card { background:var(--bg-page); border:1px solid var(--border-color); border-radius:8px; padding:10px 12px; cursor:pointer; transition:border-color .15s, transform .15s; }
.client-timeline-card:hover { border-color:var(--blue); transform:translateX(2px); }
.client-timeline-title { font-size:13px; font-weight:700; color:var(--text-main); }
.client-timeline-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
.client-timeline-date { font-size:10px; color:var(--text-muted); margin-top:3px; }

/* ── Modal tabs ─────────────────────────────────────────────── */
.modal-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border-color); margin-bottom:16px; padding:0 0 0 0; }
.modal-tab { padding:8px 16px; border:none; background:none; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; border-radius:6px 6px 0 0; }
.modal-tab.active { color:var(--blue); border-bottom-color:var(--blue); background:var(--blue-light); }
.modal-tab:hover:not(.active) { color:var(--text-main); background:var(--bg-page); }
.modal-tab-pane { display:none; animation:fadeIn .2s ease both; }
.modal-tab-pane.active { display:block; }

/* ── Feature 8: Contato badges ─────────────────────────────── */
.contato-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:10px; display:inline-block; }
.contato-badge.positivo   { background:#D1FAE5; color:#059669; }
.contato-badge.neutro     { background:#DBEAFE; color:#1E40AF; }
.contato-badge.negativo   { background:#FEE2E2; color:#DC2626; }
.contato-badge.sem_resposta { background:#F1F5F9; color:#64748B; }

/* ── Previsao renovacao progress bar ───────────────────────── */
.prob-bar-wrap { height:8px; background:var(--border-color); border-radius:4px; overflow:hidden; flex:1; }
.prob-bar-fill { height:100%; border-radius:4px; transition:width .5s cubic-bezier(.4,0,.2,1); }

/* ── Feature 9: Relatórios ─────────────────────────────────── */
.rel-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.rel-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rel-filters label { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.rel-filters input[type=date] { font-size:12px; padding:5px 8px; border-radius:6px; border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-main); }
.rel-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.rel-kpi { background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; transition:border-color .15s; }
.rel-kpi:hover { border-color:var(--blue); }
.rel-kpi-label { font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.rel-kpi-val { font-size:24px; font-weight:800; color:var(--text-main); line-height:1.1; }
.rel-kpi-sub { font-size:11px; color:var(--text-muted); }
.rel-section { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; padding:20px; margin-bottom:20px; }
.rel-section-title { font-size:13px; font-weight:700; color:var(--text-main); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.rel-export-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.rel-export-btn { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px; border:1px solid var(--border-color); background:var(--bg-page); cursor:pointer; transition:all .15s; text-decoration:none; color:var(--text-main); }
.rel-export-btn:hover { border-color:var(--green); background:#F0FDF4; transform:translateY(-1px); box-shadow:0 4px 12px rgba(16,185,129,.12); }
.rel-export-btn .rel-exp-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.rel-export-btn .rel-exp-info { display:flex; flex-direction:column; gap:2px; }
.rel-export-btn .rel-exp-name { font-size:13px; font-weight:700; }
.rel-export-btn .rel-exp-desc { font-size:10px; color:var(--text-muted); }
.rel-chart-wrap { position:relative; height:200px; }
.rel-tipo-list { display:flex; flex-direction:column; gap:8px; }
.rel-tipo-row { display:flex; align-items:center; gap:10px; }
.rel-tipo-label { font-size:12px; color:var(--text-main); width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
.rel-tipo-bar-wrap { flex:1; height:8px; background:var(--border-color); border-radius:4px; overflow:hidden; }
.rel-tipo-bar { height:100%; border-radius:4px; background:var(--blue); transition:width .6s cubic-bezier(.4,0,.2,1); }
.rel-tipo-count { font-size:11px; color:var(--text-muted); width:40px; text-align:right; flex-shrink:0; }

/* ── Feature 10: Churn ─────────────────────────────────────── */
.churn-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; }
.churn-badge.alto   { background:#FEE2E2; color:#DC2626; }
.churn-badge.medio  { background:#FEF3C7; color:#D97706; }
.churn-badge.baixo  { background:#D1FAE5; color:#059669; }
.churn-score-bar { height:6px; border-radius:3px; background:var(--border-color); overflow:hidden; width:60px; }
.churn-score-fill { height:100%; border-radius:3px; }
.churn-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border-color); transition:background .12s; }
.churn-row:hover { background:var(--bg-page); }
.churn-row:last-child { border-bottom:none; }

/* ── Feature 11: Mapa ──────────────────────────────────────── */
.mapa-estado-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
.mapa-estado-card { background:var(--bg-page); border:1px solid var(--border-color); border-radius:10px; padding:12px; text-align:center; cursor:pointer; transition:all .15s; }
.mapa-estado-card:hover { border-color:var(--blue); background:var(--blue-light); transform:translateY(-2px); }
.mapa-estado-sigla { font-size:18px; font-weight:800; color:var(--text-main); }
.mapa-estado-count { font-size:20px; font-weight:800; color:var(--blue); margin:2px 0; }
.mapa-estado-label { font-size:10px; color:var(--text-muted); }
.mapa-bar-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border-color); }
.mapa-bar-row:last-child { border-bottom:none; }

/* ── Feature 12: Régua ─────────────────────────────────────── */
.regua-tabs { display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap; }
.regua-tab { padding:6px 14px; border-radius:20px; border:1px solid var(--border-color); background:var(--bg-page); font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:6px; }
.regua-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.regua-tab .regua-tab-badge { font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; background:rgba(255,255,255,0.25); }
.regua-tab:not(.active) .regua-tab-badge { background:var(--border-color); color:var(--text-muted); }
.regua-item { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--border-color); transition:background .12s; }
.regua-item:hover { background:var(--bg-page); }
.regua-item:last-child { border-bottom:none; }
.regua-urgente { border-left:3px solid var(--red) !important; }

/* ── RH / Equipe (Financeiro → Salários) ───────────────────────────── */
@keyframes rhHeroIn   { from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes rhShine    { 0%{transform:translateX(-120%)} 100%{transform:translateX(260%)} }
@keyframes rhKpiIn    { from{opacity:0;transform:translateY(14px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes rhRowIn    { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
@keyframes rhBarGrow  { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes rhCoin     { 0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-2.5px) rotate(-8deg)} }

/* Hero: folha mensal */
.rh-hero {
  position:relative; overflow:hidden; border-radius:var(--card-radius);
  padding:22px 26px; margin-bottom:18px; color:#fff;
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 55%, #06255c 100%);
  box-shadow:0 10px 34px rgba(26,79,156,.28);
  animation:rhHeroIn .45s cubic-bezier(.34,1.2,.64,1) both;
}
.rh-hero::after {
  content:''; position:absolute; top:0; left:0; width:38%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  animation:rhShine 3.6s ease-in-out 1s infinite; pointer-events:none;
}
.rh-hero-label { font-size:10.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; opacity:.75; }
.rh-hero-val   { font-size:38px; font-weight:800; line-height:1.05; margin:6px 0 2px; font-variant-numeric:tabular-nums; }
.rh-hero-sub   { font-size:11.5px; opacity:.8; }
.rh-hero-icon  { animation:rhCoin 2.8s ease-in-out infinite; }
/* Quebra do custo dentro do hero: salários + encargos + benefícios */
.rh-hero-comp {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;
}
.rh-hero-comp span {
  font-size:10.5px; padding:3px 9px; border-radius:20px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18);
  white-space:nowrap;
}
.rh-hero-comp b { font-weight:800; font-variant-numeric:tabular-nums; }

/* KPIs */
.rh-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:18px; }
.rh-kpi {
  background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px;
  padding:14px 16px; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  animation:rhKpiIn .4s cubic-bezier(.34,1.2,.64,1) both;
}
.rh-kpi:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.12); border-color:var(--rh-c,var(--blue)); }
.rh-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--rh-c,var(--blue)); }
.rh-kpi-val   { font-size:24px; font-weight:800; color:var(--rh-c,var(--text-main)); font-variant-numeric:tabular-nums; line-height:1.15; }
.rh-kpi-label { font-size:11px; font-weight:700; color:var(--text-main); margin-top:3px; }
.rh-kpi-sub   { font-size:10px; color:var(--text-muted); margin-top:1px; }

/* Distribuição por tipo de contratação */
.rh-dist-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.rh-dist-nome { font-size:11.5px; font-weight:700; color:var(--text-main); width:74px; flex-shrink:0; }
.rh-dist-track { flex:1; height:9px; border-radius:6px; background:var(--bg-page); overflow:hidden; }
.rh-dist-fill { height:100%; border-radius:6px; transform-origin:left center; animation:rhBarGrow .7s cubic-bezier(.4,0,.2,1) both; }
.rh-dist-val { font-size:11px; font-weight:700; color:var(--text-muted); width:112px; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; }
/* Composição dos encargos: rótulo é mais longo que o do tipo de contratação */
.rh-comp-nome {
  font-size:11.5px; font-weight:700; color:var(--text-main); width:150px; flex-shrink:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Chips das alíquotas vigentes */
.rh-chips { display:flex; flex-wrap:wrap; gap:6px; }
.rh-chip {
  font-size:10.5px; color:var(--text-muted); padding:3px 9px; border-radius:20px;
  background:var(--bg-page); border:1px solid var(--border-color); white-space:nowrap;
}
.rh-chip b { color:var(--text-main); font-weight:800; font-variant-numeric:tabular-nums; }

/* Multiplicador do custo sobre o salário, na linha da tabela */
.rh-fator {
  display:inline-block; margin-left:5px; font-size:9px; font-weight:800;
  padding:1px 5px; border-radius:5px; background:#8B5CF618; color:var(--purple);
}

/* Resultado do simulador de contratação */
.rh-sim-box {
  border:1px solid var(--border-color); border-radius:14px; overflow:hidden;
  animation:rhKpiIn .32s cubic-bezier(.34,1.2,.64,1) both;
}
.rh-sim-topo {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px; color:#fff;
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 60%, #06255c 100%);
}
.rh-sim-fator {
  text-align:center; flex-shrink:0; padding:9px 13px; border-radius:12px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.2);
  font-variant-numeric:tabular-nums;
}
.rh-sim-corpo { padding:12px 18px; background:var(--bg-card); }
.rh-sim-impacto {
  padding:10px 18px; font-size:11px; color:var(--text-muted);
  background:var(--bg-page); border-top:1px solid var(--border-color);
}
.rh-sim-impacto b { color:var(--text-main); font-variant-numeric:tabular-nums; }

/* Badges */
.rh-badge { display:inline-block; font-size:9px; font-weight:800; letter-spacing:.4px; padding:2px 7px; border-radius:6px; text-transform:uppercase; }
.rh-badge.CLT     { background:#1A4F9C18; color:var(--blue); }
.rh-badge.PJ      { background:#8B5CF618; color:var(--purple); }
.rh-badge.ESTAGIO { background:#F59E0B18; color:var(--yellow); }
.rh-st { display:inline-block; font-size:9px; font-weight:800; padding:2px 7px; border-radius:6px; text-transform:uppercase; }
.rh-st.ativa     { background:#10B98118; color:var(--green); }
.rh-st.afastada  { background:#F59E0B18; color:var(--yellow); }
.rh-st.desligada { background:#C0272D18; color:var(--red); }

/* Linhas da tabela */
.rh-tr { animation:rhRowIn .3s ease both; transition:background .15s; }
.rh-tr:hover { background:var(--bg-page); }
.rh-tr.off { opacity:.5; }
.rh-sal { font-weight:800; font-variant-numeric:tabular-nums; color:var(--text-main); }

/* Aviso de confidencialidade */
.rh-conf {
  display:flex; align-items:center; gap:8px; padding:9px 13px; margin-bottom:16px;
  border-radius:10px; background:#C0272D0d; border:1px solid #C0272D25;
  font-size:11px; color:var(--red); font-weight:600;
  animation:fadeIn .4s ease both;
}
/* Aviso de revisão anual das alíquotas */
.rh-rev {
  display:flex; align-items:flex-start; gap:9px; padding:10px 13px; margin-bottom:16px;
  border-radius:10px; background:#F59E0B12; border:1px solid #F59E0B35;
  font-size:11.5px; color:var(--text-main); line-height:1.5;
  animation:fadeIn .4s ease both;
}
.rh-rev svg { color:var(--yellow); }
.rh-rev b { color:var(--yellow); }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVO MOBILE — camada global (2026-07-23)
   Objetivo: painel utilizável no celular sem reescrever as ~40 páginas.
   Regras só valem abaixo dos breakpoints, o desktop fica intacto.
   Três frentes: (1) menu vira drawer, (2) tabelas rolam, (3) grids colapsam.
   ═══════════════════════════════════════════════════════════════════════ */

/* Botão hambúrguer + overlay — escondidos no desktop */
#nav-burger { display:none; width:38px; height:38px; border:none; border-radius:9px;
  background:rgba(255,255,255,.1); cursor:pointer; align-items:center; justify-content:center;
  flex-shrink:0; padding:0; margin-right:2px; }
#nav-burger:hover { background:rgba(255,255,255,.18); }
#nav-burger svg { width:20px; height:20px; stroke:#fff; }
#nav-overlay { display:none; position:fixed; inset:0; background:rgba(4,12,27,.55);
  z-index:99; opacity:0; transition:opacity .22s; }

@media (max-width:900px) {
  /* ── (1) Navegação: barra horizontal vira drawer lateral deslizante ── */
  #nav-burger { display:flex; }
  #navbar-top { padding:0 12px; }
  /* O relógio ocupa ~120px e empurrava o botão de usuário/perfil pra fora da tela.
     Sem ele, todos os controles do topo (tema, perfil, sair) cabem no celular. */
  #topbar-datetime { display:none; }
  #navbar-logo .sub { display:none; }   /* subtítulo "Painel Administrativo" também economiza espaço */
  /* Botão de usuário: só o ícone no celular (nome longo empurrava tudo pra fora).
     O nome/cargo continua visível dentro do dropdown ao tocar. */
  #navbar-user-btn .user-name, #navbar-user-btn .user-role { display:none; }

  #navbar-bottom {
    display:flex; position:fixed; top:0; left:0; bottom:0; width:min(85vw,320px);
    flex-direction:column; align-items:stretch; height:auto; min-height:100dvh;
    padding:14px 10px calc(16px + env(safe-area-inset-bottom));
    background:var(--bg-sidebar); box-shadow:2px 0 26px rgba(0,0,0,.42);
    transform:translateX(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
    z-index:100; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  }
  body.nav-open #navbar-bottom { transform:translateX(0); }
  body.nav-open #nav-overlay { display:block; opacity:1; }

  #navbar-nav { flex-direction:column; align-items:stretch; gap:2px; overflow:visible; flex:none; }
  #navbar-nav .nav-item, #navbar-nav .nav-group-btn {
    width:100%; font-size:15px; padding:12px 12px; border-radius:9px; justify-content:flex-start; }
  #navbar-nav .nav-group { display:flex; flex-direction:column; align-items:stretch; }
  #navbar-nav .nav-group-btn { justify-content:space-between; }
  #navbar-nav .nav-chevron { margin-left:auto; }

  /* Grupos viram acordeão: dropdown inline (não flutuante), abre no toque via .open */
  #navbar-nav .nav-dropdown {
    position:static; opacity:1; pointer-events:auto; transform:none; box-shadow:none;
    border:none; background:rgba(0,0,0,.20); margin:2px 0 4px; padding:3px 3px 3px 8px;
    max-height:0; overflow:hidden; transition:max-height .25s ease; border-radius:9px;
    min-width:0; width:100%;
  }
  #navbar-nav .nav-group.open .nav-dropdown { max-height:1200px; overflow-y:auto; }
  #navbar-nav .nav-group.open > .nav-group-btn .nav-chevron { transform:rotate(180deg); }
  #navbar-nav .nav-dropdown .nav-item { color:rgba(255,255,255,.9); padding:11px 12px; }
  #navbar-nav .nav-dropdown .nav-item:hover,
  #navbar-nav .nav-dropdown .nav-item.active { background:rgba(255,255,255,.14); color:#fff; }
  #navbar-nav .nav-dropdown .nav-item .nav-svg { color:rgba(255,255,255,.6); }

  /* ── Conteúdo: largura total, sem estouro horizontal ── */
  #main { margin-top:46px; padding-left:12px; padding-right:12px; }
  body { overflow-x:hidden; }

  /* ── (2) Tabelas: rolam na horizontal em vez de serem cortadas/espremidas ── */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

@media (max-width:768px) {
  /* Tabelas: nunca estouram a página.
     - As largas já vêm com min-width dentro de um wrapper overflow-x:auto → o min-width
       vence o max-width (regra do CSS) e elas continuam rolando na horizontal.
     - As soltas/estreitas são limitadas a 100% e comprimem em vez de vazar. */
  #main table { max-width:100%; }

  /* Modais e diálogos ocupam a tela sem sobrar margem inútil */
  .modal { width:100%; max-width:100%; border-radius:16px 16px 0 0; max-height:92dvh; }
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal-header, .modal-body, .modal-footer { padding-left:16px; padding-right:16px; }
}

@media (max-width:600px) {
  /* ── (3) Grids colapsam para 1 coluna no celular ──
     Pega tanto as classes conhecidas quanto os grids com style inline
     (a maioria das páginas usa grid inline; só !important vence o inline). */
  .cards-grid, .dash-two, .dash-three, .form-row, .stats-grid, .kpi-grid { grid-template-columns:1fr !important; }
  #main [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  #main [style*="display:flex"][style*="gap"] { flex-wrap:wrap; }

  /* ── (4) Anti-estouro em retrato: nada passa da largura da tela ── */
  #main { overflow-wrap:anywhere; }
  #main img, #main video, #main canvas, #main pre, #main iframe { max-width:100%; height:auto; }

  /* ── (5) Botões sempre acessíveis ──
     Barras de ação (flex-end) quebram linha em vez de empurrar botão pra fora.
     Em cabeçalhos título+ações (space-between) os filhos podem encolher, então
     o título trunca/quebra e os botões continuam visíveis na tela. */
  #main [style*="justify-content:flex-end"] { flex-wrap:wrap; }
  #main [style*="justify-content:space-between"] > * { min-width:0; }
}

/* Drawer do calendário: tela cheia no celular (era 380px fixo) + dvh */
@media (max-width:480px) {
  .cal-drawer { width:100%; height:100dvh; }
  #main { padding-left:10px; padding-right:10px; }   /* menos margem desperdiçada em telas pequenas */
}

/* ── (6) Barras de abas internas rolam na horizontal ───────────────────
   Módulos com muitas abas (ex.: Financeiro) cortavam as abas escondidas no
   celular sem deixar arrastar. Agora a barra rola e as abas mantêm o tamanho
   (flex-shrink:0), então nenhuma aba fica inacessível. Vale para TODAS as
   barras de abas do painel. */
.fin-tabs, .modal-tabs {
  flex-wrap:nowrap; max-width:100%; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.fin-tabs::-webkit-scrollbar, .modal-tabs::-webkit-scrollbar { height:0; width:0; }
.fin-tabs > *, .modal-tabs > * { flex-shrink:0; white-space:nowrap; }

@media (max-width:900px) {
  .patri-tabs, .pt-tabs, .saude-tabs, .gs-tabs, .fat-subtabs, .regua-tabs {
    flex-wrap:nowrap; max-width:100%; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .patri-tabs::-webkit-scrollbar, .pt-tabs::-webkit-scrollbar, .saude-tabs::-webkit-scrollbar,
  .gs-tabs::-webkit-scrollbar, .fat-subtabs::-webkit-scrollbar, .regua-tabs::-webkit-scrollbar { height:0; width:0; }
  .patri-tabs > *, .pt-tabs > *, .saude-tabs > *, .gs-tabs > *, .fat-subtabs > *, .regua-tabs > * {
    flex-shrink:0; white-space:nowrap;
  }
}

body.dark .rh-hero { box-shadow:0 10px 34px rgba(0,0,0,.45); }
/* ══════════════════════════════════════════════════════════════════════════
   LAYOUTS DAS OPERADORAS (saude-layouts.js)
   Entrada escalonada com --i; tudo desligado em prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */
.lay-wrap { display:flex; flex-direction:column; gap:16px; }

/* ── hero ── */
.lay-hero {
  position:relative; overflow:hidden; border-radius:18px; padding:26px 28px;
  background:linear-gradient(135deg,#0B3B6F 0%,#124D8C 45%,#0E7C5A 100%);
  box-shadow:0 14px 40px rgba(11,59,111,.28);
  animation:layIn .45s cubic-bezier(.22,1,.36,1) both;
}
.lay-hero-glow {
  position:absolute; inset:-40% -10% auto auto; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 68%);
  animation:layGlow 9s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes layGlow { from{transform:translate(0,0) scale(1)} to{transform:translate(-26px,22px) scale(1.12)} }
.lay-hero-inner { position:relative; z-index:1; }
.lay-hero-badge {
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  background:rgba(255,255,255,.16); color:#fff; font-size:10.5px; font-weight:800;
  letter-spacing:.7px; text-transform:uppercase; backdrop-filter:blur(6px);
}
.lay-hero-title { margin:12px 0 6px; font-size:23px; font-weight:800; color:#fff; letter-spacing:-.4px; }
.lay-hero-sub { margin:0; font-size:12.8px; line-height:1.6; color:rgba(255,255,255,.86); max-width:760px; }
.lay-hero-flow { display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.lay-flow-chip {
  display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:12px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px); animation:layIn .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i) * .09s);
}
.lay-flow-n {
  width:22px; height:22px; border-radius:50%; background:#fff; color:#0B3B6F;
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.lay-flow-t { font-size:12px; font-weight:700; color:#fff; }
.lay-flow-d { font-size:10.5px; color:rgba(255,255,255,.72); margin-top:1px; }
.lay-flow-seta { color:rgba(255,255,255,.45); flex-shrink:0; }

/* ── seletor de operadora ── */
.lay-ops { display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:10px; }
.lay-op {
  display:flex; align-items:center; gap:10px; padding:12px 12px; border-radius:14px; cursor:pointer;
  background:var(--bg-card); border:1.5px solid var(--border-color); text-align:left;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .22s;
  animation:layIn .4s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i) * .06s);
}
.lay-op:hover { transform:translateY(-3px); border-color:var(--c); box-shadow:0 10px 26px rgba(0,0,0,.10); }
.lay-op.on { border-color:var(--c); background:color-mix(in srgb,var(--c) 8%,var(--bg-card)); box-shadow:0 8px 22px rgba(0,0,0,.10); }
.lay-op.soon { opacity:.72; }
.lay-op-ico {
  width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--c) 13%,transparent); color:var(--c);
}
.lay-op-txt { display:flex; flex-direction:column; min-width:0; flex:1; }
.lay-op-nome { font-size:12.8px; font-weight:750; color:var(--text-main); line-height:1.3; }
.lay-op-desc { font-size:10.5px; color:var(--text-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lay-op-tag {
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:3px 7px;
  border-radius:999px; background:color-mix(in srgb,var(--c) 14%,transparent); color:var(--c); flex-shrink:0;
}
.lay-op.soon .lay-op-tag { background:rgba(148,163,184,.18); color:var(--text-muted); }

/* ── stepper ── */
.lay-stepper { display:flex; align-items:center; gap:6px; padding:4px 2px; flex-wrap:wrap; }
.lay-step {
  display:flex; align-items:center; gap:10px; padding:9px 15px; border-radius:12px; cursor:pointer;
  background:var(--bg-card); border:1.5px solid var(--border-color); transition:all .22s;
}
.lay-step:disabled { cursor:default; opacity:.55; }
.lay-step:not(:disabled):hover { border-color:#10B981; }
.lay-step-dot {
  width:25px; height:25px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--border-color); color:var(--text-muted); font-size:11.5px; font-weight:800; flex-shrink:0;
  transition:all .25s;
}
.lay-step.on { border-color:#10B981; background:rgba(16,185,129,.07); }
.lay-step.on .lay-step-dot { background:#10B981; color:#fff; box-shadow:0 0 0 4px rgba(16,185,129,.16); }
.lay-step.done .lay-step-dot { background:#0E7C5A; color:#fff; }
.lay-step-txt { display:flex; flex-direction:column; text-align:left; }
.lay-step-txt b { font-size:12.3px; font-weight:750; color:var(--text-main); }
.lay-step-txt i { font-size:10.3px; font-style:normal; color:var(--text-muted); }
.lay-step-linha { flex:1; min-width:14px; height:2px; border-radius:2px; background:var(--border-color); }

/* ── cartão base ── */
.lay-card {
  background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; padding:20px;
  animation:layIn .4s cubic-bezier(.22,1,.36,1) both;
}
.lay-fade { display:flex; flex-direction:column; gap:16px; animation:layIn .35s cubic-bezier(.22,1,.36,1) both; }
.lay-secao { display:flex; gap:11px; margin-bottom:16px; }
.lay-secao-barra { width:3px; border-radius:3px; background:var(--c); flex-shrink:0; }
.lay-secao-t { font-size:14px; font-weight:800; color:var(--text-main); letter-spacing:-.2px; }
.lay-secao-d { font-size:11.6px; color:var(--text-muted); margin-top:3px; line-height:1.55; max-width:820px; }

/* ── zonas de upload ── */
.lay-docs { display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:12px; }
.lay-drop {
  position:relative; padding:14px; border-radius:14px; cursor:pointer;
  border:1.6px dashed var(--border-color); background:var(--bg-card);
  transition:transform .2s cubic-bezier(.22,1,.36,1), border-color .2s, background .2s, box-shadow .2s;
  animation:layIn .42s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i) * .07s);
}
.lay-drop:hover { transform:translateY(-2px); border-color:var(--c); box-shadow:0 8px 22px rgba(0,0,0,.07); }
.lay-drop.over { border-color:var(--c); background:color-mix(in srgb,var(--c) 8%,var(--bg-card)); transform:scale(1.015); }
.lay-drop.cheio { border-style:solid; border-color:#10B981; background:rgba(16,185,129,.05); }
.lay-drop.larga { grid-column:1 / -1; }
.lay-drop-head { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.lay-drop-ico {
  width:31px; height:31px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--c) 13%,transparent); color:var(--c); transition:all .25s;
}
.lay-drop.cheio .lay-drop-ico { background:rgba(16,185,129,.16); color:#10B981; }
.lay-drop-tit { font-size:12.6px; font-weight:750; color:var(--text-main); flex:1; min-width:0; }
.lay-drop-tit i { display:block; font-style:normal; font-size:10.3px; font-weight:600; color:var(--text-muted); margin-top:1px; }
.lay-req, .lay-opt {
  font-size:8.8px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  padding:3px 7px; border-radius:999px; flex-shrink:0;
}
.lay-req { background:rgba(239,68,68,.12); color:#DC2626; }
.lay-opt { background:rgba(59,130,246,.12); color:#2563EB; }
.lay-drop-x {
  background:none; border:none; cursor:pointer; color:var(--text-muted); padding:3px;
  border-radius:6px; flex-shrink:0; transition:all .18s;
}
.lay-drop-x:hover { background:rgba(239,68,68,.12); color:#DC2626; }
.lay-drop-desc { font-size:11px; color:var(--text-muted); line-height:1.55; }
.lay-drop-cta {
  margin-top:9px; font-size:10.8px; font-weight:700; color:var(--c);
  background:color-mix(in srgb,var(--c) 9%,transparent); padding:6px 10px; border-radius:8px; text-align:center;
}
.lay-drop-files { margin-top:9px; display:flex; flex-direction:column; gap:3px; }
.lay-drop-file {
  font-size:10.6px; font-weight:700; color:#0E7C5A; background:rgba(16,185,129,.10);
  padding:4px 8px; border-radius:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lay-drop-file.mais { color:var(--text-muted); background:transparent; font-weight:600; }

/* ── configuração do contrato ── */
.lay-cfg { margin-top:16px; padding:15px; border-radius:13px; background:var(--bg-page); border:1px solid var(--border-color); }
.lay-cfg-t { display:flex; align-items:center; gap:7px; font-size:11.6px; font-weight:800; color:var(--text-main); margin-bottom:11px; }
.lay-cfg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:11px; }
.lay-campo { display:flex; flex-direction:column; gap:5px; }
.lay-campo > span { font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }
.lay-campo input, .lay-campo select {
  padding:8px 11px; border-radius:9px; border:1px solid var(--border-color);
  background:var(--bg-card); color:var(--text-main); font-size:12.3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; transition:border-color .18s, box-shadow .18s;
}
.lay-campo select { font-family:inherit; }
.lay-campo input:focus, .lay-campo select:focus {
  outline:none; border-color:#10B981; box-shadow:0 0 0 3px rgba(16,185,129,.14);
}
.lay-cfg-nota { margin-top:10px; font-size:10.8px; color:var(--text-muted); line-height:1.55; }

/* ── botões ── */
.lay-acoes { display:flex; align-items:center; gap:13px; margin-top:17px; flex-wrap:wrap; }
.lay-acoes-nota { font-size:11px; color:var(--text-muted); }
.lay-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 19px;
  border-radius:10px; border:1px solid var(--border-color); background:var(--bg-card);
  color:var(--text-main); font-size:12.3px; font-weight:700; cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, background .18s, opacity .18s;
}
.lay-btn:hover:not(:disabled) { transform:translateY(-1.5px); box-shadow:0 6px 18px rgba(0,0,0,.10); }
.lay-btn:active:not(:disabled) { transform:translateY(0); }
.lay-btn:disabled { opacity:.5; cursor:not-allowed; }
.lay-btn.primary {
  background:linear-gradient(135deg,#10B981,#0E7C5A); border-color:transparent; color:#fff;
  box-shadow:0 4px 14px rgba(16,185,129,.28);
}
.lay-btn.primary:hover:not(:disabled) { box-shadow:0 9px 26px rgba(16,185,129,.36); }
.lay-btn.big { padding:13px 26px; font-size:13px; }
.lay-btn.small { padding:7px 14px; font-size:11.5px; margin-top:10px; }
.lay-btn.tiny { padding:5px 11px; font-size:11px; border-radius:8px; }
.lay-btn.ghost { background:transparent; }
.lay-spin {
  width:13px; height:13px; border-radius:50%; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; display:inline-block; animation:spin .75s linear infinite;
}

/* ── barra de progresso ── */
.lay-progresso { margin-top:15px; animation:layIn .3s ease both; }
.lay-progresso-barra { height:4px; border-radius:4px; background:var(--border-color); overflow:hidden; }
.lay-progresso-barra i {
  display:block; height:100%; width:38%; border-radius:4px;
  background:linear-gradient(90deg,#10B981,#3B82F6); animation:layCorre 1.15s ease-in-out infinite;
}
@keyframes layCorre { 0%{transform:translateX(-100%)} 100%{transform:translateX(330%)} }
.lay-progresso-txt { margin-top:9px; font-size:11.6px; color:var(--text-muted); }

/* ── KPIs ── */
.lay-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:12px; }
.lay-kpi {
  position:relative; overflow:hidden; padding:16px 17px; border-radius:15px;
  background:var(--bg-card); border:1px solid var(--border-color);
  animation:layIn .45s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i) * .07s);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s;
}
.lay-kpi:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.09); }
.lay-kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); }
.lay-kpi-v { font-size:27px; font-weight:800; color:var(--c); line-height:1; letter-spacing:-1px; }
.lay-kpi-l { font-size:11.6px; font-weight:700; color:var(--text-main); margin-top:6px; }
.lay-kpi-s { font-size:10.5px; color:var(--text-muted); margin-top:3px; }
.lay-chips { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:11.4px; color:var(--text-muted); }
.lay-chip {
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  background:rgba(99,102,241,.10); color:#4F46E5; font-size:11px; font-weight:700;
}
.lay-chip b { font-weight:800; }
.lay-chips-nota { margin-left:auto; font-size:10.8px; }

/* ── de onde veio cada coisa ── */
.lay-fontes { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:11px; }
.lay-fonte {
  padding:13px; border-radius:12px; background:var(--bg-page); border-left:3px solid var(--c);
  border-top:1px solid var(--border-color); border-right:1px solid var(--border-color); border-bottom:1px solid var(--border-color);
}
.lay-fonte-h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.lay-fonte-h b { font-size:12.2px; font-weight:750; color:var(--text-main); }
.lay-fonte-h span { font-size:10.6px; font-weight:700; color:var(--c); }
.lay-fonte-arq {
  font-size:10.4px; color:var(--text-muted); margin-top:2px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.lay-fonte-l { display:flex; flex-wrap:wrap; gap:4px; margin-top:9px; }
.lay-fonte-l span {
  font-size:9.8px; padding:3px 7px; border-radius:6px; background:rgba(16,185,129,.10);
  color:#0E7C5A; font-weight:650;
}
.lay-fonte-f { margin-top:8px; font-size:10.3px; color:#B45309; line-height:1.5; }
.lay-fonte-f b { font-weight:800; }

/* ── alertas ── */
.lay-alerta { padding:13px 15px; border-radius:12px; margin-bottom:10px; animation:layIn .35s ease both; }
.lay-alerta:last-child { margin-bottom:0; }
.lay-alerta b { display:block; font-size:12.4px; font-weight:800; margin-bottom:4px; }
.lay-alerta > div { font-size:11.5px; line-height:1.6; }
.lay-alerta.ok { background:rgba(16,185,129,.08); border-left:3px solid #10B981; color:var(--text-main); }
.lay-alerta.ok b { color:#0E7C5A; }
.lay-alerta.warn { background:rgba(245,158,11,.09); border-left:3px solid #F59E0B; color:var(--text-main); }
.lay-alerta.warn b { color:#B45309; }
.lay-alerta.danger { background:rgba(239,68,68,.08); border-left:3px solid #EF4444; color:var(--text-main); }
.lay-alerta.info { background:rgba(59,130,246,.08); border-left:3px solid #3B82F6; color:var(--text-main); }
.lay-alerta.info b { color:#2563EB; }
.lay-lista-mini span b { font-weight:800; }
body.dark .lay-alerta.info b { color:#60A5FA; }
.lay-alerta.danger b { color:#B91C1C; }
.lay-subs { display:flex; flex-direction:column; gap:7px; margin-top:11px; }
.lay-sub-linha { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lay-sub-cnpj { font-family:ui-monospace,monospace; font-size:11.6px; font-weight:700; color:var(--text-main); }
.lay-sub-info { font-size:10.6px; color:var(--text-muted); min-width:120px; }
.lay-sub-linha > :last-child { margin-left:auto; }
.lay-sub-inp {
  width:62px; padding:5px 9px; border-radius:8px; border:1px solid var(--border-color);
  background:var(--bg-card); color:var(--text-main); font-size:12px;
  font-family:ui-monospace,monospace; text-align:center;
}
/* Uniodonto: os dois códigos por filial não cabem na caixinha de 3 dígitos da sub-fatura */
.lay-sub-inp[data-uni-id], .lay-sub-inp[data-uni-cc] { width:112px; text-align:left; }
.lay-sub-linha > .lay-sub-inp[data-uni-id] { margin-left:auto; }
.lay-sub-linha > .lay-sub-inp[data-uni-cc] { margin-left:0; }
/* Uniodonto: escolha de quem entra entre os avulsos sugeridos pelos termos */
.lay-sug {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:6px 9px; border-radius:8px; background:var(--bg-card);
  border:1px solid var(--border-color); cursor:pointer;
}
.lay-sug:hover { border-color:#F59E0B; }
.lay-sug input { accent-color:#F59E0B; cursor:pointer; flex-shrink:0; }
.lay-sug > span { font-size:11.6px; font-weight:650; color:var(--text-main); }
.lay-sug > small { font-size:10.2px; color:var(--text-muted); margin-left:auto; text-align:right; }

.lay-plano-massa { display:flex; align-items:center; gap:7px; margin-top:11px; flex-wrap:wrap; }
.lay-plano-massa > span { font-size:11.2px; font-weight:650; color:var(--text-muted); }
.lay-lista-mini { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.lay-lista-mini span {
  font-size:10.4px; padding:3px 8px; border-radius:7px;
  background:rgba(148,163,184,.16); color:var(--text-main);
}

/* ── tabelas ── */
.lay-tabs-mini { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.lay-tab-mini {
  display:flex; align-items:center; gap:7px; padding:7px 14px; border-radius:9px; cursor:pointer;
  background:transparent; border:1.5px solid var(--border-color); color:var(--text-muted);
  font-size:12px; font-weight:650; transition:all .2s;
}
.lay-tab-mini:hover { color:var(--text-main); }
.lay-tab-mini.on { border-color:#3B82F6; background:rgba(59,130,246,.08); color:#2563EB; font-weight:750; }
.lay-tab-mini span {
  font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px;
  background:rgba(148,163,184,.20); color:inherit;
}
.lay-filtros { display:flex; align-items:center; gap:10px; margin-bottom:11px; flex-wrap:wrap; }
.lay-busca {
  flex:1; min-width:210px; padding:8px 13px; border-radius:9px; border:1px solid var(--border-color);
  background:var(--bg-card); color:var(--text-main); font-size:12.2px; transition:border-color .18s, box-shadow .18s;
}
.lay-busca:focus { outline:none; border-color:#3B82F6; box-shadow:0 0 0 3px rgba(59,130,246,.14); }
.lay-filtro-btns { display:flex; gap:5px; }
.lay-filtro {
  padding:6px 12px; border-radius:8px; cursor:pointer; background:transparent;
  border:1px solid var(--border-color); color:var(--text-muted); font-size:11.4px; font-weight:650; transition:all .18s;
}
.lay-filtro.on { background:#3B82F6; border-color:#3B82F6; color:#fff; font-weight:750; }
.lay-tbl-wrap { overflow-x:auto; border:1px solid var(--border-color); border-radius:12px; }
.lay-tbl { width:100%; border-collapse:collapse; font-size:11.8px; }
.lay-tbl th {
  position:sticky; top:0; z-index:1; text-align:left; padding:10px 12px; font-size:10.2px; font-weight:800;
  text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted);
  background:var(--bg-page); border-bottom:1px solid var(--border-color); white-space:nowrap;
}
.lay-tbl td { padding:9px 12px; border-bottom:1px solid var(--border-color); color:var(--text-main); vertical-align:middle; }
.lay-tbl tbody tr {
  animation:layIn .3s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i) * .015s);
  transition:background .16s;
}
.lay-tbl tbody tr:hover { background:var(--bg-hover,rgba(99,102,241,.045)); }
.lay-tbl tbody tr:last-child td { border-bottom:none; }
.lay-tbl tbody tr.pend { background:rgba(245,158,11,.05); }
.lay-tbl tbody tr.pend:hover { background:rgba(245,158,11,.09); }
.lay-tbl .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.2px; white-space:nowrap; }
.lay-nome { font-weight:700; }
.lay-sub-txt { font-size:10.2px; color:var(--text-muted); margin-top:1px; display:flex; align-items:center; gap:5px; }
.lay-tag-avulso {
  font-size:8.6px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  padding:2px 6px; border-radius:999px; background:rgba(139,92,246,.15); color:#7C3AED;
}
.lay-arq { font-size:10.8px; color:var(--text-muted); max-width:290px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lay-origem { font-size:9.6px; color:var(--text-muted); margin-top:2px; }
.lay-pill {
  display:inline-block; font-size:9.8px; font-weight:800; text-transform:uppercase;
  letter-spacing:.4px; padding:3px 8px; border-radius:999px;
}
.lay-pill.ok { background:rgba(16,185,129,.14); color:#0E7C5A; }
.lay-pill.pend { background:rgba(245,158,11,.16); color:#B45309; }
.lay-falta { font-size:9.8px; color:#B45309; margin-top:3px; max-width:210px; line-height:1.4; }
.lay-sel, .lay-inp-cel {
  padding:5px 9px; border-radius:7px; border:1px solid var(--border-color);
  background:var(--bg-card); color:var(--text-main); font-size:11.4px; font-weight:650; transition:all .18s;
}
.lay-inp-cel { width:56px; text-align:center; font-family:ui-monospace,monospace; }
.lay-sel:focus, .lay-inp-cel:focus { outline:none; border-color:#3B82F6; box-shadow:0 0 0 3px rgba(59,130,246,.13); }
.lay-sel.vazio, .lay-inp-cel.vazio { border-color:#F59E0B; background:rgba(245,158,11,.07); }
.lay-x {
  background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px;
  border-radius:6px; transition:all .18s; opacity:.55;
}
.lay-tbl tr:hover .lay-x { opacity:1; }
.lay-x:hover { background:rgba(239,68,68,.12); color:#DC2626; }
.lay-tbl-rodape { margin-top:9px; font-size:10.8px; color:var(--text-muted); }
.lay-vazio { padding:26px; text-align:center; font-size:12px; color:var(--text-muted); }

/* ── gerar / pronto ── */
.lay-gerar { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.lay-gerar-txt { flex:1; min-width:250px; }
.lay-gerar-t { font-size:14px; font-weight:800; color:var(--text-main); }
.lay-gerar-d { font-size:11.6px; color:var(--text-muted); margin-top:4px; line-height:1.6; }
.lay-pronto { text-align:center; }
.lay-pronto-selo {
  width:56px; height:56px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#10B981,#0E7C5A); color:#fff;
  box-shadow:0 8px 26px rgba(16,185,129,.34); animation:laySelo .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes laySelo { from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }
.lay-pronto-t { font-size:17px; font-weight:800; color:var(--text-main); letter-spacing:-.3px; }
.lay-pronto-d { font-size:12.2px; color:var(--text-muted); margin:6px auto 0; line-height:1.6; max-width:660px; }
.lay-downloads { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; margin:20px 0 4px; }
.lay-dl {
  display:flex; align-items:center; gap:13px; padding:15px; border-radius:14px; text-align:left;
  background:var(--bg-page); border:1px solid var(--border-color); border-left:3px solid var(--c);
  animation:layIn .45s cubic-bezier(.22,1,.36,1) both;
}
.lay-dl-ico {
  width:38px; height:38px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--c) 13%,transparent); color:var(--c);
}
.lay-dl-txt { flex:1; min-width:0; }
.lay-dl-txt b { display:block; font-size:12.6px; font-weight:750; color:var(--text-main); }
.lay-dl-txt i {
  display:block; font-style:normal; font-size:10.6px; color:var(--c); font-weight:700; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lay-dl-txt span { display:block; font-size:10.6px; color:var(--text-muted); margin-top:4px; line-height:1.5; }
.lay-pronto-acoes { display:flex; gap:9px; justify-content:center; margin-top:16px; flex-wrap:wrap; }

/* ── histórico ── */
.lay-hist { display:flex; flex-direction:column; gap:8px; }
.lay-hist-item {
  display:flex; align-items:center; gap:13px; padding:11px 14px; border-radius:11px;
  background:var(--bg-page); border:1px solid var(--border-color); transition:all .2s;
  animation:layIn .35s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i) * .05s);
}
.lay-hist-item:hover { border-color:#6366F1; transform:translateX(3px); }
.lay-hist-comp {
  font-size:12px; font-weight:800; color:#4F46E5; background:rgba(99,102,241,.11);
  padding:6px 11px; border-radius:9px; flex-shrink:0; font-family:ui-monospace,monospace;
}
.lay-hist-info { flex:1; min-width:0; }
.lay-hist-info b { display:block; font-size:11.8px; font-weight:700; color:var(--text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lay-hist-info span { display:block; font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.lay-hist-btns { display:flex; gap:6px; flex-shrink:0; }

/* ── operadora ainda não mapeada ── */
.lay-soon { text-align:center; padding:34px 24px; }
.lay-soon-ico {
  width:56px; height:56px; border-radius:16px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--c) 11%,transparent); color:var(--c);
}
.lay-soon-t { font-size:15px; font-weight:800; color:var(--text-main); }
.lay-soon-d { font-size:12.2px; color:var(--text-muted); margin:8px auto 18px; max-width:590px; line-height:1.65; }

@keyframes layIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:760px) {
  .lay-hero { padding:20px; }
  .lay-hero-title { font-size:19px; }
  .lay-hero-flow { gap:7px; }
  .lay-flow-seta { display:none; }
  .lay-stepper { overflow-x:auto; flex-wrap:nowrap; }
  .lay-step { flex-shrink:0; }
  .lay-step-linha { display:none; }
  .lay-gerar { flex-direction:column; align-items:stretch; }
}

@media (prefers-reduced-motion:reduce) {
  .lay-hero, .lay-card, .lay-fade, .lay-op, .lay-drop, .lay-kpi,
  .lay-flow-chip, .lay-tbl tbody tr, .lay-hist-item, .lay-dl, .lay-alerta, .lay-pronto-selo,
  .lay-hero-glow, .lay-progresso-barra i {
    animation:none !important;
  }
}

body.dark .lay-hero { box-shadow:0 12px 38px rgba(0,0,0,.5); }
body.dark .lay-drop-file { color:#34D399; }
body.dark .lay-fonte-l span { color:#34D399; }
body.dark .lay-pill.ok { color:#34D399; }
body.dark .lay-pill.pend { color:#FBBF24; }
body.dark .lay-falta, body.dark .lay-fonte-f { color:#FBBF24; }

/* ── inclusões avulsas ── */
.lay-avulso-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.lay-avulso-form input {
  padding:8px 13px; border-radius:9px; border:1px solid var(--border-color);
  background:var(--bg-card); color:var(--text-main); font-size:12.2px;
  font-family:ui-monospace,monospace; min-width:190px; transition:border-color .18s, box-shadow .18s;
}
.lay-avulso-form input:focus { outline:none; border-color:#8B5CF6; box-shadow:0 0 0 3px rgba(139,92,246,.14); }
.lay-avulsos { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.lay-avulso {
  display:flex; align-items:center; gap:9px; padding:6px 8px 6px 12px; border-radius:9px;
  background:rgba(139,92,246,.09); border:1px solid rgba(139,92,246,.22); font-size:11.4px;
  animation:layIn .3s cubic-bezier(.22,1,.36,1) both;
}
.lay-avulso.erro { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.26); }
.lay-avulso .mono { font-family:ui-monospace,monospace; font-weight:700; color:#7C3AED; }
.lay-avulso.erro .mono { color:#DC2626; }
.lay-avulso > span:nth-child(2) { color:var(--text-main); }
.lay-avulso .lay-x { opacity:.7; }
.lay-avulso-nota { margin-top:11px; font-size:11px; color:var(--text-muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.dark .lay-avulso .mono { color:#A78BFA; }

/* ══════════════════════════════════════════════════════════════════════
   FICHA DA APÓLICE (Patrimonial) — desenho espelhado no ADMSEG
   A equipe passa o dia no ADMSEG: a ficha aqui segue a MESMA ordem de
   leitura (identificação, dados da apólice, item/veículo, renovação,
   fatores e o prêmio no rodapé), para ninguém ter que reaprender onde as
   coisas estão. O que muda é o acabamento, não o lugar da informação.
   ══════════════════════════════════════════════════════════════════════ */
.apx-ov { position:fixed; inset:0; background:rgba(15,23,42,.62); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:22px 16px; overflow-y:auto;
  animation:apxFade .18s ease both; }
.apx { width:100%; max-width:1180px; background:var(--bg-card); border-radius:18px; overflow:hidden;
  box-shadow:0 32px 90px rgba(15,23,42,.42); animation:apxIn .34s cubic-bezier(.22,1,.36,1) both; }

/* Faixa de identificação: código, segurado e situação, como o topo do ADMSEG */
.apx-top { background:linear-gradient(135deg,#123C7A 0%,#1A4F9C 45%,#2563EB 100%); color:#fff;
  padding:15px 22px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; position:relative; overflow:hidden; }
.apx-top::after { content:''; position:absolute; right:-60px; top:-80px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.13),transparent 65%); pointer-events:none; }
.apx-cod { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.82; }
.apx-nome { font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.2; margin-top:1px; }
.apx-sub { font-size:11.5px; opacity:.9; margin-top:5px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.apx-sub b { font-weight:700; }
.apx-sit { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:8px;
  padding:4px 11px; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.apx-x { background:rgba(255,255,255,.14); border:none; color:#fff; width:30px; height:30px; border-radius:9px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s, transform .2s; flex-shrink:0; }
.apx-x:hover { background:rgba(255,255,255,.3); transform:rotate(90deg); }

/* Barra de ações: equivale à régua de botões do rodapé do ADMSEG */
.apx-acoes { display:flex; gap:7px; flex-wrap:wrap; padding:11px 22px; background:var(--bg-page);
  border-bottom:1px solid var(--border-color); }
.apx-bt { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:7px 13px;
  border-radius:9px; cursor:pointer; border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-main);
  transition:transform .15s, box-shadow .15s, border-color .15s, background .15s, color .15s; }
.apx-bt:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,23,42,.13); }
.apx-bt:active { transform:translateY(0); }
.apx-bt svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.apx-bt.pri { background:#1A4F9C; border-color:#1A4F9C; color:#fff; }
.apx-bt.pri:hover { background:#14417f; }
.apx-bt.verde { border-color:#10B98155; color:#059669; }
.apx-bt.verde:hover { border-color:#10B981; background:rgba(16,185,129,.09); }
.apx-bt.vermelho { border-color:#EF444455; color:#DC2626; }
.apx-bt.vermelho:hover { border-color:#EF4444; background:rgba(239,68,68,.09); }
.apx-bt.roxo { border-color:#8B5CF655; color:#7C3AED; }
.apx-bt.roxo:hover { border-color:#8B5CF6; background:rgba(139,92,246,.09); }
.apx-bt.ambar { border-color:#F59E0B66; color:#B45309; }
.apx-bt.ambar:hover { border-color:#F59E0B; background:rgba(245,158,11,.11); }

.apx-corpo { padding:16px 22px 4px; max-height:calc(100vh - 268px); overflow-y:auto; }

/* Blocos lado a lado, como os quadros do formulário do ADMSEG */
.apx-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.apx-bloco { border:1px solid var(--border-color); border-radius:12px; background:var(--bg-page); padding:11px 13px 12px;
  animation:apxSobe .38s cubic-bezier(.22,1,.36,1) both; }
.apx-bloco.full { grid-column:1/-1; }
.apx-bloco:nth-child(2) { animation-delay:.05s; }
.apx-bloco:nth-child(3) { animation-delay:.1s; }
.apx-bloco:nth-child(4) { animation-delay:.15s; }
.apx-bloco:nth-child(5) { animation-delay:.2s; }
.apx-bloco-t { font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#1A4F9C;
  margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
/* Ícone no título do quadro. O tamanho só existia em `.apx-form .apx-bloco-t svg`, e na
   FICHA (que não é `.apx-form`) o SVG inline, sem width/height próprios, esticava até o
   tamanho do quadro — ficaram dois ícones gigantes no lugar dos títulos (Andressa,
   20/08/2026). Agora o tamanho vale em qualquer `.apx-bloco-t`. */
.apx-bloco-t svg { width:13px; height:13px; flex-shrink:0; }
/* E título COM ícone lê da esquerda para a direita: a regra base usa `space-between` (foi
   feita para "título + botão à direita"), o que jogava o texto para a outra ponta do quadro.
   Quem precisa do botão na direita usa `margin-left:auto` nele. */
.apx-bloco-t:has(svg) { justify-content:flex-start; }
.apx-campos { display:grid; grid-template-columns:repeat(auto-fit,minmax(122px,1fr)); gap:9px 12px; }
.apx-c { min-width:0; }
.apx-c-r { font-size:9.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.apx-c-v { font-size:12.5px; color:var(--text-main); font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.apx-c-v.vazio { color:var(--text-muted); font-weight:500; opacity:.55; }
.apx-c.full { grid-column:1/-1; }
/* Campo que precisa de duas colunas do grid (o CEP com o botao Buscar do lado nao cabia
   nos 122px de uma coluna so). Cai para 1 coluna no celular, junto com o resto. */
.apx-c.full-2 { grid-column:span 2; }
@media (max-width:560px) { .apx-c.full-2 { grid-column:1/-1; } }

/* Tabela de coberturas: mesma leitura da grade do ADMSEG */
.apx-tab { width:100%; border-collapse:collapse; font-size:11.5px; }
.apx-tab th { text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
  font-weight:700; padding:6px 9px; border-bottom:1px solid var(--border-color); background:var(--bg-hover); }
.apx-tab td { padding:6px 9px; border-bottom:1px solid var(--border-color); color:var(--text-main); }
.apx-tab tr:last-child td { border-bottom:none; }
.apx-tab tbody tr { transition:background .12s; }
.apx-tab tbody tr:hover { background:var(--bg-hover); }
.apx-num, .apx-tab th.apx-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Campos do modo edição: mesmos quadros da ficha, com input no lugar do valor, pra
   quem edita não precisar reprocurar onde cada informação estava. */
/* Trilha de versões da apólice. No ADMSEG o endosso não é uma observação: a apólice
   passa a ter a versão inicial e as endossadas, e o que vale é a ÚLTIMA. A trilha
   fica logo abaixo do cabeçalho, com a vigente marcada. */
.apx-versoes { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:9px 22px;
  background:var(--bg-page); border-bottom:1px solid var(--border-color); }
.apx-versoes-r { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); margin-right:4px; }
.apx-ver { font-size:11px; font-weight:700; padding:4px 11px; border-radius:20px; cursor:pointer;
  border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-muted);
  transition:border-color .15s, color .15s, background .15s, transform .15s; white-space:nowrap; }
.apx-ver:hover { transform:translateY(-1px); color:var(--text-main); border-color:#94A3B8; }
.apx-ver.vig { border-color:#10B98166; color:#059669; }
.apx-ver.on { background:#1A4F9C; border-color:#1A4F9C; color:#fff; }
.apx-ver.on.vig { background:#059669; border-color:#059669; color:#fff; }
.apx-hist-aviso { display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:9px 22px;
  background:rgba(245,158,11,.11); border-bottom:1px solid var(--border-color);
  font-size:11.5px; color:#B45309; font-weight:600; }
.apx-hist-aviso svg { flex-shrink:0; }
body.dark .apx-hist-aviso { background:rgba(245,158,11,.14); color:#FBBF24; }
@media (max-width:900px) { .apx-versoes, .apx-hist-aviso { padding-left:15px; padding-right:15px; } }

/* Carteira em CAIXA ALTA, como o ADMSEG. O uppercase no salvar cuida do que entra daqui
   pra frente; aqui é o que uniformiza as milhares de apólices já importadas, sem tocar
   no banco. Fica na tabela da carteira, não no painel inteiro. */
.cart-maiusc td { text-transform:uppercase; }

.apx-in { width:100%; box-sizing:border-box; padding:7px 9px; border-radius:8px; font-size:12.5px;
  border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-main);
  font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.apx-in:hover { border-color:#94A3B8; }
.apx-in:focus { outline:none; border-color:#1A4F9C; box-shadow:0 0 0 3px rgba(26,79,156,.14); }
.apx-in::placeholder { color:var(--text-muted); opacity:.6; }
select.apx-in { cursor:pointer; }
body.dark .apx-in:focus { border-color:#7FA9E8; box-shadow:0 0 0 3px rgba(127,169,232,.18); }

/* ══════════════════════════════════════════════════════════════════════
   O ACABAMENTO DA FICHA APLICADO A TODOS OS MODAIS DO PAINEL
   Pedido do Pedro (ago/2026): "esse modal de design feito no cadastro
   precisa ser passado para todo o patrimonial, a mudança vai ser global
   em toda parte que envolva algum tipo de cadastramento".
   Feito por CSS, em cima da estrutura que TODOS os modais já usam
   (.modal > .modal-header > .modal-title/.modal-close + .modal-body), em
   vez de reescrever tela por tela: assim nenhuma tela que hoje funciona
   corre risco de quebrar, e as futuras já nascem no padrão.
   ══════════════════════════════════════════════════════════════════════ */
/* Sem `overflow:hidden` aqui: `.modal` é quem rola (max-height:90vh + overflow-y:auto),
   e esconder o estouro trancaria o conteúdo dos modais altos. */
.modal { border-radius:18px; box-shadow:0 32px 90px rgba(15,23,42,.42); }
.modal-overlay.open { backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); background:rgba(15,23,42,.62); }

/* Cabeçalho: a mesma faixa de identificação da ficha da apólice */
.modal-header { background:linear-gradient(135deg,#123C7A 0%,#1A4F9C 45%,#2563EB 100%);
  border-bottom:none; padding:15px 22px; position:relative; overflow:hidden; }
.modal-header::after { content:''; position:absolute; right:-60px; top:-80px; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.13),transparent 65%); pointer-events:none; }
.modal-title { color:#fff; font-size:16px; font-weight:800; letter-spacing:-.01em; position:relative; z-index:1; }
.modal-close { background:rgba(255,255,255,.14); color:#fff; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
  transition:background .15s, transform .2s; }
.modal-close:hover { background:rgba(255,255,255,.3); transform:rotate(90deg); }
.modal-close svg { stroke:#fff; }

/* Corpo e rodapé: mesma respiração dos quadros da ficha */
.modal-body { padding:18px 22px; }
.modal-footer { border-top:1px solid var(--border-color); background:linear-gradient(180deg,var(--bg-page),var(--bg-hover)); }

/* Blocos internos que a ficha usa continuam valendo dentro de qualquer modal:
   quem for montar um cadastro novo pode usar .apx-bloco/.apx-campos/.apx-in aqui dentro. */
.modal .apx-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:820px) { .modal .apx-grid { grid-template-columns:1fr; } }

/* ── Cabeçalho de identificação e rodapé de ação nos modais de CADASTRO ────────
   Pedro (ago/2026): "o design de cobrança, prospecção e cadastro está muito ruim,
   quero igual ao da ficha da JOSINDIA". A faixa azul já era a mesma — o que faltava
   eram as DUAS PONTAS da ficha: ela abre dizendo QUEM é (código, nome, linha de
   identificação e a situação em destaque) e fecha com o resumo do dinheiro ao lado
   do botão, sempre à vista. Os formulários tinham só um título solto no alto e um
   botão largo perdido no fim da rolagem. O miolo (os quadros `.apx-bloco`) já era o
   mesmo desenho, e é por isso que nada aqui mexe nele. */
.modal-header:has(.apx-cab) { align-items:flex-start; padding:16px 22px 15px; }
.modal-title:has(.apx-cab) { flex:1; min-width:0; }
.apx-cab { position:relative; z-index:1; min-width:0; }
.apx-cab-r { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.82; }
.apx-cab-t { font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.2; margin-top:1px; }
.apx-cab-s { font-size:11.5px; font-weight:600; opacity:.9; margin-top:6px; display:flex; gap:8px;
  flex-wrap:wrap; align-items:center; }
.apx-cab-s b { font-weight:800; }
.apx-cab-s .p { opacity:.5; }                    /* o ponto que separa os pedaços da linha */
.apx-cab-b { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32); border-radius:8px;
  padding:3px 10px; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
/* A identificação entra em cascata junto com o modal, como o topo da ficha */
.modal-overlay.open .apx-cab > *, .pct-box .apx-cab > * { animation:apxSobe .34s cubic-bezier(.22,1,.36,1) both; }
.modal-overlay.open .apx-cab > *:nth-child(2), .pct-box .apx-cab > *:nth-child(2) { animation-delay:.05s; }
.modal-overlay.open .apx-cab > *:nth-child(3), .pct-box .apx-cab > *:nth-child(3) { animation-delay:.1s; }

/* Rodapé de ação: o "PRÊMIO DO DOCUMENTO" do ADMSEG aplicado ao formulário — o resumo do
   que está sendo salvo à esquerda, os botões à direita, colado no pé do modal (`sticky`)
   para não sumir no meio de um formulário de 50 campos. As margens negativas existem
   porque ele nasce DENTRO do corpo do modal e precisa encostar nas bordas; `--pe-x/--pe-b`
   são o recuo desse corpo, que muda de um modal para o outro. */
.apx-pe { --pe-x:22px; --pe-b:18px;
  position:sticky; bottom:0; z-index:4;
  margin:18px calc(-1 * var(--pe-x)) calc(-1 * var(--pe-b));
  padding:12px var(--pe-x); border-radius:0 0 18px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:linear-gradient(180deg,var(--bg-page),var(--bg-hover));
  border-top:1px solid var(--border-color); box-shadow:0 -12px 26px -20px rgba(15,23,42,.55); }
/* O modal de Contatos das Seguradoras tem outro recuo no pé (24px, não 18px) */
.pct-box .apx-pe { --pe-b:24px; }
/* Dentro da ficha (`.apx-corpo`) o recuo do pé é 4px — é o corpo que rola, e o rodapé gruda
   nele. Sem isso a margem negativa de 18px estouraria 14px para fora do cartão. */
.apx-corpo .apx-pe { --pe-b:4px; }
.apx-pe-g { display:flex; gap:22px; flex-wrap:wrap; min-width:0; }
.apx-pe-i .r { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.apx-pe-i .v { font-size:15px; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums; line-height:1.25; }
.apx-pe-i.total .v { font-size:19px; color:var(--pt-c1,#1A4F9C); }
.apx-pe-n { font-size:11px; color:var(--text-muted); line-height:1.45; max-width:430px; }
.apx-pe-a { display:flex; gap:8px; align-items:center; margin-left:auto; }
.apx-pe .apx-bt { padding:9px 15px; font-size:12.5px; }
.apx-pe .apx-bt.pri { background:var(--pt-c1,#1A4F9C); border-color:var(--pt-c1,#1A4F9C); padding:9px 18px; }
.apx-pe .apx-bt.pri:hover { filter:brightness(1.07);
  box-shadow:0 8px 20px color-mix(in srgb, var(--pt-c1,#1A4F9C) 40%, transparent); }
/* No celular o corpo do modal recua 16px (não 22): o rodapé precisa acompanhar, senão
   as margens negativas o fazem vazar 6px para fora de cada lado. */
@media (max-width:768px) { .apx-pe { --pe-x:16px; border-radius:0; } }
@media (max-width:600px) {
  .apx-pe { flex-direction:column; align-items:stretch; }
  .apx-pe-a { margin-left:0; }
  .apx-pe-a .apx-bt { flex:1; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .modal-overlay.open .apx-cab > *, .pct-box .apx-cab > * { animation:none !important; }
}

/* Quadro do formulário reagindo ao cursor, como os cartões da carteira: o formulário
   deixa de ser papel e passa a responder. Só elevação e fio na cor do assunto — nada
   que mexa no lugar do campo enquanto a pessoa digita. */
.apx-form .apx-bloco { transition:box-shadow .2s var(--pt-ease), border-color .2s, transform .2s var(--pt-ease); }
.apx-form .apx-bloco:hover, .apx-form .apx-bloco:focus-within {
  border-color:color-mix(in srgb, var(--pt-c1,#1A4F9C) 45%, var(--border-color));
  box-shadow:0 10px 26px -14px color-mix(in srgb, var(--pt-c1,#1A4F9C) 55%, transparent); }
@media (prefers-reduced-motion:reduce) { .apx-form .apx-bloco { transition:none !important; } }

@media (prefers-reduced-motion:reduce) {
  .modal-overlay.open .modal, .modal-overlay.closing .modal { animation:none !important; }
  .modal-close:hover { transform:none; }
}

/* Abas internas: como as abas do item (AUTOMÓVEIS, GARANTIAS, PERFIL...) do ADMSEG */
.apx-abas { display:flex; gap:3px; flex-wrap:wrap; border-bottom:2px solid var(--border-color); margin:16px 0 12px; }
.apx-aba { position:relative; padding:8px 13px; font-size:11.5px; font-weight:700; color:var(--text-muted);
  background:none; border:none; cursor:pointer; border-radius:9px 9px 0 0; transition:color .15s, background .15s; white-space:nowrap; }
.apx-aba:hover { color:var(--text-main); background:var(--bg-hover); }
.apx-aba.on { color:#1A4F9C; background:rgba(26,79,156,.09); }
.apx-aba.on::after { content:''; position:absolute; left:9px; right:9px; bottom:-2px; height:2px; background:#1A4F9C;
  border-radius:2px; animation:apxLinha .25s ease both; }
.apx-aba .qt { display:inline-block; margin-left:5px; font-size:10px; background:var(--border-color); color:var(--text-muted);
  border-radius:20px; padding:1px 6px; font-weight:800; }
.apx-aba.on .qt { background:#1A4F9C; color:#fff; }
.apx-pane { display:none; animation:apxSobe .28s ease both; }
.apx-pane.on { display:block; }
.apx-vazio { font-size:12px; color:var(--text-muted); padding:14px 2px; }

/* Rodapé do prêmio: o "PRÊMIO DO DOCUMENTO" do ADMSEG, sempre à vista */
.apx-rod { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 22px; background:linear-gradient(180deg,var(--bg-page),var(--bg-hover));
  border-top:1px solid var(--border-color); }
.apx-rod-g { display:flex; gap:26px; flex-wrap:wrap; }
.apx-rod-i .r { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.apx-rod-i .v { font-size:15px; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums; line-height:1.25; }
.apx-rod-i.total .v { font-size:19px; color:#1A4F9C; }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD DO PATRIMONIAL (Visão Geral) — repaginado ago/2026
   Estilo "data-dense": o número é o herói, cada bloco leva a uma ação, e a
   animação existe para guiar o olho na ordem de leitura (KPI → gráfico →
   lista), nunca para enfeitar. Tudo desligado em prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */
.pdash { --pd-ease:cubic-bezier(.22,1,.36,1); }

/* Cabeçalho com saudação e hora do dado */
.pdash-topo { position:relative; overflow:hidden; border:1px solid var(--border-color); border-radius:16px;
  padding:18px 22px; margin-bottom:16px; background:var(--bg-card);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  animation:pdashSobe .45s var(--pd-ease) both; }
/* Brilho diagonal discreto: dá profundidade sem virar "card colorido" */
.pdash-topo::before { content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(59,130,246,.10) 0%, rgba(99,102,241,.06) 34%, transparent 62%);
  pointer-events:none; }
.pdash-topo > * { position:relative; }
.pdash-ico { width:44px; height:44px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#3B82F6,#1A4F9C); box-shadow:0 6px 18px rgba(26,79,156,.28); }
.pdash-ola { font-size:17px; font-weight:800; color:var(--text-main); line-height:1.2; }
.pdash-sub { font-size:11.5px; color:var(--text-muted); margin-top:3px; }
.pdash-atualizado { margin-left:auto; display:flex; align-items:center; gap:8px; }
.pdash-hora { font-size:10.5px; color:var(--text-muted); text-align:right; line-height:1.35; }
.pdash-rec { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; cursor:pointer;
  padding:7px 12px; border-radius:9px; border:1px solid var(--border-color); background:var(--bg-page);
  color:var(--text-muted); transition:color .16s, border-color .16s, transform .16s var(--pd-ease); }
.pdash-rec:hover { color:#1A4F9C; border-color:#1A4F9C; transform:translateY(-1px); }
.pdash-rec:focus-visible { outline:2px solid #1A4F9C; outline-offset:2px; }
.pdash-rec svg { width:12px; height:12px; transition:transform .5s var(--pd-ease); }
.pdash-rec:hover svg { transform:rotate(180deg); }

/* Foco de hoje: a faixa do cabeçalho estava vazia à direita, e o espaço mais nobre da tela
   não podia ficar só com a saudação. Aqui entram as coisas que pedem ação HOJE, cada uma
   abrindo a tela correspondente. Item zerado NÃO aparece — melhor um cabeçalho limpo do
   que três zeros lado a lado. */
.pdash-foco { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pdash-foco-i { display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap;
  padding:7px 13px 7px 11px; border-radius:11px; border:1px solid var(--border-color); background:var(--bg-card);
  transition:transform .16s var(--pd-ease), box-shadow .16s, border-color .16s; }
.pdash-foco-i:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.09); border-color:var(--pd-cor,#3B82F6); }
.pdash-foco-i:focus-visible { outline:2px solid var(--pd-cor,#3B82F6); outline-offset:2px; }
.pdash-foco-n { font-size:18px; font-weight:800; color:var(--pd-cor,#3B82F6); font-variant-numeric:tabular-nums; line-height:1; }
.pdash-foco-t { font-size:10.5px; font-weight:700; color:var(--text-main); line-height:1.25; text-align:left; }
.pdash-foco-t span { display:block; font-size:9px; font-weight:600; color:var(--text-muted); }
body.dark .pdash-foco-n { color:color-mix(in srgb, var(--pd-cor,#3B82F6) 68%, #fff); }

/* Composição da carteira por seguradora — uma barra proporcional por linha */
.pdash-mix { display:flex; flex-direction:column; gap:9px; }
.pdash-mix-l { display:grid; grid-template-columns:1fr auto; gap:3px 10px; align-items:center; }
.pdash-mix-n { font-size:11.5px; font-weight:700; color:var(--text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdash-mix-q { font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pdash-mix-q b { color:var(--text-main); font-weight:800; }
.pdash-mix-b { grid-column:1/-1; height:6px; border-radius:20px; background:var(--bg-page); overflow:hidden; }
.pdash-mix-b span { display:block; height:100%; width:0; border-radius:20px; background:var(--pd-cor,#3B82F6);
  transition:width .9s var(--pd-ease); }

/* Cobranças: números com pesos diferentes (o que atrasou grita mais alto) */
.pdash-cob { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.pdash-cob-i .n { font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; }
.pdash-cob-i .r { font-size:10px; color:var(--text-muted); margin-top:1px; }

/* KPIs */
/* 5 colunas exatas quando cabe. Com `auto-fit` sobrava um cartão órfão sozinho na segunda
   linha (4+1), que é o tipo de detalhe que faz a tela parecer montada às pressas. */
.pdash-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }
@media (max-width:1120px) { .pdash-kpis { grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px)  { .pdash-kpis { grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px)  { .pdash-kpis { grid-template-columns:1fr; } }
.pdash-kpi { position:relative; overflow:hidden; background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:15px; padding:15px 16px 14px; cursor:pointer; text-align:left;
  animation:pdashSobe .5s var(--pd-ease) both;
  transition:transform .2s var(--pd-ease), box-shadow .2s, border-color .2s; }
.pdash-kpi:nth-child(1){animation-delay:.04s} .pdash-kpi:nth-child(2){animation-delay:.09s}
.pdash-kpi:nth-child(3){animation-delay:.14s} .pdash-kpi:nth-child(4){animation-delay:.19s}
.pdash-kpi:nth-child(5){animation-delay:.24s}
/* Fio de cor no topo: cresce no hover, marcando qual cartão está sob o cursor */
.pdash-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--pd-cor,#3B82F6); transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--pd-ease); }
.pdash-kpi:hover, .pdash-kpi:focus-visible { transform:translateY(-3px); box-shadow:0 12px 30px rgba(15,23,42,.10); border-color:var(--pd-cor,#3B82F6); }
.pdash-kpi:focus-visible { outline:2px solid var(--pd-cor,#3B82F6); outline-offset:2px; }
.pdash-kpi:hover::before, .pdash-kpi:focus-visible::before { transform:scaleX(1); }
.pdash-kpi-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.pdash-kpi-ico { width:31px; height:31px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--pd-cor,#3B82F6) 13%, transparent); color:var(--pd-cor,#3B82F6);
  transition:transform .25s var(--pd-ease); }
.pdash-kpi:hover .pdash-kpi-ico { transform:scale(1.08) rotate(-4deg); }
.pdash-kpi-ico svg { width:15px; height:15px; }
.pdash-kpi-seta { color:var(--text-muted); opacity:0; transform:translateX(-5px);
  transition:opacity .2s, transform .2s var(--pd-ease); }
.pdash-kpi:hover .pdash-kpi-seta { opacity:.85; transform:none; color:var(--pd-cor,#3B82F6); }
.pdash-kpi-val { font-size:27px; font-weight:800; line-height:1.05; color:var(--pd-cor,#3B82F6);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.pdash-kpi-val small { font-size:15px; font-weight:700; opacity:.75; margin-right:1px; }
.pdash-kpi-rot { font-size:10.5px; font-weight:700; color:var(--text-main); margin-top:5px; letter-spacing:.01em; }
.pdash-kpi-nota { font-size:10px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
/* O destaque da nota é TEXTO PEQUENO: a cor pura do KPI (ex.: âmbar #D97706) fica em ~3:1
   sobre branco, abaixo do mínimo de 4,5:1. Escurece no claro e clareia no escuro, mantendo
   a identidade da cor. O `color:` cru antes do color-mix é o fallback de navegador velho. */
.pdash-kpi-nota b { font-weight:800; color:var(--pd-cor,#3B82F6);
  color:color-mix(in srgb, var(--pd-cor,#3B82F6) 78%, #000); }
body.dark .pdash-kpi-nota b { color:color-mix(in srgb, var(--pd-cor,#3B82F6) 52%, #fff); }
/* O número grande é texto grande (27px, 800): o mínimo cai para 3:1 e a cor pura passa.
   No escuro ainda assim clareia um pouco, porque vermelho saturado sobre #1E293B cansa. */
body.dark .pdash-kpi-val, body.dark .pdash-kpi-ico { color:color-mix(in srgb, var(--pd-cor,#3B82F6) 68%, #fff); }

/* Blocos analíticos */
/* Os blocos analíticos dividem a largura em partes iguais (1, 2 ou 3 conforme o perfil vê
   Propostas e Pagamentos). `grid-auto-flow:column` mantém tudo numa linha só; abaixo de
   860px eles empilham. */
.pdash-linha { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:12px; margin-bottom:16px; }
@media (max-width:860px) { .pdash-linha { grid-auto-flow:row; grid-auto-columns:auto; } }
.pdash-bloco { background:var(--bg-card); border:1px solid var(--border-color); border-radius:15px; padding:15px 16px;
  animation:pdashSobe .5s var(--pd-ease) both; animation-delay:.26s; transition:box-shadow .2s, border-color .2s; }
.pdash-bloco:hover { box-shadow:0 10px 26px rgba(15,23,42,.07); }
.pdash-bloco-t { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; color:var(--text-main);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }
.pdash-bloco-t svg { width:13px; height:13px; }
.pdash-bloco-t .mes { margin-left:auto; text-transform:none; letter-spacing:0; font-weight:600; color:var(--text-muted); font-size:10px; }

/* Rosca (propostas emitidas) */
.pdash-donut { display:flex; align-items:center; gap:14px; }
.pdash-donut svg { flex-shrink:0; transform:rotate(-90deg); }
.pdash-donut .trilho { stroke:var(--border-color); }
.pdash-donut .arco { stroke-linecap:round; transition:stroke-dashoffset 1s var(--pd-ease); }
.pdash-donut-num { font-size:22px; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums; line-height:1.1; }
.pdash-donut-rot { font-size:10.5px; color:var(--text-muted); margin-top:2px; }

/* Barra empilhada (renovações) */
.pdash-barra { display:flex; height:9px; border-radius:20px; overflow:hidden; background:var(--bg-page); margin-bottom:10px; }
.pdash-barra span { display:block; height:100%; width:0; transition:width .9s var(--pd-ease); }
.pdash-leg { display:flex; gap:14px; flex-wrap:wrap; }
.pdash-leg-i { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-muted); }
.pdash-leg-i .pt { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pdash-leg-i b { color:var(--text-main); font-weight:800; font-variant-numeric:tabular-nums; }

/* Valor em destaque (pagamentos) */
.pdash-vlr { font-size:23px; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.pdash-vlr small { font-size:13px; opacity:.7; margin-right:2px; }

/* Lista de vencimentos */
.pdash-venc-linha { cursor:pointer; transition:background .15s; }
.pdash-venc-linha:hover { background:var(--bg-page); }
/* Prazo do vencimento. As cores vivem AQUI (e não no JS) porque o tom que funciona no tema
   claro não funciona no escuro: âmbar #D97706 sobre branco dá ~3:1, abaixo do mínimo para
   texto pequeno. Estilo inline no JS não daria para corrigir por tema. */
.pdash-dias { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; white-space:nowrap; }
.pdash-dias .pt { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:currentColor; }
.pdash-dias.urg { color:#DC2626; }   /* até 7 dias  */
.pdash-dias.med { color:#B45309; }   /* até 15 dias */
.pdash-dias.ok  { color:#0369A1; }   /* mais folga  */
body.dark .pdash-dias.urg { color:#F87171; }
body.dark .pdash-dias.med { color:#FBBF24; }
body.dark .pdash-dias.ok  { color:#7DD3FC; }
.pdash-dias.urg .pt { animation:pdashPulso 2.2s ease-in-out infinite; }
.pdash-vazio { display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 16px; text-align:center;
  color:var(--text-muted); font-size:12.5px; }
.pdash-vazio svg { width:34px; height:34px; opacity:.35; }

/* Acesso rápido */
.pdash-atalhos { display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:10px; }
.pdash-atalho { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px; cursor:pointer;
  background:var(--bg-card); border:1px solid var(--border-color); text-align:left;
  transition:transform .18s var(--pd-ease), box-shadow .18s, border-color .18s; }
.pdash-atalho:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.08); border-color:var(--pd-cor,#6366F1); }
.pdash-atalho:focus-visible { outline:2px solid var(--pd-cor,#6366F1); outline-offset:2px; }
.pdash-atalho-ico { width:33px; height:33px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--pd-cor,#6366F1) 13%, transparent); color:var(--pd-cor,#6366F1);
  transition:transform .22s var(--pd-ease); }
.pdash-atalho:hover .pdash-atalho-ico { transform:scale(1.09); }
.pdash-atalho-ico svg { width:15px; height:15px; }
.pdash-atalho-n { font-size:12.5px; font-weight:700; color:var(--text-main); }
.pdash-atalho-d { font-size:10px; color:var(--text-muted); margin-top:1px; line-height:1.4; }
.pdash-atalho-seta { margin-left:auto; color:var(--text-muted); opacity:0; transform:translateX(-4px);
  transition:opacity .18s, transform .18s var(--pd-ease); }
.pdash-atalho:hover .pdash-atalho-seta { opacity:.8; transform:none; color:var(--pd-cor,#6366F1); }

/* Esqueleto de carregamento: reserva o espaço para a tela não pular quando os dados chegam */
.pdash-sk { background:linear-gradient(90deg, var(--bg-page) 25%, var(--bg-hover) 50%, var(--bg-page) 75%);
  background-size:200% 100%; animation:pdashSk 1.3s linear infinite; border-radius:10px; }

@keyframes pdashSobe { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes pdashSk { from { background-position:200% 0; } to { background-position:-200% 0; } }
@keyframes pdashPulso { 0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,.5); } 60% { box-shadow:0 0 0 5px rgba(220,38,38,0); } }

body.dark .pdash-topo::before { background:linear-gradient(115deg, rgba(96,165,250,.14) 0%, rgba(129,140,248,.08) 34%, transparent 62%); }
body.dark .pdash-kpi:hover, body.dark .pdash-atalho:hover { box-shadow:0 12px 30px rgba(0,0,0,.34); }

@media (max-width:640px) {
  .pdash-topo { padding:15px 16px; }
  .pdash-atualizado { margin-left:0; width:100%; justify-content:space-between; }
  .pdash-kpi-val { font-size:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .pdash-topo, .pdash-kpi, .pdash-bloco, .pdash-sk { animation:none !important; }
  .pdash-kpi, .pdash-atalho, .pdash-rec, .pdash-kpi-ico, .pdash-atalho-ico, .pdash-foco-i,
  .pdash-barra span, .pdash-donut .arco, .pdash-kpi::before, .pdash-mix-b span { transition:none !important; }
  .pdash-dias.urg .pt { animation:none !important; }
}
/* O cabeçalho vira coluna quando o foco do dia não cabe ao lado da saudação. */
@media (max-width:1080px) {
  .pdash-topo { align-items:flex-start; }
  .pdash-foco { width:100%; }
}

/* ── Sinistro x Atendimento (Andressa, ago/2026) ──────────────────────────────
   A marca vermelha era uma só e não dizia do que era. Agora o SINISTRO fica em
   vermelho e o ATENDIMENTO (vidros, assistência) em âmbar, com o tipo escrito —
   são coisas diferentes para o cliente, para a franquia e para o bônus. */
.patri-tag { display:inline-flex; align-items:center; gap:4px; vertical-align:1px; margin-left:5px;
  font-size:8.8px; font-weight:800; letter-spacing:.045em; text-transform:uppercase;
  padding:2px 7px; border-radius:20px; white-space:nowrap; cursor:help;
  border:1px solid transparent; transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s; }
.patri-tag svg { width:9px; height:9px; flex-shrink:0; }
.patri-tag:hover { transform:translateY(-1px); }
.patri-tag.sin   { background:rgba(220,38,38,.11);  color:#DC2626; border-color:rgba(220,38,38,.24); }
.patri-tag.sin:hover   { box-shadow:0 3px 10px rgba(220,38,38,.22); }
/* O TIPO (Colisão, Roubo) vem depois do status, em segundo plano: o que decide se alguém
   precisa agir é o andamento; o tipo é o detalhe que explica. */
.patri-tag i { font-style:normal; opacity:.72; font-weight:700;
  padding-left:5px; margin-left:4px; border-left:1px solid currentColor; }
/* Sinistro LIQUIDADO continua vermelho (a apólice é sinistrada), mas apagado e sem pulsar —
   já não pede ação nenhuma, e na busca precisa se distinguir do que ainda está rolando. */
.patri-tag.sin.liquidado { background:rgba(220,38,38,.06); color:#B91C1C; border-color:rgba(220,38,38,.16); opacity:.82; }
.patri-tag.sin.liquidado:hover { opacity:1; box-shadow:0 3px 10px rgba(185,28,28,.16); }
body.dark .patri-tag.sin.liquidado { color:#FCA5A5; background:rgba(252,165,165,.08); border-color:rgba(252,165,165,.2); }
.patri-tag.atend { background:rgba(180,83,9,.11);   color:#B45309; border-color:rgba(180,83,9,.24); }
.patri-tag.atend:hover { box-shadow:0 3px 10px rgba(180,83,9,.2); }
/* Pulso lento SÓ quando existe ocorrência em aberto: numa lista de 200 apólices, tudo
   piscando vira ruído e ninguém olha mais para nenhuma. */
.patri-tag.sin.aberto { animation:patriTagPulso 2.6s ease-in-out infinite; }
@keyframes patriTagPulso {
  0%, 100% { box-shadow:0 0 0 0 rgba(220,38,38,.32); }
  55%      { box-shadow:0 0 0 5px rgba(220,38,38,0); }
}
body.dark .patri-tag.sin   { color:#F87171; background:rgba(248,113,113,.14); border-color:rgba(248,113,113,.3); }
body.dark .patri-tag.atend { color:#FBBF24; background:rgba(251,191,36,.14); border-color:rgba(251,191,36,.3); }

/* Aba "Sinistros/Atendimentos" dentro da ficha da apólice */
.apx-atend-nota { display:flex; align-items:flex-start; gap:8px; font-size:11.5px; line-height:1.45;
  color:var(--text-main); background:rgba(180,83,9,.08); border:1px solid rgba(180,83,9,.22);
  border-radius:10px; padding:9px 12px; margin-bottom:10px; animation:apxSobe .3s ease both; }
.apx-atend-nota svg { color:#B45309; flex-shrink:0; margin-top:1px; }
/* O cartão NÃO é clicável inteiro: quem abre são os botões Capa e Dados do sinistro, para
   não haver dúvida sobre o que cada clique faz. */
.apx-sin-card { border:1px solid var(--border-color); border-left:3px solid var(--sin-cor,#DC2626);
  border-radius:11px; background:var(--bg-page); padding:11px 13px; margin-bottom:8px;
  animation:apxSobe .3s ease both; transition:box-shadow .16s, border-color .16s; }
.apx-sin-card:hover { box-shadow:0 6px 18px rgba(15,23,42,.08); border-color:var(--sin-cor,#DC2626); }
.apx-sin-card:nth-child(2) { animation-delay:.04s; }
.apx-sin-card:nth-child(3) { animation-delay:.08s; }
.apx-sin-card:nth-child(4) { animation-delay:.12s; }
.apx-sin-top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.apx-sin-tipo { font-size:9px; font-weight:800; letter-spacing:.05em; padding:2px 8px; border-radius:6px; }
.apx-sin-st   { font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:6px; }
.apx-sin-num  { font-size:10.5px; color:var(--text-muted); font-weight:600; }
.apx-sin-desc { font-size:12px; color:var(--text-main); margin-top:6px; line-height:1.45; }
.apx-sin-pe { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:10.5px; color:var(--text-muted); }
.apx-sin-pe b { color:var(--text-main); font-weight:700; }
/* Resumo em colunas (Andressa, 19/08/2026): Capa, data e hora, nº do sinistro e tipo de
   ocorrência. A descrição longa saiu daqui — ela vive na ficha do sinistro, a um clique. */
.apx-sin-resumo { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:8px 16px;
  margin-top:9px; padding-top:9px; border-top:1px dashed var(--border-color); }
.apx-sin-cel { min-width:0; display:flex; flex-direction:column; gap:2px; }
.apx-sin-cel .r { font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); }
.apx-sin-cel .v { font-size:12px; font-weight:700; color:var(--text-main); line-height:1.35; overflow-wrap:anywhere; }
.apx-sin-cel .v.vazio { font-weight:500; color:var(--text-muted); opacity:.7; }
.apx-sin-acoes { margin-left:auto; display:flex; gap:6px; }
.apx-sin-bt { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  padding:4px 10px; border-radius:8px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-muted);
  transition:transform .15s cubic-bezier(.2,.8,.3,1), box-shadow .15s, color .15s, border-color .15s, background .15s; }
.apx-sin-bt svg { width:11px; height:11px; }
.apx-sin-bt:hover { transform:translateY(-1px); color:var(--sin-cor,#DC2626); border-color:var(--sin-cor,#DC2626); }
.apx-sin-bt.dados { background:var(--sin-cor,#DC2626); border-color:var(--sin-cor,#DC2626); color:#fff; }
.apx-sin-bt.dados:hover { color:#fff; box-shadow:0 6px 16px color-mix(in srgb, var(--sin-cor,#DC2626) 34%, transparent); }
.apx-sin-bt.dados:hover svg { transform:translateX(2px); }
.apx-sin-bt svg { transition:transform .15s; }
@media (max-width:560px) { .apx-sin-acoes { margin-left:0; width:100%; } }
@media (prefers-reduced-motion:reduce) {
  .patri-tag, .patri-tag.sin.aberto, .apx-sin-card, .apx-atend-nota { animation:none !important; transition:none !important; }
}

/* ── Apólice COLETIVA: um cartão por item (RE com vários bens, frota de automóveis) ──
   Cada item é uma "mini ficha" dentro do quadro Itens da apólice; a barra de coberturas
   logo abaixo diz de qual item são as linhas que estão na tela. */
.cae-item { border:1px solid var(--border-color); border-radius:10px; background:var(--bg-card);
  padding:9px 11px 11px; margin-bottom:8px; animation:apxSobe .22s ease both; }
.cae-item-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
.cae-item-n { display:inline-block; background:#1A4F9C; color:#fff; border-radius:6px; padding:2px 9px;
  font-size:10px; font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.cae-item-x { background:none; border:none; color:#EF4444; cursor:pointer; padding:3px 5px; line-height:0;
  border-radius:6px; transition:background .15s; }
.cae-item-x:hover { background:rgba(239,68,68,.12); }
.cae-item-qt { display:inline-block; margin-left:6px; font-size:10px; background:var(--border-color);
  color:var(--text-muted); border-radius:20px; padding:1px 7px; font-weight:800; }
.cae-cob-tab { padding:4px 11px; font-size:11px; font-weight:700; color:var(--text-muted); cursor:pointer;
  background:var(--bg-card); border:1px solid var(--border-color); border-radius:8px; white-space:nowrap;
  transition:color .15s, background .15s, border-color .15s; }
.cae-cob-tab:hover { color:var(--text-main); border-color:#94A3B8; }
.cae-cob-tab.on { color:#fff; background:#1A4F9C; border-color:#1A4F9C; }
.cae-cob-tab .qt { display:inline-block; margin-left:5px; font-size:9.5px; background:var(--border-color);
  color:var(--text-muted); border-radius:20px; padding:0 5px; font-weight:800; }
.cae-cob-tab.on .qt { background:rgba(255,255,255,.26); color:#fff; }

body.dark .cae-item-n { background:#7FA9E8; color:#0F172A; }
body.dark .cae-cob-tab.on { background:#7FA9E8; border-color:#7FA9E8; color:#0F172A; }
body.dark .cae-cob-tab.on .qt { background:rgba(15,23,42,.22); color:#0F172A; }
@media (prefers-reduced-motion:reduce) { .cae-item { animation:none !important; } }

body.dark .apx-bloco-t { color:#7FA9E8; }
body.dark .apx-aba.on { color:#7FA9E8; }
body.dark .apx-aba.on::after { background:#7FA9E8; }
body.dark .apx-aba.on .qt { background:#7FA9E8; color:#0F172A; }
body.dark .apx-rod-i.total .v { color:#7FA9E8; }

@keyframes apxFade { from { opacity:0; } to { opacity:1; } }
@keyframes apxIn { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes apxSobe { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes apxLinha { from { transform:scaleX(.2); opacity:0; } to { transform:scaleX(1); opacity:1; } }

@media (max-width:900px) {
  .apx-grid { grid-template-columns:1fr; }
  .apx-corpo { padding:14px 15px 4px; max-height:calc(100vh - 300px); }
  .apx-top, .apx-acoes, .apx-rod { padding-left:15px; padding-right:15px; }
}
@media (prefers-reduced-motion:reduce) {
  .apx, .apx-bloco, .apx-pane, .apx-ov, .apx-aba.on::after { animation:none !important; }
}

/* topo da etapa 1: titulo a esquerda, botao Puxar do Y: a direita */
.lay-topo-etapa { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lay-topo-etapa > .lay-secao { flex:1; min-width:240px; }

/* arquivo gerado sem nenhum dependente: quase sempre e documento faltando */
.lay-aviso-zero { margin-top:12px; padding:10px 14px; border-radius:10px; text-align:left;
  background:rgba(245,158,11,.10); border-left:3px solid #F59E0B; color:var(--text-main);
  font-size:11.8px; line-height:1.6; }
.lay-aviso-zero b { color:#B45309; }
body.dark .lay-aviso-zero b { color:#FBBF24; }

/* arquivos guardados do mes: evita reenviar tudo a cada rodada */
.lay-guardados { margin-bottom:14px; padding:13px 15px; border-radius:12px;
  background:rgba(99,102,241,.07); border:1px solid rgba(99,102,241,.24);
  animation:layIn .35s cubic-bezier(.22,1,.36,1) both; }
.lay-guardados-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:#4F46E5; }
.lay-guardados-h b { font-size:12.4px; font-weight:800; }
.lay-guardados-h span { font-size:10.8px; color:var(--text-muted); font-weight:600; }
.lay-guardados-itens { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.lay-guardado { font-size:10.6px; font-weight:700; padding:4px 9px; border-radius:999px;
  background:rgba(99,102,241,.13); color:#4F46E5; }
.lay-guardado.sem { background:rgba(148,163,184,.18); color:var(--text-muted); font-weight:600; }
.lay-guardados-acoes { display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap; }
.lay-guardados-acoes .lay-btn.small { margin-top:0; }
.lay-guardados-nota { font-size:10.8px; color:var(--text-muted); flex:1; min-width:180px; }
body.dark .lay-guardados-h, body.dark .lay-guardado { color:#A5B4FC; }

/* so um arquivo para baixar: nao estica o card na largura toda */
.lay-downloads.um { grid-template-columns:minmax(320px,560px); justify-content:center; }

/* ── Layouts: conferência dos termos ─────────────────────────────────────────
   Cada arquivo enviado cai numa caixinha. Entra contando, para a leitura ser do
   número e não do texto. */
.lay-balanco .lay-bal-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px; margin-top:12px;
}
.lay-bal-cx{
  background:rgba(255,255,255,.55); border:1px solid rgba(148,163,184,.30);
  border-radius:12px; padding:12px 10px; text-align:center;
  animation:layBalIn .42s cubic-bezier(.22,.9,.28,1) backwards;
  animation-delay:calc(var(--i,0) * 60ms);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lay-bal-cx:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(15,23,42,.10);
  border-color:rgba(59,130,246,.45);
}
.lay-bal-cx.zero{ opacity:.55; }
.lay-bal-n{
  display:block; font-size:24px; font-weight:700; line-height:1.1;
  color:#1E3A8A; font-variant-numeric:tabular-nums;
}
.lay-bal-cx.zero .lay-bal-n{ color:#94A3B8; }
.lay-bal-r{ display:block; margin-top:3px; font-size:11.5px; color:#64748B; }
@keyframes layBalIn{
  from{ opacity:0; transform:translateY(8px) scale(.97); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .lay-bal-cx{ animation:none; }
}

/* ══ Comparativo Mensal (Saúde) ═══════════════════════════════════════════════
   Mesma linguagem visual da aba Layouts: cabeçalho com ícone, chip de estado,
   KPIs que entram escalonados e zonas de upload que mudam de cara quando
   recebem o arquivo. */
.cmp-card{ position:relative; overflow:hidden; }
.cmp-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,#8B5CF6,#6366F1 45%,#10B981);
  opacity:.85;
}

.cmp-head{ display:flex; align-items:center; gap:11px; margin-bottom:15px; }
.cmp-head-ic{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,#8B5CF6,#6D28D9);
  box-shadow:0 6px 16px rgba(139,92,246,.30);
}
.cmp-head-tx{ min-width:0; flex:1; }
.cmp-head-tx h3{ margin:0; font-size:14.5px; font-weight:700; color:var(--text-main); }
.cmp-head-tx p{ margin:2px 0 0; font-size:11.5px; color:var(--text-muted); line-height:1.45; }

.cmp-chip{
  flex-shrink:0; font-size:10.5px; font-weight:600; padding:4px 10px; border-radius:999px;
  background:rgba(148,163,184,.16); color:#64748B; border:1px solid rgba(148,163,184,.28);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.cmp-chip.ok   { background:rgba(16,185,129,.14); color:#059669; border-color:rgba(16,185,129,.35); }
.cmp-chip.aviso{ background:rgba(245,158,11,.14); color:#B45309; border-color:rgba(245,158,11,.35); }
.cmp-chip.erro { background:rgba(239,68,68,.14);  color:#DC2626; border-color:rgba(239,68,68,.35); }
.cmp-chip.proc { background:rgba(139,92,246,.14); color:#7C3AED; border-color:rgba(139,92,246,.35);
                 animation:cmpPulse 1.4s ease-in-out infinite; }
@keyframes cmpPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

.cmp-empresa{
  padding:10px 14px; border-radius:10px; margin-bottom:13px;
  background:var(--bg-page); border:1px solid var(--border-color);
  font-size:11px; color:var(--text-muted); line-height:1.6;
  animation:cmpSobe .4s cubic-bezier(.22,.9,.28,1) backwards;
}

/* ── KPIs ── */
.cmp-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
  gap:11px; margin-bottom:17px;
}
.cmp-kpi{
  position:relative; padding:13px 12px 12px; border-radius:12px; text-align:center;
  border:1px solid var(--border-color); background:var(--bg-page); overflow:hidden;
  animation:cmpSobe .45s cubic-bezier(.22,.9,.28,1) backwards;
  animation-delay:calc(var(--i,0) * 70ms);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cmp-kpi::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2.5px;
  background:currentColor; opacity:.55;
}
.cmp-kpi:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(15,23,42,.10); }
.cmp-kpi.verde   { color:#10B981; }
.cmp-kpi.vermelho{ color:#EF4444; }
.cmp-kpi.roxo    { color:#8B5CF6; }
.cmp-kpi.ambar   { color:#F59E0B; }
.cmp-kpi.verde:hover   { border-color:rgba(16,185,129,.45); }
.cmp-kpi.vermelho:hover{ border-color:rgba(239,68,68,.45); }
.cmp-kpi.roxo:hover    { border-color:rgba(139,92,246,.45); }
.cmp-kpi.ambar:hover   { border-color:rgba(245,158,11,.45); }
.cmp-kpi-ic{
  width:26px; height:26px; margin:0 auto 6px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.cmp-kpi.verde    .cmp-kpi-ic{ background:#10B981; }
.cmp-kpi.vermelho .cmp-kpi-ic{ background:#EF4444; }
.cmp-kpi.roxo     .cmp-kpi-ic{ background:#8B5CF6; }
.cmp-kpi.ambar    .cmp-kpi-ic{ background:#F59E0B; }
.cmp-kpi-n{
  font-size:23px; font-weight:800; line-height:1.05; color:currentColor;
  font-variant-numeric:tabular-nums;
}
.cmp-kpi-r{ margin-top:3px; font-size:10.5px; color:var(--text-muted); line-height:1.3; }

/* ── zonas de upload ── */
.cmp-zonas{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:15px; }
@media (max-width:640px){ .cmp-zonas{ grid-template-columns:1fr; } }
/* min-width:0 para nome de arquivo comprido nao esticar a coluna do grid */
.cmp-zona-wrap{ min-width:0; }
.cmp-zona-tit{
  font-size:10px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px;
}
.cmp-zona-tit small{ text-transform:none; letter-spacing:0; font-weight:500; opacity:.75; }
.cmp-zona{
  position:relative; border:2px dashed var(--border-color); border-radius:12px;
  padding:17px 12px; text-align:center; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.cmp-zona:hover{ border-color:#A78BFA; transform:translateY(-1px); }
.cmp-zona.drag{
  border-color:#8B5CF6; background:rgba(139,92,246,.07);
  animation:cmpBate .5s ease-in-out infinite;
}
@keyframes cmpBate{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.015) } }
.cmp-zona.cheio{ border-style:solid; border-color:#8B5CF6; background:rgba(139,92,246,.06); }
.cmp-zona-ic{ color:var(--text-muted); transition:color .2s ease, transform .3s ease; }
.cmp-zona.cheio .cmp-zona-ic{ color:#8B5CF6; transform:translateY(-1px); }
.cmp-zona-lbl{ font-size:11.5px; color:var(--text-muted); margin-top:5px; word-break:break-word; }
.cmp-zona-fmt{ font-size:10px; color:var(--text-muted); opacity:.7; margin-top:2px; }
.cmp-zona.cheio .cmp-zona-fmt{ display:none; }
.cmp-arq{ display:block; font-weight:600; color:#7C3AED; font-size:11.5px; }
.cmp-arq-meta{ display:block; margin-top:2px; font-size:10px; color:var(--text-muted); }

/* ── ações ── */
.cmp-acoes{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.cmp-btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 18px;
  border:none; border-radius:9px; font-size:12px; font-weight:600; color:#fff;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cmp-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.cmp-btn:active{ transform:translateY(0); }
.cmp-btn.primario{ background:linear-gradient(135deg,#8B5CF6,#6D28D9); box-shadow:0 6px 16px rgba(139,92,246,.32); }
.cmp-btn.verde   { background:linear-gradient(135deg,#10B981,#059669); box-shadow:0 6px 16px rgba(16,185,129,.30); }
.cmp-btn.carregando{ pointer-events:none; opacity:.72; }
.cmp-btn.carregando svg{ animation:cmpGira 1s linear infinite; }
@keyframes cmpGira{ to{ transform:rotate(360deg) } }

/* ── carregando e erro ── */
.cmp-carregando{ text-align:center; padding:30px 16px; animation:cmpSobe .3s ease backwards; }
.cmp-spin{
  width:26px; height:26px; margin:0 auto 11px; border-radius:50%;
  border:2.5px solid rgba(139,92,246,.22); border-top-color:#8B5CF6;
  animation:cmpGira .8s linear infinite;
}
.cmp-carregando-tx { font-size:12.5px; color:var(--text-main); font-weight:600; }
.cmp-carregando-sub{ font-size:11px; color:var(--text-muted); margin-top:3px; }
.cmp-erro{
  display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:11px;
  background:rgba(239,68,68,.09); border:1px solid rgba(239,68,68,.30); color:#B91C1C;
  font-size:12px; line-height:1.5; animation:cmpSobe .35s cubic-bezier(.22,.9,.28,1) backwards;
}
.cmp-erro svg{ flex-shrink:0; margin-top:1px; }
.cmp-erro b{ display:block; margin-bottom:2px; }

@keyframes cmpSobe{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .cmp-kpi,.cmp-empresa,.cmp-carregando,.cmp-erro{ animation:none; }
  .cmp-zona.drag,.cmp-chip.proc{ animation:none; }
}

/* ── Comparativo: estado vazio ── */
.cmp-vazio{
  text-align:center; padding:26px 18px 22px;
  animation:cmpSobe .4s cubic-bezier(.22,.9,.28,1) backwards;
}
.cmp-vazio-ic{
  width:52px; height:52px; margin:0 auto 11px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  color:#8B5CF6; background:rgba(139,92,246,.10);
  border:1px solid rgba(139,92,246,.22);
}
.cmp-vazio-ic.ok{ color:#059669; background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.25); }
.cmp-vazio-tit{ font-size:13px; font-weight:700; color:var(--text-main); }
.cmp-vazio-sub{
  font-size:11.5px; color:var(--text-muted); margin-top:4px;
  max-width:430px; margin-left:auto; margin-right:auto; line-height:1.55;
}
.cmp-passos{
  list-style:none; margin:16px auto 0; padding:0;
  max-width:430px; display:flex; flex-direction:column; gap:8px; text-align:left;
}
.cmp-passos li{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; border-radius:10px;
  background:var(--bg-page); border:1px solid var(--border-color);
  animation:cmpSobe .42s cubic-bezier(.22,.9,.28,1) backwards;
  animation-delay:calc(var(--i,0) * 80ms + 120ms);
  transition:border-color .18s ease, transform .18s ease;
}
.cmp-passos li:hover{ border-color:rgba(139,92,246,.40); transform:translateX(2px); }
.cmp-passo-n{
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#8B5CF6,#6D28D9);
}
.cmp-passos b{ display:block; font-size:11.5px; color:var(--text-main); font-weight:600; }
.cmp-passos small{ display:block; margin-top:1px; font-size:10.5px; color:var(--text-muted); line-height:1.45; }
@media (prefers-reduced-motion:reduce){
  .cmp-vazio,.cmp-passos li{ animation:none; }
}

/* ============================================================
   LOGIN: botão de olho para revelar a senha
   O campo de senha ganha espaço à direita e o botão fica
   ancorado dentro da moldura (o .login-field já é relative).
   ============================================================ */
.login-field.tem-olho input { padding-right:48px; }
.login-eye {
  position:absolute; right:6px; bottom:5px;
  width:36px; height:36px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:9px;
  color:#8494b0; cursor:pointer;
  transition:color .2s ease, background .2s ease;
}
.login-eye:hover { color:var(--blue); background:rgba(26,79,156,0.08); }
.login-eye:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.login-eye svg { width:19px; height:19px; display:block; }
.login-eye .olho-off { display:none; }
.login-eye.revelado .olho-on  { display:none; }
.login-eye.revelado .olho-off { display:block; }

/* ── Comparativo: o que foi lido de cada arquivo ── */
.cmp-leitura{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:13px;
  padding:10px 12px; border-radius:10px;
  background:var(--bg-page); border:1px solid var(--border-color);
  animation:cmpSobe .4s cubic-bezier(.22,.9,.28,1) backwards;
}
.cmp-leitura.alerta{
  background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.35);
}
.cmp-leitura-item{
  display:flex; flex-direction:column; min-width:0;
  padding:2px 12px 2px 0; font-size:11.5px; color:var(--text-muted);
  border-right:1px solid var(--border-color);
}
.cmp-leitura-item:last-of-type{ border-right:none; }
.cmp-leitura-item b{ color:var(--text-main); font-size:13px; font-variant-numeric:tabular-nums; }
.cmp-leitura-item i{ font-style:normal; }
.cmp-leitura-item small{
  font-size:10px; opacity:.75; margin-top:1px;
  max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmp-leitura-item.zero b{ color:#B45309; }
.cmp-leitura-aviso{
  flex-basis:100%; margin-top:6px; padding-top:8px;
  border-top:1px solid rgba(245,158,11,.30);
  font-size:11.5px; color:#92400E; line-height:1.5;
}

/* O que a leitura DESCARTOU precisa ficar visivel: linha sem CPF nao entra na
   comparacao, e antes isso sumia sem deixar rastro (KATION, 24/08/2026). */
.cmp-leitura-item.parcial b{ color:#B45309; }
.cmp-fora{ color:#B45309 !important; opacity:1 !important; font-weight:700; }
.cmp-fonte-img{
  color:#6D28D9 !important; opacity:1 !important; font-weight:700;
}
.cmp-avisos{ margin:6px 0 0; padding-left:17px; }
.cmp-avisos li{ margin-top:4px; line-height:1.5; }
@media (prefers-reduced-motion:reduce){ .cmp-leitura{ animation:none; } }

/* ── Comparativo: KPI que filtra ao ser clicado ── */
.cmp-kpi[data-secao]{ cursor:pointer; }
.cmp-kpi[data-secao]::before{
  content:''; position:absolute; inset:0; border-radius:12px;
  background:currentColor; opacity:0; transition:opacity .18s ease;
  pointer-events:none;
}
.cmp-kpi[data-secao]:hover::before{ opacity:.06; }
.cmp-kpi.ativo{
  border-color:currentColor;
  box-shadow:0 0 0 2px currentColor inset, 0 8px 20px rgba(15,23,42,.10);
}
.cmp-kpi.ativo::before{ opacity:.10; }
.cmp-kpi.ativo::after{ opacity:1; height:3.5px; }
.cmp-kpi.ativo .cmp-kpi-r::after{
  content:' · filtrando'; font-weight:600; color:currentColor;
}

/* ── Termos: campo da planilha de não optantes ────────────────────────────────
   Fica embaixo da zona de drop dos termos. Discreto porque é opcional: sem ele
   a análise roda igual, com ele a tela também confere pasta x planilha. */
.tnop-plan{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin-bottom:12px; border-radius:10px; cursor:pointer;
  border:1px dashed var(--border-color); background:var(--bg-page);
  color:var(--text-muted);
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.tnop-plan:hover{ border-color:#06B6D4; color:#0891B2; }
.tnop-plan.drag{ border-color:#06B6D4; background:rgba(6,182,212,.07); }
.tnop-plan.cheio{
  border-style:solid; border-color:#06B6D4;
  background:rgba(6,182,212,.06); color:#0891B2;
}
.tnop-plan-tx{ min-width:0; flex:1; line-height:1.35; }
.tnop-plan-tx b{ font-size:12px; color:var(--text-main); font-weight:700; }
.tnop-plan-tx i{ font-style:normal; font-size:10px; opacity:.7; }
.tnop-plan-tx span{
  display:block; font-size:11px; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tnop-plan.cheio .tnop-plan-tx span{ font-weight:600; }
.tnop-plan-x{
  flex-shrink:0; width:22px; height:22px; border-radius:6px; cursor:pointer;
  border:1px solid var(--border-color); background:var(--bg-card);
  color:var(--text-muted); font-size:15px; line-height:1;
  display:none; align-items:center; justify-content:center;
}
.tnop-plan.cheio .tnop-plan-x{ display:flex; }
.tnop-plan-x:hover{ border-color:#EF4444; color:#EF4444; }

/* ── Termos: seletor do tipo de termo ─────────────────────────────────────────
   Cada tipo se confere de um jeito, então a barra corta o lote antes de tudo. */
.tcat-barra{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px dashed var(--border-color);
}
.tcat{
  --cor:#06B6D4;
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:8px 14px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border-color); background:var(--bg-page);
  color:var(--cor); min-width:104px;
  animation:tcatEntra .35s cubic-bezier(.22,.9,.28,1) backwards;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.tcat:nth-child(1){ animation-delay:0ms }   .tcat:nth-child(2){ animation-delay:45ms }
.tcat:nth-child(3){ animation-delay:90ms }  .tcat:nth-child(4){ animation-delay:135ms }
.tcat:nth-child(5){ animation-delay:180ms } .tcat:nth-child(6){ animation-delay:225ms }
.tcat:hover{ transform:translateY(-2px); border-color:var(--cor); box-shadow:0 8px 18px rgba(15,23,42,.09); }
.tcat.ativo{
  background:color-mix(in srgb, var(--cor) 12%, transparent);
  border-color:var(--cor);
  box-shadow:0 0 0 1px var(--cor) inset;
}
.tcat.zero{ opacity:.5; }
.tcat-n{ font-size:18px; font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums; }
.tcat-r{ font-size:10.5px; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.tcat.ativo .tcat-r{ color:var(--cor); }
@keyframes tcatEntra{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:none } }

.tcat-dica{
  margin:-4px 0 14px; padding:9px 12px; border-radius:9px;
  background:var(--bg-page); border:1px solid var(--border-color);
  font-size:11.5px; color:var(--text-muted); line-height:1.5;
  animation:tcatEntra .3s ease backwards;
}
@media (prefers-reduced-motion:reduce){ .tcat, .tcat-dica{ animation:none } }

/* ── Menu em cascata ──────────────────────────────────────────────────────────
   A lista da Saúde chegou a 20 linhas e não cabia na tela. Agora os assuntos
   próximos ficam num item só, com seta, e o submenu abre AO LADO no hover (e no
   clique, para o celular, que não tem hover). */
.nav-dropdown.nav-cascata{ overflow:visible; }   /* senão o submenu é cortado */

.nav-pai{ justify-content:space-between; padding-right:8px; }
.nav-pai > .nav-flecha{
  margin-left:auto; flex-shrink:0; opacity:.55;
  transition:transform .16s ease, opacity .16s ease;
}
.nav-pai.aberto > .nav-flecha{ opacity:1; transform:translateX(2px); }

.nav-flyout{
  position:absolute; top:-5px; left:100%; margin-left:4px;
  min-width:196px; padding:5px; z-index:210;
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:12px; box-shadow:0 10px 34px rgba(0,0,0,.20);
  opacity:0; pointer-events:none; transform:translateX(-6px) scale(.985);
  transform-origin:left center;
  transition:opacity .15s ease, transform .15s cubic-bezier(.22,.9,.28,1);
}
.nav-pai.aberto > .nav-flyout{
  opacity:1; pointer-events:auto; transform:translateX(0) scale(1);
}
/* a ponte invisível cobre a folga entre o item e o submenu: sem ela o mouse
   passa pelo vão e o submenu some no meio do caminho */
.nav-pai > .nav-flyout::before{
  content:''; position:absolute; top:0; bottom:0; left:-8px; width:8px;
}
.nav-flyout .nav-item{ animation:navFly .22s ease backwards; }
.nav-flyout .nav-item:nth-child(1){ animation-delay:10ms }
.nav-flyout .nav-item:nth-child(2){ animation-delay:30ms }
.nav-flyout .nav-item:nth-child(3){ animation-delay:50ms }
.nav-flyout .nav-item:nth-child(4){ animation-delay:70ms }
.nav-flyout .nav-item:nth-child(5){ animation-delay:90ms }
.nav-flyout .nav-item:nth-child(6){ animation-delay:110ms }
@keyframes navFly{ from{ opacity:0; transform:translateX(-5px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  .nav-flyout, .nav-flyout .nav-item{ animation:none; transition:opacity .1s ease; }
}

/* ══ Dashboard da Saúde ═══════════════════════════════════════════════════════
   O antigo eram quatro números soltos e uma lista fixa. Aqui os blocos entram
   escalonados, os números sobem contando e a etapa do mês em que a equipe está
   fica acesa. */
.sdash{ display:flex; flex-direction:column; gap:16px; }

/* ── cabeçalho ── */
.sdash-topo{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:18px 20px; border-radius:16px; color:#fff;
  background:linear-gradient(120deg,#0EA5E9 0%,#6366F1 55%,#8B5CF6 100%);
  box-shadow:0 12px 30px rgba(99,102,241,.28);
  animation:sdIn .5s cubic-bezier(.22,.9,.28,1) backwards;
  position:relative; overflow:hidden;
}
.sdash-topo::after{
  content:''; position:absolute; right:-60px; top:-80px;
  width:230px; height:230px; border-radius:50%;
  background:rgba(255,255,255,.10);
}
.sdash-topo-tx{ flex:1; min-width:180px; position:relative; }
.sdash-topo-tx h2{ margin:0; font-size:20px; font-weight:800; letter-spacing:-.2px; }
.sdash-topo-tx p{ margin:3px 0 0; font-size:12.5px; opacity:.88; }
.sdash-mes{ position:relative; min-width:190px; }
.sdash-mes-barra{
  height:7px; border-radius:999px; background:rgba(255,255,255,.28); overflow:hidden;
}
.sdash-mes-barra i{
  display:block; height:100%; border-radius:999px; background:#fff;
  animation:sdCresce 1s cubic-bezier(.22,.9,.28,1) backwards; animation-delay:.2s;
}
.sdash-mes span{ display:block; margin-top:5px; font-size:11px; opacity:.9; text-align:right; }
@keyframes sdCresce{ from{ width:0 !important } }

/* ── carteira ── */
.sdash-cart{
  background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px;
  padding:18px 20px; animation:sdIn .5s cubic-bezier(.22,.9,.28,1) backwards; animation-delay:.06s;
}
.sdash-cart-cab{ display:flex; align-items:center; gap:11px; margin-bottom:15px; flex-wrap:wrap; }
.sdash-cart-ic{
  width:36px; height:36px; border-radius:11px; flex-shrink:0; color:#fff;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#EC4899,#BE185D);
  box-shadow:0 6px 16px rgba(236,72,153,.28);
}
.sdash-cart-ic svg{ width:19px; height:19px; }
.sdash-cart-cab h3{ margin:0; font-size:14px; font-weight:700; color:var(--text-main); }
.sdash-cart-cab p{ margin:1px 0 0; font-size:11.5px; color:var(--text-muted); }
.sdash-cart-btn{
  margin-left:auto; padding:7px 14px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border-color); background:var(--bg-page);
  color:var(--text-main); font-size:11.5px; font-weight:600;
  transition:border-color .16s ease, color .16s ease, transform .16s ease;
}
.sdash-cart-btn:hover{ border-color:#EC4899; color:#BE185D; transform:translateY(-1px); }

.sdash-cart-nums{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:12px;
}
.sdash-num{
  padding:11px 12px; border-radius:12px;
  background:var(--bg-page); border:1px solid var(--border-color);
  transition:transform .18s ease, border-color .18s ease;
}
.sdash-num:hover{ transform:translateY(-2px); border-color:rgba(236,72,153,.35); }
.sdash-num.destaque{
  background:linear-gradient(135deg,rgba(236,72,153,.10),rgba(139,92,246,.10));
  border-color:rgba(236,72,153,.30);
}
.sdash-num-n{
  display:block; font-size:21px; font-weight:800; line-height:1.1;
  color:var(--text-main); font-variant-numeric:tabular-nums;
}
.sdash-num.destaque .sdash-num-n{ font-size:18px; color:#BE185D; }
.sdash-num-r{ display:block; margin-top:2px; font-size:11px; color:var(--text-muted); }

.sdash-ramo{ margin-top:14px; }
.sdash-ramo-barra{
  display:flex; height:10px; border-radius:999px; overflow:hidden;
  background:var(--bg-page); border:1px solid var(--border-color);
}
.sdash-ramo-barra i{ display:block; animation:sdCresce .9s cubic-bezier(.22,.9,.28,1) backwards; animation-delay:.3s; }
.sdash-ramo-barra i.saude { background:linear-gradient(90deg,#06B6D4,#0EA5E9); }
.sdash-ramo-barra i.odonto{ background:linear-gradient(90deg,#8B5CF6,#A855F7); }
.sdash-ramo-leg{ display:flex; gap:16px; margin-top:7px; font-size:11.5px; color:var(--text-muted); }
.sdash-ramo-leg b{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; }
.sdash-ramo-leg b.saude { background:#0EA5E9; }
.sdash-ramo-leg b.odonto{ background:#8B5CF6; }
.sdash-ramo-leg i{ font-style:normal; font-weight:700; color:var(--text-main); margin-left:4px; }

/* ── KPIs ── */
.sdash-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.sdash-kpi{
  position:relative; overflow:hidden; cursor:pointer;
  padding:16px 16px 14px; border-radius:16px;
  background:var(--bg-card); border:1px solid var(--border-color);
  animation:sdIn .5s cubic-bezier(.22,.9,.28,1) backwards;
  animation-delay:calc(var(--i,0) * 70ms + .1s);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sdash-kpi::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:currentColor; opacity:.6;
}
.sdash-kpi:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(15,23,42,.12); border-color:currentColor; }
.sdash-kpi.verde { color:#10B981; } .sdash-kpi.azul { color:#3B82F6; }
.sdash-kpi.roxo  { color:#8B5CF6; } .sdash-kpi.ambar{ color:#F59E0B; }
.sdash-kpi-ic{
  width:34px; height:34px; border-radius:11px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center;
  background:currentColor; color:#fff;
}
.sdash-kpi.verde  .sdash-kpi-ic{ background:linear-gradient(135deg,#10B981,#059669); }
.sdash-kpi.azul   .sdash-kpi-ic{ background:linear-gradient(135deg,#3B82F6,#1D4ED8); }
.sdash-kpi.roxo   .sdash-kpi-ic{ background:linear-gradient(135deg,#8B5CF6,#6D28D9); }
.sdash-kpi.ambar  .sdash-kpi-ic{ background:linear-gradient(135deg,#F59E0B,#B45309); }
.sdash-kpi-ic svg{ width:17px; height:17px; }
.sdash-kpi-n{
  font-size:29px; font-weight:800; line-height:1; color:currentColor;
  font-variant-numeric:tabular-nums;
}
.sdash-kpi-r{ margin-top:5px; font-size:12.5px; font-weight:600; color:var(--text-main); }
.sdash-kpi-s{ margin-top:1px; font-size:11px; color:var(--text-muted); }

/* ── blocos ── */
.sdash-duas{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .sdash-duas{ grid-template-columns:1fr; } }
.sdash-bloco{
  background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px;
  padding:18px 20px;
  animation:sdIn .5s cubic-bezier(.22,.9,.28,1) backwards; animation-delay:.32s;
}
.sdash-bloco-cab{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.sdash-bloco-cab svg{ width:16px; height:16px; flex-shrink:0; }
.sdash-bloco-cab span{ font-size:13px; font-weight:700; color:var(--text-main); }

/* ── etapas do mês ── */
.sdash-linha{ position:relative; padding-left:20px; }
.sdash-linha::before{
  content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px;
  background:var(--border-color); border-radius:2px;
}
.sdash-etapa{
  position:relative; display:flex; align-items:flex-start; gap:10px;
  padding:8px 10px 8px 0; cursor:pointer; border-radius:9px;
  animation:sdIn .45s ease backwards; animation-delay:calc(var(--i,0) * 60ms + .36s);
  transition:background .16s ease, transform .16s ease;
}
.sdash-etapa:hover{ background:var(--bg-page); transform:translateX(2px); }
.sdash-etapa-pt{
  position:absolute; left:-20px; top:12px; width:12px; height:12px; border-radius:50%;
  background:var(--bg-card); border:2px solid var(--border-color);
}
.sdash-etapa.feito .sdash-etapa-pt{ background:#10B981; border-color:#10B981; }
.sdash-etapa.agora .sdash-etapa-pt{
  background:#0EA5E9; border-color:#0EA5E9;
  box-shadow:0 0 0 4px rgba(14,165,233,.20);
  animation:sdPulsa 1.8s ease-in-out infinite;
}
@keyframes sdPulsa{
  0%,100%{ box-shadow:0 0 0 4px rgba(14,165,233,.20) }
  50%    { box-shadow:0 0 0 8px rgba(14,165,233,.08) }
}
.sdash-etapa-tx{ flex:1; min-width:0; }
.sdash-etapa-tx b{ display:block; font-size:12.5px; font-weight:700; color:var(--text-main); }
.sdash-etapa-tx b small{ font-weight:500; font-size:10.5px; color:var(--text-muted); margin-left:5px; }
.sdash-etapa-tx span{ display:block; font-size:11px; color:var(--text-muted); margin-top:1px; line-height:1.45; }
.sdash-etapa.feito .sdash-etapa-tx b{ color:var(--text-muted); }
.sdash-agora{
  flex-shrink:0; align-self:center; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:999px;
  background:rgba(14,165,233,.14); color:#0369A1;
}

/* ── estado vazio ── */
.sdash-vazio{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:26px 14px; text-align:center; color:var(--text-muted);
}
.sdash-vazio svg{ width:26px; height:26px; opacity:.4; margin-bottom:4px; }
.sdash-vazio b{ font-size:12.5px; color:var(--text-main); }
.sdash-vazio span{ font-size:11px; }

/* ── acesso rápido ── */
.sdash-atalhos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:11px; }
.sdash-atalho{
  --cor:#06B6D4;
  display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:12px 13px; border-radius:12px;
  background:var(--bg-page); border:1px solid var(--border-color);
  animation:sdIn .4s ease backwards; animation-delay:calc(var(--i,0) * 35ms + .4s);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sdash-atalho:hover{ transform:translateY(-3px); border-color:var(--cor); box-shadow:0 10px 22px rgba(15,23,42,.10); }
.sdash-atalho-ic{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--cor); background:color-mix(in srgb, var(--cor) 14%, transparent);
  transition:background .18s ease, color .18s ease;
}
.sdash-atalho:hover .sdash-atalho-ic{ background:var(--cor); color:#fff; }
.sdash-atalho-ic svg{ width:17px; height:17px; }
.sdash-atalho-tx{ min-width:0; flex:1; }
.sdash-atalho-tx b{ display:block; font-size:12.5px; font-weight:600; color:var(--text-main); }
.sdash-atalho-tx span{
  display:block; font-size:11px; color:var(--text-muted); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sdash-atalho-seta{
  width:15px; height:15px; flex-shrink:0; color:var(--text-muted); opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}
.sdash-atalho:hover .sdash-atalho-seta{ opacity:1; transform:translateX(2px); color:var(--cor); }

@keyframes sdIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .sdash-topo,.sdash-cart,.sdash-kpi,.sdash-bloco,.sdash-etapa,.sdash-atalho,
  .sdash-mes-barra i,.sdash-ramo-barra i{ animation:none; }
  .sdash-etapa.agora .sdash-etapa-pt{ animation:none; }
}

/* ── Menu em cascata: correções ──────────────────────────────────────────────
   O submenu lateral só faz sentido com mouse. No celular o menu já é uma gaveta
   com acordeão, e um painel voando para o lado saía da tela. */

/* Abrir no HOVER é só para quem tem mouse de verdade. Em tela de toque o
   navegador simula um "hover grudento" no último item tocado, e o submenu ficava
   aberto sozinho depois do toque. */
@media (hover:hover) and (pointer:fine) {
  .nav-pai:hover > .nav-flyout{ opacity:1; pointer-events:auto; transform:translateX(0) scale(1); }
  .nav-pai:hover > .nav-flecha{ opacity:1; transform:translateX(2px); }
}

@media (max-width:900px) {
  /* Dentro da gaveta o submenu vira acordeão, igual ao nível de cima: nasce
     colado no item, ocupa a largura toda e cresce para baixo. */
  #navbar-nav .nav-flyout{
    /* fechado não ocupa espaço nenhum: com margem fixa sobrava uma folga
       estranha embaixo dos itens que têm submenu */
    position:static; margin:0; padding:0 0 0 8px;
    min-width:0; width:100%;
    background:rgba(0,0,0,.22); border:none; border-radius:9px;
    border-left:2px solid rgba(255,255,255,.16);
    box-shadow:none; opacity:1; pointer-events:auto; transform:none;
    max-height:0; overflow:hidden;
    transition:max-height .26s ease, padding .26s ease;
  }
  #navbar-nav .nav-pai.aberto > .nav-flyout{ max-height:640px; margin:3px 0 5px; padding:3px 0 3px 8px; }
  #navbar-nav .nav-pai > .nav-flyout::before{ content:none; }   /* a ponte não serve aqui */

  /* a seta aponta para baixo quando o submenu está aberto */
  #navbar-nav .nav-pai > .nav-flecha{ transition:transform .22s ease; }
  #navbar-nav .nav-pai.aberto > .nav-flecha{ transform:rotate(90deg); }

  /* O item pai vira duas linhas (rótulo em cima, submenu embaixo). O `gap:6px`
     do .nav-item valia também entre essas linhas e deixava o item 6px mais alto
     que os vizinhos, mesmo com o submenu fechado — só o gap horizontal serve. */
  #navbar-nav .nav-pai{ flex-wrap:wrap; row-gap:0; }
  #navbar-nav .nav-flyout .nav-item{
    color:rgba(255,255,255,.9); padding:11px 12px; width:100%;
    animation:none;   /* a entrada escalonada atrapalha dentro do acordeão */
  }
  #navbar-nav .nav-flyout .nav-item:hover,
  #navbar-nav .nav-flyout .nav-item.active{ background:rgba(255,255,255,.14); color:#fff; }
  #navbar-nav .nav-flyout .nav-svg{ color:rgba(255,255,255,.6); }

  /* o terceiro nível recua mais um pouco, para a hierarquia ficar legível */
  #navbar-nav .nav-flyout .nav-flyout{ border-left-color:rgba(255,255,255,.10); }

  /* na gaveta o dropdown do grupo precisa poder crescer com os submenus abertos */
  #navbar-nav .nav-group.open .nav-dropdown{ max-height:2400px; }
}

/* ── Abas da Saúde: submenu no hover ──────────────────────────────────────────
   As abas com seta (Movimentação, E-mails) abriam o grupo inteiro no clique e
   exigiam um segundo clique para escolher. Agora o mouse já mostra a lista e
   leva direto. O clique continua funcionando, indo para o primeiro item. */
.saude-tab-wrap{ position:relative; display:inline-flex; }

/* A barra inteira sobe uma camada: sem isso o menu aberto some por tras do
   primeiro card da tela, porque a animacao de entrada dos cards cria um
   contexto de empilhamento e a ordem do HTML passa a decidir quem cobre quem.
   Fica abaixo do #topbar (z-index:90), que deve continuar cobrindo na rolagem. */
.saude-tabs{ position:relative; z-index:81; }
.saude-subtabs{ position:relative; z-index:80; }
.saude-tab-wrap .saude-tab-caret{ transition:transform .18s ease; }

.saude-tab-menu{
  position:absolute; top:100%; left:0; margin-top:5px; z-index:60;
  min-width:198px; padding:5px; display:flex; flex-direction:column; gap:2px;
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:11px; box-shadow:0 12px 30px rgba(15,23,42,.16);
  opacity:0; pointer-events:none; transform:translateY(-5px) scale(.985);
  transform-origin:top left;
  transition:opacity .15s ease, transform .15s cubic-bezier(.22,.9,.28,1);
}
/* a faixa invisível cobre a folga entre a aba e o menu: sem ela o mouse
   atravessa o vão e o menu some no meio do caminho */
.saude-tab-menu::before{ content:''; position:absolute; left:0; right:0; top:-7px; height:7px; }

@media (hover:hover) and (pointer:fine) {
  .saude-tab-wrap:hover > .saude-tab-menu{ opacity:1; pointer-events:auto; transform:none; }
  .saude-tab-wrap:hover .saude-tab-caret{ transform:rotate(180deg); }
}
.saude-tab-wrap.aberto > .saude-tab-menu{ opacity:1; pointer-events:auto; transform:none; }

.saude-tab-op{
  --sc:#06B6D4;
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 10px; border:none; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--text-main);
  font-size:12px; font-weight:500; text-align:left; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.saude-tab-op:hover{ background:var(--bg-page); color:var(--sc); }
.saude-tab-op svg{ flex-shrink:0; color:var(--sc); }

/* No celular não há hover e a barra de abas rola na horizontal: um menu flutuante
   ficaria preso dentro da rolagem. Lá a segunda linha de sub-abas já resolve. */
@media (max-width:900px){
  .saude-tab-menu{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TERMOS — produto em foco, cards de contagem e conferência do lote
   ═══════════════════════════════════════════════════════════════════════════
   A Rafaella confere UM produto de cada vez (saúde x odonto) e o mesmo termo
   unificado carrega uma decisão em cada área. O seletor de produto é o passo 1
   da tela; os três quadradinhos de conferência são o que ela pediu ver logo
   depois da análise. */
.tprod-box{
  background:var(--bg-page); border:1px solid var(--border-color);
  border-radius:12px; padding:12px 14px; margin-bottom:14px;
}
.tprod-tit{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  font-size:11.5px; font-weight:700; color:var(--text-main);
}
.tprod-passo{
  width:18px; height:18px; border-radius:50%; background:#0EA5E9;
  color:#fff; font-size:10px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tprod-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px; }
.tprod{
  --cor:#0EA5E9;
  display:flex; align-items:center; gap:10px; text-align:left;
  padding:10px 12px; border-radius:11px; cursor:pointer;
  border:1px solid var(--border-color); background:var(--bg-card);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  animation:tcatEntra .34s cubic-bezier(.22,.9,.28,1) backwards;
}
.tprod:nth-child(2){ animation-delay:55ms } .tprod:nth-child(3){ animation-delay:110ms }
.tprod:hover{ transform:translateY(-2px); border-color:var(--cor); box-shadow:0 8px 18px rgba(15,23,42,.09); }
.tprod.ativo{
  border-color:var(--cor); background:color-mix(in srgb, var(--cor) 10%, transparent);
  box-shadow:0 0 0 1px var(--cor) inset;
}
.tprod-ic{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--cor) 16%, transparent); color:var(--cor);
}
.tprod-tx{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.tprod-tx b{ font-size:12.5px; font-weight:700; color:var(--text-main); }
.tprod.ativo .tprod-tx b{ color:var(--cor); }
.tprod-tx i{ font-style:normal; font-size:10.5px; color:var(--text-muted); line-height:1.35; }

/* Cards de contagem (clicáveis, filtram a tabela) */
.tcard-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.tcard{
  --cor:#06B6D4;
  position:relative; overflow:hidden; cursor:pointer;
  border:1px solid var(--border-color); border-radius:12px; padding:12px 14px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation:tcatEntra .34s cubic-bezier(.22,.9,.28,1) backwards;
}
.tcard:nth-child(2){ animation-delay:40ms } .tcard:nth-child(3){ animation-delay:80ms }
.tcard:nth-child(4){ animation-delay:120ms } .tcard:nth-child(5){ animation-delay:160ms }
.tcard:nth-child(6){ animation-delay:200ms }
.tcard:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(15,23,42,.08); border-color:var(--cor); }
.tcard-rail{ position:absolute; top:0; left:0; right:0; height:2px; background:var(--cor); }
.tcard-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:6px; }
.tcard-lb{ font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; }
.tcard-ic{
  width:24px; height:24px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--cor) 14%, transparent);
}
.tcard-n{ font-size:26px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }

.tfaixa{
  display:flex; align-items:center; gap:8px; margin:14px 0 8px;
  padding-top:12px; border-top:1px dashed var(--border-color);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.tfaixa.pri{ margin-top:0; padding-top:0; border-top:none; }

/* Os três quadradinhos da conferência */
.tconf-card{ margin-bottom:14px; }
.tconf-cab{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.tconf-cab b{ display:block; font-size:13px; font-weight:800; color:var(--text-main); line-height:1.25; }
.tconf-cab i{ font-style:normal; font-size:11px; color:var(--text-muted); }
.tconf-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:11px; }
.tconf{
  --cor:#94A3B8;
  position:relative; border-radius:12px; padding:13px 15px 12px;
  border:1px solid var(--border-color); background:var(--bg-card);
  border-left:3px solid var(--cor);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:tconfIn .4s cubic-bezier(.22,.9,.28,1) backwards;
}
.tconf:nth-child(2){ animation-delay:70ms } .tconf:nth-child(3){ animation-delay:140ms }
.tconf.ok{     --cor:#10B981; background:linear-gradient(135deg, rgba(16,185,129,.06), transparent 65%); }
.tconf.alerta{ --cor:#EF4444; background:linear-gradient(135deg, rgba(239,68,68,.07), transparent 65%); }
.tconf.neutro{ --cor:#64748B; }
.tconf.click{ cursor:pointer; }
.tconf.click:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(15,23,42,.10); }
.tconf-head{ display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.tconf-ic{
  width:22px; height:22px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--cor) 15%, transparent); color:var(--cor);
}
.tconf-t{ font-size:11px; font-weight:700; color:var(--text-main); letter-spacing:.2px; }
.tconf-n{
  font-size:30px; font-weight:800; line-height:1; color:var(--cor);
  font-variant-numeric:tabular-nums; margin-bottom:5px;
}
.tconf-s{ font-size:11px; color:var(--text-muted); line-height:1.5; }
.tconf-d{ display:flex; flex-direction:column; gap:2px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border-color); }
.tconf-d span{ font-size:10.5px; color:var(--text-muted); line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tconf-d span.ruim{ color:#DC2626; font-weight:600; }
.tconf-d b{ color:var(--text-main); font-weight:700; }
.tconf-ver{
  margin-top:8px; font-size:10px; font-weight:700; color:var(--cor);
  text-transform:uppercase; letter-spacing:.5px; opacity:0; transition:opacity .18s ease;
}
.tconf.click:hover .tconf-ver{ opacity:1; }
@keyframes tconfIn{ from{ opacity:0; transform:translateY(9px) scale(.985) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .tprod, .tcard, .tconf{ animation:none } }

/* ═══════════════════════════════════════════════════════════════════════════
   ROTINAS DO DEPARTAMENTO — bloco do dashboard da Saúde
   ═══════════════════════════════════════════════════════════════════════════
   Entrou no lugar das "Etapas do mês", que era um resumo meu. Isto é a planilha
   que a equipe usa: ROTINAS DEPARTAMENTO SAÚDE.xlsx, dia a dia do mês. */
.sdash-duas.rot-duas{ grid-template-columns:1.85fr 1fr; align-items:start; }
@media (max-width:1100px){ .sdash-duas.rot-duas{ grid-template-columns:1fr; } }

.rot-wrap{ display:flex; flex-direction:column; min-height:0; }
.rot-hoje{
  margin-left:auto; font-size:10.5px !important; font-weight:600 !important;
  color:var(--text-muted) !important; background:var(--bg-page);
  border:1px solid var(--border-color); border-radius:20px; padding:3px 10px;
}
.rot-topo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.rot-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.rot-chip{
  --cor:#64748B;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:20px; cursor:pointer;
  border:1px solid var(--border-color); background:var(--bg-page);
  color:var(--text-muted); font-size:11px; font-weight:600;
  transition:transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.rot-chip i{
  font-style:normal; font-size:10px; font-weight:800; color:var(--cor);
  background:color-mix(in srgb, var(--cor) 14%, transparent);
  border-radius:9px; padding:1px 6px;
}
.rot-chip:hover{ transform:translateY(-1px); border-color:var(--cor); color:var(--text-main); }
.rot-chip.ativo{
  border-color:var(--cor); color:var(--cor);
  background:color-mix(in srgb, var(--cor) 10%, transparent);
}
.rot-prog{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.rot-prog-b{ width:96px; height:6px; border-radius:4px; background:var(--bg-page); overflow:hidden; }
.rot-prog-b span{
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#10B981,#0EA5E9);
  animation:rotProg .9s cubic-bezier(.22,.9,.28,1) both;
}
.rot-prog-t{ font-size:10.5px; font-weight:700; color:var(--text-muted); font-variant-numeric:tabular-nums; }
@keyframes rotProg{ from{ transform:scaleX(0); transform-origin:left } to{ transform:none } }

.rot-linha{
  position:relative; display:flex; flex-direction:column; gap:10px;
  max-height:430px; overflow-y:auto; padding-right:4px;
}
.rot-bloco{
  display:flex; gap:11px; align-items:flex-start;
  animation:rotIn .42s cubic-bezier(.22,.9,.28,1) backwards;
  animation-delay:calc(var(--i) * 35ms);
}
@keyframes rotIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.rot-dia{
  flex-shrink:0; width:42px; text-align:center; position:sticky; top:0;
  display:flex; flex-direction:column; align-items:center; gap:1px;
}
.rot-dia-n{
  width:32px; height:32px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;
  background:var(--bg-page); border:1px solid var(--border-color); color:var(--text-muted);
  transition:all .2s ease;
}
.rot-dia-r{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); opacity:.7; }
.rot-bloco.passou .rot-dia-n{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); color:#0E7C5A; }
.rot-bloco.passou .rot-itens{ opacity:.62; }
.rot-bloco.agora .rot-dia-n{
  background:#0EA5E9; border-color:#0EA5E9; color:#fff;
  box-shadow:0 0 0 4px rgba(14,165,233,.16);
  animation:rotPulso 2.4s ease-in-out infinite;
}
.rot-bloco.agora .rot-dia-r{ color:#0EA5E9; opacity:1; }
@keyframes rotPulso{
  0%,100%{ box-shadow:0 0 0 4px rgba(14,165,233,.16) }
  50%{ box-shadow:0 0 0 7px rgba(14,165,233,.06) }
}

.rot-itens{ flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; transition:opacity .2s ease; }
.rot-item{
  --cor:#64748B;
  display:flex; gap:9px; align-items:flex-start; cursor:pointer;
  padding:8px 11px; border-radius:10px;
  background:var(--bg-page); border:1px solid transparent;
  transition:border-color .16s ease, transform .16s ease, background .16s ease;
}
.rot-item:hover{ border-color:color-mix(in srgb, var(--cor) 45%, transparent); transform:translateX(2px); }
.rot-item.aberta{ border-color:var(--cor); background:color-mix(in srgb, var(--cor) 7%, transparent); }
.rot-quem{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#fff; background:var(--cor);
}
.rot-corpo{ flex:1; min-width:0; }
.rot-corpo > b{ display:block; font-size:11.5px; font-weight:700; color:var(--text-main); line-height:1.35; }
.rot-obs{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  font-size:10.5px; color:var(--text-muted); line-height:1.5; margin-top:1px;
}
.rot-item.aberta .rot-obs{ -webkit-line-clamp:6; }
.rot-marcos{ display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.rot-marco{
  font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:6px;
  letter-spacing:.2px; white-space:nowrap;
}
.rot-marco.prazo{ background:rgba(59,130,246,.12); color:#1D4ED8; }
.rot-marco.corte{ background:rgba(239,68,68,.10); color:#B91C1C; }
.rot-ir{
  display:inline-flex; align-items:center; gap:3px; cursor:pointer;
  font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:6px;
  background:color-mix(in srgb, var(--cor) 13%, transparent); color:var(--cor);
  opacity:0; transform:translateX(-3px);
  transition:opacity .18s ease, transform .18s ease;
}
.rot-item:hover .rot-ir, .rot-item.aberta .rot-ir{ opacity:1; transform:none; }
.rot-rodape{
  margin-top:12px; padding-top:10px; border-top:1px dashed var(--border-color);
  font-size:10px; color:var(--text-muted); line-height:1.5;
}
.rot-rodape code{ font-size:9.5px; background:var(--bg-page); padding:1px 5px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  .rot-bloco, .rot-prog-b span, .rot-bloco.agora .rot-dia-n{ animation:none }
}
/* ── Rotinas: o filtro do dia, o check e a edição ─────────────────────────
   O bloco era só leitura. Virou a lista de trabalho do dia: dá para marcar o
   que já foi feito, criar uma demanda que não está na planilha, editar e tirar
   da lista (Rafaella, 21/08/2026). */
.rot-chip.hoje{ --cor:#F59E0B; font-weight:700; }
.rot-chip.hoje svg{ opacity:.8; }
.rot-chip.hoje.ativo svg{ opacity:1; }

.rot-topo-dir{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.rot-topo-dir .rot-prog{ margin-left:0; }

.rot-bt{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border-color); background:var(--bg-card);
  color:var(--text-muted); font-size:11px; font-weight:700; font-family:inherit;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.rot-bt:hover{ color:var(--text-main); border-color:#10B981; transform:translateY(-1px); }
.rot-bt.primario{ background:#10B981; border-color:#10B981; color:#fff; }
.rot-bt.primario:hover{ background:#0E9F6E; border-color:#0E9F6E; color:#fff; }

/* O check. É o primeiro elemento do item de propósito: a pergunta do dia é
   "isso já foi feito?", e a resposta tem que estar no começo da linha. */
.rot-check{
  flex-shrink:0; width:18px; height:18px; margin-top:2px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px; cursor:pointer;
  border:1.6px solid var(--border-color); background:var(--bg-card);
  color:transparent;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}
.rot-check:hover{ border-color:#10B981; color:rgba(16,185,129,.45); transform:scale(1.08); }
.rot-item.feita .rot-check{ background:#10B981; border-color:#10B981; color:#fff; }
.rot-item.feita .rot-corpo > b{ text-decoration:line-through; color:var(--text-muted); }
.rot-item.feita{ opacity:.72; }
.rot-item.feita:hover{ opacity:1; }

.rot-marco.hoje{ background:rgba(245,158,11,.14); color:#B45309; }
.rot-marco.nova{ background:rgba(139,92,246,.12); color:#6D28D9; }
.rot-feita-por{
  font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:6px;
  background:rgba(16,185,129,.12); color:#0E7C5A; white-space:nowrap;
}

/* Editar e remover ficam discretos até o mouse chegar: a lista é para LER
   primeiro, e um par de botões em cada uma das 43 linhas vira ruído. */
.rot-acoes{ display:flex; gap:3px; align-self:flex-start; margin-top:1px;
  opacity:0; transition:opacity .16s ease; }
.rot-item:hover .rot-acoes, .rot-item.aberta .rot-acoes{ opacity:1; }
.rot-bt-icone{
  width:22px; height:22px; padding:0; display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:7px; cursor:pointer;
  background:transparent; color:var(--text-muted);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.rot-bt-icone:hover{ background:var(--bg-card); border-color:var(--border-color); color:var(--text-main); }
.rot-bt-icone.perigo:hover{ color:#DC2626; border-color:rgba(220,38,38,.4); }

/* O formulário abre no lugar da própria rotina, em vez de numa janela: assim
   ela continua vendo a lista em volta enquanto escreve. */
.rot-form{
  border:1px solid #10B981; border-radius:11px; padding:12px 13px;
  background:color-mix(in srgb, #10B981 5%, var(--bg-card));
  animation:rotFormIn .22s cubic-bezier(.22,.9,.28,1) both;
}
@keyframes rotFormIn{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
.rot-form-cab{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:#0E7C5A; margin-bottom:10px;
}
.rot-form-grade{ display:grid; grid-template-columns:100px 1fr; gap:8px 10px; }
.rot-form-grade label{
  display:flex; flex-direction:column; gap:3px;
  font-size:10px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.3px;
}
.rot-form-grade label.largo{ grid-column:1 / -1; }
.rot-form-grade input, .rot-form-grade select, .rot-form-grade textarea{
  width:100%; padding:6px 9px; border-radius:8px;
  border:1px solid var(--border-color); background:var(--bg-card);
  color:var(--text-main); font-size:11.5px; font-weight:500; font-family:inherit;
  text-transform:none; letter-spacing:0;
}
.rot-form-grade textarea{ resize:vertical; min-height:38px; line-height:1.5; }
.rot-form-grade input:focus, .rot-form-grade select:focus, .rot-form-grade textarea:focus{
  outline:none; border-color:#10B981; box-shadow:0 0 0 3px rgba(16,185,129,.13);
}
.rot-form-dica{ margin-top:8px; font-size:10px; color:var(--text-muted); line-height:1.5; }
/* O exemplo tem que parecer exemplo: sem isso "Até 15/mês" no campo vazio
   parece um valor já preenchido. */
.rot-form-grade input::placeholder, .rot-form-grade textarea::placeholder{
  color:var(--text-muted); opacity:.6; font-style:italic;
}
/* Com o formulário aberto a faixa cresce: ela rola por dentro, e um formulário
   cortado ao meio esconde o botão de salvar. */
.rot-linha.editando{ max-height:640px; }
/* O selo de quem já tem compromisso marcado, e o botão que leva o mês para a
   agenda. Enquanto o mês não foi, o botão fica aceso: é o passo que ninguém
   lembra de dar sozinho. */
.rot-marco.agenda{
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(99,102,241,.12); color:#4338CA;
}
.rot-bt-n{
  font-style:normal; font-size:9.5px; font-weight:800;
  background:var(--bg-page); border-radius:9px; padding:1px 6px; margin-left:2px;
}
.rot-bt.agenda-nova{
  border-color:#6366F1; color:#4338CA;
  background:color-mix(in srgb, #6366F1 10%, var(--bg-card));
  animation:rotPisca 2.6s ease-in-out 3;
}
.rot-bt.agenda-nova:hover{ border-color:#4338CA; color:#3730A3; }
@keyframes rotPisca{
  0%,100%{ box-shadow:0 0 0 0 rgba(99,102,241,0) }
  50%{ box-shadow:0 0 0 4px rgba(99,102,241,.16) }
}
@media (prefers-reduced-motion:reduce){ .rot-bt.agenda-nova{ animation:none } }


.rot-form-dica b{ color:var(--text-main); }
.rot-form-pe{ display:flex; gap:7px; justify-content:flex-end; margin-top:10px; }

.rot-link{
  border:none; background:none; padding:0; cursor:pointer; font-family:inherit;
  font-size:10px; font-weight:700; color:#0EA5E9; text-decoration:underline;
  text-underline-offset:2px;
}
.rot-erro{ color:#B91C1C; font-weight:600; }
.rot-ocultas{ display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.rot-oculta{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  padding:5px 9px; border-radius:8px; background:var(--bg-page);
  border:1px dashed var(--border-color);
}
.rot-oculta span{ font-size:10.5px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Redesenho depois de um clique não pode fazer a tela inteira reanimar. */
.rot-wrap.rot-quieto .rot-bloco, .rot-wrap.rot-quieto .rot-prog-b span,
.bv.bv-quieto .bv-item{ animation:none !important; }

@media (max-width:700px){
  .rot-form-grade{ grid-template-columns:1fr; }
  .rot-form-grade label{ grid-column:1 / -1; }
  .rot-acoes{ opacity:1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LEVANTAMENTO DE DEPENDENTES — filhos chegando no limite de idade
   ═══════════════════════════════════════════════════════════════════════════ */
.dep-regras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; margin-bottom:14px; }
.dep-regra{
  --cor:#0EA5E9;
  display:flex; gap:11px; align-items:flex-start;
  padding:12px 14px; border-radius:12px;
  background:var(--bg-page); border:1px solid var(--border-color);
  border-left:3px solid var(--cor);
  animation:tconfIn .42s cubic-bezier(.22,.9,.28,1) backwards;
}
.dep-regra:nth-child(2){ animation-delay:60ms } .dep-regra:nth-child(3){ animation-delay:120ms }
.dep-regra-n{
  flex-shrink:0; font-size:26px; font-weight:800; line-height:1; color:var(--cor);
  font-variant-numeric:tabular-nums; display:flex; flex-direction:column; align-items:center;
}
.dep-regra-n i{ font-style:normal; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; opacity:.75; }
.dep-regra-tx{ min-width:0; }
.dep-regra-tx b{ display:block; font-size:12px; font-weight:700; color:var(--text-main); margin-bottom:2px; }
.dep-regra-tx span{ font-size:10.5px; color:var(--text-muted); line-height:1.5; }

.dep-drop{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:14px 16px; border-radius:12px;
  border:2px dashed var(--border-color); background:transparent; color:var(--text-muted);
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.dep-drop:hover, .dep-drop.drag{ border-color:#0EA5E9; background:rgba(14,165,233,.06); color:#0EA5E9; }
.dep-drop.cheio{ border-style:solid; border-color:#10B981; background:rgba(16,185,129,.06); color:#0E7C5A; }
.dep-drop svg{ flex-shrink:0; }
.dep-drop-tx{ flex:1; min-width:0; }
.dep-drop-tx b{ display:block; font-size:12.5px; font-weight:700; color:var(--text-main); }
.dep-drop-tx span{ display:block; font-size:10.5px; color:var(--text-muted); line-height:1.5; margin-top:1px; }
.dep-drop-x{
  flex-shrink:0; width:24px; height:24px; border-radius:7px; cursor:pointer;
  border:1px solid var(--border-color); background:var(--bg-card);
  color:var(--text-muted); font-size:15px; line-height:1;
  opacity:0; transition:opacity .15s ease, color .15s ease;
}
.dep-drop.cheio .dep-drop-x{ opacity:1; }
.dep-drop-x:hover{ color:#EF4444; border-color:#EF4444; }

.dep-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.dep-cab-t{ font-size:15px; font-weight:800; color:var(--text-main); line-height:1.2; }
.dep-cab-s{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.dep-btn-verde, .dep-btn-linha{
  padding:8px 14px; border-radius:8px; font-size:12px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .15s;
}
.dep-btn-verde{ background:#10B981; border:none; color:#fff; box-shadow:0 2px 6px rgba(16,185,129,.25); }
.dep-btn-verde:hover{ background:#059669; }
.dep-btn-linha{ background:transparent; border:1px solid var(--border-color); color:var(--text-main); }
.dep-btn-linha:hover{ border-color:#0EA5E9; color:#0EA5E9; }

.dep-busca{
  margin-left:auto; min-width:210px; padding:6px 12px; border-radius:20px;
  border:1px solid var(--border-color); background:var(--bg-card);
  color:var(--text-main); font-size:11.5px;
}
.dep-busca:focus{ outline:none; border-color:#0EA5E9; }

.dep-tabela{ padding:0; overflow:hidden; }

.dep-linhas{ max-height:64vh; overflow-y:auto; }
.dep-linha{
  --cor:#94A3B8;
  display:grid; grid-template-columns:minmax(0,2.4fr) 110px 130px 140px minmax(0,1fr);
  gap:12px; align-items:center;
  padding:11px 16px; border-bottom:1px solid var(--border-color);
  border-left:3px solid var(--cor);
  animation:rotIn .38s cubic-bezier(.22,.9,.28,1) backwards;
  animation-delay:calc(var(--i) * 22ms);
  transition:background .15s ease;
}
.dep-linha:hover{ background:color-mix(in srgb, var(--cor) 5%, transparent); }
.dep-l-nome b{ display:block; font-size:12.5px; font-weight:700; color:var(--text-main); }
.dep-l-nome span{ display:block; font-size:10.5px; color:var(--text-muted); margin-top:1px; }
.dep-l-nome i{ font-style:normal; color:var(--text-main); font-weight:600; }
.dep-barra{ height:3px; border-radius:3px; background:var(--bg-page); margin-top:6px; overflow:hidden; max-width:280px; }
.dep-barra span{
  display:block; height:100%; border-radius:3px; background:var(--cor);
  animation:rotProg .8s cubic-bezier(.22,.9,.28,1) both;
}
.dep-l-lim b{ display:block; font-size:12px; font-weight:800; color:var(--cor); }
.dep-l-lim span{ font-size:10.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.dep-l-falta{ font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.dep-tag{
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:10px; font-weight:700; white-space:nowrap;
  background:color-mix(in srgb, var(--cor) 14%, transparent); color:var(--cor);
}
.dep-l-extra{ font-size:10px; color:var(--text-muted); text-align:right; }
.dep-l-extra i{ display:block; font-style:normal; opacity:.8; }
@media (max-width:900px){
  .dep-linha{ grid-template-columns:1fr 1fr; gap:6px; }
  .dep-l-extra{ text-align:left; }
  .dep-busca{ margin-left:0; width:100%; }
}
@media (prefers-reduced-motion:reduce){ .dep-regra, .dep-seg, .dep-linha, .dep-barra span{ animation:none } }

/* ── Conferência do lote: o número abre e diz de onde vem ────────────────────
   Pedido do Pedro (20/08/2026). O número sozinho é palavra minha; com a origem
   ao lado, a Rafaella confere na fonte (o campo do PDF, a aba e a coluna da
   planilha). */
.tconf.aberto{ box-shadow:0 0 0 1px var(--cor) inset, 0 10px 22px rgba(15,23,42,.10); }
.tconf-n{ cursor:pointer; }
.tconf-ver{
  display:flex; align-items:center; gap:4px;
  opacity:.55;                       /* sempre visível: todo número abre */
}
.tconf.click:hover .tconf-ver, .tconf.aberto .tconf-ver{ opacity:1; }

.tconf-det{
  margin-top:12px; border-radius:12px; overflow:hidden;
  border:1px solid var(--border-color); background:var(--bg-page);
  animation:tconfDet .28s cubic-bezier(.22,.9,.28,1) both;
}
@keyframes tconfDet{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.tconf-det-cab{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 15px; border-bottom:1px solid var(--border-color); background:var(--bg-card);
}
.tconf-det-cab b{ font-size:12.5px; font-weight:800; color:var(--text-main); }
.tconf-det-cab button{
  width:24px; height:24px; border-radius:7px; cursor:pointer; flex-shrink:0;
  border:1px solid var(--border-color); background:var(--bg-page);
  color:var(--text-muted); font-size:16px; line-height:1;
}
.tconf-det-cab button:hover{ color:#EF4444; border-color:#EF4444; }

.tconf-org{
  padding:12px 15px; font-size:11.5px; line-height:1.65; color:var(--text-muted);
  border-bottom:1px dashed var(--border-color);
}
.tconf-org > span{
  display:inline-block; margin-right:7px; padding:1px 8px; border-radius:20px;
  background:rgba(14,165,233,.12); color:#0369A1;
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  vertical-align:middle;
}
.tconf-org b{ color:var(--text-main); font-weight:700; }
.tconf-org i{ font-style:italic; }
.tconf-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.tconf-chips span{
  font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px;
  background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-muted);
}
.tconf-chips span.forte{ border-color:#0EA5E9; color:#0369A1; background:rgba(14,165,233,.10); }
.tconf-chips b{ color:var(--text-main); font-weight:800; }

.tconf-abas{ display:flex; gap:6px; flex-wrap:wrap; padding:11px 15px 0; }
.tconf-abas button{
  padding:5px 12px; border-radius:20px; cursor:pointer;
  border:1px solid var(--border-color); background:var(--bg-card);
  color:var(--text-muted); font-size:11px; font-weight:600;
  transition:all .15s ease;
}
.tconf-abas button b{ font-weight:800; color:var(--text-main); }
.tconf-abas button:hover{ border-color:#0EA5E9; color:var(--text-main); }
.tconf-abas button.ativo{ border-color:#0EA5E9; color:#0369A1; background:rgba(14,165,233,.10); }
.tconf-abas button.ruim b{ color:#DC2626; }

.tconf-itens{ max-height:340px; overflow-y:auto; padding:11px 15px 13px; }
.tconf-item{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;
  gap:10px; align-items:baseline;
  padding:7px 0; border-bottom:1px solid var(--border-color); font-size:11.5px;
}
.tconf-item:last-child{ border-bottom:none; }
.tconf-item > b{ color:var(--text-main); font-weight:700; overflow:hidden; text-overflow:ellipsis; }
.tconf-item > span{ color:var(--text-muted); line-height:1.5; }
.tconf-item.ruim > b{ color:#B91C1C; }
.tconf-onde{
  font-style:normal; font-size:10px; color:var(--text-muted); white-space:nowrap;
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:6px; padding:2px 7px; justify-self:end;
}
.tconf-sub{
  padding:10px 15px 0; font-size:11px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.4px;
}
.tconf-vazio{
  padding:16px 15px; font-size:11.5px; color:var(--text-muted); line-height:1.6;
}
@media (max-width:900px){
  .tconf-item{ grid-template-columns:1fr; gap:2px; }
  .tconf-onde{ justify-self:start; }
}
@media (prefers-reduced-motion:reduce){ .tconf-det{ animation:none } }

/* ── Central de tarefas em segundo plano ─────────────────────────────────────
   Fica no canto de baixo à ESQUERDA de propósito: a direita já tem o botão dos
   agentes (bottom:28 right:28) e os toasts (bottom:24 right:24). Vive no <body>,
   fora de #content, e por isso sobrevive à troca de tela — que era justamente o
   problema (a análise continuava, mas o progresso morria junto com a tela). */
.tsk-dock{
  position:fixed; bottom:24px; left:24px; z-index:9500;
  display:flex; flex-direction:column; gap:9px; align-items:flex-start;
  max-width:min(360px, calc(100vw - 48px)); pointer-events:none;
}
.tsk-dock > *{ pointer-events:auto; }

.tsk{
  --cor:#0EA5E9;
  width:340px; max-width:100%;
  background:var(--bg-card); border:1px solid var(--border-color);
  border-left:3px solid var(--cor); border-radius:12px;
  padding:11px 13px; box-shadow:0 10px 30px rgba(15,23,42,.16);
  animation:tskEntra .32s cubic-bezier(.22,.9,.28,1) both;
}
@keyframes tskEntra{ from{ opacity:0; transform:translateY(10px) scale(.97) } to{ opacity:1; transform:none } }
.tsk.ok{  --cor:#10B981; }
.tsk.erro{ --cor:#EF4444; }

.tsk-topo{ display:flex; align-items:flex-start; gap:9px; }
.tsk-ic{ width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.tsk-ic svg{ width:16px; height:16px; }
.tsk-tx{ flex:1; min-width:0; }
.tsk-tx b{ display:block; font-size:12.5px; font-weight:700; color:var(--text-main); line-height:1.3; }
.tsk-tx span{ display:block; font-size:10.5px; color:var(--text-muted); line-height:1.45; margin-top:1px; }
.tsk-x{
  width:22px; height:22px; flex-shrink:0; border-radius:6px; cursor:pointer;
  border:none; background:transparent; color:var(--text-muted);
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.tsk-x:hover{ background:var(--bg-page); color:var(--text-main); }

/* rodinha do "está trabalhando" */
.tsk-giro{
  width:14px; height:14px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--cor, #0EA5E9) 25%, transparent);
  border-top-color:var(--cor, #0EA5E9);
  animation:tskGiro .8s linear infinite; display:inline-block;
}
@keyframes tskGiro{ to{ transform:rotate(360deg) } }

.tsk-barra{
  height:5px; border-radius:4px; background:var(--bg-page);
  overflow:hidden; margin-top:9px;
}
.tsk-barra span{
  display:block; height:100%; border-radius:4px; background:var(--cor);
  transition:width .35s cubic-bezier(.22,.9,.28,1);
}
/* sem total conhecido, a barra anda sozinha em vez de mentir uma porcentagem */
.tsk-barra.indet span{
  background:linear-gradient(90deg, transparent, var(--cor), transparent);
  animation:tskAnda 1.4s ease-in-out infinite;
}
@keyframes tskAnda{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(100%) } }
.tsk-n{ font-size:10px; color:var(--text-muted); margin-top:5px; font-variant-numeric:tabular-nums; }

.tsk-ver{
  display:flex; align-items:center; gap:5px; margin-top:9px;
  padding:6px 12px; border-radius:8px; cursor:pointer;
  border:none; background:var(--cor); color:#fff;
  font-size:11.5px; font-weight:700;
  transition:filter .15s ease, transform .15s ease;
}
.tsk-ver:hover{ filter:brightness(1.08); transform:translateX(2px); }

.tsk-min{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  padding:8px 14px; border-radius:20px;
  background:var(--bg-card); border:1px solid var(--border-color);
  color:var(--text-main); font-size:11.5px; font-weight:700;
  box-shadow:0 8px 24px rgba(15,23,42,.14);
  animation:tskEntra .28s cubic-bezier(.22,.9,.28,1) both;
}
.tsk-min:hover{ border-color:#0EA5E9; }

.tsk-perm{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  padding:6px 11px; border-radius:20px;
  background:transparent; border:1px dashed var(--border-color);
  color:var(--text-muted); font-size:10px; font-weight:600;
}
.tsk-perm:hover{ border-color:#0EA5E9; color:#0EA5E9; }

/* No celular ocupa a largura toda, acima do botão dos agentes. */
@media (max-width:640px){
  .tsk-dock{ left:12px; right:12px; bottom:88px; max-width:none; }
  .tsk{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .tsk, .tsk-min{ animation:none }
  .tsk-giro, .tsk-barra.indet span{ animation-duration:2.5s }
}

/* ── Bloco do dia, no topo da Visão Geral da Saúde ───────────────────────────
   Diz quem é, que dia é e o que o dia pede DELA. Sai das mesmas rotinas da
   planilha do departamento, lidas pelo ângulo de hoje e da pessoa logada, e
   cada linha tem o mesmo check da lista de baixo: o dia pode ser fechado aqui.

   A cor é escolhida por cada uma e entra pela variável --bv. Tudo que é cor
   neste bloco sai dela, para trocar a cor não exigir mexer em regra nenhuma. */
.bv{
  --bv:#0EA5E9;
  position:relative; z-index:5;   /* a paleta abre por cima do bloco de baixo */
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--bv) 16%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--bv) 9%, transparent), transparent 70%);
  border:1px solid color-mix(in srgb, var(--bv) 24%, var(--border-color));
  border-radius:16px; padding:18px 20px; margin-bottom:16px;
  animation:bvIn .45s cubic-bezier(.22,.9,.28,1) both;
}
@keyframes bvIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.bv-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.bv-oi h3{
  margin:0; font-size:20px; font-weight:800; color:var(--text-main); line-height:1.2;
  letter-spacing:-.2px; display:flex; align-items:center; gap:9px;
}
.bv-oi h3::before{
  content:''; width:7px; height:20px; border-radius:4px; flex-shrink:0;
  background:linear-gradient(180deg, var(--bv), color-mix(in srgb, var(--bv) 45%, transparent));
}
.bv-oi p{ margin:4px 0 0 16px; font-size:12px; color:var(--text-muted); line-height:1.5; }

.bv-dir{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bv-pills{ display:flex; gap:7px; flex-wrap:wrap; }
.bv-pill{
  --cor:#64748B;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:20px;
  background:var(--bg-card); border:1px solid color-mix(in srgb, var(--cor) 35%, transparent);
  color:var(--cor); font-size:10.5px; font-weight:600; white-space:nowrap;
}
.bv-pill b{ font-size:13px; font-weight:800; }
.bv-pill.corte { --cor:#DC2626; }
.bv-pill.prazo { --cor:#D97706; }
.bv-pill.comeca{ --cor:#0369A1; }
.bv-pill.feita { --cor:#0E7C5A; }

/* A gota abre a paleta. Fica discreta: é ajuste de gosto, não ferramenta. */
.bv-cor-wrap{ position:relative; }
.bv-cor{
  width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center;
  border-radius:9px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--bv) 32%, var(--border-color));
  background:var(--bg-card); color:var(--bv);
  transition:transform .15s ease, background .15s ease;
}
.bv-cor:hover{ transform:translateY(-1px); background:color-mix(in srgb, var(--bv) 10%, var(--bg-card)); }
.bv-paleta{
  position:absolute; top:calc(100% + 6px); right:0; z-index:20;
  display:grid; grid-template-columns:repeat(4, 22px); gap:7px;
  padding:9px; border-radius:12px;
  background:var(--bg-card); border:1px solid var(--border-color);
  box-shadow:0 12px 30px rgba(15,23,42,.16);
  animation:bvIn .18s ease both;
}
.bv-tinta{
  width:22px; height:22px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--c); border:2px solid transparent;
  box-shadow:0 0 0 1px rgba(15,23,42,.10) inset;
  transition:transform .14s ease, border-color .14s ease;
}
.bv-tinta:hover{ transform:scale(1.14); }
.bv-tinta.ativa{ border-color:var(--text-main); transform:scale(1.08); }

.bv-lista{ display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.bv-item{
  --cor:#64748B;
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 12px; border-radius:10px;
  background:var(--bg-card); border:1px solid var(--border-color);
  border-left:3px solid var(--cor);
  animation:bvIn .4s cubic-bezier(.22,.9,.28,1) backwards;
}
.bv-item:nth-child(2){ animation-delay:50ms }  .bv-item:nth-child(3){ animation-delay:100ms }
.bv-item:nth-child(4){ animation-delay:150ms } .bv-item:nth-child(5){ animation-delay:200ms }
.bv-item:nth-child(6){ animation-delay:250ms }
.bv-item.corte { --cor:#DC2626; }
.bv-item.prazo { --cor:#D97706; }
.bv-item.comeca{ --cor:#0369A1; }

/* Marcar aqui é o mesmo que marcar na lista de baixo: some daqui e vira
   contagem na pastilha "já feitas". */
.bv-check{
  flex-shrink:0; width:19px; height:19px; margin-top:1px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer; color:transparent;
  border:1.7px solid color-mix(in srgb, var(--cor) 45%, var(--border-color));
  background:var(--bg-page);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.bv-check:hover{
  background:#10B981; border-color:#10B981; color:#fff; transform:scale(1.1);
}
.bv-marca{
  flex-shrink:0; min-width:78px; margin-top:2px;
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  color:var(--cor);
}
.bv-tx{ flex:1; min-width:0; }
.bv-tx b{ display:block; font-size:12px; font-weight:700; color:var(--text-main); line-height:1.35; }
.bv-tx span{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  font-size:10.5px; color:var(--text-muted); line-height:1.45; margin-top:1px;
}
.bv-quem{
  flex-shrink:0; font-style:normal; font-size:9.5px; font-weight:700;
  color:var(--text-muted); background:var(--bg-page);
  border-radius:20px; padding:2px 9px; white-space:nowrap; margin-top:1px;
}
.bv-mais{
  font-size:10.5px; color:var(--text-muted); padding:6px 12px;
  border-left:3px dashed var(--border-color); border-radius:10px;
}

/* Os três jeitos de o dia estar vazio dividem o desenho, mas dizem coisas
   diferentes: dia livre, dia fechado, e "nenhuma rotina está no seu nome". */
.bv-vazio{
  display:flex; align-items:flex-start; gap:11px; margin-top:14px;
  padding:13px 15px; border-radius:12px;
  background:var(--bg-card); border:1px dashed color-mix(in srgb, var(--bv) 30%, var(--border-color));
}
.bv-vazio svg{ width:20px; height:20px; flex-shrink:0; color:var(--bv); margin-top:1px; }
.bv-vazio b{ display:block; font-size:12.5px; font-weight:700; color:var(--text-main); }
.bv-vazio span{ display:block; font-size:11px; color:var(--text-muted); line-height:1.55; margin-top:2px; }
.bv-vazio.feito{ border-style:solid; border-color:rgba(16,185,129,.4); background:rgba(16,185,129,.06); }
.bv-vazio.feito svg{ color:#10B981; }

@media (max-width:700px){
  .bv-oi h3{ font-size:17px; }
  .bv-oi p{ margin-left:0; }
  .bv-item{ flex-wrap:wrap; }
  .bv-marca{ min-width:0; }
  .bv-dir{ width:100%; justify-content:space-between; }
}

@media (prefers-reduced-motion:reduce){ .bv, .bv-item{ animation:none } }

/* O passo 1 dos termos, quando ainda falta escolher o produto. */
.tprod-falta{
  margin-left:8px; font-style:normal; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; color:#B45309;
  background:rgba(245,158,11,.14); border-radius:20px; padding:2px 9px;
}

/* ── Dependentes: UMA barra de filtro ────────────────────────────────────────
   Substitui as três fileiras antigas (cartões + trilhas + pastilhas), que
   repetiam os mesmos rótulos e mudavam dois estados escondidos por clique.
   Agora: cinco recortes, um aceso por vez, cada um com o seu número. */
.dep-barra-filtro{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px;
  margin-top:4px;
}
.dep-seg{
  --cor:#64748B;
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:11px 14px; border-radius:12px; cursor:pointer; text-align:left;
  border:1px solid var(--border-color); background:var(--bg-page);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  animation:tcatEntra .34s cubic-bezier(.22,.9,.28,1) backwards;
  animation-delay:calc(var(--i) * 45ms);
}
.dep-seg:hover{ transform:translateY(-2px); border-color:var(--cor); box-shadow:0 8px 18px rgba(15,23,42,.08); }
.dep-seg-n{
  font-size:22px; font-weight:800; line-height:1.1; color:var(--cor);
  font-variant-numeric:tabular-nums;
}
.dep-seg-r{ font-size:11px; font-weight:600; color:var(--text-muted); line-height:1.3; }
.dep-seg.aceso{
  background:color-mix(in srgb, var(--cor) 12%, transparent);
  border-color:var(--cor); box-shadow:0 0 0 1px var(--cor) inset;
}
.dep-seg.aceso .dep-seg-r{ color:var(--cor); font-weight:700; }
.dep-seg.zero{ opacity:.5; }
.dep-seg.zero.aceso{ opacity:1; }

/* A linha que explica o que está aceso — some a dúvida de "por que só isso?" */
.dep-explica{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding-top:11px; border-top:1px dashed var(--border-color);
  font-size:11.5px; color:var(--text-muted); line-height:1.5;
}
.dep-explica b{ color:var(--text-main); font-weight:700; }
.dep-explica .dep-busca{ margin-left:auto; }

@media (max-width:1000px){
  .dep-barra-filtro{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:640px){
  .dep-barra-filtro{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dep-explica .dep-busca{ margin-left:0; width:100%; }
}
@media (prefers-reduced-motion:reduce){ .dep-seg{ animation:none } }

/* ── Histórico das conferências (dependentes e termos) ───────────────────────
   Mesma cara nas duas telas: o que foi conferido, de qual arquivo, de qual
   empresa, quando e por quem — e um botão para reabrir sem reenviar nada. */
.hist-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:9px 14px; border-radius:8px;
  border:1px solid var(--border-color); background:var(--bg-page);
  color:var(--text-main); font-size:12px; font-weight:600;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.hist-btn:hover{ border-color:#0EA5E9; color:#0369A1; }
.hist-btn.aberto{ border-color:#0EA5E9; color:#0369A1; background:rgba(14,165,233,.10); }

.hist-painel{
  margin-top:12px; border-radius:12px; overflow:hidden;
  border:1px solid var(--border-color); background:var(--bg-page);
  animation:tconfDet .28s cubic-bezier(.22,.9,.28,1) both;
}
.hist-cab{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 15px; border-bottom:1px solid var(--border-color); background:var(--bg-card);
}
.hist-cab b{ display:block; font-size:12.5px; font-weight:800; color:var(--text-main); }
.hist-cab i{ font-style:normal; font-size:10.5px; color:var(--text-muted); }
.hist-busca{
  min-width:240px; padding:6px 12px; border-radius:20px;
  border:1px solid var(--border-color); background:var(--bg-page);
  color:var(--text-main); font-size:11.5px;
}
.hist-busca:focus{ outline:none; border-color:#0EA5E9; }

.hist-lista{ max-height:340px; overflow-y:auto; }
.hist-item{
  display:grid; grid-template-columns:150px minmax(0,1.5fr) minmax(0,1.2fr) auto;
  gap:12px; align-items:center;
  padding:10px 15px; border-bottom:1px solid var(--border-color);
  transition:background .15s ease;
}
.hist-item:last-child{ border-bottom:none; }
.hist-item:hover{ background:color-mix(in srgb, #0EA5E9 5%, transparent); }
.hist-quando b{ display:block; font-size:11.5px; font-weight:700; color:var(--text-main); }
.hist-quando span{ font-size:10px; color:var(--text-muted); }
.hist-oque{ min-width:0; }
.hist-oque b{
  display:block; font-size:11.5px; font-weight:700; color:var(--text-main);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hist-oque span{ display:block; font-size:10px; color:var(--text-muted); line-height:1.4; }
.hist-resumo{ font-size:10.5px; color:var(--text-muted); line-height:1.45; }
.hist-acoes{ display:flex; align-items:center; gap:6px; }
.hist-abrir{
  padding:5px 13px; border-radius:8px; cursor:pointer;
  border:none; background:#0EA5E9; color:#fff; font-size:11px; font-weight:700;
  transition:filter .15s ease;
}
.hist-abrir:hover{ filter:brightness(1.08); }
.hist-x{
  width:24px; height:24px; border-radius:7px; cursor:pointer;
  border:1px solid var(--border-color); background:var(--bg-card);
  color:var(--text-muted); font-size:15px; line-height:1;
}
.hist-x:hover{ color:#EF4444; border-color:#EF4444; }
.hist-vazio{ padding:20px 15px; font-size:11.5px; color:var(--text-muted); line-height:1.6; }

@media (max-width:900px){
  .hist-item{ grid-template-columns:1fr auto; gap:5px; }
  .hist-resumo{ grid-column:1 / -1; }
  .hist-busca{ min-width:0; width:100%; }
}
@media (prefers-reduced-motion:reduce){ .hist-painel{ animation:none } }

/* ── Correção à mão de uma linha de termo ────────────────────────────────────
   O papel escaneado ruim derrota a leitura automática: no termo do PAULO
   ROGERIO (scan de 101 KB) a IA não enxerga a marca e chuta. O botão fica
   discreto, junto do status, e só aparece no hover da linha — mas a marca de
   "corrigido à mão" fica sempre visível, para ninguém confundir o que a máquina
   leu com o que a pessoa decidiu. */
.tcorr{ display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:4px; }
.tcorr-btn{
  padding:2px 8px; border-radius:6px; cursor:pointer; white-space:nowrap;
  border:1px dashed var(--border-color); background:transparent;
  color:var(--text-muted); font-size:9.5px; font-weight:600;
  opacity:0; transition:opacity .15s ease, border-color .15s ease, color .15s ease;
}
tr:hover .tcorr-btn{ opacity:1; }
.tcorr-btn:hover{ border-style:solid; border-color:#0EA5E9; color:#0369A1; }
.tcorr-sel{
  font-size:9px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  color:#B45309; background:rgba(245,158,11,.16);
  border-radius:20px; padding:2px 8px; white-space:nowrap;
}
@media (hover:none){ .tcorr-btn{ opacity:1; } }
.tconf-corrigir{
  display:inline-block; margin-left:6px; padding:2px 9px; border-radius:6px; cursor:pointer;
  border:1px solid #0EA5E9; background:rgba(14,165,233,.10); color:#0369A1;
  font-size:10px; font-weight:700; white-space:nowrap;
}
.tconf-corrigir:hover{ background:#0EA5E9; color:#fff; }

/* ── Terceiro nível na barra de abas: os tipos de termo ──────────────────────
   O menu lateral já tinha três níveis; a barra de abas parava no segundo, então
   quem navegava por ela não alcançava os tipos (Pedro, 20/08/2026). */
.saude-tab-sub{ position:relative; }
.saude-tab-op.tem-mais{ justify-content:space-between; }
.saude-tab-seta{ flex-shrink:0; margin-left:auto; opacity:.55; transition:opacity .15s ease, transform .15s ease; }
.saude-tab-sub:hover .saude-tab-seta{ opacity:1; transform:translateX(2px); }

.saude-tab-menu2{
  position:absolute; left:100%; top:-5px; margin-left:5px; z-index:70;
  min-width:186px; padding:5px; display:flex; flex-direction:column; gap:2px;
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:11px; box-shadow:0 12px 30px rgba(15,23,42,.18);
  opacity:0; pointer-events:none; transform:translateX(-5px);
  transition:opacity .15s ease, transform .15s cubic-bezier(.22,.9,.28,1);
}
/* faixa invisível cobrindo a folga: sem ela o mouse atravessa o vão e o menu some */
.saude-tab-menu2::before{ content:''; position:absolute; left:-8px; top:0; bottom:0; width:8px; }
@media (hover:hover) and (pointer:fine){
  .saude-tab-sub:hover > .saude-tab-menu2{ opacity:1; pointer-events:auto; transform:none; }
}
.saude-tab-sub.aberto > .saude-tab-menu2{ opacity:1; pointer-events:auto; transform:none; }

/* O tipo que está aberto agora fica marcado — abrir o menu tem que dizer onde
   você está, senão escolher vira adivinhação. */
.saude-tab-pt{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--sc, #06B6D4); opacity:.45;
}
.saude-tab-op.aceso{ background:color-mix(in srgb, var(--sc) 12%, transparent); color:var(--sc); font-weight:700; }
.saude-tab-op.aceso .saude-tab-pt{ opacity:1; }
.saude-tab-op.aceso svg{ margin-left:auto; color:var(--sc); }

@media (max-width:900px){ .saude-tab-menu2{ display:none; } }

/* ── Tipo de termo na própria tela, antes de analisar ────────────────────── */
.ttipo-box{
  background:var(--bg-page); border:1px solid var(--border-color);
  border-radius:12px; padding:12px 14px; margin-bottom:14px;
}
.ttipo-tit{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  color:var(--text-muted); margin-bottom:9px;
}
.ttipo-barra{ display:flex; gap:6px; flex-wrap:wrap; }
.ttipo{
  --cor:#06B6D4;
  padding:6px 13px; border-radius:20px; cursor:pointer;
  border:1px solid var(--border-color); background:var(--bg-card);
  color:var(--text-muted); font-size:11.5px; font-weight:600;
  transition:transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.ttipo:hover{ transform:translateY(-1px); border-color:var(--cor); color:var(--text-main); }
.ttipo.aceso{
  border-color:var(--cor); color:var(--cor); font-weight:700;
  background:color-mix(in srgb, var(--cor) 12%, transparent);
  box-shadow:0 0 0 1px var(--cor) inset;
}
.ttipo-dica{
  margin-top:9px; padding-top:9px; border-top:1px dashed var(--border-color);
  font-size:11px; color:var(--text-muted); line-height:1.55;
}