/* ===================================================== MODO OSCURO — Ser o No Ser | Accesibilidad Visual ===================================================== Se activa añadiendo el atributo data-theme="dark" en el elemento . El script en head.html lee localStorage y aplica el atributo antes del primer render para evitar parpadeo (FOUC). ===================================================== */ /* ── Transición suave en todos los elementos ── */ html[data-theme="dark"] *, html[data-theme="dark"] *::before, html[data-theme="dark"] *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ── Variables de tema oscuro ── */ html[data-theme="dark"] { --dm-bg: #0f0f1a; --dm-bg-secondary: #1a1a2e; --dm-bg-card: #1e1e35; --dm-bg-hover: #252545; --dm-border: rgba(255, 255, 255, 0.1); --dm-text: #e8e8f0; --dm-text-muted: #9999bb; --dm-primary: #e8938a; /* bordó claro, legible sobre oscuro */ --dm-primary-dark: #c9605a; --dm-primary-hover: #f5aaa0; --dm-input-bg: #1e1e35; --dm-input-border: rgba(232, 147, 138, 0.3); --dm-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); --dm-overlay: rgba(232, 147, 138, 0.05); /* Sobreescribo las variables globales del sitio */ --color-primary: #e8938a; --color-primary-dark: #c9605a; --color-primary-light: #f5aaa0; --color-primary-on-dark: #e8938a; --color-background: #0f0f1a; --color-bg-overlay: rgba(30, 30, 53, 0.85); --color-text: #e8e8f0; --color-text-light: #f0f0ff; --color-secondary: #6b6b9a; } /* ════════════════════════════════════════════════════ BODY ════════════════════════════════════════════════════ */ html[data-theme="dark"] body { background: var(--dm-bg); color: var(--dm-text); } /* ════════════════════════════════════════════════════ HEADER ════════════════════════════════════════════════════ */ html[data-theme="dark"] .modern-header { background: var(--dm-bg-secondary); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .header-top { background: linear-gradient(135deg, #05050e 0%, #120c14 100%); border-bottom-color: var(--dm-primary); } html[data-theme="dark"] .brand-name { color: var(--dm-primary); } html[data-theme="dark"] .brand-tagline { color: var(--dm-text-muted); } /* Barra de búsqueda */ html[data-theme="dark"] .search-wrapper { background: var(--dm-input-bg); border: 1px solid var(--dm-input-border); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .search-input { background: transparent; color: var(--dm-text); } html[data-theme="dark"] .search-input::placeholder { color: var(--dm-text-muted); } html[data-theme="dark"] .search-icon { color: var(--dm-text-muted); } html[data-theme="dark"] .search-button { background: var(--dm-primary); color: #0f0f1a; } html[data-theme="dark"] .search-button:hover { background: var(--dm-primary-hover); } /* Navegación principal */ html[data-theme="dark"] .main-navigation { background: #141425; border-bottom-color: var(--dm-border); } html[data-theme="dark"] .nav-link { color: #ccd0e8; } html[data-theme="dark"] .nav-link:hover { color: var(--dm-primary); background: rgba(232, 147, 138, 0.1); } html[data-theme="dark"] .nav-link::after { background: var(--dm-primary); } /* Móvil - búsqueda */ html[data-theme="dark"] .mobile-search { background: #141425; border-bottom-color: var(--dm-border); } /* Título de página */ html[data-theme="dark"] .header-title { background: linear-gradient(135deg, rgba(232, 147, 138, 0.08) 0%, rgba(20, 20, 50, 0.5) 100%); border-bottom-color: rgba(232, 147, 138, 0.15); } html[data-theme="dark"] .page-title { color: var(--dm-primary); text-shadow: 0 2px 8px rgba(232, 147, 138, 0.3); } /* ════════════════════════════════════════════════════ CARDS / ARTÍCULOS ════════════════════════════════════════════════════ */ html[data-theme="dark"] .news-main article { background: var(--dm-bg-card); border: 1px solid var(--dm-border); } html[data-theme="dark"] .news-main article h2, html[data-theme="dark"] .news-main article h3 { color: var(--dm-primary); } html[data-theme="dark"] .news-main article p { color: var(--dm-text); } html[data-theme="dark"] .news-main article:hover { background: var(--dm-bg-hover); box-shadow: var(--dm-shadow); } /* Bootstrap cards */ html[data-theme="dark"] .card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .card-header { background: rgba(232, 147, 138, 0.12) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .card-footer { background: rgba(232, 147, 138, 0.06) !important; border-top-color: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .card-body { color: var(--dm-text) !important; } html[data-theme="dark"] .card-title { color: var(--dm-primary) !important; } html[data-theme="dark"] .card-subtitle { color: var(--dm-text-muted) !important; } /* ════════════════════════════════════════════════════ FORMULARIOS ════════════════════════════════════════════════════ */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dm-text-muted) !important; opacity: 1; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { background-color: #252545 !important; border-color: var(--dm-primary) !important; color: var(--dm-text) !important; box-shadow: 0 0 0 0.2rem rgba(232, 147, 138, 0.25) !important; } html[data-theme="dark"] .form-label, html[data-theme="dark"] label { color: var(--dm-text) !important; } html[data-theme="dark"] .form-text, html[data-theme="dark"] .text-muted, html[data-theme="dark"] small.form-text { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .form-check-input { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; } html[data-theme="dark"] .form-check-input:checked { background-color: var(--dm-primary) !important; border-color: var(--dm-primary) !important; } html[data-theme="dark"] .form-check-label { color: var(--dm-text) !important; } html[data-theme="dark"] .input-group-text { background-color: #252545 !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-muted) !important; } /* ════════════════════════════════════════════════════ BOTONES (Bootstrap sobrescritura) ════════════════════════════════════════════════════ */ html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-outline-dark { color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-outline-dark:hover { background: var(--dm-bg-hover) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .btn-light { background: var(--dm-bg-hover) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .btn-light:hover { background: #303060 !important; color: var(--dm-text) !important; } html[data-theme="dark"] .btn-white, html[data-theme="dark"] .btn-outline-light { color: var(--dm-text) !important; border-color: var(--dm-border) !important; } /* ════════════════════════════════════════════════════ TABLAS ════════════════════════════════════════════════════ */ html[data-theme="dark"] table, html[data-theme="dark"] .table { color: var(--dm-text) !important; } html[data-theme="dark"] .table { --bs-table-bg: var(--dm-bg-card); --bs-table-striped-bg: rgba(232, 147, 138, 0.05); --bs-table-hover-bg: rgba(232, 147, 138, 0.1); --bs-table-border-color: var(--dm-border); color: var(--dm-text) !important; } html[data-theme="dark"] .table th { background: rgba(232, 147, 138, 0.15) !important; color: var(--dm-primary) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .table td { border-color: var(--dm-border) !important; } html[data-theme="dark"] thead { background: rgba(232, 147, 138, 0.15); } /* ════════════════════════════════════════════════════ ALERTS / BADGES ════════════════════════════════════════════════════ */ html[data-theme="dark"] .alert { border-color: var(--dm-border) !important; } html[data-theme="dark"] .alert-success { background-color: rgba(40, 167, 69, 0.2) !important; color: #7df5a0 !important; } html[data-theme="dark"] .alert-danger { background-color: rgba(220, 53, 69, 0.2) !important; color: #ff8080 !important; } html[data-theme="dark"] .alert-warning { background-color: rgba(255, 193, 7, 0.15) !important; color: #ffe083 !important; } html[data-theme="dark"] .alert-info { background-color: rgba(23, 162, 184, 0.15) !important; color: #70e0f0 !important; } /* ════════════════════════════════════════════════════ MODALS ════════════════════════════════════════════════════ */ html[data-theme="dark"] .modal-content { background: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .modal-header { background: rgba(232, 147, 138, 0.1) !important; border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] .modal-footer { border-top-color: var(--dm-border) !important; } html[data-theme="dark"] .modal-title { color: var(--dm-primary) !important; } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); } /* ════════════════════════════════════════════════════ DROPDOWNS / LISTAS DESPLEGABLES ════════════════════════════════════════════════════ */ html[data-theme="dark"] .dropdown-menu { background: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } html[data-theme="dark"] .dropdown-item { color: var(--dm-text) !important; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: var(--dm-bg-hover) !important; color: var(--dm-primary) !important; } html[data-theme="dark"] .dropdown-divider { border-color: var(--dm-border) !important; } /* ════════════════════════════════════════════════════ TEXTOS Y HEADINGS ════════════════════════════════════════════════════ */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--dm-text); } html[data-theme="dark"] p { color: var(--dm-text); } html[data-theme="dark"] .text-dark { color: var(--dm-text) !important; } html[data-theme="dark"] .text-body { color: var(--dm-text) !important; } html[data-theme="dark"] .text-secondary { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .lead { color: var(--dm-text); } /* ════════════════════════════════════════════════════ FONDOS UTILITARIOS BOOTSTRAP ════════════════════════════════════════════════════ */ html[data-theme="dark"] .bg-white { background-color: var(--dm-bg-card) !important; } html[data-theme="dark"] .bg-light { background-color: var(--dm-bg-secondary) !important; } html[data-theme="dark"] .bg-body { background-color: var(--dm-bg) !important; } html[data-theme="dark"] .bg-body-secondary { background-color: var(--dm-bg-secondary) !important; } /* ════════════════════════════════════════════════════ LISTAS / HR ════════════════════════════════════════════════════ */ html[data-theme="dark"] .list-group-item { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .list-group-item:hover { background: var(--dm-bg-hover) !important; } html[data-theme="dark"] hr { border-color: var(--dm-border) !important; opacity: 0.5; } /* ════════════════════════════════════════════════════ SECCIONES ESPECÍFICAS DEL SITIO ════════════════════════════════════════════════════ */ /* Banner estrenos */ html[data-theme="dark"] .estrenos { background: rgba(20, 5, 10, 0.95); border-color: var(--dm-primary-dark); } /* Dashboard */ html[data-theme="dark"] .dashboard-stat-card, html[data-theme="dark"] .stat-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .dashboard-section { background: linear-gradient(135deg, #12122a 0%, #1a1a38 100%) !important; } html[data-theme="dark"] .dashboard-table { background: var(--dm-bg-card) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] .obra-thumbnail-placeholder { background: var(--dm-bg-secondary) !important; color: var(--dm-text-muted) !important; } html[data-theme="dark"] .table tbody tr:hover { background-color: var(--dm-bg-hover) !important; } html[data-theme="dark"] .text-muted { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .empty-state { color: var(--dm-text-muted); } html[data-theme="dark"] .empty-state h5, html[data-theme="dark"] .empty-state p { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .pagination .page-link { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-primary) !important; } html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--dm-primary) !important; border-color: var(--dm-primary) !important; color: var(--dm-bg) !important; } html[data-theme="dark"] .pagination .page-link:hover { background-color: var(--dm-bg-hover) !important; color: var(--dm-primary-hover) !important; } html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; } /* Obra detalle */ html[data-theme="dark"] .obra-info { background: var(--dm-bg-card); color: var(--dm-text); } /* Mis compras — filas de pedido */ html[data-theme="dark"] .order-row, html[data-theme="dark"] .purchase-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Pago - stepper / resumen */ html[data-theme="dark"] .stepper-step { background: var(--dm-bg-card); border-color: var(--dm-border); } html[data-theme="dark"] .stepper-step.active { background: rgba(232, 147, 138, 0.15); border-color: var(--dm-primary); } /* Promociones */ html[data-theme="dark"] .promo-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Badges Bootstrap */ html[data-theme="dark"] .badge.bg-secondary { background-color: #4a4a70 !important; } /* Separadores / breadcrumbs */ html[data-theme="dark"] .breadcrumb { background: transparent; } html[data-theme="dark"] .breadcrumb-item { color: var(--dm-text-muted); } html[data-theme="dark"] .breadcrumb-item.active { color: var(--dm-text); } html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--dm-text-muted); } /* Paginación */ html[data-theme="dark"] .page-link { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .page-item.active .page-link { background-color: var(--dm-primary) !important; border-color: var(--dm-primary) !important; color: #0f0f1a !important; } html[data-theme="dark"] .page-link:hover { background-color: var(--dm-bg-hover) !important; color: var(--dm-primary) !important; } /* Spinners */ html[data-theme="dark"] .spinner-border { color: var(--dm-primary); } /* ════════════════════════════════════════════════════ TARJETA DE CRÉDITO (pagar.html) ════════════════════════════════════════════════════ */ html[data-theme="dark"] .credit-card-preview { background: linear-gradient(135deg, #1a1a35 0%, #2a1a35 100%) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7) !important; } /* ════════════════════════════════════════════════════ SCROLLBAR PERSONALIZADA (webkit) ════════════════════════════════════════════════════ */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dm-bg-secondary); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a60; border-radius: 5px; border: 2px solid var(--dm-bg-secondary); } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--dm-primary-dark); } /* ════════════════════════════════════════════════════ BOTÓN DE TOGGLE – estilos propios ════════════════════════════════════════════════════ */ #dark-mode-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.15rem; transition: all 0.3s ease; position: relative; overflow: hidden; /* Modo claro: fondo oscuro semitransparente (está en header oscuro) */ background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); } #dark-mode-toggle:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } #dark-mode-toggle:focus-visible { outline: 3px solid var(--dm-primary, #e8938a); outline-offset: 3px; } /* Icono de luna (modo claro activo → muestra luna para pasar a oscuro) */ #dark-mode-toggle .icon-dark { display: inline-block; } #dark-mode-toggle .icon-light { display: none; } html[data-theme="dark"] #dark-mode-toggle .icon-dark { display: none; } html[data-theme="dark"] #dark-mode-toggle .icon-light { display: inline-block; } /* En modo oscuro el botón adapta color */ html[data-theme="dark"] #dark-mode-toggle { background: rgba(232, 147, 138, 0.15); color: var(--dm-primary); border-color: rgba(232, 147, 138, 0.3); } html[data-theme="dark"] #dark-mode-toggle:hover { background: rgba(232, 147, 138, 0.25); }