/* =============================================================
   DualAI FX — capa de movimiento 3D + correcciones de auditoría
   (2026-10-03). Se carga la última. Puramente decorativa: nunca
   cambia datos, ni interpola métricas. Respeta data-motion="paused"
   y prefers-reduced-motion.
   ============================================================= */

@property --fx-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --fx-jade: 164 233 201;
  --fx-sky: 125 211 252;
  --fx-ease: cubic-bezier(.2, .8, .2, 1);
  --fx-spring: cubic-bezier(.34, 1.4, .64, 1);
  --fx-lift-shadow: 0 28px 60px -24px rgba(0, 0, 0, .65), 0 0 0 1px rgb(var(--fx-jade) / .16);
}
[data-theme="light"] {
  --fx-jade: 35 99 70;
  --fx-sky: 14 116 144;
  --fx-lift-shadow: 0 26px 50px -26px rgba(20, 50, 38, .35), 0 0 0 1px rgb(var(--fx-jade) / .14);
}

/* ── 1. Fondo ambiental 3D (canvas inyectado por fx.js) ───────── */
.fx-ambient {
  position: fixed; inset: 0; z-index: -1;
  width: 100vw; height: 100vh;
  pointer-events: none;
  opacity: .9;
}
[data-theme="light"] .fx-ambient { opacity: .7; }

/* ── 2. Barra de progreso de scroll ───────────────────────────── */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80;
  transform-origin: 0 50%; transform: scaleX(var(--fx-scroll, 0));
  background: linear-gradient(90deg, rgb(var(--fx-jade)), rgb(var(--fx-sky)));
  box-shadow: 0 0 12px rgb(var(--fx-jade) / .6);
  pointer-events: none;
}

/* ── 3. Topbar de cristal al hacer scroll ─────────────────────── */
.app-topbar { transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.app-topbar.fx-scrolled {
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .6);
}

/* ── 4. Tilt 3D + brillo especular ────────────────────────────── */
[data-fx-tilt] {
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) translateY(var(--fx-ty, 0px));
  transition: transform .55s var(--fx-ease), box-shadow .35s var(--fx-ease), border-color .35s;
  will-change: transform;
}
[data-fx-tilt].fx-tilting {
  --fx-ty: -3px;
  transition: transform .09s linear, box-shadow .35s var(--fx-ease), border-color .35s;
  box-shadow: var(--fx-lift-shadow);
  border-color: rgb(var(--fx-jade) / .32);
}
[data-fx-glare] { position: relative; }
.fx-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--fx-gx, 50%) var(--fx-gy, 0%), rgb(var(--fx-jade) / .10), transparent 45%);
  mix-blend-mode: screen;
}
[data-theme="light"] .fx-glare { mix-blend-mode: normal; background: radial-gradient(420px circle at var(--fx-gx, 50%) var(--fx-gy, 0%), rgba(255, 255, 255, .55), transparent 45%); }
.fx-lit > .fx-glare { opacity: 1; }

