/* ============================================
   FIRMASUITE LOGIN - MODERN DESIGN
   ============================================ */

:root {
    --login-primary: #0081C6;
    --login-primary-dark: #006da8;
    --login-primary-light: #e8f4fb;
    --login-gray-dark: #5D5C5C;
    --login-gray-medium: #8a8a8a;
    --login-gray-light: #f5f5f5;
    --login-border: #e0e0e0;
    --login-white: #ffffff;
    --login-shadow: rgba(0, 0, 0, 0.08);
    --login-radius: 12px;
}

/* base.css añade `body { margin-bottom: 40px }` para dar aire al final de las pantallas del
   panel. Aquí sobra: estas pantallas ocupan exactamente el alto de la ventana y ese margen
   provocaba una barra de desplazamiento vertical de más.
   Esta hoja sólo la cargan las pantallas de seguridad (login, changelog, recuperación de
   contraseña...), así que la anulación no afecta al resto de la aplicación. */
body {
    margin-bottom: 0;
}

/* Espaciados ajustados para que el formulario quepa entero en pantallas de 768px de alto
   (portatiles 1366x768) sin barra de desplazamiento. El contenido va centrado, asi que en
   pantallas grandes solo queda algo mas de aire alrededor. */

/* ---- Page Layout ---- */
.login-page-wrap {
    min-height: 100vh;
    display: flex;
    background-color: var(--login-gray-light);
}

/* ---- Brand Panel (Left) ---- */
.login-brand-panel {
    flex: 0 0 42%;
    max-width: 42%;
    background: linear-gradient(160deg, #005f8f 0%, #0081C6 40%, #00a3e0 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 48px;
    position: relative;
    overflow: hidden;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.login-brand-panel::after {
    content: '';
    position: absolute;
    bottom: -120px;
    left: -60px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}

.login-brand-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--login-white);
    max-width: 380px;
}

.login-brand-logo {
    width: 220px;
    margin-bottom: 40px;
}

.login-brand-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.3;
    color: var(--login-white);
}

.login-brand-text {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 40px;
    color: var(--login-white);
}

.login-brand-features {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: left;
    display: inline-block;
}

.login-brand-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

.login-brand-features li i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* ---- Form Panel (Right) ---- */
.login-form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.login-form-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 40px;
    flex-shrink: 0;
    gap: 12px;
}

.login-form-header .login-logo-mobile {
    display: none;
}

.login-form-header .login-logo-mobile img {
    height: 32px;
    width: auto;
}

/* Language selector */
.login-lang-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--login-white);
    border: 1px solid var(--login-border);
    border-radius: 8px;
    padding: 8px 36px 8px 14px;
    font-size: 0.875rem;
    color: var(--login-gray-dark);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235D5C5C' d='M6 8.825a.5.5 0 01-.354-.146l-4-4a.5.5 0 01.708-.708L6 7.617l3.646-3.646a.5.5 0 01.708.708l-4 4A.5.5 0 016 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 140px;
}

.login-lang-select:focus {
    outline: none;
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px rgba(0, 129, 198, 0.12);
}

.login-lang-select:hover {
    border-color: var(--login-primary);
}

/* Form body */
.login-form-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px 24px;
}

.login-form-container {
    width: 100%;
    max-width: 440px;
}

/* Welcome section */
.login-welcome {
    margin-bottom: 20px;
}

.login-welcome-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background-color: var(--login-primary-light);
    color: var(--login-primary);
    font-size: 24px;
    margin-bottom: 12px;
}

.login-welcome h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
}

.login-welcome p {
    font-size: 0.95rem;
    color: var(--login-gray-medium);
    margin: 0;
}

/* Form inputs - Labels above */
.login-form .form-group {
    margin-bottom: 20px;
}

.login-form .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--login-gray-dark);
}

.login-form .input-wrapper {
    position: relative;
}

.login-form .form-control {
    height: 48px;
    padding: 10px 14px;
    background-color: var(--login-white);
    border: 1.5px solid var(--login-border);
    border-radius: 10px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: #333;
    width: 100%;
}

