/* ==== DARK CURVED BACKGROUND - APLICAR EN TODAS LAS PÁGINAS ==== */

/* Variables globales para el tema oscuro con líneas curvas */
:root {
  /* Colores base oscuros */
  --bg-dark-primary: #0a0a0a;
  --bg-dark-secondary: #1a1a1a;
  --bg-dark-tertiary: #2a2a2a;
  
  /* Gradiente de líneas curvas - azul a morado */
  --curve-gradient-start: #00bcd4; /* Cyan */
  --curve-gradient-mid: #3f51b5;   /* Blue */
  --curve-gradient-end: #9c27b0;   /* Purple */
  
  /* Colores de texto para contraste */
  --text-primary: #ffffff;
  --text-secondary: #e5e5e5;
  --text-muted: #b3b3b3;
}

/* Background principal con líneas curvas */
body {
  background: var(--bg-dark-primary) !important;
  background-image: 
    /* Líneas curvas principales */
    url("data:image/svg+xml,%3Csvg width='1200' height='800' viewBox='0 0 1200 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='curve1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%2300bcd4;stop-opacity:0.3'/%3E%3Cstop offset='50%25' style='stop-color:%233f51b5;stop-opacity:0.25'/%3E%3Cstop offset='100%25' style='stop-color:%239c27b0;stop-opacity:0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,400 Q300,200 600,350 T1200,300' stroke='url(%23curve1)' stroke-width='2' fill='none'/%3E%3Cpath d='M0,420 Q350,180 650,330 T1200,280' stroke='url(%23curve1)' stroke-width='1.5' fill='none' opacity='0.8'/%3E%3Cpath d='M0,440 Q280,160 620,310 T1200,260' stroke='url(%23curve1)' stroke-width='1' fill='none' opacity='0.6'/%3E%3Cpath d='M0,460 Q320,140 680,290 T1200,240' stroke='url(%23curve1)' stroke-width='1' fill='none' opacity='0.4'/%3E%3Cpath d='M0,480 Q360,120 720,270 T1200,220' stroke='url(%23curve1)' stroke-width='0.8' fill='none' opacity='0.3'/%3E%3Cpath d='M0,500 Q400,100 760,250 T1200,200' stroke='url(%23curve1)' stroke-width='0.6' fill='none' opacity='0.2'/%3E%3C/svg%3E"),
    /* Gradiente base de fondo */
    radial-gradient(ellipse at center, var(--bg-dark-secondary) 0%, var(--bg-dark-primary) 70%);
  
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-attachment: fixed;
  color: var(--text-primary) !important;
  min-height: 100vh;
}

/* Background alternativo más dinámico para pantallas grandes */
@media (min-width: 1024px) {
  body {
    background-image: 
      /* Múltiples capas de líneas curvas */
      url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='curve1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%2300bcd4;stop-opacity:0.4'/%3E%3Cstop offset='30%25' style='stop-color:%232196f3;stop-opacity:0.35'/%3E%3Cstop offset='60%25' style='stop-color:%233f51b5;stop-opacity:0.3'/%3E%3Cstop offset='100%25' style='stop-color:%239c27b0;stop-opacity:0.25'/%3E%3C/linearGradient%3E%3ClinearGradient id='curve2' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%2300bcd4;stop-opacity:0.2'/%3E%3Cstop offset='50%25' style='stop-color:%233f51b5;stop-opacity:0.15'/%3E%3Cstop offset='100%25' style='stop-color:%239c27b0;stop-opacity:0.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath d='M0,540 Q480,300 960,450 T1920,400' stroke='url(%23curve1)' stroke-width='3' fill='none'/%3E%3Cpath d='M0,560 Q520,280 1040,430 T1920,380' stroke='url(%23curve1)' stroke-width='2.5' fill='none' opacity='0.9'/%3E%3Cpath d='M0,580 Q440,260 920,410 T1920,360' stroke='url(%23curve1)' stroke-width='2' fill='none' opacity='0.8'/%3E%3Cpath d='M0,600 Q480,240 960,390 T1920,340' stroke='url(%23curve1)' stroke-width='1.8' fill='none' opacity='0.7'/%3E%3Cpath d='M0,620 Q520,220 1040,370 T1920,320' stroke='url(%23curve1)' stroke-width='1.5' fill='none' opacity='0.6'/%3E%3Cpath d='M0,640 Q560,200 1120,350 T1920,300' stroke='url(%23curve1)' stroke-width='1.2' fill='none' opacity='0.5'/%3E%3Cpath d='M0,660 Q600,180 1200,330 T1920,280' stroke='url(%23curve2)' stroke-width='1' fill='none' opacity='0.4'/%3E%3Cpath d='M0,680 Q640,160 1280,310 T1920,260' stroke='url(%23curve2)' stroke-width='0.8' fill='none' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E"),
      /* Gradiente radial de fondo */
      radial-gradient(ellipse at top right, rgba(156, 39, 176, 0.1) 0%, transparent 50%),
      radial-gradient(ellipse at bottom left, rgba(0, 188, 212, 0.1) 0%, transparent 50%),
      linear-gradient(135deg, var(--bg-dark-primary) 0%, var(--bg-dark-secondary) 100%);
    
    background-size: 120% 120%, 60% 60%, 60% 60%, 100% 100%;
    background-position: center center, top right, bottom left, center center;
  }
}

