:root {

    --surface-2: #dcdcdc;
    --radius-sm: 6px;
    --border-subtle: rgba(255,255,255,.12);
    --surface-3: #c0c0c0;
    --accent: #353536;
    --text-muted: #6b7280;
    --surface-padding: 20px;
    --space-xl: 24px;
    --shadow-soft: rgba(0, 0, 0, 0.1);
    --z-popup: 1000;
    --bg-modal-backdrop: rgba(0, 0, 0, 0.5);
    --radius-card: 12px;
    --space-sm: 8px;
    --transition-fast: 0.2s ease-in-out;
    --space-md: 16px;
    --icon-field-color: #9ca3af;

}


/* ===================================================== */
/* LOGIN MODAL                                           */
/* ===================================================== */

.app-login-modal {
    --login-card-width: 420px;
    --login-card-max-height: 720px;
    --login-card-padding-x: calc(var(--surface-padding) * 2);
    --login-card-padding-top: calc(var(--surface-padding) * 2);
    --login-card-padding-bottom: var(--space-xl);
    --login-card-radius: var(--radius-card);
    --login-card-shadow: 0 32px 90px var(--shadow-soft);
    --login-close-size: 36px;
    --login-logo-width: 180px;
    --login-error-space: 30px;
    --login-password-error-space: 56px;
    --ui-icon-size-md: 20px;

    position: fixed;
    inset: 0;
    z-index: var(--z-popup);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: transparent;
}

.app-login-modal {
    display: flex;
}

.app-login-backdrop {
    position: absolute;
    inset: 0;
    background: var(--bg-modal-backdrop);
}

.ui-password-toggle-icon{
    background-color: currentColor;
    mask-image: var(--icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* ===================================================== */
/* LOGIN MODAL: Card                                     */
/* ===================================================== */

.app-login-card {
    position: relative;
    width: min(100%, var(--login-card-width));
    max-height: min(calc(100vh - (var(--space-xl) * 2)), var(--login-card-max-height));
    overflow-y: auto;
    padding:
        var(--login-card-padding-top)
        var(--login-card-padding-x)
        var(--login-card-padding-bottom);
    border: 1px solid var(--border-color);
    border-radius: var(--login-card-radius);
    background: var(--bg-card);
    box-shadow: var(--login-card-shadow);
}

/* ===================================================== */
/* LOGIN MODAL: Close button                             */
/* ===================================================== */

.app-login-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--login-close-size);
    height: var(--login-close-size);
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.app-login-close:hover,
.app-login-close:focus-visible {
    background: var(--bg-card);
    color: var(--color-brand);
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--shadow-focus);
    transform: scale(1.03);
    outline: none;
}

/* ===================================================== */
/* LOGIN MODAL: Brand                                    */
/* ===================================================== */

.app-login-brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.app-login-logo-title {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin: 0;
}

.app-login-logo {
    display: block;
    width: 100%;
    max-width: var(--login-logo-width);
    height: auto;
    object-fit: contain;
}

.app-login-subtitle {
    margin: 0 0 var(--space-2xl);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.015em;
    text-align: center;
}

/* ===================================================== */
/* LOGIN MODAL: Form fields                              */
/* ===================================================== */

.app-login-field {
    margin-bottom: var(--space-lg);
}

/*
   No redefinir aquí label, font-size, font-weight ni color.
   Debe heredar el mismo estilo reutilizable que register-user.
*/

.app-login-field .field-error,
.app-login-field .ui-error,
.app-login-field .ui-field-error,
.app-login-field [data-field-error] {
    display: block;
    height: var(--login-error-space);
    margin-top: var(--space-sm);
    overflow: hidden;
}

.app-login-field .field-error:empty::before,
.app-login-field .ui-error:empty::before,
.app-login-field .ui-field-error:empty::before,
.app-login-field [data-field-error]:empty::before {
    content: "\00a0";
}

.app-login-field--password .field-error,
.app-login-field--password .ui-error,
.app-login-field--password .ui-field-error,
.app-login-field--password [data-field-error] {
    height: var(--login-password-error-space);
}

/* ===================================================== */
/* LOGIN MODAL: Actions                                  */
/* ===================================================== */

.app-login-modal .ui-actions {
    margin-top: var(--space-md);
}

.app-login-modal .ui-actions .ui-button {
    width: 100%;
}

/* ===================================================== */
/* LOGIN MODAL: Legal link                               */
/* ===================================================== */

/*
   El espacio entre botón → Aviso Legal y
   Aviso Legal → borde inferior queda equilibrado:
   - arriba: margin-top
   - abajo: padding-bottom de .app-login-card
*/
.app-login-legal {
    margin-top: var(--login-card-padding-bottom);
    margin-bottom: 0;
    text-align: center;
}

.app-login-legal a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.app-login-legal a:hover,
.app-login-legal a:focus-visible {
    color: var(--color-brand);
    outline: none;
}

/* ===================================================== */
/* LOGIN MODAL: Global messages                          */
/* ===================================================== */

.app-login-modal #loginFormError:empty,
.app-login-modal #loginFormSuccess:empty {
    display: none;
    margin: 0;
}

.app-login-modal #loginFormError:not(:empty),
.app-login-modal #loginFormSuccess:not(:empty) {
    display: block;
    margin-top: var(--space-md);
}






.ui-input, .ui-select {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 var(--space-md);
    font-family: inherit;
    font-size: 16px;
    color: var(--text-select);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}


.ui-button {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    white-space: nowrap;
    user-select: none;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast), opacity var(--transition-fast);
}


.ui-button--primary {
    color: var(--text-button);
    background: var(--bg-button);
}

.ui-password-wrap {
    position: relative;
}

.ui-password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    color: var(--icon-field-color);
    cursor: pointer;
    transform: translateY(-50%);
}

.ui-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ui-input-icon, .ui-select-icon, .ui-password-toggle-icon {
    display: block;
    width: var(--ui-icon-size-md);
    height: var(--ui-icon-size-md);
    color: var(--icon-field-color);
}


/* ===================================================== */
/* LOGIN MODAL: Responsive                               */
/* ===================================================== */

@media (max-width: 640px) {
    .app-login-modal {
        --login-card-padding-x: var(--space-xl);
        --login-card-padding-top: var(--space-xl);
        --login-card-padding-bottom: var(--space-xl);
        --login-logo-width: 160px;
        --login-password-error-space: 72px;

        padding: var(--space-lg);
    }

    .app-login-card {
        max-height: calc(100vh - (var(--space-lg) * 2));
    }

    .app-login-close {
        top: var(--space-md);
        right: var(--space-md);
    }

    .app-login-subtitle {
        margin-bottom: var(--space-xl);
    }
}