.login-form .form-control:focus {
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px rgba(0, 129, 198, 0.12);
    background-color: var(--login-white);
    outline: none;
}

.login-form .form-control.is-valid {
    border-color: #28a745;
    box-shadow: none;
}

.login-form .form-control.is-invalid {
    border-color: #dc3545;
    box-shadow: none;
}

.login-form .invalid-feedback {
    font-size: 0.8rem;
    margin-top: 4px;
}

/* Error devuelto por el servidor bajo el campo (correo inexistente, fallo del IdP...).
   Clase propia en vez de .is-invalid + .invalid-feedback de Bootstrap: esas ya las usa
   login.js para la validacion del formato del correo y se pisarian los dos mensajes. */
.login-form .form-control.has-server-error {
    border-color: #dc3545;
    box-shadow: none;
}

.login-form .login-field-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    background-color: #fdecea;
    border: 1px solid #f5c2c0;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #b02a24;
}

.login-form .login-field-error i {
    font-size: 0.95rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Help text under form */
.login-form .login-helptext {
    font-size: 0.9rem;
    color: var(--login-gray-medium);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Password toggle - positioned relative to 48px input height */
.login-form .input-wrapper .toggle-password {
    position: absolute;
    right: 14px;
    top: 24px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--login-gray-medium);
    font-size: 1rem;
    z-index: 5;
    transition: color 0.2s;
}

.login-form .input-wrapper .toggle-password:hover {
    color: var(--login-primary);
}

/* Back link */
.login-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 0.875rem;
    color: var(--login-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.login-back-link:hover {
    color: var(--login-primary-dark);
    text-decoration: underline;
}

/* Disabled button */
.login-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Submit button */
.login-submit-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--login-white);
    background-color: var(--login-primary);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    text-align: center;
    letter-spacing: 0.2px;
}

.login-submit-btn:hover {
    background-color: var(--login-primary-dark);
    box-shadow: 0 4px 12px rgba(0, 129, 198, 0.3);
}

.login-submit-btn:active {
    transform: translateY(1px);
}

/* Sesión ya iniciada: ir al panel / cerrar sesión.
   No se usan las clases .btn de Bootstrap porque base.css repinta
   .btn-outline-secondary en verde (#7DB958), que no es de esta paleta. */
.login-session-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.login-session-btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--login-white);
    background-color: var(--login-primary);
    border: 1px solid var(--login-primary);
    border-radius: 10px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.login-session-btn:hover {
    color: var(--login-white);
    background-color: var(--login-primary-dark);
    border-color: var(--login-primary-dark);
}

.login-session-btn--ghost {
    color: var(--login-gray-dark);
    background-color: transparent;
    border-color: var(--login-border);
}

.login-session-btn--ghost:hover {
    color: var(--login-gray-dark);
    background-color: var(--login-gray-light);
    border-color: var(--login-gray-medium);
}

/* Recovery link */
.login-recovery-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 0.875rem;
    color: var(--login-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.login-recovery-link:hover {
    color: var(--login-primary-dark);
    text-decoration: underline;
}

/* Divider */
.login-divider {
    display: flex;
    align-items: center;
    margin: 18px 0;
    gap: 16px;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--login-border);
}

.login-divider span {
    font-size: 0.8rem;
    color: var(--login-gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Alternative login methods */
.login-alt-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-alt-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background-color: var(--login-white);
    border: 1.5px solid var(--login-border);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--login-gray-dark);
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.login-alt-btn:hover {
    border-color: var(--login-primary);
    background-color: var(--login-primary-light);
    color: var(--login-gray-dark);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 129, 198, 0.08);
}

