/* ==========================================================================
   INICIO DE SESIÓN -- pantalla dividida (login.php). Copia de farmacia/css/login.css (02-11-2026),
   sin el bloque .lgp de los diálogos de ingreso, que solo existe en logística.

   DISEÑO DE BEERIS Y BEELIS (21-10-2026). Los sistemas de BEETIC comparten la
   forma de su pantalla de acceso:
     - de BeeRIS, el azul de la marca con un panal que se va llenando de miel
       (funciones/panal_acceso.php) y la hora del servidor al pie;
     - de BeeLIS, los resplandores del fondo, el lema a dos tonos, las cuatro
       tarjetas de lo que hace el sistema, el formulario sobre gris claro con
       iconos en los campos, y la firma y la versión al pie del formulario.
   El acento de logística es la miel; el de BeeLIS es el verde agua.

   Bajo los 1000px de ancho la mitad de la marca no se muestra: el logo completo
   pasa arriba del formulario y queda una franja de color en el borde superior.

   La capa es fija y cubre la página entera porque menu.php se incluye desde
   cualquier pantalla: sin sesión, lo que esa pantalla alcance a dibujar debajo no
   debe verse. Va en 1035, por debajo del fondo de las modales de Bootstrap (1040)
   y de SweetAlert (1060): «Recuperar contraseña» y el diálogo de pertenencias se
   abren encima.

   No usa clases de Bootstrap a propósito: unas pantallas cargan la versión 4 y
   otras la 5, y el login tiene que verse igual en las dos.

   La tipografía es Manrope, la de BeeRIS, servida desde css/fonts/manrope.
   ========================================================================== */

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/manrope/manrope-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/manrope/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.lg {
    --lg-azul: #0B2A4E;
    --lg-azul-2: #123A68;
    --lg-azul-texto: #B9C6D6;
    --lg-azul-tenue: #8FA1B8;
    --lg-miel: #F7A81B;
    --lg-miel-claro: #FCD58A;
    --lg-miel-tinta: #9A6200;
    --lg-fondo: #F3F6F9;
    --lg-superficie: #FFFFFF;
    --lg-linea: #D5DCE5;
    --lg-texto: #12233B;
    --lg-texto-2: #5A6779;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1035;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr);
    overflow-y: auto;
    background: var(--lg-fondo);
    color: var(--lg-texto);
    font-family: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
}

.lg *,
.lg *::before,
.lg *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Izquierda: la marca
   ========================================================================== */

.lg__marca {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 48px clamp(40px, 5vw, 80px);
    background: var(--lg-azul);
    color: #fff;
}

.lg__marca > * {
    position: relative;
    z-index: 1;
}

/* Dos luces suaves (arriba a la izquierda, azul; abajo a la derecha, miel) que le
   quitan al fondo lo plano. */
.lg__marca > .lg__resplandor {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 10%, #1F4A73 0%, transparent 55%),
        radial-gradient(ellipse at 95% 95%, rgba(247, 168, 27, .22) 0%, transparent 45%);
}

/* El panal cubre toda la mitad y se desvanece hacia la esquina del texto, para que
   las celdas no pasen por detrás de las letras. */
.lg__marca > .lg__panal {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: radial-gradient(95% 100% at 100% 30%, #000 20%, transparent 66%);
    mask-image: radial-gradient(95% 100% at 100% 30%, #000 20%, transparent 66%);
}

.lg__panal .celda {
    fill: none;
    stroke: rgba(255, 255, 255, .11);
    stroke-width: 1.2;
}

/* Las celdas con miel se llenan y se vacían despacio, cada una a su tiempo. */
.lg__panal .miel {
    fill: var(--lg-miel);
    stroke: none;
    opacity: 0;
    animation: lg-miel 8s ease-in-out infinite;
}

@keyframes lg-miel {
    0%, 100% { opacity: 0; }
    35%, 55% { opacity: .45; }
}

/* ---------- El logo: el hexágono de miel con las cajas dentro ---------- */

.lg__logo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
}

.lg__logo-hex {
    flex: 0 0 64px;
    width: 64px;
    height: 72px;
}

.lg__logo-hex polygon,
.lg__mini polygon {
    fill: rgba(247, 168, 27, .12);
    stroke: var(--lg-miel);
    stroke-width: 3;
    stroke-linejoin: round;
}

/* El icono se monta sobre el hexágono. */
.lg__logo-icono {
    position: absolute;
    left: 0;
    top: 50%;
    width: 64px;
    margin-top: -13px;
    text-align: center;
    font-size: 24px;
    line-height: 26px;
    color: var(--lg-miel);
}

.lg__logo-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lg__logo-nombre {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
}

.lg__logo-bajada {
    margin-top: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lg-miel);
}

