@import url('fonts.css');

:root {
  /* Premium Dark Theme Palette */
  --bg-dark: #2A0845; /* Deep purple */
  --bg-darker: #1A052B;
  --bg-panel: rgba(20, 5, 30, 0.7);
  --text-main: #FFFFFF;
  --text-muted: #B39DDB;
  
  /* Brand Colors */
  --color-primary: #8A2BE2;
  --color-secondary: #00E5FF;
  --color-accent: #FFD700;

  /* Option Colors (Vibrant) */
  --color-opt-1: #AEEA00; /* Lime */
  --color-opt-2: #8E24AA; /* Purple */
  --color-opt-3: #FF3D00; /* Orange/Red */
  --color-opt-4: #00B0FF; /* Light Blue */
  --color-opt-5: #FF0054; /* Pink */
  --color-opt-6: #FFAB00; /* Amber */

  --font-display: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --border-radius-xl: 30px;
  
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --border-glass: 1px solid rgba(255, 255, 255, 0.1);
}

body {
  font-family: var(--font-body);
  color: var(--text-main);
  background-color: var(--bg-darker);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Animations */
@keyframes pop-in { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes slide-up { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.4); } 70% { box-shadow: 0 0 0 15px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Utility Classes */
.glass-panel {
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--border-glass);
  box-shadow: var(--shadow-glass);
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-premium {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  border: none;
  border-radius: var(--border-radius-md);
  padding: 12px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4);
}
.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  color: white;
}

.opt-color-1 { background-color: var(--color-opt-1) !important; color: #111 !important; }
.opt-color-2 { background-color: var(--color-opt-2) !important; color: white !important; }
.opt-color-3 { background-color: var(--color-opt-3) !important; color: white !important; }
.opt-color-4 { background-color: var(--color-opt-4) !important; color: #111 !important; }
.opt-color-5 { background-color: var(--color-opt-5) !important; color: white !important; }
.opt-color-6 { background-color: var(--color-opt-6) !important; color: #111 !important; }

/* Responsive Adjustments */
@media (max-width: 768px) {
  /* Fix desfasados buttons in modals */
  .modal-footer {
    flex-direction: column;
    justify-content: stretch;
    gap: 10px;
  }
  .modal-footer > .btn {
    width: 100%;
    margin: 0 !important;
  }
}