:root {
  /* Colores de fondo */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-card: #1e293b;
  --bg-overlay: rgba(15, 23, 42, 0.8);

  /* Colores de texto */
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;

  /* Colores de borde */
  --border-primary: #334155;
  --border-secondary: #475569;
  --border-accent: #3b82f6;

  /* Efectos */
  --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.3);
  --shadow-navbar: 0 4px 20px rgba(0, 0, 0, 0.4);
  --backdrop-blur: blur(20px);
}

/* ===== ESTILOS MODO OSCURO ===== */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* ===== NAVEGACIÓN ===== */
.navbar {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: var(--backdrop-blur);
  border-bottom: 1px solid var(--border-primary);
}

.navbar.scrolled {
  background: rgba(15, 23, 42, 0.95);
  box-shadow: var(--shadow-navbar);
}

.logo-text {
  color: var(--text-primary);
}

.navbar-nav .nav-link {
  color: var(--text-secondary);
}

.navbar-nav .nav-link:hover {
  color: var(--primary-300);
}

/* ===== SWITCHER DE TEMA - MODO OSCURO ===== */
[data-theme="dark"] .theme-switch-track {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

[data-theme="dark"] .theme-switch-thumb {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"]
  .theme-switch:not(:checked)
  + .theme-switch-label
  .theme-switch-track {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

[data-theme="dark"] .theme-switch-tooltip {
  background: #f8fafc;
  color: #1e293b;
}

[data-theme="dark"] .theme-switch-tooltip::before {
  border-bottom-color: #f8fafc;
}

/* ===== BOTONES NAVEGACIÓN - MODO OSCURO ===== */
[data-theme="dark"] .btn-login {
  border-color: #475569;
  color: #cbd5e1;
}

[data-theme="dark"] .btn-login:hover {
  color: #60a5fa;
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .btn-demo {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4),
    0 1px 2px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .btn-demo:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* Ajuste de animación pulse para modo oscuro */
[data-theme="dark"] .btn-demo {
  animation: pulse-demo-dark 3s infinite;
}

@keyframes pulse-demo-dark {
  0%,
  100% {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4),
      0 0 0 0 rgba(59, 130, 246, 0.5);
  }
  50% {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4),
      0 0 0 8px rgba(59, 130, 246, 0);
  }
}

/* ===== HERO SECTION ===== */
.hero-section {
  background: linear-gradient(
    135deg,
    var(--bg-primary) 0%,
    var(--bg-secondary) 100%
  );
}

.hero-shape {
  opacity: 0.08;
}

.hero-gradient {
  background: radial-gradient(
      circle at 20% 80%,
      rgba(59, 130, 246, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(139, 92, 246, 0.15) 0%,
      transparent 50%
    );
}

.hero-badge .badge-text {
  background: rgba(59, 130, 246, 0.15);
  color: var(--primary-300);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.floating-card {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-primary);
}

/* ===== MOCKUP ===== */
.mockup-container {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-card);
}

.mockup-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
}

.calendar-header {
  background: var(--gradient-primary);
}

.time-slot {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
}

.time-slot.booked {
  background: var(--primary-600);
  color: var(--white);
}

.time-slot.available {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ===== ACERCA DE ===== */
.about-visual .visual-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}

.phone-mockup {
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  box-shadow: var(--shadow-card);
}

.app-screen {
  background: var(--bg-secondary);
}

.feature-highlight {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
}

.feature-highlight:hover {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-card);
}

.feature-icon {
  background: rgba(59, 130, 246, 0.15);
  color: var(--primary-400);
}

/* ===== CARACTERÍSTICAS ===== */
.features-section {
  background: linear-gradient(
    135deg,
    var(--bg-secondary) 0%,
    var(--bg-primary) 100%
  );
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
}

.feature-card:hover {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-card);
}

.feature-decoration {
  opacity: 0.08;
}

/* ===== CÓMO FUNCIONA ===== */
.step-line {
  background: linear-gradient(
    to bottom,
    var(--primary-600),
    var(--primary-400)
  );
}

.step-icon-wrapper {
  background: rgba(59, 130, 246, 0.15);
  color: var(--primary-400);
}

/* ===== FAQ ===== */
.faq-section {
  background: var(--bg-secondary);
}

.faq-visual {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.accordion-item {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
}

.accordion-button:hover {
  background: var(--bg-secondary);
}

.accordion-button.active {
  background: var(--bg-secondary);
}

.accordion-content {
  background: var(--bg-card);
}

/* ===== CONTACTO ===== */
.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-card);
}

.contact-method {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
}

.form-control {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
}

.form-control:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ===== CTA ===== */
.cta-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-outline-light:hover {
  background: var(--white);
  color: var(--primary-700);
}

.feature-tag {
  background: rgba(255, 255, 255, 0.1);
}

/* ===== FOOTER ===== */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
}

.social-link {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
}

.social-link:hover {
  background: var(--primary-500);
  color: var(--white);
}

.link-group a {
  color: var(--text-secondary);
}

.link-group a:hover {
  color: var(--primary-300);
}

.footer-bottom {
  border-top: 1px solid var(--border-primary);
}