/* PULSO-FONDO v1 -- fondo animado (red de partículas) para todas las páginas.
   Se activa con html.pf-on (lo pone pulso-fondo.js). Tema oscuro y claro.
   Apagar: botón junto al de tema, o localStorage.pulsoFondo='off'. */
#pfCanvas,.pf-orbs{position:fixed;inset:0;pointer-events:none;display:none}
html.pf-on #pfCanvas{display:block;z-index:-1}
html.pf-on .pf-orbs{display:block;z-index:-2;overflow:hidden}
.pf-orbs span{position:absolute;width:42vw;height:42vw;border-radius:50%;filter:blur(90px);animation:pfOrb 16s ease-in-out infinite alternate}
.pf-orbs span:nth-child(1){left:-12vw;top:-14vw}
.pf-orbs span:nth-child(2){right:-12vw;bottom:-16vw;animation-delay:-8s}
@keyframes pfOrb{to{transform:translate(9vw,7vw) scale(1.18)}}

/* ---- base de la página: el body queda transparente para que se vea el lienzo ---- */
html.pf-on body,html.pf-on body.v3,html.pf-on body.v4{background:transparent !important}
html.pf-on[data-theme="dark"]{background:
  radial-gradient(1100px 600px at 85% -10%,rgba(109,74,255,.22) 0,transparent 60%),
  radial-gradient(900px 520px at 0% 8%,rgba(242,106,46,.16) 0,transparent 55%),#0b0c11 !important}
html.pf-on:not([data-theme="dark"]){background:
  radial-gradient(1100px 600px at 85% -10%,rgba(155,133,255,.20) 0,transparent 60%),
  radial-gradient(900px 520px at 0% 8%,rgba(255,154,92,.18) 0,transparent 55%),#f5f4f1 !important}
html.pf-on[data-theme="dark"] .pf-orbs span:nth-child(1){background:#FF9A5C;opacity:.26}
html.pf-on[data-theme="dark"] .pf-orbs span:nth-child(2){background:#9B85FF;opacity:.30}
html.pf-on:not([data-theme="dark"]) .pf-orbs span:nth-child(1){background:#FFB487;opacity:.30}
html.pf-on:not([data-theme="dark"]) .pf-orbs span:nth-child(2){background:#B9A9FF;opacity:.32}

/* ---- tarjetas semitransparentes (las variables de color de tarjeta de cada página) ---- */
html.pf-on[data-theme="dark"],html.pf-on[data-theme="dark"] body.v3,html.pf-on[data-theme="dark"] body.v4{
  --bg-card:rgba(22,23,31,.70) !important;--bg-card-2:rgba(28,29,39,.76) !important;--c:rgba(22,23,31,.70) !important;--c2:rgba(28,29,39,.76) !important;
  --bg-panel:rgba(22,23,31,.70) !important;--v3panel:rgba(22,23,31,.70) !important;--v3panel2:rgba(28,29,39,.76) !important}
html.pf-on:not([data-theme="dark"]),html.pf-on:not([data-theme="dark"]) body.v3,html.pf-on:not([data-theme="dark"]) body.v4{
  --bg-card:rgba(255,255,255,.74) !important;--bg-card-2:rgba(250,249,247,.80) !important;--c:rgba(255,255,255,.74) !important;--c2:rgba(250,249,247,.80) !important;
  --bg-panel:rgba(255,255,255,.74) !important;--v3panel:rgba(255,255,255,.74) !important;--v3panel2:rgba(250,249,247,.80) !important}
/* portal del agente (screen-pop): más opaco y sin desenfoque, para que vaya ligero */
html.pf-on.pf-pop[data-theme="dark"],html.pf-on.pf-pop[data-theme="dark"] body.v3,html.pf-on.pf-pop[data-theme="dark"] body.v4{
  --bg-card:rgba(22,23,31,.86) !important;--c:rgba(22,23,31,.86) !important;--c2:rgba(28,29,39,.88) !important;--v3panel:rgba(22,23,31,.86) !important;--v3panel2:rgba(28,29,39,.88) !important}
html.pf-on.pf-pop:not([data-theme="dark"]),html.pf-on.pf-pop:not([data-theme="dark"]) body.v3,html.pf-on.pf-pop:not([data-theme="dark"]) body.v4{
  --bg-card:rgba(255,255,255,.86) !important;--c:rgba(255,255,255,.86) !important;--c2:rgba(250,249,247,.90) !important;--v3panel:rgba(255,255,255,.86) !important;--v3panel2:rgba(250,249,247,.90) !important}
/* ventanas flotantes (modales, menús, asistente, avisos) siguen opacas */
html.pf-on[data-theme="dark"] :is(.modal,.modal-box,.ia-modal,.menu-transferir,.bot-panel,.toast,.ia-toast,[role="dialog"]){
  --bg-card:#16171f !important;--bg-card-2:#1c1d27 !important;--c:#16171f !important;--c2:#1c1d27 !important;--bg-panel:#16171f !important;--v3panel:#16171f !important;--v3panel2:#1c1d27 !important}
html.pf-on:not([data-theme="dark"]) :is(.modal,.modal-box,.ia-modal,.menu-transferir,.bot-panel,.toast,.ia-toast,[role="dialog"]){
  --bg-card:#fff !important;--bg-card-2:#faf9f7 !important;--c:#fff !important;--c2:#faf9f7 !important;--bg-panel:#fff !important;--v3panel:#fff !important;--v3panel2:#faf9f7 !important}
/* menú lateral */
html.pf-on[data-theme="dark"] .sidebar{background:rgba(18,19,26,.80) !important}
html.pf-on:not([data-theme="dark"]) .sidebar{background:rgba(255,255,255,.78) !important}
/* desenfoque solo en escritorio y fuera del portal del agente */
@media (min-width:900px){
  html.pf-on:not(.pf-pop) :is(.sidebar,.card,.kpi,.amd-card,.panel,.control-panel,.v2-horas,.clock-card,.form){
    -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15)}
}
/* botón encender/apagar fondo */
.pf-btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.pf-btn .pf-ico{position:static !important;width:20px;height:20px;opacity:1 !important;transform:none !important}
.pf-btn .pf-x{opacity:0;transition:opacity .2s}
html:not(.pf-on) .pf-btn .pf-x{opacity:1}
html:not(.pf-on) .pf-btn .pf-net{opacity:.45}
.pf-btn.pf-flot{position:fixed;left:12px;bottom:12px;z-index:55;width:34px;height:34px;border-radius:11px;border:1px solid var(--ln,var(--border,#e6e3dc));
  background:var(--c,var(--bg-card,#fff));color:var(--mu,var(--text-muted,#8f8c98));opacity:.6;box-shadow:0 4px 12px -6px rgba(0,0,0,.35)}
.pf-btn.pf-flot:hover{opacity:1}
.pf-btn.pf-flot .pf-ico{width:17px;height:17px}
.pf-par{display:inline-flex;flex-direction:column;gap:4px;flex-shrink:0}
.pf-par .pf-apilado{height:26px !important;min-height:0 !important;border-radius:9px !important}
.pf-par .pf-apilado svg{width:16px !important;height:16px !important}
.pf-btn.pf-suave{opacity:.7}.pf-btn.pf-suave:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.pf-orbs span{animation:none}}