/* ========================================================== */ /* === TEMA CLARO — solo para vendedor.html (roles 3 y 6) === */ /* === Se activa agregando la clase "light-theme" al === */ /* === No modifica operaciones.css; sobreescribe por mayor === */ /* === especificidad (prefijo body.light-theme) cuando === */ /* === la clase está presente. === */ /* ========================================================== */ body.light-theme { background-color: #f4f4f9; color: #222; } body.light-theme button { color: #fff; } /* #view-races-btn (Gacetas y Programas del Día) trae color inline en el HTML (style="background-color: #444; border-color: #6f42c1;"), que gana por especificidad sobre cualquier clase — se fuerza el override solo aquí. */ body.light-theme #view-races-btn { background-color: #6c757d !important; border-color: #5a6268 !important; } body.light-theme input[type="date"], body.light-theme input[type="number"], body.light-theme input[type="text"], body.light-theme input[type="password"], body.light-theme select { background-color: #fff; color: #222; border: 1px solid #ccc; } /* --- Navbar --- */ body.light-theme .navbar { background-color: #ffffff; border: 1px solid #ddd; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } body.light-theme .nav-item { color: #333; } body.light-theme .nav-item:hover { background-color: #eef1f5; } body.light-theme .nav-logout-btn { color: #fff; } body.light-theme .dropdown-content { background-color: #ffffff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); border: 1px solid #ddd; } body.light-theme .dropdown-content a { color: #333; } body.light-theme .dropdown-content a:hover { background-color: #eef1f5; } /* --- Terminal de apuestas --- */ body.light-theme .pagos, body.light-theme .generarApuesta { background-color: #ffffff; border: 1px solid #ddd; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } body.light-theme .pagos h2, body.light-theme .pagos h3 { color: #222; } body.light-theme .miniNav { border-bottom: 1px solid #ddd; } body.light-theme .miniNav p { color: #777; } body.light-theme .instructions { background-color: #eef1f5; border: 1px solid #ddd; color: #333; } body.light-theme .caballos { border: 1px solid #ddd; } body.light-theme th, body.light-theme td { border-bottom: 1px solid #e5e5e5; } body.light-theme th { background-color: #f0f2f5; color: #222; } body.light-theme .costos { border-top: 1px solid #ddd; } body.light-theme .costo-item-vertical p, body.light-theme .costo-item-horizontal label, body.light-theme .costo-total p { color: #777; } /* --- Contenedores genéricos (dashboard/tarjetas) --- */ body.light-theme .container { background: #ffffff; border: 1px solid #ddd; } body.light-theme h1, body.light-theme h2, body.light-theme h3, body.light-theme h4 { color: #222; } body.light-theme hr { border: 1px solid #e5e5e5; } /* --- Interruptor de impresión (reutiliza .switch/.slider) --- */ body.light-theme .print-toggle { background-color: #eef1f5; border: 1px solid #ddd; } body.light-theme .print-toggle label { color: #333; } /* --- Filas de caballos retirados --- */ body.light-theme .withdrawn-horse { background-color: #f6d9d9 !important; color: #888; } /* --- Notificaciones --- */ body.light-theme .nav-notification-icon { color: #333; } body.light-theme .notif-item { background-color: #f0f2f5; border-left: 4px solid #ccc; } body.light-theme .notif-item.unread { border-left: 4px solid #00aaff; background-color: #e8f4fc; } body.light-theme .notif-title { color: #222; } body.light-theme .notif-time { color: #777; } body.light-theme .notif-body { color: #444; } /* --- Toggle de tema (mismo componente visual .switch/.slider) --- */ body.light-theme #nav-theme-toggle .theme-toggle-label { color: #333; } /* ========================================================== */ /* === Overrides para páginas que usan dark-theme.css === */ /* === (principal, nacionales, clientes, transacciones, === */ /* === reportes, caja, taquilla, principal_taquilla) === */ /* === Mismos selectores de dark-theme.css, sin tocarlo. === */ /* ========================================================== */ body.light-theme #page-wrapper { color: #222; } body.light-theme input[type="datetime-local"], body.light-theme textarea { background-color: #fff; color: #222; border: 1px solid #ccc; } body.light-theme input::placeholder { color: #999; } body.light-theme .table-container { border-color: #ddd; } /* --- Tablas genéricas --- */ body.light-theme table { color: #222; } body.light-theme th, body.light-theme td { border: 1px solid #e5e5e5; } body.light-theme tbody tr:nth-child(even) { background-color: #f5f6f8; } /* --- Reportes / Cuadre de Caja --- */ body.light-theme .report-header p { color: #666; } body.light-theme .report-filters { background-color: #f0f2f5; border: 1px solid #ddd; } body.light-theme .report-filters label { color: #333; } body.light-theme .summary-card { background: #ffffff; border: 1px solid #ddd; } body.light-theme .summary-card h4 { color: #666; } body.light-theme .cash-box-section { border-bottom: 1px dashed #ccc; } body.light-theme .cash-box-final-balance { background-color: #f0f2f5; } body.light-theme .cash-box-final-balance h3 { color: #555; } body.light-theme .cash-box-main-total-container .cash-box-total { background-color: #f0f2f5; } body.light-theme .cash-box-main-total-container h3 { color: #555; } /* --- Listas de gestión (taquilla, clientes) --- */ body.light-theme .management-column { background-color: #f5f6f8; border: 1px solid #ddd; } body.light-theme .list-item { border: 1px solid #ddd; } body.light-theme .list-item:hover { background-color: #eef1f5; } body.light-theme .list-item-content small { color: #777; } /* --- Saldo / historial (paneles tipo dashboard) --- */ body.light-theme .saldo-display { background-color: #f0f2f5; } body.light-theme .saldo-display h3 { color: #666; } body.light-theme .historial-apuestas { background-color: #ffffff; border: 1px solid #ddd; } /* --- Modales (SweetAlert propio, config, resultados, detalles de apuesta) --- */ body.light-theme .modal-content { background: #ffffff; color: #222; border: 1px solid #ddd; } body.light-theme .modal-content h2 { border-bottom: 1px solid #e5e5e5; } body.light-theme .modal-close-btn { color: #999; } body.light-theme .modal-close-btn:hover { color: #333; } body.light-theme .modal-content input, body.light-theme .modal-content textarea, body.light-theme .modal-content input[type="number"] { background-color: #fff; color: #222; border: 1px solid #ccc; } body.light-theme .modal-content label { color: #444; } body.light-theme #results-modal .modal-content, body.light-theme #bet-details-modal .modal-content { background-color: #ffffff; color: #222; } body.light-theme #results-modal .modal-header, body.light-theme #bet-details-modal .modal-header { border-bottom: 1px solid #e5e5e5; } body.light-theme #results-modal .modal-header p, body.light-theme #bet-details-modal .modal-header p { color: #777; } body.light-theme .config-section { background: #f5f6f8; } /* --- resultados.html: lista de hipódromos/carreras --- */ body.light-theme .racetrack-group { background: #ffffff; border: 1px solid #ddd; } body.light-theme .racetrack-group h3 { color: #222; border-bottom: 1px solid #e5e5e5; } body.light-theme .race-result-item { background: #f5f6f8; border: 1px solid #e0e0e0; } body.light-theme .race-result-item .race-number { color: #222; } body.light-theme .race-result-item .race-view i { color: #999; } body.light-theme .race-result-item:hover { background: #00aaff; border-color: #00aaff; } body.light-theme .race-result-item:hover .race-number, body.light-theme .race-result-item:hover .race-view i { color: #fff; } /* --- Modal de resultados: podio y pagos exóticos --- */ body.light-theme .podium-place { background-color: #f0f2f5; } body.light-theme .podium-place .position h3 { color: #222; } body.light-theme .podium-place .payout-info { background-color: #ffffff; border: 1px solid #e0e0e0; } body.light-theme .payout-info .payout-label { color: #777; } body.light-theme .payout-info .payout-value { color: #222; } body.light-theme .exotics-section h4 { border-top: 1px solid #e5e5e5; } body.light-theme .exotic-result { background-color: #f0f2f5; } body.light-theme .exotic-result .exotic-horses { color: #555; } body.light-theme .exotic-base { color: #666; background-color: #e0e0e0; }