/* ── 5. Entradas escalonadas y revelado 3D al hacer scroll ────── */
.fx-rise { animation: fx-rise .7s var(--fx-ease) both; animation-delay: var(--fx-delay, 0ms); }
@keyframes fx-rise {
  from { opacity: 0; transform: perspective(1000px) translateY(22px) rotateX(10deg) scale(.985); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.fx-js [data-fx-reveal] {
  opacity: 0;
  transform: perspective(1100px) translateY(36px) rotateX(12deg) scale(.97);
  filter: blur(4px);
  transform-origin: 50% 0%;
  transition: opacity .8s var(--fx-ease), transform .9s var(--fx-ease), filter .8s var(--fx-ease);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-js [data-fx-reveal].fx-in { opacity: 1; transform: none; filter: none; }

/* ── 6. Transiciones entre páginas (View Transitions MPA) ─────── */
@view-transition { navigation: auto; types: fx-nav; }
.app-sidebar { view-transition-name: fx-sidebar; }
.app-topbar { view-transition-name: fx-topbar; }
.app-mobile-nav { view-transition-name: fx-mnav; }
.fx-nav-pill { view-transition-name: fx-nav-pill; }
html:active-view-transition-type(fx-nav)::view-transition-old(root) { animation: fx-vt-out .26s var(--fx-ease) both; }
html:active-view-transition-type(fx-nav)::view-transition-new(root) { animation: fx-vt-in .5s var(--fx-ease) both; }
html:active-view-transition-type(fx-nav)::view-transition-group(fx-nav-pill) { animation-duration: .45s; animation-timing-function: var(--fx-spring); }
@keyframes fx-vt-out { to { opacity: 0; transform: perspective(1400px) translateZ(-80px) rotateX(3deg); filter: blur(4px); } }
@keyframes fx-vt-in  { from { opacity: 0; transform: perspective(1400px) translateY(18px) translateZ(50px) rotateX(-3deg); filter: blur(2px); } }

/* ── 7. Indicador activo de navegación que "vuela" entre páginas ─ */
.fx-js .app-sidebar .app-nav-item[aria-current="page"] { background: transparent; border-color: transparent; box-shadow: none; isolation: isolate; }
.fx-nav-pill {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(100deg, rgb(var(--fx-jade) / .16), rgb(var(--fx-jade) / .05));
  border: 1px solid rgb(var(--fx-jade) / .32);
  box-shadow: 0 0 0 1px rgb(var(--fx-jade) / .04), 0 10px 28px -14px rgb(var(--fx-jade) / .55), inset 0 1px rgba(255, 255, 255, .06);
}
.fx-nav-pill::before {
  content: ''; position: absolute; left: -1px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px;
  background: rgb(var(--fx-jade)); box-shadow: 0 0 12px rgb(var(--fx-jade) / .9);
}
.app-nav-item .ui-icon { transition: transform .35s var(--fx-spring), opacity .2s; }
.app-nav-item:hover .ui-icon { transform: translateX(2px) scale(1.12); opacity: 1; }

/* ── 8. Borde cónico animado (héroes) ─────────────────────────── */
.fx-border {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--fx-angle), transparent 0 62%, rgb(var(--fx-jade) / .85) 74%, rgb(var(--fx-sky) / .7) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fx-spin 7s linear infinite;
  opacity: .8;
}
@keyframes fx-spin { to { --fx-angle: 360deg; } }

/* ── 9. Botones: brillo, pulsación, ripple, magnetismo ────────── */
.btn { transition: transform .25s var(--fx-spring), box-shadow .25s, background .2s, border-color .2s, color .2s; }
.btn:active { transform: scale(.965); }
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .8s var(--fx-ease);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:hover { box-shadow: 0 10px 30px -10px rgb(var(--fx-jade) / .7); }
.fx-rippling { position: relative; overflow: hidden; }
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
  background: currentColor; opacity: .25; animation: fx-ripple .6s var(--fx-ease) forwards;
}
@keyframes fx-ripple { to { transform: scale(2.6); opacity: 0; } }
[data-fx-magnet] { translate: var(--fx-mx, 0px) var(--fx-my, 0px); transition: translate .35s var(--fx-spring), transform .25s var(--fx-spring), box-shadow .25s; }

/* ── 10. Estados vacíos vivos ─────────────────────────────────── */
.kanban-empty, .cap-empty, .pipeline-empty {
  position: relative; display: grid; place-items: center; min-height: 92px; margin: 4px 0;
  border: 1px dashed rgb(var(--fx-jade) / .18); border-radius: 12px;
  color: var(--text-soft); font-size: 12px; letter-spacing: .01em;
  background: linear-gradient(110deg, transparent 20%, rgb(var(--fx-jade) / .045) 50%, transparent 80%) 0 0 / 250% 100%;
  animation: fx-sheen 5.5s ease-in-out infinite;
}
@keyframes fx-sheen { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }

/* ── 11. Pulsos de estado (solo realce; el color sigue siendo el dato) ─ */
.dash-blocked-tag, .status-badge.status-BLOCKED, .status-badge[class*="BLOCKED"] { animation: fx-alert 2.6s ease-in-out infinite; }
@keyframes fx-alert { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } 50% { box-shadow: 0 0 0 4px rgba(248, 113, 113, .16); } }
.ui-progress, .progress-bar { position: relative; overflow: hidden; }
.ui-progress::after, .progress-bar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%) 0 0 / 220% 100%;
  animation: fx-gloss 3.2s ease-in-out infinite;
}
@keyframes fx-gloss { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* ── 12. Calendario: columna de hoy y línea "ahora" ───────────── */
.gcal-day-col.is-today { position: relative; background: linear-gradient(180deg, rgb(var(--fx-jade) / .07), rgb(var(--fx-jade) / .02)); }
.gcal-head-col.is-today { text-shadow: 0 0 18px rgb(var(--fx-jade) / .55); }
.fx-now {
  position: absolute; left: 0; right: 0; height: 2px; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--fx-jade)), rgb(var(--fx-jade) / .25));
  box-shadow: 0 0 10px rgb(var(--fx-jade) / .8);
}
.fx-now::before {
  content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: rgb(var(--fx-jade)); box-shadow: 0 0 0 0 rgb(var(--fx-jade) / .6); animation: fx-ping 2s ease-out infinite;
}
@keyframes fx-ping { to { box-shadow: 0 0 0 10px rgb(var(--fx-jade) / 0); } }
.gcal-hour-row { transition: background .2s; }
.gcal-hour-row:hover { background: rgb(var(--fx-jade) / .07); }
.gcal-event { transition: transform .25s var(--fx-spring), box-shadow .25s; }
.gcal-event:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--fx-lift-shadow); z-index: 5; }