.lg__logo-firma {
    margin-top: 10px;
    padding: 2px 12px;
    border: 1.5px solid rgba(255, 255, 255, .85);
    border-radius: 8px;
    font-size: 12px;
    color: #fff;
}

/* ---------- El lema y las tarjetas, centrados en el alto que queda ---------- */

.lg__lema {
    max-width: 600px;
    margin: auto 0;
    padding: 32px 0;
}

.lg__antetitulo {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lg-miel);
}

.lg__lema-titulo {
    max-width: 13em;
    margin: 0;
    font-size: clamp(2.1rem, 3.4vw, 3.3rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: #fff;
}

.lg__lema-titulo span {
    color: var(--lg-miel);
    background: linear-gradient(90deg, var(--lg-miel), var(--lg-miel-claro));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lg__lema-bajada {
    max-width: 28em;
    margin: 18px 0 0;
    font-size: 1.08rem;
    line-height: 1.5;
    color: var(--lg-azul-texto);
}

.lg__pilares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.lg__pilar {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: transform .2s, border-color .2s, background-color .2s;
}

.lg__pilar:hover {
    transform: translateY(-2px);
    border-color: rgba(247, 168, 27, .4);
    background: rgba(255, 255, 255, .07);
}

.lg__pilar-icono {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(247, 168, 27, .16);
    box-shadow: inset 0 0 0 1px rgba(247, 168, 27, .3);
    color: var(--lg-miel-claro);
    font-size: 15px;
}

.lg__pilar-titulo {
    margin-top: 12px;
    font-weight: 700;
    color: #fff;
}

.lg__pilar-texto {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--lg-azul-texto);
}

/* ---------- Fecha y hora del servidor, en cifras que no bailan ---------- */

.lg__pie-marca {
    font-size: 13px;
    color: var(--lg-azul-tenue);
}

.lg__pie-marca time {
    font-variant-numeric: tabular-nums;
}

.lg__hora {
    margin-left: 8px;
    font-weight: 700;
    color: #fff;
}

/* ==========================================================================
   Derecha: el formulario
   ========================================================================== */

.lg__panel {
    position: relative;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--lg-fondo);
}

/* La franja de color del borde superior: solo en teléfonos, donde no está la marca. */
.lg__franja {
    display: none;
    height: 4px;
    background: linear-gradient(90deg, var(--lg-azul), var(--lg-miel), var(--lg-azul));
}

.lg__centro {
    flex: 1;
    display: flex;
    padding: 40px 28px;
}

/* Se centra con margin:auto y no con align-items: cuando el contenido no cabe en el
   alto (teléfono apaisado, pantallas chicas con reCAPTCHA), el centrado por flex lo
   corta por arriba y esa parte no se alcanza ni desplazando. */
.lg__caja {
    width: 100%;
    max-width: 420px;
    margin: auto;
}

/* El logo completo va solo en teléfonos; en pantallas anchas, el hexágono solo. */
.lg__logo--claro {
    display: none;
}

.lg__logo--claro .lg__logo-nombre {
    color: var(--lg-azul);
}

.lg__logo--claro .lg__logo-bajada {
    color: var(--lg-miel-tinta);
}

.lg__mini {
    position: relative;
    display: block;
    width: 52px;
    height: 58px;
}

.lg__mini svg {
    width: 52px;
    height: 58px;
}

.lg__mini .fas {
    position: absolute;
    left: 0;
    top: 50%;
    width: 52px;
    margin-top: -10px;
    text-align: center;
    font-size: 19px;
    line-height: 20px;
    color: var(--lg-miel-tinta);
}

.lg__titulo {
    margin: 22px 0 0;
    font-family: inherit;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--lg-texto);
}

.lg__bajada {
    margin: 8px 0 30px;
    font-size: 16px;
    color: var(--lg-texto-2);
}

.lg__campo {
    margin-bottom: 18px;
}

.lg__rotulo {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lg-texto);
}

.lg__entrada {
    position: relative;
}

.lg__input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--lg-linea);
    border-radius: 12px;
    background: var(--lg-superficie);
    color: var(--lg-texto);
    /* 16px: con menos, Safari en el iPhone agranda la página al tocar el campo. */
    font: inherit;
    font-size: 16px;
    outline: 0;
    transition: border-color .15s, box-shadow .15s;
}

