:root {
  /* Colores Principales (Institucional y Moderno) */
  --color-primary-dark: #002147; /* Azul marino oscuro para fondos de barra lateral o encabezados */
  --color-primary-light: #004481; /* Azul cobalto para botones principales y elementos activos */
  --color-primary-basic: #edf2f9; /* Blanco fondos basicos */

  /* Colores Neutros (Base, Comodidad Visual) */
  --color-neutral-background: #f9f9f9; /* Fondo principal de la interfaz */
  --color-neutral-background-secondary: #999999; /* Fondo secundario, descripciones */
  --color-neutral-text-ligth: #f9f9f9; /* Otros textos */
  --color-neutral-card-background: #ffffff; /* Fondo de tarjetas y paneles */
  --color-neutral-border: #efefef; /* Bordes de elementos y separadores */
  --color-neutral-text-primary: #333333; /* Texto principal y títulos */
  --color-neutral-text-secondary: #6b6b6b; /* Texto secundario, descripciones */
  --color-neutral-text-inactive: #999999; /* Iconos inactivos o texto deshabilitado */

  /* Colores de Acento y Estado (Moderno y Dinámico) */
  --color-accent-highlight: #ff6b00; /* Naranja para destacar acciones o alertas */
  --color-status-success: #00b894; /* Verde esmeralda para estados de éxito */
  --color-status-warning: #fdcb6e; /* Amarillo mostaza para advertencias */
  --color-status-danger: #d63031; /* Rojo para errores o acciones peligrosas */
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Regular.ttf");
}

@font-face {
  font-family: "Poppins-Bold";
  src: url("/assets/fonts/Poppins-Bold.ttf");
}

@font-face {
  font-family: "Poppins-SemiBold";
  src: url("/assets/fonts/Poppins-SemiBold.ttf");
}

body {
  background-color: var(--color-primary-basic);
  color: var(--color-neutral-text-primary);
  font-family: "Poppins", sans-serif;
  height: 100vh;
}

footer {
  background-color: var(--color-neutral-text-primary);
  color: var(--color-primary-basic);
}

.navbar {
  /* background-color: var(--color-primary-dark); */
  color: var(--color-neutral-text-primary);
}

/* Estilos del Sidebar */
.sidebar {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  padding-top: 60px;
  z-index: 1000;
  transition: all 0.3s ease;
}

/* Estilos de los elementos del menú */
.sidebar .nav-link {
  color: var(--color-neutral-text-secondary);
  justify-content: space-between;
  border-radius: 0.375rem;
  /* margin: 0.2rem 0.8rem; */
  transition: all 0.3s ease;
}

.sidebar .nav-link:hover {
  color: var(--color-neutral-text-primary);
}

.sidebar .nav-link.active {
  color: var(--color-primary-light);
}

/* Iconos del menú */
.sidebar .nav-link i:first-child {
  margin-right: 10px;
  width: 20px;
  text-align: center;
}

/* Flecha del submenú */
.submenu-arrow {
  font-size: 0.8em;
  transition: transform 0.3s ease;
  opacity: 0.8;
  margin-left: auto;
}

/* Rotación de la flecha */
.nav-link:not(.collapsed) .submenu-arrow {
  transform: rotate(90deg);
}

/* Estilos del submenú */
.sidebar .collapse {
  border-radius: 0.375rem;
}

.sidebar .collapse .nav-link:hover {
  background-color: var(--color-neutral-background-secondary);
  color: var(--color-neutral-text-primary);
}

/* Contenido principal */
.content {
  margin-left: 250px;
  padding: 2rem;
  transition: margin-left 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 0;
  }

  .content {
    margin-left: 0;
  }

  .sidebar .nav-link {
    padding: 0.8rem 1rem;
    margin: 0.1rem 0.4rem;
  }
}

/* LOGIN */

.bg_login {
  background-image: url("../assets/fondos/fondo_login.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container_form_login {
  border-radius: 15px;
  background-color: white;
  transition: all 250ms ease-in-out 0ms;
}

.mensajeLogin_show {
  opacity: 1;
  transition: opacity 1s ease-in;
}

.mensajeLogin_hiden {
  opacity: 0;
}

#reporte_gestion {
  transition: all 250ms ease-in-out 0ms;
}