/* Menú dinámico [ucasal_menu] */
.ucasal-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0 10px;
    list-style: none;
    justify-content: flex-end;
}

.ucasal-menu__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ucasal-menu__item a {
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}

/* El reset.css de Hello Elementor pone a:hover { color: #336 } (azul); hay que fijar
   el blanco también en hover/focus/active. */
.ucasal-menu__item a:hover,
.ucasal-menu__item a:focus,
.ucasal-menu__item a:active {
    color: #fff;
    opacity: .8;
}

/* ─── Formulario de login [ucasal_login] ─────────────────────────────────────
   El contenedor (card, logo, fondo) lo pone el theme/Elementor; acá solo el form.
   Selectores anidados bajo .ucasal-login-wrap a propósito: los estilos globales
   del kit de Elementor (button, input) tienen más especificidad que una clase
   sola y pisan el diseño. Color ajustable desde el theme:
   .ucasal-login-wrap { --ucasal-accent: #...; } */
.ucasal-login-wrap {
    /* Aire arriba: el logo circular del card de Elementor pisa el primer label. */
    padding-top: 2.5rem;

    --ucasal-accent:       #c22957;
    --ucasal-accent-dark:  #a01f46;
    --ucasal-text:         #2b2b2b;
    --ucasal-border:       #c9c9c9;
    --ucasal-error-bg:     #fdecec;
    --ucasal-error-border: #f5b5b5;
    --ucasal-error-text:   #a4262c;
}

.ucasal-login-wrap .ucasal-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    width: 100%;
}

.ucasal-login-wrap .ucasal-login-form__field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
}

.ucasal-login-wrap .ucasal-login-form__field label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ucasal-text);
    line-height: 1.2;
    margin: 0;
}

.ucasal-login-wrap .ucasal-login-form input[type="text"],
.ucasal-login-wrap .ucasal-login-form input[type="password"] {
    width: 100%;
    padding: .7rem .9rem;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ucasal-text);
    background: #fff;
    border: 1px solid var(--ucasal-border);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ucasal-login-wrap .ucasal-login-form input[type="text"]:focus,
.ucasal-login-wrap .ucasal-login-form input[type="password"]:focus {
    outline: none;
    border-color: var(--ucasal-accent);
    box-shadow: 0 0 0 3px rgba(194, 41, 87, .15);
}

.ucasal-login-wrap .ucasal-login-form input::placeholder {
    color: #9a9a9a;
    opacity: 1;
}

/* Mensaje de error: alerta visible, no texto suelto */
.ucasal-login-wrap .ucasal-login-form__error {
    padding: .7rem .9rem;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--ucasal-error-text);
    background: var(--ucasal-error-bg);
    border: 1px solid var(--ucasal-error-border);
    border-left: 4px solid var(--ucasal-error-text);
    border-radius: 8px;
    animation: ucasal-error-in .18s ease-out;
}

@keyframes ucasal-error-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Botón principal sólido */
.ucasal-login-wrap .ucasal-login-form__field--submit {
    margin-top: .2rem;
}

.ucasal-login-wrap .ucasal-login-form button.ucasal-login-form__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .8rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
    background-color: var(--ucasal-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ucasal-login-wrap .ucasal-login-form button.ucasal-login-form__btn:hover,
.ucasal-login-wrap .ucasal-login-form button.ucasal-login-form__btn:focus {
    color: #fff;
    background-color: var(--ucasal-accent-dark);
    border: none;
}

.ucasal-login-wrap .ucasal-login-form button.ucasal-login-form__btn:disabled {
    opacity: .65;
    cursor: wait;
}

.ucasal-login-wrap .ucasal-login-form__btn-spinner {
    display: inline-flex;
    align-items: center;
}

/* Ocultar el widget "Registrarme" de la página de login.
   NO es parte del plugin: es un widget de texto de Elementor (data-id f336f8a)
   dentro del card. Esto lo esconde; el fix definitivo es borrar el widget
   desde el editor de Elementor y sacar esta regla. */
.elementor-element-f336f8a {
    display: none !important;
}