/* ====================================================================
   DARK MODE PARA HOME.PHP
   Estilos para modo oscuro en la página principal del portal
   ==================================================================== */

/* ===== VARIABLES Y BASE ===== */
body.dark-mode {
    --color-primary: #ff6b6f;
    --color-secondary: #5ed4d4;
    --color-light: #1a1a1a;
    --color-dark: #e9ecef;
    --color-bg: #121212;
    background-color: #0f0f0f !important;
    color: #e0e0e0 !important;
}

html.dark-mode {
    background-color: #0f0f0f;
}

/* ===== NAVBAR ===== */
body.dark-mode .header-home,
body.dark-mode header.bg-dark {
    background-color: #1f1f1f !important;
    border-bottom: 1px solid #333;
}

body.dark-mode .navbar-brand {
    color: #f0f0f0 !important;
}

body.dark-mode .nav-link {
    color: #d0d0d0 !important;
}

body.dark-mode .nav-link:hover {
    color: #ffffff !important;
}

body.dark-mode .nav-link.active {
    color: #ffffff !important;
}

/* ===== TOGGLE SWITCH ===== */
/* Alineación en navbar - Solo ícono */
.navbar-nav .nav-item.d-flex {
    padding: 0;
    margin: 0;
}

.navbar-nav .nav-item .form-check-switch {
    margin: 0;
    padding: 0.5rem 0;
}

#darkModeToggle {
    cursor: pointer;
    width: 3rem;
    height: 1.5rem;
    background-color: #4a4a4a;
    border-color: #6a6a6a;
    margin: 0;
}

#darkModeToggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(94, 212, 212, 0.25);
}

#darkModeToggle:checked {
    background-color: #4bc0c0;
    border-color: #4bc0c0;
}

body.dark-mode #darkModeToggle:checked {
    background-color: #5ed4d4;
    border-color: #5ed4d4;
}

body.dark-mode .form-check-label {
    color: #e0e0e0 !important;
}

.navbar-nav .nav-item .form-check-label {
    display: flex;
    align-items: center;
    margin: 0;
    line-height: 1;
    font-size: 1.25rem;
}

.navbar-nav .nav-item .form-check-label i {
    transition: transform 0.3s ease;
}

.navbar-nav .nav-item .form-check-label:hover i {
    transform: scale(1.1);
}

/* Responsive: alineación consistente */
@media (max-width: 991.98px) {
    .navbar-nav .nav-item.d-flex {
        width: 100%;
        justify-content: flex-start;
        padding: 0.5rem 0;
    }
    
    .navbar-nav .nav-item .form-check-switch {
        padding: 0;
    }
}

/* ===== HERO SECTION ===== */
body.dark-mode .hero,
body.dark-mode #hero {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images_sitio/hero/banner_sitio_1.jpeg') center/cover no-repeat !important;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

body.dark-mode .hero h1,
body.dark-mode .hero p,
body.dark-mode #hero h1,
body.dark-mode #hero p {
    color: #f0f0f0 !important;
}

@media (max-width: 768px) {
    body.dark-mode .hero,
    body.dark-mode #hero {
        background-attachment: scroll;
    }
}

/* ===== SECCIONES ===== */
body.dark-mode section {
    background-color: #0f0f0f !important;
}

body.dark-mode section.bg-light {
    background-color: #1a1a1a !important;
}

body.dark-mode section h2,
body.dark-mode section h3,
body.dark-mode section h4 {
    color: #f0f0f0 !important;
}

body.dark-mode section p,
body.dark-mode section span {
    color: #d0d0d0 !important;
}

