/*Login*/

html body {
  background-color: #424442;
  height: 100%;
  overflow-x: hidden;
}
.logi-card {
  padding-top: -50rem;
}

.card-header {
  margin-top: 30px;
}
.card {
  border-radius: 25px;
}
.btn-enviar {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  border-radius: 75px;
}

/*Barra de Navegacion*/
.navbar-nav .nav-link {
  color: #fff;
}
.dropend .dropdown-toggle {
  color: rgb(70, 70, 70) !important;
  margin-left: 0em;
}
.dropdown-item:hover {
  background-color: dimgray !important;
  color: #ffffff !important;
}
.dropdown .dropdown-menu {
  display: none;
}
.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
  display: block;
  margin-top: 0em;
  margin-left: 0em;
}

@media screen and (min-width: 992px) {
  .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
  }
  .dropend .dropdown-toggle {
    margin-left: 0em;
  }
}
/* Contenedor general */
.bg-container {
  position: relative;
  width: 100%;
  height: 100%; /* Ajusta la altura al 100% del viewport */
  overflow: hidden; /* Oculta el contenido que excede el contenedor */
}

/* Imagen de fondo */
.bg-image {
  width: 100%;
  height: 100%;
  overflow: cover; /* Oculta contenido que exceda el contenedor */
}

/* Capa de opacidad */
.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Opacidad */
  z-index: 2;
}

/* Contenido superpuesto sobre la imagen */
.content {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: white;
  text-align: center;
}

.btn-custom {
  background-color: #b7950b !important;
  border-color: #b7950b !important;
  color: white !important;
}

/*Boton Agregar*/
.btn-custom {
  background-color: #ff5722 !important;
  border-color: #ff5722 !important;
  color: white;
}

/*Boton url pagina inec*/
a .btn-pag-inec {
  background-color: gold;
  border: none;
  text-decoration: none;
  color: #424442;
  position: absolute; /* Posiciona el elemento de forma absoluta */
  top: 250px; /* Ajusta la distancia desde la parte superior */
  right: -250px; /* Ajusta la distancia desde la parte derecha */
}

a .btn-pag-inec:hover{
background-color: #f8d858;
color: #ffffff;

}
/* Consultas*/
/* Estilo para la tabla */
.table {
  font-size: 0.9rem;
}

.table th,
.table td {
  padding: 0.5rem;
}

/* Estilo para los botones */
.btn {
  display: inline-block;
  margin: 0 5px;
}

.btn-ver {
  background-color: #82e0aa !important;
  border: none;
}
.btn-ver:hover {
  background-color: #d5f5e3 !important;
}
.btn-editar {
  background-color: #f4d03f !important;
  border: none;
}
.btn-editar:hover {
  background-color: #fcf3cf !important;
  border: none;
}

/*Perfil del Alumno*/
.entorno-trabajo {
  background-color: #f1f3f5; /* Gris claro para el entorno de trabajo */
  padding: 30px;
  border-radius: 15px;
}
.formato-credencial .card {
  background-color: #e8d078;
  border: none;
}
.formato-credencial p {
  background-color: #eedc9a;
  border-radius: 10px;
  padding: 5px 10px;
}
.formato-credencial input {
  background-color: #eedc9a;
  border: none;
}
.formato-credencia-da p {
  background-color: #dbd5cd;
  border-radius: 10px;
  padding: 5px 10px;
  display: inline-; /* Ajusta el ancho al contenido */
}

.card-credencial {
  padding: 20px;
  min-height: 300px; /* Establecer una altura mínima */

  overflow: hidden; /* Ocultar el contenido que exceda la altura */
  height: 100%; /* Asegura que ambas tarjetas tengan la misma altura */
}

.foto-container {
  width: 120px;
  height: 150px;
  background-color: #e9ecef;
  margin: 0 auto;
  border-radius: 10px;
}

.datos-alumno,
.datos-academicos {
  font-size: 14px;
}

/* Compactar contenido */
.container {
  padding: 0;
}

.card-body {
  padding: 15px;
}
/*Botones del Perfil del Alumno*/
.btn-pdf a {
  background-color: #e74c3c;
  border: none;
}
.btn-pdf a:hover {
  background-color: #f1948a;
}
/*Icono de Kardex*/
.icon-birrete i {
  font-size: 5rem;
}
.formato-credencial-k {
  background-color: #458685;
  border: none;
}

.formato-credencial-k .btn {
  background-color: #73a4a3;
  border: none;
}
.formato-credencial-k .btn:hover {
  background-color: #a2c3c2;
}
.formato-credencial-doc {
  background-color: #a2c3c2;
  border: none;
  font-size: 15px;
}

/* Estilo para la tabla */
.formato-tabla {
  background-color: #a2c3c2 !important;
  font-size: 0.875rem;
}

.formato-tabla th,
.formato-tabla td {
  font-size: 0.9rem;
}

.cards .card-unic {
  padding-bottom: 2rem;
}
/*Vista Kardex*/
/* Contenedor de las tarjetas */

