/* Estilos para el modo oscuro */
body.dark-mode {
    background-color: #121212;
    color: #f5f5f5;
}

/* Ajustes de navegación en modo oscuro */
body.dark-mode .navbar {
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(218, 165, 32, 0.2);
}

body.dark-mode .navbar.scrolled {
    background: rgba(18, 18, 18, 0.98);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .nav-link {
    color: #f5f5f5;
}

body.dark-mode .mobile-menu {
    background: #1e1e1e;
}

body.dark-mode .mobile-menu a {
    color: #f5f5f5;
    border-bottom: 1px solid #333;
}

body.dark-mode .mobile-menu a:hover {
    background: #333;
}

/* Ajustes del preloader en modo oscuro */
body.dark-mode #preloader {
    background: #121212;
}

/* Ajustes de secciones en modo oscuro */
body.dark-mode .about-section {
    background-color: #1e1e1e;
}

body.dark-mode .section-title {
    color: var(--primary-gold);
}

body.dark-mode .section-subtitle {
    color: #aaa;
}

body.dark-mode .text-gray-700 {
    color: #ccc;
}

body.dark-mode .text-gray-600 {
    color: #aaa;
}

/* Secciones específicas en modo oscuro */
body.dark-mode .team-section {
    background-color: #1e1e1e !important;
}

body.dark-mode section {
    background-color: #121212;
}

body.dark-mode .bg-white {
    background-color: #1e1e1e !important;
}

body.dark-mode .hero-section {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.9), rgba(74, 144, 226, 0.8)), 
                url('../images/water-pattern.svg') !important;
}

/* Fondos específicos para todas las secciones */
body.dark-mode #nosotros {
    background-color: #1e1e1e !important;
}

body.dark-mode #servicios {
    background-color: #121212 !important;
}

body.dark-mode #equipo {
    background-color: #1e1e1e !important;
}

/* Elementos con fondos blancos específicos */
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100 {
    background-color: #2d2d2d !important;
}

body.dark-mode .rounded-2xl {
    background-color: #2d2d2d !important;
}

body.dark-mode .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
}

/* Footer en modo oscuro */
body.dark-mode .footer {
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a) !important;
}

/* Elementos específicos del equipo y valores */
body.dark-mode .value-card {
    background-color: #2d2d2d !important;
}

/* Mapas y otros elementos */
body.dark-mode iframe {
    filter: grayscale(20%) invert(10%);
}

/* Asegurar que todas las secciones tengan fondo oscuro */
body.dark-mode section:not(.hero-section):not(.contact-section) {
    background-color: #1e1e1e !important;
}

body.dark-mode section:nth-child(even):not(.hero-section):not(.contact-section) {
    background-color: #121212 !important;
}

/* Clases de Tailwind CSS específicas */
body.dark-mode .max-w-7xl {
    color: #f5f5f5;
}

body.dark-mode .p-8 {
    background-color: #2d2d2d !important;
}

body.dark-mode .space-y-6 > div,
body.dark-mode .space-y-8 > div {
    background-color: transparent !important;
}

/* Elementos con fondos blancos heredados */
body.dark-mode * {
    border-color: #404040;
}

body.dark-mode .grid > div {
    background-color: inherit;
}

/* Asegurar que los contenedores principales sean oscuros */
body.dark-mode main,
body.dark-mode article,
body.dark-mode aside {
    background-color: #121212;
}

/* Regla general para evitar fondos blancos */
body.dark-mode div:not(.hero-content):not(.cta-buttons):not(.scroll-indicator):not(.contact-icon):not(.value-icon):not(.service-icon):not(.team-avatar):not(.social-links):not(.contact-info-item):not(.form-group) {
    background-color: inherit;
}

/* Forzar fondos oscuros en elementos problemáticos */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [class*="bg-white"] {
    background-color: #2d2d2d !important;
}

/* Contenedores de sección específicos */
body.dark-mode .container,
body.dark-mode .mx-auto {
    background-color: transparent;
}

/* Ajustes de tarjetas en modo oscuro */
body.dark-mode .service-card,
body.dark-mode .team-card,
body.dark-mode .whatsapp-contact-card {
    background: #2d2d2d;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}

body.dark-mode .service-card:hover,
body.dark-mode .team-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* Ajustes de formulario en modo oscuro */
body.dark-mode .form-label {
    color: var(--primary-gold);
}

body.dark-mode .form-input {
    background-color: #333;
    border-color: #444;
    color: #f5f5f5;
}

body.dark-mode select.form-input {
    background-color: #333;
    color: #f5f5f5;
}

body.dark-mode select.form-input option {
    background-color: #333;
    color: #f5f5f5;
}

/* Ajustes de contacto en modo oscuro */
body.dark-mode .contact-section {
    background: linear-gradient(135deg, #1a472a, #0d3320);
}

body.dark-mode .contact-section .section-title,
body.dark-mode .contact-section .section-subtitle {
    color: #f5f5f5;
}

body.dark-mode .contact-icon {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .contact-text h4 {
    color: #f5f5f5;
}

body.dark-mode .contact-text p {
    color: rgba(255, 255, 255, 0.8);
}

/* Ajustes de botón de WhatsApp en modo oscuro */
body.dark-mode .whatsapp-btn {
    background: linear-gradient(135deg, #128C7E, #075E54);
}

/* Ajustes para el botón de volver arriba en modo oscuro */
body.dark-mode .back-to-top {
    background: var(--primary-gold);
}

/* Ajustes adicionales para el modo oscuro */
body.dark-mode .company-name,
body.dark-mode .company-subtitle {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

body.dark-mode .hero-tagline {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .navbar .text-gray-800 {
    color: #f5f5f5 !important;
}

body.dark-mode .navbar .text-gray-600 {
    color: #aaa !important;
}

/* Ajustes del botón de modo oscuro en tema oscuro */
body.dark-mode .dark-mode-toggle {
    background: var(--accent-green);
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
}

body.dark-mode .dark-mode-toggle:hover {
    background: #1B5E20;
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
}