@import 'common.css';
@import 'colores.css';
/* ===================================== */
/* 1. MOBILE FIRST (0px a ~767px)       */
/* ===================================== */

/* Estilos Globales y Fondo */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: var(--crema-casi-blanco);
  color: var(--gris-oscuro);
  display: flex;
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: flex-start; /* Alinea al inicio (arriba) por defecto */
  min-height: 100vh;
}

/* --- Contenedor Principal de Login --- */
#divcontenedorlogin {
  width: 90%; /* Ocupa la mayor parte del ancho en móvil */
  max-width: 400px; /* Ancho máximo para que no sea muy grande */
  padding: 1.5rem;
  margin-top: 3rem; /* Espacio desde la parte superior */
  background-color: white; /* El contenedor se destaca en blanco */
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  text-align: center;
}

/* --- Encabezado y Logo --- */
#he1encabezado {
  background-color: var(--rojo-oscuro);
  color: var(--amarillo-ocre);
  margin: -1.5rem -1.5rem 1.5rem -1.5rem; /* Extiende el fondo fuera del padding */
  padding: 1rem 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 1.8rem;
}

#gallo {
  width: 100px; /* Tamaño del logo ajustado para móvil */
  height: auto;
  margin-bottom: 1.5rem;
  border: 3px solid var(--amarillo-ocre);
  border-radius: 5%; /* Opcional: Borde circular para el logo */
}

.cabeceralogin {
  color: var(--gris-oscuro);
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--rojo-vibrante);
  padding-bottom: 0.5rem;
}

/* --- Formulario y Campos --- */
.login-form {
  display: flex;
  flex-direction: column;
}

.datos-user {
  display: flex;
  flex-direction: column; /* Apila etiqueta e input */
  margin-bottom: 1rem;
  text-align: left;
}

/* --- Botón --- */
.div-boton {
  margin-top: 0.5rem;
}
.boton1 {
  height: 3rem;
}
/* ===================================== */
/* 2. TABLET Y ESCRITORIO (a partir de 600px) */
/* ===================================== */
@media (min-width: 600px) {
  /* Centrado Completo en la Pantalla (Viewport) */
  body {
    align-items: center; /* Centra el contenido verticalmente */
  }

  /* Reducir el tamaño máximo del contenedor para que sea un elemento "flotante" */
  #divcontenedorlogin {
    max-width: 450px;
    margin-top: 0; /* Ya no necesitamos el margen superior fijo */
    padding: 2rem;
  }

  #he1encabezado {
    font-size: 2.2rem;
  }

  .cabeceralogin {
    font-size: 1.4rem;
  }
}