/* darkmode.css - Nueva paleta de azules */
.dark-mode {
    /* Paleta de colores para modo oscuro - Azules */
    --color-primary: #1F2937; /* Azul oscuro para elementos primarios */
    --color-secondary: #F4F1ED; /* Beige claro - mantenido para contraste */
    --color-accent: #3D9A6D; /* Verde azulado - mantenido para acentos */
    --color-cta: #60A5FA; /* Azul claro para llamadas a la acción */
    --color-neutral: #94A3B8; /* Gris azulado para elementos neutros */
    
    /* Colores base */
    --color-white: #FFFFFF;
    --color-black: #000000;
    
    /* Colores de texto - Optimizados para legibilidad */
    --color-text-primary: #F4F1ED; /* Beige claro para texto principal */
    --color-text-secondary: #94A3B8; /* Gris azulado para texto secundario */
    --color-text-light: #FFFFFF;
    
    /* Colores de fondo - Nuevos azules */
    --color-bg-primary: #111827; /* Azul muy oscuro (casi negro azulado) */
    --color-bg-secondary: #1F2937; /* Azul oscuro medio */
    --color-bg-dark: #0F172A; /* Azul muy oscuro (más intenso) */
    --color-bg-accent: #1E3A8A; /* Azul intenso para fondos con acento */
    
    /* Sombras ajustadas para el modo oscuro */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.7);
}

/* Body */
.dark-mode body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* Títulos - Ajustados para legibilidad */
.dark-mode h1 {
    color: var(--color-secondary) !important; /* Beige claro */
}

.dark-mode h2 {
    color: var(--color-cta) !important; /* Azul claro */
}

.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6 {
    color: var(--color-secondary) !important; /* Beige claro */
}

/* Párrafos */
.dark-mode p {
    color: var(--color-text-primary);
}

/* Enlaces */
.dark-mode a {
    color: var(--color-cta);
}

.dark-mode a:hover {
    color: var(--color-accent);
}

