Archivos de la Carpeta `src/assets/`

La carpeta src/assets/ contiene archivos SCSS que establecen los estilos fundamentales y globales de la aplicación. Estos estilos forman la base sobre la cual se construyen todos los demás estilos de componentes y layouts, asegurando una apariencia consistente y predecible en toda la UI.

`reset.module.scss`

Este archivo es un reset CSS básico que elimina las inconsistencias predeterminadas de los navegadores y establece una base sólida para la estilización de la aplicación. También define algunas propiedades globales esenciales como la fuente y el modelo de caja.

Descripción: reset.module.scss utiliza una combinación de un reset universal (*), estilos base para html, body, img y a, y la importación de una fuente personalizada de Google Fonts. Su objetivo es crear un punto de partida consistente para el diseño CSS.
Propósito:
- Normalización de Estilos: Eliminar los márgenes, paddings y box-sizing por defecto que los navegadores aplican a los elementos, lo que puede causar diferencias visuales entre ellos.
- Establecer Estilos Base: Definir un font-family global (Poppins), un font-size base, y asegurar que imágenes y enlaces se comporten de manera predecible.
Funcionalidad clave:
- @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");: Importa la fuente Poppins desde Google Fonts. Esto asegura que la tipografía principal de la aplicación esté disponible y sea consistente en todos los navegadores.
- * { margin: 0; padding: 0; box-sizing: border-box; }: Este selector universal es un reset agresivo.
  - margin: 0; padding: 0;: Elimina todos los márgenes y rellenos internos predeterminados de cada elemento HTML.
  - box-sizing: border-box;: Cambia el modelo de caja de todos los elementos para que el padding y el border se incluyan dentro del width y height especificados del elemento. Esto simplifica enormemente el diseño CSS y evita problemas de desbordamiento.
- html, body { height: 100%; font-family: "Poppins", serif; font-size: 0.95rem; }:
  - height: 100%;: Asegura que tanto el elemento html como el body ocupen el 100% de la altura de la ventana (viewport), lo cual es fundamental para diseños que buscan ocupar toda la pantalla.
  - font-family: "Poppins", serif;: Establece la fuente principal de la aplicación. serif es una fuente de fallback por si Poppins no carga.
  - font-size: 0.95rem;: Define un tamaño de fuente base, permitiendo que las unidades rem se utilicen de manera consistente para escalado responsivo.
- img { max-width: 100%; height: auto; }:
  - max-width: 100%;: Hace que las imágenes sean responsivas, asegurando que nunca desborden sus contenedores.
  - height: auto;: Mantiene la proporción de aspecto de la imagen cuando se redimensiona.
- a { text-decoration: none; color: inherit; }:
  - text-decoration: none;: Elimina el subrayado predeterminado de los enlaces.
  - color: inherit;: Hace que los enlaces hereden el color de texto de su elemento padre, en lugar de usar el color azul predeterminado del navegador.
Rol en la aplicación: reset.module.scss es la piedra angular de la estilización. Al normalizar el comportamiento predeterminado del navegador y establecer una base consistente, permite a los desarrolladores construir interfaces de usuario con CSS de manera más predecible y eficiente, sin luchar contra estilos no deseados.

scss

// src/assets/styles/base/reset.module.scss

// Importa la fuente Poppins desde Google Fonts para ser usada en toda la aplicación.
@import url("[https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;1,400;1,500;0,600&display=swap](https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;1,400;1,500;0,600&display=swap)");

// Selector universal: Aplica un reset básico a todos los elementos.
* {
  margin: 0; // Elimina los márgenes predeterminados de todos los elementos.
  padding: 0; // Elimina los rellenos internos predeterminados de todos los elementos.
  box-sizing: border-box; // Cambia el modelo de caja para incluir padding y border en el ancho/alto.
}

// Estilos base para los elementos HTML y Body.
html,
body {
  height: 100%; // Asegura que ocupen el 100% de la altura de la ventana.
  font-family: "Poppins", serif; // Establece la fuente principal y una fuente de respaldo.
  font-size: 0.95rem; // Define un tamaño de fuente base para la escalabilidad.
}

// Estilos para imágenes.
img {
  max-width: 100%; // Hace que las imágenes sean responsivas, no desborden sus contenedores.
  height: auto; // Mantiene la proporción de aspecto de la imagen.
}

// Estilos para enlaces.
a {
  text-decoration: none; // Elimina el subrayado predeterminado de los enlaces.
  color: inherit; // Los enlaces heredan el color de texto de su elemento padre.
}

`mixins.module.scss`

Este archivo contiene mixins SCSS, que son bloques de código CSS reutilizables. Los mixins permiten agrupar propiedades CSS que se usan con frecuencia o que implementan patrones de diseño complejos (como la lógica responsiva), y luego incluir esos grupos de propiedades en cualquier selector de estilo donde sean necesarios.

Descripción: mixins.module.scss define un mixin llamado responsive-grid que establece propiedades grid-template-columns para adaptar el layout de cuadrícula a diferentes tamaños de pantalla, siguiendo un enfoque de diseño "mobile-first".
Propósito: Proporcionar patrones de diseño CSS reutilizables para aplicar a componentes. Específicamente, el mixin responsive-grid tiene como objetivo simplificar la creación de layouts de cuadrícula responsivos.
Funcionalidad clave:
- @mixin responsive-grid($columns-mobile, $columns-tablet, $columns-desktop):
  - Define un mixin SCSS que acepta tres argumentos para una configuración de columnas detallada en distintos puntos de ruptura:
    - $columns-mobile: Configuración de columnas para dispositivos móviles (o el tamaño de pantalla más pequeño, que es el predeterminado).
    - $columns-tablet: Configuración de columnas para tabletas (tamaño de pantalla intermedio).
    - $columns-desktop: Configuración de columnas para escritorios (o el tamaño de pantalla más grande).
  - Lógica de Diseño Responsivo (Mobile-First):
    - grid-template-columns: $columns-mobile;: Establece la configuración de columnas por defecto, aplicada a los dispositivos móviles y tamaños de pantalla más pequeños.
    - @media (min-width: 769px) { grid-template-columns: $columns-tablet; }: Para pantallas con un ancho mínimo de 769px (típicamente tabletas), anula la configuración móvil y aplica $columns-tablet. Ajusta este min-width para que coincida con tus puntos de ruptura definidos.
    - @media (min-width: 1025px) { grid-template-columns: $columns-desktop; }: Para pantallas con un ancho mínimo de 1025px (típicamente escritorios), aplica $columns-desktop. Ajusta este min-width para que coincida con tus puntos de ruptura definidos.
Rol en la aplicación: mixins.module.scss es una herramienta de abstracción CSS. Permite a los desarrolladores definir una vez la lógica de diseño responsivo de la cuadrícula y aplicarla a múltiples elementos sin duplicar el código CSS, mejorando la mantenibilidad y consistencia visual en toda la aplicación.

scss

// src/assets/styles/config/mixins.module.scss

// Mixin para crear layouts de cuadrícula responsivos, siguiendo un enfoque mobile-first.
// Acepta tres argumentos para definir el número de columnas en diferentes puntos de ruptura.
@mixin responsive-grid($columns-mobile, $columns-tablet, $columns-desktop) {
  // 1. Estilos por defecto (para el breakpoint más pequeño / móviles)
  grid-template-columns: $columns-mobile;

  // 2. Media Query para tabletas (ej. a partir de 769px). Ajusta según tus puntos de ruptura.
  @media (min-width: 769px) {
    grid-template-columns: $columns-tablet;
  }

  // 3. Media Query para escritorios (ej. a partir de 1025px). Ajusta según tus puntos de ruptura.
  @media (min-width: 1025px) {
    grid-template-columns: $columns-desktop;
  }
}

`variables.module.scss`

Este archivo es el repositorio central para todas las variables de diseño SCSS de la aplicación. Aquí se definen valores clave como los colores de la paleta de colores, el color del texto, y unidades de espaciado estándar.

