/* ==========================================================================
   INICIO DE SESIÓN -- pantalla dividida (menu.php, rama sin sesión)

   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; }
}

/* ==========================================================================
   LOS DIÁLOGOS DEL INGRESO (prefijo .lgp, 21-10-2026)

   La elección de pertenencia (elegir_pertenencia_login() en jquery/jquery.js) y
   los avisos «Ingresando al sistema» y «No se pudo ingresar». Son de SweetAlert2:
   las clases llegan por customClass (dialogo_login_clases()) y los botones van
   con buttonsStyling: false para que no pinte los suyos.

   El cambio de perfil con sesión iniciada (elegir_perfil_sistema()) es otro
   diálogo, con sus estilos en css/selector_perfil.css.
   ========================================================================== */

.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; }
}