@font-face {
  font-family: "Lexend";
  src: url("../fonts/Lexend-Medium.ttf") format("truetype"); /* Ajusta la ruta según la ubicación real de tu archivo .ttf */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Añade esta línea */
  font-display: optional; /* Reduce el impacto en el tiempo de carga */
}

:root {
  --primary-color: #007bff;
  --primary-hover-color: #0056b3;
  --background-light: #eaeff9;
  --background-dark: powderblue;
}

html {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Lexend", sans-serif; /* Utiliza la fuente Lexend como primera opción y sans-serif como respaldo */
  flex-direction: column;

  justify-content: center;
  align-items: flex-start;
  margin: 0;
  background-color: #f4f4f4;
}
.title-container {
  /* Si necesitas ajustar el ancho o la alineación del título, hazlo aquí */
  flex: 1; /* Esto permite que el contenedor del título tome espacio, ajusta según necesidad */
  /* Añade margen o padding si es necesario para alinear correctamente el contenido */
}

.container {
  display: flex;
  flex-direction: row; /* Esto asegura que los elementos internos se alineen en fila */
  justify-content: space-around; /* Modifica según lo necesites para el espaciado entre elementos */
  align-items: flex-start; /* Alinea los elementos al inicio de su contenedor */
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
  width: 80%;
  max-width: 960px;
  margin: 2rem auto; /* Centra el contenedor en la página */
}

form {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
input,
textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
textarea {
  resize: vertical; /* Allow vertical resize */
  min-height: 100px;
}
button {
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: var(--primary-color);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: var(--primary-hover-color);
}
label {
  margin-bottom: 5px;
}

label[for="fromName"]::before {
  content: ""; /* Necesario para generar el pseudoelemento */
  display: block; /* Hace que se comporte como un bloque y pueda tener ancho y alto */
  height: 2px; /* Espesor de la línea */
  background-color: grey; /* Color de la línea */
  width: 100%; /* Ancho de la línea */
  margin: 20px 0; /* Espacio antes y después de la línea */
}

/* Personaliza toda la barra de desplazamiento */
::-webkit-scrollbar {
  width: 5px; /* Controla el ancho de la barra de desplazamiento vertical */
  height: 12px; /* Controla la altura de la barra de desplazamiento horizontal */
}

/* Personaliza el fondo de la barra de desplazamiento (la pista) */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* Cambia al color de fondo deseado */
}

/* Personaliza el manejador de la barra de desplazamiento (la parte que se mueve) */
::-webkit-scrollbar-thumb {
  background: #888; /* Cambia al color deseado */
}

/* Personaliza el estado hover del manejador de la barra de desplazamiento */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* Cambia al color deseado para el hover */
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(
    135deg,
    var(--background-light),
    var(--background-dark)
  );
  animation: gradientAnimation 10s linear infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

.logout-button {
  position: absolute; /* Hace que el botón permanezca fijo en la pantalla */
  top: 10px; /* Distancia desde la parte superior de la pantalla */
  right: 20px; /* Distancia desde la parte derecha de la pantalla */
  z-index: 1000; /* Asegura que el botón se muestre sobre otros elementos */
}

.logout-button form {
  padding: 5px;
  margin: 0; /* Elimina los márgenes por defecto del formulario */
}

.logout-button button {
  background-color: #ff4d4d; /* Color de fondo del botón */
  color: white; /* Color del texto */
  padding: 10px 20px; /* Espaciado interno del botón */
  border-radius: 4px; /* Bordes redondeados */
  border: none; /* Elimina el borde por defecto */
  cursor: pointer; /* Cambia el cursor a una mano cuando se pasa sobre el botón */
  transition: background-color 0.3s ease; /* Suaviza la transición de color de fondo */
}

.logout-button button:hover {
  background-color: #cc0000; /* Color de fondo cuando se pasa el mouse sobre el botón */
}

@media (max-width: 480px) {
  .container {
    align-items: center; /* Centra los elementos */
  }
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 0; /* Removido el padding aquí para permitir diseño específico en cabecera, cuerpo y pie */
  border: 1px solid #888;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  border-radius: 8px; /* Bordes redondeados */
}

.modal-header,
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.modal-body {
  padding: 2px 16px;
}

.close-button {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: right; /* Alinea el botón "OK" a la derecha */
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

#ok-button {
  background-color: #4caf50; /* Color del botón */
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

#ok-button:hover {
  background-color: #45a049;
}

/* Asegúrate de que main ocupa el espacio disponible */
main {
  margin-top: 5rem;
  flex: 1;
}

/* Ajustes para el footer */
footer {
  width: 100%;
  padding: 20px 0;
  text-align: center;
  color: grey;
  position: absolute;
  left: 0;
}