/* ===================================================================================
   UEB Tienda — pantallas de interrupción ("ambiente oscuro")
   ===================================================================================

   Las tres pantallas que NO son tienda: el 404, el login de WordPress y el aviso de "tienda
   en construcción". Comparten el mismo lienzo —foto submarina a sangre bajo un doble
   degradado— y no llevan ni cabecera ni pie de tienda: son interrupciones, no páginas.

   Los tokens los redefine `.ueb-deep` en tokens.css, así que el color sale de
   --ink / --accent-strong / --line, que dentro de esa clase ya valen lo que tienen que
   valer. Es justo lo que compra el vocabulario unificado — `.eyebrow`, `.btn` y `.field`
   funcionan aquí sin una sola regla extra.

   Los ÚNICOS literales del archivo son cuatro rgba() calibrados sobre la foto concreta (el
   fondo de la pastilla de estado, el halo del punto rojo, el doble degradado y la retícula):
   no son colores de paleta, son opacidades medidas sobre esa imagen. Cualquier otro color
   tiene que salir de un token.

   Las tres pantallas la cargan, y solo una por el camino normal de `wp_enqueue_scripts`:
     · 404                → inc/assets.php, en el bucle de rutas (`ueb_is_deep()`)
     · wp-login.php       → inc/login.php, en `login_enqueue_scripts`
     · "en construcción"  → inc/coming-soon.php, como <link> impreso a mano (el gate corta
                            en template_redirect, antes de que exista wp_head)

   Aquí va solo lo COMPARTIDO más lo del 404 y lo de "en construcción". La tarjeta del login
   vive en login.css: son ~15 KB que las otras dos pantallas no usan, y el 404 inyecta esta
   hoja EN LÍNEA (lleva `path`), así que meterlas aquí pasaba de los 20 KB a partir de los
   cuales WordPress deja de inyectarla sin avisar.

   ─────────────────────────────────────────────────────────────────────────────────────
   LO QUE NO SE COPIA DE LOS MOCKUPS
   ─────────────────────────────────────────────────────────────────────────────────────
   · Los mockups traen su propio juego de variables (`--fg`, `--signal`, `--bg-2`…). Aquí se
     usa el vocabulario del sitio; ver la tabla de equivalencias en tokens.css.
   · El buscador del 404 está `disabled` en el mockup ("no funcional, para revisión de
     diseño"). Aquí busca de verdad: es lo único que le sirve a alguien que ha caído en un 404.
   · El botón "Ver catálogo" del mockup es un `<span aria-disabled="true">`. Aquí es un enlace.
   =================================================================================== */

/* ==================================================================================
   LIENZO
   ================================================================================== */
.deep-page {
	position: relative;
	/* 100vh cuenta con la barra de URL del móvil retraída, así que la banda inferior acaba
	   debajo del pliegue. 100dvh es la altura real; la línea de arriba es la reserva para
	   los navegadores que no la conocen. */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bg);
}

/* La foto. `position:absolute` y no un background-image en .deep-page para poder servirla
   como <img> con srcset y `fetchpriority`: es el elemento más grande de la pantalla y por
   tanto lo que mide el LCP. */
.deep-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.deep-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Doble degradado sobre la foto: un radial que aclara el centro (para que la foto se vea) y
   un lineal que oscurece de arriba abajo (para que el texto de abajo tenga contraste).
   Los valores son los de los mockups, que están calibrados sobre esta foto concreta. */
.deep-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 80% 60% at 50% 38%, rgba(21, 38, 66, .20), rgba(14, 27, 48, .70) 72%),
		linear-gradient(180deg, rgba(21, 38, 66, .55) 0%, rgba(21, 38, 66, .24) 30%, rgba(21, 38, 66, .40) 65%, rgba(11, 20, 36, .88) 100%);
}

/* Retícula técnica de 64px, desvanecida hacia los bordes con una máscara elíptica. Es la
   firma "panel de instrumentos" del 404. */
.deep-grid {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
}

/* Las tres bandas de contenido van por encima de foto y retícula. El padding lateral es un
   clamp() y no --pad: estas pantallas van a sangre, sin el contenedor de 1280px, así que en
   móvil necesitan menos y en pantallas grandes más de lo que da la tienda. */
.deep-page > .deep-top,
.deep-page > .deep-main,
.deep-page > .deep-bot {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding-left: clamp(20px, 5vw, 64px);
	padding-right: clamp(20px, 5vw, 64px);
}

/* ==================================================================================
   BANDA SUPERIOR: marca + salida
   ================================================================================== */
.deep-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 28px;
	padding-bottom: 28px;
}

/* El lockup de marca vive en layout.css:105-143, pero ni el aviso de "en construcción" ni
   wp-login.php cargan layout.css (24,9 KB para cinco reglas), así que se repite aquí lo
   imprescindible. Duplicación consciente de nueve declaraciones: la alternativa es sacar
   `.brand` a una hoja propia y tocar UEB_CSS_GLOBAL y el encolado de las tres pantallas.
   Bajo `.ueb-deep`, --hdr-fg ya es blanco y --accent-strong ya es el menta: cero colores
   extra. */
