/*
 * Puerta de login del servidor (Abstract_Secured_Shortcode::render_login_gate).
 * Es la tarjeta V2 de LoginRequiredComponent.vue sin la SPA: en las páginas
 * que solo sirven la puerta no se cargan Vuetify ni la fuente de iconos
 * (Unified_Spa_Manifest_Enqueue::serves_login_gate_only), así que aquí van
 * los estilos del título (FaTitle), el texto (.fa-text) y el botón primario
 * (v-btn color=primary, 52 px, sin redondeo) con los tokens de tokens.css.
 */
@layer tmwe-base {
    .tmwe-auth-required {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        max-width: var(--fa-column);
        margin: 0 auto;
        padding: 40px var(--fa-gutter) 28px;
        box-sizing: border-box;
        font-family: var(--fa-font);
        color: var(--fa-ink);
    }

    .tmwe-auth-required__icon {
        width: 40px;
        height: 40px;
        fill: var(--fa-bronze);
    }

    .tmwe-auth-required__title {
        margin: 0;
        font-family: var(--fa-font);
        font-size: var(--fa-size-xl);
        font-weight: 300;
        line-height: 1.18;
        letter-spacing: -0.015em;
        color: var(--fa-navy);
    }

    .tmwe-auth-required__text {
        margin: 0;
        font-size: var(--fa-size-m);
        line-height: 1.5;
        color: var(--fa-mute);
    }

    /* Caza R4B11: aviso de enlace de login caducado (Check_Login). */
    .tmwe-auth-required__notice {
        margin: 0;
        padding: 10px 12px;
        border-left: 3px solid var(--fa-warn);
        font-size: var(--fa-size-m);
        line-height: 1.5;
        color: var(--fa-warn);
    }

    .tmwe-auth-required__button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 52px;
        margin-top: 8px;
        padding: 0 16px;
        box-sizing: border-box;
        background: var(--fa-fill);
        color: var(--fa-on-fill);
        font-family: var(--fa-font);
        font-size: var(--fa-size-l);
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.15s ease;
    }

    .tmwe-auth-required__button:hover,
    .tmwe-auth-required__button:focus-visible {
        background: var(--fa-fill-hover);
        color: var(--fa-on-fill);
    }

    .tmwe-auth-required__button-icon {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }
}