/* ═══════════════════════════════════════════════
   SDMujer — Capa de diseño premium
   Se carga sobre style.css
═══════════════════════════════════════════════ */

/* ─── FONDO ANIMADO ───────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 65% 55% at 12% 14%, rgba(123,47,190,0.055) 0%, transparent 58%),
    radial-gradient(ellipse 55% 65% at 88% 82%, rgba(244,165,154,0.055) 0%, transparent 58%),
    radial-gradient(ellipse 42% 42% at 52% 48%, rgba(157,78,221,0.025) 0%, transparent 68%);
  animation: bgDrift 26s ease-in-out infinite alternate;
}

@keyframes bgDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(1.4%, 1.2%) scale(1.018); }
}

.app-wrapper { position: relative; z-index: 1; }

/* ─── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(123,47,190,0.32), rgba(157,78,221,0.22));
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(123,47,190,0.52), rgba(157,78,221,0.40));
}

/* ─── SIDEBAR: glass premium ──────────────────────────────── */
.sidebar {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(22px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
  border-right: 1px solid rgba(123,47,190,0.08) !important;
  box-shadow: 4px 0 36px rgba(123,47,190,0.07) !important;
}

/* Brand: franja degradada */
.sidebar-brand {
  background: linear-gradient(
    135deg,
    rgba(123,47,190,0.07) 0%,
    rgba(244,165,154,0.06) 60%,
    rgba(123,47,190,0.04) 100%
  ) !important;
  position: relative;
}

.sidebar-brand::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,47,190,0.18), transparent);
}

/* Item activo: gradiente + glow lateral */
.sidebar-item {
  position: relative;
  transition: transform 0.22s cubic-bezier(.4,0,.2,1),
              background 0.22s, color 0.22s, box-shadow 0.22s !important;
}

.sidebar-item:hover {
  background: rgba(123,47,190,0.055) !important;
  transform: translateX(2px);
}

.sidebar-item.active {
  background: linear-gradient(
    135deg,
    rgba(123,47,190,0.10) 0%,
    rgba(157,78,221,0.06) 100%
  ) !important;
  color: var(--accent) !important;
  border-left: 2px solid transparent !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 0 0 1px rgba(123,47,190,0.08),
    0 2px 14px rgba(123,47,190,0.10) !important;
}

/* Indicador izquierdo con glow */
.sidebar-item.active::after {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px rgba(123,47,190,0.65), 0 0 22px rgba(123,47,190,0.30);
}

/* User pill */
.user-pill {
  background: linear-gradient(
    135deg,
    rgba(123,47,190,0.07) 0%,
    rgba(244,165,154,0.05) 100%
  ) !important;
  border: 1px solid rgba(123,47,190,0.12) !important;
}

/* ─── NAVBAR: frosted glass ───────────────────────────────── */
.top-navbar {
  background: rgba(255,255,255,0.84) !important;
  backdrop-filter: blur(22px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(123,47,190,0.07) !important;
  box-shadow:
    0 2px 22px rgba(123,47,190,0.07),
    0 1px 0 rgba(255,255,255,0.85) !important;
}

/* Tab activo: pill con degradado */
.nav-tab {
  transition: transform 0.18s ease, background 0.22s ease, color 0.22s ease !important;
}

.nav-tab:hover { transform: translateY(-1px); }

.nav-tab.active {
  background: linear-gradient(
    135deg,
    rgba(123,47,190,0.12) 0%,
    rgba(157,78,221,0.07) 100%
  ) !important;
  border-color: rgba(123,47,190,0.18) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 12px rgba(123,47,190,0.12) !important;
}

/* ─── KPI CARDS: glass + glow ─────────────────────────────── */
.kpi-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.78) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 18px rgba(123,47,190,0.08),
    0 14px 36px rgba(123,47,190,0.05) !important;
  transition:
    transform 0.36s cubic-bezier(.4,0,.2,1),
    box-shadow 0.36s cubic-bezier(.4,0,.2,1),
    border-color 0.36s !important;
}

.kpi-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(123,47,190,0.13) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.04),
    0 10px 28px rgba(123,47,190,0.14),
    0 24px 52px rgba(123,47,190,0.09),
    0 0 0 1px rgba(123,47,190,0.10) !important;
}