Descripción: variables.module.scss define un conjunto de variables SCSS que representan valores estáticos como colores y unidades de espaciado. Estas variables se utilizan en toda la base de código SCSS para mantener la consistencia visual y facilitar los cambios de diseño a gran escala.
Propósito: Centralizar la definición de valores de estilo reutilizables. Esto es crucial para:
- Consistencia: Asegurar que los mismos colores y espaciados se utilicen en toda la aplicación.
- Mantenibilidad: Simplificar los cambios de diseño. Si necesitas cambiar el color primario, solo lo modificas en un lugar ($primary-color), y el cambio se reflejará automáticamente donde sea que se use esa variable.
- Legibilidad: Hacer que el código CSS sea más fácil de entender al usar nombres descriptivos (ej., $primary-color) en lugar de códigos hexadecimales crudos (ej., #4cd3c3).
Funcionalidad clave:
- Variables de Color:
  - $primary-color: El color principal de la marca, usado para elementos clave de la UI.
  - $primary-color-hover: Una variación del color primario para estados de hover, mejorando la interactividad.
  - $secondary-color: Un color secundario, a menudo utilizado para elementos de soporte o contrastes.
  - $secondary-color-hover: Variación del color secundario para estados de hover.
  - $text-color: El color estándar para la mayoría del texto.
  - $grey, $white, $black: Colores neutros básicos.
- Variable de Espaciado:
  - $spacing-unit: Una unidad base para definir márgenes, paddings y gaps. Esto promueve un espaciado consistente y escalable en el diseño.
Rol en la aplicación: variables.module.scss actúa como la guía de estilo programática de la aplicación. Al centralizar estos valores, asegura una identidad visual coherente y acelera significativamente el proceso de diseño y desarrollo front-end.

scss

/* src/assets/styles/config/variables.module.scss */

/* Colores globales: Define la paleta de colores principal de la aplicación. */
$primary-color: #4cd3c3;          // Color principal de la marca.
$primary-color-hover: #43bfb1;    // Tono para el estado hover del color primario.
$secondary-color: #2c3e50;        // Color secundario, a menudo para elementos de soporte.
$secondary-color-hover: #34495e;  // Tono para el estado hover del color secundario.
$text-color: #333333;             // Color estándar para el texto principal.
$grey: #f4f4f9;                   // Tono de gris claro.
$white: #ffffff;                  // Color blanco puro.
$black: #000000;                  // Color negro puro.

/* Unidad de espaciado: Define una unidad base para espaciados y tamaños, facilitando diseños escalables. */
$spacing-unit: 8px;

// NUEVA VARIABLE para la altura de los ítems del dropdown (para SCSS)
$dropdown-item-height: 40px;

`sidebar.module.scss`

Este archivo SCSS (.module.scss indica que es un módulo CSS) define los estilos para el componente de la barra lateral de navegación (Sidebar) de la aplicación. Incluye estilos para el layout general de la barra, los elementos de la lista, los menús desplegables y la adaptabilidad a dispositivos móviles.

Descripción: sidebar.module.scss utiliza variables SCSS importadas y media queries para crear una barra lateral responsiva. Define estilos para el logo, los elementos de navegación principales, los desplegables anidados (dropdowns) y un botón de menú específico para móviles.
Propósito: Ofrecer una apariencia y un comportamiento visual consistente para la barra lateral de navegación, que es un elemento clave de la interfaz de usuario para la navegación en la aplicación.
Funcionalidad clave (Estilos):
- Importación de Variables:
  - @use "../config/variables.module.scss" as vars;: Importa las variables de diseño globales (colores, etc.) desde la carpeta config, lo que asegura la consistencia de la marca y facilita cambios de tema.
- .logo: Define estilos para el logo dentro de la barra lateral, limitando su ancho máximo y añadiendo padding.
- .sidebar: Contiene los estilos principales de la barra lateral:
  - Posicionamiento y Dimensiones: width: 25%; height: 100vh; position: fixed; top: 0; left: 0; lo fija a la izquierda y ocupa toda la altura de la ventana.
  - Apariencia: background, color, padding.
  - Layout: display: flex; flex-direction: column; organiza el contenido verticalmente.
  - Scroll: overflow-y: auto; permite el desplazamiento vertical si el contenido excede la altura.
  - Transición: transition: transform 0.3s ease-in-out; para una animación suave al abrir/cerrar en móviles.
- Elementos de Navegación (ul, li):
  - Elimina estilos de lista predeterminados (list-style: none;).
  - Los li son interactivos (cursor: pointer;) y ocupan todo el ancho (display: block; width: 100%;).
  - Estados hover y &.open: Aplica cambios de color y background-color cuando el cursor está sobre un elemento o cuando un menú desplegable está abierto, usando las variables de vars.$primary-color y vars.$secondary-color-hover.
- .dropdownToggle: Estilos para el área clicable que abre/cierra un submenú desplegable, asegurando alineación de ícono/texto.
- .dropdownMenu: Estilos para los submenús desplegables de colegio/curso:
  - Posicionamiento: position: absolute; top: 100%; left: 0; los posiciona justo debajo de su elemento li padre.
  - Apariencia y Transición: width: 100%; z-index; box-shadow; transition: height 0.3s ease; overflow: hidden; para una expansión suave y ocultación cuando está colapsado.
  - Estilos de ítems de desplegable (li anidados): Colores y hover específicos para los elementos del submenú.
- .menuButton: El botón para abrir/cerrar la barra lateral en móviles, oculto por defecto (display: none;) en escritorio.
- .icons: Estilos para los iconos de Font Awesome dentro de los elementos de la lista.
- Media Queries (@media (max-width: 768px)):
  - .sidebar responsivo: En pantallas pequeñas, la barra lateral está transform: translateX(-100%); (oculta por defecto), ocupando 60% del ancho de la pantalla y con un z-index alto.
  - .sidebar.open: Cuando la clase open está presente, la barra lateral se transform: translateX(0); (visible).
  - .menuButton responsivo: Se muestra (display: block;) solo en pantallas pequeñas, con estilos para su posicionamiento y apariencia.
Rol en la aplicación: sidebar.module.scss es crucial para la navegación y la adaptabilidad móvil. Ofrece una experiencia de usuario consistente y accesible en diferentes dispositivos, permitiendo que la barra lateral funcione como un menú de navegación principal y un menú "hamburguesa" en pantallas más pequeñas.

scss

// src/assets/styles/components/sidebar.module.scss

// Importa las variables de configuración globales para consistencia de estilo.
@use "../config/variables.module.scss" as vars;

// Estilos para el logo dentro de la barra lateral.
.logo {
  max-width: 180px; // Ancho máximo del logo.
  padding: 20px 0; // Espaciado vertical.
}

// Estilos principales de la barra lateral.
.sidebar {
  width: 25%; // Ocupa el 25% del ancho de la pantalla en escritorio.
  height: 100vh; // Ocupa el 100% de la altura del viewport.
  position: fixed; // Posicionamiento fijo en la pantalla.
  top: 0; // Alineado a la parte superior.
  left: 0; // Alineado a la izquierda.
  background: vars.$secondary-color; // Color de fondo de la barra lateral.
  color: vars.$white; // Color de texto principal.
  padding: 1rem; // Espaciado interno.
  display: flex; // Usa flexbox para el layout interno.
  flex-direction: column; // Los ítems se apilan verticalmente.
  overflow-y: auto; // Habilita el scroll vertical si el contenido excede la altura.
  transition: transform 0.3s ease-in-out; // Transición suave para animaciones de apertura/cierre.

  h2 {
    margin-bottom: 1rem; // Margen inferior para los títulos.
  }

  ul {
    list-style: none; // Elimina los bullets de la lista.
    padding: 0; // Elimina el padding predeterminado de la lista.

    li {
      cursor: pointer; // Indica que el elemento es clicable.
      padding: 10px; // Relleno interno para cada ítem de la lista.
      display: block; // Asegura que el 'li' ocupe todo el ancho disponible.
      position: relative; // Necesario para posicionar el dropdown anidado absolutamente.
      width: 100%; // Ocupa el 100% del ancho del contenedor.
      transition: all 0.3s ease; // Transición suave para estados y cambios de color.

      &:hover {
        color: vars.$primary-color; // Cambia el color del texto al pasar el ratón.
        background-color: vars.$secondary-color-hover; // Cambia el fondo al pasar el ratón.
      }

      &.open {
        background-color: vars.$secondary-color-hover; // Color de fondo cuando el dropdown está abierto.
      }
    }
  }

  // Estilos para el elemento que alterna la visibilidad del dropdown.
  .dropdownToggle {
    display: flex; // Usa flexbox para alinear contenido (ícono y texto).
    align-items: center; // Alinea verticalmente los ítems.
    width: 100%; // Asegura que el área clicable ocupe todo el ancho.
    cursor: pointer; // Indica que es clicable.
  }

  // Estilos para el menú desplegable anidado (los cursos dentro de un colegio).
  .dropdownMenu {
    list-style: none; // Elimina los bullets.
    position: absolute; // Posicionamiento absoluto dentro del ítem 'li' padre.
    top: 100%; // Posiciona el menú justo debajo del ítem principal.
    left: 0; // Alineado a la izquierda del padre.
    width: 100%; // Ocupa todo el ancho del padre.
    z-index: 1000; // Asegura que esté por encima de otros elementos.
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); // Sombra para darle profundidad.
    transition: height 0.3s ease; // Transición suave para la expansión/contracción.
    overflow: hidden; // Oculta el contenido cuando el menú está colapsado (height: 0).

    li {
      width: 100%; // Ocupa todo el ancho.
      padding: 8px 15px; // Relleno interno para los ítems del dropdown.
      cursor: pointer; // Indica que es clicable.
      background: vars.$secondary-color-hover; // Color de fondo de los ítems del dropdown.
      // Ya no se aplica box-shadow aquí para evitar redundancia y posibles efectos visuales no deseados.

      &:hover {
        background-color: vars.$primary-color; // Cambia el fondo al pasar el ratón.
        color: vars.$white; // Cambia el color del texto al pasar el ratón.
      }
    }
  }
}

