/* ============================================================
 * TO Auth — estilos del login y recuperación
 * Variables arriba: cambiá colores/espaciados desde acá.
 * ============================================================ */

.to-auth,
.to-auth * { box-sizing: border-box; }

.to-auth {
	--to-blue:       #005DAC;
	--to-blue-dark:  #004a8a;
	--to-text:       #1f2937;
	--to-muted:      #6b7280;
	--to-border:     #e5e7eb;
	--to-bg-input:   #f8fafc;
	--to-error:      #dc2626;
	--to-success:    #047857;

	max-width: 440px;
	margin: 0 auto;
	color: var(--to-text);
	font-family: inherit;
}

.to-auth.is-hidden { display: none; }

.to-auth__title {
	margin: 0 0 1.25rem;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
}

.to-auth__desc {
	margin: 0 0 1.25rem;
	color: var(--to-muted);
	font-size: .95rem;
}

/* ---- Campos ---- */
.to-field {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin-bottom: 1rem;
}

.to-field label {
	font-size: .95rem;
	font-weight: 600;
}

.to-field input[type="email"],
.to-field input[type="password"],
.to-field input[type="text"] {
	width: 100%;
	padding: .8rem 1rem;
	border: 1px solid var(--to-border);
	border-radius: 10px;
	background: var(--to-bg-input);
	color: var(--to-text);
	font-size: 1rem;
	transition: border-color .15s, box-shadow .15s;
}

.to-field input:focus {
	outline: none;
	border-color: var(--to-blue);
	box-shadow: 0 0 0 3px rgba(0, 93, 172, .15);
}

.to-field input.is-invalid {
	border-color: var(--to-error);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

/* ---- Ver contraseña ---- */
.to-pass-wrap { position: relative; }
.to-pass-wrap input { padding-right: 3rem; }

.to-toggle {
	position: absolute;
	top: 50%;
	right: .7rem;
	transform: translateY(-50%);
	display: inline-flex;
	padding: .3rem;
	border: none;
	background: none;
	color: var(--to-muted);
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s, color .15s;
}
.to-toggle:hover,
.to-toggle.is-on { opacity: 1; color: var(--to-text); }

/* ---- Fila recordar / olvidaste ---- */
.to-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin: .25rem 0 1.4rem;
}

.to-check {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .95rem;
	cursor: pointer;
}
.to-check input {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--to-blue);
	cursor: pointer;
}

.to-link {
	color: var(--to-blue);
	font-size: .95rem;
	font-weight: 500;
	text-decoration: none;
	transition: color .15s;
}
.to-link:hover { color: var(--to-muted); text-decoration: underline; }
.to-back { display: inline-block; margin-top: 1rem; }

/* ---- Botón ---- */
.to-btn {
	width: 100%;
	padding: .9rem 1rem;
	border: none;
	border-radius: 999px;
	background: var(--to-blue);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}
.to-btn:hover { background: var(--to-blue-dark); }
.to-btn:disabled { opacity: .7; cursor: default; }

/* ---- Mensajes ---- */
.to-error {
	display: block;
	color: var(--to-error);
	font-size: .85rem;
}
.to-error--general { font-weight: 500; }
.to-error--general:not(:empty) { margin-bottom: .75rem; }

.to-success {
	color: var(--to-success);
	font-size: .9rem;
	font-weight: 500;
}
.to-success:not(:empty) { margin-bottom: .75rem; }

/* ---- Nota (ya logueado / enlace inválido) ---- */
.to-auth--note {
	padding: 1.5rem 0;
	text-align: center;
}
.to-auth--note a { color: var(--to-blue); }

@media (max-width: 600px) {
	.to-auth__title { font-size: 1.35rem; }
}