/* ===== CARDS ===== */
body.dark-mode .card {
    background-color: #1f1f1f !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .card-title,
body.dark-mode .card-unified__title {
    color: #f0f0f0 !important;
}

body.dark-mode .card-text,
body.dark-mode .card-unified__description {
    color: #d0d0d0 !important;
}

body.dark-mode .card-body {
    background-color: #1f1f1f !important;
}

/* ===== CARD COMPACT (Emprendimientos, Noticias, Productos) ===== */
body.dark-mode .card-compact,
body.dark-mode .product-card.card-compact,
body.dark-mode .card-unified.card-compact {
    background-color: #1f1f1f !important;
    border-color: #333 !important;
}

body.dark-mode .card-compact__content {
    background-color: #1f1f1f !important;
}

body.dark-mode .card-compact__title {
    color: #f0f0f0 !important;
}

body.dark-mode .card-compact__subtitle {
    color: #b0b0b0 !important;
}

body.dark-mode .card-compact__link {
    color: #b0b0b0 !important;
}

body.dark-mode .card-compact__link a {
    color: #5ed4d4 !important;
}

body.dark-mode .card-compact__description {
    color: #d0d0d0 !important;
}

body.dark-mode .card-compact__more {
    color: #5ed4d4 !important;
}

body.dark-mode .card-compact__more:hover {
    color: #4bc0c0 !important;
}

body.dark-mode .card-compact__meta .badge.bg-light {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444;
}

body.dark-mode .card-compact__meta .badge.text-dark {
    color: #e0e0e0 !important;
}

body.dark-mode .card-compact__price-badge {
    background-color: #ff6b6f !important;
    color: #ffffff !important;
}

/* ===== TESTIMONIOS MODO OSCURO ===== */
body.dark-mode .testimonial-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.7), rgba(22, 33, 62, 0.6)) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .testimonial-card::before {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

body.dark-mode .testimonial-card:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .testimonial-card .quote {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-mode .testimonial-card .quote i.fa-quote-left {
    color: #ffd166;
    filter: drop-shadow(0 0 10px rgba(255, 209, 102, 0.5));
}

body.dark-mode .testimonial-author-info .fw-bold {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .testimonial-author-info .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-mode .testimonial-card .btn-light {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

body.dark-mode .testimonial-card .btn-light:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ===== BADGES Y FILTROS ===== */
body.dark-mode .badge.bg-light {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.dark-mode .filter-toolbar .badge {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

/* ===== SKELETON LOADERS ===== */
body.dark-mode .skeleton-card {
    background: #1a1a1a !important;
    box-shadow: inset 0 0 0 1px #2a2a2a !important;
}

body.dark-mode .skeleton-line {
    background: linear-gradient(90deg, #2a2a2a 0%, #333 50%, #2a2a2a 100%) !important;
    background-size: 200% 100%;
}

/* ===== PRICING SECTION ===== */
body.dark-mode .pricing-section {
    background: #0f0f0f !important;
}

body.dark-mode .pricing-section::before {
    background: linear-gradient(135deg, rgba(255, 90, 95, 0.1) 0%, rgba(241, 167, 166, 0.1) 100%);
}

body.dark-mode .pricing-header h2 {
    color: #f0f0f0 !important;
}

body.dark-mode .pricing-header .lead {
    color: #b0b0b0 !important;
}

/* Toggle de tipo de hosting */
body.dark-mode .toggle-option {
    background: #1f1f1f !important;
    border-color: #444 !important;
}

body.dark-mode .toggle-option:hover {
    background: #252525 !important;
    border-color: #ff6b6f !important;
}

body.dark-mode .toggle-option.active {
    background: rgba(255, 90, 95, 0.15) !important;
    border-color: #ff6b6f !important;
}

body.dark-mode .toggle-option strong {
    color: #f0f0f0 !important;
}

body.dark-mode .toggle-option small {
    color: #b0b0b0 !important;
}

/* Cards de planes */
body.dark-mode .pricing-card {
    background: #1f1f1f !important;
    border-color: #444 !important;
}

body.dark-mode .pricing-card:hover {
    border-color: #ff6b6f !important;
    box-shadow: 0 12px 40px rgba(255, 90, 95, 0.2) !important;
}

body.dark-mode .pricing-card--featured {
    border-color: #ff6b6f !important;
    box-shadow: 0 20px 60px rgba(255, 90, 95, 0.3) !important;
}

body.dark-mode .pricing-card h3,
body.dark-mode .plan-header h3 {
    color: #f0f0f0 !important;
}

body.dark-mode .price-wrapper .price {
    color: #f0f0f0 !important;
}

body.dark-mode .price-wrapper .period {
    color: #b0b0b0 !important;
}

body.dark-mode .billing-total,
body.dark-mode .savings {
    color: #b0b0b0 !important;
}

body.dark-mode .features-list li {
    color: #d0d0d0 !important;
}

body.dark-mode .features-list li i.fa-check {
    color: #5ed4d4 !important;
}

body.dark-mode .features-list li i.fa-cancel {
    color: #666 !important;
}

body.dark-mode .guarantee {
    color: #b0b0b0 !important;
}

body.dark-mode .badge-save {
    background: linear-gradient(135deg, #ff6b6f 0%, #f1a7a6 100%) !important;
}

body.dark-mode .badge.bg-warning {
    background-color: #f39c12 !important;
    color: #000 !important;
}

body.dark-mode .badge.bg-info {
    background-color: #3498db !important;
}

/* ===== BOTONES ===== */
body.dark-mode .btn-light {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .btn-light:hover {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
}

body.dark-mode .btn-outline-light {
    border-color: #e0e0e0 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .btn-outline-light:hover {
    background-color: #e0e0e0 !important;
    color: #1f1f1f !important;
}

body.dark-mode .btn-primary {
    background-color: #ff6b6f !important;
    border-color: #ff6b6f !important;
    color: #ffffff !important;
}

body.dark-mode .btn-primary:hover {
    background-color: #ff5559 !important;
    border-color: #ff5559 !important;
}

body.dark-mode .btn-outline-primary {
    border-color: #ff6b6f !important;
    color: #ff6b6f !important;
    background-color: transparent !important;
}

body.dark-mode .btn-outline-primary:hover {
    background-color: #ff6b6f !important;
    border-color: #ff6b6f !important;
    color: #ffffff !important;
}

/* ===== BOTONES CTA (Contact Section) ===== */
body.dark-mode .btn-cta-primary {
    background: linear-gradient(135deg, #25d366 0%, #20c05c 100%) !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4) !important;
}

body.dark-mode .btn-cta-primary:hover {
    background: linear-gradient(135deg, #20c05c 0%, #25d366 100%) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5) !important;
}

body.dark-mode .btn-cta-secondary {
    background: #1f1f1f !important;
    border-color: #ff6b6f !important;
    color: #ff6b6f !important;
}

body.dark-mode .btn-cta-secondary:hover {
    background: #ff6b6f !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(255, 90, 95, 0.4) !important;
}

/* ===== PAGINATION ===== */
body.dark-mode .pagination .page-link {
    background-color: #1f1f1f !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .pagination .page-link:hover {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

body.dark-mode .pagination .page-item.active .page-link {
    background-color: #ff6b6f !important;
    border-color: #ff6b6f !important;
    color: #ffffff !important;
}

body.dark-mode .pagination .page-item.disabled .page-link {
    background-color: #1a1a1a !important;
    border-color: #333 !important;
    color: #666 !important;
}

/* ===== FORMULARIOS ===== */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control {
    background-color: #1f1f1f !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #888 !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body.dark-mode .form-control:focus {
    background-color: #2a2a2a !important;
    border-color: var(--color-primary) !important;
    color: #f0f0f0 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 111, 0.25) !important;
}

body.dark-mode .form-label {
    color: #e0e0e0 !important;
}

/* ===== FOOTER ===== */
body.dark-mode footer {
    background-color: #0a0a0a !important;
    border-top: 1px solid #333 !important;
    color: #d0d0d0 !important;
}

body.dark-mode footer h5,
body.dark-mode footer p,
body.dark-mode footer a {
    color: #d0d0d0 !important;
}

body.dark-mode footer a:hover {
    color: #ffffff !important;
}

/* ===== TEXTOS GENERALES ===== */
body.dark-mode .text-dark {
    color: #e0e0e0 !important;
}

body.dark-mode .text-muted {
    color: #999 !important;
}

body.dark-mode .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-mode .lead {
    color: #d0d0d0 !important;
}

/* ===== WHATSAPP BUTTON ===== */
body.dark-mode .btn-success {
    background-color: #25d366 !important;
    border-color: #25d366 !important;
}

body.dark-mode .btn-success:hover {
    background-color: #1ebe57 !important;
    border-color: #1ebe57 !important;
}

/* ===== CAROUSEL ===== */
body.dark-mode .carousel-item {
    color: #e0e0e0 !important;
}

body.dark-mode .carousel-control-prev,
body.dark-mode .carousel-control-next {
    filter: invert(1);
}

/* ===== NAVBAR TOGGLER ===== */
body.dark-mode .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode .navbar-toggler-icon {
    filter: invert(1);
}

/* ===== TRANSITIONS ===== */
body,
body * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===== SHADOWS ===== */
body.dark-mode .shadow,
body.dark-mode .shadow-sm,
body.dark-mode .shadow-lg {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

/* ===== BORDERS ===== */
body.dark-mode .border {
    border-color: #333 !important;
}

body.dark-mode .border-light {
    border-color: #444 !important;
}

/* ===== IMAGES ===== */
body.dark-mode img {
    opacity: 0.9;
}

body.dark-mode img:hover {
    opacity: 1;
}

/* ===== SKIP LINK ===== */
body.dark-mode .skip-link {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
    #darkModeToggle {
        width: 2.5rem;
        height: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    body.dark-mode .navbar-collapse {
        background-color: #1f1f1f;
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: 0.5rem;
    }
}

/* ===== CONTACT SECTION ===== */
body.dark-mode .contact-section {
    background: #0f0f0f !important;
}

body.dark-mode .contact-section::before {
    background: radial-gradient(circle at top, rgba(255, 90, 95, 0.15), transparent 45%);
}

body.dark-mode .contact-compact__eyebrow {
    color: #ff6b6f !important;
}

body.dark-mode .contact-compact__title {
    color: #f0f0f0 !important;
}

body.dark-mode .contact-compact__subtitle {
    color: #b0b0b0 !important;
}

body.dark-mode .contact-compact__card {
    background: #1f1f1f !important;
    border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .contact-compact__benefits {
    color: #d0d0d0 !important;
}

body.dark-mode .contact-compact__benefits li {
    color: #d0d0d0 !important;
}

body.dark-mode .contact-compact__benefits i {
    color: #5ed4d4 !important;
}

body.dark-mode .contact-compact__meta {
    color: #b0b0b0 !important;
}

body.dark-mode .contact-compact__meta span {
    color: #b0b0b0 !important;
}

body.dark-mode .contact-compact__meta i {
    color: #ff6b6f !important;
}

body.dark-mode .contact-compact__social {
    color: #b0b0b0 !important;
}

body.dark-mode .contact-compact__social span {
    color: #b0b0b0 !important;
}

/* Botones sociales */
body.dark-mode .btn-social {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .btn-social:hover {
    background-color: #333 !important;
    border-color: #555 !important;
}

body.dark-mode .btn-youtube:hover {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
}

body.dark-mode .btn-instagram:hover {
    background: linear-gradient(135deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d) !important;
    border-color: transparent !important;
}
/* ===== DETALLE ARTICULO INTERES (detalleArticuloInteres.php) ===== */
body.dark-mode .articulo-detail {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

body.dark-mode .articulo-detail__title {
    color: #ffffff !important;
}

body.dark-mode .articulo-detail__meta {
    color: #b0b0b0 !important;
}

body.dark-mode .articulo-detail__meta span {
    color: #b0b0b0 !important;
}

body.dark-mode .articulo-detail__hero {
    background-color: #222222 !important;
}

body.dark-mode .articulo-detail__content {
    color: #e0e0e0 !important;
}

body.dark-mode .articulo-detail__content p {
    color: #e0e0e0 !important;
}

body.dark-mode .articulo-detail__content h1,
body.dark-mode .articulo-detail__content h2,
body.dark-mode .articulo-detail__content h3,
body.dark-mode .articulo-detail__content h4,
body.dark-mode .articulo-detail__content h5,
body.dark-mode .articulo-detail__content h6 {
    color: #ffffff !important;
}

body.dark-mode .articulo-detail__content a {
    color: #5ed4d4 !important;
}

body.dark-mode .articulo-detail__content a:hover {
    color: #7ddedf !important;
}

body.dark-mode .articulo-detail__share {
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
}

body.dark-mode .btn-outline-primary {
    color: #5ed4d4 !important;
    border-color: #5ed4d4 !important;
}

body.dark-mode .btn-outline-primary:hover {
    background-color: #5ed4d4 !important;
    border-color: #5ed4d4 !important;
    color: #0f0f0f !important;
}

body.dark-mode .btn-outline-dark {
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.dark-mode .btn-outline-dark:hover {
    background-color: #444 !important;
    border-color: #444 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-outline-success {
    color: #5ed4d4 !important;
    border-color: #5ed4d4 !important;
}

body.dark-mode .btn-outline-success:hover {
    background-color: #5ed4d4 !important;
    border-color: #5ed4d4 !important;
    color: #0f0f0f !important;
}

body.dark-mode .btn-outline-secondary {
    color: #999 !important;
    border-color: #555 !important;
}

body.dark-mode .btn-outline-secondary:hover {
    background-color: #555 !important;
    border-color: #555 !important;
    color: #f0f0f0 !important;
}

body.dark-mode #copySuccess {
    background-color: #2d5016 !important;
    border-color: #4a7c1d !important;
    color: #a6d96a !important;
}

body.dark-mode .articulo-detail__gallery {
    border-top: 1px solid #333 !important;
    padding-top: 1.5rem !important;
}

body.dark-mode .articulo-detail__gallery h2 {
    color: #ffffff !important;
}

/* Estilos adicionales para elementos comunes en articulos */
body.dark-mode .bg-white {
    background-color: #1a1a1a !important;
}

body.dark-mode .text-muted {
    color: #b0b0b0 !important;
}

body.dark-mode .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .alert.alert-success {
    background-color: #1f5e20 !important;
    border-color: #4a7c1d !important;
    color: #b5d96a !important;
}

/* ===== DETALLE NOTICIA (detalleNoticia.php) ===== */
body.dark-mode .noticia-detail {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

body.dark-mode .noticia-detail__title {
    color: #ffffff !important;
}

body.dark-mode .noticia-detail__meta {
    color: #b0b0b0 !important;
}

body.dark-mode .noticia-detail__content {
    color: #e0e0e0 !important;
}

body.dark-mode .noticia-detail__content p {
    color: #e0e0e0 !important;
}

body.dark-mode .noticia-detail__content h1,
body.dark-mode .noticia-detail__content h2,
body.dark-mode .noticia-detail__content h3,
body.dark-mode .noticia-detail__content h4,
body.dark-mode .noticia-detail__content h5,
body.dark-mode .noticia-detail__content h6 {
    color: #ffffff !important;
}

body.dark-mode .noticia-detail__content a {
    color: #5ed4d4 !important;
}

body.dark-mode .noticia-detail__content a:hover {
    color: #7ddedf !important;
}

body.dark-mode .noticia-detail__share {
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
}

/* ===== ELEMENTOS COMUNES (bg-light, badges, etc) ===== */
body.dark-mode .bg-light {
    background-color: #1a1a1a !important;
}

body.dark-mode .badge.bg-light.text-dark {
    background-color: #333 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .articulos-interes {
    background-color: #0f0f0f !important;
}

body.dark-mode .articulos-interes__title {
    color: #ffffff !important;
}

body.dark-mode .articulos-interes__subtitle {
    color: #b0b0b0 !important;
}