/* ═══════════════════════════════════════════════════════════════════
   Tema de login "MaxPlay"
   Mosaico de fondo en bucle + cuadro central + logos a los lados y abajo.

   Los colores salen de las variables --lg-* que ya calcula theme_helper,
   asi que este tema cambia de piel con el tema de color del sistema.
   ═══════════════════════════════════════════════════════════════════ */

.mp-body {
    /* Sustituye al layout del login clasico: aqui todo va centrado. */
    display: block !important;
    align-items: initial !important;
    padding-bottom: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Los dos circulos difuminados del tema clasico sobran aqui: el mosaico ya
   pone la textura. Ademas estan en position:absolute con top/bottom negativos,
   y como este tema NO lleva overflow:hidden en el body, estiraban el documento
   216px de mas y obligaban a hacer scroll en pantallas de 720p. */
.mp-body::before,
.mp-body::after { display: none !important; }

/* ── Fondo en movimiento ──
   Una sola imagen en mosaico que se desplaza en diagonal sin fin. Al
   moverse exactamente el tamano del tile, el salto del final del ciclo
   es invisible y el bucle se ve continuo. */
.mp-fondo {
    position: fixed;
    /* Margen de sobra: la capa se desplaza y no debe destapar los bordes. */
    inset: -280px;
    z-index: 0;
    background-repeat: repeat;
    background-position: 0 0;
    animation: mp-desplazar 40s linear infinite;
    will-change: transform;
    opacity: .5;
}

/* Se anima con TRANSFORM, no con background-position: la GPU lo mueve sin
   repintar y no se traba. Ademas background-position con var() dentro de
   @keyframes no anima (la variable no esta registrada con @property).
   Los 240px son el tamano del mosaico: al desplazarse exactamente un tile,
   el salto del final del ciclo cae justo sobre la repeticion y no se nota. */
@keyframes mp-desplazar {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(240px, 240px, 0); }
}

/* Capa de color por encima del mosaico, para que el cuadro siempre contraste. */
.mp-velo {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(0, 0, 0, .35) 100%);
    pointer-events: none;
}

/* Quien no quiera animaciones (o el sistema las tenga apagadas) ve el
   mosaico quieto: sigue siendo legible. */
@media (prefers-reduced-motion: reduce) {
    .mp-fondo { animation: none; }
}

/* ── Escenario ── */
.mp-stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 28px 16px 34px;
}

/* Fila central: logos izquierda | cuadro de acceso | logos derecha.
   El hueco a los lados es generoso a proposito: con poco aire los logos
   se leen como parte del formulario en vez de como decoracion. Abajo no
   hace falta tanto, porque ahi no compiten con la caja. */
.mp-fila {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(34px, 7vw, 130px);
    width: 100%;
}

.mp-col {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.8vw, 20px);
    flex: 0 0 auto;
}

/* ── Logos ── */
/* Caja FIJA con object-fit:contain en vez de height:auto.
   Los logos de loterias vienen con proporciones muy distintas (unos anchos,
   otros casi cuadrados): con alto automatico, uno alto estiraba su columna y
   descuadraba la fila. Asi cada logo ocupa el mismo recuadro, se centra dentro
   y nunca se deforma — que es lo que hace que la hilera se vea pareja. */
.mp-logo {
    display: block;
    width: clamp(96px, 11vw, 168px);
    height: clamp(62px, 7.1vw, 108px);
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45));
    transition: transform .25s ease;
}

.mp-logo:hover { transform: scale(1.06); }

/* Los de abajo van en fila y se acomodan solos si no caben. */
.mp-abajo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.5vw, 32px);
    max-width: 1100px;
}

/* ── Cuadro de acceso ── */
.mp-caja {
    flex: 0 1 400px;
    max-width: 400px;
    width: 100%;
}

/* El .login-box de siempre, solo que aqui no necesita posicionarse. */
.mp-caja .login-box {
    max-width: none;
    width: 100%;
}

/* ── Descargas ── */
.mp-descargas { text-align: center; }

.mp-descargas-titulo {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.mp-descargas-botones {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.mp-btn-descarga {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 8px;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}

.mp-btn-descarga:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 22px rgba(0, 0, 0, .45);
}

.mp-btn-descarga.android { background: #16a34a; }
.mp-btn-descarga.desktop { background: #2563eb; }

/* ═══════════ Adaptacion por tamano de pantalla ═══════════ */

/* Tablet y monitores angostos: los laterales estorban, todo baja. */
@media (max-width: 1100px) {
    /* Ya no hay laterales: el hueco grande de escritorio sobra y solo
       separaria el acceso de los logos. */
    .mp-fila   { flex-direction: column; gap: 20px; }
    .mp-col    { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .mp-caja   { order: -1; }          /* el acceso primero, los logos despues */
    .mp-logo   { width: clamp(88px, 17vw, 130px); height: clamp(56px, 11vw, 84px); }
}

/* Telefono: logos mas chicos y el cuadro a todo el ancho util.
   Con 8 logos en 3 filas, a 375x812 el boton de descarga quedaba pegado al
   borde de abajo; por eso aqui se recortan tamanos y separaciones. */
@media (max-width: 640px) {
    .mp-stage  { gap: 12px; padding: 14px 12px 20px; }
    .mp-fila   { gap: 12px; }
    .mp-col    { gap: 8px; }
    .mp-abajo  { gap: 10px; }
    .mp-logo   { width: clamp(62px, 21vw, 88px); height: clamp(40px, 13.5vw, 57px); }
    .mp-fondo  { opacity: .35; }        /* menos ruido detras del formulario */
    .mp-descargas-titulo { font-size: 13px; margin-bottom: 8px; }
    .mp-btn-descarga { padding: 9px 18px; font-size: 12px; }
}

/* Pantallas muy bajas (portatiles 768px de alto o menos): el bucle sigue,
   pero se recorta el aire para que el boton de Ingresar no quede fuera. */
@media (max-height: 780px) and (min-width: 1101px) {
    .mp-stage { gap: 14px; padding: 14px 16px 18px; }
    .mp-logo  { width: clamp(82px, 8vw, 120px); height: clamp(53px, 5.2vw, 77px); }
}