/* ==========================================================================
   CONTENEDOR DE FORMULARIO (TARJETA)
   Caja principal que envuelve los formularios de la web (Login, Registro, etc.)
   ========================================================================== */
.container {
  background: var(--blanco);          /* Usa el fondo blanco puro guardado en tus variables */
  padding: 30px;                      /* Genera un colchón interno para descolapsar los elementos */
  border-radius: 15px;                /* Suaviza las esquinas con un acabado redondeado moderno */
  width: 100%;                        /* Permite que la tarjeta sea elástica y se adapte a móviles */
  max-width: 400px;                   /* Fija una anchura tope para que no se estire demasiado en PC */
  margin: 50px auto;                  /* Margen de 50px arriba/abajo y centrado horizontal automático */
  box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Aplica una sombra muy sutil que levanta la tarjeta del fondo */
  border: 1px solid #eef2f3;          /* Contorno perimetral fino para delimitar la estructura */
}

/* --- Títulos dentro del formulario --- */
.container h2, .container h3 {
  text-align: center;                 /* Centra el texto del encabezado */
  color: var(--azul-oscuro);          /* Cambiado al azul corporativo oscuro para homogeneizar el diseño */
  margin-bottom: 25px;                /* Deja un espacio de separación prudente con el primer campo */
  font-weight: 800;                   /* Le da el grosor máximo a la letra para destacar la acción */
}

/* ==========================================================================
   CAMPOS DE ENTRADA (INPUTS Y TEXTAREA)
   ========================================================================== */
.container input[type="text"], 
.container input[type="email"], 
.container input[type="password"],
.container textarea {
  display: block;                     /* Rompe el flujo en línea y hace que cada input tome su propio renglón */
  width: 100%;                        /* Expande el ancho del campo al 100% de la tarjeta */
  padding: 12px 15px;                 /* Relleno interior cómodo para escribir sin rozar los bordes */
  margin-bottom: 20px;                /* Distancia uniforme de separación hacia abajo entre cajas de texto */
  border: 2px solid #f1f5f9;          /* Marco gris claro neutral por defecto */
  border-radius: 10px;                /* Redondeado armónico a juego con las esquinas de la tarjeta */
  font-size: 15px;                    /* Dimensión de lectura equilibrada para los caracteres */
  box-sizing: border-box;             /* Previene que los paddings rompan el tamaño máximo del contenedor */
  transition: all 0.3s ease;          /* Suaviza las animaciones de color y sombras al clicar */
  background-color: #f8fafc;          /* Fondo gris muy tenue para dar sensación de profundidad */
}

/* --- Estado de enfoque (Focus) cuando el usuario va a escribir --- */
.container input:focus, .container textarea:focus {
  outline: none;                      /* Remueve el aro azul brillante por defecto que incrustan los navegadores */
  border-color: var(--azul-oscuro);   /* Transiciona el borde hacia tu azul corporativo */
  background-color: var(--blanco);    /* Aclara el fondo a blanco puro para mejorar la visualización */
  box-shadow: 0 0 8px rgba(35, 47, 62, 0.1); /* Destello azulado muy ligero alrededor de la caja */
}

/* ==========================================================================
   BOTÓN DE ENVÍO (SUBMIT)
   ========================================================================== */
.container input[type="submit"] {
  width: 100%;                        /* Estira el botón para abarcar el ancho completo del formulario */
  padding: 14px;                      /* Amplía el área táctil, ideal para pulsaciones cómodas en móviles */
  background-color: var(--naranja-amz); /* Modificado al naranja oficial de tus llamadas a la acción */
  color: var(--texto-oscuro);         /* Texto oscuro para garantizar un contraste accesible sobre el naranja */
  border: 1px solid #fca22a;          /* Borde naranja de soporte para dar solidez */
  border-radius: 10px;                /* Mantiene la consistencia de diseño con bordes suavizados */
  font-weight: bold;                  /* Resalta el texto de envío en negrita */
  font-size: 16px;                    /* Sube un punto la fuente para que se lea con claridad */
  cursor: pointer;                    /* Activa la mano interactiva del ratón */
  transition: all 0.3s ease;          /* Aplica interpolación fluida para los efectos hover */
  box-shadow: 0 4px 12px rgba(254, 189, 105, 0.2); /* Sombra base coloreada en sintonía con el naranja */
  margin-top: 10px;                   /* Empuja el botón ligeramente hacia abajo separándolo del input anterior */
}