/* ── 13. Micro-detalles globales ──────────────────────────────── */
:focus-visible { outline: 2px solid rgb(var(--fx-jade) / .85); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: rgb(var(--fx-jade) / .25) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgb(var(--fx-jade) / .22); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--fx-jade) / .4); }
.data-table tbody tr { transition: background .2s, box-shadow .2s; }
.data-table tbody tr:hover { background: rgb(var(--fx-jade) / .045); box-shadow: inset 3px 0 0 rgb(var(--fx-jade) / .7); }
.premium-client-monogram, .avatar, .app-account .avatar { transition: transform .4s var(--fx-spring), box-shadow .3s; }
tr:hover .premium-client-monogram { transform: rotateY(180deg) scale(1.05); box-shadow: 0 0 18px rgb(var(--fx-jade) / .35); }
.dash-kpi-value, .kpi-value, .revenue-value { text-shadow: 0 0 24px rgb(var(--fx-jade) / .18); }

/* =============================================================
   CORRECCIONES DE AUDITORÍA VISUAL
   ============================================================= */

/* A1. Kanban en oscuro: columnas blancas y títulos invisibles. */
html:not([data-theme="light"]) .kanban-col,
html:not([data-theme="light"]) .kanban-v2 .kanban-col {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  border: 1px solid var(--border);
}
.kanban-col { border-radius: 16px; padding: 12px; }
.kanban-col-head h3 { color: var(--text); display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: -.01em; }
.kanban-col-head h3 .ui-icon { width: 15px; height: 15px; color: rgb(var(--fx-jade)); }
.kanban-count {
  margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  background: rgb(var(--fx-jade) / .12) !important; color: rgb(var(--fx-jade)) !important; border: 1px solid rgb(var(--fx-jade) / .25);
}
/* A2. Kanban: las columnas no ocupaban el ancho (hueco a la derecha). */
@media (min-width: 901px) {
  .kanban-board.kanban-v2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; overflow: visible; }
  .kanban-board.kanban-v2 .kanban-col { width: auto; min-width: 0; }
}
.kanban-card { border-radius: 12px; }

/* A3. Equipo: botón Eliminar rojo macizo con icono invisible. */
.ui-icon-btn.btn-danger {
  background: transparent; color: var(--danger); border: 1px solid var(--danger-border);
}
.ui-icon-btn.btn-danger:hover { background: var(--danger-bg); color: var(--danger); }

/* A4. Cockpit: tarjetas de proyecto aplastadas/recortadas en la lista. */
.projects-list-scroll > .project-card { flex-shrink: 0; overflow: visible; }

/* A5. Tema claro: .badge genérico verde oscuro sobre verde oscuro. */
[data-theme="light"] .badge:not([class*="badge-"]) {
  background: rgb(var(--fx-jade) / .1); color: rgb(var(--fx-jade)); border: 1px solid rgb(var(--fx-jade) / .25);
}

/* =============================================================
   ACCESIBILIDAD: movimiento pausado / reducido
   ============================================================= */
[data-motion="paused"] .fx-ambient { opacity: .5; }
[data-motion="paused"] [data-fx-tilt] { transform: none !important; }
[data-motion="paused"] .fx-border,
[data-motion="paused"] .fx-glare,
[data-motion="paused"] .fx-ripple { display: none; }
[data-motion="paused"] [data-fx-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
[data-motion="paused"] .fx-rise { animation: none !important; }
[data-motion="paused"] [data-fx-magnet] { translate: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .fx-ambient, .fx-border, .fx-glare { display: none; }
  [data-fx-tilt] { transform: none !important; }
  [data-fx-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .fx-rise, .kanban-empty, .cap-empty, .pipeline-empty, .ui-progress::after, .progress-bar::after, .dash-blocked-tag, .fx-now::before { animation: none !important; }
}