/*
 * ---- Barda de noche ----
 * Copia de apps/web/components/marketing/barda-noche.css (main de SEN-CheckIn).
 * Producción la enciende con `<html class="dark">`; esta página no tiene
 * interruptor y la enciende la preferencia del sistema, con
 * `prefers-color-scheme: dark`. `:root:root` da la misma especificidad que
 * `:root.dark`, así que cada regla pesa igual que en producción.
 * Guía: docs/agents/design-barda.md, sección «Noche».
 */
.barda-reflector {
	display: none;
}

@media screen and (prefers-color-scheme: dark) {
	:root:root .barda-wall {
		--barda-cal: #15100d;
		--barda-cal-2: #211913;
		--barda-tinta: #f1e7d4;
		--barda-blanco: #1f1814;
		--barda-negro: #050403;
		--barda-rojo: #ff4b55;
		--barda-azul: #6f9dff;
		--barda-shadow-soft: rgba(0, 0, 0, 0.55);
		--barda-line: rgba(241, 231, 212, 0.14);
		--luz: 255 222 160;
		/* El acento (y --primary) es rojo claro: legible como texto, con tinta oscura encima. */
		--text-on-accent: #1d1512;
		--accent-primary-hover: color-mix(in srgb, var(--barda-rojo) 85%, var(--barda-tinta));
		/* Se resuelve aquí para que la restauración de colores de día no lo oscurezca. */
		--barda-foco: var(--barda-azul);
		/* Los tonos de letra de día vuelven al color de marca de noche y el halo de cal se apaga. */
		--barda-rojo-letra: var(--barda-rojo);
		--barda-verde-letra: var(--barda-verde);
		--barda-rosa-letra: var(--barda-rosa);
		--barda-rosa-letra-chica: var(--barda-rosa);
		--barda-halo-cal: none;
		color-scheme: dark;
		/* El haz del reflector sobresale del lockup: se recorta en la pared. */
		overflow-x: clip;
		/* La pared es un grupo propio para que el haz se mezcle con ella y no con el lienzo. */
		isolation: isolate;
		/*
		 * La cal no cambia de color de noche, cambia la luz: la misma pared de día
		 * (sin sol ni relieve fino) multiplicada por una luz ambiente oscura y
		 * horneada en el fondo. El haz la ilumina con color-dodge.
		 */
		background-color: #f5f1e8;
		background-image:
			linear-gradient(rgb(34 30 26), rgb(34 30 26)), url('/assets/pared/bloques.svg'),
			url('/assets/pared/poros.svg'), url('/assets/pared/brocha-h.svg'),
			url('/assets/pared/brocha-v.svg'), url('/assets/pared/nube-clara.svg'),
			url('/assets/pared/nube-suave.svg');
		background-size:
			100% 100%,
			736px 552px,
			420px 420px,
			1200px 600px,
			600px 1200px,
			980px 760px,
			1100px 860px;
		background-blend-mode: multiply, multiply, normal, normal, normal, normal, normal;
	}

	/* La pintura y las calcomanías conservan sus colores reales de día. */
	:root:root .barda-wall :is(
		.barda-paint,
		.barda-calco,
		.barda-panel-tag,
		.barda-tag,
		.barda-num,
		.barda-caps,
		.barda-dev-tag,
		.barda-btn--primary,
		.barda-btn--secondary:hover,
		.barda-seg button[aria-pressed='true'],
		.barda-toc a[aria-current='true']
	) {
		--barda-blanco: #ffffff;
		--barda-negro: #141010;
		--barda-tinta: #1d1512;
		--barda-rojo: #d3202c;
		--barda-azul: #1f5fbf;
	}

	:root:root .barda-wall .barda-btn:focus-visible {
		outline-color: var(--barda-foco);
	}

	/* Etiquetas amarillas: texto oscuro aunque el resto de la pared lo lleve claro. */
	:root:root .barda-wall :is(
		.barda-caps,
		.barda-dev-tag,
		.barda-panel-tag,
		.barda-calco[data-tone='amarillo']
	) {
		color: var(--barda-tinta);
	}

	/* Superficies: bordes claros porque el negro de la noche no se distingue de la pared. */
	:root:root .barda-wall :is(.barda-nav, .barda-foot) {
		border-color: rgba(241, 231, 212, 0.18);
	}

	:root:root .barda-wall :is(
		.barda-card,
		.barda-kiosk,
		.barda-pegado-shot,
		.barda-seg,
		.barda-notice:not([data-tone='error'], [data-tone='muted'])
	) {
		border-color: rgba(241, 231, 212, 0.28);
	}

	:root:root .barda-wall .barda-gist li {
		border-inline-color: rgba(241, 231, 212, 0.28);
		border-bottom-color: rgba(241, 231, 212, 0.28);
	}

	:root:root .barda-wall .barda-ls .barda-callout {
		border-left-color: rgba(241, 231, 212, 0.5);
	}

	/* Plan elegido: lámina con borde amarillo encendido, no cal mezclada. */
	:root:root .barda-wall .barda-card[data-featured='true'] {
		background: color-mix(in srgb, var(--barda-amarillo) 10%, #120e0b);
		border-color: var(--barda-amarillo);
		box-shadow:
			0 0 22px rgb(255 210 63 / 0.22),
			4px 4px 0 #000;
	}

	:root:root .barda-wall .barda-btn--secondary {
		border-color: rgba(241, 231, 212, 0.7);
		box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
	}

	:root:root .barda-wall .barda-btn--primary {
		border-color: #000;
	}

	:root:root .barda-wall .barda-drip {
		fill: #2a2019;
	}

	/* Texto que de día es negro sobre cal. */
	:root:root .barda-wall :is(.barda-kick, .barda-lock-under, .barda-letrero-sub) {
		color: var(--barda-tinta);
	}

	/* Cerca del haz el texto cae sobre pared iluminada; el halo oscuro le da fondo. */
	:root:root
		.barda-wall
		:is(
			.barda-lock-under,
			.barda-auth-under,
			.barda-kick,
			.barda-mark small,
			.barda-say h1
		) {
		text-shadow:
			0 0 1px #050403,
			0 0 4px rgb(5 4 3 / 0.95),
			0 0 10px rgb(5 4 3 / 0.7);
	}

	/* Los scripts conservan su luz negra; el halo oscuro pegado a la letra les da fondo. */
	:root:root .barda-wall :is(.barda-sh, .barda-cierre) .barda-script {
		text-shadow:
			0 0 1px #050403,
			0 0 4px rgb(5 4 3 / 0.95),
			0 0 10px color-mix(in srgb, currentColor 60%, transparent);
	}

	:root:root .barda-wall .barda-extras {
		border-color: rgba(241, 231, 212, 0.3);
	}

	/* Cartelera: el tablero es lámina oscura con borde violeta de luz negra. */
	:root:root .barda-wall .barda-panel {
		background: #120e0b;
		border-color: rgb(170 120 255 / 0.35);
		box-shadow:
			0 0 0 1px rgb(150 90 255 / 0.12),
			0 0 28px rgb(120 60 255 / 0.12);
	}

	:root:root .barda-wall .barda-panel-pre {
		text-shadow: 0 0 8px rgb(80 130 255 / 0.7);
	}

	/* Acceso: el panel del arte es pared; el del formulario, lámina. */
	:root:root .barda-wall .barda-formcard {
		box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.7);
		border-color: rgba(241, 231, 212, 0.35);
	}

	:root:root .barda-wall .barda-input {
		background: #120e0b;
		border-color: rgba(241, 231, 212, 0.4);
		color: var(--barda-tinta);
	}

	:root:root .barda-wall .barda-input[aria-invalid='true'] {
		border-color: var(--barda-rojo);
		background: color-mix(in srgb, var(--barda-rojo) 8%, #120e0b);
	}

	:root:root .barda-wall .barda-auth-art {
		border-color: rgba(241, 231, 212, 0.18);
	}

	/* Letrero «AVISO»: tinta roja fluorescente. */
	:root:root .barda-wall .barda-letrero {
		border-color: rgba(241, 231, 212, 0.25);
		box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
	}

	:root:root .barda-wall .barda-letrero-in {
		box-shadow:
			0 0 12px rgb(255 40 70 / 0.45),
			inset 0 0 12px rgb(255 40 70 / 0.3);
	}

	:root:root .barda-wall .barda-letrero-aviso {
		text-shadow:
			3px 3px 0 #000,
			0 0 10px rgb(255 40 70 / 0.7),
			0 0 26px rgb(255 40 70 / 0.5);
	}

	/* ---- luz negra: lo pintado brilla en su propio color ---- */
	:root:root .barda-wall .barda-paint {
		--glow: rgb(60 255 110 / 0.5);
	}

	:root:root .barda-wall .barda-paint[data-variant='turq'] {
		--glow: rgb(0 230 230 / 0.55);
	}

	:root:root .barda-wall .barda-paint[data-variant='red'] {
		--glow: rgb(255 40 70 / 0.55);
	}

	:root:root .barda-wall .barda-paint:is([data-variant='flame'], [data-variant='acap']) {
		--glow: rgb(60 255 110 / 0.5);
	}

	:root:root .barda-wall .barda-paint[data-variant='pink'] {
		--glow: rgb(255 30 170 / 0.6);
	}

	:root:root
		.barda-wall
		.barda-paint:not(:is(.barda-lock, .barda-auth-lock) .barda-paint):not(.barda-calco .barda-paint) {
		filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 14px var(--glow))
			drop-shadow(0 0 30px var(--glow));
		animation: barda-tubo 2.2s steps(1, end) var(--retraso, 0.6s) both;
	}

	:root:root .barda-wall :is(.barda-sec, .barda-cierre) {
		background: radial-gradient(ellipse 70% 60% at 50% 30%, rgb(110 50 255 / 0.13), transparent 75%);
	}

	:root:root .barda-wall :is(.barda-soon, .barda-p-head, .barda-reg, .barda-sh) {
		background: radial-gradient(ellipse 70% 70% at 50% 40%, rgb(110 50 255 / 0.12), transparent 75%);
	}

	:root:root .barda-wall .barda-script {
		text-shadow: 0 0 10px color-mix(in srgb, currentColor 60%, transparent);
	}

	/*
	 * ---- reflector: lámpara al pie de «jale.» y haz que abre hacia arriba ----
	 * .barda-luz envuelve al letrero y no crea contexto de apilamiento: el haz
	 * (z-index -1) y la lámpara se pintan sobre el fondo de la pared, que es el
	 * grupo aislado. El haz es un gris fijo con color-dodge; su máscara pone la
	 * forma: el relieve rasante recorta tanto el foco como el abanico con la caída,
	 * porque un foco liso bajo color-dodge deja anillos concéntricos.
	 */
	:root:root .barda-wall .barda-luz {
		--alto-lampara: 30px;
		--angulo: 44deg;
		--e: 1;
		--bajo: calc(50px * var(--e));
	}

	:root:root .barda-wall .barda-auth-art .barda-luz {
		--alto-lampara: 28px;
		--angulo: 40deg;
	}

	@media (max-width: 620px) {
		:root:root .barda-wall .barda-luz {
			--e: 0.62;
		}
	}

	:root:root .barda-wall .barda-reflector {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	:root:root .barda-wall .barda-haz-filtro {
		position: absolute;
	}

	/*
	 * el haz: el vértice del abanico queda en la lámpara, a --bajo del borde de la caja.
	 * La capa que se mezcla es opaca: el filtro de Reflector convierte el alfa de la
	 * forma en el gris que da la misma mezcla. WebKit pinta de blanco el color-dodge
	 * con alfa casi nulo, así que la máscara y el parpadeo van en .barda-haz-forma.
	 */
	:root:root .barda-wall .barda-haz {
		--vertice: 50% calc(100% - var(--bajo));
		position: absolute;
		z-index: -1;
		left: calc(50% - 620px * var(--e));
		width: calc(1240px * var(--e));
		bottom: calc((var(--alto-lampara, 26px) + 50px * var(--e)) * -1);
		height: calc(600px * var(--e) + var(--bajo));
		mix-blend-mode: color-dodge;
		filter: url(#barda-haz-luz);
	}

	:root:root .barda-wall .barda-haz-forma {
		position: absolute;
		inset: 0;
		background-color: #000;
		-webkit-mask-image:
			url('/assets/pared/rasante-alfa.svg'),
			radial-gradient(
				ellipse calc(150px * var(--e)) calc(46px * var(--e)) at 50% calc(100% - var(--bajo) - 6px),
				rgb(0 0 0 / 0.88),
				rgb(0 0 0 / 0.29) 55%,
				transparent 100%
			),
			conic-gradient(
				from calc(var(--angulo, 32deg) * -1 - 2.5deg) at var(--vertice),
				transparent 0deg,
				rgb(0 0 0 / 0.35) 5deg,
				#000 var(--angulo, 32deg),
				rgb(0 0 0 / 0.35) calc(var(--angulo, 32deg) * 2 - 5deg),
				transparent calc(var(--angulo, 32deg) * 2)
			),
			radial-gradient(
				ellipse calc(620px * var(--e)) calc(600px * var(--e)) at var(--vertice),
				#000 0%,
				rgb(0 0 0 / 0.88) 28%,
				rgb(0 0 0 / 0.48) 60%,
				transparent 100%
			);
		mask-image:
			url('/assets/pared/rasante-alfa.svg'),
			radial-gradient(
				ellipse calc(150px * var(--e)) calc(46px * var(--e)) at 50% calc(100% - var(--bajo) - 6px),
				rgb(0 0 0 / 0.88),
				rgb(0 0 0 / 0.29) 55%,
				transparent 100%
			),
			conic-gradient(
				from calc(var(--angulo, 32deg) * -1 - 2.5deg) at var(--vertice),
				transparent 0deg,
				rgb(0 0 0 / 0.35) 5deg,
				#000 var(--angulo, 32deg),
				rgb(0 0 0 / 0.35) calc(var(--angulo, 32deg) * 2 - 5deg),
				transparent calc(var(--angulo, 32deg) * 2)
			),
			radial-gradient(
				ellipse calc(620px * var(--e)) calc(600px * var(--e)) at var(--vertice),
				#000 0%,
				rgb(0 0 0 / 0.88) 28%,
				rgb(0 0 0 / 0.48) 60%,
				transparent 100%
			);
		-webkit-mask-size: 512px 512px, 100% 100%, 100% 100%, 100% 100%;
		mask-size: 512px 512px, 100% 100%, 100% 100%, 100% 100%;
		-webkit-mask-repeat: repeat, no-repeat, no-repeat, no-repeat;
		mask-repeat: repeat, no-repeat, no-repeat, no-repeat;
		-webkit-mask-composite: source-in, source-over, source-in;
		mask-composite: intersect, add, intersect;
		animation: barda-enciende 1.6s steps(1, end) var(--retraso, 0s) both;
	}

	/* la lámpara, nivelada: ya no gira con el letrero */
	:root:root .barda-wall .barda-reflector::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 50%;
		bottom: calc(var(--alto-lampara, 26px) * -1 - 4px);
		width: 46px;
		height: 22px;
		transform: translateX(-50%);
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 22'%3E%3Crect x='21' y='12' width='4' height='10' fill='%23050403'/%3E%3Crect x='12' y='19' width='22' height='3' rx='1.5' fill='%23050403'/%3E%3Cpath d='M8 4h30l-5 10H13z' fill='%23161210' stroke='%23050403' stroke-width='1.5'/%3E%3Crect x='8' y='2.5' width='30' height='3' rx='1.5' fill='%23fff3d6'/%3E%3C/svg%3E")
			center / contain no-repeat;
		filter: drop-shadow(0 -3px 6px rgb(var(--luz) / 0.9));
	}

	/* las letras de «jale.», iluminadas desde abajo */
	:root:root .barda-wall :is(.barda-lock, .barda-auth-lock) .barda-paint {
		filter: drop-shadow(0 0 1px rgb(var(--luz) / 0.6)) drop-shadow(0 -6px 22px rgb(var(--luz) / 0.28));
		animation: barda-letras 1.6s steps(1, end) var(--retraso, 0s) both;
	}

	:root:root .barda-wall :is(.barda-lock, .barda-auth-lock) .barda-paint > span {
		-webkit-mask-image: linear-gradient(to top, #000 55%, rgba(0, 0, 0, 0.82));
		mask-image: linear-gradient(to top, #000 55%, rgba(0, 0, 0, 0.82));
	}

	@keyframes barda-enciende {
		0% {
			opacity: 0;
		}
		12% {
			opacity: 0.8;
		}
		18% {
			opacity: 0.1;
		}
		30% {
			opacity: 1;
		}
		36% {
			opacity: 0.35;
		}
		48%,
		100% {
			opacity: 1;
		}
	}

	@keyframes barda-letras {
		0% {
			opacity: 0.35;
		}
		12% {
			opacity: 0.9;
		}
		18% {
			opacity: 0.4;
		}
		30%,
		100% {
			opacity: 1;
		}
	}

	@keyframes barda-tubo {
		0% {
			filter: none;
			opacity: 0.5;
		}
		10% {
			opacity: 1;
		}
		14% {
			filter: none;
			opacity: 0.6;
		}
		22%,
		100% {
			opacity: 1;
		}
	}

	/* Con movimiento reducido las luces quedan encendidas y fijas. */
	@media (prefers-reduced-motion: reduce) {
		:root:root .barda-wall .barda-haz-forma,
		:root:root .barda-wall .barda-paint {
			/* !important: las reglas de luz negra pesan más por sus :not(). */
			animation: none !important;
		}
	}
}