/* GENERADO POR tools/dark-mode/build.sh — NO EDITAR A MANO. Al imprimir siempre sale claro: todo el tema vive dentro de @media screen. */ @media screen { /* ========================================================================== MODO OSCURO — Plataforma de Socios Decora Pro -------------------------------------------------------------------------- Se activa con (y ademas body.dark-mode, que ya usaban algunos estilos viejos del layout). Como esta armado, de arriba hacia abajo: 1. Paleta base 2. Variables que cada pagina define en su propio :root 3. Parches puntuales (variables con doble uso) 4. Base global: body, scrollbar, seleccion, autocompletado 5. Bootstrap 5.3 (lo que data-bs-theme NO cubre) 6. SweetAlert2 7. El interruptor del header 8. (generado) reglas por pagina 9. (generado) reglas para estilos escritos en linea ========================================================================== */ /* ============ 1. PALETA ============ */ html[data-theme="dark"] { color-scheme: dark; --dp-bg: #0f172a; /* fondo de la pagina */ --dp-surface: #1e293b; /* tarjetas, paneles */ --dp-surface-2: #182236; /* zonas hundidas, encabezados de tabla */ --dp-surface-3: #273549; /* hover, chips */ --dp-border: #334155; --dp-text: #f1f5f9; --dp-text-2: #cbd5e1; --dp-muted: #94a3b8; --dp-muted-2: #7c8a9e; /* --- variables del layout (socios/layouts/app.blade.php) --- */ --bg-color: var(--dp-bg); --text-color: var(--dp-text); --header-bg: #172032; --card-bg: var(--dp-surface); --border-color: var(--dp-border); --muted: var(--dp-muted); --m: var(--dp-muted); --shadow: 0 4px 20px rgba(0, 0, 0, .45); } /* ============ 2. VARIABLES PROPIAS DE CADA PAGINA ============ Cada vista declara su mini paleta en :root. Aqui se re-declaran en oscuro: con esto una sola linea arregla decenas de reglas de esa pagina. (`html[data-theme="dark"]` gana a `:root` por especificidad.) */ html[data-theme="dark"] { /* configurador / cortinero / dunes / madera / persianas / sheer */ --color-card-border: var(--dp-border); --color-primario-light-bg: rgba(135, 178, 74, .14); --color-header: var(--dp-text); /* solo se usa como color de texto */ /* configurador_papel_tapiz */ --bg: var(--dp-bg); --card: var(--dp-surface); --bdr: var(--dp-border); --bdr-l: var(--dp-border); --txt: var(--dp-text); --txt2: var(--dp-text-2); --txt3: var(--dp-muted); --hdr: var(--dp-text); --pri: #7fd6a8; --pri-h: #a5e6c4; --pri-l: rgba(127, 214, 168, .12); --pri-s: rgba(127, 214, 168, .18); --gold-l: rgba(197, 168, 128, .12); --acc-l: rgba(135, 178, 74, .14); --canvas: #111a2b; --glass: rgba(30, 41, 59, .90); --glass-line: rgba(255, 255, 255, .10); --ink-04: rgba(255, 255, 255, .05); --ink-08: rgba(255, 255, 255, .09); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30); --shadow-md: 0 8px 20px -10px rgba(0, 0, 0, .60), 0 3px 8px rgba(0, 0, 0, .35); --shadow-lg: 0 26px 50px -22px rgba(0, 0, 0, .75), 0 8px 18px rgba(0, 0, 0, .40); --shadow-xl: 0 44px 90px -30px rgba(0, 0, 0, .85), 0 12px 26px rgba(0, 0, 0, .45); /* mi_equipo / mis_cotizaciones / todas_cotizaciones */ --t: var(--dp-text); --line2: rgba(255, 255, 255, .09); /* cotizador */ --app-bg: var(--dp-bg); --text-dark: var(--dp-text); --text-muted: var(--dp-muted); /* avisos */ --app-surface: var(--dp-surface); --app-text: var(--dp-text); --app-muted: var(--dp-muted); --app-border: var(--dp-border); --app-shadow: 0 4px 24px rgba(0, 0, 0, .40); /* panel_distribuidor */ --c-bg: var(--dp-bg); --c-surface: var(--dp-surface); --c-border: var(--dp-border); --c-text-main: var(--dp-text); --c-text-muted: var(--dp-muted); /* panel_odoo */ --dark: var(--dp-text); --primary-light: rgba(135, 178, 74, .14); --slate-50: var(--dp-surface-2); --slate-100: var(--dp-border); --slate-200: var(--dp-border); --slate-500: var(--dp-muted); --slate-800: var(--dp-text); /* perfil */ --ui-bg: var(--dp-bg); --ui-card: var(--dp-surface); --ui-text-main: var(--dp-text); --ui-text-muted: var(--dp-muted); --ui-border: var(--dp-border); --ui-shadow: 0 10px 40px -10px rgba(0, 0, 0, .55); /* login (solo se usa como COLOR DE TEXTO: titulo, etiquetas y el campo) */ --brand-blue: var(--dp-text); } /* ============ 3. PARCHES: variables con DOBLE uso ============ Estas variables se usan como texto Y como fondo en el mismo archivo. Se resolvieron a "color de texto claro", asi que los pocos lugares donde pintaban un fondo se corrigen a mano. */ html[data-theme="dark"] .toast { background: var(--dp-surface-3) !important; color: var(--dp-text) !important; } html[data-theme="dark"] .ux-nav-btn.active { background: var(--dp-surface-3) !important; color: var(--dp-text) !important; } html[data-theme="dark"] .ux-profit-widget { background: linear-gradient(145deg, #0b1220 0%, #1e293b 100%) !important; } html[data-theme="dark"] .btn-update-margin { background: var(--dp-surface-3) !important; color: var(--dp-text) !important; } /* ============ 4. BASE GLOBAL ============ */ html[data-theme="dark"] body { background-color: var(--dp-bg); color: var(--dp-text); } /* Transicion suave SOLO durante el cambio (la pone y la quita el JS). */ html.dp-cambiando-tema, html.dp-cambiando-tema *, html.dp-cambiando-tema *::before, html.dp-cambiando-tema *::after { transition: background-color .22s ease, background .22s ease, color .22s ease, border-color .22s ease, fill .22s ease !important; } @media (prefers-reduced-motion: reduce) { html.dp-cambiando-tema, html.dp-cambiando-tema * { transition: none !important; } } /* Barras de desplazamiento */ html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dp-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3b4b63; border-radius: 8px; border: 3px solid var(--dp-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4c5f7b; } /* Texto seleccionado y campos */ html[data-theme="dark"] ::selection { background: rgba(135, 178, 74, .35); color: #fff; } html[data-theme="dark"] ::placeholder { color: var(--dp-muted-2) !important; opacity: 1; } /* Autocompletado del navegador: por defecto pinta un amarillo/azul clarito imposible de leer en oscuro. El truco del inset-shadow lo repinta. */ html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:focus, html[data-theme="dark"] textarea:-webkit-autofill, html[data-theme="dark"] select:-webkit-autofill { -webkit-text-fill-color: var(--dp-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--dp-surface-3) inset !important; caret-color: var(--dp-text); transition: background-color 5000s ease-in-out 0s; } /* ============ 5. BOOTSTRAP 5.3 ============ data-bs-theme="dark" ya oscurece tarjetas, modales, tablas, formularios, menus y bordes. Lo que NO cubre son las utilidades de color FIJO (bg-white, text-dark...), porque por definicion son un color concreto. */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-body, html[data-theme="dark"] .bg-body-tertiary { background-color: var(--dp-surface) !important; } html[data-theme="dark"] .bg-light { background-color: var(--dp-surface-2) !important; } html[data-theme="dark"] .bg-body-secondary{ background-color: var(--dp-surface-2) !important; } html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-black { color: var(--dp-text) !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-body-secondary { color: var(--dp-muted) !important; } html[data-theme="dark"] .text-secondary { color: var(--dp-muted) !important; } html[data-theme="dark"] .btn-white, html[data-theme="dark"] .btn-light { background-color: var(--dp-surface-3); border-color: var(--dp-border); color: var(--dp-text); } html[data-theme="dark"] .btn-white:hover, html[data-theme="dark"] .btn-light:hover { background-color: #33455e; color: var(--dp-text); } html[data-theme="dark"] .table-light > :not(caption) > * > * { background-color: var(--dp-surface-2) !important; color: var(--dp-text) !important; } html[data-theme="dark"] .border, html[data-theme="dark"] [class*="border-"] { border-color: var(--dp-border) !important; } html[data-theme="dark"] .border-0 { border: 0 !important; } html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow-lg { box-shadow: 0 6px 22px rgba(0, 0, 0, .45) !important; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: var(--dp-surface-3); border-color: var(--dp-border); color: var(--dp-text); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--dp-surface-3); color: var(--dp-text); border-color: #87b24a; box-shadow: 0 0 0 .2rem rgba(135, 178, 74, .25); } html[data-theme="dark"] .input-group-text { background-color: var(--dp-surface-2); border-color: var(--dp-border); color: var(--dp-text-2); } html[data-theme="dark"] .modal-content, html[data-theme="dark"] .offcanvas, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .accordion-item, html[data-theme="dark"] .accordion-button { background-color: var(--dp-surface); color: var(--dp-text); border-color: var(--dp-border); } html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--dp-surface-3); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--dp-border); } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2.2); } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--dp-surface); border-color: var(--dp-border) var(--dp-border) var(--dp-surface); color: var(--dp-text); } html[data-theme="dark"] hr { border-color: var(--dp-border); opacity: .5; } /* ============ 6. SWEETALERT2 ============ */ html[data-theme="dark"] .swal2-popup { background: var(--dp-surface) !important; color: var(--dp-text) !important; border: 1px solid var(--dp-border); } html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container, html[data-theme="dark"] .swal2-content { color: var(--dp-text) !important; } html[data-theme="dark"] .swal2-html-container b, html[data-theme="dark"] .swal2-html-container strong { color: var(--dp-text) !important; } html[data-theme="dark"] .swal2-input, html[data-theme="dark"] .swal2-textarea, html[data-theme="dark"] .swal2-select { background: var(--dp-surface-3) !important; color: var(--dp-text) !important; border-color: var(--dp-border) !important; } html[data-theme="dark"] .swal2-close { color: var(--dp-muted) !important; } html[data-theme="dark"] .swal2-close:hover { color: var(--dp-text) !important; } html[data-theme="dark"] .swal2-container { background: rgba(2, 6, 23, .70); } html[data-theme="dark"] .swal2-footer { border-top-color: var(--dp-border) !important; color: var(--dp-muted) !important; } html[data-theme="dark"] .swal2-timer-progress-bar { background: rgba(135, 178, 74, .55) !important; } /* ============ 7. EL INTERRUPTOR DEL HEADER ============ */ .dp-tema-btn { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 62px; height: 32px; padding: 0 7px; border-radius: 50px; cursor: pointer; border: 1px solid var(--border-color, #e2e8f0); background: rgba(0, 0, 0, .03); transition: background .25s ease, border-color .25s ease; flex: 0 0 auto; } .dp-tema-btn:hover { border-color: var(--p, #87b24a); } .dp-tema-btn:focus-visible { outline: 2px solid var(--p, #87b24a); outline-offset: 2px; } .dp-tema-btn i { font-size: .72rem; line-height: 1; z-index: 1; transition: color .25s ease, opacity .25s ease; } .dp-tema-btn .dp-sol { color: #f59e0b; opacity: 1; } .dp-tema-btn .dp-luna { color: #94a3b8; opacity: .55; } .dp-tema-btn .dp-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .28s cubic-bezier(.4, 0, .2, 1), background .25s ease; } html[data-theme="dark"] .dp-tema-btn { background: rgba(255, 255, 255, .06); } html[data-theme="dark"] .dp-tema-btn .dp-sol { opacity: .45; color: #94a3b8; } html[data-theme="dark"] .dp-tema-btn .dp-luna { opacity: 1; color: #facc15; } html[data-theme="dark"] .dp-tema-btn .dp-knob { transform: translateX(30px); background: #334155; } /* Version compacta (solo el icono): en el header movil siempre, y en escritorio por debajo de 1400px, donde el header ya va apretado. */ .dp-tema-btn.dp-mini { width: 32px; height: 32px; padding: 0; justify-content: center; } .dp-tema-btn.dp-mini .dp-knob, .dp-tema-btn.dp-mini .dp-luna { display: none; } .dp-tema-btn.dp-mini .dp-sol { font-size: .95rem; opacity: 1; color: #f59e0b; } html[data-theme="dark"] .dp-tema-btn.dp-mini .dp-sol { display: none; } html[data-theme="dark"] .dp-tema-btn.dp-mini .dp-luna { display: inline; font-size: .95rem; opacity: 1; color: #facc15; } @media (max-width: 1399.98px) { .header-desktop .dp-tema-btn { width: 32px; height: 32px; padding: 0; justify-content: center; } .header-desktop .dp-tema-btn .dp-knob, .header-desktop .dp-tema-btn .dp-luna { display: none; } .header-desktop .dp-tema-btn .dp-sol { font-size: .95rem; opacity: 1; color: #f59e0b; } html[data-theme="dark"] .header-desktop .dp-tema-btn .dp-sol { display: none; } html[data-theme="dark"] .header-desktop .dp-tema-btn .dp-luna { display: inline; font-size: .95rem; opacity: 1; color: #facc15; } .header-desktop .dp-tema-btn.me-3 { margin-right: .6rem !important; } } /* las 3 opciones dentro del menu del usuario */ .dp-tema-opts { display: flex; gap: 4px; padding: 8px 14px 12px; } .dp-tema-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border-color, #e2e8f0); background: none; color: var(--muted, #64748b); font-size: .62rem; font-weight: 700; transition: all .18s ease; } .dp-tema-opt i { font-size: .82rem; } .dp-tema-opt:hover { border-color: var(--p, #87b24a); color: var(--p, #87b24a); } .dp-tema-opt.on { border-color: var(--p, #87b24a); background: rgba(135, 178, 74, .12); color: var(--p, #87b24a); } .dp-tema-cap { padding: 10px 14px 2px; font-size: .6rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted, #94a3b8); } /* ============ 8. SELECT2 (buscador de telas en los configuradores) ============ El menu de Select2 se cuelga del , hereda el texto claro del tema y su panel se quedaba BLANCO (CSS base de select2): texto claro sobre blanco = invisible. Aqui se le da panel oscuro, texto claro y resaltado verde. */ html[data-theme="dark"] .select2-container--default .select2-selection--single { background: var(--dp-surface) !important; border: 1px solid var(--dp-border) !important; } html[data-theme="dark"] .select2-selection--single .select2-selection__rendered { color: var(--dp-text) !important; } html[data-theme="dark"] .select2-selection--single .select2-selection__placeholder { color: var(--dp-muted) !important; } html[data-theme="dark"] .select2-selection--single .select2-selection__arrow b { border-color: var(--dp-muted) transparent transparent transparent !important; } html[data-theme="dark"] .select2-dropdown { background: var(--dp-surface) !important; border: 1px solid var(--dp-border) !important; color: var(--dp-text) !important; } html[data-theme="dark"] .select2-results__option { color: var(--dp-text) !important; background: transparent !important; } html[data-theme="dark"] .select2-results__option--highlighted, html[data-theme="dark"] .select2-results__option--highlighted[aria-selected] { background: rgba(135, 178, 74, .22) !important; color: var(--dp-text) !important; } html[data-theme="dark"] .select2-results__option[aria-selected="true"] { background: var(--dp-surface-3) !important; color: var(--dp-text) !important; } html[data-theme="dark"] .select2-search--dropdown .select2-search__field { background: var(--dp-surface-2) !important; color: var(--dp-text) !important; border: 1px solid var(--dp-border) !important; } html[data-theme="dark"] .select2-results__message { color: var(--dp-muted) !important; } /* ====== 8. REGLAS POR PAGINA (generadas desde el