/* Estilo general de la página de login */
body {
  font-family: 'Arial', sans-serif;
  background-color: white; /* Color de fondo claro */
  margin: 0;
  padding: 20px;
}

/* Estilo de los encabezados */
h1 {
  font-size: 25px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

h2 {
  font-size: 20px;
  color: #333;
  text-align: center;
  margin-bottom: 15px;
}

h3 {
  font-size:16px; /* Cambia el tamaño según lo que necesites */
  color: #07770d; /* Color del texto */
  margin-bottom: 15px; /* Espaciado inferior */
}

/* Estilo de los campos de entrada */
input[type="text"],
input[type="password"] {
  width: 92%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

/* Estilo del botón */
button {
  width: 5cm;
  padding: 5px;
  margin: 1px;
  background-color: #007BFF; /* Color azul */
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3; /* Color azul más oscuro */
}

/* Estilo de los enlaces (si los hay) */
a {
  text-decoration: none;
  color: #007BFF;
}

a:hover {
  text-decoration: underline;
}

label {
  margin-right: 7px;
  font-weight: bold;
  width: 200px;
  text-align: right;
  font-size: 0.9em;
}

/* Estilo para el logotipo */
.logo {
  position: absolute;
  left: 3px;
  top: 3px;
  width: auto; /* Mantiene las proporciones */
  height: 120px; /* Tamaño del logotipo */
}

.header-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Alinea verticalmente los elementos */
  min-height: 170px;
}

.header {
  position: relative;
  min-width: 100%;
  min-height: 60px;
}

.titulo {
  position: absolute;
  top: 85px;
  right: 20px;
  font-size: 1.6rem;
  font-weight: bold;
}
@media (min-width: 500px) {
  .titulo {
    top: 82px;
    font-size: 2rem;
  }
}

.nombreUsuario {
  font-weight: bold;
  position: absolute;
  right: 50px;
  top: 20px;
}

.container-col {
  display: flex; /* Activa la disposición horizontal */
  flex-direction: column;
  align-items: center; /* Alinea verticalmente los elementos */
}

.container-row {
  display: flex; /* Activa la disposición horizontal */
  flex-direction: row;
  align-items: center; /* Alinea verticalmente los elementos */
}

.flex {
  display: flex;
}

.w40 {
  min-width: 40vw;
}