.row {
  display: flex; /* Usar flexbox para alinear las tarjetas */

  flex-wrap: wrap; /* Permitir que las tarjetas se envuelvan en varias filas */
}

.card-unic {
  background-color: #f2f2f2;
  padding: 10px;
  border-radius: 8px;
}
.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.formato-tabla {
  background-color: #e0e0e0;
  font-size: 0.875rem;
}

.formato-tabla th,
.formato-tabla td {
  font-size: 0.875rem;
  text-align: center;
}

.card-kardex th,
td {
  font-size: 0.8rem !important;
}
/* Ajustes para las tarjetas */

.card-unic {
  background-color: #f2f2f2;
  padding: 20px; /* Mantener un padding consistente */
  border-radius: 8px;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 10px;
}
/* Estilo para las tablas dentro de las tarjetas */

.formato-tabla {
  width: 100%;
  margin: 0;
  font-size: 0.8rem;
}

/* Ajustar el tamaño de la fuente en las tablas */

.formato-tabla th,
.formato-tabla td {
  font-size: 0.8rem; /* Tamaño de fuente ajustado */
}
.formato-tabla thead {
  background-color: #cfd8dc; /* Color de fondo para el encabezado */

  font-weight: bold; /* Negrita para el encabezado */
}
/* Ajustar márgenes entre tarjetas */

.mb-4,
.mb-6 {
  margin-bottom: 1.5rem; /* Aumentar el margen inferior para más espacio entre tarjetas */
}
/* Ajustes para el contenedor */
.container {
  padding: 20px; /* Añadir padding para que el contenido no esté pegado a los bordes */
}

.cards .card-unic {
  padding-bottom: 2rem; /* Mantener el espacio entre las tarjetas */
}

/* Ajustar el tamaño de la fuente en las tablas */
.formato-tabla th,
.formato-tabla td {
  font-size: 1rem; /* Aumentar el tamaño de la fuente para mejor legibilidad */
}

.formato-tabla thead {
  background-color: #cfd8dc; /* Color de fondo para el encabezado */
  font-weight: bold; /* Negrita para el encabezado */
}

/* Ajustar márgenes */
.mb-4,
.mb-6 {
  margin-bottom: 2rem; /* Aumentar el margen inferior para más espacio entre tarjetas */
}
hr {
  border: 2px solid rgb(168, 125, 45) !important;
}
.card-unic-materias {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 8px;
  width: 100% !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 10px;
  min-height: 300px;
  overflow: hidden;
}
.card-unic-materias {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 8px;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  margin: 10px !important;
  height: 700px !important;
  overflow: hidden;
}
/* Estilo para el contenedor de búsqueda */
.search-container {
  position: absolute; /* Posiciona el contenedor de búsqueda de forma absoluta */
  top: 20%; /* Ajusta la posición vertical */
  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Centra el contenedor */
  background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco con opacidad */
  border-radius: 10px; /* Bordes redondeados */
  padding: 10px; /* Espaciado interno reducido */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra más sutil */
  backdrop-filter: blur(8px); /* Efecto de desenfoque de fondo */
  z-index: 3; /* Asegúrate de que esté al frente */
  width: 300px; /* Ancho fijo para el contenedor */
}

/* Estilo para el contenedor de búsqueda */
.search-container {
  position: absolute; /* Posiciona el contenedor de búsqueda de forma absoluta */
  top: 20%; /* Ajusta la posición vertical */
  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Centra el contenedor */
  background-color: transparent; /* Fondo transparente */
  border-radius: 10px; /* Bordes redondeados */
  padding: 10px; /* Espaciado interno reducido */
  box-shadow: none; /* Sin sombra */
  backdrop-filter: blur(8px); /* Efecto de desenfoque de fondo */
  z-index: 3; /* Asegúrate de que esté al frente */
  width: 300px; /* Ancho fijo para el contenedor */
}

/* Estilo para el formulario dentro del contenedor */
.search-container form {
  display: flex; /* Usar flexbox para alinear los elementos */
}

/* Estilo para el input de búsqueda */
.search-container input {
  flex: 1; /* Permite que el input ocupe el espacio disponible */
  margin-right: 5px; /* Espacio entre el input y el botón */
  background-color: rgba(
    255,
    255,
    255,
    0.7
  ); /* Fondo blanco semi-transparente para el input */
  border: 1px solid rgba(255, 255, 255, 0.5); /* Borde semi-transparente */
  border-radius: 5px; /* Bordes redondeados para el input */
}

/* Estilo para el botón de búsqueda */
.search-container .btn {
  background-color: #b7950b; /* Color de fondo del botón */
  border: none; /* Sin borde */
  color: white; /* Color del texto */
  padding: 5px 10px; /* Espaciado interno del botón */
  font-size: 0.9rem; /* Tamaño de fuente más pequeño */
}

.search-container .btn:hover {
  background-color: #a68a0b; /* Color de fondo del botón al pasar el mouse */
}