/* Archivo: login-style.css */

/* Estilos generales y para el body */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4;
    margin: 0; /* Eliminar margen por defecto */
    padding: 0; /* Eliminar padding por defecto */
    display: flex;
    flex-direction: column; /* Apila los elementos hijos verticalmente */
    justify-content: flex-start; /* Alinea los elementos hijos al inicio (arriba) */
    align-items: center; /* Centra los elementos hijos horizontalmente */
    min-height: 100vh; /* Altura mínima igual a la altura de la ventana gráfica */
}

/* Estilos para el encabezado */

/* Estilo para el contenedor de la imagen superior */
.header-image-container {
    width: 100%;
    max-width: 2200px; /* Ancho máximo igual al del contenido principal */
    text-align: center; /* Centra la imagen si no ocupa todo el ancho */
    margin-bottom: 0; /* Sin espacio entre la imagen y la barra azul */
    padding: 0; /* Sin padding */
    background-color: white; /* Color de fondo del contenedor de imagen */
}
 /* Estilo para la imagen dentro del contenedor */
 .header-image-container img {
     display: block; /* Elimina el espacio extra debajo de la imagen */
     width: 100%; /* Hace que la imagen llene el ancho del contenedor */
     height: auto; /* Mantiene la relación de aspecto */
 }

/* Estilo para la barra azul (etiqueta <header>) */
header {
    width: 100%;
    max-width: 2200px; /* Ancho máximo igual al del contenido principal */
    text-align: center; /* Centra el texto dentro de la barra (aunque el flexbox de header-content lo controlará más) */
    margin-bottom: 20px; /* Espacio debajo de la barra azul y el formulario */
    padding: 10px 20px; /* Padding interno de la barra azul */
    background-color:rgb(15, 70, 201); /* Fondo azul con transparencia */
    color: white; /* Color del texto */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra debajo de la barra */
     min-height: 60px; /* Altura mínima de la barra azul */
}
/* Estilo para el CONTENEDOR INTERNO del encabezado (donde se aplica el flexbox real) */
 header .header-content {
      width: 100%;
      max-width: 2200px;
      display: flex; /* ESTE es el contenedor flex que separa titulo y botones */
      justify-content: space-between; /* Separa el titulo y los botones */
      align-items: center; /* Alinea verticalmente el titulo y los botones */
 }
/* Estilo para el contenedor del título dentro de la barra azul */
 .header-title-area {
     display: flex;
     align-items: center; /* Alinea el título verticalmente */
 }
/* Estilo para el contenedor de botones dentro de la barra azul */
 .header-buttons {
     display: flex;
     align-items: center; /* Alinea los botones verticalmente */
     gap: 10px; /* Espacio entre botones si hay mas de uno */
 }

 /* Estilo para el título dentro de la barra azul */
 header h1 {
     margin: 0; /* Elimina margen por defecto del h1 */
     color: white;
     font-size: 1.8em; /* Tamaño del título */
 }

/* Estilos para el contenedor del formulario de login */
.login-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 350px;
    text-align: center;
    margin-top: 20px;
}
.login-container h2 {
    margin-bottom: 20px;
    color: #0056b3;
}
.form-group {
    margin-bottom: 15px;
    text-align: left; /* Alinea etiquetas y campos a la izquierda */
}
.form-group label {
     display: block; /* Asegura que la etiqueta este en su propia linea */
     margin-bottom: 5px;
     font-weight: bold;
}
.btn-login {
    width: 100%;
    padding: 10px;
    font-size: 1em;
}
 .alert {
     margin-top: 15px;
     padding: 10px;
     border-radius: 5px;
     font-size: 0.9em;
 }
 .alert-danger {
     background-color: #f8d7da;
     color: #721c24;
     border-color: #f5c6cb;
 }

/* Estilos adicionales para el campo de contraseña con el icono */
.password-container {
    position: relative;
}
.password-toggle {
    position: absolute;
    right: 10px;
    top: 72%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d; /* Color gris para el icono */
}
.password-toggle:hover {
    color: #343a40; /* Color más oscuro al pasar el ratón */
}