/* ============================================================ MODO OSCURO - NoNatty Dark Theme (V1.1) ============================================================ Este archivo contiene los estilos para el modo oscuro de NoNatty. Se activa agregando la clase "dark" al elemento . VERSIÓN 1.1 - Actualizado con soporte para carrito de compras ============================================================ */ /* ============================================================ VARIABLES CSS PARA MODO OSCURO ============================================================ */ :root { /* Variables para modo claro (default) */ --bg-primary: #FEFEFE; --bg-secondary: #f5f5f5; --bg-card: #FFFFFF; --bg-hover: rgba(0, 0, 0, 0.04); --text-primary: #000000; --text-secondary: #666666; --text-tertiary: #888888; --border-color: rgba(0, 0, 0, 0.08); --shadow-color: rgba(0, 0, 0, 0.04); } /* ============================================================ MODO OSCURO - Aplicado cuando tiene clase "dark" ============================================================ */ html.dark { /* FONDOS - Más oscuros para mejor contraste */ --bg-primary: #0A0A0A; --bg-secondary: #111111; --bg-card: #1A1A1A; --bg-hover: rgba(255, 255, 255, 0.04); /* TEXTOS - Blancos y grises claros para legibilidad */ --text-primary: #FFFFFF; --text-secondary: #C8C8C8; --text-tertiary: #949494; /* BORDES Y SOMBRAS - Adaptados al modo oscuro */ --border-color: rgba(255, 255, 255, 0.08); --shadow-color: rgba(0, 0, 0, 0.3); } /* ============================================================ APLICACIÓN DE VARIABLES A ELEMENTOS EXISTENTES ============================================================ */ /* Fondo general del body */ html.dark body { background: var(--bg-primary); color: var(--text-primary); } /* Fondo de secciones principales */ html.dark .categories-section, html.dark .products-section, html.dark .recommendations-section, html.dark .special-ads-section, html.dark .dynamic-access-carousel { background: var(--bg-primary); } /* Fondo de tarjetas y contenedores */ html.dark .card, html.dark .product-card, html.dark .carousel-card { background: var(--bg-card); border-color: var(--border-color); } html.dark .card:hover, html.dark .product-card:hover, html.dark .carousel-card:hover { border-color: var(--color-blue); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } /* Textos principales */ html.dark .brand-tagline, html.dark .category-item span, html.dark .carousel-card .title, html.dark .product-card .title, html.dark .card-text, html.dark .ticker-item, html.dark .ticker-item strong, html.dark .section-header a { color: var(--text-primary); } /* Textos secundarios */ html.dark .ticker-item .ticker-stock, html.dark .ticker-item .ticker-event, html.dark .product-card .meta span, html.dark .carousel-card .meta span { color: var(--text-secondary); } /* Textos terciarios (menos importantes) */ html.dark .product-card .price span, html.dark .carousel-card .price span { color: var(--text-tertiary); } /* ============================================================ HEADER EN MODO OSCURO ============================================================ */ html.dark .header-main { background: var(--bg-secondary); border-bottom: 3px solid var(--color-blue); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } html.dark .search-bar { background: var(--bg-card); border-color: var(--border-color); } html.dark .search-bar input { color: var(--text-primary); background: transparent; } html.dark .search-bar input::placeholder { color: var(--text-tertiary); } html.dark .search-bar:focus-within { border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.2); } html.dark .header-nav a { color: var(--text-primary); } html.dark .header-nav a:hover { background: var(--bg-hover); color: var(--color-blue); } html.dark .lang-switcher { background: rgba(255, 255, 255, 0.08); } html.dark .lang-switcher a { color: var(--text-primary); } html.dark .lang-switcher a.active { background: var(--color-blue); color: var(--color-white); } html.dark .lang-switcher a:hover:not(.active) { background: rgba(255, 255, 255, 0.12); } /* ============================================================ TICKER EN MODO OSCURO ============================================================ */ html.dark .ticker-container { background: var(--bg-secondary); border-top-color: var(--color-blue); border-bottom-color: var(--color-blue); } html.dark .ticker-item { color: var(--text-secondary); } html.dark .ticker-item strong { color: var(--text-primary); } html.dark .ticker-item .ticker-link:hover { color: var(--color-blue); } html.dark .ticker-item .ticker-price { color: var(--color-red); } html.dark .ticker-item .ticker-stock { color: var(--text-tertiary); } html.dark .ticker-item .ticker-event { color: var(--text-tertiary); } /* ============================================================ SLIDER EN MODO OSCURO ============================================================ */ html.dark .slider-slide { background: var(--bg-secondary); } html.dark .slider-controls button { background: rgba(0, 0, 0, 0.7); } html.dark .slider-controls button:hover { background: rgba(0, 0, 0, 0.9); } html.dark .slider-dots button { background: rgba(255, 255, 255, 0.2); } html.dark .slider-dots button.active { background: var(--color-blue); } /* ============================================================ ACCESOS DINÁMICOS EN MODO OSCURO ============================================================ */ html.dark .dynamic-access-carousel .card { background: var(--bg-card); border-color: var(--border-color); } html.dark .dynamic-access-carousel .card:hover { border-color: var(--color-blue); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } html.dark .dynamic-access-carousel .card .icon-wrapper { background: rgba(0, 0, 255, 0.12); } html.dark .dynamic-access-carousel .card .icon-wrapper i { color: var(--color-blue); } html.dark .dynamic-access-carousel .card .card-title { color: var(--text-primary); } html.dark .dynamic-access-carousel .card .card-text { color: var(--text-secondary); } html.dark .dynamic-access-carousel .card .btn-action { color: var(--color-blue); } html.dark .dynamic-access-carousel .card .btn-action:hover { background: rgba(0, 0, 255, 0.1); } html.dark .dynamic-access-carousel .carousel-indicators button { background: rgba(255, 255, 255, 0.2); } html.dark .dynamic-access-carousel .carousel-indicators button.active { background: var(--color-blue); } html.dark .dynamic-access-carousel .carousel-control-prev, html.dark .dynamic-access-carousel .carousel-control-next { background: rgba(0, 0, 0, 0.6); } html.dark .dynamic-access-carousel .carousel-control-prev:hover, html.dark .dynamic-access-carousel .carousel-control-next:hover { background: rgba(0, 0, 0, 0.8); } /* ============================================================ CATEGORÍAS EN MODO OSCURO ============================================================ */ html.dark .category-item { background: var(--bg-card); border-color: var(--border-color); } html.dark .category-item:hover { border-color: var(--color-blue); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } html.dark .category-item i { color: var(--color-blue); } html.dark .category-item span { color: var(--text-primary); } /* ============================================================ SECCIÓN HEADER (títulos) EN MODO OSCURO ============================================================ */ html.dark .section-header { border-bottom-color: var(--color-blue); } html.dark .section-header h2 { color: var(--color-red); } html.dark .section-header a { color: var(--color-blue); } html.dark .section-header a:hover { color: #0066ff; } html.dark .dynamic-access-title { color: var(--color-red); border-bottom-color: var(--color-blue); } /* ============================================================ BADGES EN MODO OSCURO ============================================================ */ html.dark .badge-sale { background: var(--color-red); color: var(--color-white); } html.dark .badge-purchase { background: var(--color-blue); color: var(--color-white); } html.dark .badge-stock { background: rgba(212, 237, 218, 0.15); color: #6c9a7a; } /* ============================================================ BOTONES EN MODO OSCURO ============================================================ */ html.dark .btn-view { background: var(--color-blue); color: var(--color-white); } html.dark .btn-view:hover { background: #0000cc; } html.dark .andes-button--loud { background: var(--color-red); color: var(--color-white); } html.dark .andes-button--loud:hover { background: #cc0000; } /* ============================================================ SUGERENCIAS DE BÚSQUEDA EN MODO OSCURO ============================================================ */ html.dark .suggestions a { background: var(--bg-card); color: var(--text-secondary); border-color: var(--border-color); } html.dark .suggestions a:hover { border-color: var(--color-blue); color: var(--color-blue); } /* ============================================================ EMPTY STATE EN MODO OSCURO ============================================================ */ html.dark .empty-state { background: var(--bg-card); border-color: var(--border-color); } html.dark .empty-state i { color: var(--text-tertiary); } html.dark .empty-state h3 { color: var(--color-red); } html.dark .empty-state p { color: var(--text-secondary); } /* ============================================================ CONTROLES DE CARRUSEL EN MODO OSCURO ============================================================ */ html.dark .carousel-controls button { background: var(--bg-card); border-color: var(--color-blue); color: var(--color-blue); } html.dark .carousel-controls button:hover { background: var(--color-blue); color: var(--color-white); } html.dark .carousel-controls button:disabled { opacity: 0.3; } /* ============================================================ PLACEHOLDER EN MODO OSCURO ============================================================ */ html.dark .carousel-card .image, html.dark .product-card .image { background: var(--bg-secondary); } html.dark .carousel-card .image .placeholder, html.dark .product-card .image .placeholder { color: var(--text-tertiary); } /* ============================================================ CARRITO DE COMPRAS EN MODO OSCURO ============================================================ Estas reglas aseguran que el dropdown del carrito, los botones y las notificaciones se vean correctamente en modo oscuro. ============================================================ */ /* Dropdown del carrito - fondo y bordes */ html.dark .bag-dropdown { background: var(--bg-card); /* Fondo oscuro para el dropdown */ border-color: var(--border-color); /* Borde adaptado al modo oscuro */ } /* Separador entre ítems del carrito */ html.dark .bag-dropdown .bag-item { border-bottom-color: var(--border-color); /* Línea separadora más sutil */ } /* Hover sobre ítems del carrito */ html.dark .bag-dropdown .bag-item:hover { background: var(--bg-hover); /* Fondo sutil al pasar el mouse */ } /* Nombre del producto en el carrito */ html.dark .bag-dropdown .bag-item-name { color: var(--text-primary); /* Texto blanco para legibilidad */ } /* Precio del producto en el carrito */ html.dark .bag-dropdown .bag-item-price { color: var(--color-blue); /* Azul NoNatty para destacar el precio */ } /* Botón de eliminar ítem - hover en modo oscuro */ html.dark .bag-dropdown .bag-item-remove:hover { background: rgba(254, 2, 1, 0.15); /* Rojo sutil con transparencia */ } /* Pie del dropdown del carrito */ html.dark .bag-dropdown .bag-footer { background: var(--bg-secondary); /* Fondo ligeramente diferente */ border-top-color: var(--border-color); /* Línea separadora adaptada */ } /* Etiqueta del total en el pie */ html.dark .bag-dropdown .bag-footer .bag-total-label { color: var(--text-secondary); /* Gris claro para la etiqueta */ } /* Monto total en el pie */ html.dark .bag-dropdown .bag-footer .bag-total-amount { color: var(--color-blue); /* Azul NoNatty para el total */ } /* Estado de carrito vacío */ html.dark .bag-dropdown .bag-empty { color: var(--text-tertiary); /* Gris para texto secundario */ } /* Icono en estado de carrito vacío */ html.dark .bag-dropdown .bag-empty i { color: var(--text-tertiary); /* Gris para el icono */ } /* ============================================================ TOAST NOTIFICACIÓN EN MODO OSCURO ============================================================ */ /* La notificación toast mantiene sus colores originales para mantener consistencia en la experiencia de usuario: - Verde (#00a86b) para éxito - Blanco (#FEFEFE) para texto Esto asegura que las notificaciones sean siempre reconocibles independientemente del modo. */ html.dark .toast-notification { background: #00a86b; /* Verde de éxito consistente */ color: #FEFEFE; /* Texto blanco para contraste */ } /* ============================================================ BOTÓN AÑADIR AL CARRITO EN MODO OSCURO ============================================================ */ /* El botón de añadir al carrito mantiene sus colores originales para garantizar que el CTA (Call To Action) sea siempre visible y reconocible: - Rojo (#FE0201) para el estado normal - Verde (#00a86b) para el estado "añadido" */ html.dark .btn-add-to-bag { background: #FE0201; /* Rojo NoNatty consistente */ color: #FEFEFE; /* Texto blanco para contraste */ } html.dark .btn-add-to-bag.added { background: #00a86b; /* Verde de éxito consistente */ color: #FEFEFE; /* Texto blanco para contraste */ } /* ============================================================ TOGGLE BUTTON - BOTÓN DE MODO OSCURO ============================================================ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--color-blue); background: transparent; color: var(--color-blue); cursor: pointer; transition: all 0.3s ease; font-size: 18px; position: relative; } .theme-toggle:hover { background: rgba(0, 0, 255, 0.08); transform: scale(1.05); } .theme-toggle i { transition: transform 0.5s ease; } html.dark .theme-toggle { border-color: var(--color-blue); color: var(--color-blue); background: rgba(0, 0, 255, 0.08); } html.dark .theme-toggle:hover { background: rgba(0, 0, 255, 0.15); } /* Animación del icono al cambiar de tema */ .theme-toggle .fa-sun, .theme-toggle .fa-moon { transition: transform 0.5s ease; } html.dark .theme-toggle .fa-moon { transform: rotate(360deg); /* Rotación completa al activar modo oscuro */ } html.dark .theme-toggle .fa-sun { transform: rotate(180deg); /* Rotación al desactivar modo oscuro */ } /* ============================================================ RESPONSIVE PARA MODO OSCURO ============================================================ */ @media (max-width: 768px) { /* Tamaño reducido del botón de tema en tablets */ .theme-toggle { width: 34px; height: 34px; font-size: 15px; } } @media (max-width: 480px) { /* Tamaño reducido del botón de tema en móviles */ .theme-toggle { width: 30px; height: 30px; font-size: 13px; } }