/* ===== Login (index.php) con formato configurable por dominio: gestor_portada.php =====
   body.lp
     + lp-pos-{izquierda|centro|derecha}  posición del recuadro de acceso
     + lp-ef-{efecto}                     efecto elegido
     + lp-a-recuadro / lp-a-imagen        a qué se aplica el efecto (una de las dos o las dos)
     + lp-oscuro                          efectos oscuros aplicados al recuadro
     + lp-bt-{diseño}                     diseño de los botones de acceso
   --lp-alfa: opacidad del fondo del recuadro de acceso (0 a 1) */

@property --lp-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

body.lp {
    --lp-alfa: 1;
    /* Opacidad de los bordes blancos (0 a 1): recuadro de acceso, botones de acceso y campos */
    --lp-borde-recuadro: .45;
    --lp-borde-botones: .55;
    --lp-borde-campos: .5;
    --lp-rgb: 255, 255, 255;
    --lp-texto: #000;
    --lp-suave: #4b5563;
    --lp-mx: 50vw;
    --lp-my: 50vh;
    margin: 0;
    min-height: 100vh;
    background-color: #1d2533;
    overflow-x: hidden;
}
/* Imagen de fondo en su propia capa fija: siempre cubre toda la pantalla sin deformarse (cover),
   sea cual sea su tamaño o el de la ventana; lo que sobra se recorta por los bordes */
body.lp::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: var(--lp-imagen, none);
    background-repeat: no-repeat;
    /* scripts/login_portada.js recorta los márgenes blancos o transparentes que traen algunas imágenes:
       amplía solo la parte con foto hasta cubrir la pantalla. Sin script, cover normal */
    background-size: var(--lp-fondo-tam, cover);
    background-position: var(--lp-fondo-pos, center center);
    pointer-events: none;
}
body.lp.lp-oscuro { --lp-rgb: 15, 18, 28; --lp-texto: #f1f5f9; --lp-suave: #cbd5e1; }

/* ---------- Recuadro de acceso ---------- */
.lp-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    width: 25%;
    min-width: 360px;
    max-width: 480px;
    background: rgba(var(--lp-rgb), var(--lp-alfa));
    color: var(--lp-texto);
    transition: background-color .3s, box-shadow .3s;
}
.lp-pos-derecha .lp-panel { right: 0; }
/* Borde blanco del recuadro: mismo para todos los efectos, con su opacidad */
.lp-panel { outline: 1px solid rgba(255, 255, 255, var(--lp-borde-recuadro)); outline-offset: -1px; }
.lp-oscuro .lp-panel { outline-color: rgba(255, 255, 255, calc(var(--lp-borde-recuadro) * .3)); }
.lp-pos-izquierda .lp-panel { left: 0; }
.lp-caja { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 70px 48px 30px; }