// Estilos para el botón de menú que aparece solo en móviles.
.menuButton {
  display: none; // Oculto por defecto en escritorio.
}

// Estilos generales para los iconos dentro de la barra lateral.
.icons {
  font-size: 14px; // Tamaño de fuente del icono.
  margin-right: 8px; // Margen a la derecha para separar del texto.
}

// Media Query para pantallas con un ancho máximo de 768px (móviles y tabletas).
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%); // Oculta la barra lateral fuera de la pantalla por defecto.
    width: 60%; // En móvil, ocupa el 60% del ancho de la pantalla.
    height: 100vh; // Mantiene la altura al 100% del viewport para consistencia.
    position: fixed; // Permanece fijo.
    z-index: 1000; // Asegura que esté por encima de otros elementos.
  }

  // Clase para mostrar la barra lateral en móviles.
  .sidebar.open {
    transform: translateX(0); // Desliza la barra lateral a la vista.
  }

  // El botón de menú se muestra solo en móviles.
  .menuButton {
    display: block; // Muestra el botón.
    text-align: right; // Alinea el texto/icono a la derecha.
    height: 70px; // Altura del botón.
    top: 15px; // Posición superior.
    left: 15px; // Posición izquierda.
    background: none; // Sin fondo.
    border: none; // Sin borde.
    border-radius: 0px; // Sin bordes redondeados.
    color: vars.$white; // Color del icono/texto.
    font-size: 1.5rem; // Tamaño del icono.
    cursor: pointer; // Indica que es clicable.
    z-index: 1100; // Por encima de la barra lateral.
    background-color: vars.$secondary-color; // Color de fondo para el botón en móvil
    &:hover {
      background-color: vars.$secondary-color-hover; // Cambio de color al pasar el ratón.
      color: vars.$primary-color; // Cambio de color de texto/icono al pasar el ratón.
    }
  }
}

`student.table.module.scss`

Este archivo SCSS (.module.scss indica que es un módulo CSS) define los estilos específicos para el componente StudentTable. Incluye estilos para los botones de paginación, los iconos y el contenedor principal de la tabla, asegurando que se adapte a diferentes tamaños de pantalla y sea completamente navegable.

Descripción: student.table.module.scss proporciona reglas CSS para la apariencia de los botones de paginación (haciéndolos circulares y espaciados), el tamaño de los iconos dentro de ellos, y la capacidad de desplazamiento tanto horizontal como vertical para la tabla, lo cual es vital para la responsividad y la usabilidad en tablas con muchos datos.
Propósito: Asegurar que la tabla de estudiantes se vea bien y sea funcional, especialmente en términos de paginación y adaptabilidad a pantallas más pequeñas que requieran desplazamiento.
Funcionalidad clave (Estilos):
- Importación de Variables:
  - @use "../config/variables.module.scss" as vars;: Importa las variables de diseño globales (como $spacing-unit) desde la carpeta config, lo que asegura la consistencia de las dimensiones y espaciados en toda la aplicación.
- .pagination button:
  - width: vars.$spacing-unit * 3.75;, padding: vars.$spacing-unit / 1.6;, margin: vars.$spacing-unit / 1.6;: Utiliza la variable $spacing-unit para definir las dimensiones y el espaciado de los botones, lo que asegura una armonía visual con el resto del diseño.
  - border-radius: 100%;: Transforma los botones en círculos.
- .icons:
  - font-size: vars.$spacing-unit * 2.5;: Establece un tamaño para los iconos utilizando la variable de espaciado, haciéndolos visibles y proporcionales.
- .studentTableContainer:
  - width: 100%;: Asegura que el contenedor de la tabla ocupe todo el ancho disponible de su padre.
  - max-height: 400px;: Limita la altura máxima de la tabla.
  - overflow: auto;: Permite el desplazamiento tanto horizontal (x) como vertical (y) si el contenido de la tabla (columnas o filas) excede las dimensiones disponibles. Esto es fundamental para la responsividad y la usabilidad en tablas grandes, evitando que se desborden y rompan el layout de la página.
  - margin-bottom: vars.$spacing-unit * 2.5;: Añade un margen inferior para separar la tabla de los elementos subsiguientes, usando la variable de espaciado.
Rol en la aplicación: student.table.module.scss es crucial para la usabilidad y responsividad del componente StudentTable. Se asegura de que la navegación por paginación sea intuitiva y que la tabla sea legible y accesible incluso en pantallas donde no todas las columnas o filas pueden mostrarse a la vez, proporcionando una experiencia de usuario fluida mediante el desplazamiento interno.

scss

// src/assets/styles/components/student.table.module.scss

// Importa las variables de configuración globales para mantener la consistencia de estilo.
@use "../config/variables.module.scss" as vars;

// Estilos para los botones dentro del componente de paginación.
.pagination button {
  width: vars.$spacing-unit * 3.75; // Define el ancho usando la unidad de espaciado (ej., 30px).
  padding: vars.$spacing-unit / 1.6; // Define el relleno usando la unidad de espaciado (ej., 5px).
  margin: vars.$spacing-unit / 1.6; // Define el margen usando la unidad de espaciado (ej., 5px).
  border-radius: 100%; // Hace que los botones sean circulares.
}

// Estilos para los iconos dentro de los botones o elementos de la tabla.
.icons {
  font-size: vars.$spacing-unit * 2.5; // Tamaño de fuente para los iconos (ej., 20px).
}

// Estilos para el contenedor principal de la tabla de estudiantes,
// asegurando que sea responsiva y que el contenido con overflow sea navegable.
.studentTableContainer {
  width: 100%; // Ocupa el 100% del ancho de su contenedor padre.
  max-height: 400px; // Altura máxima para el contenedor de la tabla antes de que aparezca el scroll vertical.
  overflow: auto; /* Permite el desplazamiento horizontal y vertical si el contenido es demasiado grande. */
  margin-bottom: vars.$spacing-unit * 2.5; // Margen en la parte inferior (ej., 20px).
}

