/* ============================================================
   FollowUp — Pantalla de acceso
   Requiere tokens.css. No usa Bootstrap: el login es autónomo.
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body.fu-auth-body {
	margin: 0;
	font-family: var(--fu-font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--fu-navy);
	background: var(--fu-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------
   Rejilla
   ------------------------------------------------------------ */

.fu-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	min-height: 100dvh;
}

/* ------------------------------------------------------------
   Panel izquierdo — marca
   ------------------------------------------------------------ */

.fu-aside {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	/* El alto se reparte con el viewport: en portátiles bajos el aire se
	   comprime en vez de empujar la página y provocar scroll. */
	padding: clamp(32px, 6vh, 56px) 64px;
	color: var(--fu-white);
	background: var(--fu-bg-navy);
}

/* Trama de nodos: evoca la red de prospectos. Decorativa. */
.fu-aside__net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.fu-aside__inner {
	position: relative; /* por encima de la trama */
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
}

/* ------------------------------------------------------------
   Lockup de marca
   El admin define su variante clara en styles.admin.css.
   Misma identidad: "F" blanca sobre degradado naranja 135°.
   Aquí cambia el tamaño y el color del nombre, por el fondo oscuro.
   ------------------------------------------------------------ */

.fu-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp(40px, 8vh, 72px);
}

