/* ---------------------------------------------------------------------------
   La pantalla del launcher. Son unos pocos KB y no dependen de ninguna hoja
   compartida: asi un cambio aca se ve enseguida, sin esperar a que se actualice
   un paquete grande que esta pantalla casi no usa.

   El lenguaje visual SI es el mismo del admin: las variables --rx-color1/2/3, el
   degrade animado de marca y las mismas texturas .rxsPt-N. Lo unico distinto es
   de donde salen los colores: aca los pone la config de la marca.
   --------------------------------------------------------------------------- */

:root {
	/* --rx-color1/2 los inyecta la pagina con los colores de la marca. El 3 se
	   deriva: en el admin es un tercer color propio, aca alcanza con el 1 para que
	   los degrades de tres paradas no queden en dos. */
	--rx-color3: var(--rx-color1);
	--rxs-ink: #fff;
	--rxs-card: rgba(10, 12, 18, .46);
	--rxs-card-bd: rgba(255, 255, 255, .22);
	--rxs-radio: 18px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	color: var(--rxs-ink);
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	/* El color de base va en el <body>: antes el fondo lo pintaba solo un div por
	   debajo del documento, y por eso el rebote del scroll en el telefono mostraba
	   blanco en los bordes. */
	background-color: var(--rx-color1);
	-webkit-font-smoothing: antialiased;
	overscroll-behavior: none;
}

/* ---- Fondo: degrade de marca + textura, en dos capas ------------------------
   El admin apila las dos como los dos background-image del MISMO elemento. Aca la
   textura va en una capa aparte y con opacidad, por una razon concreta: en el
   admin la textura se aplica sobre tarjetas y barras, y aca cubre la pantalla
   entera. A tamano completo las texturas mas marcadas aclaran tanto el fondo que
   se comen el degrade y las dos marcas terminan pareciendose. Con capa propia,
   cualquiera de las texturas queda sutil y el color de la marca sigue mandando. */
.rxs-fondo {
	position: fixed;
	inset: 0;
	z-index: -1;
	/* El degrade sale de --rxs-gr, la misma variable que ponen las clases
	   `gradiente-*` del admin y que eligen los campos login_bg/login_pt de un
	   tenant. Sin eleccion queda el de siempre, que es el default de la marca. */
	background-image: var(--rxs-gr, linear-gradient(-45deg,
	                      var(--rx-color1), var(--rx-color2),
	                      var(--rx-color1), var(--rx-color2), var(--rx-color1)));
	/* 220%, y no el 600% del admin: alla el degrade vive en una barra lateral
	   angosta, aca ocupa la pantalla entera. Con ese zoom el encuadre cae siempre
	   adentro de UN color y la marca se ve monocromatica. */
	background-size: 220% 220%;
	animation: rxsGrad 22s ease-in-out infinite;
}
/* Un degrade elegido del catalogo se pinta a tamano natural y quieto: los del
   catalogo son radiales, conicos y rayas, y agrandarlos al 220% y moverlos deja
   el encuadre adentro de una sola parada -que es el mismo motivo por el que la
   pantalla publica del admin tampoco lo anima-. El de siempre se sigue moviendo
   porque esta hecho de cinco paradas justamente para eso. */
.rxs-fondo.rxs-fondo-fijo {
	background-size: cover;
	animation: none;
}
.rxs-fondo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--rxs-pt, none);
	background-repeat: repeat;
	opacity: .28;
}
/* Un velo oscuro entre el fondo y la tarjeta: los degrades de marca van de un
   color claro a otro claro (violeta -> celeste, por ejemplo) y el texto blanco
   encima se perdia. Es lo unico que el admin no necesita, porque ahi el texto va
   sobre tarjetas blancas. */
.rxs-fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(125% 95% at 50% 42%, rgba(0,0,0,0), rgba(0,0,0,.34));
}

.rxsPt-1 { --rxs-pt: url('/img/pat-1.png?v=1'); }
.rxsPt-2 { --rxs-pt: url('/img/pat-2.png?v=1'); }
.rxsPt-3 { --rxs-pt: url('/img/pat-3.png?v=1'); }
.rxsPt-4 { --rxs-pt: url('/img/pat-4.png?v=1'); }
.rxsPt-5 { --rxs-pt: url('/img/pat-5.png?v=1'); }
.rxsPt-6 { --rxs-pt: url('/img/pat-6.png?v=1'); }

/* Las tramas de marca que genera pdf-gen (`rxsPt-<marca>-<variacion>`: el logo del
   cliente tileado) NO se pueden nombrar por clase aca. Del lado del admin la clase la
   declara el CSS del sitio, que este vhost no carga: es de otro dominio. Por eso la
   config acepta ademas una URL, y en ese caso el --rxs-pt lo escribe la pagina.
   Ver rxsLauncherTrama() en config/hosted.php. */

