/* ==========================================================================
   ConjuntaIA — Amethyst & Lilac Luxury Theme Overlay
   Tonos lilas y morados con iluminación ambiental y elegancia premium
   ========================================================================== */

:root {
  --hd-accent: #9333ea !important;
  --hd-accent-rgb: 147, 51, 234 !important;
  --hd-accent-soft: rgba(147, 51, 234, 0.12) !important;
  --hd-purple: #7c3aed !important;
  --hd-pink: #d946ef !important;
  --hd-lilac: #c084fc !important;
  --accent: #9333ea !important;
  --accent-rgb: 147, 51, 234 !important;
  --ring: #c084fc !important;
  --primary: #9333ea !important;
  --primary-foreground: #ffffff !important;
}

.dark,
:root[data-theme="dark"],
.dark .home-dashboard {
  --hd-accent: #a855f7 !important;
  --hd-accent-rgb: 168, 85, 247 !important;
  --hd-accent-soft: rgba(168, 85, 247, 0.16) !important;
  --hd-purple: #7c3aed !important;
  --hd-pink: #e879f9 !important;
  --hd-lilac: #c084fc !important;
  --accent: #a855f7 !important;
  --accent-foreground: #ffffff !important;
  --ring: #c084fc !important;
  --primary: #a855f7 !important;
  --hd-shell: #06040a !important;
  --hd-card: #0f0a18 !important;
  --hd-border: rgba(168, 85, 247, 0.14) !important;
  --hd-border-hover: rgba(192, 132, 252, 0.35) !important;
}

/* Global Selection and Scrollbar in Lilac/Amethyst */
::selection {
  background: rgba(168, 85, 247, 0.35) !important;
  color: #ffffff !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.5);
}

/* Glowing Amethyst & Lilac Orb Backdrop */
.home-dashboard .hd-orb {
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.26) 0%,
    rgba(124, 58, 237, 0.14) 35%,
    transparent 65%
  ) !important;
  filter: blur(75px) !important;
}

.dark .home-dashboard .hd-orb {
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.3) 0%,
    rgba(147, 51, 234, 0.16) 40%,
    transparent 70%
  ) !important;
  filter: blur(85px) !important;
}

/* Hero Section Gradient Mesh */
.welcome-section {
  background:
    radial-gradient(ellipse at 50% -15%, rgba(168, 85, 247, 0.18), transparent 60%),
    radial-gradient(ellipse at 85% 90%, rgba(217, 70, 239, 0.12), transparent 55%),
    radial-gradient(ellipse at 15% 90%, rgba(124, 58, 237, 0.1), transparent 55%),
    var(--card) !important;
  border-color: rgba(168, 85, 247, 0.16) !important;
}

.dark .welcome-section {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(168, 85, 247, 0.24), transparent 65%),
    radial-gradient(ellipse at 85% 85%, rgba(232, 121, 249, 0.14), transparent 60%),
    radial-gradient(ellipse at 15% 85%, rgba(124, 58, 237, 0.16), transparent 60%),
    #0e0918 !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
  box-shadow: 0 20px 50px -15px rgba(10, 4, 20, 0.8) !important;
}

/* Gradient word ("favorita.") */
.welcome-section > h2 > span,
.home-dashboard h1 span,
.home-dashboard h2 span {
  background: linear-gradient(135deg, #a855f7 0%, #c084fc 45%, #e879f9 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 14px rgba(168, 85, 247, 0.45));
}

/* Announcement Pill ("★ CONJUNTA VIP") */
.announcement-pill,
.hd-intro-pill {
  background: rgba(147, 51, 234, 0.08) !important;
  border: 1px solid rgba(147, 51, 234, 0.22) !important;
  color: #7c3aed !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.08);
}

.dark .announcement-pill,
.dark .hd-intro-pill {
  background: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.32) !important;
  color: #e9d5ff !important;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.15);
}

.announcement-pill:hover,
.hd-intro-pill:hover {
  background: rgba(147, 51, 234, 0.16) !important;
  border-color: #9333ea !important;
  box-shadow: 0 0 18px rgba(147, 51, 234, 0.3);
}

.dark .announcement-pill:hover,
.dark .hd-intro-pill:hover {
  background: rgba(168, 85, 247, 0.22) !important;
  border-color: #c084fc !important;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.4);
}

