/* =====================================================================================
   Login de iLims (index.php) con el formato configurable de gestor_portada.php.
   El login es el de siempre (styles/index/*.css); styles/login_portada.css pone los efectos, los diseños de
   los botones y los colores. Aquí se anula lo que login_portada.css trae para su propio login, para que con
   la configuración por defecto (lateral derecho, opaco, sin efecto, botones con imagen) se vea igual que antes.
   ===================================================================================== */

body.lp-ilims {
    --lp-alfa: 1;
    --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;
}
body.lp-ilims.lp-oscuro { --lp-rgb: 15, 18, 28; --lp-texto: #f1f5f9; --lp-suave: #cbd5e1; }

/* ---------- Recuadro de acceso: el de siempre ---------- */
.lp-ilims .login-container.lp-panel {
    position: relative;
    top: auto;
    bottom: auto;
    z-index: 3;
    flex: none;
    width: auto;
    min-width: 0;
    max-width: none;
    overflow: visible;
    padding: 70px 70px 30px;
    outline: 0;
    background-color: rgba(var(--lp-rgb), var(--lp-alfa));
}
@media screen and (min-aspect-ratio: 16/9) {
    .lp-ilims .login-container.lp-panel { width: 30vw; }
}
@media (max-width: 768px) {
    .lp-ilims .login-container.lp-panel { width: 100vw; padding: 30px; border-radius: 0; }
}
/* Posición: el login es una rejilla que lo pega a la derecha; a la izquierda o centrado según el gestor */
body.lp-ilims.lp-pos-izquierda { justify-content: start; }
body.lp-ilims.lp-pos-centro { display: grid; place-content: center; }
.lp-ilims.lp-pos-centro .login-container.lp-panel {
    width: 520px;
    max-width: calc(100vw - 32px);
    margin: 4vh 0;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    padding: 44px 44px 26px;
}
/* Las capas de efecto quedan debajo del contenido del recuadro */
.lp-ilims .login-container > :not(.lp-panel-efecto):not(.lp-lienzo) { position: relative; z-index: 1; }

/* ---------- Bordes blancos: solo si se han cambiado en el gestor (lo marca scripts/login_ilims.js) ---------- */
.lp-ilims.lp-borde-recuadro-on .login-container.lp-panel { outline: 1px solid rgba(255, 255, 255, var(--lp-borde-recuadro)); outline-offset: -1px; }
.lp-ilims.lp-borde-botones-on #secondary_menus > a { border-color: rgba(255, 255, 255, var(--lp-borde-botones)) !important; }
.lp-ilims.lp-borde-campos-on .form-group-default { border-color: rgba(255, 255, 255, var(--lp-borde-campos)) !important; }

/* ---------- Campos: su fondo sigue la opacidad del recuadro (al 100 %, blancos como siempre) ---------- */
.lp-ilims .form-group-default { background-color: rgba(255, 255, 255, calc(.18 + var(--lp-alfa) * .82)); }
.lp-ilims.lp-oscuro .form-group-default { background-color: rgba(255, 255, 255, .07); }

/* ---------- Textos y logo con los efectos oscuros ---------- */
.lp-ilims.lp-oscuro .logo_principal { filter: brightness(0) invert(1); }
.lp-ilims.lp-oscuro .login-container :is(.acceso_text, .acceso_text *, #form-login > a, #footer_toools, #footer_toools *) { color: var(--lp-texto) !important; }

/* ---------- Colores elegidos en el gestor ---------- */
.lp-ilims.lp-con-color-entrar #form-login .btn-success { background-color: var(--lp-color-entrar) !important; border-color: var(--lp-color-entrar) !important; }
.lp-ilims.lp-con-color-botones #form-login .btn-success { color: var(--lp-color-botones) !important; }
.lp-ilims.lp-con-color-botones #secondary_menus > a :is(p, span) { color: var(--lp-color-botones) !important; }

/* ---------- Botones de acceso ---------- */
#secondary_menus > a[hidden] { display: none !important; }
/* Diseño «Imágenes»: los de siempre (styles/index/laterales.css), sin lo que login_portada.css cambia de .lp-bt */
.lp-ilims.lp-bt-imagenes #secondary_menus.lp-botones { margin-top: 0; grid-auto-rows: auto; }
.lp-ilims.lp-bt-imagenes #secondary_menus > a.lp-bt {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    aspect-ratio: auto;
    color: inherit;
    text-align: left;
    background-image: var(--lp-bt-img);
}
.lp-ilims.lp-bt-imagenes #secondary_menus > a.lp-bt:hover { transform: none; }
/* El botón de iERP.info (nuevo) en el hueco del pie, y el pie debajo */
#ierp_platform { grid-area: 3 / 2 / 4 / 3; }
.lp-ilims.lp-bt-imagenes #secondary_menus:has(#ierp_platform:not([hidden])) #footer_toools { grid-area: 4 / 1 / 5 / 3; }
@media screen and (min-width: 2565px) {
    #ierp_platform { grid-area: 2 / 3 / 3 / 4; }
    .lp-ilims.lp-bt-imagenes #secondary_menus:has(#ierp_platform:not([hidden])) #footer_toools { grid-area: 3 / 1 / 4 / 4; }
}

/* Resto de diseños: los de login_portada.css. Se quita lo propio del diseño «Imágenes» (rejilla, tamaños, imagen
   de fondo y el texto blanco de abajo), que en styles/index/laterales.css va por id y si no mandaría */
.lp-ilims:not(.lp-bt-imagenes) #secondary_menus {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
    height: auto;
    margin-top: 40px;
    /* En el login de siempre esta rejilla se estira hasta abajo; los demás diseños tienen su propio alto */
    flex: none;
}
.lp-ilims.lp-pos-centro:not(.lp-bt-imagenes) #secondary_menus { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
.lp-ilims.lp-bt-iconos #secondary_menus { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
.lp-ilims.lp-bt-pildora #secondary_menus,
.lp-ilims.lp-pos-centro.lp-bt-pildora #secondary_menus { grid-template-columns: 1fr; gap: 8px; }
.lp-ilims.lp-bt-lista #secondary_menus { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; }
.lp-ilims.lp-pos-centro.lp-bt-lista #secondary_menus { grid-template-columns: 1fr 1fr; gap: 0 18px; }
.lp-ilims:not(.lp-bt-imagenes) #secondary_menus > a {
    grid-area: auto;
    align-items: center;
    border: 0;
    border-radius: 0;
    font-family: inherit;
    /* clip y no hidden: recorta igual, pero así la fila de la rejilla respeta la proporción de la casilla */
    overflow: clip;
}
.lp-ilims:not(.lp-bt-imagenes) #secondary_menus > a > p { display: none; }
.lp-ilims:not(.lp-bt-imagenes) #footer_toools { grid-area: auto; grid-column: 1 / -1; justify-content: flex-start; padding: 8px 0 0; }
/* Los diseños con borde o fondo propio lo recuperan (la regla anterior se lo quita a todos) */
.lp-ilims.lp-bt-tarjeta #secondary_menus > a { border: 1px solid #E5E7EB; border-radius: 16px; }
.lp-ilims.lp-bt-cristal #secondary_menus > a { border: 1px solid rgba(255, 255, 255, var(--lp-borde-botones)); border-radius: 16px; }
.lp-ilims.lp-bt-degradado #secondary_menus > a { border-radius: 16px; }
.lp-ilims.lp-bt-contorno #secondary_menus > a { border: 2px solid var(--lp-bt-color); border-radius: 14px; }
.lp-ilims.lp-bt-oscuro #secondary_menus > a { border: 1px solid rgba(255, 255, 255, calc(var(--lp-borde-botones) * .2)); border-radius: 14px; }
.lp-ilims.lp-bt-neumorfico #secondary_menus > a { border-radius: 18px; }
.lp-ilims.lp-bt-pildora #secondary_menus > a { border: 1px solid #E5E7EB; border-radius: 99px; }
.lp-ilims.lp-bt-lista #secondary_menus > a { border-bottom: 1px solid color-mix(in srgb, var(--lp-texto) 12%, transparent); }