/* =============================================================
   FACILITYGES · LOGIN v2
   Hoja de estilos del login — no agregar aqui estilos globales.
   ============================================================= */

/* ─── Base ───────────────────────────────────────────────────── */
html {
    height: 100%;
    overflow-x: hidden; /* refuerzo: cualquier elemento decorativo que se
                            desborde (orbes, anillos con offsets negativos)
                            no debe generar scroll horizontal de la pagina */
}

body.fg-login-body {
    margin: 0;
    min-height: 100vh;
    /* 100vh en mobile incluye el area tapada por la barra de direcciones del
       navegador (que al cargar la pagina sigue visible), dejando contenido
       "de mas" fuera de lo que realmente se ve y empujando la barra fija de
       apps fuera de pantalla hasta hacer scroll o zoom out. 100dvh usa el
       alto realmente visible; los navegadores que no lo soportan ignoran
       esta linea y se quedan con el 100vh de arriba. */
    min-height: 100dvh;
    font-family: var(--fg-font-family, 'Inter', sans-serif);
    display: flex;
    flex-direction: column;
    /* Css/Adminto/assets/css/bootstrap.min.css (tambien cargado en esta pagina)
       trae su propio reset con body{background-color:#ebeff2}. Igualamos el
       fondo del body al de .fg-login-main para que cualquier resto que se
       asome (por diferencias de calculo de dvh entre navegadores) sea
       invisible, en vez de perseguir el ajuste pixel-perfecto. */
    background:
        radial-gradient(rgba(0, 40, 100, .055) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(155deg, #edf1f7 0%, #f4f6fb 50%, #e8edf5 100%);
    /* Css/Login/assets/css/app.min.css trae "body{padding-bottom:80px}" dentro
       de @media (max-width:767.98px) (pensado para el layout con sidebar del
       theme Adminto, no para este login). Esa era la causa real de la franja
       vacia al fondo en mobile. Login.css carga al final y body.fg-login-body
       tiene mas especificidad que el "body" plano de app.min.css, asi que esto
       la neutraliza sin tocar el archivo del theme. */
    padding-bottom: 0;
}

/*  El <form runat="server"> de WebForms es un bloque sin altura. Solo el
    body fija la altura (min-height:100vh); el form y el wrapper RELLENAN con
    flex:1. No repetir min-height:100vh aquí: apilarlo en cada nivel sumaba
    alturas y dejaba un hueco gris bajo el panel. */
body.fg-login-body > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.fg-login-wrapper {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ══════════════════════════════════════════════════════════════
   PANEL IZQUIERDO  — azul medianoche profundo (#061634 base)
   ══════════════════════════════════════════════════════════════ */
.fg-login-aside {
    flex: 1 1 55%;
    background: linear-gradient(160deg, #020c1c 0%, #041120 30%, #061634 60%, #082040 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 48px;
    position: relative;
    overflow: hidden;
}

/* — Grilla de puntos que se desplaza — */
.fg-login-pattern-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    animation: fgPatternDrift 25s linear infinite;
}

@keyframes fgPatternDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 28px 28px; }
}

/* — Aurora rotatoria (conic gradient que gira lentamente) — */
.fg-aurora {
    position: absolute;
    inset: -50%;
    pointer-events: none;
    background: conic-gradient(
        from 0deg at 75% 45%,
        transparent        0deg,
        rgba(55, 242, 255, .022)  18deg,
        rgba(0, 105, 107, .014)   32deg,
        transparent        52deg
    );
    animation: fgAuroraRot 38s linear infinite;
    z-index: 0;
}

@keyframes fgAuroraRot {
    to { transform: rotate(360deg); }
}


/* — Orbes (circulos borrosos de color) — */
.fg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
    will-change: transform;
}

.fg-orb-1 {
    width: 520px; height: 520px;
    right: -180px; top: -140px;
    background: radial-gradient(circle, rgba(0, 90, 160, 0.65) 0%, transparent 68%);
    animation: fgOrb1 16s ease-in-out infinite;
}

.fg-orb-2 {
    width: 400px; height: 400px;
    left: -100px; bottom: -100px;
    background: radial-gradient(circle, rgba(0, 120, 122, 0.50) 0%, transparent 68%);
    animation: fgOrb2 20s ease-in-out infinite;
}

.fg-orb-3 {
    width: 300px; height: 300px;
    right: 8%; bottom: 18%;
    background: radial-gradient(circle, rgba(55, 242, 255, 0.18) 0%, transparent 65%);
    animation: fgOrb3 25s ease-in-out infinite;
}

/* Orbe adicional para profundidad en el centro-izquierda */
.fg-orb-4 {
    width: 200px; height: 200px;
    left: 30%; top: 40%;
    background: radial-gradient(circle, rgba(0, 74, 133, 0.22) 0%, transparent 70%);
    filter: blur(50px);
    animation: fgOrb4 28s ease-in-out infinite 5s;
}

@keyframes fgOrb1 {
    0%   { transform: translate(0, 0) scale(1); }
    20%  { transform: translate(-25px, 38px) scale(1.05); }
    42%  { transform: translate(-50px, 12px) scale(1.10); }
    62%  { transform: translate(12px, -32px) scale(0.93); }
    82%  { transform: translate(38px, 18px) scale(0.97); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes fgOrb2 {
    0%   { transform: translate(0, 0) scale(1); }
    22%  { transform: translate(38px, -28px) scale(1.07); }
    48%  { transform: translate(55px, -55px) scale(1.14); }
    72%  { transform: translate(-28px, -18px) scale(0.88); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes fgOrb3 {
    0%   { transform: translate(0, 0) scale(1); }
    30%  { transform: translate(-28px, -42px) scale(1.14); }
    65%  { transform: translate(22px, -62px) scale(1.20); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes fgOrb4 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .6; }
    40%       { transform: translate(50px, -40px) scale(1.18); opacity: 1; }
    70%       { transform: translate(-30px, 30px) scale(0.85); opacity: .4; }
}

/* — Anillos pulsantes — */
.fg-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    border-style: solid;
    will-change: transform, opacity;
}

.fg-ring-1 {
    width: 340px; height: 340px;
    right: -60px; top: 12%;
    border-width: 1px;
    border-color: rgba(55, 242, 255, 0.22);
    box-shadow: 0 0 22px rgba(55, 242, 255, 0.06), inset 0 0 22px rgba(55, 242, 255, 0.04);
    animation: fgRingA 7s ease-in-out infinite;
}

.fg-ring-2 {
    width: 520px; height: 520px;
    right: -150px; top: 4%;
    border-width: 1px;
    border-color: rgba(55, 242, 255, 0.09);
    animation: fgRingA 7s ease-in-out infinite 2.2s;
}

.fg-ring-3 {
    width: 220px; height: 220px;
    left: 3%; top: 62%;
    border-width: 1px;
    border-color: rgba(0, 90, 160, 0.40);
    box-shadow: 0 0 16px rgba(0, 90, 160, 0.08);
    animation: fgRingB 9s ease-in-out infinite 1s;
}

.fg-ring-4 {
    width: 340px; height: 340px;
    left: -2%; top: 52%;
    border-width: 1px;
    border-color: rgba(0, 90, 160, 0.16);
    animation: fgRingB 9s ease-in-out infinite 3.5s;
}

/* Anillo izquierdo grande extra para zona central */
.fg-ring-5 {
    width: 160px; height: 160px;
    right: 18%; top: 55%;
    border-width: 1px;
    border-color: rgba(55, 242, 255, 0.18);
    animation: fgRingA 5s ease-in-out infinite 0.8s;
}

@keyframes fgRingA {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    30%       { transform: scale(1.06); opacity: 0.55; }
    60%       { transform: scale(1.14); opacity: 0.20; }
}

@keyframes fgRingB {
    0%, 100% { transform: scale(1); opacity: 0.75; }
    50%       { transform: scale(1.18); opacity: 0.22; }
}

/* — Lineas diagonales con pulso — */
.fg-line {
    position: absolute;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(55, 242, 255, 0.12), transparent);
    will-change: opacity;
}

.fg-line-1 {
    width: 65%; right: -5%; top: 38%;
    transform: rotate(-25deg);
    animation: fgLinePulse 9s ease-in-out infinite;
}

.fg-line-2 {
    width: 42%; right: 3%; top: 52%;
    transform: rotate(-25deg);
    background: linear-gradient(to right, transparent, rgba(0, 105, 107, 0.18), transparent);
    animation: fgLinePulse 9s ease-in-out infinite 3.5s;
}

@keyframes fgLinePulse {
    0%, 100% { opacity: 0.35; }
    50%       { opacity: 1; }
}

/* — Particulas flotantes: nucleo brillante + anillo "ping" tipo señal de red —
   El color del anillo usa currentColor, asi que cada instancia solo necesita
   declarar su propio "color" (ademas del "background" del nucleo) para que
   el ping salga del mismo tono. Sensacion de nodos de red transmitiendo. */
.fg-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

.fg-particle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0;
    animation: fgPing 2.6s cubic-bezier(.15, .6, .35, 1) infinite;
}

.fg-p1 { width: 4px; height: 4px; left: 22%; top: 18%; background: rgba(55,242,255,.85); color: rgba(55,242,255,.85); box-shadow: 0 0 14px 5px rgba(55,242,255,.45); animation: fgPart1 9s ease-in-out infinite; }
.fg-p2 { width: 3px; height: 3px; left: 72%; top: 72%; background: rgba(55,242,255,.75); color: rgba(55,242,255,.75); box-shadow: 0 0 11px 4px rgba(55,242,255,.36); animation: fgPart2 11s ease-in-out infinite 2s; }
.fg-p3 { width: 5px; height: 5px; left: 42%; top: 82%; background: rgba(55,242,255,.7);  color: rgba(55,242,255,.7);  box-shadow: 0 0 16px 6px rgba(55,242,255,.32); animation: fgPart1 10s ease-in-out infinite 4.5s; }
.fg-p4 { width: 3px; height: 3px; left: 82%; top: 28%; background: rgba(0,220,230,.85); color: rgba(0,220,230,.85); box-shadow: 0 0 11px 4px rgba(0,220,230,.4);  animation: fgPart2 8s  ease-in-out infinite 1s; }
.fg-p5 { width: 4px; height: 4px; left: 58%; top: 12%; background: rgba(55,242,255,.8);  color: rgba(55,242,255,.8);  box-shadow: 0 0 14px 5px rgba(55,242,255,.38); animation: fgPart1 12s ease-in-out infinite 5.5s; }
.fg-p6 { width: 3px; height: 3px; left: 12%; top: 58%; background: rgba(180,220,255,.68); color: rgba(180,220,255,.68); box-shadow: 0 0 10px 4px rgba(180,220,255,.28); animation: fgPart2 10s ease-in-out infinite 3s; }
/* Partículas adicionales */
.fg-p7 { width: 2px; height: 2px; left: 35%; top: 45%; background: rgba(55,242,255,.6);  color: rgba(55,242,255,.6);  box-shadow: 0 0 8px 3px rgba(55,242,255,.3);  animation: fgPart1 13s ease-in-out infinite 7s; }
.fg-p8 { width: 3px; height: 3px; left: 65%; top: 35%; background: rgba(55,242,255,.72); color: rgba(55,242,255,.72); box-shadow: 0 0 11px 4px rgba(55,242,255,.34); animation: fgPart2 7.5s ease-in-out infinite 0.5s; }

.fg-p1::after { animation-delay: 0s; }
.fg-p2::after { animation-delay: .5s; }
.fg-p3::after { animation-delay: 1.1s; }
.fg-p4::after { animation-delay: 1.6s; }
.fg-p5::after { animation-delay: .3s; }
.fg-p6::after { animation-delay: 1.9s; }
.fg-p7::after { animation-delay: .8s; }
.fg-p8::after { animation-delay: 1.4s; }

@keyframes fgPing {
    0%   { transform: scale(1);   opacity: .8; }
    70%  { transform: scale(4.5); opacity: 0; }
    100% { transform: scale(4.5); opacity: 0; }
}

@keyframes fgPart1 {
    0%   { transform: translate(0, 0) scale(1);      opacity: .5; }
    18%  { transform: translate(16px, -26px) scale(1.7); opacity: 1; }
    40%  { transform: translate(-14px, -50px) scale(.6); opacity: .22; }
    65%  { transform: translate(26px, -32px) scale(1.5); opacity: .95; }
    100% { transform: translate(0, 0) scale(1);      opacity: .5; }
}

@keyframes fgPart2 {
    0%   { transform: translate(0, 0) scale(1);       opacity: .55; }
    28%  { transform: translate(-22px, -18px) scale(1.9); opacity: 1; }
    55%  { transform: translate(20px, -44px) scale(.5);  opacity: .18; }
    100% { transform: translate(0, 0) scale(1);       opacity: .55; }
}

/* ─── Contenido del panel izquierdo ─────────────────────────── */
.fg-login-aside-content {
    max-width: 460px;
    position: relative;
    z-index: 2;
}

.fg-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.fg-login-brand-logo { height: 100px; width: auto; }

.fg-login-tagline {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 40px;
    color: #ffffff;
    background: linear-gradient(120deg, #ffffff 20%, rgba(55, 242, 255, .85) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fg-login-features {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fg-login-features li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.fg-login-features li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.fg-login-features li i {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    display: flex; align-items: center; justify-content: center;
    color: #37F2FF;
    flex-shrink: 0;
    font-size: .88rem;
}

.fg-login-copyright {
    position: absolute;
    left: 48px; bottom: 68px; /* 52px trigger bar + 16px margen */
    font-size: .76rem;
    color: rgba(255, 255, 255, .30);
    z-index: 4;
}

/* Velo degradado en la base del panel izquierdo — remate visual */
.fg-login-aside::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to top, rgba(2, 12, 28, .60) 0%, transparent 100%);
    pointer-events: none;
    z-index: 3;
}

/* ══════════════════════════════════════════════════════════════
   PANEL DERECHO  — gris perla elegante
   Contraste máximo con el midnight navy del izquierdo
   ══════════════════════════════════════════════════════════════ */
.fg-login-main {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Antes centraba el formulario en toda la altura del panel, dejando un
       vacío grande abajo (más notorio ahora que la card ya no es una caja
       blanca separada). Ancla el contenido más arriba y deja el resto como
       respiro para el watermark de marca (ver .fg-brand-watermark). */
    justify-content: flex-start;
    padding-top: 56px;
    background:
        radial-gradient(rgba(0, 40, 100, .055) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(to bottom, transparent 70%, rgba(0, 40, 100, .045) 100%),
        linear-gradient(155deg, #edf1f7 0%, #f4f6fb 50%, #e8edf5 100%);
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 32px;
    position: relative;
    overflow: hidden;
}

/* ─── Watermark de marca (solo desktop) ──────────────────────────
   Reutiliza el mismo logo del header, pero gigante/gris/muy tenue y
   recortado en la esquina — se lee como textura de fondo, no como "el
   mismo logo puesto dos veces". Llena el espacio que deja justify-content:
   flex-start arriba. Oculto en mobile: ese layout ya es edge-to-edge y no
   tiene espacio de sobra para una textura de este tipo. */
.fg-brand-watermark {
    display: none;
}

@media (min-width: 992px) {
    .fg-brand-watermark {
        display: block;
        position: absolute;
        width: 760px;
        height: auto;
        right: -140px;
        bottom: -90px;
        opacity: .05;
        filter: grayscale(100%);
        pointer-events: none;
        z-index: 0;
        user-select: none;
    }
}

/* ─── Soporte: línea discreta dentro de la card ─────────────────
   Historial: primero era una franja pegada al borde superior del panel
   derecho (colapsaba contra la esquina); después un chip flotante sobre la
   card (la card puede ser más alta que el viewport y su borde superior
   termina cerca de y=0, tapando el logo); después una franja de ancho
   completo arriba de las dos columnas. Más simple: vive DENTRO de la card,
   como última línea, mismo peso visual que Política de Privacidad — nunca
   puede superponerse con nada porque es parte del flujo normal de la card. */
.fg-support-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    font-size: .76rem;
    color: var(--fg-m3-text-hint, #9CA3AF);
}

.fg-support-inline i { font-size: .82rem; color: var(--fg-m3-primary, #004A85); }

.fg-support-inline a {
    color: var(--fg-m3-primary, #004A85);
    font-weight: 600;
    text-decoration: none;
}

.fg-support-inline a:hover { text-decoration: underline; }

/* Orbes del right panel: suaves toques azulados sobre el gris perla */
.fg-login-main::before {
    content: '';
    position: absolute;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90, 140, 210, .14) 0%, transparent 68%);
    top: -160px; right: -160px;
    pointer-events: none;
    filter: blur(70px);
    animation: fgOrb1 20s ease-in-out infinite;
}

.fg-login-main::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(70, 120, 200, .10) 0%, transparent 68%);
    bottom: -110px; left: -110px;
    pointer-events: none;
    filter: blur(70px);
    animation: fgOrb2 25s ease-in-out infinite;
}

/* Ya no es una "card" separada (caja blanca con sombra flotando sobre el
   panel): el formulario vive directamente sobre el mismo fondo (degradado +
   patrón de puntos) de .fg-login-main, integrado con el resto de la columna
   derecha en vez de verse como un componente aparte. Los inputs igual se ven
   bien porque .form-control ya trae su propio fondo blanco. Mobile ya tenía
   este mismo tratamiento (sin caja); ahora desktop queda consistente. */
.fg-login-card {
    width: 100%;
    max-width: 620px;
    background: transparent;
    padding:70px;
    position: relative;
    z-index: 1;
}

/* Orbes/partículas del panel izquierdo, reutilizados en .fg-login-main:
   ocultos en desktop (ese panel ya tiene su propio fondo animado), visibles
   solo en mobile para que la pantalla de login se sienta igual de "viva". */
.fg-mobile-fx { display: none; }

.fg-login-card-header { text-align: center; margin-bottom: 28px; }

/* Header del formulario: mobile muestra el logo de FacilityGes (igual que
   siempre), desktop muestra las mascotas en su lugar (fuente 60-80px
   nativos — a 100px de alto, mismo tamaño que tenía el logo, es el límite
   razonable antes de notarse pixelado). Los dos elementos quedan en el DOM
   y se alternan por CSS según el ancho de pantalla, nunca los dos a la vez. */
.fg-header-mascots { display: none; }

.fg-header-logo {
    display: block;
    height: 100px;
    width: auto;
    margin: 0 auto 14px;
}

@media (min-width: 992px) {
    .fg-header-logo { display: none; }

    .fg-header-mascots {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 10px;
        margin: 0 0 14px;
    }

    .fg-header-mascot {
        height:70px;
        width: auto;
        filter: drop-shadow(0 4px 8px rgba(0, 40, 100, .15));
    }
}

.fg-login-card-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--fg-m3-primary-container, #CDE5FF);
    color: var(--fg-m3-primary, #004A85);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 16px;
}

.fg-login-card-header h2 {
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: .2px;
    color: var(--fg-m3-text-primary, #181C20);
    margin-bottom: 6px;
}

.fg-login-card-header p {
    color: var(--fg-m3-text-secondary, #404850);
    margin: 0; font-size: .875rem;
}

/* ─── Inputs con icono ───────────────────────────────────────── */
.fg-input-icon-wrapper { position: relative; }

.fg-input-icon {
    position: absolute;
    top: 50%; left: 14px;
    transform: translateY(-50%);
    color: var(--fg-m3-text-hint, #9CA3AF);
    font-size: .84rem;
}

.fg-input-with-icon { padding-left: 40px; }

.fg-password-wrapper { position: relative; }
.fg-password-wrapper .form-control { padding-right: 40px; }
.fg-password-wrapper .fg-input-with-icon { padding-right: 40px; }

.fg-password-toggle {
    position: absolute;
    top: 50%; right: 14px;
    transform: translateY(-50%);
    color: var(--fg-m3-text-hint, #9CA3AF);
    cursor: pointer;
    transition: color .15s;
}

.fg-password-toggle:hover { color: var(--fg-m3-text-secondary, #404850); }

/* ─── Form controls ──────────────────────────────────────────── */
.form-control {
    border-color: var(--fg-m3-outline, #BFC7D1);
    border-radius: var(--fg-m3-radius, 12px);
    color: var(--fg-m3-text-primary, #181C20);
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus {
    border-color: var(--fg-m3-primary, #004A85);
    box-shadow: 0 0 0 3px var(--fg-m3-primary-container, #CDE5FF);
}

.form-control::placeholder { color: var(--fg-m3-text-hint, #9CA3AF); }

label {
    color: var(--fg-m3-text-secondary, #404850);
    font-size: .84rem; font-weight: 500;
    margin-bottom: 6px;
}

/* ─── Recordarme ─────────────────────────────────────────────── */
.fg-login-options { display: flex; align-items: center; font-size: .84rem; }

.fg-checkbox-label {
    display: flex; align-items: center; gap: 6px;
    color: var(--fg-m3-text-secondary, #404850);
    cursor: pointer; margin: 0;
}

.fg-checkbox-label input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--fg-m3-primary, #004A85);
    cursor: pointer;
}

/* ─── Política de Privacidad: texto simple, peso legal/terciario ──────
   Un chip con el mismo relleno que "Descargar APK" hacía que ambos se
   vieran igual de importantes y el botón de descarga se perdía en el
   patrón repetido. Esto es un dato legal, no una acción: debe pesar
   menos visualmente que la descarga de la app. */
.fg-privacy-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    color: var(--fg-m3-text-hint, #9CA3AF);
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s;
}

.fg-privacy-link i { font-size: .95rem; }

.fg-privacy-link:hover,
.fg-privacy-link:focus {
    color: var(--fg-m3-primary, #004A85);
    text-decoration: underline;
}

/* ─── Boton de acceso ────────────────────────────────────────── */
.btn-primary {
    background-color: var(--fg-m3-primary, #004A85);
    border-color: var(--fg-m3-primary, #004A85);
    color: var(--fg-m3-on-primary, #ffffff);
    border-radius: var(--fg-m3-radius-pill, 999px);
    font-weight: 600; letter-spacing: .3px;
    padding: 11px 24px;
    transition: background-color .2s, box-shadow .2s, transform .15s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--fg-m3-primary-hover, #003A68) !important;
    border-color: var(--fg-m3-primary-hover, #003A68) !important;
    color: var(--fg-m3-on-primary, #ffffff) !important;
    box-shadow: 0 4px 16px rgba(0, 74, 133, .35) !important;
    transform: translateY(-1px);
}

/* ─── Descarga de la app: badges Google Play / App Store ────────── */
.fg-app-download {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 40, 100, .08);
    text-align: center;
}

.fg-app-download-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--fg-m3-text-secondary, #404850);
    margin: 0 0 10px;
}

.fg-app-download-label i {
    color: var(--fg-m3-primary, #004A85);
    margin-right: 6px;
}

.fg-app-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.fg-badge-android, .fg-badge-ios { display: inline-flex; }
.fg-badge-android:empty, .fg-badge-ios:empty { display: none; }

.fg-app-version {
    margin: 8px 0 0;
    font-size: .7rem;
    font-weight: 500;
    color: var(--fg-m3-text-hint, #9CA3AF);
}
.fg-app-version:empty { display: none; }

.fg-app-incompatible {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--fg-m3-text-hint, #9CA3AF);
    margin: 0;
}

.fg-app-incompatible.show { display: flex; }
.fg-app-incompatible i { color: #f0ad4e; }

/* ─── Misc ───────────────────────────────────────────────────── */
.text-danger { color: var(--fg-m3-error, #BA1A1A) !important; }
a { color: var(--fg-m3-primary, #004A85); }
a:hover { color: var(--fg-m3-primary-hover, #003A68); }

/* ─── Responsive (mobile): experiencia tipo app, edge-to-edge ──────
   En vez de la cascada flex de escritorio (que se presta a huecos raros
   cada vez que cambia el alto real del viewport en mobile), acá se usa
   flujo normal de bloque: el body simplemente crece con su contenido,
   sin forzar 100vh en cada nivel intermedio. La card deja de ser una
   tarjeta flotando sobre fondo gris (sombra, borde redondeado, ancho
   acotado, márgenes) y pasa a ocupar toda la pantalla — igual que la
   pantalla de login nativa de una app: sin espacios sobrantes alrededor. */
@media (max-width: 991px) {
    .fg-login-aside { display: none; }

    body.fg-login-body {
        display: block;
        overflow-x: hidden;   /* orbes decorativos no generan scroll lateral */
    }
    body.fg-login-body > form,
    .fg-login-wrapper {
        display: block;
    }

    .fg-login-main {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;   /* alto real visible, ver comentario en body.fg-login-body arriba */
        padding: 0;
        display: block;
        /* overflow:hidden (heredado de la regla base) es a propósito: recorta los
           orbes decorativos ::before/::after (520px/400px con offsets negativos
           tipo right:-160px) para que no se salgan del ancho de pantalla y generen
           scroll horizontal. No pisar con overflow:visible acá. */
        overflow: hidden;
    }

    .fg-login-card {
        width: 100%;
        max-width: none;      /* sin ancho acotado: la card ES la pantalla */
        margin: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 24px 24px 40px;
    }

    /* iOS/Android hacen zoom automático al enfocar un input con font-size
       menor a 16px. Bootstrap trae .form-control a .9rem (~14.4px), lo que
       obligaba a hacer zoom manual cada vez que se tocaba Usuario/Contraseña.
       Forzamos 16px solo en mobile para eliminar ese comportamiento. */
    .form-control { font-size: 16px; }

    .fg-header-logo { height: 72px; }

    /* El patrón de puntos de fondo pasa a desplazarse (mismo keyframe que
       .fg-login-pattern-overlay en el panel izquierdo), para que el fondo
       mobile tenga la misma sensación de movimiento sutil. */
    .fg-login-main { animation: fgPatternDrift 25s linear infinite; }

    .fg-mobile-fx { display: block; z-index: 0; }

    .fg-morb-1 {
        width: 260px; height: 260px;
        left: 50%; top: 14%;
        transform: translateX(-50%);
        background: radial-gradient(circle, rgba(0, 90, 160, .16) 0%, transparent 68%);
        animation: fgOrb3 22s ease-in-out infinite;
    }

    .fg-mp1 { width: 5px; height: 5px; left: 15%; top: 10%;  background: rgba(0, 90, 160, .6);   color: rgba(0, 90, 160, .6);   box-shadow: 0 0 12px 5px rgba(0, 90, 160, .3);   animation: fgPart1 9s  ease-in-out infinite; }
    .fg-mp2 { width: 4px; height: 4px; left: 80%; top: 16%;  background: rgba(55, 242, 255, .65); color: rgba(55, 242, 255, .65); box-shadow: 0 0 11px 4px rgba(55, 242, 255, .3); animation: fgPart2 11s ease-in-out infinite 2s; }
    .fg-mp3 { width: 4px; height: 4px; left: 20%; top: 80%;  background: rgba(0, 120, 122, .55); color: rgba(0, 120, 122, .55); box-shadow: 0 0 10px 4px rgba(0, 120, 122, .26); animation: fgPart1 10s ease-in-out infinite 4s; }
    .fg-mp4 { width: 3px; height: 3px; left: 68%; top: 86%;  background: rgba(0, 90, 160, .55);  color: rgba(0, 90, 160, .55);  box-shadow: 0 0 9px  4px rgba(0, 90, 160, .22);  animation: fgPart2 8s  ease-in-out infinite 1.5s; }

    .fg-mp1::after { animation-delay: .2s; }
    .fg-mp2::after { animation-delay: 1s; }
    .fg-mp3::after { animation-delay: .6s; }
    .fg-mp4::after { animation-delay: 1.5s; }
}

@media (max-width: 480px) {
    .fg-login-card { padding: 20px 20px 32px; }
    .fg-login-card-header { margin-bottom: 24px; }
    .fg-header-logo { height: 80px; }
    .fg-login-card-header h2 { font-size: 1.3rem; }
    .form-group { margin-bottom: 16px; }
}

/* ─── Responsive (alto, desktop): ventana corta con panel izquierdo visible
   (DevTools abierto, netbooks). Compacta el panel izquierdo y la card sin
   tocar el layout mobile de arriba.                                      */
@media (max-height: 740px) and (min-width: 992px) {
    .fg-login-aside { padding: 32px 48px; }
    .fg-login-brand-logo { height: 50px; }
    .fg-login-tagline { font-size: 1.35rem; margin-bottom: 26px; }
    .fg-login-features { gap: 10px; }
    .fg-login-features li { padding-bottom: 10px; font-size: .9rem; }
    .fg-login-features li i { width: 32px; height: 32px; }
    .fg-login-copyright { bottom: 60px; }

    .fg-login-card { padding: 30px 36px; }
    .fg-login-card-header { margin-bottom: 22px; }
    .fg-header-mascot { height: 76px; }
    .fg-login-card-header h2 { font-size: 1.35rem; }
    .form-group { margin-bottom: 14px; }
}

@media (max-height: 620px) and (min-width: 992px) {
    .fg-login-aside { padding: 20px 44px; }
    .fg-login-brand { margin-bottom: 4px; }
    .fg-login-brand-logo { height: 88px; }
    .fg-login-tagline { font-size: 1.15rem; margin-bottom: 18px; }
    .fg-login-features { gap: 7px; }
    .fg-login-features li { padding-bottom: 7px; font-size: .84rem; gap: 10px; }
    .fg-login-features li i { width: 28px; height: 28px; font-size: .78rem; }
    .fg-login-copyright { font-size: .7rem; bottom: 56px; }

    .fg-login-card { padding: 22px 30px; border-radius: 16px; }
    .fg-login-card-header { margin-bottom: 16px; }
    .fg-header-mascot { height: 58px; }
    .fg-login-card-header h2 { font-size: 1.2rem; margin-bottom: 2px; }
    .fg-login-card-header p { font-size: .8rem; }
    .form-group { margin-bottom: 11px; }
    label { margin-bottom: 3px; }
    .btn-primary { padding: 9px 24px; }
}

/* ─── Responsive (alto, mobile): landscape de celular / pantallas bajas ── */
@media (max-height: 620px) and (max-width: 991px) {
    .fg-login-card { padding: 16px 20px 24px; }
    .fg-login-card-header { margin-bottom: 14px; }
    .fg-header-logo { height: 48px; }
    .fg-login-card-header h2 { font-size: 1.15rem; margin-bottom: 2px; }
    .fg-login-card-header p { font-size: .8rem; }
    .form-group { margin-bottom: 10px; }
    label { margin-bottom: 3px; }
    .btn-primary { padding: 9px 24px; }
}

@media (max-height: 500px) {
    .fg-header-logo { height: 46px; }
    .fg-header-mascot { height: 46px; }
    .fg-login-card-header h2 { font-size: 1.05rem; }
    .fg-login-card-header p { display: none; }
    .fg-login-options { margin-bottom: 8px; }
    .form-group.mt-3 { margin-top: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════
   MD3 APPS BOTTOM SHEET
   ══════════════════════════════════════════════════════════════ */
:root {
    --md-primary:      var(--fg-m3-primary);
    --md-surface:      #ffffff;
    --md-surf-var:     var(--fg-m3-surface);
    --md-on-surface:   var(--fg-m3-text-primary);
    --md-on-surf-var:  var(--fg-m3-text-secondary);
    --md-outline:      var(--fg-m3-outline-variant);
    --md-sheet-r:      28px;
    --md-card-r:       14px;
    --md-scrim:        rgba(0, 0, 0, .32);
    --md-android:      #3ddc84;
    --md-android-cont: var(--fg-m3-success-container);
    --md-android-on:   var(--fg-m3-on-success-container);
    --md-ios-cont:     var(--fg-m3-secondary-container);
    --md-ios-on:       var(--fg-m3-on-secondary-container);
}

/* ── Scrim ────────────────────────────────────────────────────── */
.md3-scrim { position: fixed; inset: 0; background: transparent; z-index: 299; display: none; transition: background .38s; }
.md3-scrim.open { display: block; background: var(--md-scrim); }

/* ── Bottom sheet ─────────────────────────────────────────────── */
.md3-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--md-surface);
    border-radius: var(--md-sheet-r) var(--md-sheet-r) 0 0;
    box-shadow: 0 -8px 48px rgba(0, 0, 0, .18);
    z-index: 300; max-height: 80vh;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .38s cubic-bezier(.2, 0, 0, 1);
}

.md3-sheet.open { transform: translateY(0); }

.md3-sheet-handle-row { padding: 12px 0 0; display: flex; justify-content: center; cursor: pointer; flex-shrink: 0; }
.md3-sheet-handle { width: 32px; height: 4px; border-radius: 2px; background: #d0d3dd; transition: background .15s; }
.md3-sheet-handle-row:hover .md3-sheet-handle { background: #b0b3bc; }

.md3-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 12px; flex-shrink: 0; border-bottom: 1px solid var(--md-outline); }
.md3-sheet-title  { font-size: .94rem; font-weight: 700; color: var(--md-on-surface); display: flex; align-items: center; gap: 8px; }
.md3-sheet-title i { color: var(--md-primary); font-size: .9rem; }
.md3-sheet-close  { background: none; border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--md-on-surf-var); font-size: .9rem; transition: background .15s; }
.md3-sheet-close:hover { background: rgba(0, 0, 0, .07); }

.md3-sheet-body { overflow-y: auto; flex: 1; padding: 16px 20px 64px; }

/* ── App card ─────────────────────────────────────────────────── */
.md3-app-card { display: flex; flex-direction: column; border-radius: var(--md-card-r); border: 1px solid var(--md-outline); margin-bottom: 10px; background: var(--md-surface); overflow: hidden; transition: box-shadow .2s; }
.md3-app-card:last-child { margin-bottom: 0; }
.md3-app-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .07); }

.md3-card-header { display: flex; align-items: center; gap: 14px; padding: 13px 16px; cursor: pointer; transition: background .15s; user-select: none; }
.md3-card-header:hover { background: var(--md-surf-var); }

.md3-card-chevron { color: var(--md-on-surf-var); font-size: .78rem; flex-shrink: 0; margin-left: 2px; pointer-events: none; transition: transform .32s cubic-bezier(.2, 0, 0, 1); }
.md3-card-chevron.open { transform: rotate(180deg); }

.md3-app-desc { max-height: 0; overflow: hidden; transition: max-height .38s cubic-bezier(.2, 0, 0, 1); }
.md3-app-desc.open { max-height: 240px; }
.md3-desc-inner { padding: 10px 16px 14px; border-top: 1px solid var(--md-outline); font-size: .8rem; color: var(--md-on-surf-var); line-height: 1.55; }

.md3-app-logo { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(0, 0, 0, .06); flex-shrink: 0; background: #f5f5f5; }
.md3-app-body { flex: 1; min-width: 0; }
.md3-app-name { font-size: .88rem; font-weight: 700; color: var(--md-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md3-app-ver  { font-size: .72rem; color: var(--md-on-surf-var); margin-top: 2px; }

.md3-plat-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.md3-chip { display: inline-flex; align-items: center; gap: 3px; font-size: .65rem; font-weight: 600; padding: 2px 7px; border-radius: 8px; line-height: 1.5; }
.md3-chip-android { background: var(--md-android-cont); color: var(--md-android-on); }
.md3-chip-ios     { background: var(--md-ios-cont); color: var(--md-ios-on); }

.md3-app-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; flex-shrink: 0; }

/* ── Botones de descarga ──────────────────────────────────────── */
.md3-btn { display: inline-flex; align-items: center; gap: 7px; font-size: .73rem; font-weight: 700; padding: 7px 16px; border-radius: 22px; border: none; cursor: pointer; text-decoration: none !important; white-space: nowrap; letter-spacing: .25px; transition: transform .16s cubic-bezier(.2, 0, 0, 1), box-shadow .18s, filter .16s; line-height: 1.35; position: relative; overflow: hidden; }
.md3-btn:hover, .md3-btn:focus, .md3-btn:active, .md3-btn:visited { text-decoration: none !important; }
.md3-btn:hover  { transform: translateY(-2px); filter: brightness(.94) saturate(1.1); box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
.md3-btn:active { transform: translateY(0); filter: brightness(.88); }

/* Antes usaban colores de marca (verde Android / negro Apple); chocaban con
   la paleta. Un chip pálido se perdía en el patrón repetido; el mismo azul
   de "Ingresar" se confundía con el botón primario. Usamos el color
   SECUNDARIO de la paleta M3 (teal, ya presente en los orbes del panel
   izquierdo) — tiene peso propio, es claramente distinto de "Ingresar", y
   sigue siendo parte del mismo sistema de color de la marca. */
.md3-btn-apk, .md3-btn-ipa {
    background: var(--fg-m3-secondary, #00696B);
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 105, 107, .28);
}
.md3-btn-apk:hover, .md3-btn-apk:focus, .md3-btn-apk:visited,
.md3-btn-ipa:hover, .md3-btn-ipa:focus, .md3-btn-ipa:visited {
    color: #ffffff !important;
}
.md3-btn-apk:hover, .md3-btn-ipa:hover {
    background: var(--fg-m3-secondary-hover, #00504F);
    box-shadow: 0 4px 14px rgba(0, 105, 107, .38);
    filter: none;
}
.md3-btn-apk i, .md3-btn-ipa i { font-size: .85rem; }

.md3-badge-link { display: inline-block; line-height: 0; transition: opacity .15s; }
.md3-badge-link:hover { opacity: .82; }
.md3-badge-img { height: 30px; width: auto; }

.md3-store-fallback { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 9px; background: #111; color: #fff; text-decoration: none !important; border: 1.5px solid rgba(255, 255, 255, .08); transition: opacity .15s, box-shadow .18s; white-space: nowrap; }
.md3-store-fallback:hover { color: #fff; opacity: .88; box-shadow: 0 3px 10px rgba(0, 0, 0, .28); }
.md3-sf-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.md3-sf-text { display: flex; flex-direction: column; line-height: 1.2; }
.md3-sf-sub  { font-size: .51rem; opacity: .72; text-transform: uppercase; letter-spacing: .4px; }
.md3-sf-name { font-size: .78rem; font-weight: 700; }
.md3-gplay-fallback .md3-sf-icon  { color: #a8d5a2; }
.md3-astore-fallback .md3-sf-icon { color: #d4d4d4; }

/* ── Responsive (sheet) ───────────────────────────────────────── */
@media (max-width: 600px) {
    .md3-sheet { max-height: 92vh; }
    .md3-sheet-body { padding: 12px 12px 64px; }
    .md3-card-header { flex-wrap: wrap; align-items: flex-start; padding: 12px; gap: 6px 12px; }
    .md3-app-logo { width: 44px; height: 44px; order: 1; flex-shrink: 0; }
    .md3-app-body { order: 2; flex: 1; min-width: 0; }
    .md3-card-chevron { order: 3; flex-shrink: 0; margin-top: 3px; }
    .md3-app-actions { order: 4; flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding-left: 56px; margin-top: 2px; }
    .md3-btn { font-size: .71rem; padding: 6px 13px; border-radius: 20px; }
}