.lg__input::placeholder {
    color: #9AA5B4;
}

.lg__input:hover {
    border-color: #B3BFCD;
}

.lg__input:focus {
    border-color: var(--lg-azul-2);
    box-shadow: 0 0 0 4px rgba(18, 58, 104, .13);
}

/* El icono del campo va después del input en el HTML para poder teñirse al
   enfocarlo con el selector de hermano. */
.lg__icono {
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -8px;
    font-size: 15px;
    line-height: 16px;
    color: #8A96A6;
    pointer-events: none;
    transition: color .15s;
}

.lg__input:focus ~ .lg__icono {
    color: var(--lg-azul-2);
}

.lg__input--clave {
    padding-right: 48px;
}

.lg__ver {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--lg-texto-2);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.lg__ver:hover {
    background: #EEF2F6;
    color: var(--lg-texto);
}

.lg__ver:focus-visible,
.lg__boton:focus-visible,
.lg__enlace:focus-visible {
    outline: 2px solid var(--lg-azul-2);
    outline-offset: 2px;
}

.lg__mayus {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lg-miel-tinta);
}

.lg__mayus[hidden] {
    display: none;
}

.lg__captcha {
    display: flex;
    justify-content: center;
}

/* El margen va en el widget y solo cuando existe: sin reCAPTCHA (o antes de que
   cargue) el contenedor queda vacío y no debe dejar hueco. */
.lg__captcha .g-recaptcha:not(:empty) {
    margin: 4px 0 18px;
}

.lg__estado {
    margin-bottom: 8px;
    text-align: center;
}

/* login_user() escribe el error con su propio color y tamaño en línea. */
.lg__estado span {
    color: #C0392B !important;
    font-size: 14px !important;
}

.lg__cargando {
    display: none;
    margin-bottom: 8px;
    text-align: center;
}

.lg__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--lg-azul), var(--lg-azul-2));
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px -8px rgba(11, 42, 78, .45);
    transition: box-shadow .2s, transform .1s;
}

.lg__boton:hover {
    box-shadow: 0 14px 28px -8px rgba(11, 42, 78, .55);
}

.lg__boton:active {
    transform: scale(.99);
}

.lg__boton-flecha {
    font-size: 13px;
    color: var(--lg-miel);
    transition: transform .2s;
}

.lg__boton:hover .lg__boton-flecha {
    transform: translateX(3px);
}

.lg__olvido {
    margin: 18px 0 0;
    text-align: center;
}

.lg__enlace,
.lg__enlace:hover {
    font-size: 14px;
    font-weight: 600;
    color: var(--lg-azul-2);
    text-decoration: none;
}

.lg__enlace:hover {
    text-decoration: underline;
}

/* ---------- La firma y la versión ---------- */

.lg__pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
    padding: 0 40px 24px;
    font-size: 12.5px;
    color: var(--lg-texto-2);
}

.lg__pie b {
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--lg-azul);
}

