@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap");


/* Reset de estilo básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Estilo del cuerpo de la página */
body {
  font-family: "Poppins", sans-serif;
  background-color: #f5f5f5; /* Color de fondo */
}

/* Contenedor principal de la sección */
.section {
  display: flex;
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
  height: 79.3vh; /* Altura completa de la ventana */
    overflow: hidden; /* Oculta cualquier desbordamiento */
}

.login-container {
  position:relative;
  display: flex;
  flex-direction: row;
  width: 90%;
  max-width: 1200px; /* Ancho máximo para pantallas grandes */
  background-color: #f8fafc;
  border-radius: 20px;
  box-shadow: 12px 12px 0px rgba(146, 24, 57, 1);
  overflow: hidden; /* Oculta cualquier desbordamiento */
}

/* Lado izquierdo del contenedor */
.left-side {
  flex: 1; /* Toma la mitad del espacio */
  display: flex;
  justify-content: center; /* Centra la imagen horizontalmente */
  align-items: center; /* Centra la imagen verticalmente */
}

.login-image {
  max-width: 100%; /* Ajusta la imagen al ancho del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  border-top-left-radius: 8px; /* Bordes redondeados */
  border-bottom-left-radius: 8px; /* Bordes redondeados */
}

/* Lado derecho del contenedor */
.right-side {
  flex: 1; /* Toma la mitad del espacio */
  padding: 40px; /* Espaciado interno */
}

/* Tarjeta de inicio de sesión */
.login-card {
  padding: 15px; /* Espaciado interno */
  border-radius: 8px; /* Bordes redondeados */
 
}

/* Estilos de los títulos */
.text-span {
  font-size: 15px;
  font-weight: 400;
  color: #000000; /* Verde oscuro */

}

.text-title{
  font-size: 28px;
  font-weight: 900;
  color: #a1845a; /* Marrón claro */
 
}

.text-description{
  font-size: 14px;
  color: #6d7075; /* Gris oscuro */

}

/* Estilos del formulario */
.login-form {
  margin-top: 20px; /* Espaciado superior */
}

/* Estilo de los campos del formulario */
.form-group {
  margin-bottom: 15px; /* Espaciado inferior */
}

label {
  font-weight: 500; /* Texto en negrita */
  color: #3f3f3f;
  display: block; /* Se asegura de que el label ocupe el ancho completo */
  margin-bottom: 5px; /* Espaciado inferior */
}

/* Estilo de los inputs */
input[type="text"],
input[type="password"] {
  width: 100%; /* Ancho completo */
  padding: 5px; /* Espaciado interno */
  border: 1px solid #ccc; /* Borde */
  border-radius: 4px; /* Bordes redondeados */
  font-size: 13PX;
}

/* Estilo para los mensajes de error */
.invalid-feedback {
  display: flex; /* Alineación horizontal para el icono y el texto */
  align-items: center; /* Centra verticalmente el icono */
  background-color: #f8d7da; /* Fondo de alerta suave */
  color: #721c24; /* Color del texto de error */
  padding: 10px; /* Espaciado interno */
  border: 1px solid #f5c6cb; /* Borde de color alerta */
  border-radius: 4px; /* Bordes redondeados */
  font-size: 13px;
  margin-top: 5px; /* Espaciado superior */
}

/* Icono de error */
.invalid-feedback i {
  margin-right: 10px; /* Espaciado a la derecha del icono */
  padding: 10PX;
  font-size: 13PX; /* Tamaño del icono */
  color: #721c24; /* Color del icono de error */
}

/* Ejemplo de icono */
.invalid-feedback:before {
  content: "\26A0"; /* Código de carácter para el icono de advertencia (⚠) */
  font-size: 13px; /* Tamaño del icono */
}

/* Estilos para las opciones adicionales */
.form-options {
  display: flex; /* Usar flexbox para alinear elementos horizontalmente */
  justify-content: space-between; /* Espaciado entre los elementos */
  margin-top: 20px; /* Margen superior para separación */
  font-size: 12px; /* Tamaño de fuente ajustado */
  color: #6d7075;
}

/* Estilos para el contenedor del checkbox */
.checkbox-container {
  display: flex; /* Usar flexbox para alinear el checkbox y la etiqueta */
  align-items: center; /* Centrar verticalmente el contenido */
}

/* Estilos para el checkbox */
.checkbox-container input[type="checkbox"] {
  width: 20px; /* Tamaño del checkbox */
  height: 20px; /* Tamaño del checkbox */
  margin-right: 10px; /* Espacio entre el checkbox y la etiqueta */
}

/* Estilos para el enlace de recuperación de contraseña */
.recover-link {
  text-decoration: none; /* Quitar subrayado del enlace */
  color: #A1845A; /* Color del texto (verde) */
  font-weight: 600; /* Negrita para resaltar el texto */
  display: flex; /* Usar flexbox para alinear el icono y el texto */
  align-items: center; /* Centrar verticalmente */
  font-size: 12px;
}

/* Cambios de estilo al pasar el cursor sobre el enlace */
.recover-link:hover {
  text-decoration: underline; /* Subrayar el texto al pasar el cursor */
  color: #388E3C; /* Color más oscuro al pasar el cursor */
}



/* Estilo para el botón de inicio de sesión */
.btn-login {
  background-color: #006e63; /* Verde oscuro */
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  transition: background-color 0.3s ease;
  margin-top: 15px;
  font-family: "Poppins", sans-serif;
  width: 100%;
}

