/* =========================================
   DARK MODE - FULL SERVICES (Premium Corporate)
========================================= */

/* 1. Variables Base Unificadas */
body.dark-mode {
    --color-background: #0a0a0a; /* Negro profundo puro */
    --color-surface: #141414; /* Gris ultra oscuro para tarjetas */
    --color-surface-hover: #1f1f1f;
    --color-text: #f8fafc; /* Blanco hueso para no cansar la vista */
    --color-text-secondary: #94a3b8; /* Gris azulado/neutro elegante */
    --color-border: #262626; /* Bordes sutiles */
    
    /* Sombras corporativas oscuras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.8);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.9);
}

/* 2. Globales y Header */
body.dark-mode .header {
    background-color: rgba(10, 10, 10, 0.95);
    border-bottom-color: var(--color-border);
    backdrop-filter: blur(10px);
}
body.dark-mode .nav-link:hover {
    background-color: var(--color-surface-hover);
}
body.dark-mode .logo-img { display: none; }
body.dark-mode .logo-img-dark {
    display: inline;
    object-fit: contain;
}
body.dark-mode .sun-icon { display: block; }
body.dark-mode .moon-icon { display: none; }
body.dark-mode .section-label { color: var(--color-primary); }

/* 3. Hero Principal */
body.dark-mode .hero {
    background-color: var(--color-background);
    color: var(--color-text);
}
body.dark-mode .hero-overlay {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.85), rgba(0, 0, 0, 0.95));
}
body.dark-mode .hero-title {
    color: #ffffff;
}
body.dark-mode .hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
}
body.dark-mode .hero-slogan {
    color: var(--color-primary);
    font-weight: 700;
}

/* 4. Botones */
body.dark-mode .btn-primary,
body.dark-mode .btn-whatsapp-footer,
body.dark-mode .back-to-top {
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
    transition: all 0.3s ease;
}
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-whatsapp-footer:hover,
body.dark-mode .back-to-top:hover {
    background-color: #a00000;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(200, 0, 0, 0.25);
}
body.dark-mode .btn-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid var(--color-border);
}
body.dark-mode .btn-secondary:hover {
    background-color: var(--color-surface-hover);
    border-color: #ffffff;
}
body.dark-mode .translate-btn {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
body.dark-mode .translate-btn:hover {
    background: var(--color-primary);
    color: #ffffff;
}
body.dark-mode .login-btn,
body.dark-mode .btn-login-desktop {
    background: var(--color-text);
    color: var(--color-background);
}
body.dark-mode #prevSlide, 
body.dark-mode #nextSlide {
    background-color: var(--color-primary);
}
body.dark-mode #prevSlide:hover,
body.dark-mode #nextSlide:hover {
    background-color: #a00000;
}

/* 5. Tarjetas y Secciones Generales */
body.dark-mode .service-card,
body.dark-mode .about-image,
body.dark-mode .map-card,
body.dark-mode .contact-form-wrapper,
body.dark-mode .valor-card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
}
body.dark-mode .service-card::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
}
body.dark-mode .service-card:hover,
body.dark-mode .map-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}
body.dark-mode .valor-card h3,
body.dark-mode .valor-card p {
    color: var(--color-text);
}
body.dark-mode .stats {
    background: linear-gradient(135deg, #2a0808, #110000); /* Rojo oscurecido corporativo */
}
body.dark-mode .about .lista-dos-columnas li i,
body.dark-mode .feature-item svg {
    color: var(--color-primary);
    fill: var(--color-primary);
    stroke: var(--color-primary);
}
body.dark-mode .about .lista-dos-columnas li {
    color: var(--color-text);
}

/* 6. Mapa (Invertido para verse oscuro) */
body.dark-mode .map-container {
    /* Este filtro hace que Google Maps se vuelva oscuro */
    filter: grayscale(100%) invert(92%) contrast(83%);
}

/* 7. Blog */
body.dark-mode .blog-hero {
    background: var(--color-background);
    border-bottom: 2px solid var(--color-border);
    color: #fff;
}
body.dark-mode .blog-filter-btn {
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
body.dark-mode .blog-filter-btn:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
body.dark-mode .blog-filter-btn.active {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
body.dark-mode .blog-post-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
body.dark-mode .blog-post-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-text-secondary);
}
body.dark-mode .blog-post-category {
    background-color: var(--color-primary);
    color: #fff;
}
body.dark-mode .blog-post-content h4 {
    color: var(--color-text);
}
body.dark-mode .blog-post-content p {
    color: var(--color-text-secondary);
}

/* 8. Modales, WhatsApp y Scrollbars */
body.dark-mode .modal-content,
body.dark-mode .wa-modal,
body.dark-mode .wa-modal-content,
body.dark-mode .work-modal-content {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}
body.dark-mode .modal-footer,
body.dark-mode .wa-modal-header {
    background-color: #111111;
    border-color: var(--color-border);
    color: var(--color-text);
}
body.dark-mode #modalBody h2 {
    color: var(--color-text);
}
body.dark-mode .wa-item {
    background-color: var(--color-background);
    border-color: var(--color-border);
    color: var(--color-text);
}
body.dark-mode .wa-item:hover {
    background-color: var(--color-surface-hover);
}
body.dark-mode .wa-info h4 { color: var(--color-text); }
body.dark-mode .wa-info p { color: var(--color-text-secondary); }