.fu-brand__mark {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--fu-radius-md);
	background: linear-gradient(135deg, var(--fu-orange) 0%, var(--fu-orange-700) 100%);
	box-shadow: 0 4px 14px rgba(245, 165, 36, 0.35);
	color: var(--fu-white);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.fu-brand__name {
	display: block;
	color: var(--fu-white);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.fu-brand__name span {
	color: var(--fu-orange);
}

/* Sobre el panel oscuro la etiqueta es texto espaciado, no la
   píldora navy del admin: navy sobre navy no se vería. */
.fu-brand__tag {
	display: block;
	margin-top: 2px;
	color: var(--fu-muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------
   Antetítulo
   ------------------------------------------------------------ */

.fu-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	color: var(--fu-green-400);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fu-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* ------------------------------------------------------------
   Titular
   ------------------------------------------------------------ */

/* El peso 600 y no el 400 de antes: sobre el navy del panel, un trazo de
   serif fina se adelgaza todavía más y el titular se leía despintado.

   `font-optical-sizing: auto` es lo que hace que Fraunces valga aquí: el
   eje `opsz` sigue al tamaño y a 56px dibuja la letra para display —astas
   más firmes, remates más secos— en vez de la de texto corrido ampliada.

   `text-wrap: balance` reparte las tres líneas en vez de dejar la última
   con una palabra suelta. Es una frase de marca y el corte importa: sin
   esto, «hogares.» se quedaba solo en el último renglón. */
.fu-aside__title {
	margin: 0 0 24px;
	font-family: var(--fu-font-serif);
	font-optical-sizing: auto;
	font-size: clamp(40px, 3.6vw, 56px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* La itálica de Fraunces pinta más estrecha que su redonda, así que
   «leads» pesaba menos que las palabras de al lado justo siendo la que
   lleva el acento. Medio grado de peso lo devuelve a la misma línea. */
.fu-aside__title em {
	color: var(--fu-orange);
	font-style: italic;
	font-weight: 650;
}

/* El párrafo y las tarjetas cuentan lo mismo. Aquí mandan las tarjetas
   (más escaneables) y el párrafo sobra: mantenerlo obligaba a hacer
   scroll en portátiles de 768px. Vuelve en una columna (≤900px), donde
   las tarjetas se retiran y hace falta algo que explique el producto. */
.fu-aside__lead {
	display: none;
	margin: 0 0 48px;
	max-width: 30rem;
	color: var(--fu-slate-400);
	font-size: 15px;
}

/* ------------------------------------------------------------
   Tarjetas de capacidades
   ------------------------------------------------------------ */

.fu-features {
	display: grid;
	gap: 12px;
}

.fu-feature {
	display: flex;
	gap: 16px;
	padding: 18px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--fu-radius-md);
	transition: background var(--fu-duration) var(--fu-ease),
		border-color var(--fu-duration) var(--fu-ease);
}

.fu-feature:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
}

.fu-feature__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
}

.fu-feature__icon svg {
	width: 18px;
	height: 18px;
}

.fu-feature__icon--orange {
	color: var(--fu-orange);
	background: rgba(245, 165, 36, 0.12);
}

.fu-feature__icon--green {
	color: var(--fu-green-400);
	background: rgba(46, 217, 163, 0.12);
}

.fu-feature__icon--sky {
	color: #7dd3fc;
	background: rgba(125, 211, 252, 0.12);
}

.fu-feature__title {
	margin: 0 0 3px;
	color: var(--fu-white);
	font-size: 14px;
	font-weight: 600;
}

.fu-feature__text {
	margin: 0;
	color: var(--fu-slate-400);
	font-size: 13px;
	line-height: 1.5;
}

/* ------------------------------------------------------------
   Panel derecho — formulario
   ------------------------------------------------------------ */

.fu-main {
	display: flex;
	align-items: center;
	justify-content: center;
	/* El alto se reparte con el viewport: en portátiles bajos el aire se
	   comprime en vez de empujar la página y provocar scroll. */
	padding: clamp(32px, 6vh, 56px) 64px;
	background: var(--fu-white);
}

.fu-main__inner {
	width: 100%;
	max-width: 460px;
}

.fu-eyebrow--green {
	color: var(--fu-green-700);
}

/* Sobre blanco el trazo no se come nada, así que aquí basta el 500: el
   600 del panel oscuro compensaba el fondo, y puesto sobre claro se leería
   pesado al lado del formulario, que es lo que manda en esta columna. */
.fu-main__title {
	margin: 0 0 10px;
	color: var(--fu-navy);
	font-family: var(--fu-font-serif);
	font-optical-sizing: auto;
	font-size: clamp(32px, 2.8vw, 44px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-wrap: balance;
}

.fu-main__title em {
	color: var(--fu-orange-700);
	font-style: italic;
	font-weight: 550;
}

.fu-main__lead {
	margin: 0 0 36px;
	color: var(--fu-text);
}

/* ------------------------------------------------------------
   Campos
   ------------------------------------------------------------ */

.fu-field {
	margin-bottom: 20px;
}

.fu-label {
	display: block;
	margin-bottom: 8px;
	color: var(--fu-text);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.fu-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.fu-input-icon {
	position: absolute;
	left: 15px;
	display: grid;
	place-items: center;
	color: var(--fu-muted);
	pointer-events: none;
	transition: color var(--fu-duration) var(--fu-ease);
}

.fu-input-icon svg {
	width: 17px;
	height: 17px;
}

.fu-input-wrap:focus-within .fu-input-icon {
	color: var(--fu-orange-700);
}

.fu-field--invalid .fu-input-icon {
	color: var(--fu-danger);
}

.fu-input {
	width: 100%;
	padding: 14px 16px 14px 46px;
	color: var(--fu-navy);
	font-family: inherit;
	font-size: 15px;
	background: var(--fu-white);
	border: 1px solid var(--fu-border);
	border-radius: var(--fu-radius);
	transition: border-color var(--fu-duration) var(--fu-ease),
		box-shadow var(--fu-duration) var(--fu-ease);
}

.fu-input::placeholder {
	color: var(--fu-muted);
}

.fu-input:hover {
	border-color: var(--fu-slate-300);
}

.fu-input:focus {
	outline: none;
	border-color: var(--fu-orange);
	box-shadow: var(--fu-ring);
}

/* Deja sitio al botón del ojo */
.fu-input--with-toggle {
	padding-right: 46px;
}

/* Inválido: borde y anillo, no solo un texto rojo debajo */
.fu-input--invalid,
.fu-input--invalid:hover {
	border-color: var(--fu-danger);
}

.fu-input--invalid:focus {
	border-color: var(--fu-danger);
	box-shadow: var(--fu-ring-danger);
}

.fu-error {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 7px;
	color: var(--fu-danger);
	font-size: 13px;
	font-weight: 500;
}

.fu-error svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

/* ------------------------------------------------------------
   Botón de ver contraseña
   El icono visible se decide con aria-pressed: un solo estado,
   sin que el JS y el CSS puedan discrepar.
   ------------------------------------------------------------ */

.fu-toggle {
	position: absolute;
	right: 8px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--fu-muted);
	background: none;
	border: 0;
	border-radius: var(--fu-radius-sm);
	cursor: pointer;
	transition: color var(--fu-duration) var(--fu-ease),
		background var(--fu-duration) var(--fu-ease);
}

.fu-toggle:hover {
	color: var(--fu-text);
	background: var(--fu-hover);
}

.fu-toggle:focus-visible {
	outline: none;
	color: var(--fu-text);
	box-shadow: var(--fu-ring);
}

.fu-toggle svg {
	width: 17px;
	height: 17px;
}

.fu-toggle [data-fu-eye-off] {
	display: none;
}

.fu-toggle[aria-pressed="true"] [data-fu-eye] {
	display: none;
}

.fu-toggle[aria-pressed="true"] [data-fu-eye-off] {
	display: block;
}

/* ------------------------------------------------------------
   Fila: recordarme / olvidé contraseña
   ------------------------------------------------------------ */

.fu-form__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

.fu-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--fu-text);
	font-size: 13px;
	cursor: pointer;
	user-select: none;
}

.fu-check input {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--fu-orange-700);
	cursor: pointer;
}

