/* ============================================================================
   Login — maquetación y tamaños.

   Se carga DESPUÉS de sdweb.css, así que gana por orden: el bloque
   `body#login-page` de ahí sigue siendo la base y esto solo ajusta composición y
   medidas. La estructura del formulario no se toca —mismos elementos y mismo
   orden—, así que la vista Twig no cambia.

   Traído del proyecto de referencia con UNA adaptación: allí el logo es
   horizontal y le vale un tope de 60px de alto; el de Congress es CUADRADO
   (880x785), y a 60px se quedaría en 67 de ancho dentro de un panel de 360 a 540.
   ============================================================================ */

/* ----- Fondo: la foto la pone la vista (es aleatoria por carga) y esto le
   añade una veladura de marca, que da profundidad y despega el panel blanco ----- */
body#login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Muy ligera: da cohesión de marca sin apagar las fotos.
       El rgba(16,24,40) es un negro azulado neutro para dar profundidad; no hay
       token de ese tono en :root y usar --primario-dark viraría la veladura a
       navy, que no es el efecto. */
    background: linear-gradient(110deg,
        rgba(16, 24, 40, .22) 0%,
        rgba(var(--primario-rgb), .07) 55%,
        rgba(var(--primario-rgb), 0) 100%);
}

/* ----- Composición: el panel a la derecha, a altura completa ----- */
body#login-page #page-wrapper {
    position: relative;
    z-index: 1;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0 !important;
}

body#login-page #page-wrapper #panel_right_login {
    width: clamp(360px, 38%, 540px);
    min-height: 100vh;
    height: auto;
    align-self: stretch;
    background: #fff;
    padding: clamp(28px, 4vw, 56px);
    box-shadow: -10px 0 48px rgba(16, 24, 40, .30);
    border: 0;
}

/* El formulario, centrado y con una anchura cómoda dentro del panel */
body#login-page #page-wrapper #panel_right_login form {
    width: 100%;
    max-width: 380px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--primario, #2c3862);
    font-family: var(--font-family, inherit);
}

/* ----- Logo: la imagen la pone la vista; aquí solo su tamaño y su margen ----- */
body#login-page #page-wrapper #panel_right_login form .form-group:first-of-type {
    justify-content: center;
    width: 100%;
    margin-bottom: 6px;
}
body#login-page #page-wrapper #panel_right_login form .form-group:first-of-type .logo-login {
    max-width: 100%;
    /* El de Congress es cuadrado, así que necesita alto: con el tope de 60px del
       proyecto de referencia —cuyo logo es horizontal— se quedaría en 67px de
       ancho. `object-fit` lo hereda del bloque base de sdweb.css. */
    max-height: var(--160-120);
    margin-bottom: 0;
}

/* ----- Cabecera: la bienvenida y «Inicie sesión» ----- */
body#login-page #page-wrapper #panel_right_login form > h2 {
    margin: 2px 0 0;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: var(--primario, #2c3862);
}
body#login-page #page-wrapper #panel_right_login form > br { display: none; }
body#login-page #page-wrapper #panel_right_login form > p {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--primario-medio, #485ca1);
    text-decoration: none;
}
body#login-page #page-wrapper #panel_right_login form > p strong {
    font-weight: 600;
    color: var(--primario, #2c3862);
}
/* Un acento de marca bajo el subtítulo */
body#login-page #page-wrapper #panel_right_login form > p::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-top: 8px;
    border-radius: var(--full-radius);
    background: var(--secundario, #deb64a);
}

/* ----- Grupos de campos ----- */
body#login-page #page-wrapper #panel_right_login form .form-group {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Campos de texto */
body#login-page #page-wrapper #panel_right_login form .form-group > .form-control,
body#login-page #page-wrapper #panel_right_login form .form-group > .password-container {
    width: 100%;
    flex: 1 1 auto;
}
body#login-page #page-wrapper #panel_right_login form input.form-control {
    height: 50px;
    padding: 12px 16px;
    border: 1.5px solid var(--primario-lighter, #ccd2e8);
    border-radius: var(--form-radius, 5px);
    background: var(--primario-extra-light, #f1f4fb);
    color: var(--primario, #2c3862);
    font-size: 15px;
    font-family: inherit;
    box-shadow: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body#login-page #page-wrapper #panel_right_login form input.form-control::placeholder {
    color: var(--primario-light, #808fc5);
}
body#login-page #page-wrapper #panel_right_login form input.form-control:focus {
    border-color: var(--primario-accent, #5377f5);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--primario-rgb, 44, 56, 98), .12);
    outline: none;
}

/* Contraseña y su ojo. El guion que lo alterna vive en la vista y no se toca. */
body#login-page #page-wrapper #panel_right_login form .password-container {
    position: relative;
    width: 100%;
}
body#login-page #page-wrapper #panel_right_login form .password-container input.form-control {
    padding-right: 46px;
}
body#login-page #page-wrapper #panel_right_login form .password-container .glyphicon.toggle-password {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: var(--primario-light, #808fc5);
    cursor: pointer;
    transition: color .15s ease;
}
body#login-page #page-wrapper #panel_right_login form .password-container .glyphicon.toggle-password:hover {
    color: var(--primario, #2c3862);
}

/* Recordarme */
body#login-page #page-wrapper #panel_right_login form #remember_me {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--primario-accent, #5377f5);
    cursor: pointer;
}
body#login-page #page-wrapper #panel_right_login form #remember_me + label {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--primario-medio, #485ca1);
    cursor: pointer;
}

/* ----- El botón «Acceder» NO se toca: se queda con la pastilla animada de la
   casa (navy, círculo ámbar y flecha doble) que define `.form-group.submit` en
   sdweb.css, cuya regla es más específica y prevalece. ----- */

/* ----- El error, en línea dentro del formulario y no superpuesto ----- */
body#login-page #page-wrapper #panel_right_login form .alert {
    position: static;
    inset: auto;
    margin: 0;
    width: 100%;
    height: auto;
    padding: 11px 14px;
    background: color-mix(in srgb, var(--danger) 8%, #fff);
    color: var(--danger, #dd141b);
    border: 1px solid color-mix(in srgb, var(--danger) 28%, #fff);
    border-radius: var(--form-radius, 5px);
    box-shadow: none;
    font-size: 13.5px;
    text-align: left;
}

/* ----- En pantallas pequeñas, el panel pasa a tarjeta centrada ----- */
@media (max-width: 991px) {
    body#login-page #page-wrapper {
        align-items: center;
        justify-content: center;
        padding: clamp(16px, 5vw, 32px) !important;
    }
    body#login-page #page-wrapper #panel_right_login {
        width: min(440px, 100%);
        min-height: 0;
        align-self: center;
        border-radius: 22px;
        padding: clamp(26px, 6vw, 40px);
        box-shadow: 0 24px 60px rgba(16, 24, 40, .40);
    }
    body#login-page #page-wrapper #panel_right_login form {
        flex-direction: column;
        flex-wrap: nowrap;
        max-width: 100%;
    }
    body#login-page #page-wrapper #panel_right_login form .form-group {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}