/* ============================================
   EMPYREAN — VISUAL ENHANCEMENTS (overrides)
   ============================================ */

/* ─── Base global ───────────────────────────── */
html { scroll-behavior: smooth; }
::selection { background: rgba(96, 32, 96, 0.15); color: var(--primary); }

/* ─── Scrollbar elegante ────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(96, 32, 96, 0.2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(96, 32, 96, 0.4); }

/* ─── Header glassmorphism ──────────────────── */
.nav-header {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* ─── Mes: texto degradado ──────────────────── */
#monthDisplay {
  background: linear-gradient(135deg, var(--primary) 0%, #b273b2 55%, #9b4d9b 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ─── btn-main: shine al hover ──────────────── */
.btn-main { position: relative; overflow: hidden; }
.btn-main:not(:disabled)::before {
  content: "";
  position: absolute;
  top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.52s ease;
  pointer-events: none;
}
.btn-main:not(:disabled):hover::before { left: 160%; }

/* ─── Appointment card: shine en hover ──────── */
.appointment-card { position: relative; }
.appointment-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.11) 50%, transparent 65%);
  background-size: 300% 100%;
  background-position: 200% 0;
  transition: background-position 0.5s ease;
  pointer-events: none;
}
.appointment-card:hover::after { background-position: -100% 0; }

/* ─── Admin card: shine en hover ────────────── */
.admin-card { position: relative; overflow: hidden; }
.admin-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.09) 50%, transparent 62%);
  background-size: 300% 100%;
  background-position: 200% 0;
  transition: background-position 0.6s ease;
  pointer-events: none;
}
.admin-card:hover::after { background-position: -100% 0; }

/* ─── Inputs: se levantan al enfocar ────────── */
input:focus, select:focus, textarea:focus { transform: translateY(-1px) !important; }

/* ─── Service item: borde izquierdo ─────────── */
.service-item {
  border-left: 3px solid transparent;
  transition: all 0.2s ease, border-left-color 0.2s ease !important;
}
.service-item:hover { border-left-color: var(--primary); }

/* ─── Day chip activo: glow ─────────────────── */
.day-chip.active {
  box-shadow: 0 6px 20px rgba(96, 32, 96, 0.35), 0 0 0 3px rgba(96, 32, 96, 0.12) !important;
}

/* ─── Botones redondos: rotación ────────────── */
.btn-edit:hover { transform: rotate(12deg) scale(1.15) !important; }
.btn-del:hover  { transform: rotate(85deg) scale(1.15) !important; }

/* ─── Tabs: separador degradado ─────────────── */
.tabs { position: relative; }
.tabs::after {
  content: "";
  position: absolute;
  bottom: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96, 32, 96, 0.2), rgba(245, 200, 98, 0.3), rgba(96, 32, 96, 0.2), transparent);
}

/* ─── Profile bubble: sombra premium ────────── */
.profile-bubble {
  box-shadow:
    0 35px 80px rgba(96, 32, 96, 0.22),
    0 0 0 1px rgba(96, 32, 96, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* ─── Modal overlay: blur más intenso ───────── */
.modal-overlay {
  background: rgba(245, 235, 255, 0.82) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ─── Day: sombras mejoradas ─────────────────── */
.day:not(.disabled):not(.full):not(.blocked-day):not(.selected):hover {
  box-shadow: 0 8px 22px rgba(96, 32, 96, 0.2) !important;
}
.day.selected {
  box-shadow: 0 12px 30px rgba(96, 32, 96, 0.5), 0 0 0 3px rgba(96, 32, 96, 0.15) !important;
}

/* ─── Sortable drag: sombra dramática ───────── */
.sortable-drag { box-shadow: 0 20px 45px rgba(96, 32, 96, 0.22) !important; transform: scale(1.02) !important; }

/* ─── Bulk action bar: sombra ───────────────── */
.bulk-action-bar { box-shadow: 0 25px 60px rgba(96, 32, 96, 0.3), 0 0 0 1px rgba(96, 32, 96, 0.1) !important; }