.announcement-pill span:first-child,
.hd-intro-pill span:first-child {
  background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
}

/* Service status indicator dot */
.home-dashboard span[style*="background: var(--hd-accent)"],
.home-dashboard span[style*="background:var(--hd-accent)"] {
  background: #9333ea !important;
}
.dark .home-dashboard span[style*="background: var(--hd-accent)"],
.dark .home-dashboard span[style*="background:var(--hd-accent)"] {
  background: #c084fc !important;
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.7);
}

/* Conic Glowing Search Bar */
.home-dashboard .hd-search:before {
  background: conic-gradient(
    from var(--hd-glow-angle, 0deg),
    #a855f7 0deg,
    #7c3aed 90deg,
    #e879f9 180deg,
    #c084fc 270deg,
    #a855f7 360deg
  ) !important;
}

.home-dashboard .hd-search:after {
  background: conic-gradient(
    from var(--hd-glow-angle, 0deg),
    #a855f7,
    #7c3aed,
    #e879f9,
    #c084fc,
    #a855f7
  ) !important;
  filter: blur(16px) !important;
}

/* Stat Cards & Hover */
.home-dashboard .hd-stat-card:hover {
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 14px 30px -10px rgba(124, 58, 237, 0.28) !important;
}

.home-dashboard .hd-stat-card:hover .hd-stat-icon,
.home-dashboard .hd-stat-card:hover .hd-device-pill {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #c084fc !important;
}

/* AI Agent Sidebar Button Glow */
.agent-link,
a[href="/agent"] {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #a855f7 100%) !important;
  box-shadow: 0 4px 20px -2px rgba(124, 58, 237, 0.55) !important;
  color: #ffffff !important;
}

.agent-link:hover,
a[href="/agent"]:hover {
  box-shadow: 0 6px 26px -2px rgba(147, 51, 234, 0.75) !important;
  filter: brightness(1.1);
}

/* Active navigation items in sidebar */
.sidebar nav li a.active,
.sidebar nav li a[aria-current="page"] {
  background: rgba(168, 85, 247, 0.14) !important;
  color: #c084fc !important;
  border-right: 3px solid #a855f7;
}

/* Primary buttons */
.button.primary,
button.primary,
.cta-button {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
  box-shadow: 0 4px 18px -3px rgba(124, 58, 237, 0.45) !important;
}

.button.primary:hover,
button.primary:hover,
.cta-button:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important;
  box-shadow: 0 6px 22px -3px rgba(147, 51, 234, 0.65) !important;
}

/* View all / Ver todo button */
a[href="/tools"].font-medium {
  background: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.28) !important;
  color: #a855f7 !important;
}
.dark a[href="/tools"].font-medium {
  color: #c084fc !important;
}
a[href="/tools"].font-medium:hover {
  background: rgba(168, 85, 247, 0.22) !important;
  border-color: #c084fc !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.35) !important;
}

/* Subscription plan badge & SVG ring */
.hd-sub-main span[style*="linear-gradient"] {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 60%, #a855f7 100%) !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}

#hd-ring-grad stop:first-child {
  stop-color: #a855f7 !important;
}
#hd-ring-grad stop:last-child {
  stop-color: #7c3aed !important;
}
circle[stroke="url(#hd-ring-grad)"] {
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.45));
}

/* Tool cards hover */
.hd-tool:hover {
  border-color: rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 14px 32px -8px rgba(124, 58, 237, 0.22) !important;
  transform: translateY(-2px);
}
.hd-tool:hover h3 {
  color: #c084fc !important;
}

/* Tabs list */
div[role="tablist"] {
  border-color: rgba(168, 85, 247, 0.18) !important;
}
div[role="tablist"] span[aria-hidden="true"] {
  background: rgba(168, 85, 247, 0.16) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
}
div[role="tablist"] button[aria-selected="true"] {
  color: #c084fc !important;
  font-weight: 600 !important;
}

/* Card hover glow */
.card-hover:hover,
.tool-card:hover {
  border-color: rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 16px 36px -12px rgba(124, 58, 237, 0.25) !important;
}

/* Smooth Focus Rings */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid #a855f7 !important;
  outline-offset: 2px !important;
}