.login-alt-btn i {
    font-size: 1.2rem;
    color: var(--login-primary);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.login-alt-btn .login-alt-label {
    font-weight: 600;
}

.login-alt-btn .login-alt-desc {
    font-size: 0.8rem;
    color: var(--login-gray-medium);
    margin-top: 2px;
}

/* Recovery success alert */
.login-alert-success {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background-color: #edf7ff;
    border: 1px solid #b8dff5;
    border-radius: 10px;
    margin-top: 24px;
    font-size: 0.9rem;
    color: #0a6eaa;
}

.login-alert-success i {
    font-size: 1.2rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* QR Popover */
.login-qr-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.login-qr-card {
    pointer-events: all;
    background: var(--login-white);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    padding: 16px 24px;
    max-width: 500px;
    width: 100%;
    transition: transform 0.3s ease;
}

.login-qr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.login-qr-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-qr-header-left i {
    font-size: 1.4rem;
    color: var(--login-primary);
}

.login-qr-header-left b {
    font-size: 0.95rem;
    color: #333;
}

.login-qr-toggle {
    background: none;
    border: none;
    color: var(--login-primary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.3s;
}

.login-qr-toggle.expanded {
    transform: rotate(180deg);
}

.login-qr-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.login-qr-body.show {
    max-height: 120px;
    padding-top: 14px;
}

.login-qr-body p {
    font-size: 0.875rem;
    color: var(--login-gray-dark);
    margin: 0;
    line-height: 1.5;
}

.login-qr-body a {
    color: var(--login-primary);
    font-weight: 600;
    text-decoration: none;
}

.login-qr-body a:hover {
    text-decoration: underline;
}

/* Version link in header */
.login-version {
    font-size: 0.75rem;
    color: var(--login-gray-medium);
    text-decoration: none;
    transition: color 0.2s;
}
.login-version:hover {
    color: var(--login-primary);
    text-decoration: underline;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    .login-brand-panel {
        flex: 0 0 38%;
        max-width: 38%;
        padding: 40px 32px;
    }

    .login-brand-logo {
        width: 180px;
    }

    .login-brand-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 991px) {
    .login-brand-panel {
        display: none;
    }

    .login-form-header {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        padding: 20px 24px 12px;
    }

    .login-form-header .login-logo-mobile {
        display: block;
        flex: 0 0 100%;
        text-align: center;
        order: -1;
        margin-bottom: 4px;
    }

    .login-form-header .login-logo-mobile img {
        height: 36px;
        width: auto;
    }

    .login-version {
        margin-right: 0;
    }

    .login-form-body {
        padding: 12px 24px 40px;
    }
}

@media (max-width: 575px) {
    .login-form-header {
        padding: 16px 20px 10px;
    }

    .login-form-body {
        padding: 8px 20px 32px;
    }

    .login-form-container {
        max-width: 100%;
    }

    .login-welcome {
        margin-bottom: 24px;
    }

    .login-welcome-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
        margin-bottom: 14px;
    }

    .login-welcome h1 {
        font-size: 1.25rem;
    }

    .login-welcome p {
        font-size: 0.88rem;
    }

    .login-form .form-group {
        margin-bottom: 16px;
    }

    .login-form .form-control {
        height: 44px;
        font-size: 0.9rem;
    }

    .login-submit-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .login-divider {
        margin: 20px 0;
    }

    .login-alt-btn {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .login-lang-select {
        min-width: 120px;
        padding: 6px 32px 6px 12px;
        font-size: 0.82rem;
    }

    .login-qr-card {
        margin: 0 12px;
        border-radius: 14px 14px 0 0;
        padding: 12px 16px;
    }

    .login-qr-header-left b {
        font-size: 0.85rem;
    }

    .login-qr-body.show {
        max-height: 160px;
    }
}

@media only screen and (max-width: 768px) and (orientation: landscape) {
    .login-page-wrap {
        min-height: auto;
    }

    .login-form-panel {
        min-height: auto;
    }

    .login-form-body {
        align-items: flex-start;
        padding-top: 10px;
    }

    .login-welcome {
        margin-bottom: 16px;
    }

    .login-welcome-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .login-qr-banner {
        position: relative;
    }

    .login-qr-card {
        border-radius: 14px;
        margin: 12px;
    }
}

/* Small height screens */
@media (max-height: 680px) and (max-width: 991px) {
    .login-form-body {
        align-items: flex-start;
        padding-top: 8px;
    }

    .login-welcome {
        margin-bottom: 16px;
    }

    .login-welcome-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .login-form .form-group {
        margin-bottom: 14px;
    }

    .login-divider {
        margin: 16px 0;
    }
}