/*
 * La pantalla de acceso (`/entrar/`).
 *
 * Estructura de la referencia WowDash `sign-in.html` (Alex, 2026-10-07): un
 * panel a la izquierda y el formulario en una caja de 29rem a la derecha, con
 * la marca encima, el título, una frase, los campos de 56 px con icono, la
 * fila «recordarme / olvidé», el botón a todo el ancho, una raya con «o entra
 * con» y la fila de alternativas. La piel es la de POC Card: todos los
 * colores salen de los tokens del tema y el oscuro llega solo por ellos.
 *
 * El panel de la izquierda no lleva ilustración: la marca, su lema y una
 * frase sobre la noche de la marca (`--poc-night`, que no se invierte).
 */

.poc-signin-body {
	background: var(--poc-surface);
}

.poc-signin {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 100vh;
	min-height: 100dvh;
	line-height: 1.55;
}

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

.poc-signin [hidden] {
	display: none !important;
}

/* ── El panel de marca (solo en escritorio) ──────────────────────────── */

.poc-signin__aside {
	display: none;
}

@media (min-width: 64rem) {
	.poc-signin {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.poc-signin__aside {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 1rem;
		padding: clamp(2rem, 6vw, 6rem);
		background: var(--poc-night);
		color: var(--poc-night-ink);
	}
}

/* El logo y la marca del panel: un enlace al inicio. */
.poc-signin__home {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	border-radius: var(--poc-radius-md);
	color: inherit;
	text-decoration: none;
}

.poc-signin__home:hover {
	color: inherit;
	opacity: 0.88;
}

.poc-signin__home:focus-visible {
	outline: 3px solid var(--poc-accent);
	outline-offset: 6px;
}

.poc-signin__aside .poc-logo {
	width: clamp(6rem, 10vw, 8rem);
	height: auto;
	margin-bottom: 1rem;
}

.poc-signin__aside-word {
	display: block;
	margin: 0;
	font-size: var(--poc-text-2xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.poc-signin__aside-word i {
	font-style: normal;
	font-weight: 500;
	color: var(--poc-accent);
}

.poc-signin__tagline {
	margin: 0;
	max-width: 24ch;
	font-size: var(--poc-text-xl);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

.poc-signin__aside-lede {
	margin: 0;
	max-width: 44ch;
	color: var(--poc-night-muted);
}

/* Los productos que abre la cuenta: una pastilla por producto. */
.poc-signin__products {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 30rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.poc-signin__products li {
	margin: 0;
}

/* Cada pastilla enlaza a la portada del producto: 44 px de alto, y el
   borde se aclara al pasar y al enfocar. */
.poc-signin__products a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	padding: 0.3rem 0.9rem 0.3rem 0.3rem;
	border: 1px solid var(--poc-night-line);
	border-radius: 999px;
	background: var(--poc-night);
	color: var(--poc-night-ink);
	font-size: var(--poc-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.poc-signin__products a:hover {
	border-color: var(--poc-accent);
	color: var(--poc-night-ink);
}

.poc-signin__products a:focus-visible {
	outline: 3px solid var(--poc-accent);
	outline-offset: 2px;
}

.poc-signin__product-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--poc-night-line);
	color: var(--poc-accent);
}

.poc-signin__product-ico svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* ── La caja del formulario ──────────────────────────────────────────── */

.poc-signin__main {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(1.25rem, 4vw, 2rem) var(--poc-gutter) clamp(1.5rem, 5vw, 3rem);
}

/* Arriba: la marca a la izquierda (solo en el móvil) y el idioma a la
   derecha (`A-60`). La caja se centra en el alto que queda. */
.poc-signin__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	max-width: 29rem;
	min-height: 44px;
}

.poc-signin__top .poc-langmenu {
	margin-inline-start: auto;
}

.poc-signin__box {
	width: 100%;
	max-width: 29rem;
	padding-top: 2rem;
}

@media (min-width: 64rem) {
	.poc-signin__top {
		max-width: none;
	}

	/* En escritorio la caja se centra en el alto que deja la fila de arriba;
	   en el móvil va justo debajo, que el teclado se come la mitad. */
	.poc-signin__box {
		margin-block: auto;
	}

	/* En escritorio la marca ya está en el panel: dos veces sobra. Con la
	   clase del contenedor: `home.css` declara `body .poc-brand`. */
	.poc-signin .poc-signin__brand {
		display: none;
	}
}

.poc-signin__title {
	margin: 0 0 0.5rem;
	font-size: var(--poc-text-2xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: var(--poc-leading-tight);
	text-wrap: balance;
}

.poc-signin__lede {
	margin: 0 0 1.75rem;
	color: var(--poc-muted);
	font-size: var(--poc-text-lg);
}

/* El aviso: siempre con texto; el color solo acompaña. */
.poc-signin__notice {
	margin: 0 0 1.25rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--poc-line);
	border-radius: var(--poc-radius-md);
	background: var(--poc-ground);
	font-weight: 600;
}

.poc-signin__notice[data-kind="error"] {
	border-color: var(--poc-danger);
	color: var(--poc-danger);
}

/* ── Campos: 56 px, icono a la izquierda, relleno suave ──────────────── */

.poc-signin__field {
	display: grid;
	gap: 0.4rem;
	margin: 0 0 1rem;
}

.poc-signin__field label {
	font-size: var(--poc-text-sm);
	font-weight: 600;
}

.poc-signin__input {
	position: relative;
	display: block;
}

.poc-signin__input > svg,
.poc-signin__input > .poc-ico {
	position: absolute;
	left: 1rem;
	top: 50%;
	translate: 0 -50%;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--poc-muted);
	pointer-events: none;
}

/* Doble clase: `theme.css` declara `input[type="text"]` con el mismo peso
   que `.poc-signin__input input` y carga después, así que ganaba él (campos
   blancos sobre blanco y radio 8). Regla 5 del sistema de diseño. */
.poc-signin .poc-signin__input input {
	width: 100%;
	min-height: 56px;
	padding: 0 1rem 0 3rem;
	border: 1px solid var(--poc-line);
	border-radius: var(--poc-radius-md);
	background: var(--poc-ground);
	color: var(--poc-ink);
	font: inherit;
	/* 16 px reales o Safari en iOS hace zoom al enfocar. */
	font-size: max(16px, var(--poc-text-base));
}

.poc-signin .poc-signin__input input:focus-visible {
	outline: 3px solid var(--poc-focus);
	outline-offset: 2px;
	border-color: var(--poc-focus);
}

.poc-signin .poc-signin__input--eye input {
	padding-right: 3.5rem;
}

/* El ojo: un botón de 44 px dentro del campo. */
.poc-signin__eye {
	position: absolute;
	right: 0.4rem;
	top: 50%;
	translate: 0 -50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--poc-muted);
	cursor: pointer;
}

.poc-signin__eye svg {
	width: 1.25rem;
	height: 1.25rem;
}

.poc-signin__eye:hover,
.poc-signin__eye[aria-pressed="true"] {
	color: var(--poc-ink);
}

.poc-signin__eye:focus-visible {
	outline: 3px solid var(--poc-focus);
	outline-offset: 0;
}

/* «Recordarme» a la izquierda, «¿olvidaste…?» a la derecha. */
.poc-signin__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin: 0 0 1.25rem;
	font-size: var(--poc-text-sm);
}