/* Header */
.dark-mode .main-header {
    background-color: var(--color-bg-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid rgba(244, 241, 237, 0.1);
}

/* Logo área */
.dark-mode .logo a {
    color: var(--color-secondary);
}

/* Navegación */
.dark-mode .nav-links a {
    color: var(--color-text-primary);
}

.dark-mode .nav-links a:hover, 
.dark-mode .nav-links a.active {
    color: var(--color-cta);
}

.dark-mode .nav-links a::after {
    background-color: var(--color-cta);
}

/* Botón de contacto */
.dark-mode .contact-btn {
    background-color: var(--color-accent);
    color: var(--color-white) !important;
}

.dark-mode .contact-btn:hover {
    background-color: var(--color-cta);
    color: var(--color-bg-dark) !important;
}

/* Hero section */
.dark-mode .hero {
    background-color: var(--color-bg-accent);
    background-image: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url('../images/banner-2.png');
}

.dark-mode .hero h1 {
    color: var(--color-secondary) !important;
}

.dark-mode .hero-subtitle {
    color: var(--color-text-primary) !important;
}

/* Secciones con fondos alternados */
.dark-mode .featured-articles {
    background-color: var(--color-bg-primary);
}

.dark-mode .about-us {
    background-color: var(--color-bg-secondary);
}

.dark-mode .services {
    background-color: var(--color-bg-primary);
}

.dark-mode .social-updates {
    background-color: var(--color-bg-secondary);
}

.dark-mode .contact {
    background-color: var(--color-bg-primary);
}

/* Cards */
.dark-mode .card,
.dark-mode .article-card,
.dark-mode .service-card,
.dark-mode .post-card {
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(244, 241, 237, 0.1);
    box-shadow: var(--shadow-md);
}

.dark-mode .article-card:hover,
.dark-mode .service-card:hover,
.dark-mode .post-card:hover {
    box-shadow: 0 8px 16px rgba(96, 165, 250, 0.2);
    border-color: var(--color-cta);
    transform: translateY(-5px);
}

/* Títulos de secciones */
.dark-mode .section-title {
    color: var(--color-cta) !important;
}

.dark-mode .section-subtitle {
    color: var(--color-text-secondary) !important;
}

/* Categorías y tags */
.dark-mode .article-category,
.dark-mode .post-category {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.dark-mode .tag,
.dark-mode .category-tag {
    background-color: rgba(96, 165, 250, 0.2);
    color: var(--color-cta);
    border: 1px solid transparent;
}

.dark-mode .tag:hover,
.dark-mode .category-tag:hover,
.dark-mode .category-tag.active {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

/* Botones */
.dark-mode .btn {
    border: 1px solid transparent;
}

.dark-mode .btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.dark-mode .btn-primary:hover {
    background-color: var(--color-cta);
    color: var(--color-bg-dark);
    border-color: var(--color-cta);
}

.dark-mode .btn-secondary {
    background-color: transparent;
    color: var(--color-cta);
    border-color: var(--color-cta);
}

.dark-mode .btn-secondary:hover {
    background-color: var(--color-cta);
    color: var(--color-bg-dark);
}

/* Footer */
.dark-mode .main-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
    border-top: 1px solid rgba(244, 241, 237, 0.1);
}

.dark-mode .footer-content h3 {
    color: var(--color-cta);
}

.dark-mode .footer-links a {
    color: var(--color-text-primary);
}

.dark-mode .footer-links a:hover {
    color: var(--color-cta);
}

.dark-mode .social-icons a {
    background-color: rgba(94, 163, 191, 0.1);
    color: var(--color-neutral);
    border: 1px solid rgba(94, 163, 191, 0.2);
}

.dark-mode .social-icons a:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

/* Formularios */
.dark-mode input, 
.dark-mode textarea, 
.dark-mode select {
    background-color: var(--color-bg-dark);
    border: 1px solid rgba(244, 241, 237, 0.2);
    color: var(--color-text-primary);
}

.dark-mode input:focus, 
.dark-mode textarea:focus, 
.dark-mode select:focus {
    border-color: var(--color-cta);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

.dark-mode ::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

/* Contact items */
.dark-mode .contact-item {
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(244, 241, 237, 0.1);
}

.dark-mode .contact-item:hover {
    background-color: rgba(47, 115, 79, 0.1);
    border-color: var(--color-accent);
}

.dark-mode .contact-icon {
    background-color: var(--color-accent);
    color: var(--color-white);
}

/* Social updates section */
.dark-mode .social-card {
    background-color: var(--color-bg-primary);
    border: 1px solid rgba(244, 241, 237, 0.1);
}

.dark-mode .social-icon {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.dark-mode .social-link {
    color: var(--color-cta);
    border-top-color: rgba(244, 241, 237, 0.1);
}

.dark-mode .social-link:hover {
    background-color: rgba(96, 165, 250, 0.1);
}

/* Modal */
.dark-mode .modal-content {
    background-color: var(--color-bg-secondary);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(244, 241, 237, 0.1);
}

.dark-mode .modal-close {
    color: var(--color-text-primary);
}

.dark-mode .modal-close:hover {
    color: var(--color-cta);
}

/* Paginación */
.dark-mode .pagination a {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid rgba(244, 241, 237, 0.1);
}

.dark-mode .pagination a.active, 
.dark-mode .pagination a:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

/* Blog específico */
.dark-mode .blog-header {
    background-color: var(--color-bg-accent);
}

.dark-mode .page-title {
    color: var(--color-secondary) !important;
}

.dark-mode .page-subtitle {
    color: var(--color-text-primary) !important;
}

.dark-mode .featured-post {
    background-color: var(--color-bg-secondary);
}

.dark-mode .featured-post-card {
    background-color: var(--color-bg-primary);
}

.dark-mode .blog-filters {
    background-color: var(--color-bg-primary);
    border-bottom-color: rgba(244, 241, 237, 0.1);
}

.dark-mode .search-filter input {
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
    border-color: rgba(244, 241, 237, 0.2);
}

.dark-mode .search-filter button {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.dark-mode .newsletter {
    background-color: var(--color-bg-secondary);
}

.dark-mode .newsletter-container {
    background-color: var(--color-bg-accent);
    border: 1px solid rgba(244, 241, 237, 0.1);
}

/* Botón de modo oscuro */
.dark-mode .mode-toggle {
    background-color: var(--color-cta);
    color: var(--color-bg-dark);
}

.dark-mode .mode-toggle:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.dark-mode .mode-toggle .fa-sun {
    display: block;
}

.dark-mode .mode-toggle .fa-moon {
    display: none;
}

/* Read more buttons */
.dark-mode .read-more-btn {
    color: var(--color-cta);
}

.dark-mode .read-more-btn:hover {
    color: var(--color-accent);
}

/* Meta información */
.dark-mode .post-meta,
.dark-mode .article-meta {
    color: var(--color-text-secondary);
}

/* Botón para volver arriba */
.dark-mode #back-to-top {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.dark-mode #back-to-top:hover {
    background-color: var(--color-cta);
}

/* Service icons y cards */
.dark-mode .service-icon {
    color: var(--color-accent);
}

.dark-mode .service-card h3 {
    color: var(--color-secondary) !important;
}

/* Ajustes para imágenes */
.dark-mode img {
    opacity: 0.9;
}

.dark-mode .article-image img,
.dark-mode .post-image img {
    filter: brightness(0.85);
}

/* Transiciones suaves */
.dark-mode * {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Headers de páginas en modo oscuro */
.dark-mode .page-header,
.dark-mode .blog-header,
.dark-mode .services-header,
.dark-mode .about-header,
.dark-mode .contact-header {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
}

.dark-mode .page-header::before,
.dark-mode .blog-header::before,
.dark-mode .services-header::before,
.dark-mode .about-header::before,
.dark-mode .contact-header::before {
    background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85));
}

/* Headers específicos con imágenes de fondo */
.dark-mode .blog-header {
    background-image: url('../images/blog-hero.jpg');
    background-color: var(--color-bg-dark);
}

.dark-mode .services-header {
    background-image: url('../images/services-hero.jpg');
    background-color: var(--color-bg-dark);
}

.dark-mode .about-header {
    background-image: url('../images/about-hero.jpg');
    background-color: var(--color-bg-dark);
}

.dark-mode .contact-header {
    background-image: url('../images/contact-hero.jpg');
    background-color: var(--color-bg-dark);
}

/* Secciones específicas en modo oscuro */
.dark-mode .featured-post {
    background-color: var(--color-bg-secondary);
}

.dark-mode .blog-posts {
    background-color: var(--color-bg-primary);
}

.dark-mode .services-intro {
    background-color: var(--color-bg-primary);
}

.dark-mode .services-grid-section {
    background-color: var(--color-bg-secondary);
}

.dark-mode .approach-section {
    background-color: var(--color-bg-primary);
}

.dark-mode .faq-section {
    background-color: var(--color-bg-secondary);
}

.dark-mode .cta-section {
    background-color: var(--color-bg-accent);
}

.dark-mode .about-intro {
    background-color: var(--color-bg-primary);
}

.dark-mode .mission-vision {
    background-color: var(--color-bg-secondary);
}

.dark-mode .team-section {
    background-color: var(--color-bg-primary);
}

.dark-mode .values-section {
    background-color: var(--color-bg-secondary);
}

.dark-mode .contact-info-section {
    background-color: var(--color-bg-primary);
}

.dark-mode .contact-form-section {
    background-color: var(--color-bg-secondary);
}

.dark-mode .map-section {
    background-color: var(--color-bg-primary);
}

/* Cards y componentes adicionales */
.dark-mode .mission-card,
.dark-mode .vision-card,
.dark-mode .team-card,
.dark-mode .value-card,
.dark-mode .contact-info-card,
.dark-mode .related-service-card {
    background-color: var(--color-bg-primary);
    border: 1px solid rgba(244, 241, 237, 0.1);
}

.dark-mode .mission-card h3,
.dark-mode .vision-card h3,
.dark-mode .team-card h3,
.dark-mode .value-card h3,
.dark-mode .contact-info-card h3 {
    color: var(--color-cta) !important;
}

/* FAQ en modo oscuro */
.dark-mode .faq-item {
    background-color: var(--color-bg-primary);
    border: 1px solid rgba(244, 241, 237, 0.1);
}

.dark-mode .faq-question {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.dark-mode .faq-question:hover {
    background-color: var(--color-bg-accent);
    color: var(--color-text-light);
}

.dark-mode .faq-question.active {
    background-color: var(--color-bg-accent);
    color: var(--color-text-light);
}

/* Testimoniales */
.dark-mode .testimonials-section {
    background-color: var(--color-bg-secondary);
}

.dark-mode .testimonial-card {
    background-color: var(--color-bg-primary);
    border: 1px solid rgba(244, 241, 237, 0.1);
}

.dark-mode .testimonial-content {
    color: var(--color-text-primary);
}

.dark-mode .testimonial-content::before {
    color: var(--color-accent);
    opacity: 0.3;
}

/* Servicios relacionados */
.dark-mode .related-services-section {
    background-color: var(--color-bg-primary);
}

/* Approach items en modo oscuro */
.dark-mode .approach-item {
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(244, 241, 237, 0.1);
}

.dark-mode .approach-number {
    color: var(--color-cta);
}

/* Sidebar widgets */
.dark-mode .sidebar-widget {
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(244, 241, 237, 0.1);
}

.dark-mode .widget-title {
    color: var(--color-cta) !important;
    border-bottom-color: rgba(244, 241, 237, 0.1);
}

.dark-mode .service-link {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.dark-mode .service-link.active {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.dark-mode .service-link:hover:not(.active) {
    background-color: var(--color-bg-accent);
    color: var(--color-text-light);
}

.dark-mode .cta-widget {
    background-color: var(--color-bg-accent);
}

/* Banners en modo oscuro */
.dark-mode .page-banner {
    background-color: var(--color-bg-dark);
}

.dark-mode .page-banner::before {
    background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85));
}

.dark-mode .page-title {
    color: var(--color-secondary) !important;
}

.dark-mode .page-subtitle {
    color: var(--color-text-light) !important;
}

/* Headers específicos con imágenes de fondo en modo oscuro */
.dark-mode .about-banner,
.dark-mode .services-banner,
.dark-mode .blog-banner,
.dark-mode .contact-banner {
    filter: brightness(0.8);
}