/* Kimolizer III - Retrowave/Synthwave Theme */
/* Color palette */
:root {
  --color-primary: #FF006E;
  --color-secondary: #00D9FF;
  --color-accent: #8338EC;
  --color-bg-dark: #0A0E27;
  --color-bg-light: #1A1F3A;
  --color-neon-yellow: #FFBE0B;
  --color-neon-pink: #FF10F0;
  --color-neon-green: #06FFA5;
}

/* Main container styling */
#root {
  background: linear-gradient(135deg, #0A0E27 0%, #1A0F2E 25%, #2D1B4E 50%, #0A0E27 75%, #0A0E27 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Header and navigation styling */
header, nav, [role="navigation"] {
  background: rgba(10, 14, 39, 0.95) !important;
  border-bottom: 2px solid var(--color-primary) !important;
  box-shadow: 0 0 20px rgba(255, 0, 110, 0.3), inset 0 0 20px rgba(0, 217, 255, 0.1) !important;
}

/* Kimolizer III branding overlay */
.splash-content h1, h1[class*="title"], [class*="logo"] h1, div > h1 {
  position: relative !important;
  color: transparent !important;
  text-shadow: none !important;
}

.splash-content h1::before, h1[class*="title"]::before, [class*="logo"] h1::before, div > h1::before {
  content: "Kimolizer III" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #FFBE0B !important;
  font-weight: 900 !important;
  text-shadow: 0 0 20px var(--color-primary), 0 0 40px var(--color-secondary), 0 0 60px var(--color-accent) !important;
  letter-spacing: 2px !important;
  font-size: 3.5rem !important;
  font-family: "Arial Black", sans-serif !important;
}

.splash-content h2, h2[class*="subtitle"], [class*="logo"] h2, div > h2 {
  color: var(--color-secondary) !important;
  text-shadow: 0 0 15px var(--color-primary), 0 0 10px var(--color-accent) !important;
}

/* Button styling for all interactive elements */
button, [role="button"], .btn, .button {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  color: #fff !important;
  border: 2px solid var(--color-secondary) !important;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(255, 0, 110, 0.5), inset 0 0 10px rgba(0, 217, 255, 0.2) !important;
}

button:hover, [role="button"]:hover, .btn:hover, .button:hover {
  box-shadow: 0 0 30px rgba(255, 0, 110, 0.8), 0 0 20px var(--color-secondary), inset 0 0 10px rgba(255, 0, 110, 0.3) !important;
  transform: translateY(-2px);
}

/* Input fields */
input, textarea, select, [type="text"], [type="email"], [type="password"] {
  background: rgba(26, 31, 58, 0.8) !important;
  border: 1px solid var(--color-secondary) !important;
  color: #fff !important;
  transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus, [type="text"]:focus, [type="email"]:focus, [type="password"]:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 10px var(--color-primary), inset 0 0 5px rgba(255, 0, 110, 0.2) !important;
}

/* Link styling */
a, [role="link"] {
  color: var(--color-secondary);
  transition: all 0.3s ease;
}

a:hover, [role="link"]:hover {
  color: var(--color-primary);
  text-shadow: 0 0 10px var(--color-secondary);
}

/* Text effects */
.neon-text {
  text-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-secondary), 0 0 30px var(--color-accent);
  font-weight: 700;
}

.neon-glow {
  box-shadow: 0 0 20px var(--color-primary), 0 0 40px var(--color-secondary), inset 0 0 10px rgba(255, 0, 110, 0.1);
}

/* Control panels and containers */
.control-panel, .panel, .modal, [role="dialog"] {
  background: rgba(26, 31, 58, 0.9) !important;
  border: 1px solid var(--color-secondary) !important;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(255, 0, 110, 0.3), inset 0 0 10px rgba(0, 217, 255, 0.1) !important;
}

/* Sliders and range inputs */
input[type="range"] {
  accent-color: var(--color-primary) !important;
}

/* Tabs and navigation items */
[role="tab"], .tab, .nav-item {
  transition: all 0.3s ease;
  color: #aaa;
}