.poc-signin__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	cursor: pointer;
}

.poc-signin__remember input {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var(--poc-brand);
}

.poc-signin__row a,
.poc-signin__signup a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--poc-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.poc-signin .poc-captcha {
	margin: 0 0 1rem;
}

.poc-signin__submit,
.poc-signin__alt {
	width: 100%;
	min-height: 52px;
}

.poc-signin__msg:empty {
	display: none;
}

.poc-signin__msg {
	margin: 0.75rem 0 0;
	font-size: var(--poc-text-sm);
}

.poc-signin__msg[data-state="error"] {
	color: var(--poc-danger);
	font-weight: 600;
}

/* ── «O entra con» y la fila de alternativas ─────────────────────────── */

.poc-signin__or {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.75rem 0;
	color: var(--poc-muted);
	font-size: var(--poc-text-sm);
}

.poc-signin__or::before,
.poc-signin__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--poc-line);
}

/* Una fila flexible: con una alternativa ocupa todo; con tres (correo,
   Google, Facebook) se reparten y bajan de línea cuando no caben. */
.poc-signin__alts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.poc-signin__alt {
	flex: 1 1 12rem;
}

.poc-signin__alt svg {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
}

/* Google y Facebook (`A-67`): uno por fila, con el texto que piden sus guías
   de marca («Continuar con…»), que no cabe a medias. El logo lleva sus
   colores oficiales en el SVG; aquí solo el tamaño. */