/* >>> catalogo de degrades: COPIA de njs/custom.css de RexShell <<< */
.gradiente-lineal-horizontal {--rxs-gr: linear-gradient(to right, var(--rx-color1), var(--rx-color2), var(--rx-color3)); }
.gradiente-lineal-vertical {--rxs-gr: linear-gradient(to bottom, var(--rx-color1), var(--rx-color2), var(--rx-color3)); }
.gradiente-lineal-diagonal {--rxs-gr: linear-gradient(45deg, var(--rx-color1), var(--rx-color2), var(--rx-color3)); }
.gradiente-porcentajes {--rxs-gr: linear-gradient(to right, var(--rx-color1) 0%, var(--rx-color2) 50%, var(--rx-color3) 100%); }
.gradiente-radial-circular {--rxs-gr: radial-gradient(circle, var(--rx-color1), var(--rx-color2), var(--rx-color3)); }
.gradiente-radial-eliptico {--rxs-gr: radial-gradient(ellipse at center, var(--rx-color1) 0%, var(--rx-color2) 50%, var(--rx-color3) 100%); }
.gradiente-conico {--rxs-gr: conic-gradient( var(--rx-color1), var(--rx-color2), var(--rx-color3), var(--rx-color1)); }
.gradiente-repetido {--rxs-gr: repeating-linear-gradient( 45deg, var(--rx-color1) 0px, var(--rx-color1) 10px, var(--rx-color2) 10px, var(--rx-color2) 20px, var(--rx-color3) 20px, var(--rx-color3) 30px ); }
.gradiente-simple-horizontal {--rxs-gr: linear-gradient(to right, var(--rx-color1), var(--rx-color2)); }
.gradiente-simple-vertical {--rxs-gr: linear-gradient(to bottom, var(--rx-color1), var(--rx-color2)); }
.gradiente-diagonal {--rxs-gr: linear-gradient(45deg, var(--rx-color1), var(--rx-color2)); }
.gradiente-suave {--rxs-gr: linear-gradient(to right, var(--rx-color1) 0%, var(--rx-color2) 100%); }
.gradiente-abrupto {--rxs-gr: linear-gradient(to right, var(--rx-color1) 50%, var(--rx-color2) 50%); }
.gradiente-radial {--rxs-gr: radial-gradient(circle, var(--rx-color1), var(--rx-color2)); }
.gradiente-radial-esquina {--rxs-gr: radial-gradient(circle at top left, var(--rx-color1), var(--rx-color2)); }
.gradiente-conico {--rxs-gr: conic-gradient( var(--rx-color1), var(--rx-color2), var(--rx-color1)); }
.gradiente-rayas {--rxs-gr: repeating-linear-gradient( 90deg, var(--rx-color1) 0px, var(--rx-color1) 20px, var(--rx-color2) 20px, var(--rx-color2) 40px ); }
.gradiente-rayas-diagonal {--rxs-gr: repeating-linear-gradient( 45deg, var(--rx-color1) 0px, var(--rx-color1) 10px, var(--rx-color2) 10px, var(--rx-color2) 20px ); }
.gradiente-circulos {--rxs-gr: repeating-radial-gradient( circle, var(--rx-color1) 0px, var(--rx-color1) 20px, var(--rx-color2) 20px, var(--rx-color2) 40px ); }
/* <<< fin del catalogo de degrades >>> */
/* Copia, y no un <link> al core: este vhost no depende de ninguna hoja de otro
   dominio a proposito (ver config/hosted.php). Que no se separe del original lo
   sostiene `node tools/catalogo.cjs --check`. */

@keyframes rxsGrad {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ---- La tarjeta ----------------------------------------------------------- */
.rxs-wrap {
	min-height: 100%;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem
	         max(1.25rem, env(safe-area-inset-bottom));
}

.rxs-card {
	width: 100%;
	max-width: 420px;
	background: var(--rxs-card);
	border: 1px solid var(--rxs-card-bd);
	border-radius: var(--rxs-radio);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
	padding: 1.75rem 1.5rem;
	text-align: center;
}

.rxs-logo {
	width: 148px;
	max-width: 60%;
	height: auto;
	margin: 0 auto .9rem;
	display: block;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
}

.rxs-hola {
	margin: 0 0 .2rem;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.rxs-sub {
	margin: 0 0 1.4rem;
	font-size: .95rem;
	line-height: 1.4;
	opacity: .82;
}

/* ---- Botones ---------------------------------------------------------------
   Alto fijo de 54px y no font-size:1.3rem sobre un .btn-block de Bootstrap 4: el
   objetivo tactil deja de depender de cuanto mide el texto traducido. */
.rxs-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: 100%;
	min-height: 54px;
	padding: .8rem 1rem;
	margin-bottom: .7rem;
	border: 1px solid transparent;
	border-radius: 14px;
	font: inherit;
	font-size: 1.02rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}
.rxs-btn:last-child { margin-bottom: 0; }
.rxs-btn:active { transform: scale(.975); }
.rxs-btn:focus-visible { outline: 3px solid rgba(255,255,255,.85); outline-offset: 2px; }

/* La accion principal usa el color de la marca. Antes era un violeta escrito a
   mano en el HTML, el mismo para todas — incluida una cuya marca es naranja. */
.rxs-btn-1 {
	background-image: linear-gradient(135deg, var(--rx-color1), var(--rx-color2));
	background-color: var(--rx-color1);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
}
.rxs-btn-2 {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .30);
}
.rxs-btn-2:hover { background: rgba(255, 255, 255, .17); }