body.dark-mode .modal-body::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 4px;
}
body.dark-mode .modal-body::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* 9. Horario (Sin Neón) */
body.dark-mode .horario-section {
    background-color: var(--color-surface);
}
body.dark-mode .horario-section::before {
    background: rgba(10, 10, 10, 0.85);
}
body.dark-mode .horario-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}
body.dark-mode .icon-container {
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    box-shadow: none;
}
body.dark-mode .icon-container i {
    color: var(--color-text);
    filter: none;
}
body.dark-mode .horario-card h2,
body.dark-mode .contacto {
    color: var(--color-text);
    text-shadow: none;
}
body.dark-mode .horario-item {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    box-shadow: none;
}
body.dark-mode .horario-item:hover {
    background: var(--color-surface-hover);
}
body.dark-mode .horario-item strong { color: var(--color-text); }
body.dark-mode .horario-item span { color: var(--color-text-secondary); }
body.dark-mode .horario-item.cerrado strong { color: var(--color-primary); }

/* 10. Rig Cards (Tarjetas giratorias) */
body.dark-mode .rig-card { background: transparent; }
body.dark-mode .rig-front {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
body.dark-mode .rig-back {
    background: #111111;
    color: #fff;
    border: 2px solid var(--color-primary);
}
body.dark-mode .rig-location { color: var(--color-text-secondary); }
body.dark-mode .rig-location:hover { color: var(--color-primary); }

/* 11. Empleo, Vacantes y Formularios */
body.dark-mode .trabaje-section,
body.dark-mode .hseq {
    background-color: var(--color-background);
    color: var(--color-text);
}
body.dark-mode .trabaje-title,
body.dark-mode .hseq-title {
    color: var(--color-primary);
}
body.dark-mode .vacancy-list li {
    background: var(--color-surface);
    border-color: var(--color-border);
}
body.dark-mode .vacancy-list li:hover {
    border-color: var(--color-primary);
}
body.dark-mode .details-panel {
    background: var(--color-surface);
    border-color: var(--color-border);
}
body.dark-mode .vacancy-pagination button {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
body.dark-mode .vacancy-pagination button:hover:not(:disabled) {
    background: var(--color-primary);
    color: #fff;
}
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea,
body.dark-mode .form-group input[type="file"] {
    background: var(--color-background);
    color: var(--color-text);
    border-color: var(--color-border);
}
body.dark-mode .custom-file label {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}
body.dark-mode .custom-file label:hover {
    background: var(--color-primary);
    color: #fff;
}
body.dark-mode .form-check label,
body.dark-mode .file-name {
    color: var(--color-text-secondary);
}
body.dark-mode .form-check a {
    color: var(--color-primary);
}

/* 12. Políticas y Footer */
body.dark-mode .politica h2,
body.dark-mode .politica h3 {
    color: var(--color-primary);
}
body.dark-mode .footer {
    background-color: #050505;
    border-top: 1px solid var(--color-border);
}
body.dark-mode .footer::before {
    background: var(--color-primary);
}
body.dark-mode .footer-links a:hover {
    color: var(--color-text);
}
body.dark-mode .contact-icon {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}
/* =========================================
   DARK MODE - MAPA ELITE
========================================= */
body.dark-mode .presence-section-elite {
    background-color: var(--color-background); /* Pasa de gris claro a negro profundo */
}

body.dark-mode .elite-map-container {
    border-color: var(--color-border);
    box-shadow: var(--shadow-lg);
}

/* Invertimos el mapa para que se vea oscuro y tecnológico */
body.dark-mode .map-iframe {
    filter: grayscale(100%) invert(92%) contrast(85%);
}

body.dark-mode .elite-map-container:hover .map-iframe.active {
    filter: grayscale(100%) invert(85%) contrast(95%);
}

body.dark-mode .floating-glass-panel {
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .floating-controls {
    background: rgba(20, 20, 20, 0.85);
    border-color: var(--color-border);
}


/* =========================================
   DARK MODE - BLOG & CAREERS
========================================= */
/* Reasignamos las variables locales del blog para el modo oscuro */
body.dark-mode {
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --bg-light: #0a0a0a; /* Negro profundo */
    --bg-card: #141414;  /* Gris oscuro para tarjetas */
    --border-color: #262626;
    --bg-white: #0a0a0a; 
}

/* Ajustes específicos del Hero del Blog */
body.dark-mode .blog-hero-tag {
    background-color: #111111;
    color: var(--primary);
    border: 1px solid var(--border-color);
}

body.dark-mode .blog-hero-title span {
    color: #ffffff; /* En modo oscuro, la palabra resaltada pasa a blanco para contrastar con el fondo rojo */
}

/* Ajustes de los Filtros del Blog */
body.dark-mode .blog-filter-btn {
    background-color: var(--bg-card);
    color: var(--text-muted);
    border-color: var(--border-color);
}

body.dark-mode .blog-filter-btn:hover {
    background-color: #1f1f1f;
    border-color: var(--primary);
    color: var(--primary);
}

body.dark-mode .blog-filter-btn.active {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* Ajustes de las Tarjetas de Posts */
body.dark-mode .blog-posts-section {
    background-color: var(--color-background);
}

body.dark-mode .blog-post-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
}

body.dark-mode .blog-post-card:hover {
    border-color: var(--text-muted);
}

/* =========================================
   DARK MODE - WHATSAPP MOCKUP
========================================= */
/* Fondo general del chat (Color oficial nocturno de WA) */
body.dark-mode .whatsapp-phone {
    background-color: #0b141a; 
    /* Soft-light ayuda a que la textura de los "doodles" se fusione con el fondo negro */
    background-blend-mode: soft-light; 
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

/* Cabecera del chat */
body.dark-mode .wa-header {
    background: #1f2c34; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

/* Burbuja de fecha (Hoy) */
body.dark-mode .wa-date {
    background-color: #182229;
    color: #8696a0;
    box-shadow: none;
}

/* Burbuja de Mensaje (Gris oscuro oficial de WA) */
body.dark-mode .wa-message {
    background: #202c33;
    color: #e9edef;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* El "piquito" del globo de mensaje adaptado al nuevo color */
body.dark-mode .wa-message::before {
    border-color: transparent #202c33 transparent transparent;
}

/* Área de Input inferior */
body.dark-mode .wa-input-area {
    background: #1f2c34;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Caja de texto donde se escribe */
body.dark-mode .wa-input-area input {
    background: #2a3942;
    color: #e9edef;
    box-shadow: none;
}

body.dark-mode .wa-input-area input::placeholder {
    color: #8696a0;
}

/* El botón de enviar mantiene su icónico verde, pero ligeramente adaptado al contraste oscuro */
body.dark-mode .wa-send-btn {
    background: #00a884;
}

body.dark-mode .wa-send-btn:hover {
    background: #008f6f;
    box-shadow: 0 4px 12px rgba(0, 168, 132, 0.3);
}