`grid.module.scss`

Este archivo SCSS (.module.scss indica que es un módulo CSS) define clases de utilidad para crear layouts de cuadrícula (Grid) responsivos, aprovechando el mixin responsive-grid previamente definido.

Descripción: grid.module.scss proporciona clases base para un layout de cuadrícula (.grid) y clases específicas (.grid-columns-2, .grid-columns-3, .grid-columns-4) que aplican diferentes configuraciones de columnas responsivas. Utiliza el mixin responsive-grid para adaptar el número de columnas según el tamaño de la pantalla (móvil, tableta, escritorio).
Propósito: Facilitar la creación rápida y consistente de layouts basados en cuadrículas flexibles y responsivas en toda la aplicación, reduciendo la necesidad de escribir estilos de cuadrícula repetitivos directamente en los componentes.
Funcionalidad clave (Estilos):
- Importación de Mixins y Variables:
  - @use "../config/mixins.module.scss" as mixins;: Importa los mixins SCSS (como responsive-grid) desde la carpeta config.
  - @use "../config/variables.module.scss" as vars;: (Implicitamente necesaria si vas a usar vars.$spacing-unit) Importa las variables globales de espaciado.
- .grid:
  - display: grid;: Establece el elemento como un contenedor de cuadrícula.
  - gap: vars.$spacing-unit * 2;: Define el espaciado (gutter) entre los elementos de la cuadrícula, utilizando la variable de espaciado global para consistencia (ej., 16px si $spacing-unit es 8px).
- .grid-columns-2:
  - @include mixins.responsive-grid(1fr, 1fr 1fr, 1fr 1fr);: Aplica el mixin responsive-grid.
    - Móvil (default): 1fr (1 columna).
    - Tableta (min-width: 769px): 1fr 1fr (2 columnas).
    - Escritorio (min-width: 1025px): 1fr 1fr (2 columnas).
  - Este layout crea una columna en móvil y dos columnas a partir de tabletas.
- .grid-columns-3:
  - @include mixins.responsive-grid(1fr, 1fr, 1fr 1fr 1fr);: Aplica el mixin responsive-grid.
    - Móvil (default): 1fr (1 columna).
    - Tableta (min-width: 769px): 1fr (sigue siendo 1 columna, es una elección de diseño).
    - Escritorio (min-width: 1025px): 1fr 1fr 1fr (3 columnas).
  - Este layout mantiene una columna en móvil y tabletas, y tres columnas en escritorios.
- .grid-columns-4:
  - @include mixins.responsive-grid(1fr, 1fr 1fr, 1fr 1fr 1fr 1fr);: Aplica el mixin responsive-grid.
    - Móvil (default): 1fr (1 columna).
    - Tableta (min-width: 769px): 1fr 1fr (2 columnas).
    - Escritorio (min-width: 1025px): 1fr 1fr 1fr 1fr (4 columnas).
  - Este layout crea una columna en móvil, dos en tabletas y cuatro en escritorios.
Rol en la aplicación: grid.module.scss es esencial para la consistencia y la responsividad del layout. Permite a los desarrolladores estructurar rápidamente el contenido de las páginas de forma adaptativa, utilizando un conjunto de clases estandarizadas que facilitan la alineación de elementos y la creación de diseños complejos en diferentes dispositivos.

scss

// src/assets/styles/layouts/grid.module.scss

// Importa los mixins SCSS para reutilizar patrones de diseño responsivo.
@use "../config/mixins.module.scss" as mixins;
// Importa las variables de configuración globales, como la unidad de espaciado.
@use "../config/variables.module.scss" as vars;

// Clase base para un contenedor de cuadrícula.
.grid {
  display: grid; // Habilita el modelo de cuadrícula.
  gap: vars.$spacing-unit * 2; // Define el espaciado entre los elementos de la cuadrícula (ej. 16px).
}

// Layout de cuadrícula con 2 columnas en pantallas grandes, 1 en móviles.
.grid-columns-2 {
  // Configuración: móvil (1fr) / tableta (1fr 1fr) / escritorio (1fr 1fr)
  @include mixins.responsive-grid(1fr, 1fr 1fr, 1fr 1fr);
}

// Layout de cuadrícula con 3 columnas en pantallas grandes, 1 en móviles/tabletas.
.grid-columns-3 {
  // Configuración: móvil (1fr) / tableta (1fr) / escritorio (1fr 1fr 1fr)
  @include mixins.responsive-grid(1fr, 1fr, 1fr 1fr 1fr);
}

// Layout de cuadrícula con 4 columnas en pantallas grandes, 2 en tabletas, 1 en móviles.
.grid-columns-4 {
  // Configuración: móvil (1fr) / tableta (1fr 1fr) / escritorio (1fr 1fr 1fr 1fr)
  @include mixins.responsive-grid(1fr, 1fr 1fr, 1fr 1fr 1fr 1fr);
}

`login.form.module.scss`

Este archivo SCSS (.module.scss indica que es un módulo CSS) define los estilos específicos para el contenedor y el formulario de inicio de sesión. Asegura que el formulario esté centrado, tenga una apariencia visual definida y que sus elementos internos estén correctamente estilizados.

Descripción: login.form.module.scss utiliza variables SCSS para aplicar estilos al contenedor principal del login (centrando el formulario), al formulario en sí (estableciendo su tamaño, fondo, bordes y sombra), y a elementos internos como el título y el logo.
Propósito: Proporcionar una apariencia visual consistente y atractiva para la página/sección de inicio de sesión, asegurando que el formulario sea fácil de usar y esté bien presentado.
Funcionalidad clave (Estilos):
- Importación de Variables:
  - @use "../config/variables.module.scss" as vars;: Importa las variables de diseño globales (colores, unidades de espaciado, etc.) desde la carpeta config, lo que asegura la consistencia de la marca y facilita cambios de tema.
- .loginContainer:
  - justify-content: center; align-items: center;: Centra el contenido (el formulario de login) tanto horizontal como verticalmente dentro de su contenedor (presumiblemente un flexbox o grid).
  - height: 100vh; width: 100%;: Asegura que el contenedor ocupe el 100% del ancho y alto del viewport, lo que permite un centrado a pantalla completa.
- .loginForm:
  - max-width: 350px;: Limita el ancho máximo del formulario para mantenerlo compacto y legible.
  - padding: vars.$spacing-unit * 3.125;: Añade un relleno interno al formulario, utilizando la variable de espaciado (ej., 25px si $spacing-unit es 8px).
  - background: vars.$white;: Establece el color de fondo del formulario a blanco, usando la variable global.
  - border-radius: 10px;: Aplica esquinas redondeadas al formulario.
  - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);: Añade una sombra sutil para darle profundidad y destacar el formulario.
- .inputTitle:
  - text-align: center;: Centra el contenido de texto y los elementos inline-block (como el logo) dentro de esta sección.
- .iconUser:
  - font-size: 5rem; padding: vars.$spacing-unit * 1.25; color: vars.$primary-color;: Estilos para un posible icono de usuario, haciéndolo grande, con padding y con el color primario de la marca (ej., 10px de padding).
- .logo:
  - max-width: 200px; padding-bottom: vars.$spacing-unit * 1.25;: Estilos para el logo dentro del formulario, limitando su tamaño y añadiendo un espacio inferior (ej., 10px de padding-bottom).
Rol en la aplicación: login.form.module.scss es esencial para la presentación visual del formulario de inicio de sesión. Garantiza que el formulario esté centrado y estilizado de forma coherente con el resto del diseño de la aplicación, proporcionando una experiencia visual agradable y funcional para los usuarios.

scss

// src/assets/styles/layouts/login.form.module.scss

// Importa las variables de configuración globales para mantener la consistencia de estilo.
@use "../config/variables.module.scss" as vars;

