/** * Tema claro / oscuro. * * POR QUE ESTA EN UNA HOJA APARTE Y NO EN style.css: * `public/css/style.css` es copia byte a byte del legacy y hay un test que lo * vigila (CompletitudPortadaTest::el_css_del_legacy_se_copio_byte_a_byte). Su * propio mensaje lo dice: "cualquier ajuste de estilo va en una hoja aparte". * Esta es esa hoja. Se carga DESPUES de style.css, asi que gana por orden. * * COMO FUNCIONA: * El tema es el atributo `data-bs-theme` del , que es el mecanismo nativo * de Bootstrap 5.3: sus propios componentes (dropdown, modal, tabla, formulario) * se repintan solos. Aqui solo se redefinen (1) las variables propias que * style.css declara en :root y (2) los colores que style.css o las vistas * escriben a pelo, que son los que Bootstrap no puede saber. * * El valor inicial lo fija un script en el del layout, antes de pintar, * para que no haya destello blanco al cargar en modo oscuro. */ /* ========================================================================== 1. Paleta oscura: se redefinen las variables de :root de style.css ========================================================================== */ [data-bs-theme="dark"] { --bg-body: #0b1120; --card-bg: #131b2e; --text-primary: #e2e8f0; --text-muted: #94a3b8; --accent-primary: #60a5fa; --accent-hover: #93c5fd; --accent-light: rgba(96, 165, 250, 0.14); --sidebar-bg: #070c17; --sidebar-text: #94a3b8; --sidebar-hover-bg: rgba(255, 255, 255, 0.08); --sidebar-active-bg: #2563eb; --border-color: #24304a; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.4); /* Variables propias de Bootstrap, para que sus componentes acompanen. */ --bs-body-bg: #0b1120; --bs-body-color: #e2e8f0; --bs-border-color: #24304a; --bs-emphasis-color: #f1f5f9; --bs-secondary-bg: #131b2e; --bs-tertiary-bg: #101828; } /* ========================================================================== 2. Colores que style.css escribe a pelo y no pasan por variable ========================================================================== */ /* La barra superior es blanca translucida en claro; en oscuro se invierte. */ [data-bs-theme="dark"] .top-navbar { background-color: rgba(19, 27, 46, 0.85); border-bottom-color: var(--border-color); } /* Las filas de las tablas van a #ffffff fijo en style.css. */ [data-bs-theme="dark"] .table-custom tbody tr { background-color: var(--card-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } [data-bs-theme="dark"] .table-custom tbody tr:hover { background-color: #1a2440; } [data-bs-theme="dark"] .table-custom td { border-top-color: var(--border-color); border-bottom-color: var(--border-color); } [data-bs-theme="dark"] .table-custom td:first-child { border-left-color: var(--border-color); } [data-bs-theme="dark"] .table-custom td:last-child { border-right-color: var(--border-color); } [data-bs-theme="dark"] .card-kpi { border-color: var(--border-color); } [data-bs-theme="dark"] .company-badge { background: var(--accent-light); color: var(--accent-primary); border-color: rgba(96, 165, 250, 0.3); } /* ========================================================================== 3. Utilidades de Bootstrap con color fijo, usadas en ~20 vistas -------------------------------------------------------------------------- bg-white y text-dark NO reaccionan a data-bs-theme: son colores literales. Se reinterpretan aqui en vez de editar las vistas una por una, que dejaria el mismo resultado con veinte diffs mas y ningun sitio donde leerlo junto. ========================================================================== */ [data-bs-theme="dark"] .bg-white { background-color: var(--card-bg) !important; } [data-bs-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-bs-theme="dark"] .bg-light { background-color: #101828 !important; } [data-bs-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .border-end { border-color: var(--border-color) !important; } /* El pie del layout y las tarjetas heredan de estas dos. */ [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .card-custom { background-color: var(--card-bg); border-color: var(--border-color); } [data-bs-theme="dark"] .dropdown-menu { background-color: var(--card-bg); border: 1px solid var(--border-color) !important; } [data-bs-theme="dark"] .dropdown-item { color: var(--text-primary); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); color: #ffffff; } [data-bs-theme="dark"] .dropdown-divider { border-top-color: var(--border-color); } /* FullCalendar (cronogramas #11 y #13) pinta sobre blanco por defecto. */ [data-bs-theme="dark"] .fc { --fc-border-color: var(--border-color); --fc-page-bg-color: var(--card-bg); --fc-neutral-bg-color: #101828; --fc-today-bg-color: rgba(96, 165, 250, 0.12); color: var(--text-primary); } /* ========================================================================== 4. La marca del Comite, en la barra superior -------------------------------------------------------------------------- El PNG es texto SIN FONDO, asi que no lleva border-radius ni sombra: no es una ficha, es el texto sobre la barra. Como la barra cambia de color con el tema y el logo no tiene fondo propio, hacen falta DOS archivos: logo-cem-oscuro.png (pizarra #1e293b, para la barra clara) y logo-cem-claro.png (blanco, para la oscura). El marcado trae los dos y aqui se decide cual se ve — sin JS, para que la version correcta ya este en el primer pintado. La cabecera del menu lateral NO se toca: conserva el corazon y "BioMedix ERP" del legacy. PARA CAMBIAR EL TAMANO: es el height de aqui abajo, y nada mas. El ancho sale solo de la proporcion del PNG (730x336). ========================================================================== */ .marca-cem { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; } .marca-cem img { display: block; height: 32px; width: auto; opacity: 0.92; transition: opacity 0.2s ease; } .marca-cem:hover img { opacity: 1; } /* Tema claro: se ve la version oscura. */ .marca-cem .marca-cem-en-oscuro { display: none; } /* Tema oscuro: al reves. */ [data-bs-theme="dark"] .marca-cem .marca-cem-en-claro { display: none; } [data-bs-theme="dark"] .marca-cem .marca-cem-en-oscuro { display: block; } @media (max-width: 575.98px) { .marca-cem img { height: 26px; } } /* ========================================================================== 5. El boton que cambia de tema ========================================================================== */ .btn-tema { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--border-color); background-color: transparent; color: var(--text-muted); font-size: 1.05rem; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .btn-tema:hover, .btn-tema:focus-visible { color: var(--accent-primary); border-color: var(--accent-primary); background-color: var(--accent-light); } /* Un solo icono en el marcado; cual se ve lo decide el tema activo. */ .btn-tema .icono-claro { display: none; } [data-bs-theme="dark"] .btn-tema .icono-claro { display: inline-block; } [data-bs-theme="dark"] .btn-tema .icono-oscuro { display: none; } /* ========================================================================== 6. Pantalla de acceso (auth/login) -------------------------------------------------------------------------- Barra con la marca, dos columnas y pie. Todo sale de las variables de :root, asi que la pantalla acompana al tema sin una sola regla duplicada para el modo oscuro. La tarjeta lleva el formulario de credenciales, no un boton de Authentik: la integracion no existe todavia. Ver el comentario de login.blade.php. ========================================================================== */ .pagina-acceso { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg-body); color: var(--text-primary); } .acceso-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.75rem; background-color: var(--card-bg); border-bottom: 1px solid var(--border-color); } .acceso-cuerpo { flex: 1 1 auto; display: flex; align-items: center; padding: 3.5rem 0; } .acceso-etiqueta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1.05rem; border-radius: 999px; background-color: var(--accent-light); color: var(--accent-primary); border: 1px solid var(--accent-primary); font-size: 0.85rem; font-weight: 700; } .acceso-titulo { /* clamp() en vez de un salto por breakpoint: el titulo es lo primero que se lee y debe encoger de forma continua, no a tirones. */ font-size: clamp(2.3rem, 5.2vw, 3.6rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin: 1.5rem 0 1.25rem; color: var(--text-primary); } .acceso-titulo .acento { color: var(--accent-primary); } .acceso-descripcion { color: var(--text-muted); font-size: 1.02rem; line-height: 1.75; max-width: 34rem; margin: 0; } .acceso-tarjeta { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 2.5rem 2rem; box-shadow: var(--shadow-lg); text-align: center; } .acceso-icono { width: 56px; height: 56px; margin: 0 auto 1.25rem; border-radius: 16px; background-color: var(--accent-primary); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .acceso-tarjeta-titulo { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.35rem; color: var(--text-primary); } .acceso-tarjeta-sub { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1.75rem; } .acceso-boton { width: 100%; padding: 0.8rem 1rem; border: none; border-radius: 12px; background-color: var(--accent-primary); color: #ffffff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; transition: background-color 0.2s ease, transform 0.15s ease; } .acceso-boton:hover { background-color: var(--accent-hover); transform: translateY(-1px); } .acceso-boton i { transition: transform 0.2s ease; } .acceso-boton:hover i { transform: translateX(3px); } .acceso-separador { border-color: var(--border-color); margin: 1.75rem 0 1.1rem; opacity: 1; } .acceso-nota { color: var(--text-muted); font-size: 0.8rem; line-height: 1.6; margin: 0; } .acceso-pie { padding: 1.15rem 1.5rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; border-top: 1px solid var(--border-color); } @media (max-width: 991.98px) { .acceso-cuerpo { padding: 2.5rem 0; } .acceso-descripcion { max-width: none; } } @media (max-width: 575.98px) { .acceso-barra { padding: 0.7rem 1rem; } .acceso-tarjeta { padding: 2rem 1.35rem; } } /* ========================================================================== 7. Impresion: siempre en claro -------------------------------------------------------------------------- Los informes oficiales (#18) se imprimen. Imprimir el tema oscuro gasta toner y sale ilegible, asi que se fuerza el claro sobre el papel. ========================================================================== */ @media print { [data-bs-theme="dark"] { --bg-body: #ffffff; --card-bg: #ffffff; --text-primary: #000000; --text-muted: #333333; --border-color: #cbd5e1; } [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .card-custom, [data-bs-theme="dark"] .table-custom tbody tr { background-color: #ffffff !important; } [data-bs-theme="dark"] .text-dark, [data-bs-theme="dark"] body { color: #000000 !important; } .btn-tema { display: none !important; } }