@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/heebo-v28-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/heebo-v28-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/heebo-v28-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v49-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v49-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v49-latin_latin-ext-700.woff2') format('woff2');
}

/* Sobrescribir fuentes globales de Bootstrap */
:root {
  --bs-body-font-family: 'Roboto', 'Heebo', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Heebo', sans-serif;
}
/*Alert*/
:root {
  --color-success: #28a745;
  --color-error: #dc3545;
  --color-warning: #ffc107;
  --color-info: #0d6efd;
}

.modal-icon-alert {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.error {
  color: var(--color-error);
}

.warning {
  color: var(--color-warning);
}

.success {
  color: var(--color-success);
}

.info {
  color: var(--color-info);
}

.toast-custom {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.2rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  max-width: 360px;
  animation: fadeSlide 0.3s ease-out;
  background-color: #ffffff; /* fondo blanco sólido */
  color: #212529; /* texto oscuro */
  border-left: 4px solid var(--color-info);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  word-wrap: break-word;
  line-height: 1.4;
  overflow-y: auto;
  max-height: 300px;
}
[data-bs-theme="dark"] .toast-custom {
  background-color: #2c2f36;
  color: #f1f1f1;
}


.toast-custom::-webkit-scrollbar {
  width: 6px;
}
.toast-custom::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.toast-custom.toast-success { border-left-color: var(--color-success); }
.toast-custom.toast-error   { border-left-color: var(--color-error); }
.toast-custom.toast-warning { border-left-color: var(--color-warning); }
.toast-custom.toast-info    { border-left-color: var(--color-info); }

.toast-container-custom {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 1055;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*Generales*/
.objeto-oculto  {
  display: none !important;
}

/* Estilo general de botón circular */
.btn-circular {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 50% !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.btn-circular i {
  display: block !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Estilos del panel de resultados */
#panelResultadosEstudiantes {
  max-height: 300px;            /* Limita la altura del panel */
  overflow-y: auto;             /* Activa el scroll vertical si el contenido excede el max-height */
  background-color: var(--bs-body-bg); /* Fondo por defecto según el tema (usamos var de Bootstrap) */
  border: 1px solid rgba(0, 0, 0, 0.125); /* Borde sutil */
  border-radius: 5px;           /* Bordes redondeados */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  padding: 0.5rem 1rem;         /* Espaciado */
  visibility: hidden;           /* Inicialmente oculto */
  opacity: 0;                   /* Inicialmente invisible */
  transition: opacity 0.3s ease, visibility 0s ease 0.3s; /* Animación de visibilidad */
}

/* Fondo y texto para el tema claro (data-bs-theme="light") */
[data-bs-theme="light"] #panelResultadosEstudiantes {
  background-color: var(--bs-light); /* Fondo blanco para el modo claro */
  color: var(--bs-dark);             /* Texto oscuro para el modo claro */
}

/* Fondo y texto para el tema oscuro (data-bs-theme="dark") */
[data-bs-theme="dark"] #panelResultadosEstudiantes {
  background-color: var(--bs-dark);   /* Fondo oscuro para el modo oscuro */
  color: var(--bs-light);             /* Texto claro para el modo oscuro */
}

/* Estilos de los resultados dentro del panel */
#panelResultadosEstudiantes .p-2 {
  padding: 0.75rem 1rem;        /* Asegura un espaciado adecuado en cada item */
}

#panelResultadosEstudiantes .border-bottom {
  border-bottom: 1px solid #dee2e6;  /* Línea entre resultados */
}

#panelResultadosEstudiantes .cursor-pointer {
  cursor: pointer;             /* Cursor de puntero */
}

#panelResultadosEstudiantes a {
  color: inherit;               /* El color de los enlaces será heredado */
  text-decoration: none;        /* Elimina el subrayado */
}

#panelResultadosEstudiantes a:hover {
  color: #007bff;               /* Color azul al pasar el ratón */
  text-decoration: underline;   /* Subraya el enlace al pasar el ratón */
}