// Estilos para el contenedor principal del formulario de login.
// Asegura que el contenido (el formulario) se centre en la pantalla.
.loginContainer {
  justify-content: center; // Centra horizontalmente si es flex/grid container.
  align-items: center; // Centra verticalmente si es flex/grid container.
  height: 100vh; // Ocupa el 100% de la altura del viewport.
  width: 100%; // Ocupa el 100% del ancho disponible.
}

// Estilos para el formulario de login en sí.
.loginForm {
  max-width: 350px; // Ancho máximo para el formulario.
  padding: vars.$spacing-unit * 3.125; // Relleno interno (ej. 25px).
  background: vars.$white; // Fondo blanco usando la variable global.
  border-radius: 10px; // Esquinas ligeramente redondeadas.
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // Sombra sutil para destacar.
}

// Estilos para el contenedor del título/logo dentro del formulario.
.inputTitle {
  text-align: center; // Centra el contenido de texto.
}

// Estilos para un posible icono de usuario (si se utiliza en el formulario).
.iconUser {
  font-size: 5rem; // Tamaño grande para el icono.
  padding: vars.$spacing-unit * 1.25; // Relleno alrededor del icono (ej. 10px).
  color: vars.$primary-color; // Color principal de la marca.
}

// Estilos para el logo dentro del formulario.
.logo {
  max-width: 200px; // Ancho máximo del logo.
  padding-bottom: vars.$spacing-unit * 1.25; // Espaciado en la parte inferior del logo (ej. 10px).
}

`protected.layout.module.scss`

Este archivo SCSS (.module.scss indica que es un módulo CSS) define los estilos para el layout principal de las rutas protegidas de la aplicación. Este layout suele incluir una barra lateral de navegación (sidebar) y un área de contenido principal, adaptándose para diferentes tamaños de pantalla.

Descripción: protected.layout.module.scss utiliza Flexbox para organizar el contenedor principal y el área de contenido. Gestiona el espacio para la barra lateral fija en escritorio y adapta el layout para móviles. También define un estilo de fondo común para las secciones de contenido.
Propósito: Proporcionar una estructura de diseño base consistente y responsiva para todas las páginas a las que solo pueden acceder los usuarios autenticados. Esto asegura que elementos como la barra lateral y el contenido principal se posicionen correctamente.
Funcionalidad clave (Estilos):
- Importación de Variables:
  - @use "../config/variables.module.scss" as vars;: Importa las variables de diseño globales (colores, unidades de espaciado, etc.) desde la carpeta config, asegurando la consistencia.
- .layoutContainer:
  - display: flex;: Establece el contenedor principal como un flex container, lo que permite que sus hijos (Sidebar y mainContent) se distribuyan horizontalmente.
  - height: 100vh;: Asegura que el contenedor ocupe el 100% de la altura de la ventana (viewport), lo cual es crucial para un layout "sticky" de barra lateral.
- .mainContent:
  - flex: 1;: Permite que el área de contenido principal ocupe todo el espacio restante disponible en el flex container.
  - padding: 1rem;: Añade un relleno interno para el contenido.
  - overflow-y: auto;: Habilita el desplazamiento vertical si el contenido excede la altura disponible, evitando que se desborde la página.
  - margin-left: 25%;: Este es un estilo crucial que crea un espacio vacío a la izquierda para acomodar la barra lateral fija, la cual se asume que tiene un width del 25%.
  - Media Query Móvil: @media (max-width: 768px) { margin-left: 0; }: En pantallas pequeñas, el margin-left se resetea a 0, ya que la barra lateral en móviles se oculta o se superpone al contenido.
- .mainBackground:
  - background: vars.$white;: Color de fondo blanco usando la variable global.
  - padding: vars.$spacing-unit * 3.125;: Relleno interno consistente (ej., 25px si $spacing-unit es 8px).
  - border-radius: 10px;: Esquinas redondeadas.
  - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);: Sombra sutil para destacar el contenedor de contenido.
- Media Query Global (@media (max-width: 768px) para .layoutContainer):
  - display: block;: En pantallas pequeñas, el layoutContainer cambia a display: block, lo que hace que sus hijos se apilen verticalmente, adecuado para un diseño responsivo donde la barra lateral podría estar oculta o en una posición diferente.
Rol en la aplicación: protected.layout.module.scss es la base visual de la experiencia de usuario autenticado. Define cómo se distribuyen los elementos principales de la interfaz (sidebar, contenido) en diferentes dispositivos, asegurando un diseño coherente y adaptable a lo largo de todas las rutas protegidas.

scss

// src/assets/styles/layouts/protected.layout.module.scss

// Importa las variables de configuración globales para mantener la consistencia de estilo.
@use "../config/variables.module.scss" as vars;

// Estilos para el contenedor principal del layout.
// Utiliza flexbox para organizar la barra lateral y el contenido principal.
.layoutContainer {
  display: flex; // Habilita el flexbox.
  height: 100vh; // Ocupa el 100% de la altura del viewport.
}

// Estilos para el área principal de contenido.
.mainContent {
  flex: 1; // Permite que ocupe todo el espacio restante en el contenedor flex.
  padding: 1rem; // Relleno interno.
  overflow-y: auto; // Habilita el desplazamiento vertical si el contenido excede el área.

  margin-left: 25%; // Deja espacio para la barra lateral fija del 25% de ancho.
  // Media Query para pantallas pequeñas (hasta 768px de ancho).
  @media (max-width: 768px) {
    margin-left: 0; // En móviles, el contenido ocupa toda la pantalla, ya que la barra lateral se oculta o superpone.
  }
}

// Estilos para un fondo de contenido común dentro de las páginas.
.mainBackground {
  background: vars.$white; // Fondo blanco usando la variable global.
  padding: vars.$spacing-unit * 3.125; // Relleno interno (ej., 25px).
  border-radius: 10px; // Esquinas redondeadas.
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // Sombra sutil.
}

// Media Query para pantallas pequeñas (hasta 768px de ancho).
// Cambia el comportamiento del contenedor principal de flex a block para diseño móvil.
@media (max-width: 768px) {
  .layoutContainer {
    display: block; // Los elementos hijos se apilan verticalmente.
  }
}

`statistics.module.scss`

Este archivo SCSS (.module.scss indica que es un módulo CSS) define los estilos para los módulos de contenido dentro de la página de estadísticas. Estos estilos proporcionan una apariencia unificada a las diferentes secciones que presentan gráficos y tablas.

Descripción: statistics.module.scss contiene una clase .modulos que aplica un conjunto de estilos comunes a los contenedores de las secciones de estadísticas. Estos estilos incluyen padding, una sombra de caja para destacarlos, margen superior para separarlos, y bordes redondeados, utilizando variables de espaciado para mayor consistencia.
Propósito: Estandarizar la presentación visual de cada "módulo" de estadísticas en la página, asegurando una apariencia coherente y una clara separación visual entre las diferentes secciones de datos.
Funcionalidad clave (Estilos):
- Importación de Variables:
  - @use "../config/variables.module.scss" as vars;: Importa las variables de diseño globales (como $spacing-unit) desde la carpeta config, lo que asegura la consistencia de las dimensiones y espaciados en toda la aplicación.
- .modulos:
  - padding: vars.$spacing-unit * 3.75;: Añade un relleno interno considerable (equivalente a 30px si $spacing-unit es 8px), proporcionando espacio alrededor del contenido de cada módulo.
  - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);: Aplica una sombra sutil para dar un efecto de elevación y destacar el módulo del fondo.
  - margin-top: vars.$spacing-unit * 3.75;: Proporciona un margen superior para separar cada módulo del anterior o de otros elementos, manteniendo la consistencia del espaciado (equivalente a 30px).
  - border-radius: 15px;: Redondea las esquinas del módulo, suavizando su apariencia. (Nota: Este valor podría ser una variable global si se usa frecuentemente para bordes redondeados grandes).