.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-shrink: 0;
}

.brand img {
	height: 40px;
	width: auto;
}

.brand .bt {
	line-height: 1;
}

.brand .bt b {
	display: block;
	font-family: var(--font);
	font-weight: 800;
	font-size: 16.5px;
	letter-spacing: .01em;
	color: var(--hdr-fg);
}

.brand .bt span {
	display: block;
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent-strong);
	margin-top: 3px;
}

/* La marca de estas pantallas va con más apertura de letra que la de la tienda: aquí es un
   sello, no un elemento de navegación entre otros seis. */
.deep-top .brand img {
	height: 34px;
}

.deep-top .brand .bt b {
	letter-spacing: .04em;
}

.deep-top .brand .bt span {
	font-size: 9.5px;
	letter-spacing: .24em;
}

.deep-back {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-dim);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.deep-back:hover {
	color: var(--accent-strong);
}

.deep-back svg {
	width: 14px;
	height: 14px;
}

/* ==================================================================================
   CUERPO
   ================================================================================== */
.deep-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 40px;
}

/* El "404" gigante. En monoespaciada y con el cero en menta, como un dígito de instrumento. */
.deep-gauge {
	font-family: var(--mono);
	font-size: clamp(90px, 15vw, 190px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--ink);
}

.deep-gauge span {
	color: var(--accent-strong);
}

/* Pastilla de estado con el punto rojo. El punto es el ÚNICO uso de --alert en todo el tema:
   ver tokens.css. */
.deep-tag {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-mute);
	background: rgba(6, 8, 9, .5);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-pill);
	padding: 7px 16px;
	margin-top: 22px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.deep-tag .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--alert);
	box-shadow: 0 0 0 4px rgba(240, 101, 74, .18);
	flex-shrink: 0;
}

.deep-main h1 {
	margin-top: 22px;
	font-size: clamp(28px, 4.2vw, 48px);
	line-height: 1.02;
	letter-spacing: -.02em;
	max-width: 20ch;
}

.deep-lead {
	margin-top: 18px;
	font-size: clamp(15px, 1.4vw, 17px);
	color: var(--ink-dim);
	max-width: 52ch;
}

/* --- Campo + botón en una línea ----------------------------------------------------
   Lo comparten el buscador del 404 y el formulario de aviso de "en construcción": son el
   mismo componente y los mockups lo dibujan igual salvo en tres medidas (ver más abajo).
   Se añade el selector en vez de duplicar el bloque. */
.deep-search,
.deep-notify {
	margin-top: 38px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 480px;
	width: 100%;
}

.deep-search input,
.deep-notify input {
	flex: 1;
	min-width: 200px;
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	color: var(--ink);
	padding: 15px 16px;
	font-family: var(--font);
	font-size: 14px;
	-webkit-appearance: none;
	appearance: none;
}

.deep-search input::placeholder,
.deep-notify input::placeholder {
	color: var(--ink-mute);
}

.deep-search input:focus,
.deep-notify input:focus {
	outline: none;
	border-color: var(--accent-strong);
}

.deep-cta {
	margin-top: 20px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ==================================================================================
   LOS BOTONES Y EL AVISO, DENTRO DEL AMBIENTE OSCURO
   ==================================================================================
   Esto NO es un retoque estético: sin estas cuatro reglas hay texto blanco sobre fondo
   blanco. Es la cara mala del vocabulario unificado y conviene entenderla, porque el mismo
   razonamiento vale para cualquier componente que se lleve a una pantalla oscura.

   `.btn-solid` es `background: var(--ink); color: #fff`. Dentro de `.ueb-deep`, `--ink` vale
   `#FFFFFF` (es la tinta que contrasta con el marino), así que el botón queda BLANCO CON
   TEXTO BLANCO. Lo mismo `.btn-signal`, que es `background: var(--accent-strong)` con texto
   blanco: ahí `--accent-strong` es el menta `#A8D8D0`, y blanco sobre menta da 1,57:1 —
   ilegible, y suspende cualquier criterio de contraste. Y `.toast`, que pinta
   `background: var(--ink)`: blanco sobre blanco otra vez.

   El mockup del 404 y el de "en construcción" piden `.btn-signal` en su CTA, y el handoff
   también: los dos están mal por este mismo motivo. En pantalla oscura el botón de acción es
   `.btn-accent` (menta con tinta oscura encima), que sí contrasta.

   Se reasignan en vez de prohibirlos porque un partial compartido (empty-state, toast) no
   sabe en qué ambiente lo van a pintar: es el ambiente el que tiene que saber corregirlo. */

/* Acción principal sobre marino: menta con tinta oscura. */
.ueb-deep .btn-solid,
.ueb-deep .btn-signal {
	background: var(--accent);
	color: var(--accent-ink);
	border-color: var(--accent);
}

.ueb-deep .btn-solid:hover,
.ueb-deep .btn-signal:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--accent-ink);
}

