/*
   ==========================================================================
   COMPONENTE: Login de usuarios del sitio (/ingresar)
   Pantalla de acceso del sitio público — una sola tarjeta centrada con un
   campo (el DNI). Ver CLAUDE.md → "Usuarios del sitio: login por DNI".

   Es el hermano claro de admin-login.css: misma estructura (shell centrado
   + tarjeta + error + form + link de vuelta), pero sobre el fondo del sitio
   público (--color-bg-main) en vez del ink del panel, y con el titular en
   --font-display como el resto de las páginas públicas. Autocontenido a
   propósito: el patrón .form-group está duplicado acá igual que en
   admin-login.css/checkout.css, esta vista no carga ninguno de esos.

   Mismo criterio que admin-login.css: no lleva JS de validación propio.
   El único chequeo que importa (¿existe ese DNI?, ¿está activo?) es
   responsabilidad de Auth::intentarIngreso(), y es un <form> real.
   ========================================================================== */
body.customer-login-page {
  background-color: var(--color-bg-main);
}

.customer-login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.customer-login-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--color-bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 2rem 1.5rem;
}

.customer-login-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.75rem;
  text-decoration: none;
}
.customer-login-brand img { width: 2.15rem; height: 2.15rem; flex: none; object-fit: contain; }
.customer-login-brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-primary);
  line-height: 1.2;
}
.customer-login-brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.customer-login-card h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-text-main);
  margin-bottom: 0.4rem;
}

.customer-login-lead {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.customer-login-error {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background-color: rgba(166, 64, 47, 0.1);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  color: var(--color-danger);
  font-size: 0.85rem;
  line-height: 1.4;
}
.customer-login-error svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: 0.05rem; }

.customer-login-form {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}

.form-group { display: grid; gap: 0.4rem; }
.form-group label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.form-group input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  transition: border-color 0.18s ease;
  width: 100%;
}
.form-group input::placeholder { color: var(--color-text-soft); }
.form-group input:focus { outline: none; border-color: var(--color-accent); }
.form-group .field-hint { font-size: 0.78rem; color: var(--color-text-soft); }

/* Aclaración de cómo se consigue una cuenta: no hay registro propio, la da
   de alta el vivero desde el panel. Es información real de cómo funciona
   esta pantalla, no un disclaimer de prototipo (mismo criterio que los
   párrafos de /admin/plantas y /admin/clientes). */
.customer-login-note {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.customer-login-note a { color: var(--color-accent); }

.customer-login-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}
.customer-login-back svg { width: 1rem; height: 1rem; flex: none; }
.customer-login-back:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Desde tablet/escritorio: la tarjeta tiene más aire alrededor del texto.
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .customer-login-card { padding: 2.5rem; }
}