.lg__version {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* ---------- La entrada: una sola vez, al cargar ---------- */

.lg__logo,
.lg__antetitulo,
.lg__lema-titulo,
.lg__lema-bajada,
.lg__pilar,
.lg__caja {
    animation: lg-entrar .6s cubic-bezier(.2, .7, .2, 1) both;
}

.lg__antetitulo { animation-delay: .08s; }
.lg__lema-titulo { animation-delay: .16s; }
.lg__lema-bajada { animation-delay: .24s; }
.lg__pilar:nth-child(1) { animation-delay: .32s; }
.lg__pilar:nth-child(2) { animation-delay: .41s; }
.lg__pilar:nth-child(3) { animation-delay: .50s; }
.lg__pilar:nth-child(4) { animation-delay: .59s; }
.lg__caja { animation-delay: .12s; }

@keyframes lg-entrar {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Pantallas bajas: las tarjetas se comprimen ---------- */

@media (min-width: 1001px) and (max-height: 760px) {
    .lg__marca { padding-top: 32px; padding-bottom: 28px; }
    .lg__pilar-texto { display: none; }
    .lg__pilares { margin-top: 22px; }
}

/* ---------- Tabletas en vertical y teléfonos: solo el formulario ---------- */

@media (max-width: 1000px) {
    .lg {
        grid-template-columns: 1fr;
    }

    .lg__marca {
        display: none;
    }

    .lg__franja {
        display: block;
    }

    .lg__centro {
        padding: 32px 22px 24px;
    }

    .lg__caja {
        margin-top: 0;
    }

    .lg__logo--claro {
        display: flex;
        justify-content: center;
        margin-bottom: 32px;
    }

    .lg__mini {
        display: none;
    }

    .lg__titulo {
        margin-top: 0;
        font-size: 26px;
    }

    .lg__pie {
        flex-direction: column;
        padding: 0 22px 24px;
    }
}

/* El reCAPTCHA mide 304px fijos: en las pantallas más angostas se sale del margen.
   Va con zoom y no con transform, que achica el dibujo pero no el espacio que ocupa. */
@media (max-width: 359px) {
    .lg__captcha .g-recaptcha {
        zoom: .88;
    }

    .lg__logo-bajada {
        letter-spacing: .06em;
    }
}

/* ---------- Sin movimiento ----------
   Quien lo pide en su equipo ve el panal quieto, con sus celdas de miel puestas, y
   todo ya en su lugar. */
@media (prefers-reduced-motion: reduce) {
    .lg__panal .miel { animation: none; opacity: .4; }
    .lg__logo, .lg__antetitulo, .lg__lema-titulo, .lg__lema-bajada, .lg__pilar, .lg__caja { animation: none; }
    .lg__pilar, .lg__boton, .lg__boton-flecha { transition: none; }
}


/* --------------------------------------------------------------------------
   MOVILIZACIÓN (02-11-2026): jquery/procesar/login.php responde con un
   <div class="alert alert-danger"> de Bootstrap y login_user() escribe un
   spinner-border mientras ingresa. Se visten con los tokens .lg para que no
   cambie según la versión de Bootstrap.
   -------------------------------------------------------------------------- */
.lg__estado:empty {
    display: none;
}

.lg__estado .alert {
    margin: 0;
    padding: 10px 12px !important;
    border: 1px solid rgba(192, 57, 43, .28);
    border-radius: 10px;
    background: rgba(192, 57, 43, .07);
    color: #8E2A1F;
    font-size: 13px !important;
    line-height: 1.45;
    text-align: left;
}

.lg__estado .alert span {
    display: block;
}

.lg__estado .spinner-border {
    color: var(--lg-azul);
}

.lg__estado:not(:has(.alert)) {
    color: var(--lg-texto-2);
    font-size: 14px;
}

/* ==========================================================================
   «Recuperar contraseña» (modal/box_recuperar_pass.php), 03-11-2026.
   Es una modal de Bootstrap (cuelga del <body>, fuera de .lg): repite los
   tokens de .lg y usa sus campos (.lg__campo, .lg__input, .lg__boton). Las
   clases de validación las pone jquery.js (is-valid / is-invalid).
   ========================================================================== */

.lg-modal {
    --lg-azul: #0B2A4E;
    --lg-azul-2: #123A68;
    --lg-miel: #F7A81B;
    --lg-miel-tinta: #9A6200;
    --lg-fondo: #F3F6F9;
    --lg-superficie: #FFFFFF;
    --lg-linea: #D5DCE5;
    --lg-texto: #12233B;
    --lg-texto-2: #5A6779;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: var(--lg-superficie);
    color: var(--lg-texto);
    font-family: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    box-shadow: 0 30px 60px -20px rgba(11, 42, 78, .45);
}
.lg-modal *, .lg-modal *::before, .lg-modal *::after { box-sizing: border-box; }

.lg-modal__cabeza {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 18px;
    border-top: 4px solid var(--lg-miel);
}
.lg-modal__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--lg-azul);
    color: var(--lg-miel);
    font-size: 17px;
}
.lg-modal__titulo { margin: 0; font-family: inherit; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--lg-texto); }
.lg-modal__bajada { margin: 2px 0 0; font-size: 14px; color: var(--lg-texto-2); }
.lg-modal__cerrar {
    flex: none;
    width: 36px;
    height: 36px;
    margin: -4px -8px 0 auto;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--lg-texto-2);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.lg-modal__cerrar:hover { background: #EEF2F6; color: var(--lg-texto); }

.lg-modal__cuerpo { padding: 4px 24px 20px; }
.lg-modal__nota { margin: 6px 0 0; font-size: 12.5px; color: var(--lg-texto-2); }

/* Validación de jquery.js sobre el campo. */
.lg-modal .lg__input.is-valid { border-color: #1E7F4F; }
.lg-modal .lg__input.is-invalid { border-color: #B3261E; }
.lg-modal #status_email.invalid-feedback { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #B3261E; }
.lg-modal #status_email.spinner-border {
    position: absolute; top: 50%; right: 14px;
    width: 16px; height: 16px; margin-top: -8px; border-width: 2px;
    color: var(--lg-azul-2);
}

.lg-modal__acciones { display: flex; gap: 10px; margin-top: 4px; }
.lg-modal__principal { flex: 1 1 auto; width: auto; }
.lg-modal__principal:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.lg-modal__secundario {
    flex: none;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--lg-linea);
    border-radius: 12px;
    background: var(--lg-superficie);
    color: var(--lg-texto);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.lg-modal__secundario:hover { border-color: #B3BFCD; background: #F7F9FB; }
.lg-modal__secundario:focus-visible, .lg-modal__cerrar:focus-visible { outline: 2px solid var(--lg-azul-2); outline-offset: 2px; }

.lg-modal__pie {
    padding: 14px 24px;
    border-top: 1px solid var(--lg-linea);
    background: var(--lg-fondo);
    font-size: 13px;
    color: var(--lg-texto-2);
}
/* Mensajes que recovery_pass_user() escribe en el pie (alert de Bootstrap). */
.lg-modal__pie .alert { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; }

/* ==========================================================================
   LOS DIÁLOGOS DEL INGRESO (prefijo .lgp). Copia de logística/css/login.css
   (12-11-2026).

   En movilización lo usa la elección del servicio tras el segundo factor
   (v2_elegir_servicio() en jquery/js_acceso_2fa.js). Es de SweetAlert2: las
   clases llegan por customClass y los botones van con buttonsStyling: false.
   ========================================================================== */

.lgp-fondo.swal2-backdrop-show {
    background: rgba(8, 26, 48, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.lgp-popup {
    --lg-azul: #0B2A4E;
    --lg-azul-2: #123A68;
    --lg-miel: #F7A81B;
    --lg-miel-tinta: #9A6200;
    --lg-fondo: #F3F6F9;
    --lg-linea: #D5DCE5;
    --lg-texto: #12233B;
    --lg-texto-2: #5A6779;

    padding: 30px 28px 24px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 70px -20px rgba(8, 26, 48, .45);
    font-family: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: var(--lg-texto);
}

/* Una franja de miel arriba, como la del login en el teléfono. */
.lgp-popup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--lg-azul), var(--lg-miel), var(--lg-azul));
}

.lgp-titulo {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 !important;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--lg-texto);
}

.lgp-hex {
    position: relative;
    display: block;
    width: 52px;
    height: 58px;
}

.lgp-hex svg {
    width: 52px;
    height: 58px;
}

.lgp-hex polygon {
    fill: rgba(247, 168, 27, .12);
    stroke: var(--lg-miel);
    stroke-width: 3;
    stroke-linejoin: round;
}

.lgp-hex .fas {
    position: absolute;
    left: 0;
    top: 50%;
    width: 52px;
    margin-top: -10px;
    text-align: center;
    font-size: 19px;
    line-height: 20px;
    color: var(--lg-miel-tinta);
}

.lgp-html {
    margin: 10px 0 0 !important;
    padding: 0 !important;
    font-size: 15px;
    color: var(--lg-texto-2);
}

.lgp {
    text-align: left;
}

/* Los errores de jquery/procesar/login.php llegan con su propio color y tamaño en
   línea, pensados para el modal antiguo. */
.lgp-html span[style] {
    color: #B3261E !important;
    font-size: 15px !important;
}

.lgp-intro {
    margin: 0 0 18px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--lg-texto-2);
}

