/* ============================================================
   Panel P01 · capa "Flujo" (2026-06-01) · ADITIVA sobre _styles.css
   Reusa el efecto de web-design/production/flujo.js + flujo.css con
   guardas de herramienta (ver project_realflowai_panel_rediseno_marca_flujo).
   Los elementos #rfa-* los inyecta _flujo.js.
   ============================================================ */
:root{
  --rfa-grad:linear-gradient(100deg,#5b7cff 0%,#7B61FF 45%,#4DB8C7 100%);
  --rfa-grad-orange:linear-gradient(120deg,#F0A500 0%,#E85D04 60%,#E85D04 100%);
}

/* fondo de flujo + scrim + glows · detrás de todo */
#rfa-flow{position:fixed;inset:0;z-index:0;opacity:.5;pointer-events:none;transition:opacity .4s ease;
  /* GUARDA 1: el flujo vive arriba y se desvanece hacia el contenido */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 150px,transparent 470px);
          mask-image:linear-gradient(to bottom,#000 0,#000 150px,transparent 470px);}
/* GUARDA 2: vistas densas (calendario, conversación) → flujo casi quieto */
body[data-flow="calm"] #rfa-flow{opacity:.15;}
.rfa-glow{position:fixed;z-index:0;border-radius:50%;filter:blur(130px);opacity:.13;pointer-events:none;}
.rfa-glow.p{width:520px;height:520px;background:#7B61FF;top:6%;left:30%;}
.rfa-glow.c{width:460px;height:460px;background:#66D4E5;top:55%;right:-160px;}
#rfa-scrim{position:fixed;inset:0;z-index:0;pointer-events:none;background:rgba(10,22,40,.42);}
body.rfa-fx .rfa-glow.p{animation:rfaDrift1 20s ease-in-out infinite;}
body.rfa-fx .rfa-glow.c{animation:rfaDrift2 24s ease-in-out infinite;}
@keyframes rfaDrift1{50%{transform:translate(80px,70px);}}
@keyframes rfaDrift2{50%{transform:translate(-70px,50px);}}

/* en tema claro: scrim claro + flujo más tenue (legibilidad) */
[data-theme="light"] #rfa-scrim{background:rgba(244,246,249,.5);}
[data-theme="light"] #rfa-flow{opacity:.26;}
[data-theme="light"] .rfa-glow{opacity:.10;}

/* sube TODO el contenido real por encima del flujo · universal y robusto
   (funciona en cualquiera de las 6 apps sin conocer su wrapper). Los #rfa-* se
   re-bajan a z-index:0 abajo. Modales/overlays con z-index alto siguen arriba. */
body > *{position:relative;z-index:1;}
#rfa-flow,#rfa-scrim,.rfa-glow{z-index:0;}

/* gradiente firma · _flujo.js lo aplica a la palabra "Flow" si aparece */
.rfa-grad{background:var(--rfa-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block;}

/* reveal al scroll (solo con efectos activos) */
body.rfa-fx .rfa-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
body.rfa-fx .rfa-reveal.rfa-in{opacity:1;transform:none;}

/* === Firma IA · burbujas (alineado a opcion_C) ===
   IA (bot, role=assistant) → PÚRPURA · operador manual (role=human) → ÁMBAR.
   Sobreescribe el naranja/verde anterior. */
.msg.assistant{ background:rgba(123,97,255,.13); border-color:rgba(123,97,255,.40); }
.msg.assistant .role{ color:#A897E2; }
.msg.human{ background:var(--amber-bg); border-color:var(--amber-border); }
.msg.human .role{ color:var(--amber); }
[data-theme="light"] .msg.assistant{ background:rgba(123,97,255,.10); }
[data-theme="light"] .msg.assistant .role{ color:#6a4dff; }
/* chat inline del dashboard: burbuja del bot a púrpura */
.chat-bubble-right{ background:rgba(123,97,255,.13)!important; }

/* GUARDA accesibilidad: respeta reduce-motion (apaga movimiento, muestra todo) */
@media (prefers-reduced-motion:reduce){
  #rfa-flow,.rfa-glow{animation:none;}
  .rfa-reveal{opacity:1!important;transform:none!important;}
}