.fu-check input:focus-visible {
	outline: none;
	border-radius: var(--fu-radius-sm);
	box-shadow: var(--fu-ring);
}

.fu-link {
	color: var(--fu-green-700);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--fu-radius-sm);
	transition: color var(--fu-duration) var(--fu-ease);
}

.fu-link:hover {
	color: var(--fu-navy);
	text-decoration: underline;
}

.fu-link:focus-visible {
	outline: none;
	box-shadow: var(--fu-ring);
}

/* ------------------------------------------------------------
   Botón principal
   ------------------------------------------------------------ */

/* Vale tanto para <button> como para <a> (lo usa la pantalla de error):
   de ahí el text-decoration, que un ancla trae subrayado por defecto. */
.fu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 15px 20px;
	color: var(--fu-white);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	background: linear-gradient(135deg, var(--fu-orange) 0%, var(--fu-orange-700) 100%);
	border: 0;
	border-radius: var(--fu-radius);
	cursor: pointer;
	box-shadow: var(--fu-shadow-orange);
	transition: transform var(--fu-duration) var(--fu-ease),
		box-shadow var(--fu-duration) var(--fu-ease),
		filter var(--fu-duration) var(--fu-ease);
}

.fu-btn:hover {
	filter: brightness(1.05);
	box-shadow: 0 10px 28px rgba(245, 165, 36, 0.42);
	transform: translateY(-1px);
}

.fu-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(245, 165, 36, 0.3);
}

.fu-btn:focus-visible {
	outline: none;
	box-shadow: var(--fu-shadow-orange), 0 0 0 3px var(--fu-white),
		0 0 0 5px var(--fu-orange-700);
}

.fu-btn svg {
	width: 16px;
	height: 16px;
	transition: transform var(--fu-duration) var(--fu-ease);
}

.fu-btn:hover svg {
	transform: translateX(2px);
}

/* ------------------------------------------------------------
   Aviso de estado
   Lo usan las pantallas de contraseña: Laravel devuelve el
   resultado de la operación en session('status').
   ------------------------------------------------------------ */

.fu-notice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 24px;
	padding: 14px 16px;
	font-size: 13px;
	border-radius: var(--fu-radius);
}

.fu-notice svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 1px;
}

.fu-notice p {
	margin: 0;
}

.fu-notice--success {
	color: var(--fu-green-700);
	background: var(--fu-green-050);
	border: 1px solid rgba(0, 190, 132, 0.25);
}

/* ------------------------------------------------------------
   Enlace de vuelta
   ------------------------------------------------------------ */

.fu-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 24px;
	color: var(--fu-text);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--fu-radius-sm);
	transition: color var(--fu-duration) var(--fu-ease);
}

.fu-back svg {
	width: 15px;
	height: 15px;
	transition: transform var(--fu-duration) var(--fu-ease);
}

.fu-back:hover {
	color: var(--fu-navy);
}

.fu-back:hover svg {
	transform: translateX(-2px);
}

.fu-back:focus-visible {
	outline: none;
	box-shadow: var(--fu-ring);
}

/* ------------------------------------------------------------
   Pie
   ------------------------------------------------------------ */

.fu-main__foot {
	margin-top: 40px;
	padding-top: 24px;
	color: var(--fu-muted);
	font-size: 12px;
	text-align: right;
	border-top: 1px solid var(--fu-slate-100);
}

/* ------------------------------------------------------------
   Pantallas menores
   ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.fu-aside,
	.fu-main {
		padding: clamp(32px, 6vh, 48px) 40px;
	}

	.fu-brand {
		margin-bottom: clamp(32px, 6vh, 48px);
	}
}

/* Una columna: la marca pasa a cabecera compacta y las tarjetas
   se retiran — en móvil alargan la página más de lo que aportan. */
@media (max-width: 900px) {
	.fu-auth {
		grid-template-columns: 1fr;
	}

	.fu-aside {
		padding: 40px 24px;
	}

	.fu-aside__inner,
	.fu-main__inner {
		max-width: 512px;
	}

	.fu-brand {
		margin-bottom: 40px;
	}

	.fu-aside__title {
		font-size: clamp(30px, 7vw, 40px);
	}

	.fu-aside__lead {
		display: block;
		margin-bottom: 0;
	}

	.fu-features {
		display: none;
	}

	.fu-main {
		padding: 40px 24px 48px;
	}
}

@media (max-width: 480px) {
	.fu-form__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}