/* * Ajustes visuales sutiles sobre soft-ui-dashboard.css. * No reemplaza el archivo base: se carga después y sobreescribe puntualmente * botones y el estado activo del sidebar. Cero cambios de estructura/lógica. */ /* --- Botones: menos "gritones", mismo color de marca (bg-gradient-*) --- */ .btn { text-transform: none; letter-spacing: normal; font-weight: 600; border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(20, 20, 40, 0.08), 0 6px 14px -8px rgba(20, 20, 40, 0.35); } .btn:hover:not(.btn-icon-only) { box-shadow: 0 2px 4px rgba(20, 20, 40, 0.1), 0 8px 18px -8px rgba(20, 20, 40, 0.4); } .btn:active, .btn:active:focus, .btn:active:hover { box-shadow: 0 1px 2px rgba(20, 20, 40, 0.08); } /* El vendor atenúa botones deshabilitados con opacity:0.65 sobre TODO el botón, fondo y texto juntos. Eso mezcla el blanco del texto con el degradé rojo/amarillo de fondo y sale un rosado lavado en vez de blanco (ej. los botones "Descargar manual" antes de que exista el archivo). Se reemplaza por un filtro de brillo/saturación: atenúa el color de fondo igual, pero el texto blanco se mantiene blanco. Aplica en los dos temas por igual. */ .btn:disabled, .btn.disabled, fieldset:disabled .btn { opacity: 1; filter: brightness(0.8) saturate(0.85); } /* --- Tarjetas: sombra grande y difusa -> borde fino + sombra corta, se ven más asentadas --- */ .card { border: 1px solid rgba(20, 20, 40, 0.14); box-shadow: 0 1px 3px rgba(20, 20, 40, 0.08), 0 12px 26px -14px rgba(20, 20, 40, 0.32); } /* --- Estados (badges/pills/texto): warning hoy es el mismo rojo que el botón primario. */ /* Se separan las 3 semánticas y se alinean con la paleta ya usada en el gauge del Escritorio. */ .bg-success { background-color: #00cc78 !important; } .bg-warning { background-color: #ffb400 !important; } .bg-danger { background-color: #ff3355 !important; } .text-success { color: #009e5c !important; } .text-warning { color: #b97b00 !important; } .text-danger { color: #e21f3d !important; } /* --- Sidebar: fila activa con tinte de marca en vez de la tarjeta blanca flotante --- */ .navbar-vertical .navbar-nav > .nav-item .nav-link.active { background-color: rgba(245, 57, 57, 0.08); } .navbar-vertical .navbar-nav .nav-link.active { box-shadow: none; border-radius: 0.75rem; } /* Los íconos nuevos del sidebar (trazo simple, stroke="currentColor") no usan el sistema de relleno color-background/color-foreground de los íconos viejos — necesitan su propia regla para ponerse blancos en el ítem activo. */ .navbar-vertical .navbar-nav > .nav-item .nav-link.active .icon svg { color: #fff; } /* ========================================================================== Tema oscuro real. Opt-in por completo: solo se activa con [data-theme="dark"] en , puesto por el botón del navbar (ver base.blade.php). Nunca sigue la preferencia del sistema operativo. Primera pasada: superficies principales (fondo, tarjetas, sidebar, navbar, inputs, tablas, dropdowns, modales). Se afina componente por componente a medida que se detecten casos puntuales, igual que el resto de la propuesta. ========================================================================== */ :root[data-theme="dark"] body.bg-gray-100 { background-color: #0f1020 !important; } /* .bg-gray-100 también se usa suelto sobre otros elementos (ej. cada

de la lista de notificaciones), no solo en el body. Esa regla de arriba es más específica y sigue ganando ahí, así que esta no le pisa nada. */ :root[data-theme="dark"] .bg-gray-100 { background-color: #1f2140 !important; } :root[data-theme="dark"] body { color: #c1c3de; } /* Los títulos y textos "oscuros" del tema claro traen su propio color fijo (#252f40, casi negro) que no depende del body — hay que pisarlos aparte. */ :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6, :root[data-theme="dark"] .h1, :root[data-theme="dark"] .h2, :root[data-theme="dark"] .h3, :root[data-theme="dark"] .h4, :root[data-theme="dark"] .h5, :root[data-theme="dark"] .h6 { color: #f1f1f8; } :root[data-theme="dark"] .text-dark { color: #f1f1f8 !important; } :root[data-theme="dark"] .text-secondary, :root[data-theme="dark"] .text-body, :root[data-theme="dark"] .text-muted { color: #a3a6c4 !important; } /* Regla del vendor "label, .form-label { color: #252f40 }" aplica a TODO de la app (no solo a los que llevan la clase .form-label) — cubre cada campo de cada formulario/tabla editable. */ :root[data-theme="dark"] label, :root[data-theme="dark"] .form-label { color: #f1f1f8; } :root[data-theme="dark"] .card { background-color: #171933; border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .sidenav { background-color: #171933 !important; } :root[data-theme="dark"] .navbar-vertical .nav-link { color: #c1c3de; } :root[data-theme="dark"] .navbar-vertical .navbar-nav > .nav-item .nav-link.active { color: #f1f1f8; } :root[data-theme="dark"] .navbar-vertical .icon.bg-white { background-color: #1f2140 !important; } :root[data-theme="dark"] .navbar-main, :root[data-theme="dark"] #navbarBlur { background-color: #171933 !important; } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: #1f2140; border-color: #30325a; color: #f1f1f8; } :root[data-theme="dark"] .table { color: #c1c3de; border-color: #30325a; } :root[data-theme="dark"] .table-secondary, :root[data-theme="dark"] thead { background-color: #1f2140; color: #f1f1f8; } :root[data-theme="dark"] .dropdown-menu { background-color: #171933; color: #c1c3de; } :root[data-theme="dark"] .modal-content { background-color: #171933; border-color: rgba(255, 255, 255, 0.1); } /* Botones "outline" (fondo transparente, borde y texto en rojo de marca por diseño): en claro se leen bien sobre fondo blanco, pero contra el fondo oscuro se ven "rojizos" e inconsistentes con el resto del texto. Se pasan a blanco solo en el estado normal — el :hover sigue rellenando de rojo con texto blanco, ese sí queda bien y no se toca. */ :root[data-theme="dark"] .btn-outline-primary, :root[data-theme="dark"] .btn-outline-danger { color: #f1f1f8; border-color: #f1f1f8; } /* El vendor define "a" dos veces: una en rojo de marca, y otra más abajo en el archivo que la pisa con negro puro (#000) para toda la app. En claro pasa desapercibido; en oscuro deja cualquier link ilegible (ej. los nombres de indicador en la tabla del Escritorio). :not(.btn) es clave: varios botones de la app son en vez de