Rol en la aplicación: statistics.module.scss es fundamental para la organización visual y la estética de la página de estadísticas. Permite que cada sección de datos se presente como un bloque de información discreto y visualmente atractivo, mejorando la legibilidad y la experiencia del usuario.

scss

// src/assets/styles/layouts/statistics.module.scss

// Importa las variables de configuración globales para mantener la consistencia de estilo.
@use "../config/variables.module.scss" as vars;

// Estilos para los módulos de contenido en la página de estadísticas.
.modulos {
  padding: vars.$spacing-unit * 3.75; // Relleno interno del módulo (ej. 30px).
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // Sombra de caja para dar profundidad.
  margin-top: vars.$spacing-unit * 3.75; // Margen superior para separar módulos (ej. 30px).
  border-radius: 15px; // Bordes redondeados.
}

`student.profile.module.scss`

Este archivo SCSS (.module.scss indica que es un módulo CSS) define los estilos detallados para la página de perfil de un estudiante (StudentProfile). Incluye la estilización de diversas secciones de datos, elementos visuales específicos como el feedback, y controles de acción.

Descripción: student.profile.module.scss organiza los estilos de la página de perfil en secciones lógicas (datos personales, comunicación, documentación). Utiliza variables de configuración para colores y define estilos específicos para elementos como el estado de feedback, botones de acción, iconos de perfil y entradas de documentos, asegurando una experiencia visual coherente y detallada.
Propósito: Proporcionar una apariencia y un comportamiento visual consistente para la página de perfil del estudiante, haciendo que la gran cantidad de información sea legible y las interacciones claras.
Funcionalidad clave (Estilos):
- Importación de Variables:
  - @use "../config/variables.module.scss" as vars;: Importa las variables de diseño globales (colores, espaciados, etc.) desde la carpeta config para asegurar la consistencia.
- .datos:
  - padding: vars.$spacing-unit * 2.5;: Relleno interno (20px si $spacing-unit es 8px).
  - border-top: 1px solid #ccc;: Borde superior para separar secciones.
- .feedback:
  - color: vars.$white; padding: vars.$spacing-unit / 1.6; border-radius: vars.$spacing-unit / 1.6;: Estilos base para los indicadores de estado de feedback, haciéndolos visualmente distintivos y compactos.
- .positive, .negative:
  - background-color: green; / background-color: red;: Clases modificadoras que aplican colores de fondo específicos para indicar estados positivos o negativos del feedback.
- .handleEdit, .handleDelete:
  - Estilos para botones de acción, usando vars.$spacing-unit para padding y vars.$secondary-color para fondos.
- .datosPersonales, .datosComunicacion, .datosDocumentacion:
  - Estas clases definen módulos visuales para cada sección de datos. Comparten estilos como box-shadow, pero tienen padding, margin-top/margin y border-radius específicos, usando vars.$spacing-unit y valores directos.
- .iconUser:
  - font-size: 11rem; color: vars.$white; border: vars.$primary-color 5px solid; border-radius: 100%;: Estilos para un icono de usuario grande, circular, con borde de color primario y color de texto blanco.
- li (globalmente):
  - display: flex;: Establece los elementos de lista como contenedores flex para alinear su contenido (ej., ícono y texto).
- .profile:
  - color: #ffffff; margin: vars.$spacing-unit * 1.25 0;: Estilos para un texto de perfil.
- .profileIcon:
  - width: vars.$spacing-unit * 2.5; height: vars.$spacing-unit * 2.5; margin-right: vars.$spacing-unit / 1.6; display: flex; color: vars.$primary-color;: Estilos para iconos pequeños dentro del perfil, alineados y con color primario.
- strong:
  - margin-right: vars.$spacing-unit / 1.6;: Agrega un pequeño margen a la derecha de las etiquetas <strong>, mejorando la legibilidad.
- .mainInformation:
  - background: vars.$secondary-color; padding: vars.$spacing-unit * 4.375; border-radius: 50px 0 0 0;: Estilos para una sección principal de información, con un fondo oscuro, padding generoso y bordes redondeados asimétricos.
- .personalData:
  - padding: vars.$spacing-unit * 5; box-shadow; border-radius: vars.$spacing-unit * 3.125; margin: vars.$spacing-unit * 3.125 0px;: Otra clase para secciones de datos, con diferentes paddings, sombras, bordes y márgenes.
- .comments:
  - background-color: vars.$grey; padding: vars.$spacing-unit * 1.875; border-radius: vars.$spacing-unit * 2.5;: Estilos para un bloque de comentarios.
- .disabledLink, .disabledButton:
  - Estilos para elementos deshabilitados. .disabledButton usa !important para sobrescribir estilos, lo cual puede indicar problemas de especificidad.
- Media Queries (@media (max-width: 768px)):
  - mainInformation: Centra el texto en móviles.
  - li: Cambia display: flex a display: -webkit-inline-box (equivalente a inline-flex en muchos contextos) para li en móviles, lo que podría afectar el layout de listas flex.
Rol en la aplicación: student.profile.module.scss es crucial para la experiencia de usuario en la gestión individual de estudiantes. Define la estética y la interactividad de la página de perfil, organizando la información de manera clara y visualmente atractiva, y proporcionando feedback visual para los diferentes estados de los datos.

scss

// src/assets/styles/layouts/student.profile.module.scss

// Importa las variables de configuración globales para mantener la consistencia de estilo.
@use "../config/variables.module.scss" as vars;

// Estilos para secciones genéricas de datos dentro del perfil.
.datos {
  padding: vars.$spacing-unit * 2.5; // Relleno interno (20px si $spacing-unit es 8px).
  border-top: 1px solid #ccc; // Borde superior para separar secciones.
}

// Estilos base para los indicadores de estado de feedback (ej. "Matriculado").
.feedback {
  color: vars.$white; // Color de texto blanco.
  padding: vars.$spacing-unit / 1.6; // Relleno (5px si $spacing-unit es 8px).
  border-radius: vars.$spacing-unit / 1.6; // Esquinas redondeadas (5px si $spacing-unit es 8px).
  text-align: center; // Texto centrado.
  font-weight: bold; // Texto en negrita.
}

// Clase modificadora para feedback positivo.
.positive {
  background-color: green; // Fondo verde.
}

// Clase modificadora para feedback negativo.
.negative {
  background-color: red; // Fondo rojo.
  margin-top: vars.$spacing-unit * 1.25; // Margen superior (10px si $spacing-unit es 8px).
}

// Estilos para el botón de edición.
.handleEdit {
  color: vars.$white; // Color de texto blanco.
  padding: vars.$spacing-unit * 1.25 vars.$spacing-unit * 2.5; // Relleno (10px 20px si $spacing-unit es 8px).
  border: none; // Sin borde.
}

// Estilos para el botón de eliminación.
.handleDelete {
  background-color: vars.$secondary-color; // Fondo usando color secundario.
  color: vars.$white; // Color de texto blanco.
  padding: vars.$spacing-unit * 1.25 vars.$spacing-unit * 2.5; // Relleno (10px 20px si $spacing-unit es 8px).
  border: none; // Sin borde.
  &:hover {
    background-color: vars.$secondary-color-hover; // Cambio de color al pasar el ratón.
  }
}

// Estilos para la sección de datos personales.
.datosPersonales {
  padding: vars.$spacing-unit * 3.75; // Relleno (30px si $spacing-unit es 8px).
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // Sombra.
  border-radius: vars.$spacing-unit * 3.125; // Bordes redondeados (25px si $spacing-unit es 8px).
  h2 {
    color: vars.$secondary-color; // Color del título de la sección.
  }
}

// Estilos para la sección de datos de comunicación.
.datosComunicacion {
  padding: vars.$spacing-unit * 3.75; // Relleno (30px si $spacing-unit es 8px).
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // Sombra.
  margin-top: vars.$spacing-unit * 3.75; // Margen superior (30px si $spacing-unit es 8px).
  border-radius: vars.$spacing-unit * 1.875; // Bordes redondeados (15px si $spacing-unit es 8px).
  h2 {
    color: vars.$secondary-color; // Color del título.
  }
}