.lgp-intro b {
    color: var(--lg-texto);
}

.lgp-buscar {
    position: relative;
    margin-bottom: 12px;
}

.lgp-buscador {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--lg-linea);
    border-radius: 12px;
    background: #fff;
    color: var(--lg-texto);
    font: inherit;
    font-size: 15px;
    outline: 0;
    transition: border-color .15s, box-shadow .15s;
}

.lgp-buscador:focus {
    border-color: var(--lg-azul-2);
    box-shadow: 0 0 0 4px rgba(18, 58, 104, .13);
}

.lgp-buscar .fas {
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -7px;
    font-size: 14px;
    line-height: 14px;
    color: #8A96A6;
    pointer-events: none;
}

.lgp-lista {
    display: grid;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 2px 4px 4px;
}

/* Cada pertenencia, como las tarjetas de la marca del login: icono en su cuadro de
   miel, el servicio, el departamento y la unidad, y el perfil aparte. */
.lgp-op {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--lg-linea);
    border-radius: 14px;
    background: #fff;
    color: var(--lg-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}

.lgp-op:hover {
    border-color: rgba(247, 168, 27, .7);
    background: #FFFBF3;
    box-shadow: 0 8px 18px -10px rgba(11, 42, 78, .35);
    transform: translateY(-1px);
}

