/* =========================================================
   Pantallas de acceso: login, alta de usuario y cuenta.

   Son DEL COMERCIO, no de Alerce: color de acento y logo
   propios. Es la primera pantalla que ve el usuario y no tiene
   sentido que sea la única genérica.

   Hubo un intento de hacerlas superficie de marca Alerce, con
   --brand. Se revirtió, y --brand se borró del sistema: era
   una segunda copia del default del acento (ALERCE_BRAND y
   ALERCE_ACCENT_DEFAULT eran el mismo #2A6C8F). Sin
   personalizar, --accent ya da el azul de Alerce; con acento
   propio, se sobrescribe. Un token aparte no aportaba nada.

   La app móvil ya mostraba logo y color del comercio en SU
   login —ver /api/instancia/marca—, así que esto además
   alinea web con móvil.

   Se quitaron los dos gradientes (radial de fondo y lineal del
   botón) y las sombras con color de acento: el sistema de color
   no define ni gradientes ni sombras de color.
   ========================================================= */
@import 'main.css';
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: var(--font-family);
	background: var(--accent);
	min-height: 100vh;
	display: flex;
	/* align-items: center centra la tarjeta, pero cuando el contenido es MÁS
	   ALTO que la ventana un item centrado se desborda por arriba y esa parte
	   queda inalcanzable (el scroll no llega a offsets negativos). `safe`
	   degrada a flex-start justo en ese caso. Antes acá había además un
	   `overflow: hidden` que directamente impedía scrollear: en login.php no se
	   notaba porque entra en pantalla, pero register.php y change-password.php
	   son mucho más largos y dejaban el botón de submit fuera de alcance. */
	align-items: safe center;
	justify-content: center;
	color: var(--text-primary);
	position: relative;
	padding: 20px 0;
}
.login-container {
	width: 100%;
	display: flex;
	/* En columna porque register.php apila DOS tarjetas (el alta y la lista de
	   usuarios). En fila, que era el default, quedaban una al lado de la otra.
	   Con una sola tarjeta el resultado es idéntico al de antes. */
	flex-direction: column;
	gap: 24px;
	align-items: center;
	justify-content: center;
	padding: 20px;
	position: relative;
	z-index: 1;
}
/* LA tarjeta de estas tres pantallas. Había tres nombres para el mismo diseño:
   .login-card acá, .container como copia local en change-password.php, y
   .login-form en register.php — que no estaba definida en NINGÚN lado, así que
   esa página no tenía tarjeta y su texto caía sobre el fondo de color a 2.54:1.
   Ahora es una sola. */
.login-card {
	background: var(--surface-card);
	border-radius: 12px;
	box-shadow: var(--shadow-xl);
	padding: 40px;
	width: 100%;
	max-width: 400px;
	transition: box-shadow 0.3s ease;
}
/* Alta de usuario y cuenta tienen bastantes más campos que el login; con 400px
   quedaban apretadas. El login se queda con el ancho de siempre. */
.login-card--ancha {
	max-width: 560px;
}
/* Logo del comercio. Tope en LOS DOS ejes con object-fit: contain, porque el
   admin sube el logo que tenga: sin el tope de alto, uno vertical empujaba el
   formulario fuera de la pantalla.

   El <img> va con alt="" A PROPÓSITO: el nombre del comercio se muestra acá
   abajo como texto, así que ponerlo también en el alt haría que un lector de
   pantalla lo anuncie dos veces seguidas. */
.login-logo {
	display: block;
	margin: 0 auto 12px;
	max-width: 200px;
	max-height: 80px;
	object-fit: contain;
}
/* Nombre del comercio, debajo del logo. Es identidad, no el título de la
   pantalla: ese es el <h1> ("Iniciar sesión") y va aparte, porque si no cada
   pantalla tendría dos encabezados peleando por decir de qué se trata. */
.login-marca {
	margin: 0 0 24px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-secondary);
}
h1 {
	color: var(--text-primary);
	text-align: center;
	margin-bottom: 30px;
	font-size: 28px;
	font-weight: 600;
}
.alert {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 20px;
	font-weight: 500;
	text-align: center;
}
.alert-error {
	background-color: var(--danger-soft);
	color: var(--danger);
	border: 1px solid var(--danger);
}
input[type="text"],
input[type="password"],
input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border-strong);
	border-radius: 6px;
	font-size: 16px;
	font-family: inherit;
	transition: border-color 0.2s;
}
/* El foco NO se pisa acá: sale entero de main.css, que ya le da a
   input/select/textarea el borde --accent más el anillo --accent-border.
   Antes esta pantalla pisaba sólo el borde con --brand y dejaba el anillo en
   --accent, así que un comercio rojo veía borde azul con halo rosado. Al ser
   todo del comercio, los dos coinciden solos. */
button.btn-submit {
	width: 100%;
	padding: 12px 16px;
	margin-top: 20px;
	background: var(--accent);
	/* --on-accent y no un blanco fijo: se deriva del acento del comercio, así
	   que con un acento claro el texto se vuelve oscuro en vez de desaparecer. */
	color: var(--on-accent);
	border: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
/* Mismos estados que .btn-primary en main.css, para que el botón de acceso no
   sea el único de la app que no se oscurece al pasar por encima. */
button.btn-submit:hover,
button.btn-submit:focus-visible {
	background: var(--accent-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
button.btn-submit:active {
	background: var(--accent-active);
	transform: translateY(0);
}
@media (max-width: 480px) {
	.login-card {
		padding: 30px 20px;
	}
	h1 {
		font-size: 24px;
		margin-bottom: 20px;
	}
	input[type="text"],
	input[type="password"],
	input[type="email"] {
		padding: 10px 12px;
		font-size: 14px;
	}
}