[role="tab"][aria-selected="true"], .tab.active, .nav-item.active {
  color: var(--color-secondary);
  border-bottom: 2px solid var(--color-primary);
  box-shadow: 0 0 10px rgba(255, 0, 110, 0.4);
}

[role="tab"]:hover, .tab:hover, .nav-item:hover {
  color: var(--color-secondary);
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.4);
}

/* Icon styling */
svg, [role="img"] {
  filter: drop-shadow(0 0 8px rgba(255, 0, 110, 0.4));
  transition: all 0.3s ease;
}

svg:hover, [role="img"]:hover {
  filter: drop-shadow(0 0 15px rgba(0, 217, 255, 0.6));
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(10, 14, 39, 0.5);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--color-primary), var(--color-accent));
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--color-accent), var(--color-primary));
  box-shadow: 0 0 10px rgba(255, 0, 110, 0.6);
}

/* Progress bars */
progress, [role="progressbar"] {
  background: rgba(26, 31, 58, 0.8);
  border-radius: 10px;
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background: rgba(26, 31, 58, 0.8);
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: 10px;
  box-shadow: 0 0 15px var(--color-primary);
}

/* Placeholder text */
::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Selection highlight */
::selection {
  background: var(--color-primary);
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 217, 255, 0.5);
}

/* Animations */
@keyframes neon-flicker {
  0%, 100% {
    text-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-secondary);
  }
  50% {
    text-shadow: 0 0 5px var(--color-primary), 0 0 10px var(--color-secondary);
  }
}

.neon-flicker {
  animation: neon-flicker 2s infinite;
}

/* Disabled state */
button:disabled, input:disabled, select:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Active/Focus states */
:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px;
}

/* Ensure text is readable */
body, #root {
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/* Logo enhancement */
.logo, [alt*="logo" i], [alt*="icon" i] {
  filter: drop-shadow(0 0 10px rgba(255, 0, 110, 0.5)) drop-shadow(0 0 20px rgba(0, 217, 255, 0.3));
  transition: all 0.3s ease;
}

.logo:hover, [alt*="logo" i]:hover, [alt*="icon" i]:hover {
  filter: drop-shadow(0 0 15px rgba(255, 0, 110, 0.8)) drop-shadow(0 0 30px rgba(0, 217, 255, 0.6));
}

/* Splash and intro screens - excludes Kimolizer custom intro */
.splash, .intro:not(#kimo-intro):not(.kimo-intro-title), [class*="splash"], [class*="intro"]:not([class*="kimo-intro"]) {
  background: linear-gradient(135deg, #0A0E27 0%, #1A0F2E 25%, #2D1B4E 50%, #0A0E27 75%, #0A0E27 100%) !important;
  background-attachment: fixed !important;
}

/* Enhance titles throughout the app CAMBIE ESTO */
h1, h2, h3 {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 0, 110, 0.3);
}

/* Glassmorphism effect for panels */
.glass, [class*="panel"], [class*="card"] {
  background: rgba(26, 31, 58, 0.6) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 217, 255, 0.2) !important;
  border-radius: 10px;
}

/* === KIMOLIZER UI UTILS === */
.kimolizer-button,
.group-button {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.kimolizer-button:hover,
.group-button:hover {
  transform: translateY(-1px);
}

.neon-outline {
  box-shadow: 0 0 18px rgba(255, 0, 110, 0.35), 0 0 32px rgba(0, 217, 255, 0.2);
}

.text-neon {
  color: #fff;
  text-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-secondary), 0 0 30px var(--color-accent);
}


/* Cambiar el aspecto del botón Visualizer para que parezca un botón de configuración */
a[href="/"], a[href="/lab/kimolizer33/"], button:contains("Visualizer") {
  cursor: pointer;
  /* Opcional: añade un ícono de engranaje o cambia el color */
}


/* Forzar color blanco para el icono de efectos */
a[data-kimolizer-effect] svg,
a[data-kimolizer-effect] svg path {
  fill: #ffffff !important;
}