/* --- Efecto dinámico al pasar el cursor por el botón submit --- */
.container input[type="submit"]:hover {
  background-color: #f3a847;          /* Aplica la misma variante de naranja oscuro que usas en el Hero */
  transform: translateY(-2px);        /* Provoca una elevación sutil simulando un botón flotante */
  box-shadow: 0 6px 15px rgba(254, 189, 105, 0.35); /* Amplifica la proyección de la sombra */
}

/* ==========================================================================
   BOTONES DE ALTERNANCIA (INTERRUPTOR LOGIN / REGISTRO)
   ========================================================================== */
#btnRegistro, #btnLogin {
  padding: 10px 20px;                 /* Formato horizontal equilibrado */
  border-radius: 20px;                /* Esquinas totalmente redondeadas en formato píldora */
  border: 2px solid var(--azul-oscuro); /* Enmarca el botón con el azul de cabecera */
  cursor: pointer;                    /* Puntero de mano para indicar que es un elemento accionable */
  background-color: transparent;      /* Mantiene un fondo limpio y transparente en estado neutro */
  color: var(--azul-oscuro);          /* Tinta el texto con el azul identitario */
  font-weight: bold;                  /* Tipografía robusta */
  font-size: 13px;                    /* Escala sutilmente reducida para controles secundarios */
  transition: all 0.3s;               /* Suaviza los cambios cromáticos intermedios */
  margin: 5px;                        /* Margen de seguridad perimetral para que no se solapen */
}

/* --- Variación interactiva y estado asignado por JavaScript --- */
#btnRegistro.activo, #btnLogin.activo,
#btnRegistro:hover, #btnLogin:hover {
  background-color: var(--azul-oscuro); /* El fondo se rellena por completo con el azul corporativo */
  color: var(--blanco);               /* Invierte el color de las letras a blanco para que sea legible */
}

/* ==========================================================================
   ETIQUETAS DE TEXTO INFORMATIVO (LABELS)
   ========================================================================== */
label {
  display: block;                     /* Posiciona la etiqueta encima del input asignado */
  margin-bottom: 8px;                 /* Margen inferior para que no quede pegada a la caja de texto */
  font-size: 14px;                    /* Fuente clara y legible */
  font-weight: 600;                   /* Grosor seminegrita para estructurar la jerarquía visual */
  color: #64748b;                     /* Tono gris pizarra suave para mantener la elegancia sin saturar */
}

/* ==========================================================================
   ALERTAS Y MENSAJES DE ERROR / ÉXITO (SISTEMA DE FEEDBACK)
   Estilos añadidos para dar respuesta visual en el proceso de autenticación
   ========================================================================== */
/* --- Bloque de caja de error estilo Amazon (Fallo de Login) --- */
.alerta-error {
  background-color: #fdf0f0;          /* Fondo rosáceo/rojizo muy suave para no saturar la vista */
  border: 1px solid #d51a1a;          /* Marco fino de color rojo carmesí de advertencia */
  color: #b12704;                     /* Texto en color rojo oscuro característico de errores de Amazon */
  padding: 12px;                      /* Colchón interno acolchado para la lectura */
  border-radius: 8px;                 /* Suavizado leve en los cantos de la caja de error */
  font-size: 14px;                    /* Fuente compacta para optimizar el espacio de la alerta */
  font-weight: 600;                   /* Grosor intermedio para asentar la advertencia */
  margin-bottom: 20px;                /* Distancia prudente para empujar las cajas de inputs hacia abajo */
  text-align: left;                   /* Alinea el texto a la izquierda para un orden de lectura natural */
  display: flex;                      /* Usa flexbox para alinear el icono con el texto */
  align-items: center;                /* Centra verticalmente el icono de advertencia con el mensaje */
  gap: 8px;                           /* Separación exacta entre el emoji/icono y las letras */
}

/* --- Texto plano de confirmación exitosa (Registro correcto) --- */
.msg-exito {
  display: block;                     /* Genera su propio bloque independiente */
  color: #2b7a5a;                     /* Tono verde esmeralda saludable */
  font-weight: 600;                   /* Resalta el texto en seminegrita */
  margin-bottom: 15px;                /* Separación inferior con respecto a los campos de texto */
  font-size: 14px;                    /* Tamaño equilibrado */
  text-align: center;                 /* Centra el mensaje en la pantalla */
}

/* --- Texto plano para fallos directos en el proceso de registro --- */
.msg-error {
  display: block;                     /* Rompe el flujo para estructurarse sobre su propia línea */
  color: #b12704;                     /* Aplica el tono granate de advertencia principal */
  font-weight: 600;                   /* Grosor seminegrita para alertar al usuario */
  margin-bottom: 15px;                /* Despegue inferior controlado */
  font-size: 14px;                    /* Tipografía nítida */
  text-align: center;                 /* Centra el texto */
}