/* ============================================================ WowTicket — Dark Mode Activado via html.dark (puesto por JS en ) ============================================================ */ /* Transiciones suaves solo al hacer clic en el toggle (evita flash en el page load) */ html.dark-transitions, html.dark-transitions * { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; } /* ============================================================ BODY & WRAPPER ============================================================ */ /* Override Bootstrap CSS variables para dark mode */ html.dark { --bs-border-color: rgba(255, 255, 255, 0.1); --bs-border-color-translucent: rgba(255, 255, 255, 0.1); --bs-secondary-color: #94a3b8; --bs-tertiary-bg: #1a1a1a; --bs-secondary-bg: #111111; --bs-emphasis-color: #f1f5f9; --bs-body-bg: #000000; --bs-body-color: #cbd5e1; --bs-heading-color: #f1f5f9; color-scheme: dark; } html.dark body { background-color: #000000; color: #cbd5e1; } html.dark .db-wrapper { background-color: #000000; } html.dark hr { border-color: rgba(255, 255, 255, 0.1); opacity: 1; } /* ============================================================ TIPOGRAFÍA ============================================================ */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: #f1f5f9; } html.dark p { color: #cbd5e1; } html.dark .text-dark { color: #e2e8f0 !important; } html.dark .text-black { color: #f1f5f9 !important; } html.dark .text-muted { color: #64748b !important; } html.dark .text-secondary { color: #94a3b8 !important; } html.dark .text-body { color: #cbd5e1 !important; } /* ============================================================ BACKGROUNDS ============================================================ */ html.dark .bg-white { background-color: #111111 !important; } html.dark .bg-light { background-color: #0d0d0d !important; } html.dark .bg-body { background-color: #000000 !important; } html.dark .bg-secondary { background-color: #050505 !important; } html.dark .section-bg, html.dark .section-bg-white, html.dark .bg-section { background-color: #0d0d0d !important; } /* ============================================================ CARDS ============================================================ */ html.dark .card { background-color: #111111; border-color: rgba(255, 255, 255, 0.08); color: #cbd5e1; } html.dark .card-header { background-color: #0d0d0d; border-bottom-color: rgba(255, 255, 255, 0.08); color: #f1f5f9; } html.dark .card-footer { background-color: #0d0d0d; border-top-color: rgba(255, 255, 255, 0.08); } html.dark .card-body { color: #cbd5e1; } html.dark .card-title { color: #f1f5f9; } html.dark .card-text { color: #94a3b8; } /* ============================================================ FORMULARIOS ============================================================ */ html.dark .form-control { background-color: #0d0d0d; border-color: rgba(255, 255, 255, 0.12); color: #e2e8f0; } html.dark .form-control:focus { background-color: #111111; border-color: #ff1b7f; color: #f1f5f9; box-shadow: 0 0 0 0.2rem rgba(255, 27, 127, 0.15); } html.dark .form-control::placeholder { color: #475569; } html.dark .form-control:disabled, html.dark .form-control[readonly] { background-color: #080808; color: #64748b; } html.dark .form-select { background-color: #0d0d0d; border-color: rgba(255, 255, 255, 0.12); color: #e2e8f0; } html.dark .form-select:focus { border-color: #ff1b7f; box-shadow: 0 0 0 0.2rem rgba(255, 27, 127, 0.15); } html.dark .input-group-text { background-color: #0d0d0d; border-color: rgba(255, 255, 255, 0.12); color: #94a3b8; } html.dark .form-check-input { background-color: #0d0d0d; border-color: rgba(255, 255, 255, 0.2); } html.dark .form-check-input:checked { background-color: #ff1b7f; border-color: #ff1b7f; } html.dark label { color: #94a3b8; } html.dark .form-label { color: #94a3b8; } /* ============================================================ DROPDOWNS (Bootstrap) ============================================================ */ html.dark .dropdown-menu { background-color: #111111 !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important; } html.dark .dropdown-item { color: #cbd5e1 !important; } html.dark .dropdown-item:hover, html.dark .dropdown-item:focus { background-color: rgba(255, 27, 127, 0.1) !important; color: #ff1b7f !important; } html.dark .dropdown-item.active, html.dark .dropdown-item:active { background-color: #ff1b7f !important; color: #fff !important; } html.dark .dropdown-divider { border-color: rgba(255, 255, 255, 0.08); } html.dark .dropdown-header { color: #64748b; } /* Dropdown personalizado (eventmie-custom.css) */ html.dark .dropdownmenu { background-color: #111111; border-color: rgba(255, 255, 255, 0.1); } html.dark .dropdownmenu a { color: #cbd5e1; } /* ============================================================ TABLAS Jerarquía: card(#111) → thead(#0a0a0a) → tbody(#1a1a1a) El thead es más oscuro que el card para crear contraste visual. Las filas del body flotan por encima del card con #1a1a1a. ============================================================ */ html.dark .table { color: #e2e8f0; border-color: rgba(255, 255, 255, 0.1); --bs-table-color: #e2e8f0; --bs-table-bg: #1a1a1a; --bs-table-striped-color: #e2e8f0; --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-hover-color: #f1f5f9; --bs-table-hover-bg: rgba(255, 255, 255, 0.07); --bs-table-border-color: rgba(255, 255, 255, 0.09); } html.dark .table tbody { background-color: #1a1a1a; } html.dark .table tbody tr { background-color: #1a1a1a; } html.dark .table tbody tr:hover > * { background-color: #222 !important; color: #f1f5f9 !important; } html.dark .table thead th, html.dark .table th { color: #94a3b8; border-color: rgba(255, 255, 255, 0.12); background-color: #0a0a0a; } html.dark .table td { border-color: rgba(255, 255, 255, 0.07); color: #e2e8f0; } html.dark .table-bordered td, html.dark .table-bordered th { border-color: rgba(255, 255, 255, 0.1); } /* table-light: mismo que thead oscuro */ html.dark .table-light, html.dark .table-light > :not(caption) > * > * { background-color: #0a0a0a !important; color: #94a3b8 !important; border-color: rgba(255,255,255,0.1) !important; --bs-table-bg: #0a0a0a !important; --bs-table-color: #94a3b8 !important; --bs-table-border-color: rgba(255,255,255,0.1) !important; } /* Separador visual entre thead y tbody */ html.dark .table thead { border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important; } /* Links dentro de tablas — legibles en fondo oscuro */ html.dark .table a, html.dark .table a:hover { color: #93c5fd; } html.dark .table a.text-inherit, html.dark .table a.text-inherit:hover { color: #e2e8f0; } /* Card-headers sin borde: añadir separador sutil */ html.dark .card-header.border-bottom-0 { border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } /* ============================================================ INPUT GROUP ============================================================ */ html.dark .input-group-text { background-color: #1a1a1a; border-color: rgba(255,255,255,0.12); color: #94a3b8; } /* ============================================================ TOM SELECT (selector evento en dashboard) ============================================================ */ html.dark .ts-wrapper .ts-control { background-color: #0d0d0d !important; border-color: rgba(255,255,255,0.12) !important; color: #e2e8f0 !important; box-shadow: none !important; } html.dark .ts-wrapper.focus .ts-control { border-color: rgba(255,12,129,0.4) !important; box-shadow: 0 0 0 0.2rem rgba(255,12,129,0.12) !important; } html.dark .ts-wrapper .ts-control input { color: #e2e8f0 !important; } html.dark .ts-wrapper .ts-control input::placeholder { color: #64748b !important; } html.dark .ts-wrapper .ts-control .item { color: #e2e8f0 !important; } html.dark .ts-dropdown { background-color: #111 !important; border-color: rgba(255,255,255,0.1) !important; color: #e2e8f0 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important; } html.dark .ts-dropdown .option { color: #cbd5e1 !important; } html.dark .ts-dropdown .option.active, html.dark .ts-dropdown .option:hover { background-color: rgba(255,12,129,0.1) !important; color: #f1f5f9 !important; } html.dark .ts-dropdown .option.selected { background-color: rgba(255,12,129,0.15) !important; color: #f472b6 !important; } html.dark .ts-dropdown-header { background-color: #0d0d0d !important; border-bottom-color: rgba(255,255,255,0.08) !important; } /* ============================================================ MODALES ============================================================ */ html.dark .modal-content { background-color: #111111; border-color: rgba(255, 255, 255, 0.1); color: #cbd5e1; } html.dark .modal-header { background-color: #0d0d0d; border-bottom-color: rgba(255, 255, 255, 0.1); } html.dark .modal-header .modal-title { color: #f1f5f9; } html.dark .modal-footer { background-color: #0d0d0d; border-top-color: rgba(255, 255, 255, 0.1); } html.dark .btn-close { filter: invert(1) grayscale(1) brightness(2); } /* ============================================================ ALERTAS ============================================================ */ html.dark .alert-primary { background-color: rgba(255, 27, 127, 0.1); border-color: rgba(255, 27, 127, 0.2); color: #ff8fb8; } html.dark .alert-secondary { background-color: rgba(100, 116, 139, 0.15); border-color: rgba(100, 116, 139, 0.25); color: #94a3b8; } html.dark .alert-success { background-color: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.2); color: #86efac; } html.dark .alert-danger { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); color: #fca5a5; } html.dark .alert-warning { background-color: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); color: #fde68a; } html.dark .alert-info { background-color: rgba(6, 182, 212, 0.1); border-color: rgba(6, 182, 212, 0.2); color: #67e8f9; } html.dark .alert-light { background-color: #0d0d0d; border-color: rgba(255, 255, 255, 0.08); color: #94a3b8; } /* ============================================================ LIST GROUPS ============================================================ */ html.dark .list-group-item { background-color: #111111; border-color: rgba(255, 255, 255, 0.08); color: #cbd5e1; } html.dark .list-group-item:hover { background-color: #1a1a1a; } html.dark .list-group-item.active { background-color: #ff1b7f; border-color: #ff1b7f; color: #fff; } html.dark .list-group-item-action { color: #cbd5e1; } html.dark .list-group-item-action:hover, html.dark .list-group-item-action:focus { background-color: rgba(255, 27, 127, 0.05); color: #f1f5f9; } /* ============================================================ NAV TABS & PILLS ============================================================ */ html.dark .nav-tabs { border-bottom-color: rgba(255, 255, 255, 0.1); } html.dark .nav-tabs .nav-link { color: #94a3b8; } html.dark .nav-tabs .nav-link:hover { color: #e2e8f0; } html.dark .nav-tabs .nav-link.active { background-color: #111111; border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) #111111; color: #ff1b7f; } html.dark .nav-pills .nav-link { color: #94a3b8; } html.dark .nav-pills .nav-link:hover { color: #e2e8f0; background-color: rgba(255, 255, 255, 0.05); } html.dark .nav-pills .nav-link.active, html.dark .nav-pills .show > .nav-link { background-color: #ff1b7f; color: #fff; } /* ============================================================ PAGINACIÓN ============================================================ */ html.dark .page-link { background-color: #1e1e1e !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #e2e8f0 !important; box-shadow: none !important; } html.dark .page-link:hover { background-color: rgba(255, 27, 127, 0.15) !important; border-color: rgba(255, 27, 127, 0.35) !important; color: #ff6bb5 !important; } html.dark .page-item.active .page-link { background-color: #ff1b7f !important; border-color: #ff1b7f !important; color: #fff !important; } html.dark .page-item.disabled .page-link { background-color: #111 !important; border-color: rgba(255, 255, 255, 0.07) !important; color: #475569 !important; opacity: 0.5; } /* ============================================================ BREADCRUMB ============================================================ */ html.dark .breadcrumb-section, html.dark .breadcrumb-bar, html.dark section.breadcrumb-section { background-color: #080808 !important; } html.dark .breadcrumb { background-color: transparent; } html.dark .breadcrumb-item { color: #94a3b8; } html.dark .breadcrumb-item.active { color: #e2e8f0; } html.dark .breadcrumb-item a { color: #ff1b7f; } html.dark .breadcrumb-item + .breadcrumb-item::before { color: #475569; } /* ============================================================ BADGES ============================================================ */ html.dark .badge.bg-light { background-color: #1a1a1a !important; color: #e2e8f0 !important; } html.dark .badge.bg-secondary { background-color: #334155 !important; color: #e2e8f0 !important; } /* ============================================================ BORDERS ============================================================ */ html.dark .border { border-color: rgba(255, 255, 255, 0.1) !important; } html.dark .border-top { border-top-color: rgba(255, 255, 255, 0.1) !important; } html.dark .border-bottom { border-bottom-color: rgba(255, 255, 255, 0.1) !important; } html.dark .border-start { border-left-color: rgba(255, 255, 255, 0.1) !important; } html.dark .border-end { border-right-color: rgba(255, 255, 255, 0.1) !important; } html.dark .border-secondary { border-color: rgba(255, 255, 255, 0.08) !important; } html.dark .border-light { border-color: rgba(255, 255, 255, 0.06) !important; } /* ============================================================ BOTONES (variantes claras) ============================================================ */ html.dark .btn-light { background-color: #1a1a1a; border-color: rgba(255, 255, 255, 0.1); color: #e2e8f0; } html.dark .btn-light:hover { background-color: #222222; color: #f1f5f9; } html.dark .btn-outline-secondary { border-color: rgba(255, 255, 255, 0.2); color: #94a3b8; } html.dark .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.3); color: #e2e8f0; } html.dark .btn-outline-dark { border-color: rgba(255, 255, 255, 0.3); color: #e2e8f0; } html.dark .btn-outline-dark:hover { background-color: rgba(255, 255, 255, 0.1); color: #f1f5f9; } /* ============================================================ FOOTER ============================================================ */ html.dark .footer { background-color: #050505 !important; border-top: 1px solid rgba(255, 255, 255, 0.06); } html.dark .footer h5 { color: #f1f5f9; } html.dark .footer a { color: rgba(255, 255, 255, 0.6) !important; } html.dark .footer a:hover { color: #ff1b7f !important; } html.dark .footer .text-gray-500 { color: rgba(255, 255, 255, 0.35) !important; } html.dark .footer .list-group-item { background-color: transparent !important; } html.dark .footer .list-group-item a { color: rgba(255,255,255,0.6) !important; } /* ============================================================ NAVBAR COLLAPSE — menú móvil expandido ============================================================ */ /* theme.css aplica background:#fff y box-shadow al .navbar-collapse */ html.dark .nav-header .navbar-collapse { background-color: #000000 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important; } html.dark #navbarSupportedContent { background-color: #000000 !important; } /* theme.css aplica border-top: 1px solid #dee2e6 a cada .nav-link del navbar — esa es la línea gris que aparece en modo oscuro */ html.dark .nav-header .navbar-nav .nav-link { border-top-color: rgba(255, 255, 255, 0.06) !important; } html.dark .mobile-collapse-top { background-color: #000000; } html.dark .mobile-user-name { color: #e2e8f0; } html.dark .mobile-profile-link { color: #ff1b7f !important; } html.dark .mobile-quick-btn { background-color: #0d0d0d !important; color: #e2e8f0 !important; } html.dark .mobile-quick-btn:hover { background-color: rgba(255, 27, 127, 0.15) !important; color: #ff1b7f !important; } html.dark .mobile-quick-btn.active { background-color: rgba(255, 27, 127, 0.2) !important; color: #ff1b7f !important; } /* Panel de notificaciones móvil */ html.dark .mobile-notif-dropdown { background-color: #111111 !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* ============================================================ HOME / WELCOME — cards de eventos, búsqueda ============================================================ */ html.dark .event-card { background-color: #111111; border-color: rgba(255, 255, 255, 0.08); } html.dark .event-title { color: #f1f5f9; } html.dark .event-date { color: #94a3b8; } html.dark .home-search, html.dark .banner-search { background-color: #111111; } /* ============================================================ EVENTS LISTING — sidebar de filtros, skeleton loaders ============================================================ */ html.dark .filter-sidebar, html.dark .filter-area, html.dark .sidebar { background-color: #111111; } /* Clase .skeleton del tema compilado — shimmer claro → oscuro */ html.dark .skeleton, html.dark .skeleton-loader { background-color: #1a1a1a !important; background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) ) !important; } /* ── /events — tarjeta wrapper del skeleton (Events.vue, scoped CSS) ── */ html.dark .ev-skeleton-card { background: #111111 !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important; } /* ── /events — bloques internos del skeleton ── */ html.dark .ev-sk-img, html.dark .ev-sk-line, html.dark .ev-sk-line--lg, html.dark .ev-sk-line--price { background-color: #1a1a1a !important; background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) ) !important; } /* ============================================================ EVENT DETAIL — box de tickets, staff card ============================================================ */ html.dark .event-detail, html.dark .ticket-area, html.dark .booking-box { background-color: #111111; border-color: rgba(255, 255, 255, 0.08); } html.dark .staff-card { background-color: #111111; border-color: rgba(255, 255, 255, 0.08); } /* ============================================================ ORGANIZER PROFILE — info card ============================================================ */ html.dark .organizer-info, html.dark .organizer-bio { background-color: #111111; color: #cbd5e1; } /* ============================================================ CHECKOUT / BOOKING — formulario de tarjeta ============================================================ */ html.dark .card-form__inner { background: #111111; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } html.dark .card-input__label { color: #94a3b8; } html.dark .card-input__input { background-color: #0d0d0d; border-color: rgba(255, 255, 255, 0.12); color: #e2e8f0; } html.dark .card-input__input:focus { border-color: #ff1b7f; box-shadow: 0 0 0 0.15rem rgba(255, 27, 127, 0.2); } /* ============================================================ ACCORDION ============================================================ */ html.dark .accordion-item { background-color: #111111; border-color: rgba(255, 255, 255, 0.08); } html.dark .accordion-button { background-color: #0d0d0d; color: #e2e8f0; } html.dark .accordion-button:not(.collapsed) { background-color: rgba(255, 27, 127, 0.1); color: #ff1b7f; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); } html.dark .accordion-button::after { filter: invert(1); } html.dark .accordion-body { background-color: #111111; color: #cbd5e1; } /* ============================================================ PROGRESS BAR ============================================================ */ html.dark .progress { background-color: #0d0d0d; } /* ============================================================ POPOVER & TOOLTIP ============================================================ */ html.dark .popover { background-color: #111111; border-color: rgba(255, 255, 255, 0.1); } html.dark .popover-header { background-color: #0d0d0d; border-bottom-color: rgba(255, 255, 255, 0.08); color: #f1f5f9; } html.dark .popover-body { color: #cbd5e1; } /* ============================================================ SCROLLBAR PERSONALIZADO ============================================================ */ html.dark ::-webkit-scrollbar-track { background: #080808; } html.dark ::-webkit-scrollbar-thumb { background: #222222; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #2f2f2f; } /* ============================================================ DARK MODE TOGGLE BUTTON ============================================================ */ .dark-mode-toggle { background: none; border: none; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: rgba(255, 255, 255, 0.75); padding: 0; flex-shrink: 0; line-height: 1; } .dark-mode-toggle:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } /* Modo claro: muestra luna; modo oscuro: muestra sol */ .dark-mode-toggle .icon-sun { display: none; } .dark-mode-toggle .icon-moon { display: inline; } html.dark .dark-mode-toggle .icon-sun { display: inline; } html.dark .dark-mode-toggle .icon-moon { display: none; } /* ============================================================ HOME — BARRA DE BÚSQUEDA (HomeSearch.vue, scoped) ============================================================ */ html.dark .home-search-bar { background: #111111 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important; } html.dark .home-search-input { color: #e2e8f0 !important; } html.dark .home-search-input::placeholder { color: #475569 !important; } /* ============================================================ /events — BARRA DE BÚSQUEDA Y CHIPS (Events.vue, scoped) ============================================================ */ html.dark .ev-search-wrap { background: #111111 !important; border-color: rgba(255, 255, 255, 0.1) !important; } html.dark .ev-search-wrap:focus-within { border-color: #ff0c81 !important; box-shadow: 0 0 0 3px rgba(255, 12, 129, 0.1) !important; } html.dark .ev-search-input { color: #e2e8f0 !important; } html.dark .ev-search-input::placeholder { color: #475569 !important; } html.dark .ev-search-icon { color: #475569 !important; } html.dark .ev-search-clear { color: #475569 !important; } html.dark .ev-search-clear:hover { color: #ff0c81 !important; } /* Category chips */ html.dark .ev-chip { background: #111111 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #94a3b8 !important; } html.dark .ev-chip:hover { border-color: #ff0c81 !important; color: #ff0c81 !important; } html.dark .ev-chip.active { background: #ff0c81 !important; border-color: #ff0c81 !important; color: #fff !important; } /* ============================================================ /events — SKELETON BLADE (index.blade.php, carga antes de Vue) ============================================================ */ /* Contenedor mobile: tiene background:#fff desde el