/* Estilos de la pantalla de Login */

/* El degradado va de la superficie normal a la hundida, no de la elevada a la
   normal como antes. El motivo: la tarjeta ahora es superficie ELEVADA
   (verde-700), que era justo el tono con el que arrancaba el degradado — la
   tarjeta se habría fundido con el fondo en la parte de arriba. */
.login-contenedor {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--panel-espacio-4);
  background: radial-gradient(circle at top, var(--panel-superficie), var(--panel-superficie-hundida));
}

.login-tarjeta {
  background-color: var(--panel-superficie-elevada);
  color: var(--panel-texto);
  width: 100%;
  max-width: 420px;
  padding: var(--panel-espacio-8) var(--panel-espacio-6);
  border: 1px solid var(--panel-borde-control);
  border-radius: 12px;
  box-shadow: var(--panel-sombra-modal);
  text-align: center;
  animation: fadeIn 0.3s ease-out;
}

.login-logo {
  max-width: 140px;
  height: auto;
  margin: 0 auto var(--panel-espacio-4) auto;
  display: block;
}

/* Iba en verde-800, que ahora es un fondo: sobre la tarjeta elevada el título
   habría quedado casi invisible. */
.login-titulo {
  font-size: var(--panel-texto-xl);
  font-weight: 700;
  color: var(--panel-texto);
  margin-bottom: var(--panel-espacio-1);
}

.login-subtitulo {
  font-size: var(--panel-texto-sm);
  color: var(--panel-texto-tenue);
  margin-bottom: var(--panel-espacio-6);
}

/* La tarjeta centra su contenido para el logo y los títulos, pero un formulario
   con las etiquetas centradas se lee mal: el formulario vuelve a alinear a la
   izquierda. Los campos en sí los estila `.campo-input` en panel.css. */
.login-form {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.login-error {
  background-color: var(--panel-error-fondo);
  color: var(--panel-error-tinta);
  border: 1px solid var(--panel-error-linea);
  padding: var(--panel-espacio-3);
  border-radius: var(--panel-radio);
  font-size: var(--panel-texto-sm);
  font-weight: 600;
  margin-bottom: var(--panel-espacio-4);
  display: flex;
  align-items: center;
  gap: var(--panel-espacio-2);
  text-align: left;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}