.lp-pos-centro { display: flex; align-items: center; justify-content: center; }
.lp-pos-centro .lp-panel {
    position: relative;
    width: 460px;
    min-width: 0;
    max-width: calc(100% - 32px);
    margin: 4vh 0;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.lp-pos-centro .lp-caja { overflow: visible; padding: 44px 44px 26px; }

.lp-logo { display: block; width: 80%; margin: 0 auto; transition: filter .3s; }
.lp-oscuro .lp-logo { filter: brightness(0) invert(1); }
.lp-titulo { margin: 0; padding-top: 25px; color: var(--lp-texto); font-size: 2em; }
.lp-pos-centro .lp-titulo { font-size: 1.7em; text-align: center; }
/* Fila de Entrar (66 %) y ¿Has olvidado la contraseña? (el resto), los dos del mismo alto */
.lp-acciones { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.lp-acciones .lp-entrar { flex: 0 0 calc(66% - 4px); min-width: 0; height: auto; min-height: 44px; margin: 0 !important; }
.lp-olvido {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 4px 8px;
    /* El mismo color que Entrar, translúcido */
    border: 1px solid color-mix(in srgb, var(--lp-color-entrar, #2FA866) 70%, rgba(255, 255, 255, var(--lp-borde-botones)));
    border-radius: 10px;
    background: color-mix(in srgb, var(--lp-color-entrar, #2FA866) 35%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: color-mix(in srgb, var(--lp-color-entrar, #2FA866) 65%, #000) !important;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    transition: background-color .2s, border-color .2s, transform .15s;
}
.lp-olvido:hover { background: color-mix(in srgb, var(--lp-color-entrar, #2FA866) 50%, transparent); transform: translateY(-1px); }
.lp-oscuro .lp-olvido { color: #fff !important; }
.lp-con-color-botones .lp-olvido { color: var(--lp-color-botones) !important; }
.lp-caja .error { color: #dc2626; }
.lp-oscuro .lp-caja .error { color: #fca5a5; }

/* Campos del formulario: su fondo sigue la opacidad del recuadro (con el recuadro transparente no se ven
   como cajas blancas encima de la imagen) y se adaptan al fondo del efecto */
.lp .form-group-default {
    border-radius: 12px !important;
    overflow: hidden;
    background-color: rgba(255, 255, 255, calc(.18 + var(--lp-alfa) * .82));
    border-color: rgba(255, 255, 255, var(--lp-borde-campos)) !important;
    transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.lp .form-group-default .form-control { background: transparent; }
.lp .form-group-default + .form-group-default { margin-top: 8px; }

/* Colores elegidos en el maestro (solo mandan si se han elegido: clase lp-con-…) */
.lp-con-color-campos .form-group-default .form-control { color: var(--lp-color-campos) !important; }
.lp-con-color-campos .form-group-default .form-control::placeholder { color: color-mix(in srgb, var(--lp-color-campos) 50%, transparent) !important; }
.lp-con-color-campos .form-group-default .form-control:-webkit-autofill { -webkit-text-fill-color: var(--lp-color-campos) !important; caret-color: var(--lp-color-campos); }
.lp-con-color-botones .lp-bt span,
.lp-con-color-botones .lp-bt-contorno .lp-bt:hover span,
.lp-con-color-botones .lp-bt-lista .lp-bt:hover span { color: var(--lp-color-botones) !important; }
.lp-con-color-botones .lp-entrar { color: var(--lp-color-botones) !important; }

/* =====================================================================
   Botón Entrar: color elegido (verde por defecto) y el mismo efecto que el recuadro
   ===================================================================== */
.lp-entrar {
    --lp-entrar: var(--lp-color-entrar, #2FA866);
    position: relative;
    min-width: 120px;
    border: 0 !important;
    border-radius: 10px;
    background: var(--lp-entrar) !important;
    color: #fff;
    font-weight: 600;
    transition: transform .15s, box-shadow .2s, filter .2s, background-color .2s;
}
.lp-entrar:hover, .lp-entrar:focus { filter: brightness(1.07); transform: translateY(-1px); }
.lp-entrar:active { transform: translateY(0); }
/* Cristal */
.lp-a-recuadro:is(.lp-ef-glass, .lp-ef-aurora, .lp-ef-mesh) .lp-entrar {
    background: color-mix(in srgb, var(--lp-entrar) 80%, transparent) !important;
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, var(--lp-borde-botones)), 0 6px 18px color-mix(in srgb, var(--lp-entrar) 35%, transparent);
}
/* Aurora y malla: el color con un degradado que se mueve */
.lp-a-recuadro:is(.lp-ef-aurora, .lp-ef-mesh) .lp-entrar {
    background: linear-gradient(120deg, color-mix(in srgb, var(--lp-entrar) 70%, transparent), color-mix(in srgb, var(--lp-entrar) 45%, #a855f7), color-mix(in srgb, var(--lp-entrar) 70%, transparent)) !important;
    background-size: 200% 100% !important;
    animation: lp-entrar-brillo 6s ease-in-out infinite alternate;
}
@keyframes lp-entrar-brillo { to { background-position: 100% 0; } }
/* Cristal oscuro y partículas */
.lp-a-recuadro:is(.lp-ef-glass_oscuro, .lp-ef-particulas) .lp-entrar {
    background: color-mix(in srgb, var(--lp-entrar) 55%, rgba(15, 18, 28, .6)) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 18px color-mix(in srgb, var(--lp-entrar) 40%, transparent);
}
/* Neumorfismo */
.lp-a-recuadro.lp-ef-neumorfismo .lp-entrar { border-radius: 14px; box-shadow: 6px 6px 14px rgba(120, 134, 160, .6), -6px -6px 14px rgba(255, 255, 255, .85); }
.lp-a-recuadro.lp-ef-neumorfismo .lp-entrar:active { box-shadow: inset 4px 4px 8px rgba(0, 0, 0, .25), inset -4px -4px 8px rgba(255, 255, 255, .3); }
/* Claymorphism */
.lp-a-recuadro.lp-ef-clay .lp-entrar { border-radius: 20px; box-shadow: inset -4px -4px 10px rgba(0, 0, 0, .18), inset 4px 4px 10px rgba(255, 255, 255, .4), 8px 10px 20px color-mix(in srgb, var(--lp-entrar) 35%, transparent); }
/* Neón: contorno del color que brilla */
.lp-a-recuadro.lp-ef-neon .lp-entrar {
    background: color-mix(in srgb, var(--lp-entrar) 14%, transparent) !important;
    box-shadow: inset 0 0 0 1px var(--lp-entrar), 0 0 14px color-mix(in srgb, var(--lp-entrar) 70%, transparent);
    color: #fff;
    text-shadow: 0 0 8px var(--lp-entrar);
    animation: lp-entrar-neon 2.6s ease-in-out infinite;
}
@keyframes lp-entrar-neon { 50% { box-shadow: inset 0 0 0 1px var(--lp-entrar), 0 0 26px var(--lp-entrar); } }
/* Borde giratorio: el anillo de color también alrededor del botón */
.lp-a-recuadro.lp-ef-borde_giratorio .lp-entrar::before {
    content: "";
    position: absolute;
    inset: -3px;
    padding: 3px;
    border-radius: 13px;
    background: conic-gradient(from var(--lp-ang), #f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: lp-gira 4s linear infinite;
}
/* Inclinación 3D: relieve y brillo */
.lp-a-recuadro.lp-ef-tilt3d .lp-entrar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--lp-entrar) 80%, #fff), var(--lp-entrar)) !important;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--lp-entrar) 70%, #000), 0 12px 20px rgba(0, 0, 0, .25);
    transform: translateZ(30px);
}
.lp-a-recuadro.lp-ef-tilt3d .lp-entrar:active { box-shadow: 0 2px 0 color-mix(in srgb, var(--lp-entrar) 70%, #000), 0 4px 10px rgba(0, 0, 0, .25); transform: translateZ(30px) translateY(4px); }
/* Spotlight: el botón brilla con la luz */
.lp-a-recuadro.lp-ef-spotlight .lp-entrar { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-entrar) 60%, #fff), 0 0 22px color-mix(in srgb, var(--lp-entrar) 55%, transparent); }
/* Relleno automático del navegador (usuario y contraseña guardados): Chrome pinta su propio fondo dentro del
   campo y no deja cambiarlo; se recorta a la forma de las letras (background-clip: text) y, como las letras
   llevan su propio color, ese fondo no se ve: el campo queda igual que los que no se rellenan solos */
.lp .form-group-default .form-control:-webkit-autofill,
.lp .form-group-default .form-control:-webkit-autofill:hover,
.lp .form-group-default .form-control:-webkit-autofill:focus,
.lp .form-group-default .form-control:-webkit-autofill:active,
.lp .form-group-default .form-control:autofill {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: var(--lp-texto) !important;
    caret-color: var(--lp-texto);
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    transition: background-color 100000s ease-in-out 0s;
}
.lp .form-group-default.focused { background-color: rgba(255, 255, 255, calc(.4 + var(--lp-alfa) * .6)); }
.lp-a-recuadro:is(.lp-ef-glass, .lp-ef-aurora, .lp-ef-mesh, .lp-ef-tilt3d, .lp-ef-borde_giratorio) .form-group-default { background-color: rgba(255, 255, 255, calc(.14 + var(--lp-alfa) * .45)); }
.lp-oscuro .form-group-default { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, calc(var(--lp-borde-campos) * .35)) !important; }
.lp-oscuro .form-group-default label { color: rgba(255, 255, 255, .65) !important; }
.lp-oscuro .form-group-default .form-control { color: #fff; }
.lp-oscuro .form-group-default .form-control::placeholder { color: rgba(255, 255, 255, .35); }
.lp-oscuro .form-group-default.focused { background: rgba(255, 255, 255, .13); }

.lp-pie { margin: 18px 0 0; color: var(--lp-suave); font-size: 12px; }
.lp-pos-centro .lp-pie { text-align: center; }
.lp-pie a { color: inherit; font-weight: 600; }

/* Capas de efecto: sobre la imagen de fondo (fijas a la pantalla) y dentro del recuadro */
.lp-fondo-efecto, #lp-lienzo { position: fixed; inset: 0; z-index: 1; display: none; pointer-events: none; }
.lp-panel-efecto, #lp-lienzo-panel { position: absolute; inset: 0; z-index: 0; display: none; overflow: hidden; border-radius: inherit; pointer-events: none; }

/* Vista previa del maestro: no se puede entrar ni salir */
.lp-vista-previa .lp-caja a,
.lp-vista-previa .lp-caja button,
.lp-vista-previa .lp-caja input { pointer-events: none; }

/* =====================================================================
   Botones de acceso: 10 diseños, todos los botones del mismo tamaño
   Cada botón lleva imagen, icono y nombre; cada diseño enseña lo suyo.
   ===================================================================== */
.lp-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin-top: 40px; }
.lp-pos-centro .lp-botones { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
.lp-bt {
    --lp-bt-color: #2563EB;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    color: var(--lp-texto);
    text-align: center;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s, background-color .2s, color .2s;
}
.lp-bt[hidden] { display: none; }
.lp-bt:hover { transform: translateY(-3px); }
.lp-bt img { display: none; }
.lp-bt i { font-size: 22px; line-height: 1; }
.lp-bt span { overflow: hidden; max-width: 100%; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; }

/* 1. Imágenes: las de siempre, todas con la misma proporción y recortadas igual */
.lp-bt-imagenes .lp-bt { aspect-ratio: 528 / 416; padding: 0; }
.lp-bt-imagenes .lp-bt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-bt-imagenes .lp-bt :is(i, span) { display: none; }

/* 2. Tarjeta blanca con el icono en un círculo de color */
.lp-bt-tarjeta .lp-bt { aspect-ratio: 4 / 3; padding: 10px; border: 1px solid #E5E7EB; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(16, 24, 40, .08); color: #1B1F27; }
.lp-bt-tarjeta .lp-bt i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--lp-bt-color); color: #fff; font-size: 18px; }
.lp-bt-tarjeta .lp-bt:hover { box-shadow: 0 10px 22px rgba(16, 24, 40, .16); }

/* 3. Cristal */
.lp-bt-cristal .lp-bt { aspect-ratio: 4 / 3; padding: 10px; border: 1px solid rgba(255, 255, 255, var(--lp-borde-botones)); border-radius: 16px; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); box-shadow: 0 6px 20px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, var(--lp-borde-botones)); }
.lp-bt-cristal .lp-bt i { color: var(--lp-bt-color); font-size: 24px; }
.lp-bt-cristal .lp-bt:hover { background: rgba(255, 255, 255, .38); }

/* 4. Degradado de color */
.lp-bt-degradado .lp-bt { aspect-ratio: 4 / 3; padding: 10px; border-radius: 16px; background: linear-gradient(135deg, var(--lp-bt-color), color-mix(in srgb, var(--lp-bt-color) 55%, #1e1b4b)); box-shadow: 0 8px 18px color-mix(in srgb, var(--lp-bt-color) 35%, transparent); color: #fff; }
.lp-bt-degradado .lp-bt i { font-size: 24px; }
.lp-bt-degradado .lp-bt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s; }
.lp-bt-degradado .lp-bt:hover::after { transform: translateX(120%); }

/* 5. Contorno: se rellena al pasar */
.lp-bt-contorno .lp-bt { aspect-ratio: 4 / 3; padding: 10px; border: 2px solid var(--lp-bt-color); border-radius: 14px; background: transparent; color: var(--lp-bt-color); }
.lp-bt-contorno .lp-bt span { color: var(--lp-texto); }
.lp-bt-contorno .lp-bt:hover { background: var(--lp-bt-color); color: #fff; }
.lp-bt-contorno .lp-bt:hover span { color: #fff; }

/* 6. Oscuro neón */
.lp-bt-oscuro .lp-bt { aspect-ratio: 4 / 3; padding: 10px; border: 1px solid rgba(255, 255, 255, calc(var(--lp-borde-botones) * .2)); border-radius: 14px; background: #0B1020; color: #E2E8F0; }
.lp-bt-oscuro .lp-bt i { color: var(--lp-bt-color); font-size: 24px; filter: drop-shadow(0 0 6px var(--lp-bt-color)); }
.lp-bt-oscuro .lp-bt:hover { box-shadow: 0 0 0 1px var(--lp-bt-color), 0 0 18px color-mix(in srgb, var(--lp-bt-color) 55%, transparent); }

/* 7. Neumórfico */
.lp-bt-neumorfico .lp-bt { aspect-ratio: 4 / 3; padding: 10px; border-radius: 18px; background: #E6E9EF; box-shadow: 6px 6px 14px rgba(120, 134, 160, .5), -6px -6px 14px rgba(255, 255, 255, .85); color: #2F3A4C; }
.lp-bt-neumorfico .lp-bt i { color: var(--lp-bt-color); font-size: 24px; }
.lp-bt-neumorfico .lp-bt:hover { transform: none; box-shadow: inset 5px 5px 10px rgba(120, 134, 160, .5), inset -5px -5px 10px rgba(255, 255, 255, .85); }

/* 8. Iconos: círculos de color con el nombre debajo, tres por fila */
.lp-bt-iconos .lp-botones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
.lp-bt-iconos .lp-bt { justify-content: flex-start; padding: 2px; }
.lp-bt-iconos .lp-bt i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lp-bt-color); box-shadow: 0 6px 14px color-mix(in srgb, var(--lp-bt-color) 40%, transparent); color: #fff; font-size: 22px; transition: transform .2s; }
.lp-bt-iconos .lp-bt span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 2.5em; font-size: 11.5px; white-space: normal; }
.lp-bt-iconos .lp-bt:hover { transform: none; }
.lp-bt-iconos .lp-bt:hover i { transform: scale(1.08); }

/* 9. Píldoras: uno debajo de otro, con icono y flecha */
.lp-bt-pildora .lp-botones,
.lp-pos-centro.lp-bt-pildora .lp-botones { grid-template-columns: 1fr; gap: 8px; }
.lp-bt-pildora .lp-bt { flex-direction: row; justify-content: flex-start; gap: 12px; height: 46px; padding: 0 16px 0 6px; border: 1px solid #E5E7EB; border-radius: 999px; background: #fff; color: #1B1F27; }
.lp-bt-pildora .lp-bt i { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lp-bt-color); color: #fff; font-size: 15px; }
.lp-bt-pildora .lp-bt span { flex: 1; font-size: 13.5px; text-align: left; white-space: nowrap; }
.lp-bt-pildora .lp-bt::after { content: "\f105"; font-family: FontAwesome; color: #9AA3B2; font-size: 16px; }
.lp-bt-pildora .lp-bt:hover { transform: translateX(3px); border-color: var(--lp-bt-color); }

/* 10. Lista: enlaces de texto discretos */
.lp-bt-lista .lp-botones { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; }
.lp-pos-centro.lp-bt-lista .lp-botones { grid-template-columns: 1fr 1fr; gap: 0 18px; }
.lp-bt-lista .lp-bt { flex-direction: row; justify-content: flex-start; gap: 9px; height: 38px; padding: 0 2px; border-bottom: 1px solid color-mix(in srgb, var(--lp-texto) 14%, transparent); border-radius: 0; color: var(--lp-texto); }
.lp-bt-lista .lp-bt i { width: 18px; color: var(--lp-bt-color); font-size: 15px; }
.lp-bt-lista .lp-bt span { font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; }
.lp-bt-lista .lp-bt:hover { transform: none; }
.lp-bt-lista .lp-bt:hover span { color: var(--lp-bt-color); text-decoration: underline; }

/* =====================================================================
   Efectos en el RECUADRO DE ACCESO (lp-a-recuadro)
   ===================================================================== */

/* Glassmorphism */
.lp-a-recuadro.lp-ef-glass .lp-panel {
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow: 0 8px 32px rgba(31, 38, 135, .22);
}

/* Cristal oscuro */
.lp-a-recuadro.lp-ef-glass_oscuro .lp-panel {
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Neumorfismo */
body.lp.lp-a-recuadro.lp-ef-neumorfismo { --lp-rgb: 228, 232, 240; --lp-texto: #2f3a4c; }
.lp-a-recuadro.lp-ef-neumorfismo .lp-panel { box-shadow: 14px 14px 30px rgba(120, 134, 160, .55), -10px -10px 26px rgba(255, 255, 255, .75); }
.lp-pos-centro.lp-a-recuadro.lp-ef-neumorfismo .lp-panel { border-radius: 30px; }
.lp-a-recuadro.lp-ef-neumorfismo .form-group-default {
    border: 0;
    border-radius: 14px;
    background: rgb(228, 232, 240);
    box-shadow: inset 5px 5px 10px rgba(120, 134, 160, .5), inset -5px -5px 10px rgba(255, 255, 255, .9);
}
.lp-a-recuadro.lp-ef-neumorfismo .form-group-default .form-control { background: transparent; }

/* Claymorphism */
body.lp.lp-a-recuadro.lp-ef-clay { --lp-rgb: 244, 238, 255; --lp-texto: #2e2348; }
.lp-a-recuadro.lp-ef-clay .lp-panel { box-shadow: 30px 30px 60px rgba(40, 20, 80, .32), inset -10px -10px 22px rgba(124, 92, 214, .22), inset 10px 10px 22px rgba(255, 255, 255, .95); }
.lp-pos-centro.lp-a-recuadro.lp-ef-clay .lp-panel { border-radius: 42px; }
.lp-a-recuadro.lp-ef-clay .form-group-default { border: 0; border-radius: 20px; background: #fff; box-shadow: inset -4px -4px 8px rgba(124, 92, 214, .14), inset 4px 4px 8px rgba(255, 255, 255, 1), 6px 8px 16px rgba(80, 50, 160, .12); }

/* Aurora: luces de colores que se mueven dentro del recuadro */
.lp-a-recuadro.lp-ef-aurora .lp-panel { -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 10px 40px rgba(30, 64, 175, .25); }
.lp-a-recuadro.lp-ef-aurora .lp-panel-efecto { display: block; }
.lp-a-recuadro.lp-ef-aurora .lp-panel-efecto::before,
.lp-a-imagen.lp-ef-aurora .lp-fondo-efecto::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(40% 50% at 20% 30%, rgba(56, 189, 248, .55), transparent 70%),
        radial-gradient(45% 55% at 80% 20%, rgba(168, 85, 247, .5), transparent 70%),
        radial-gradient(50% 50% at 60% 85%, rgba(16, 185, 129, .45), transparent 70%);
    background-size: 160% 160%;
    filter: blur(30px);
    animation: lp-aurora 18s ease-in-out infinite alternate;
}
.lp-a-recuadro.lp-ef-aurora .lp-panel-efecto { opacity: .7; }
@keyframes lp-aurora {
    0% { background-position: 0% 0%, 100% 0%, 50% 100%; transform: scale(1); }
    50% { background-position: 100% 50%, 0% 100%, 0% 0%; transform: scale(1.15) rotate(3deg); }
    100% { background-position: 50% 100%, 50% 0%, 100% 50%; transform: scale(1.05) rotate(-2deg); }
}

/* Malla de degradado dentro del recuadro */
.lp-a-recuadro.lp-ef-mesh .lp-panel { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 18px 50px rgba(80, 40, 140, .25); }
.lp-a-recuadro.lp-ef-mesh .lp-panel-efecto,
.lp-a-imagen.lp-ef-mesh .lp-fondo-efecto {
    display: block;
    background:
        radial-gradient(at 12% 18%, #ff6ec4 0, transparent 50%),
        radial-gradient(at 88% 12%, #7873f5 0, transparent 50%),
        radial-gradient(at 78% 88%, #42e695 0, transparent 50%),
        radial-gradient(at 18% 82%, #ffb347 0, transparent 50%),
        radial-gradient(at 50% 50%, #3bb2b8 0, transparent 60%);
    background-size: 200% 200%;
    animation: lp-mesh 16s ease-in-out infinite alternate;
}
.lp-a-recuadro.lp-ef-mesh .lp-panel-efecto { opacity: .55; }
@keyframes lp-mesh {
    0% { background-position: 0% 0%; filter: hue-rotate(0deg); }
    100% { background-position: 100% 100%; filter: hue-rotate(70deg); }
}

/* Borde neón */
.lp-a-recuadro.lp-ef-neon .lp-panel { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: lp-neon-pulso 2.6s ease-in-out infinite; }
.lp-a-recuadro.lp-ef-neon .lp-panel::before,
.lp-a-recuadro.lp-ef-borde_giratorio .lp-panel::before,
.lp-a-imagen.lp-ef-neon .lp-fondo-efecto::before,
.lp-a-imagen.lp-ef-borde_giratorio .lp-fondo-efecto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--lp-ang), transparent 0 70%, #22d3ee 82%, #fff 86%, #a855f7 92%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: lp-gira 3.5s linear infinite;
}
.lp-a-recuadro.lp-ef-neon .lp-titulo { text-shadow: 0 0 8px rgba(34, 211, 238, .8), 0 0 22px rgba(168, 85, 247, .6); }
@keyframes lp-neon-pulso {
    0%, 100% { box-shadow: 0 0 0 1px rgba(34, 211, 238, .5), 0 0 18px rgba(34, 211, 238, .45), 0 0 50px rgba(168, 85, 247, .3); }
    50% { box-shadow: 0 0 0 1px rgba(168, 85, 247, .7), 0 0 28px rgba(168, 85, 247, .55), 0 0 70px rgba(34, 211, 238, .35); }
}

/* Borde giratorio (anillo de color completo) */
.lp-a-recuadro.lp-ef-borde_giratorio .lp-panel { animation: lp-halo 10s linear infinite; }
.lp-a-recuadro.lp-ef-borde_giratorio .lp-panel::before,
.lp-a-imagen.lp-ef-borde_giratorio .lp-fondo-efecto::before {
    padding: 4px;
    background: conic-gradient(from var(--lp-ang), #f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e);
    animation-duration: 5s;
}
@keyframes lp-halo {
    0%, 100% { box-shadow: 0 0 34px rgba(244, 63, 94, .45), 0 20px 50px rgba(0, 0, 0, .3); }
    25% { box-shadow: 0 0 34px rgba(245, 158, 11, .45), 0 20px 50px rgba(0, 0, 0, .3); }
    50% { box-shadow: 0 0 34px rgba(6, 182, 212, .45), 0 20px 50px rgba(0, 0, 0, .3); }
    75% { box-shadow: 0 0 34px rgba(217, 70, 239, .45), 0 20px 50px rgba(0, 0, 0, .3); }
}
@keyframes lp-gira { to { --lp-ang: 360deg; } }

/* Partículas dentro del recuadro */
.lp-a-recuadro.lp-ef-particulas #lp-lienzo-panel { display: block; }
.lp-a-recuadro.lp-ef-particulas .lp-panel { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }

/* Inclinación 3D con reflejo */
.lp-a-recuadro.lp-ef-tilt3d .lp-inclinable { transform: perspective(1100px) rotateX(var(--lp-rx, 0deg)) rotateY(var(--lp-ry, 0deg)); transform-style: preserve-3d; transition: transform .15s ease-out; will-change: transform; }
.lp-a-recuadro.lp-ef-tilt3d .lp-panel { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.lp-a-recuadro.lp-ef-tilt3d .lp-inclinable::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: radial-gradient(circle at var(--lp-gx, 50%) var(--lp-gy, 0%), rgba(255, 255, 255, .45), transparent 45%);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* Spotlight: una luz sigue al ratón dentro del recuadro */
.lp-a-recuadro.lp-ef-spotlight .lp-panel { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lp-a-recuadro.lp-ef-spotlight .lp-panel-efecto {
    display: block;
    background: radial-gradient(circle 260px at var(--lp-px, 50%) var(--lp-py, 30%), rgba(147, 197, 253, .3), transparent 70%);
}

/* =====================================================================
   Efectos en la IMAGEN DE FONDO (lp-a-imagen)
   ===================================================================== */
.lp-a-imagen:not(.lp-ef-ninguno) .lp-fondo-efecto { display: block; }

/* Cristal: el fondo desenfocado, como visto a través de un cristal */
.lp-a-imagen.lp-ef-glass .lp-fondo-efecto { background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); }
.lp-a-imagen.lp-ef-glass_oscuro .lp-fondo-efecto { background: rgba(5, 8, 16, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* Neumorfismo y clay: el fondo suavizado y aclarado */
.lp-a-imagen.lp-ef-neumorfismo .lp-fondo-efecto { background: rgba(228, 232, 240, .55); -webkit-backdrop-filter: grayscale(.6) blur(3px); backdrop-filter: grayscale(.6) blur(3px); }
.lp-a-imagen.lp-ef-clay .lp-fondo-efecto { background: rgba(244, 238, 255, .4); -webkit-backdrop-filter: saturate(1.3) blur(4px); backdrop-filter: saturate(1.3) blur(4px); }
/* Aurora: luces de colores sobre la imagen */
.lp-a-imagen.lp-ef-aurora .lp-fondo-efecto { overflow: hidden; mix-blend-mode: screen; }
/* Malla: manchas de color fundidas con la imagen */
.lp-a-imagen.lp-ef-mesh .lp-fondo-efecto { opacity: .75; mix-blend-mode: soft-light; }
/* Neón y borde giratorio: un marco de luz alrededor de toda la pantalla */
.lp-a-imagen.lp-ef-neon .lp-fondo-efecto { animation: lp-neon-pantalla 2.6s ease-in-out infinite; }
.lp-a-imagen.lp-ef-neon .lp-fondo-efecto::before { padding: 3px; }
.lp-a-imagen.lp-ef-borde_giratorio .lp-fondo-efecto::before { padding: 6px; }
@keyframes lp-neon-pantalla {
    0%, 100% { box-shadow: inset 0 0 30px rgba(34, 211, 238, .45), inset 0 0 90px rgba(168, 85, 247, .25); }
    50% { box-shadow: inset 0 0 44px rgba(168, 85, 247, .55), inset 0 0 120px rgba(34, 211, 238, .3); }
}
/* Partículas sobre la imagen */
.lp-a-imagen.lp-ef-particulas #lp-lienzo { display: block; }
/* Inclinación 3D: la imagen se desplaza con el ratón (efecto de profundidad) */
.lp-a-imagen.lp-ef-tilt3d .lp-fondo-efecto {
    inset: -40px;
    z-index: 0;
    background: inherit;
    background-image: var(--lp-imagen);
    background-repeat: no-repeat;
    background-size: var(--lp-fondo-tam-3d, cover);
    background-position: var(--lp-fondo-pos-3d, center center);
    transform: translate(var(--lp-bx, 0px), var(--lp-by, 0px)) scale(1.03);
    transition: transform .2s ease-out;
}
/* Spotlight: la imagen a oscuras salvo donde está el ratón */
.lp-a-imagen.lp-ef-spotlight .lp-fondo-efecto { background: radial-gradient(circle 260px at var(--lp-mx) var(--lp-my), transparent 0, rgba(5, 8, 16, .25) 40%, rgba(5, 8, 16, .82) 100%); }

/* ---------- Móvil: el recuadro ocupa toda la pantalla ---------- */
@media (max-width: 767px) {
    .lp-panel,
    .lp-pos-centro .lp-panel {
        position: relative;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 100vh;
        margin: 0;
        border-radius: 0;
    }
    .lp-caja, .lp-pos-centro .lp-caja { padding: 40px 18px 24px; }
    .lp-pos-centro .lp-botones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .lp *, .lp *::before, .lp *::after, .lp-fondo-efecto { animation: none !important; }
}