/* Asegurar que todas las páginas hereden el background */
html {
  background: var(--bg-dark-primary) !important;
  min-height: 100vh;
}

/* Contenedores principales con fondo semi-transparente */
.container, 
.max-w-7xl, 
main, 
.main-content {
  background: rgba(26, 26, 26, 0.3) !important;
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tarjetas y elementos con el tema oscuro mejorado */
.card, 
.feature-card, 
.portfolio-section, 
.filter-card,
.feature-card-professional {
  background: rgba(42, 42, 42, 0.8) !important;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Headers y títulos */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Texto general */
p, span, div, li {
  color: var(--text-secondary) !important;
}

/* Enlaces con colores que combinen con el tema */
a {
  color: #00bcd4 !important;
  transition: color 0.3s ease;
}

a:hover {
  color: #9c27b0 !important;
}

/* Botones con el gradiente de líneas curvas */
.btn-primary, 
.cta-button-professional,
button[type="submit"] {
  background: linear-gradient(135deg, var(--curve-gradient-start) 0%, var(--curve-gradient-end) 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3) !important;
  transition: all 0.3s ease;
}

.btn-primary:hover, 
.cta-button-professional:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(156, 39, 176, 0.4) !important;
}

/* Navegación */
header, nav {
  background: rgba(10, 10, 10, 0.9) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 188, 212, 0.3);
}

/* Formularios */
input, textarea, select {
  background: rgba(42, 42, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(10px);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--curve-gradient-start) !important;
  box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.2) !important;
}

/* Tablas */
.data-table, table {
  background: rgba(42, 42, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.data-table th, table th {
  background: rgba(26, 26, 26, 0.9) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid rgba(0, 188, 212, 0.3) !important;
}

.data-table td, table td {
  color: var(--text-secondary) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Charts y gráficos - mantener legibilidad */
.chart-container, .plot-container {
  background: rgba(42, 42, 42, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px;
  backdrop-filter: blur(15px);
}

/* Sección Why Choose más elegante */
.why-choose-section {
  background: rgba(26, 26, 26, 0.4) !important;
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 188, 212, 0.2);
  border-bottom: 1px solid rgba(156, 39, 176, 0.2);
}

/* Hero section con efecto especial */
.hero-section, .text-center.mb-12 {
  position: relative;
  background: rgba(26, 26, 26, 0.2);
  backdrop-filter: blur(25px);
  border-radius: 20px;
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(0, 188, 212, 0.1) 0%, rgba(156, 39, 176, 0.1) 100%);
  border-radius: 20px;
  z-index: -1;
}

/* Premium badges con efecto especial */
.premium-badge {
  background: linear-gradient(135deg, var(--curve-gradient-mid) 0%, var(--curve-gradient-end) 100%) !important;
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.5) !important;
  animation: premium-glow 2s ease-in-out infinite alternate;
}

@keyframes premium-glow {
  from {
    box-shadow: 0 0 15px rgba(156, 39, 176, 0.5);
  }
  to {
    box-shadow: 0 0 25px rgba(156, 39, 176, 0.8);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body {
    background-size: 150% 150%, 100% 100%;
  }
  
  .container, .max-w-7xl, main {
    padding: 1rem;
    margin-bottom: 1rem;
  }
}

/* Animación sutil para el background */
@keyframes subtle-move {
  0%, 100% {
    background-position: center center, top right, bottom left, center center;
  }
  50% {
    background-position: center center, top left, bottom right, center center;
  }
}

body {
  animation: subtle-move 20s ease-in-out infinite;
}

/* Footer oscuro */
footer {
  background: rgba(10, 10, 10, 0.95) !important;
  border-top: 1px solid rgba(0, 188, 212, 0.3);
  backdrop-filter: blur(20px);
}

footer * {
  color: var(--text-secondary) !important;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(26, 26, 26, 0.8);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--curve-gradient-start), var(--curve-gradient-end));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--curve-gradient-end), var(--curve-gradient-start));
}