.rxs-btn svg { width: 1.25em; height: 1.25em; flex: none; }

/* ---- El paso del codigo, adentro de la misma tarjeta ------------------------
   Antes era un cartel a pantalla completa dibujado con jQuery. Es un input: va
   donde estaba la pregunta. */
.rxs-paso[hidden] { display: none; }

.rxs-code {
	width: 100%;
	height: 62px;
	margin-bottom: .8rem;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 14px;
	background: rgba(0, 0, 0, .28);
	color: #fff;
	font: inherit;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-align: center;
	text-transform: lowercase;
}
.rxs-code::placeholder { color: rgba(255,255,255,.42); letter-spacing: .06em; font-weight: 400; }
.rxs-code:focus { outline: none; border-color: #fff; background: rgba(0, 0, 0, .40); }

.rxs-volver {
	display: inline-block;
	margin-top: .9rem;
	padding: .4rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: .9rem;
	opacity: .75;
	cursor: pointer;
	text-decoration: underline;
}

/* ---- Aviso ----------------------------------------------------------------- */
.rxs-aviso {
	margin-top: .9rem;
	padding: .7rem .9rem;
	border-radius: 12px;
	font-size: .92rem;
	line-height: 1.35;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .18);
}
.rxs-aviso[hidden] { display: none; }
.rxs-aviso-mal { background: rgba(190, 30, 45, .55); border-color: rgba(255, 150, 160, .5); }

.rxs-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---- El pie ----------------------------------------------------------------
   "Nuevo usuario" era una barra verde fija de 1.3rem pegada abajo, del ancho de
   la pantalla, que competia con las dos acciones reales. Es un link. */
.rxs-pie {
	font-size: .95rem;
	text-align: center;
	opacity: .9;
}
.rxs-pie a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .45);
	padding-bottom: 1px;
}

/* ---- El lector del navegador (sin app) ------------------------------------- */
.rxs-scan { position: fixed; inset: 0; z-index: 50; background: #000; display: flex;
            flex-direction: column; align-items: center; justify-content: center; }
.rxs-scan[hidden] { display: none; }
.rxs-scan video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.rxs-scan-mira { position: relative; width: min(70vw, 280px); aspect-ratio: 1;
                 border: 3px solid rgba(255,255,255,.9); border-radius: 24px;
                 box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); }
.rxs-scan-txt { position: absolute; top: max(1.5rem, env(safe-area-inset-top)); left: 0; right: 0;
                text-align: center; font-size: 1.1rem; font-weight: 700; padding: 0 1rem; }
.rxs-scan .rxs-btn { position: absolute; bottom: max(1.5rem, env(safe-area-inset-bottom));
                     width: auto; min-width: 180px; margin: 0; }

/* ---- Horizontal ------------------------------------------------------------
   Esto estaba roto de verdad: en horizontal la columna centrada media el 100%
   del alto, el logo se comia la pantalla y los dos botones quedaban abajo del
   pliegue, sin nada que indicara que habia que scrollear. Aca la tarjeta se parte
   en dos —la marca a la izquierda, las acciones a la derecha— y entra completa. */
@media (orientation: landscape) and (max-height: 560px) {
	.rxs-card {
		max-width: 720px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 1.5rem;
		align-items: center;
		text-align: left;
		padding: 1.25rem 1.5rem;
	}
	.rxs-marca { text-align: center; }
	.rxs-logo { width: 110px; margin-bottom: .5rem; }
	.rxs-hola { font-size: 1.2rem; }
	.rxs-sub { margin-bottom: 0; font-size: .88rem; }
	.rxs-acciones { min-width: 0; }
	.rxs-btn { min-height: 46px; font-size: .95rem; }
	.rxs-code { height: 52px; font-size: 1.3rem; }
	.rxs-wrap { justify-content: center; gap: .75rem; padding-top: .75rem; padding-bottom: .75rem; }
}

/* Pantallas muy bajas en vertical (teclado abierto): la marca estorba. */
@media (orientation: portrait) and (max-height: 620px) {
	.rxs-logo { width: 96px; margin-bottom: .5rem; }
	.rxs-sub { margin-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.rxs-fondo { animation: none; }
	.rxs-btn { transition: none; }
	.rxs-btn:active { transform: none; }
}

/* El <label> del codigo existe para el lector de pantalla, no para la vista: el
   placeholder solo no es una etiqueta. */
.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}