/* Franja superior con degradado animado */
.kpi-card::before {
  background: linear-gradient(
    90deg, var(--accent) 0%, var(--salmon) 50%, var(--accent2) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: gradShift 5s ease-in-out infinite !important;
  height: 3px !important;
}

@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* Valor KPI: texto con gradiente */
.kpi-value {
  background: linear-gradient(135deg, var(--accent) 20%, var(--accent2) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 38px !important;
  font-weight: 800 !important;
}

/* ─── DASH CARDS ──────────────────────────────────────────── */
.dash-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(123,47,190,0.07) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.03),
    0 4px 16px rgba(123,47,190,0.06),
    0 12px 30px rgba(123,47,190,0.04) !important;
  transition:
    transform 0.32s cubic-bezier(.4,0,.2,1),
    box-shadow 0.32s, border-color 0.32s !important;
}

.dash-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(123,47,190,0.12) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.04),
    0 8px 26px rgba(123,47,190,0.12),
    0 22px 44px rgba(123,47,190,0.07) !important;
}

/* ─── FILTERS BAR ─────────────────────────────────────────── */
.filters-bar {
  background: #FFFFFF !important;
  border: 1px solid rgba(123,47,190,0.07) !important;
  box-shadow: 0 2px 14px rgba(123,47,190,0.05) !important;
}

/* ─── PROGRESS BAR con shimmer ────────────────────────────── */
.progress-bar-fill {
  position: relative;
  overflow: hidden;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: shimmer 2.8s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { left: -80%; }
  100% { left: 160%; }
}

/* ─── REFRESH BADGE: pulse suave ─────────────────────────── */
.refresh-badge {
  background: linear-gradient(
    135deg,
    rgba(34,197,94,0.09),
    rgba(34,197,94,0.05)
  ) !important;
  border: 1px solid rgba(34,197,94,0.22) !important;
  animation: pulseBadge 4.5s ease-in-out infinite;
}

@keyframes pulseBadge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.20); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0.00); }
}

/* ─── STATUS DOTS: pulso de vida ─────────────────────────── */
.status-dot.verde {
  animation: pulseGreen 2.8s ease-in-out infinite;
}
.status-dot.rojo {
  animation: pulseRed 2.8s ease-in-out infinite;
}
.status-dot.amarillo {
  animation: pulseYellow 2.8s ease-in-out infinite;
}
.status-dot.naranja {
  animation: pulseOrange 2.8s ease-in-out infinite;
}

@keyframes pulseGreen  {
  0%,100% { box-shadow: 0 0 4px rgba(34,197,94,0.50); }
  50%     { box-shadow: 0 0 12px rgba(34,197,94,0.85), 0 0 22px rgba(34,197,94,0.30); }
}
@keyframes pulseRed    {
  0%,100% { box-shadow: 0 0 4px rgba(239,68,68,0.50); }
  50%     { box-shadow: 0 0 12px rgba(239,68,68,0.85), 0 0 22px rgba(239,68,68,0.30); }
}
@keyframes pulseYellow {
  0%,100% { box-shadow: 0 0 4px rgba(234,179,8,0.50); }
  50%     { box-shadow: 0 0 12px rgba(234,179,8,0.85), 0 0 22px rgba(234,179,8,0.30); }
}
@keyframes pulseOrange {
  0%,100% { box-shadow: 0 0 4px rgba(245,158,11,0.50); }
  50%     { box-shadow: 0 0 12px rgba(245,158,11,0.85), 0 0 22px rgba(245,158,11,0.30); }
}

/* ─── ALERT PILL: abierta parpadea suave ─────────────────── */
.alert-pill.abierta {
  animation: alertPulse 3.2s ease-in-out infinite;
}

@keyframes alertPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.10); }
  50%     { box-shadow: 0 0 0 4px rgba(239,68,68,0.00); }
}

/* ─── BTN PRIMARY: shimmer en hover ─────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.16) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.45s ease;
}

.btn-primary:hover::after { transform: translateX(100%); }

/* ─── DETAIL PANEL ───────────────────────────────────────── */
.detail-panel {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(123,47,190,0.08) !important;
  box-shadow:
    0 2px 18px rgba(123,47,190,0.07),
    0 8px 36px rgba(123,47,190,0.04) !important;
}

/* ─── COMING SOON: icono flotante ────────────────────────── */
.coming-soon-wrap .coming-soon-icon {
  animation: floatIcon 4.5s ease-in-out infinite;
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* ─── ESCUDO: efecto hover ───────────────────────────────── */
.sidebar-escudo img {
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.sidebar-escudo img:hover {
  opacity: 1 !important;
  filter: none !important;
}

/* ─── PAGE CONTENT: fondo transparente ──────────────────── */
.page-content {
  background: transparent !important;
}