/* ============================================================ Modo oscuro permanente — ICONICA Override global. Carga de último en el . Mantiene el teal de marca (#019C8C) como acento. ============================================================ */ :root { --dk-bg: #121417; /* fondo base de la página */ --dk-surface: #1c2024; /* tarjetas / superficies */ --dk-surface-2: #23282d; /* superficies elevadas / inputs */ --dk-border: #2e343b; /* bordes sutiles */ --dk-text: #e6e8ea; /* texto principal */ --dk-text-soft: #a7adb4; /* texto secundario / muted */ --dk-accent: #2fd4c1; /* teal un poco más brillante para contraste en oscuro */ } /* ── Base ───────────────────────────────────────────────── */ body { background: var(--dk-bg) !important; color: var(--dk-text) !important; } main, .main-content, section, .container, .container-fluid, .row { background-color: transparent; } section, .services-section, .py-5 { background: var(--dk-bg); } /* ── Tipografía ─────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: #f3f4f6 !important; } p, li, label, td, th, .lead, small { color: var(--dk-text); } .text-muted { color: var(--dk-text-soft) !important; } .text-dark { color: var(--dk-text) !important; } a { color: var(--dk-accent); } a:hover { color: #56e4d3; } /* ── Navbar / Header ────────────────────────────────────── */ .header, .navbar, .navbar.bg-white, .navbar-light.bg-white { background: #15181c !important; box-shadow: 0 1px 0 var(--dk-border), 0 2px 12px rgba(0,0,0,.4) !important; } .navbar .nav-link { color: var(--dk-text) !important; } .navbar .nav-link.active, .navbar .nav-link:hover { color: var(--dk-accent) !important; } .navbar-toggler { border-color: var(--dk-border) !important; } .navbar-toggler-icon { filter: invert(1) brightness(1.6); } /* ── Superficies claras de Bootstrap ────────────────────── */ .bg-white, .bg-light { background: var(--dk-surface) !important; } /* ── Tarjetas ───────────────────────────────────────────── */ .card { background: var(--dk-surface) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } .card .card-title, .card h5, .card h4, .card h3 { color: #f3f4f6 !important; } .card .card-text, .card p { color: var(--dk-text-soft) !important; } .shadow-sm, .shadow, .card { box-shadow: 0 6px 20px rgba(0,0,0,.45) !important; } /* ── Estilos inline claros → oscuro (catch-all) ─────────── */ [style*="background: white"], [style*="background:white"], [style*="background:#fff"], [style*="background: #fff"], [style*="background:#ffffff"],[style*="background: #ffffff"], [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background-color:#ffffff"], [style*="background-color: #ffffff"], [style*="background: rgb(255,255,255)"] { background-color: var(--dk-surface) !important; } [style*="background:#f8f9fa"], [style*="background: #f8f9fa"], [style*="background-color:#f8f9fa"], [style*="background-color: #f8f9fa"], [style*="background:#f1f3f5"], [style*="background: #f1f3f5"], [style*="background-color:#f1f3f5"], [style*="background:#e9ecef"], [style*="background: #e9ecef"] { background-color: var(--dk-surface-2) !important; } [style*="color:#333"], [style*="color: #333"], [style*="color:#444"], [style*="color: #444"], [style*="color:#555"], [style*="color: #555"], [style*="color:#666"], [style*="color: #666"], [style*="color:#000"], [style*="color: #000"], [style*="color: black"], [style*="color:black"] { color: var(--dk-text) !important; } /* ── Formularios ────────────────────────────────────────── */ .form-control, input, textarea, select { background: var(--dk-surface-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } .form-control:focus { border-color: var(--dk-accent) !important; box-shadow: 0 0 0 .2rem rgba(47,212,193,.2) !important; } .form-control::placeholder { color: #7d848b !important; } .input-group-addon, .input-group-text { background: var(--dk-surface) !important; color: var(--dk-text-soft) !important; border-color: var(--dk-border) !important; } /* ── Botones ────────────────────────────────────────────── */ .btn-outline-secondary { color: var(--dk-text) !important; border-color: var(--dk-border) !important; } .btn-outline-secondary:hover { background: var(--dk-surface-2) !important; color: #fff !important; } .btn-light, .btn-white { background: var(--dk-surface-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } /* ── Bordes claros ──────────────────────────────────────── */ .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--dk-border) !important; } hr { border-color: var(--dk-border) !important; opacity: 1; } /* ── Footer (ya era oscuro: armonizar) ──────────────────── */ .footer.bg-dark { background: #0e1013 !important; } /* ── El acento teal y el slider se mantienen tal cual ───── */ .text-primary { color: var(--dk-accent) !important; } /* ── Componentes con clases propias (wizard de citas, etc.) ── */ .appointment-card, .appointment-details-card, .search-container, .calendar-container, .service-card, .bank-account-item, .payment-panel, .payment-summary, .offline-box, .payphone-box { background: var(--dk-surface) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } .service-title, .service-card .service-title, .step-content h3, .appointment-body h3, .appointment-details-card h1, .appointment-details-card h2, .appointment-details-card h3, .appointment-details-card h4, .appointment-details-card h5 { color: #f3f4f6 !important; } .service-description, .service-card .service-description, .service-meta, .service-duration { color: var(--dk-text-soft) !important; } /* Estado seleccionado: mantener el teal de marca */ .service-card.selected { background: var(--primary-color) !important; border-color: var(--primary-color) !important; } .service-card.selected .service-title, .service-card.selected .service-description, .service-card.selected .service-duration, .service-card.selected .service-price { color: #fff !important; } /* Indicador de pasos (círculos) */ .step { background: var(--dk-surface-2) !important; color: var(--dk-text-soft) !important; } .step.active, .step.completed { background: var(--primary-color) !important; color: #fff !important; } .step:not(:last-child)::after { background: var(--dk-border) !important; } .step.active::after, .step.completed::after { background: var(--primary-color) !important; } /* Columna que contiene las tarjetas de servicio (franja clara) */ .category-services-col { background: var(--dk-bg) !important; } /* Paginación de servicios */ .btn-page-prev, .btn-page-next { background: var(--dk-surface-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } /* Calendario */ .calendar-day-header { background: var(--dk-surface-2) !important; color: var(--dk-text-soft) !important; } .calendar-day { background: var(--dk-surface-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } .calendar-day.past { background: var(--dk-bg) !important; color: #5c636b !important; } .calendar-day.selected { background: var(--primary-color) !important; color: #fff !important; } /* Modales (confirmar servicio / advertencia) ya usan inline white → catch-all los oscurece; reforzamos el texto del cuerpo */ #modalConfirmServicio .svc-modal, #modalConfirmServicio > div > div { color: var(--dk-text); } /* ============================================================ PANEL ADMIN (admin/layout.blade.php) El sidebar ya es oscuro; oscurecemos el resto del chrome. ============================================================ */ .topbar { background: #15181c !important; box-shadow: 0 1px 0 var(--dk-border), 0 2px 12px rgba(0,0,0,.35) !important; } .topbar h1 { color: #f3f4f6 !important; } .btn-hamburger { color: var(--dk-text) !important; } .btn-hamburger:hover { background: var(--dk-surface-2) !important; } /* Tarjetas de estadísticas */ .stat-card { background: var(--dk-surface) !important; box-shadow: 0 6px 20px rgba(0,0,0,.45) !important; } .stat-info h3 { color: #f3f4f6 !important; } .stat-info p { color: var(--dk-text-soft) !important; } /* Cards del admin */ .card-header { border-bottom-color: var(--dk-border) !important; } .card-header h4 { color: #f3f4f6 !important; } /* Tablas */ table { color: var(--dk-text) !important; } thead th { background: var(--dk-surface-2) !important; color: var(--dk-text-soft) !important; } tbody td { color: var(--dk-text) !important; border-bottom-color: var(--dk-border) !important; } tbody tr:hover { background: var(--dk-surface-2) !important; } /* Login del admin (card claro sobre el fondo en gradiente) */ .login-card, .login-box, .admin-login, .login-body { background: var(--dk-surface) !important; color: var(--dk-text) !important; } .login-body .form-group label, .login-card label { color: var(--dk-text-soft) !important; } .login-footer { color: var(--dk-text-soft) !important; } /* Badges de estado: se mantienen pastel (buen contraste sobre oscuro), solo el gris secundario se adapta */ .badge-secondary { background: #2e343b !important; color: var(--dk-text-soft) !important; } /* Tarjeta de cuenta bancaria (admin) — el cuerpo era blanco */ .bank-card, .bank-card-body { background: var(--dk-surface) !important; } .bank-card-body .bank-info-value { color: var(--dk-text) !important; } .bank-card-body .bank-info-label { color: var(--dk-text-soft) !important; } .bank-info-row { border-color: var(--dk-border) !important; } /* Componentes propios de las vistas admin (citas, modales, grids, etc.) — solo el fondo/texto; NO tocamos border-color para conservar acentos de color (p.ej. el borde izquierdo de las stat-mini). */ .stat-mini, .tabs-bar, .filters-bar, .calendar-card, .event-tooltip, .modal-box, .empty-state, .img-preview, .slot-cell, .schedule-card, .day-card, .summary-box, .info-box { background: var(--dk-surface) !important; color: var(--dk-text) !important; } .stat-mini h3 { color: #f3f4f6 !important; } .stat-mini p { color: var(--dk-text-soft) !important; } /* Toggle de pestañas (Lista / Calendario) */ .tab-btn { color: var(--dk-text) !important; } .tab-btn.active { background: var(--primary-color) !important; color: #fff !important; } .tab-btn:hover:not(.active) { background: var(--dk-surface-2) !important; } /* Calendario (FullCalendar) en oscuro */ .fc { color: var(--dk-text) !important; } .fc .fc-toolbar-title { color: #f3f4f6 !important; } .fc-theme-standard td, .fc-theme-standard th, .fc-scrollgrid, .fc-scrollgrid td { border-color: var(--dk-border) !important; } .fc .fc-daygrid-day { background: var(--dk-surface) !important; } .fc .fc-day-today { background: rgba(47,212,193,.08) !important; } .fc .fc-col-header-cell { background: var(--dk-surface-2) !important; } .fc .fc-daygrid-day-number, .fc .fc-col-header-cell-cushion { color: var(--dk-text) !important; } .fc .fc-button-primary { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } .fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--primary-color) !important; border-color: var(--primary-color) !important; } /* Grid de horarios (timeslots) */ .slot-cell.available { background: rgba(47,212,193,.18) !important; color: #cdebe6 !important; } .slot-cell.unavailable { background: var(--dk-surface-2) !important; color: var(--dk-text-soft) !important; } /* ── Barrido de TODAS las tarjetas/contenedores claros del admin ── */ .modal-box, .card-body, .apt-card, .builder-card, .form-card, .week-grid, .range-preview, .preview-box, .parent-section, .subcategories-grid, .client-card, .pro-card, .pro-card-header, .service-card-admin, .mobile-day-card, .warning-box, .empty-state, .empty-blocks, .login-card, .img-preview, .photo-preview, .sub-img, .service-img, .time-slot-btn, .time-label, .slot-cell, .pagination, .day-btn, .day-chip, .duration-btn, .schedule-grid { background: var(--dk-surface) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } /* Títulos dentro de esas tarjetas */ .apt-card h1, .apt-card h2, .apt-card h3, .apt-card h4, .apt-card h5, .client-card h3, .pro-card h3, .modal-box h2, .modal-box h3, .builder-card h3, .form-card h3 { color: #f3f4f6 !important; } /* Botones claros (cancelar / limpiar / etc.) → superficie elevada */ .btn-cancel-modal, .btn-clear, .btn-choose-photo, .btn-toggle, .btn-toggle-svc, .btn-toggle-bank, .btn-secondary { background: var(--dk-surface-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } /* Estados/opciones seleccionables: mantener el teal */ .day-btn.active, .day-chip.active, .day-chip.selected, .day-btn.selected, .duration-btn.active, .duration-btn.selected, .time-slot-btn.active { background: var(--primary-color) !important; color: #fff !important; border-color: var(--primary-color) !important; }