/* ===============================
   EAGLE - Estilos de Login
   Paleta: crema (#FFF8E7) + granate (#800000)
   =============================== */

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: #FFF8E7;
  margin: 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.login-box {
  background: white;
  border: 2px solid #800000;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 40px 50px;
  width: 360px;
  text-align: center;
  transition: 0.3s;
}

.login-box:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.logo {
  font-size: 24px;
  color: #800000;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

h2 {
  color: #800000;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

label {
  display: block;
  text-align: left;
  margin-bottom: 10px;
  color: #800000;
  font-weight: 600;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #800000;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 15px;
  transition: 0.2s;
}

input:focus {
  border-color: #a52a2a;
  outline: none;
  box-shadow: 0 0 4px rgba(165, 42, 42, 0.4);
}

button {
  background-color: #800000;
  color: #FFF8E7;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: 0.3s;
}

button:hover {
  background-color: #a52a2a;
}

.error {
  color: #b00000;
  margin-bottom: 10px;
  font-weight: bold;
  background: #ffe6e6;
  border: 1px solid #b00000;
  border-radius: 4px;
  padding: 6px;
}

logo {
  font-size: 24px;
  color: #800000;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 2px;

  /* NUEVAS REGLAS: Se eliminan o modifican estas reglas
     ya que la imagen puede comportarse diferente.
     Para este caso, vamos a mantenerlas y solo añadir la imagen */
}

/* 🖼️ ESTILOS AÑADIDOS PARA LA IMAGEN 🖼️ */
.logo img {
  /* 1. Define el tamaño máximo. El cuadro de login tiene un ancho de 360px.
        Probemos con un ancho de 120px para el logo. */
  width: 120px;
  height: auto;
  /* Mantiene la proporción para que no se vea deformada */

  /* 2. Sobrescribir estilos de texto si causan problemas.
        Aseguramos que la imagen se comporte como un bloque para centrarla. */
  display: block;
  margin: 0 auto;
}

/* ===============================
   ESTILOS ESPECÍFICOS PARA EL LOGO DEL HEADER
   =============================== */

/* 1. Define el contenedor del logo en la barra superior */
.logo-title {
  /* Si solo contiene la imagen, puedes usar flex para alinear si es necesario. */
  /* Aquí lo centramos verticalmente en la barra (si la barra tiene altura fija) */
  display: flex;
  align-items: center;
  height: 100%;
  /* Opcional, si la top-bar usa grid o tiene altura fija */
}

/* 2. Reglas para la imagen (la clase que le pusiste: .logo-eagle) */
.logo-eagle {
  /* Define una altura fija que se ajuste a tu barra de encabezado.
     Ajusta este valor (ej. 50px) para que se vea bien. */
  height: 100px;
  width: auto;
  /* Mantiene la proporción de la imagen */

  /* Añade un margen a la derecha si vas a poner texto al lado,
     o a la izquierda para separarlo del borde. */
  margin-right: 15px;
  margin-left: 20px;

  /* Asegura que no haya espacios extraños */
  display: block;
}

/* Opcional: Ajusta el padding de la barra superior si la imagen es muy grande */
/*.top-bar {
  /* padding-top: 5px; */
/* padding-bottom: 5px; */
/*}*/