/* Cambios de estilo al pasar el mouse sobre el botón */
.btn-login:hover {
  background-color: #004d45; /* Verde más oscuro en hover */
}

/* Estilos para los enlaces adicionales */
.extra-links {
  margin-top: 20px; /* Margen superior para separación */
  font-size: 0.9em; /* Tamaño de fuente ajustado */
}

/* Estilos para cada elemento de enlace */
.link-item {
  display: flex; /* Usar flexbox para alinear el icono y el texto */
  align-items: center; /* Centrar verticalmente el contenido */
  margin-bottom: 10px; /* Espacio entre los enlaces */
}

/* Estilos para el icono */
.link-item i {
  margin-right: 8px; /* Espacio entre el icono y el texto */
  font-size: 13PX; /* Tamaño del icono */
  color: #4CAF50; /* Color del icono */
}

/* Estilos para los enlaces */
.extra-links a {
  text-decoration: none; /* Quitar subrayado del enlace */
  color: #A1845A; /* Color del enlace */
  font-weight: bold; /* Negrita para resaltar el texto */
  margin-left: 5px; /* Espacio entre el texto y el enlace */
  font-size: 13PX; /* Tamaño del icono */
}

/* Cambios de estilo al pasar el cursor sobre los enlaces */
.extra-links a:hover {
  text-decoration: underline; /* Subrayar el texto al pasar el cursor */
  color: #A1845A; /* Color más oscuro al pasar el cursor */
  font-size: 13PX; /* Tamaño del icono */
}

/* Estilo del pie de página */
.extra-links{
  font-weight: 300;
  color: #777; /* Color de texto gris */
  font-size: 13PX; /* Tamaño del icono */
}

/* Estilos Responsivos */

/* Estilos generales para el header */
.navbar {
  background-color: #f8fafc; /* Color de fondo principal */
  padding: 0px 20px; /* Espaciado interno para darle más espacio al contenido */
  display: flex;
  justify-content: space-between; /* Alinear los elementos izquierda y derecha */
  align-items: center; /* Centrar verticalmente los elementos */
}

/* Estilos para el contenedor */
.container-fluid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Estilo para la sección izquierda (logo) */
.navbar-left .logo {
  max-height: 60px; /* Ajusta el tamaño máximo del logo */
  width: auto;
}

/* Estilo para la sección derecha (nombre del sistema) */
.navbar-right .system-name {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  color: #921839; /* Color de texto blanco para buen contraste */
  font-weight: 800; /* Grosor de la fuente */
}

/* Estilos generales para el footer */
.footer {
  background-color: #fcfcfc; /* Color de fondo gris */
  padding: 5px 10px; /* Espaciado interno */
  font-family: "Poppins", sans-serif;
  text-align: left;
  padding-bottom: none;
}

.footer-content {
  display: flex;
  justify-content: space-between; /* Distribuye los elementos a los lados */
  align-items: flex-start;
  flex-wrap: wrap; /* Permitir que los elementos se muevan a la siguiente fila en pantallas pequeñas */
}

.footer .txt-froo {
  color: #000000; /* Color marrón para los títulos */
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  padding-top: 10px;
}

/* Sección de ubicación */
.footer .location p {
  margin: 0;
  line-height: 14px; /* Aumenta el espacio entre líneas para mejor legibilidad */
  color: #000000; /* Texto blanco para contraste */
  font-size: 11px;
}

/* Sección de enlaces */
.footer .links a {
  margin: 0;
  line-height: 14px; /* Aumenta el espacio entre líneas para mejor legibilidad */
  color: #000000; /* Texto blanco para contraste */
  font-size: 12px;
  text-decoration: none; /* Sin subrayado */
}

.footer .links a:hover {
  color: #a1845a; /* Color marrón para el hover */
}

/* Sección de copyright */
.footer-bottom {
  margin-bottom: none;
  padding-top: 4px;
  text-align: center; /* Alineación centrada */
  margin-top: 5px;
  font-size: 14px;
  color: #ffffff;
  width: 100%;
  background-color: #921839;
}


/* Para tabletas y dispositivos medianos */
@media (max-width: 768px) {
  .login-container {
    flex-direction: column; /* Disposición vertical */
    width: 95%; /* Ancho más ajustado */
  }

  .right-side {
    padding: 30px; /* Reducir el padding en tabletas */
  }

  .text-title {
    font-size: 28px; /* Reducir el tamaño de los títulos */
  }

  .text-description {
    font-size: 14px; /* Reducir el tamaño de la descripción */
  }
}

/* Para dispositivos móviles */
@media (max-width: 480px) {
  .login-container {
    flex-direction: column; /* Disposición vertical */
    width: 100%; /* Ancho completo */
    border-radius: 0; /* Sin bordes redondeados */
    box-shadow: none; /* Sin sombra */
  }

  .right-side {
    padding: 20px; /* Reducir el padding en móviles */
  }

  .text-title {
    font-size: 24px; /* Reducir el tamaño de los títulos */
  }

  .text-description {
    font-size: 13px; /* Reducir el tamaño de la descripción */
  }

  input[type="text"],
  input[type="password"] {
    font-size: 14px; /* Reducir el tamaño del texto */
  }

  .login-image {
    display: none; /* Ocultar la imagen en dispositivos muy pequeños */
  }
}