/* * Archivo de Estilos Principal - assets/styles.css * * Este archivo contiene los estilos base, efectos futuristas * y estilos específicos para el login y el dashboard. * * Mejoras aplicadas: * - Refinamiento de estados :focus y :active para mejor UX (sin alterar el diseño visual). * - Nota sobre la importación de la fuente 'Poppins'. */ /* * NOTA IMPORTANTE: * Asegúrate de importar la fuente 'Poppins' desde Google Fonts * en tu archivo HTML, en la sección , como este ejemplo: * * Esto es crucial para que la fuente se vea correctamente. */ /* Fondo futurista y estilos base del cuerpo */ body { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); font-family: 'Poppins', sans-serif; color: #fff; margin: 0; /* Asegura que no haya márgenes por defecto */ min-height: 100vh; /* Ocupa al menos el 100% de la altura de la vista */ display: block; /* Por defecto, el body es un bloque. Esto es para evitar conflictos con los estilos flex de login. */ } .neon-image { /* Puedes usar una clase diferente si lo prefieres */ filter: drop-shadow(0 0 5px #00bcd4) /* Sombra principal */ drop-shadow(0 0 10px #00bcd4) /* Sombra más grande */ drop-shadow(0 0 15px #00bcd4); /* Sombra aún más grande para más brillo */ } .neon-text img { /* Color del resplandor neón (puedes ajustar este color) */ filter: drop-shadow(0 0 5px #00bcd4) /* Sombra principal */ drop-shadow(0 0 10px #00bcd4) /* Sombra más grande */ drop-shadow(0 0 15px #00bcd4); /* Sombra aún más grande para más brillo */ /* Puedes añadir un poco de color o brillo directamente a la imagen si lo deseas */ /* filter: brightness(1.2) sepia(0.2); */ } /* Estilos para la tarjeta con efecto vidrio (usada en el login y en el dashboard) */ .glass-effect { padding: 20px; border-radius: 15px; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2); animation: fadeIn 1s ease-in-out; } /* Animación de entrada */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } /* Texto con efecto neón */ .neon-text { color: #0ff; text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff; } /* Campos de entrada futuristas */ .neon-input { background: rgba(255, 255, 255, 0.1); border: none; color: #fff; padding: 10px; border-radius: 8px; text-align: center; /* --- INICIO DE MEJORA: Estado de Foco para Inputs --- */ transition: box-shadow 0.3s ease, border 0.3s ease; /* Suaviza la transición */ } .neon-input:focus { outline: none; /* Elimina el contorno por defecto del navegador */ box-shadow: 0 0 8px #0ff, 0 0 15px #0ff; /* Brillo neón al enfocar */ border: 1px solid #0ff; /* Borde sutil al enfocar */ } /* --- FIN DE MEJORA: Estado de Foco para Inputs --- */ /* Botón con efecto neón */ .neon-button { background: linear-gradient(135deg, #ff0055, #ff00ff); border: none; color: white; font-weight: bold; padding: 12px; border-radius: 8px; transition: 0.3s; cursor: pointer; } .neon-button:hover { box-shadow: 0 0 15px #ff00ff, 0 0 25px #ff00ff; transform: scale(1.1); } /* --- INICIO DE MEJORA: Estado Activo para Botones --- */ .neon-button:active { transform: scale(1.05); /* Un escalado ligeramente menor que el hover */ box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; /* Un brillo sutil al hacer clic */ } /* --- FIN DE MEJORA: Estado Activo para Botones --- */ /* Enlaces con brillo */ .neon-link { color: #0ff; text-shadow: 0 0 5px #0ff, 0 0 10px #0ff; text-decoration: none; } .neon-link:hover { color: #ff0055; text-shadow: 0 0 10px #ff0055, 0 0 15px #ff0055; } /* --- ESTILOS ESPECÍFICOS DEL DASHBOARD (SIDEBAR) --- */ /* Contenedor principal del dashboard (sidebar + contenido) */ .main-wrapper { display: flex; /* Activa el flexbox para la distribución horizontal */ min-height: 100vh; /* Asegura que ocupe toda la altura */ width: 100%; /* Asegura que ocupe todo el ancho */ /* El background del body ya se encarga del degradado general */ } /* Sidebar / Menú Lateral Izquierdo */ .sidebar { width: 250px; min-width: 250px; /* Asegura que siempre tenga 250px de ancho en desktop */ padding: 20px; background: rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: flex-start; /* Alinea los ítems del menú a la izquierda */ flex-shrink: 0; /* Evita que la sidebar se encoja si el contenido es muy grande */ } /* Área de Contenido Principal */ .content-area { flex-grow: 1; /* Ocupa el espacio restante */ padding: 20px; overflow-y: auto; /* Permite scroll si el contenido es muy largo */ } /* Estilos para los elementos del menú principal */ .sidebar .nav-link { width: 100%; text-align: left; padding: 10px 15px; margin-bottom: 5px; border-radius: 8px; transition: background-color 0.3s ease; color: #fff; /* Asegura el color blanco para los enlaces principales */ } .sidebar .nav-link:hover { background-color: rgba(255, 255, 255, 0.1); } /* Estilos específicos para el botón del submenú (padre) */ .sidebar .btn-toggle-nav { background: none; /* Sin fondo de botón por defecto */ border: none; width: 100%; text-align: left; padding: 10px 15px; margin-bottom: 5px; border-radius: 8px; transition: background-color 0.3s ease; color: #fff; /* Color del texto del botón */ position: relative; /* Para posicionar la flecha */ display: flex; /* Para alinear el texto y la flecha */ justify-content: space-between; /* Para separar texto y flecha */ align-items: center; /* Para centrar verticalmente */ text-decoration: none; /* Quitar subrayado si es un enlace */ } .sidebar .btn-toggle-nav:hover { background-color: rgba(255, 255, 255, 0.1); color: #0ff; /* Color neón al pasar el ratón */ } /* Flecha del submenú */ .sidebar .btn-toggle-nav::after { content: '\25B6'; /* Código unicode para una flecha derecha */ transition: transform 0.3s ease; font-size: 0.8em; color: #0ff; /* Color neón para la flecha */ margin-left: 10px; /* Espacio entre el texto y la flecha */ flex-shrink: 0; /* Evita que la flecha se encoja */ } .sidebar .btn-toggle-nav[aria-expanded="true"]::after { transform: rotate(90deg); /* Gira la flecha cuando está expandido */ } /* Estilos para el contenedor del submenú (el div.collapse) */ .sidebar .collapse { width: 100%; /* Asegura que el contenedor del submenú ocupe todo el ancho */ } /* Estilos para la lista ul dentro del submenú */ .sidebar .collapse .list-unstyled { padding-left: 15px; /* Indentación para los sub-ítems */ margin-top: 5px; /* Espacio superior para separar del botón principal */ margin-bottom: 5px; /* Espacio inferior */ } .sidebar .collapse .list-unstyled li { margin-bottom: 2px; /* Espacio entre los ítems del submenú */ } /* Estilos para los enlaces/botones individuales dentro del submenú */ .sidebar .collapse .btn-toggle { padding: .5rem 1rem; /* Ajusta el padding para los sub-ítems, un poco más de aire */ font-weight: normal; /* Menos negrita que el principal */ color: #ccc; /* Color más suave para los sub-ítems */ width: 100%; text-align: left; background: none; border: none; transition: background-color 0.3s ease; white-space: normal; /* Permite que el texto se ajuste en varias líneas */ word-break: break-word; /* Rompe palabras si es necesario */ display: block; /* Asegura que cada enlace ocupe su propia línea */ } .sidebar .collapse .btn-toggle:hover, .sidebar .collapse .btn-toggle:focus { background-color: rgba(255, 255, 255, 0.08); color: #0ff; text-decoration: none; } /* Ajustes de responsividad */ @media (min-width: 992px) { .navbar-toggler { display: none; } } @media (max-width: 991.98px) { .sidebar { width: 0; min-width: 0; overflow: hidden; transition: all 0.3s ease-in-out; position: absolute; /* Para que no afecte el layout del contenido */ z-index: 1030; /* Encima de otros elementos si hay navbar */ } .sidebar.active { width: 250px; min-width: 250px; } .main-wrapper { flex-direction: column; } .navbar-brand { margin-left: 0; } /* Opcional: Oscurecer el contenido cuando el sidebar está abierto en móvil */ .main-wrapper.sidebar-active .content-area { opacity: 0.5; pointer-events: none; } }