/*
* Estilo base para paginas NUCLEO de Joomla ajenas a Fluques (perfil,
* editar perfil, login/registro fuera de un modal, buscador, articulos
* sueltos, paginas de error...) - cualquier vista que no venga armada
* por el constructor de bloques. Solo se carga cuando NO es una pagina
* de Fluques (ver index.php) - nunca convive con el lienzo del
* constructor ni con el CSS propio de los modulos mod_flq_*. Usa las
* mismas variables --flq-* que ya define el diseno del proyecto
* (helpers/design.php) para que combine con el resto del sitio.
*
* Pedido explicito del usuario, con captura real de referencia (la
* pantalla de login sin ningun estilo, "imaginate que un cliente
* entra aqui... deberia de ser algo de alto impacto, acorde a Fluxus
* Digital"): antes de esto, esta hoja daba un estilo minimo tipo
* formulario suelto (fondo blanco, sin logo real, colores genericos
* #1a1a2e/#4c7bf3 - ni siquiera los del proyecto real, ver el bug
* real corregido en helpers/design.php: la pagina "home" real de
* Joomla apuntaba a un proyecto viejo/abandonado). Ahora es una
* pantalla oscura de pantalla completa, estilo "hero" (mismo lenguaje
* visual que el sitio real: fondo casi negro, logo grande, tarjeta de
* vidrio esmerilado) en vez de una tarjeta blanca chica sola en la
* esquina - SIGUE siendo generica a proposito (nunca asume una clase
* particular como ".com-users-login", que solo existe en la vista de
* login) para servir por igual a cualquier vista nucleo (perfil,
* registro, buscador, 404...).
*/
/* Sin ":has()" a proposito, aunque hoy los navegadores reales ya lo
soportarian - esta hoja SOLO se carga cuando el body es justo esto
(ver el "if (!$showTopbar)" en index.php), asi que no hace falta
condicionar el selector para estar seguros del contexto. */
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--flq-bg-dark, #0D0D0D);
/* Pedido explicito del usuario: "los azules cambialos a solo azul
que hemos venido majenado" - el azul de acento del proyecto
(--flq-color-primary, hoy #4686BD, el mismo que ya se usa en
todo el constructor) en vez de un azul distinto escrito a mano
aca (#3B82F6, el que traia el sitio de referencia original). Con
color-mix() en vez de un rgba() fijo para no tener que
actualizar 2 lugares si el color vuelve a cambiar. */
background-image:
radial-gradient(color-mix(in srgb, var(--flq-color-primary, #4686BD) 12%, transparent) 1.5px, transparent 1.5px),
radial-gradient(ellipse 900px 600px at 50% 0%, color-mix(in srgb, var(--flq-color-primary, #4686BD) 16%, transparent), transparent 70%);
background-size: 28px 28px, 100% 100%;
padding: 3rem 1rem;
}
/* BUG REAL reportado por el usuario (captura real): al fallar un login
("El usuario y contraseña no coinciden"), la tarjeta se corria del
centro. Causa: "#system-message-container" (nucleo de Joomla,
"") es HERMANO de ".flq-core-page"
dentro de "body" - mientras esta vacio no se nota (no ocupa espacio
real), pero en cuanto trae un mensaje real se vuelve un 2do elemento
flex visible, y "justify-content:center" centra el PAR completo (aviso
+ tarjeta) en vez de solo la tarjeta, empujandola hacia la derecha.
Se saca del flujo flex (position:fixed, con su propio centrado
horizontal) para que la tarjeta se quede SIEMPRE en el centro real de
la pantalla, haya o no un aviso. */
#system-message-container {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 200;
width: 100%;
max-width: 460px;
padding: 0 1rem;
}
.flq-core-page {
max-width: 460px;
width: 100%;
margin: 0 auto;
padding: 0;
color: var(--flq-text-light, #fff);
}
.flq-core-page:empty {
padding: 0;
}
.flq-core-page__brand {
display: flex;
justify-content: center;
margin-bottom: 2.25rem;
}
.flq-core-page__brand img {
max-height: 52px;
width: auto;
/* El logo real es tinta oscura (pensado para fondo claro) - esta
pantalla es oscura, asi que se fuerza a blanco solido sin
depender de tener una 2da version del archivo. Funciona porque
el logo real es de un solo color solido, no un degradado. */
filter: brightness(0) invert(1);
}
.flq-core-page__welcome {
text-align: center;
margin: -1.25rem 0 2.25rem;
font-family: var(--flq-font-heading, sans-serif);
font-weight: 700;
font-size: 1.4rem;
color: var(--flq-text-light, #fff);
}
.flq-core-page__instructions {
text-align: center;
margin: -1.75rem 0 1.75rem;
font-family: var(--flq-font-body, sans-serif);
font-size: .92rem;
color: var(--flq-text-light, #fff);
opacity: .7;
}
/* La "tarjeta" - vidrio esmerilado sobre el fondo oscuro, mismo
lenguaje visual ya probado en el propio constructor
(--flqb-bg-elevated) pero con las variables --flq-* del sitio
PUBLICO, no las del constructor. Se aplica a CUALQUIER elemento de
primer nivel dentro de ".flq-core-page" que no sea el logo/titulo -
generico a proposito, sin depender del nombre de vista. */
.flq-core-page > form,
.flq-core-page > .com-users-login,
.flq-core-page > table,
.flq-core-page > .items-row,
.flq-core-page > dl {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: calc(var(--flq-radius, 14px) + 6px);
padding: 2rem 1.75rem;
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
backdrop-filter: blur(6px);
}
/* La vista de login envuelve TODO (form + links de abajo) en
".com-users-login" - ese contenedor ya es la tarjeta de arriba, asi
que el