// Estilos para la sección de documentación.
.datosDocumentacion {
  padding: vars.$spacing-unit * 3.75; // Relleno (30px si $spacing-unit es 8px).
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // Sombra.
  margin: vars.$spacing-unit * 3.75 0px; // Margen vertical (30px 0px si $spacing-unit es 8px).
  border-radius: vars.$spacing-unit * 1.875; // Bordes redondeados (15px si $spacing-unit es 8px).
  h2 {
    color: vars.$secondary-color; // Color del título.
  }
}

// Estilos para un icono grande de usuario.
.iconUser {
  font-size: 11rem; // Tamaño de fuente muy grande.
  color: vars.$white; // Color blanco.
  border: vars.$primary-color 5px solid; // Borde con color primario.
  border-radius: 100%; // Forma circular.
}

// Estilos generales para los elementos de lista.
li {
  display: flex; // Utiliza flexbox para organizar el contenido.
}

// Estilos para un texto de perfil.
.profile {
  color: #ffffff; // Color blanco.
  margin: vars.$spacing-unit * 1.25 0; // Margen vertical (10px 0 si $spacing-unit es 8px).
}

// Estilos para un icono pequeño de perfil.
.profileIcon {
  width: vars.$spacing-unit * 2.5; // Ancho (20px si $spacing-unit es 8px).
  height: vars.$spacing-unit * 2.5; // Altura (20px si $spacing-unit es 8px).
  margin-right: vars.$spacing-unit / 1.6; // Margen a la derecha (5px si $spacing-unit es 8px).
  display: flex; // Flexbox.
  color: vars.$primary-color; // Color primario.
}

// Estilos para elementos <strong> (negrita).
strong {
  margin-right: vars.$spacing-unit / 1.6; // Agrega un margen derecho (5px si $spacing-unit es 8px).
}

// Estilos para la sección principal de información del perfil.
.mainInformation {
  background: vars.$secondary-color; // Fondo con color secundario.
  padding: vars.$spacing-unit * 4.375; // Relleno (35px si $spacing-unit es 8px).
  border-radius: 50px 0 0 0; // Bordes redondeados asimétricos.

  p {
    color: vars.$white; // Color de texto blanco.
    font-weight: 600; // Negrita.
  }
}

// Estilos para la sección de datos personales.
.personalData {
  padding: vars.$spacing-unit * 5; // Relleno (40px si $spacing-unit es 8px).
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); // Sombra.
  border-radius: vars.$spacing-unit * 3.125; // Bordes redondeados (25px si $spacing-unit es 8px).
  margin: vars.$spacing-unit * 3.125 0px; // Margen vertical (25px 0px si $spacing-unit es 8px).

  p {
    margin-top: vars.$spacing-unit * 1.875; // Margen superior para párrafos internos (15px si $spacing-unit es 8px).
  }
}

// Estilos para un bloque de comentarios.
.comments {
  background-color: vars.$grey; // Fondo gris.
  padding: vars.$spacing-unit * 1.875; // Relleno (15px si $spacing-unit es 8px).
  border-radius: vars.$spacing-unit * 2.5; // Bordes redondeados (20px si $spacing-unit es 8px).
}

// Estilos para enlaces deshabilitados visualmente.
.disabledLink {
  pointer-events: none; // Deshabilita interacciones de puntero.
}

// Estilos para botones deshabilitados.
// Usa !important para sobrescribir estilos, lo cual puede indicar problemas de especificidad.
.disabledButton {
  background-color: #e0e0e0 !important; /* Gris claro */
  color: #757575 !important; /* Gris oscuro */
  border: 1px solid #bdbdbd !important; /* Borde gris */
  cursor: not-allowed !important; /* Indica que no se puede interactuar */
  padding: vars.$spacing-unit vars.$spacing-unit * 1.5; // Relleno (8px 12px si $spacing-unit es 8px).
  border-radius: vars.$spacing-unit / 1.6; // Bordes redondeados (5px si $spacing-unit es 8px).
  font-size: 0.8em; // Tamaño de fuente relativo.
}

// Media Query para pantallas pequeñas (hasta 768px de ancho).
@media (max-width: 768px) {
  .mainInformation {
    text-align: center; // Centra el texto.
  }

  li {
    display: -webkit-inline-box; // Equivalente a inline-flex para navegadores WebKit.
  }
}

`global.scss`

Este archivo es el punto de entrada principal para todos los estilos SCSS de tu aplicación. Es el lugar donde se importan otros archivos SCSS (como resets, variables y mixins) y donde se definen los estilos CSS de nivel global que afectan a la mayoría de los elementos HTML sin clases específicas, o que establecen el comportamiento general de la UI.

Descripción: global.scss importa los estilos de reinicio, las variables y las utilidades de cuadrícula, y luego aplica estilos generales a elementos HTML básicos como body, li, button, input, select, textarea, y encabezados (h1 a h4). También define estilos para la visibilidad responsiva (.mobile, .desktop) y para la apariencia de las tablas. Los valores de espaciado y tamaño ahora utilizan consistentemente las variables globales para mejorar la mantenibilidad.
Propósito: Unificar todos los estilos de la aplicación en un solo punto de importación (generalmente en main.tsx) y establecer una base visual consistente para elementos HTML predeterminados, garantizando la coherencia del diseño en toda la aplicación.
Funcionalidad clave (Estilos):
- Importaciones de Estilos:
  - @use "../styles/base/reset.module.scss";: Importa el archivo de reset CSS que normaliza los estilos de los navegadores.
  - @use "../styles/config/variables.module.scss" as vars;: Importa las variables de diseño globales (colores, espaciados) para su uso consistente.
  - @use "../styles/layout/grid.module.scss" as grid;: Importa las clases de utilidad para el sistema de cuadrículas.
- Estilos del body:
  - background-color: vars.$grey;: Establece el color de fondo general de la aplicación.
  - color: vars.$text-color;: Define el color de texto por defecto.
  - line-height: 1.6;: Mejora la legibilidad del texto.
  - font-size: vars.$spacing-unit * 1.75;: Establece un tamaño de fuente base (14px si $spacing-unit es 8px), usando la variable de espaciado para consistencia.
- Estilos de li (elementos de lista):
  - list-style: none;: Elimina los marcadores de lista predeterminados.
  - padding: vars.$spacing-unit / 1.6 0;: Relleno vertical para cada elemento de lista (5px si $spacing-unit es 8px).
- Estilos de strong (texto en negrita):
  - margin-left: vars.$spacing-unit / 1.6;: Margen a la izquierda (5px si $spacing-unit es 8px).
- Estilos de button (botones generales):
  - padding: vars.$spacing-unit vars.$spacing-unit * 2;: Define el relleno utilizando la variable de espaciado (8px 16px si $spacing-unit es 8px).
  - width: 100%; text-transform: uppercase; border: none; border-radius: 4px; cursor: pointer;: Estilos estándar para botones.
  - background-color: vars.$primary-color; color: vars.$white;: Colores primarios de la marca.
  - transition: 0.3s ease-in-out; &:hover { background-color: vars.$primary-color-hover; }: Efecto de transición y cambio de color al pasar el ratón.
- Estilos de Toastify:
  - .Toastify__close-button:hover: Un estilo específico para el botón de cerrar las notificaciones toast, asegurando que su fondo sea transparente al pasar el ratón.
- Estilos de label:
  - color: vars.$text-color;: Color de texto para las etiquetas de formulario.
- Estilos de input, textarea, select (campos de formulario):
  - padding: 0.5rem; margin: vars.$spacing-unit * 1.25 0px;: Definición de padding y margen vertical (10px si $spacing-unit es 8px).
  - border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; width: 100%; font-family: "Poppins", serif;: Otros estilos para una apariencia uniforme.