/* Fantasma sobre foto: en blanco. El `--ink` del `.btn-ghost` general ya es blanco aquí, así
   que lo único que hace falta es que el hover no lo invierta a fondo blanco. */
.ueb-deep .btn-ghost {
	color: var(--ink);
	border-color: var(--line-2);
}

.ueb-deep .btn-ghost:hover {
	background: transparent;
	border-color: var(--accent-strong);
	color: var(--accent-strong);
}

/* El aviso flotante. Marino sólido (no el translúcido de --surface: sobre una foto, un panel
   al 55 % de opacidad no se lee) con la tinta clara. */
.ueb-deep .toast {
	background: var(--media);
	color: var(--ink);
	border: 1px solid var(--line-2);
}

.ueb-deep .toast svg {
	color: var(--accent-strong);
}

/* Y el aviso de error tiene que seguir siendo rojo: `.ueb-deep .toast` (0,2,0) empata con
   `.toast.is-error` (0,2,0) y gana por orden de origen, así que sin esto el error se pinta
   igual que el acierto y la señal desaparece. */
.ueb-deep .toast.is-error {
	background: var(--danger);
	border-color: var(--danger);
}

/* ==================================================================================
   BANDA INFERIOR
   ================================================================================== */
.deep-bot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 22px;
	padding-bottom: 28px;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.deep-bot a:hover {
	color: var(--accent-strong);
}

.deep-bot .coords {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

/* ==================================================================================
   "TIENDA EN CONSTRUCCIÓN"
   ==================================================================================
   Mismo lienzo y casi el mismo cuerpo que el 404. Lo que cambia es la ESCALA del titular
   —84px contra 48px— y que aquí hay cuenta atrás en vez de buscador. De ahí el modificador
   `.deep-page--soon`: reutilizar el bloque del 404 tal cual NO es neutro, dejaría el
   titular a poco más de la mitad de lo que pide el diseño (mockup:49-50). */
.deep-page--soon .deep-main h1 {
	font-size: clamp(38px, 6.4vw, 84px);
	max-width: 16ch;
}

.deep-page--soon .deep-lead {
	margin-top: 22px;
	font-size: clamp(15px, 1.6vw, 19px);
	max-width: 56ch;
}

/* El énfasis de la entradilla (mockup:51). Sin esta regla el <b> hereda --ink-dim y el
   énfasis simplemente no existe. */
.deep-lead b {
	color: var(--ink);
}

/* Aquí la pastilla ABRE el bloque; en el 404 va debajo del "404" con margen propio. El
   hueco de 26px que pide mockup:46 lo da el margin-top del h1. */
.deep-main > .deep-tag:first-child {
	margin-top: 0;
}

/* Punto de estado "en obras": menta con halo de acento. El mockup lo pinta menta pero con
   el halo en rgba(200,150,58,.18) — dorado, resto de la paleta anterior (mockup:47). */
.deep-tag--live .dot {
	background: var(--accent-strong);
	box-shadow: 0 0 0 4px var(--accent-soft);
}

/* En positivo y no anulándolo después: un latido de 1,8s en bucle infinito es exactamente
   lo que `prefers-reduced-motion` está pidiendo que no ocurra. */
@media (prefers-reduced-motion: no-preference) {
	.deep-tag--live .dot {
		animation: ueb-pulse 1.8s ease-in-out infinite;
	}
}

@keyframes ueb-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .35;
	}
}

.deep-cd-label {
	margin-top: 46px;
}

.deep-count {
	margin-top: 16px;
	display: flex;
	gap: clamp(10px, 2.2vw, 20px);
}

/* --surface dentro de `.ueb-deep` vale EXACTAMENTE el rgba(14,27,48,.55) del mockup:55 —
   tokens.css:194 lo declara literalmente para estas celdas. Cero literales. */
.deep-count .cell {
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	backdrop-filter: blur(6px);
	min-width: clamp(64px, 9vw, 92px);
	padding: 16px 6px 12px;
}

/* `tabular-nums` no es un detalle de gusto: sin él los segundos cambian de ancho en cada
   tick y las cuatro celdas bailan. */
.deep-count .cell b {
	display: block;
	font-family: var(--mono);
	font-size: clamp(28px, 4.4vw, 46px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.deep-count .cell span {
	display: block;
	margin-top: 6px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* Los tres deltas del formulario de aviso sobre el buscador (mockup:59-60). */
.deep-notify {
	margin-top: 44px;
	max-width: 520px;
}

.deep-notify input {
	min-width: 220px;
}

.deep-fine {
	margin-top: 14px;
	font-size: 12px;
	color: var(--ink-mute);
}

@media (max-width: 640px) {
	.deep-bot {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.deep-search,
	.deep-notify {
		flex-direction: column;
	}

	.deep-search input,
	.deep-notify input {
		min-width: 0;
	}

	.deep-count .cell {
		min-width: 60px;
		padding: 12px 4px 10px;
	}
}