/* El foco con un anillo pegado y no con outline separado: la lista tiene scroll y un
   outline con margen se corta en los bordes. SweetAlert enfoca la primera ficha al
   abrir, así que el anillo tiene que leerse como «aquí está el teclado», no como
   «esta es la elegida». */
.lgp-op:focus {
    outline: 0;
}

.lgp-op:focus-visible {
    border-color: var(--lg-azul-2);
    box-shadow: 0 0 0 3px rgba(18, 58, 104, .16);
}

.lgp-op__icono {
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(247, 168, 27, .14);
    box-shadow: inset 0 0 0 1px rgba(247, 168, 27, .35);
    color: var(--lg-miel-tinta);
    font-size: 16px;
}

.lgp-op__texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lgp-op__titulo {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.lgp-op__detalle {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--lg-texto-2);
}

.lgp-op__perfil {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--lg-azul);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.lgp-op__perfil .fas {
    font-size: 11px;
    color: var(--lg-miel);
}

.lgp-op__perfil--sin {
    background: var(--lg-fondo);
    color: var(--lg-texto-2);
    font-style: italic;
}

.lgp-op__flecha {
    flex: 0 0 auto;
    font-size: 13px;
    color: #A7B1BE;
    transition: transform .15s, color .15s;
}

.lgp-op:hover .lgp-op__flecha {
    color: var(--lg-miel);
    transform: translateX(3px);
}

.lgp-vacio {
    margin: 6px 0;
    text-align: center;
    font-size: 14px;
    color: var(--lg-texto-2);
}

.lgp-vacio[hidden] {
    display: none;
}

.lgp-acciones {
    width: 100%;
    margin: 20px 0 0;
    padding: 0;
}

.lgp-boton,
.lgp-boton-sec {
    min-width: 180px;
    height: 44px;
    margin: 0;
    padding: 0 22px;
    border-radius: 12px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.lgp-boton {
    border: 0;
    background: linear-gradient(90deg, var(--lg-azul), var(--lg-azul-2));
    color: #fff;
    box-shadow: 0 10px 22px -8px rgba(11, 42, 78, .45);
}

.lgp-boton-sec {
    border: 1px solid var(--lg-linea);
    background: #fff;
    color: var(--lg-texto-2);
}

.lgp-boton-sec:hover {
    border-color: #B3BFCD;
    color: var(--lg-texto);
}

.lgp-boton:focus-visible,
.lgp-boton-sec:focus-visible {
    outline: 2px solid var(--lg-azul-2);
    outline-offset: 2px;
}

/* La rueda de «Ingresando al sistema», en los colores del login. */
.lgp-cargador {
    border-color: var(--lg-miel) transparent var(--lg-azul) transparent !important;
}

@media (max-width: 480px) {
    .lgp-popup {
        padding: 26px 16px 18px;
    }

    .lgp-titulo {
        font-size: 20px;
    }

    .lgp-op {
        gap: 11px;
        padding: 11px 12px;
    }

    .lgp-boton,
    .lgp-boton-sec {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lgp-op, .lgp-op__flecha { transition: none; }
    .lgp-op:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   MOVILIZACIÓN (12-11-2026): la ficha elegida mientras se carga el servicio y
   el error de selecionar_servicio_usuario.php, en los colores del login.
   -------------------------------------------------------------------------- */
.lgp-op[hidden] {
    display: none;
}

.lgp-op:disabled {
    cursor: default;
    transform: none;
}

.lgp-op:disabled:not([aria-busy="true"]) {
    opacity: .55;
}

.lgp-op[aria-busy="true"] {
    border-color: var(--lg-miel);
    background: #FFFBF3;
}

.lgp-op[aria-busy="true"] .lgp-op__flecha::before {
    content: "\f110";
    display: inline-block;
    animation: lgp-girar 1s linear infinite;
}

@keyframes lgp-girar {
    to { transform: rotate(360deg); }
}

.lgp-popup .swal2-validation-message {
    margin: 14px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(192, 57, 43, .28);
    border-radius: 10px;
    background: rgba(192, 57, 43, .07);
    color: #8E2A1F;
    font-size: 13.5px;
    line-height: 1.45;
}

.lgp-popup .swal2-validation-message::before {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .lgp-op[aria-busy="true"] .lgp-op__flecha::before { animation: none; }
}