/* La puerta del producto: entrar y darse de alta.
 *
 * Es la primera pantalla que alguien ve y, hasta ahora, la unica que no se
 * parecia al producto. La traia Frappe entera y esta hoja solo le cambiaba el
 * boton a un verde escrito aqui a mano, el mismo para todos los negocios: un
 * cliente que elegia naranja veia su color en toda la aplicacion y un boton
 * verde en la pantalla donde todavia esta decidiendo si confia.
 *
 * Ahora sale de `--waflow-brand-primary`, que la hoja del sitio publica para
 * invitados justamente para esto, y los estados se derivan con `color-mix` en
 * vez de con una escala escrita a mano, igual que en la aplicacion. El respaldo
 * existe porque si esa hoja no llega, la puerta no puede quedarse sin color.
 *
 * La geometria es la de la ficha: linea de 1 px, radios de la escala, sin
 * sombras de color y sin nada que se levante al pasar el raton.
 */
:root {
	--waflow-accent: var(--waflow-brand-primary, #4f46e5); /* waflow-runtime-contrast */
	--waflow-accent-ink: var(--waflow-brand-primary-contrast, #ffffff); /* waflow-runtime-contrast */
	--waflow-accent-hover: color-mix(in srgb, var(--waflow-accent) 88%, black);
	--waflow-door-ink: var(--gray-900);
	--waflow-door-muted: var(--gray-700);
	--waflow-door-line: var(--gray-300);
	--waflow-door-surface: var(--fg-color, Canvas);
	--waflow-door-page: var(--gray-50);
	--waflow-door-control: var(--gray-50);
	--waflow-door-link: color-mix(in srgb, var(--waflow-accent) 82%, black);
}

.navbar-brand img,
.web-navbar .navbar-brand img {
	max-height: 32px;
}

/* Las dos puertas comparten todo lo de abajo. La de alta declara ademas su
   propia clase, que su plantilla ya pone, asi que no depende solo de la ruta. */
body[data-path="update-password"],
body[data-path="login"],
body[data-path="signup"],
body .waflow-signup-page {
	background: var(--waflow-door-page);
	color: var(--waflow-door-ink);
}

body:is([data-path="login"], [data-path="signup"], [data-path="update-password"]) .navbar {
	background: var(--waflow-door-surface);
	border-bottom: 1px solid var(--waflow-door-line);
}

body:is([data-path="login"], [data-path="signup"], [data-path="update-password"]) .navbar .nav-link {
	color: var(--waflow-door-ink);
}

/* Superficies nativas separadas por una linea, sin sombras decorativas. */
body[data-path="update-password"] .page-card,
body[data-path="login"] .page-card,
body[data-path="signup"] .page-card,
body .waflow-signup-page .page-card {
	border: 1px solid var(--waflow-door-line);
	border-radius: 0.75rem;
	box-shadow: none;
	background: var(--waflow-door-surface);
}

body[data-path="update-password"] .page-card-head,
body[data-path="login"] .page-card-head,
body[data-path="signup"] .page-card-head,
body .waflow-signup-page .page-card-head {
	padding-bottom: 0.5rem;
}

body[data-path="update-password"] .page-card-head img,
body[data-path="login"] .page-card-head img,
body[data-path="update-password"] .app-logo,
body[data-path="login"] .app-logo,
body[data-path="signup"] .page-card-head img,
body[data-path="signup"] .app-logo {
	width: 48px;
	height: 48px;
	border-radius: 0.75rem;
}

/* La escala del producto: el titulo de la puerta y el texto que lo acompana. */
body[data-path="update-password"] .page-card-head h4,
body[data-path="login"] .page-card-head h4,
body[data-path="signup"] .page-card-head h4,
body .waflow-signup-page .page-card-head h4 {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--waflow-door-ink);
}

body[data-path="update-password"] .page-card-body,
body[data-path="login"] .page-card-body,
body[data-path="signup"] .page-card-body,
body .waflow-signup-page .page-card-body {
	font-size: 0.875rem;
}

/* Los pasos posteriores tienen encabezados fuera de .page-card-head.
   El bundle website fija su tinta y no hereda el color del body. */
body .waflow-signup-page .page-card .page-card-body h4 {
	color: var(--waflow-door-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

body .waflow-signup-page .waflow-signup-secondary-panel {
	border-color: var(--waflow-door-line);
}

body .waflow-signup-page .waflow-signup-optional,
body .waflow-signup-page .waflow-signup-progress {
	color: var(--waflow-door-muted);
}

body[data-path="update-password"] .text-muted,
body[data-path="login"] .text-muted,
body[data-path="signup"] .text-muted,
body .waflow-signup-page .text-muted {
	color: var(--waflow-door-muted);
}

body:is([data-path="login"], [data-path="signup"], [data-path="update-password"]) .page-card .page-card-subtitle,
body:is([data-path="login"], [data-path="signup"], [data-path="update-password"]) .page-card .page-card-body .form-label,
body .waflow-signup-page .waflow-signup-hint {
	color: var(--waflow-door-muted);
}

/* Signup's banner is outside .page-card-body, unlike the native login banner. */
body .waflow-signup-page .login-error-banner:not([hidden]) {
	display: block;
	margin-block: 1rem;
	padding: 0.75rem;
	border: 1px solid var(--waflow-door-line);
	border-inline-start: 3px solid var(--red-500);
	border-radius: var(--border-radius-sm);
	background: var(--waflow-door-control);
	color: var(--waflow-door-ink);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Un campo: superficie del tema, linea neutra, y el acento cuando esta enfocado, que es
   el unico momento en que ese campo importa mas que los demas. */
body[data-path="update-password"] .form-control,
body[data-path="login"] .form-control,
body[data-path="signup"] .form-control,
body .waflow-signup-page .form-control {
	min-height: 2.5rem;
	border: 1px solid var(--waflow-door-line);
	border-radius: 0.375rem;
	background: var(--waflow-door-surface);
	box-shadow: none;
	font-size: 0.875rem;
	color: var(--waflow-door-ink);
	transition: border-color 150ms ease;
}

/* login.bundle.css loads later. Match its actual nested input selectors,
   not only .form-control, while preserving its invalid-field border rules. */
body:is([data-path="login"], [data-path="signup"], [data-path="update-password"]) .page-card .page-card-body :is(input, select, textarea).form-control {
	background: var(--waflow-door-control);
	color: var(--waflow-door-ink);
	border-color: var(--waflow-door-line);
	font-size: 0.875rem;
}

body:is([data-path="login"], [data-path="signup"], [data-path="update-password"]) .page-card .page-card-body :is(input, select, textarea).form-control:focus-visible {
	outline: 2px solid var(--waflow-door-link);
	outline-offset: 2px;
}

/* El login nativo fuerza 100svh en movil; el alta puede ser solo un campo. */
@media (max-width: 576px) {
	body .waflow-signup-page .page-card {
		min-height: auto;
		padding: 1.5rem;
		margin-block: 1.5rem;
	}
}

body:is([data-path="login"], [data-path="signup"], [data-path="update-password"]) .form-control::placeholder {
	color: var(--waflow-door-muted);
	opacity: 1;
}

body[data-path="update-password"] .form-control:hover,
body[data-path="login"] .form-control:hover,
body[data-path="signup"] .form-control:hover,
body .waflow-signup-page .form-control:hover {
	border-color: var(--waflow-door-muted);
}

body[data-path="update-password"] .form-control:focus,
body[data-path="login"] .form-control:focus,
body[data-path="signup"] .form-control:focus,
body .waflow-signup-page .form-control:focus {
	border-color: var(--waflow-accent);
	box-shadow: none;
	outline: none;
}

/* La accion primaria, del color del negocio, con la tinta que el servidor
   calculo para que se lea encima incluso si ese color es claro. */
body[data-path="update-password"] .btn-signup,
body[data-path="update-password"] .btn-primary,
body[data-path="login"] .btn-primary,
body[data-path="update-password"] .btn-login,
body[data-path="login"] .btn-login,
body[data-path="signup"] .btn-primary,
body .waflow-signup-page .btn-primary {
	min-height: 2.5rem;
	border: 1px solid var(--waflow-accent);
	border-radius: 0.375rem;
	background: var(--waflow-accent);
	color: var(--waflow-accent-ink);
	font-size: 0.875rem;
	font-weight: 500;
	box-shadow: none;
	transition: background-color 150ms ease, border-color 150ms ease;
}

/* Responde oscureciendose. Ni se levanta ni suelta un resplandor de color. */
body[data-path="update-password"] .btn-signup:hover,
body[data-path="update-password"] .btn-primary:hover,
body[data-path="login"] .btn-primary:hover,
body[data-path="update-password"] .btn-login:hover,
body[data-path="login"] .btn-login:hover,
body[data-path="signup"] .btn-primary:hover,
body .waflow-signup-page .btn-primary:hover {
	border-color: var(--waflow-accent-hover);
	background: var(--waflow-accent-hover);
	transform: none;
}

/* Un boton secundario es neutro: con dos botones de color, ninguno es el
   importante. */
body[data-path="update-password"] .btn-default,
body[data-path="login"] .btn-default,
body[data-path="signup"] .btn-default,
body .waflow-signup-page .btn-default {
	min-height: 2.5rem;
	border: 1px solid var(--waflow-door-line);
	border-radius: 0.375rem;
	background: var(--waflow-door-surface);
	color: var(--waflow-door-ink);
	font-size: 0.875rem;
	font-weight: 500;
	box-shadow: none;
}

/* Omitir y reenviar SMS son botones, no enlaces <a>. */
body .waflow-signup-page .page-card .btn-link {
	color: var(--waflow-door-link);
}

body[data-path="update-password"] a,
body[data-path="login"] a,
body[data-path="signup"] a,
body .waflow-signup-page a {
	color: var(--waflow-door-link);
	text-decoration: none;
}

body[data-path="update-password"] a:hover,
body[data-path="login"] a:hover,
body[data-path="signup"] a:hover,
body .waflow-signup-page a:hover {
	text-decoration: underline;
}

/* Un solo foco, el mismo que en toda la aplicacion, y del color del negocio. */
body[data-path="update-password"] :where(button, a[href], input, select, textarea):focus-visible,
body[data-path="login"] :where(button, a[href], input, select, textarea):focus-visible,
body[data-path="signup"] :where(button, a[href], input, select, textarea):focus-visible,
body .waflow-signup-page :where(button, a[href], input, select, textarea):focus-visible {
	outline: 2px solid var(--waflow-door-link);
	outline-offset: 2px;
	border-radius: 0.375rem;
}

body[data-path="update-password"] :where(input[type="checkbox"], input[type="radio"]),
body[data-path="login"] :where(input[type="checkbox"], input[type="radio"]),
body[data-path="signup"] :where(input[type="checkbox"], input[type="radio"]),
body .waflow-signup-page :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--waflow-accent);
}

/* Y la barra de desplazamiento, que en la pagina de alta se ve desde el primer
   momento porque el formulario es largo. */
body[data-path="update-password"] *,
body[data-path="login"] *,
body[data-path="signup"] *,
body .waflow-signup-page * {
	scrollbar-width: thin;
	scrollbar-color: var(--waflow-door-line) transparent;
}

@media (prefers-reduced-motion: reduce) {
	body[data-path="login"] *,
	body[data-path="login"] *::before,
	body[data-path="login"] *::after,
	body[data-path="signup"] *,
	body[data-path="signup"] *::before,
	body[data-path="signup"] *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

/* La puerta, si el sitio esta en tema oscuro.
 *
 * La web publica no carga los tokens de la SPA. Usamos las variables nativas
 * del bundle website, incluidas las superficies de cabecera y controles.
 *
 * Se cubren las dos formas en que un sitio puede estar oscuro: la que declara
 * el propio sitio y la que trae el sistema de quien mira.
 */
:root[data-theme='dark'] {
	--waflow-door-ink: var(--gray-50);
	--waflow-door-muted: var(--gray-300);
	--waflow-door-line: var(--gray-600);
	--waflow-door-surface: var(--gray-800);
	--waflow-door-page: var(--gray-900);
	--waflow-door-control: var(--gray-900);
	--waflow-door-link: color-mix(in srgb, var(--waflow-accent) 55%, white);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--waflow-door-ink: var(--gray-50);
		--waflow-door-muted: var(--gray-300);
		--waflow-door-line: var(--gray-600);
		--waflow-door-surface: var(--gray-800);
		--waflow-door-page: var(--gray-900);
		--waflow-door-control: var(--gray-900);
		--waflow-door-link: color-mix(in srgb, var(--waflow-accent) 55%, white);
	}
}

/* La ruta nativa de contrasena comparte el tema sin alterar su validacion. */
/* El bundle nativo carga despues y tiene cinco clases en su boton habilitado. */
body[data-path="update-password"] .for-reset-password .page-card .page-card-actions .btn-signup:not(:disabled) {
	background: var(--waflow-accent);
	color: var(--waflow-accent-ink);
}

body[data-path="update-password"] .for-reset-password .page-card .page-card-actions .btn-signup:not(:disabled):is(:hover, :focus, :active) {
	background: var(--waflow-accent-hover);
	color: var(--waflow-accent-ink);
}

body[data-path="update-password"] .page-card .password-hint,
body[data-path="update-password"] .page-card .password-strength-message,
body[data-path="update-password"] .page-card .password-mismatch-message,
body[data-path="update-password"] .page-card .password-strength-label {
	color: var(--waflow-door-muted);
}

@media (max-width: 576px) {
	body[data-path="update-password"] .page-card {
		min-height: auto;
		margin-block: 1.5rem;
	}
}

/* La entrada unica (/access): la tercera puerta, con la misma ropa.
 *
 * Su plantilla lleva la clase .waflow-signup-page, asi que hereda la ficha, los
 * campos y los botones de arriba. Aqui va solo lo que las otras dos puertas
 * reciben por su ruta y esta no: el fondo, la cabecera y los campos que el
 * bundle nativo pinta despues.
 */
body[data-path="access"] {
	background: var(--waflow-door-page);
	color: var(--waflow-door-ink);
}

body[data-path="access"] .navbar {
	background: var(--waflow-door-surface);
	border-bottom: 1px solid var(--waflow-door-line);
}

body[data-path="access"] .navbar .nav-link {
	color: var(--waflow-door-ink);
}

body[data-path="access"] .page-card-head img,
body[data-path="access"] .app-logo {
	width: 48px;
	height: 48px;
	border-radius: 0.75rem;
}

body[data-path="access"] .page-card .page-card-subtitle,
body[data-path="access"] .page-card .page-card-body .form-label,
body .waflow-access-page .waflow-access-business__host {
	color: var(--waflow-door-muted);
}

body[data-path="access"] .page-card .page-card-body :is(input, select, textarea).form-control {
	background: var(--waflow-door-control);
	color: var(--waflow-door-ink);
	border-color: var(--waflow-door-line);
	font-size: 0.875rem;
}

body[data-path="access"] .page-card .page-card-body :is(input, select, textarea).form-control:focus-visible {
	outline: 2px solid var(--waflow-door-link);
	outline-offset: 2px;
}

body[data-path="access"] .form-control::placeholder {
	color: var(--waflow-door-muted);
	opacity: 1;
}

body .waflow-access-page .waflow-access-foot {
	border-top-color: var(--waflow-door-line);
}

/* En la pantalla de entrada de un negocio, el camino para entrar en otro. */
body[data-path="login"] .waflow-other-business {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	text-align: center;
}

/* Plan 102-C1 · C1.3: en una pantalla de dedo, Safari del iPhone amplia la pagina al
   tocar un campo con letra de menos de 16 px, y no vuelve sola. Los campos de las
   puertas (entrar, alta, entrada unica y cambiar la contrasena) pasan a 1rem. En el
   ordenador siguen en 0.875rem. La fila C4.10 repasa el resto de estas paginas. */
@media (pointer: coarse) {
	body[data-path="update-password"] .form-control,
	body[data-path="login"] .form-control,
	body[data-path="signup"] .form-control,
	body .waflow-signup-page .form-control,
	body:is([data-path="login"], [data-path="signup"], [data-path="update-password"]) .page-card .page-card-body :is(input, select, textarea).form-control,
	body[data-path="access"] .page-card .page-card-body :is(input, select, textarea).form-control {
		font-size: 1rem;
	}
}