- Estilos de h1, h2, h3, h4 (encabezados):
  - padding: vars.$spacing-unit * 1.25 0px;: Relleno vertical (10px si $spacing-unit es 8px).
  - color (usando variables de la marca) y text-transform: uppercase;: Establecen una jerarquía visual clara.
- Clases de Visibilidad Responsiva (.mobile, .desktop):
  - .mobile { display: none; }: Oculta elementos con esta clase por defecto.
  - .desktop { display: none; } (dentro de media query): Oculta elementos con esta clase en móviles.
- Estilos de table, th, td (tablas):
  - width: 100%; border-collapse: collapse; margin-top: vars.$spacing-unit * 1.25;: Estilos básicos para la tabla.
  - border: 1px solid #ccc; text-align: left; padding: vars.$spacing-unit * 1.25 !important; font-size: vars.$spacing-unit * 1.5;: Estilos para celdas y encabezados de tabla (padding de 10px, font-size de 12px).
  - background-color: #f4f4f4; para th y background-color: #f9f9f9; para filas pares (tr:nth-child(even)), proporcionando un sombreado alterno.
- Media Queries (@media (max-width: 768px)):
  - mobile: Muestra elementos con la clase .mobile en pantallas pequeñas.
  - desktop: Oculta elementos con la clase .desktop en pantallas pequeñas.
Rol en la aplicación: global.scss es el orquestador de los estilos generales. Al importar otros parciales y definir estilos universales, establece el tono visual de toda la aplicación, asegura la coherencia en la interfaz de usuario y proporciona utilidades básicas de layout y responsividad.

scss

/* src/assets/styles/global.scss */

// Importa el reset CSS para normalizar los estilos de los navegadores.
@use "../styles/base/reset.module.scss";
// Importa las variables de configuración globales (colores, espaciado) para consistencia.
@use "../styles/config/variables.module.scss" as vars;
// Importa las clases de utilidad para el sistema de cuadrículas.
@use "../styles/layout/grid.module.scss" as grid;

// Estilos globales para el cuerpo de la página.
body {
  background-color: vars.$grey; /* Color de fondo general de la aplicación. */
  color: vars.$text-color; /* Color de texto por defecto. */
  line-height: 1.6; /* Altura de línea para mejorar la legibilidad. */
  font-size: vars.$spacing-unit * 1.75; /* Tamaño de fuente base (ej. 14px). */
}

// Estilos globales para elementos de lista.
li {
  list-style: none; /* Elimina los marcadores de lista por defecto. */
  padding: vars.$spacing-unit / 1.6 0; /* Relleno vertical para cada elemento de lista (ej. 5px). */
}

// Estilos globales para el texto en negrita.
strong {
  margin-left: vars.$spacing-unit / 1.6; /* Margen a la izquierda del texto en negrita (ej. 5px). */
}

// Estilos globales para los botones de la aplicación.
button {
  padding: vars.$spacing-unit vars.$spacing-unit * 2; /* Relleno usando la variable de espaciado (ej. 8px 16px). */
  width: 100%; /* Ocupa el 100% del ancho de su contenedor. */
  text-transform: uppercase; /* Texto en mayúsculas. */
  border: none; /* Sin borde. */
  border-radius: vars.$spacing-unit / 2; /* Esquinas ligeramente redondeadas (ej. 4px). */
  cursor: pointer; /* Cursor indicativo de clic. */
  background-color: vars.$primary-color; /* Color de fondo primario. */
  color: vars.$white; /* Color de texto blanco. */
  transition: 0.3s ease-in-out; /* Transición suave para cambios de estado. */
  &:hover {
    background-color: vars.$primary-color-hover; /* Cambio de color al pasar el ratón. */
  }
}

// Estilos específicos para el botón de cierre de las notificaciones Toastify.
.Toastify__close-button:hover {
  background-color: transparent; /* Fondo transparente al pasar el ratón. */
}

// Estilos globales para las etiquetas de formulario.
label {
  color: vars.$text-color; /* Color de texto usando la variable global. */
}

// Estilos globales para inputs de texto/email.
input {
  padding: 0.5rem; /* Relleno interno usando unidades rem. */
  margin: vars.$spacing-unit * 1.25 0px; /* Margen vertical (ej. 10px). */
  border: 1px solid #ccc; /* Borde delgado y gris. */
  border-radius: vars.$spacing-unit / 2; /* Esquinas redondeadas (ej. 4px). */
  font-size: 1rem; /* Tamaño de fuente. */
  width: 100%; /* Ocupa el 100% del ancho. */
  font-family: "Poppins", serif; /* Fuente consistente. */
}

// Estilos globales para textareas.
textarea {
  border: 1px solid #ccc; /* Borde. */
  border-radius: vars.$spacing-unit / 2; /* Esquinas redondeadas (ej. 4px). */
  width: 100%; /* Ocupa el 100% del ancho. */
}

// Estilos globales para selectores.
select {
  width: 100%; /* Ocupa el 100% del ancho. */
  margin: vars.$spacing-unit * 1.25 0px; /* Margen vertical (ej. 10px). */
  padding: 0.5rem; /* Relleno. */
  border: 1px solid #ccc; /* Borde. */
  border-radius: vars.$spacing-unit / 2; /* Esquinas redondeadas (ej. 4px). */
  font-family: "Poppins", serif; /* Fuente consistente. */
}

// Estilos globales para encabezados H1, H3, H4.
h1,
h3,
h4 {
  padding: vars.$spacing-unit * 1.25 0px; /* Relleno vertical (ej. 10px). */
  color: vars.$primary-color; /* Color primario de la marca. */
  text-transform: uppercase; /* Texto en mayúsculas. */
}

// Estilos globales para encabezado H2.
h2 {
  color: vars.$secondary-color; /* Color secundario de la marca. */
  padding: vars.$spacing-unit * 1.25 0px; /* Relleno vertical (ej. 10px). */
  text-transform: uppercase; /* Texto en mayúsculas. */
}

// Clase de utilidad para ocultar elementos en escritorio por defecto.
.mobile {
  display: none;
}

// Estilos globales para tablas.
table {
  width: 100%; /* Ocupa el 100% del ancho. */
  border-collapse: collapse; /* Colapsa los bordes de la tabla. */
  margin-top: vars.$spacing-unit * 1.25; /* Margen superior (ej. 10px). */
}

// Estilos para encabezados de tabla y celdas de datos.
th,
td {
  border: 1px solid #ccc; /* Borde para celdas. */
  text-align: left; /* Alineación de texto a la izquierda. */
  padding: vars.$spacing-unit * 1.25 !important; /* Relleno importante para celdas (ej. 10px). */
  font-size: vars.$spacing-unit * 1.5; /* Tamaño de fuente para el contenido de la celda (ej. 12px). */
}

// Estilos para encabezados de tabla.
th {
  background-color: #f4f4f4; /* Fondo gris claro. */
}

// Estilos para filas pares de la tabla (alternar colores).
tr:nth-child(even) {
  background-color: #f9f9f9; /* Fondo gris muy claro para filas pares. */
}

// Media Query para pantallas pequeñas (hasta 768px de ancho).
@media (max-width: 768px) {
  // Muestra elementos con la clase 'mobile'.
  .mobile {
    display: block;
  }

  // Oculta elementos con la clase 'desktop'.
  .desktop {
    display: none;
  }
}

Archivos de la Carpeta src/assets/ #

reset.module.scss #

mixins.module.scss #

variables.module.scss #

sidebar.module.scss #

student.table.module.scss #

grid.module.scss #

login.form.module.scss #

protected.layout.module.scss #

statistics.module.scss #

student.profile.module.scss #

global.scss #

Archivos de la Carpeta `src/assets/`

`reset.module.scss`

`mixins.module.scss`

`variables.module.scss`

`sidebar.module.scss`

`student.table.module.scss`

`grid.module.scss`

`login.form.module.scss`

`protected.layout.module.scss`

`statistics.module.scss`

`student.profile.module.scss`

`global.scss`