/* ==========================================================================
   Modo Oscuro (Dark Mode) - Centro Geriátrico Fuerza de Roble
   ========================================================================== */

/* Transiciones globales suaves al cambiar de tema */
body,
.navbar-fuerza,
.about-card,
.benefit-card,
.emi-section-wrapper,
.footer-fuerza,
.footer-bottom,
.nav-link-fuerza,
.btn-theme-toggle,
.contact-form-card,
.form-control,
.about-image img,
.service-detail-image img,
.gallery-item img,
.service-card-overlay,
.mv-card-overlay,
.emi-left-banner,
.emi-phone-box,
.enfermed-logo {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Reglas aplicadas bajo la clase global .dark-mode */
html.dark-mode {
    color-scheme: dark;
}

html.dark-mode body {
    background-color: #0F172A;
    color: #F8FAFC;
}

/* Encabezados y títulos */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: #FFFFFF;
}

/* Subtítulos de sección y textos secundarios */
html.dark-mode .section-subtitle,
html.dark-mode .text-secondary,
html.dark-mode p.text-secondary,
html.dark-mode .text-white-50 {
    color: #94A3B8 !important;
}

/* Navbar */
html.dark-mode .navbar-fuerza {
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html.dark-mode .navbar-fuerza.scrolled {
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

html.dark-mode .nav-link-fuerza {
    color: #E2E8F0 !important;
}

html.dark-mode .nav-link-fuerza:hover,
html.dark-mode .nav-link-fuerza.active {
    color: var(--color-turquoise) !important;
}

html.dark-mode .navbar-collapse {
    background: #1E293B;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Botón de alternancia de tema */
.btn-theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: rgba(25, 58, 105, 0.06);
    color: var(--color-primary);
}

.btn-theme-toggle:hover {
    background-color: rgba(25, 58, 105, 0.12);
    color: var(--color-primary-light);
    transform: translateY(-1px);
}

html.dark-mode .btn-theme-toggle {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-turquoise);
}

html.dark-mode .btn-theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Hero Section (Filtro overlay más oscuro) */
html.dark-mode .hero-section {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(25, 58, 105, 0.65)),
        url('/images/img_hero_inicio.png') center/cover no-repeat;
}

html.dark-mode .hero-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #E2E8F0;
}

/* Secciones generales */
html.dark-mode .bg-light-custom {
    background-color: #1E293B !important;
}

/* Quiénes Somos - Misión y Visión */
html.dark-mode .mv-card-overlay {
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95), rgba(25, 58, 105, 0.6));
}

/* Tarjetas de Valores */
html.dark-mode .about-card {
    background: #1E293B;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html.dark-mode .about-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Highlight Cards (Mini Servicios) */
html.dark-mode .highlight-card-overlay {
    background: rgba(15, 23, 42, 0.7);
}

html.dark-mode .highlight-card-front:hover .highlight-card-overlay {
    background: rgba(33, 159, 192, 0.65);
}

/* Servicios */
html.dark-mode .service-card-overlay {
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.5) 60%, transparent 100%);
}

/* Cobertura Médica EMI */
html.dark-mode .emi-section-wrapper {
    background: linear-gradient(135deg, #1E293B 0%, #162135 100%);
    border-top: 1px solid rgba(225, 28, 36, 0.2);
    border-right: 1px solid rgba(225, 28, 36, 0.2);
    border-bottom: 1px solid rgba(225, 28, 36, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

html.dark-mode .emi-banner-overlay {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(225, 28, 36, 0.8) 100%);
}

html.dark-mode .emi-feature-icon {
    background-color: rgba(225, 28, 36, 0.15);
    color: #FF5A60;
}

html.dark-mode .emi-phone-box {
    background-color: rgba(225, 28, 36, 0.08);
    border-color: rgba(225, 28, 36, 0.25);
}

html.dark-mode .emi-phone-link {
    color: #E2E8F0;
}

html.dark-mode .emi-phone-link:hover {
    color: #FF5A60;
}

/* Enfermería a Domicilio - ENFERMED */
html.dark-mode .enfermed-section {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(25, 58, 105, 0.75)),
        url('/images/enfermed-banner.png') center/cover no-repeat;
}

html.dark-mode .enfermed-logo {
    background: #1E293B;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Beneficios */
html.dark-mode .benefit-card {
    background: #1E293B;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html.dark-mode .benefit-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

html.dark-mode .benefit-card p {
    color: #CBD5E1;
}

html.dark-mode .benefit-icon {
    background: linear-gradient(135deg, rgba(58, 182, 207, 0.2), rgba(33, 159, 192, 0.2));
    color: var(--color-turquoise);
}

/* Galería */
html.dark-mode .gallery-placeholder {
    background: linear-gradient(135deg, #1E293B, #111827);
    color: var(--color-medium-blue);
}

/* Contacto y Formulario */
html.dark-mode .contact-section {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(25, 58, 105, 0.75)),
        url('/images/formulario_de_contacto.png') center/cover no-repeat;
}

html.dark-mode .contact-form-card {
    background: rgba(15, 23, 42, 0.65);
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .contact-form-card .form-control {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    color: #F8FAFC;
}

html.dark-mode .contact-form-card .form-control:focus {
    background: #1E293B;
    border-color: var(--color-turquoise);
    box-shadow: 0 0 0 0.2rem rgba(58, 182, 207, 0.25);
}

html.dark-mode .contact-form-card .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

html.dark-mode .contact-form-card .invalid-feedback {
    color: #FFA3A3;
}

html.dark-mode .alert-success-custom {
    background: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    color: #A3E635;
}

html.dark-mode .contact-success-banner {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.85), rgba(22, 101, 52, 0.9));
    border-color: rgba(74, 222, 128, 0.5);
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.2);
}

html.dark-mode .phone-country-select {
    background: rgba(11, 19, 41, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
    color: #E2E8F0;
}

html.dark-mode .phone-country-select:focus {
    background: rgba(11, 19, 41, 0.95);
    border-color: var(--color-turquoise);
}

/* Footer */
html.dark-mode .footer-fuerza {
    background: #0B1329;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

html.dark-mode .footer-fuerza h5 {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

html.dark-mode .footer-fuerza a {
    color: #94A3B8;
}

html.dark-mode .footer-fuerza a:hover {
    color: var(--color-turquoise);
}

html.dark-mode .footer-bottom {
    background: #070C19;
    color: #64748B;
}

/* WhatsApp Sticky */
html.dark-mode .sticky-whatsapp {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}