.poc-signin__social {
	flex-basis: 100%;
}

.poc-signin__signup {
	margin: 1.75rem 0 0;
	color: var(--poc-muted);
	font-size: var(--poc-text-sm);
	text-align: center;
}

/* El honeypot, fuera de la pantalla y nunca `display:none` (un gestor de
   contraseñas lo saltaría igual, y un bot no). */
.poc-signin .poc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── El alta (`/trial/`): la pareja de esta pantalla, WowDash `sign-up` ─ */

/* La casilla de edad y legales, con el texto al lado. */
.poc-signin .poc-check {
	margin: 0 0 1.25rem;
	font-size: var(--poc-text-sm);
}

/* La etiqueta lleva texto y enlaces mezclados: nada de flex, que partía la
   frase en trozos; la casilla va a la izquierda del bloque. */
.poc-signin .poc-check label {
	position: relative;
	display: block;
	padding-left: 1.8rem;
	line-height: 1.5;
	cursor: pointer;
}

.poc-signin .poc-check input {
	position: absolute;
	left: 0;
	top: 0.2rem;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var(--poc-brand);
}

.poc-signin .poc-check a {
	color: var(--poc-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* El texto de la página («Qué pasa al terminar») vive en el panel. */
.poc-signin__aside-body {
	max-width: 44ch;
	color: var(--poc-night-muted);
}

.poc-signin__aside-body h2 {
	margin: 1.5rem 0 0.25rem;
	font-size: var(--poc-text-base);
	font-weight: 700;
	color: var(--poc-night-ink);
}

.poc-signin__aside-body p {
	margin: 0 0 0.75rem;
}

/* En el móvil el panel no desaparece: baja debajo del formulario, sin la
   marca grande y sobre el fondo neutro, porque lo que dice (qué pasa al
   terminar) es parte de lo que se firma. */
.poc-signin--signup .poc-signin__aside {
	display: block;
	order: 2;
	padding: 1.5rem var(--poc-gutter) 2.5rem;
	border-top: 1px solid var(--poc-line);
	background: var(--poc-ground);
	color: var(--poc-ink);
}

.poc-signin--signup .poc-signin__home,
.poc-signin--signup .poc-signin__tagline {
	display: none;
}

.poc-signin--signup .poc-signin__aside-lede,
.poc-signin--signup .poc-signin__aside-body {
	color: var(--poc-muted);
}

.poc-signin--signup .poc-signin__aside-body h2 {
	color: var(--poc-ink);
}

@media (min-width: 64rem) {
	.poc-signin--signup .poc-signin__aside {
		display: flex;
		order: 0;
		padding: clamp(2rem, 6vw, 6rem);
		border-top: 0;
		background-color: var(--poc-night);
		color: var(--poc-night-ink);
	}

	.poc-signin--signup .poc-signin__home {
		display: flex;
	}

	.poc-signin--signup .poc-signin__tagline {
		display: block;
	}

	.poc-signin--signup .poc-signin__aside-lede,
	.poc-signin--signup .poc-signin__aside-body {
		color: var(--poc-night-muted);
	}

	.poc-signin--signup .poc-signin__aside-body h2 {
		color: var(--poc-night-ink);
	}
}

/* ── El panel, en escritorio: borde y, en el acceso, centrado ────────── */

/* Una línea en el borde, que en modo oscuro es lo único que separa el panel
   de la caja. La retícula de puntos que la acompañó unas horas no gustó
   (Alex, 2026-10-09) y se fue. Con la clase del contenedor: el alta pinta el
   fondo del panel con `background`. */
@media (min-width: 64rem) {
	.poc-signin .poc-signin__aside {
		box-shadow: inset -1px 0 0 var(--poc-night-line);
	}

	/* El acceso centra su panel COMO BLOQUE (Alex, 2026-10-09: «se ve bien
	   el bloque centrado, pero todos los elementos centrados no»): el bloque
	   va en medio del panel y lo de dentro, alineado a la izquierda. */
	.poc-signin--entry .poc-signin__aside {
		align-items: center;
	}
}

.poc-signin__aside-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	max-width: 30rem;
}