.oxford-login-shell {
    width: min(100%, 560px);
    margin: 3rem auto;
    padding: 0 1rem;
}

.oxford-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.oxford-login-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #172b4d;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
}

.oxford-login-school {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #172b4d;
}

.oxford-login-system {
    margin-top: 0.15rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.oxford-login-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 2rem;
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.10);
}

.oxford-login-step {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.oxford-login-ok {
    background: #ecfdf5;
    color: #047857;
}

.oxford-login-card h1 {
    margin: 0 0 0.6rem;
    font-size: 1.65rem;
    font-weight: 800;
    color: #111827;
}

.oxford-login-intro {
    margin-bottom: 1.35rem;
    color: #6b7280;
    line-height: 1.55;
}

.oxford-login-user {
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
}

.oxford-login-card label {
    display: block;
    margin: 1rem 0 0.4rem;
    color: #1f2937;
    font-weight: 700;
}

.oxford-login-card input {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: 0.72rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    background: #fff;
    font-size: 1rem;
}

.oxford-login-card input:focus {
    border-color: #334155;
    outline: 3px solid rgba(51, 65, 85, 0.12);
}

.oxford-login-help {
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.83rem;
}

.oxford-login-card button {
    width: 100%;
    min-height: 50px;
    margin-top: 1.5rem;
    border: 0;
    border-radius: 12px;
    background: #172b4d;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.oxford-login-card button:hover {
    background: #0f1f38;
}

.oxford-login-error {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.92rem;
}

.oxford-login-back {
    display: block;
    margin-top: 1.4rem;
    text-align: center;
    color: #475569;
    text-decoration: none;
    font-size: 0.9rem;
}

.oxford-login-back:hover {
    text-decoration: underline;
}

.oxford-login-footer {
    margin-top: 1.25rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .oxford-login-shell {
        margin-top: 1.2rem;
    }

    .oxford-login-card {
        padding: 1.35rem;
        border-radius: 17px;
    }

    .oxford-login-card h1 {
        font-size: 1.4rem;
    }

    .oxford-login-brand {
        justify-content: flex-start;
    }
}

/* Oxford institutional identity. The optional official background is layered over the fallback gradient. */
:root {
    --oxford-navy: #102a43;
    --oxford-green: #18864b;
    --oxford-white: #fff;
    --oxford-bg: #f3f7f6;
    --oxford-surface: #fff;
    --oxford-border: #d8e2df;
    --oxford-text: #172b35;
    --oxford-muted: #607079;
    --oxford-danger: #a32222;
    --oxford-success: #137a45;
}

body.pagelayout-login #page,
body.pagelayout-login #page-wrapper,
body.pagelayout-login #page-content,
body.pagelayout-login main {
    max-width: none;
    margin: 0;
    padding: 0;
}

.oxford-login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(25rem, .85fr);
    min-height: 100vh;
    background: var(--oxford-bg);
}

.oxford-login-visual {
    display: flex;
    align-items: flex-end;
    min-height: 100%;
    padding: clamp(2rem, 6vw, 6rem);
    color: var(--oxford-white);
    background-image: linear-gradient(145deg, rgba(16, 42, 67, .94), rgba(16, 42, 67, .72) 52%, rgba(24, 134, 75, .78)), url("pix/branding/fondo-login-ueo-final-v2.png");
    background-position: center;
    background-size: cover;
}

.oxford-login-visual-content { max-width: 40rem; }
.oxford-login-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .16em; }
.oxford-login-visual h2 { margin: 1rem 0 .7rem; color: inherit; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.08; }
.oxford-login-visual p { max-width: 34rem; margin: 0; font-size: 1.08rem; opacity: .9; }
.oxford-login-shell { width: min(100%, 35rem); margin: auto; padding: clamp(1.25rem, 5vw, 3rem); }
.oxford-login-logo { width: auto; max-width: 11rem; max-height: 5rem; object-fit: contain; }
.oxford-login-brand { justify-content: flex-start; }
.oxford-login-school { color: var(--oxford-navy); font-size: 1.15rem; }
.oxford-login-card { border-color: var(--oxford-border); box-shadow: 0 1rem 3rem rgba(16, 42, 67, .1); }
.oxford-login-card button { background: var(--oxford-navy); transition: background-color .18s ease, transform .18s ease; }
.oxford-login-card button:hover { background: #0a1d31; transform: translateY(-1px); }
.oxford-login-card button:focus-visible,
.oxford-login-back:focus-visible { outline: 3px solid rgba(24, 134, 75, .38); outline-offset: 3px; }
.oxford-login-step { background: #e7f4ed; color: #0d6438; }

@media (max-width: 900px) {
    .oxford-login-layout { grid-template-columns: minmax(15rem, .7fr) minmax(24rem, 1fr); }
    .oxford-login-visual { padding: 2.25rem; }
    .oxford-login-visual h2 { font-size: 2.2rem; }
}

@media (max-width: 680px) {
    .oxford-login-layout { display: block; min-height: 100vh; }
    .oxford-login-visual { min-height: 9rem; padding: 1.5rem; align-items: center; }
    .oxford-login-visual h2 { margin: .5rem 0 0; font-size: 1.45rem; }
    .oxford-login-visual p { display: none; }
    .oxford-login-shell { margin: 0 auto; padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .oxford-login-card button { transition: none; }
}
/* ===== UEO LOGIN VISUAL SYSTEM 2026 ===== */

/*
 * Identidad visual oficial UEO.
 * Azul = estructura/confianza.
 * Verde = progreso/crecimiento.
 * Blanco = claridad.
 */
:root {
    --ueo-navy: #153453;
    --ueo-navy-dark: #0b2338;
    --ueo-navy-soft: #294c6a;

    --ueo-green: #72b62e;
    --ueo-green-dark: #5a941f;
    --ueo-green-soft: #edf6e5;

    --ueo-white: #ffffff;
    --ueo-bg: #f4f7f8;
    --ueo-surface: #ffffff;
    --ueo-border: #dce5e9;

    --ueo-text: #132433;
    --ueo-muted: #697987;

    --ueo-shadow:
        0 30px 80px rgba(10, 35, 56, .14);

    --ueo-shadow-soft:
        0 14px 38px rgba(10, 35, 56, .10);
}


/* =========================================================
   1. ELIMINAR COMPLETAMENTE EL LOGIN GENÉRICO DE BOOST.
   ========================================================= */

body.pagelayout-login {
    background: var(--ueo-bg);
    color: var(--ueo-text);
    overflow-x: hidden;
}

/* Oculta “Le damos la bienvenida a Moodle”, estadísticas e imagen IA. */
body.pagelayout-login .login-layout-left {
    display: none !important;
}

/* La parte derecha de Boost ahora ocupa el 100 %. */
body.pagelayout-login .login-layout-right {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    padding: 0 !important;
    background: transparent !important;
}

body.pagelayout-login .login-layout-right-content,
body.pagelayout-login #region-main-box {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.pagelayout-login .login-container {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   2. COMPOSICIÓN GENERAL.
   ========================================================= */

.oxford-login-layout {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(430px, .85fr);

    width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;

    background: var(--ueo-white);
}


/* =========================================================
   3. HERO INSTITUCIONAL.
   ========================================================= */

.oxford-login-visual {
    position: relative;
    display: flex;
    align-items: flex-end;

    min-height: 100vh;
    padding:
        clamp(3rem, 6vw, 7rem);

    overflow: hidden;
    isolation: isolate;

    /*
     * Cuando exista:
     * pix/branding/fondo-login-ueo-final-v2.png
     *
     * aparecerá automáticamente.
     * Si no existe, queda el gradiente UEO.
     */
    background-image:
        linear-gradient(
            150deg,
            rgba(7, 29, 46, .94) 0%,
            rgba(21, 52, 83, .86) 46%,
            rgba(70, 115, 59, .77) 100%
        ),
        url("pix/branding/fondo-login-ueo-final-v2.png");

    background-size: cover;
    background-position: center;
}


/* Forma ambiental superior. */
.oxford-login-visual::before {
    content: "";
    position: absolute;
    z-index: -1;

    width: 44rem;
    height: 44rem;

    top: -19rem;
    right: -14rem;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(114, 182, 46, .38) 0%,
            rgba(114, 182, 46, .08) 46%,
            transparent 70%
        );
}


/* Forma ambiental inferior. */
.oxford-login-visual::after {
    content: "";
    position: absolute;
    z-index: -1;

    width: 38rem;
    height: 38rem;

    left: -16rem;
    bottom: -20rem;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .19) 0%,
            transparent 68%
        );
}


.oxford-login-visual-content {
    position: relative;
    z-index: 2;

    max-width: 48rem;

    color: var(--ueo-white);

    animation:
        ueoHeroEnter .65s ease-out both;
}


.oxford-login-kicker {
    display: inline-flex;
    align-items: center;

    margin-bottom: 1.25rem;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .82);
}


.oxford-login-kicker::before {
    content: "";
    width: 2rem;
    height: 3px;
    margin-right: .75rem;

    border-radius: 999px;
    background: var(--ueo-green);
}


.oxford-login-visual h2 {
    max-width: 11ch;
    margin:
        0 0 1.25rem;

    font-size:
        clamp(3.4rem, 6.4vw, 6.8rem);

    font-weight: 760;
    line-height: .94;
    letter-spacing: -.055em;

    color: var(--ueo-white);
}


.oxford-login-hero-copy,
.oxford-login-visual-content > p {
    max-width: 36rem;
    margin: 0;

    font-size:
        clamp(1rem, 1.45vw, 1.25rem);

    line-height: 1.65;

    color: rgba(255, 255, 255, .84);
}


/* Tres conceptos de marketing educativo. */
.oxford-login-pillars {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: .8rem;

    margin-top: 2.2rem;
}


.oxford-login-pillars span {
    display: flex;
    flex-direction: column;

    min-height: 5.3rem;
    padding: 1rem 1.05rem;

    border: 1px solid
        rgba(255, 255, 255, .18);

    border-radius: 1rem;

    background:
        rgba(255, 255, 255, .08);

    backdrop-filter:
        blur(12px);

    color:
        rgba(255, 255, 255, .78);

    font-size: .86rem;
    line-height: 1.35;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.oxford-login-pillars span:hover {
    transform:
        translateY(-3px);

    background:
        rgba(255, 255, 255, .13);

    border-color:
        rgba(255, 255, 255, .28);
}


.oxford-login-pillars strong {
    margin-bottom: .2rem;

    color: var(--ueo-white);

    font-size: 1rem;
    font-weight: 750;
}


/* =========================================================
   4. ZONA DE AUTENTICACIÓN.
   ========================================================= */

.oxford-login-shell {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 100vh;

    padding:
        clamp(2rem, 5vw, 5rem);

    background:
        radial-gradient(
            circle at 92% 5%,
            rgba(114, 182, 46, .12),
            transparent 26rem
        ),
        radial-gradient(
            circle at 5% 96%,
            rgba(21, 52, 83, .08),
            transparent 24rem
        ),
        var(--ueo-bg);
}


/* =========================================================
   5. LOGO + MOODLE UEO.
   ========================================================= */

.oxford-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(100%, 34rem);

    margin:
        0 auto 2rem;

    text-align: center;

    animation:
        ueoCardEnter .55s ease-out both;
}


.oxford-login-logo {
    display: block;

    width:
        clamp(10.5rem, 14vw, 14rem);

    max-height: 8.2rem;

    margin:
        0 auto 1rem;

    object-fit: contain;
}


.oxford-login-brand > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.oxford-login-school {
    font-size:
        clamp(2rem, 3vw, 2.85rem);

    font-weight: 850;
    line-height: 1;

    letter-spacing: -.035em;

    color: var(--ueo-navy);
}


/* Slogan deliberadamente más pequeño. */
.oxford-login-system {
    max-width: 22rem;

    margin-top: .65rem;

    font-size: .92rem;
    font-weight: 560;
    line-height: 1.45;

    color: var(--ueo-muted);
}


/* =========================================================
   6. TARJETA DE ACCESO.
   ========================================================= */

.oxford-login-card {
    position: relative;

    width: min(100%, 34rem);

    padding:
        clamp(1.7rem, 3.8vw, 2.8rem);

    border:
        1px solid rgba(21, 52, 83, .09);

    border-radius: 1.65rem;

    background:
        rgba(255, 255, 255, .96);

    box-shadow:
        var(--ueo-shadow);

    animation:
        ueoCardEnter .62s .06s ease-out both;
}


.oxford-login-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 2rem;
    right: 2rem;

    height: 3px;

    border-radius:
        0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            var(--ueo-navy),
            var(--ueo-green)
        );
}


.oxford-login-step {
    display: inline-flex;

    margin-bottom: 1.35rem;
    padding: .42rem .76rem;

    border-radius: 999px;

    background:
        var(--ueo-green-soft);

    color:
        #3e7316;

    font-size: .76rem;
    font-weight: 800;
}


.oxford-login-card h1 {
    margin:
        0 0 .55rem;

    font-size:
        clamp(1.7rem, 2.4vw, 2.15rem);

    font-weight: 780;
    line-height: 1.15;

    letter-spacing: -.025em;

    color: var(--ueo-text);
}


.oxford-login-intro {
    margin-bottom: 1.65rem;

    color: var(--ueo-muted);

    font-size: .97rem;
    line-height: 1.6;
}


/* =========================================================
   7. FORMULARIOS.
   ========================================================= */

.oxford-login-card label {
    display: block;

    margin-bottom: .5rem;

    color: var(--ueo-text);

    font-size: .89rem;
    font-weight: 720;
}


.oxford-login-card input[type="text"],
.oxford-login-card input[type="password"],
.oxford-login-card input[type="email"],
.oxford-login-card input[type="tel"],
.oxford-login-card select {
    width: 100%;
    min-height: 3.25rem;

    padding:
        .78rem 1rem;

    border:
        1.5px solid #ccd8de;

    border-radius:
        .85rem;

    background:
        var(--ueo-white);

    color:
        var(--ueo-text);

    font-size:
        .96rem;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


.oxford-login-card input:focus,
.oxford-login-card select:focus {
    border-color:
        var(--ueo-green);

    box-shadow:
        0 0 0 4px
        rgba(114, 182, 46, .15);
}


/* Botones principales del flujo Oxford. */
.oxford-login-card button[type="submit"],
.oxford-login-card input[type="submit"],
.oxford-login-card .btn-primary {
    min-height: 3.25rem;

    border:
        0 !important;

    border-radius:
        .85rem !important;

    background:
        linear-gradient(
            100deg,
            var(--ueo-navy-dark),
            var(--ueo-navy)
        ) !important;

    color:
        var(--ueo-white) !important;

    font-weight: 760 !important;

    box-shadow:
        0 10px 22px
        rgba(21, 52, 83, .18);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.oxford-login-card button[type="submit"]:hover,
.oxford-login-card input[type="submit"]:hover,
.oxford-login-card .btn-primary:hover {
    transform:
        translateY(-2px);

    background:
        linear-gradient(
            100deg,
            var(--ueo-navy),
            #245477
        ) !important;

    box-shadow:
        0 14px 28px
        rgba(21, 52, 83, .24);
}


.oxford-login-card button[type="submit"]:focus-visible,
.oxford-login-card input[type="submit"]:focus-visible,
.oxford-login-card .btn-primary:focus-visible,
.oxford-login-back:focus-visible {
    outline:
        3px solid
        rgba(114, 182, 46, .45);

    outline-offset:
        3px;
}


/* =========================================================
   8. ACCIONES SECUNDARIAS.
   ========================================================= */

.oxford-login-back {
    color: var(--ueo-navy);
    font-weight: 650;
    text-decoration: none;

    transition:
        color .18s ease;
}


.oxford-login-back:hover {
    color: var(--ueo-green-dark);
    text-decoration: none;
}


.oxford-login-footer {
    width: min(100%, 34rem);

    margin-top: 1.15rem;

    color: #8a98a4;

    font-size: .76rem;
    line-height: 1.45;

    text-align: center;
}


/* Moodle agrega estos al layout.
   Se mantienen funcionales pero discretos. */
body.pagelayout-login .logininfo {
    margin-top: .5rem;
    color: var(--ueo-muted);
    font-size: .78rem;
}


/* =========================================================
   9. RESPONSIVE.
   ========================================================= */

@media (max-width: 991.98px) {

    .oxford-login-layout {
        grid-template-columns: 1fr;
    }

    .oxford-login-visual {
        min-height: 20rem;

        align-items: center;

        padding:
            3rem 2rem;
    }

    .oxford-login-visual h2 {
        max-width: 12ch;

        font-size:
            clamp(2.8rem, 9vw, 4.6rem);
    }

    .oxford-login-visual-content {
        max-width: 40rem;
    }

    .oxford-login-shell {
        min-height:
            calc(100vh - 20rem);

        padding:
            2.8rem 1.5rem 3.5rem;
    }

    .oxford-login-logo {
        width: 11rem;
    }
}


@media (max-width: 640px) {

    body.pagelayout-login {
        background: var(--ueo-bg);
    }

    .oxford-login-visual {
        min-height: 14rem;

        padding:
            2.2rem 1.25rem;

        align-items: flex-end;
    }

    .oxford-login-kicker {
        margin-bottom: .7rem;

        font-size: .67rem;
    }

    .oxford-login-visual h2 {
        margin-bottom: .65rem;

        font-size:
            clamp(2.25rem, 12vw, 3.25rem);
    }

    .oxford-login-hero-copy,
    .oxford-login-visual-content > p {
        font-size: .9rem;
        line-height: 1.5;
    }

    .oxford-login-pillars {
        display: none;
    }

    .oxford-login-shell {
        min-height:
            calc(100vh - 14rem);

        justify-content: flex-start;

        padding:
            2rem 1rem 3rem;
    }

    .oxford-login-brand {
        margin-bottom: 1.4rem;
    }

    .oxford-login-logo {
        width: 9rem;
    }

    .oxford-login-school {
        font-size: 1.85rem;
    }

    .oxford-login-system {
        font-size: .83rem;
    }

    .oxford-login-card {
        padding:
            1.6rem 1.3rem;

        border-radius:
            1.3rem;

        box-shadow:
            var(--ueo-shadow-soft);
    }
}


/* =========================================================
   10. MOVIMIENTO RESPETUOSO.
   ========================================================= */

@keyframes ueoHeroEnter {
    from {
        opacity: 0;
        transform:
            translateY(14px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


@keyframes ueoCardEnter {
    from {
        opacity: 0;
        transform:
            translateY(18px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


@media (prefers-reduced-motion: reduce) {

    .oxford-login-visual-content,
    .oxford-login-brand,
    .oxford-login-card {
        animation: none !important;
    }

    .oxford-login-card *,
    .oxford-login-pillars span {
        transition: none !important;
    }
}

/* Oxford usa identificación automática desde el usuario. */
.oxford-login-back,
a.oxford-login-back {
    display: none !important;
}

/* =========================================================
   OJO DE CONTRASEÑA — integrado dentro del campo
   ========================================================= */

.oxford-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.oxford-password-wrapper input[type="password"],
.oxford-password-wrapper input[type="text"] {
    padding-right: 3rem !important;
    width: 100%;
    box-sizing: border-box;
}

.oxford-password-toggle {
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--ueo-muted, #697987);
    border-radius: .5rem;
    padding: 0;
    flex-shrink: 0;
    transition: color .15s, background .15s;
}

.oxford-password-toggle:hover {
    color: var(--ueo-navy, #153453);
    background: rgba(21, 52, 83, .06);
}

.oxford-password-toggle:focus-visible {
    outline: 2px solid rgba(114, 182, 46, .45);
    outline-offset: 2px;
}

.oxford-password-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    pointer-events: none;
}


/* === UEO MOCKUP FINAL LIMPIO === */

/* =========================================================
   ESCENA COMPLETA
   ========================================================= */

body.pagelayout-login {
    min-height: 100vh !important;
    background: #f5f7f5 !important;
}

.oxford-login-layout {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    min-height: 100vh !important;

    overflow: hidden !important;

    background:
        url("pix/branding/fondo-login-ueo-final-v2.png")
        center center / cover no-repeat !important;
}


/* =========================================================
   LADO INSTITUCIONAL
   ========================================================= */

.oxford-login-visual {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    min-height: 100vh !important;

    padding: 0 !important;

    background: transparent !important;
    overflow: visible !important;
}

.oxford-login-visual::before,
.oxford-login-visual::after {
    display: none !important;
}

.oxford-login-visual-content {
    position: absolute !important;

    top: 5.5vh !important;
    bottom: 5vh !important;
    left: 6.5vw !important;

    z-index: 2 !important;

    display: grid !important;
    grid-template-rows: auto 1fr auto !important;

    width: min(49vw, 60rem) !important;
    max-width: none !important;

    color: #173458 !important;
}


/* =========================================================
   OXFORD SUPERIOR
   ========================================================= */

.oxford-final-heading {
    align-self: start;
}

.oxford-final-heading > span {
    display: block;

    color: #173458;

    font-size:
        clamp(1rem, 1.55vw, 1.75rem);

    font-weight: 500;
    letter-spacing: .17em;
    line-height: 1;
}

.oxford-final-heading h2 {
    max-width: none !important;

    margin: .25rem 0 0 !important;

    padding: 0 !important;

    border: 0 !important;

    color: #102f51 !important;

    font-size:
        clamp(3.5rem, 5.3vw, 6rem) !important;

    font-weight: 850 !important;
    line-height: .9 !important;

    letter-spacing: -.045em !important;

    text-shadow: none !important;
}

.oxford-final-heading p {
    margin: .65rem 0 0 !important;

    color: #344c68 !important;

    font-size:
        clamp(.95rem, 1.25vw, 1.25rem) !important;

    font-style: italic;
    line-height: 1.35;
}

.oxford-final-heading i {
    display: block;

    width: 7rem;
    height: 3px;

    margin-top: 1rem;

    border-radius: 100px;

    background: #76a936;
}


/* =========================================================
   VIDEO / LOGO CENTRAL
   ========================================================= */

.oxford-final-video {
    align-self: center;
    justify-self: center;

    width: min(39vw, 42rem);

    aspect-ratio: 16 / 9;

    overflow: hidden;

    margin:
        -.5rem 0 0;

    pointer-events: none;
}

.oxford-final-video video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    mix-blend-mode: multiply;

    filter:
        contrast(1.03)
        saturate(1.05)
        brightness(1.035);
}


/* =========================================================
   APRENDE / CREA / AVANZA
   ========================================================= */

.oxford-login-pillars {
    align-self: end;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    width: min(100%, 40rem) !important;

    margin: 0 auto !important;

    gap: 0 !important;
}

.oxford-login-pillars span {
    position: relative;

    display: flex !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    min-height: 6.3rem !important;

    padding: 2.2rem .8rem .35rem !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    color: #314966 !important;

    font-size: .92rem !important;
    line-height: 1.25 !important;

    box-shadow: none !important;

    text-align: center;
}

/* Separadores */
.oxford-login-pillars span + span {
    border-left:
        1px solid rgba(23,52,88,.26) !important;
}

.oxford-login-pillars strong {
    margin-bottom: .18rem !important;

    color: #173458 !important;

    font-size: 1.12rem !important;
    font-weight: 800 !important;
}


/* Iconos */
.oxford-login-pillars span::before {
    position: absolute;

    top: 0;

    width: 1.8rem;
    height: 1.8rem;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    content: "";
}

.oxford-login-pillars span:nth-child(1)::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173458' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8l10-5 10 5-10 5L2 8z'/%3E%3Cpath d='M6 10v6c3 2 9 2 12 0v-6'/%3E%3Cpath d='M22 8v6' stroke='%2376a936'/%3E%3C/svg%3E");
}

.oxford-login-pillars span:nth-child(2)::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173458' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-5' stroke='%2376a936'/%3E%3C/svg%3E");
}

.oxford-login-pillars span:nth-child(3)::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173458' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10'/%3E%3Cpath d='M10 20V14'/%3E%3Cpath d='M16 20V7'/%3E%3Cpath d='M3 8l6-3 5 2 7-5'/%3E%3Cpath d='M17 2h4v4' stroke='%2376a936'/%3E%3C/svg%3E");
}


/* =========================================================
   TARJETA LOGIN DERECHA
   ========================================================= */

.oxford-login-shell {
    position: absolute !important;

    top: 50% !important;
    right: clamp(3rem, 8vw, 9rem) !important;

    transform:
        translateY(-50%) !important;

    z-index: 10 !important;

    display: block !important;

    width:
        clamp(28rem, 32vw, 35rem) !important;

    min-height:
        auto !important;

    margin: 0 !important;

    padding:
        2.2rem 2.6rem 1.6rem !important;

    border:
        1px solid rgba(23,52,88,.055) !important;

    border-radius:
        20px !important;

    background:
        rgba(255,255,255,.965) !important;

    box-shadow:
        0 18px 52px rgba(17,43,74,.11) !important;

    backdrop-filter:
        blur(10px) !important;
}


/* Marca superior */
.oxford-login-brand {
    margin:
        0 0 1.7rem !important;

    padding:
        0 0 1.15rem !important;

    text-align:
        center !important;
}

.oxford-login-logo {
    width:
        clamp(9rem, 10vw, 11.5rem) !important;

    margin-bottom:
        .8rem !important;
}


/* Línea verde */
.oxford-login-brand::after {
    content: "";

    display: block;

    width: 4rem;
    height: 2px;

    margin:
        1.15rem auto 0;

    background:
        #76a936;
}


/* Quitar segunda tarjeta */
.oxford-login-card {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
    backdrop-filter: none !important;
}


/* =========================================================
   ACCESO INSTITUCIONAL
   ========================================================= */

.oxford-login-step {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 3rem !important;

    margin:
        0 0 1.35rem !important;

    padding:
        .7rem 2.8rem .7rem 2.8rem !important;

    border-radius:
        10px !important;

    background:
        #eef6e9 !important;

    color:
        #4a762b !important;

    font-size:
        .9rem !important;

    font-weight:
        750 !important;
}

.oxford-login-step::before {
    content: "🔒";

    position: absolute;

    left: .9rem;

    top: 50%;

    transform:
        translateY(-50%);

    font-size:
        .95rem;
}

.oxford-login-step::after {
    content: "›";

    position: absolute;

    right: 1rem;

    top: 50%;

    transform:
        translateY(-52%);

    color:
        #315f25;

    font-size:
        1.8rem;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.oxford-login-card h1 {
    margin:
        0 0 .5rem !important;

    color:
        #132f50 !important;

    font-size:
        clamp(1.8rem, 2vw, 2.15rem) !important;

    font-weight:
        800 !important;

    line-height:
        1.12 !important;

    letter-spacing:
        -.035em !important;
}

.oxford-login-intro {
    margin:
        0 0 1.35rem !important;

    color:
        #62758b !important;

    font-size:
        .95rem !important;

    line-height:
        1.5 !important;
}

.oxford-login-card form label {
    margin-bottom:
        .4rem !important;

    color:
        #173458 !important;

    font-size:
        .82rem !important;

    font-weight:
        750 !important;
}

.oxford-login-card input[type="text"],
.oxford-login-card input[type="password"] {
    width:
        100% !important;

    min-height:
        3.35rem !important;

    padding:
        .8rem 1rem .8rem 3rem !important;

    border:
        1px solid #cdd6e0 !important;

    border-radius:
        10px !important;

    background-color:
        #fff !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b7f95' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        1rem center !important;

    color:
        #173458 !important;

    box-shadow:
        none !important;
}

.oxford-login-card input[type="text"]:focus,
.oxford-login-card input[type="password"]:focus {
    border-color:
        #76a936 !important;

    box-shadow:
        0 0 0 3px rgba(118,169,54,.12) !important;
}


/* Botón */
.oxford-login-card button[type="submit"] {
    position:
        relative !important;

    width:
        100% !important;

    min-height:
        3.35rem !important;

    margin-top:
        1.05rem !important;

    padding:
        .8rem 3rem .8rem 1rem !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    background:
        #0e3152 !important;

    color:
        #fff !important;

    font-size:
        1rem !important;

    font-weight:
        750 !important;

    box-shadow:
        0 8px 20px rgba(14,49,82,.14) !important;
}

.oxford-login-card button[type="submit"]::after {
    content:
        "→";

    position:
        absolute;

    right:
        1.2rem;

    top:
        50%;

    transform:
        translateY(-52%);

    font-size:
        1.45rem;
}


/* Footer */
.oxford-login-footer {
    margin-top:
        1.45rem !important;

    padding-top:
        1rem !important;

    border-top:
        1px solid rgba(23,52,88,.09) !important;

    color:
        #8391a2 !important;

    font-size:
        .74rem !important;

    text-align:
        center !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .oxford-login-visual-content {
        width:
            48vw !important;
    }

    .oxford-final-video {
        width:
            39vw;
    }

    .oxford-login-shell {
        right:
            2rem !important;

        width:
            29rem !important;
    }

}


@media (max-width: 820px) {

    .oxford-login-layout {
        overflow:
            auto !important;
    }

    .oxford-login-visual {
        position:
            relative !important;

        min-height:
            28rem !important;
    }

    .oxford-login-visual-content {
        position:
            relative !important;

        top:
            auto !important;

        bottom:
            auto !important;

        left:
            auto !important;

        width:
            100% !important;

        min-height:
            28rem;

        padding:
            2rem 1.25rem;
    }

    .oxford-final-heading h2 {
        font-size:
            clamp(3rem, 14vw, 4.5rem) !important;
    }

    .oxford-final-video {
        width:
            min(80vw, 30rem);

        margin:
            1rem auto;
    }

    .oxford-login-pillars {
        display:
            none !important;
    }

    .oxford-login-shell {
        position:
            relative !important;

        top:
            auto !important;

        right:
            auto !important;

        transform:
            none !important;

        width:
            min(calc(100% - 2rem), 34rem) !important;

        margin:
            0 auto 2rem !important;
    }

}

/* === FIN UEO MOCKUP FINAL LIMPIO === */


/* =========================================================
   UEO — INTEGRACIÓN LIMPIA DEL VIDEO
   ========================================================= */

/* Permitir que el vídeo se mezcle con el fondo general */
.oxford-login-visual {
    isolation: auto !important;
}

/* El contenedor del vídeo no debe generar ninguna caja */
.oxford-final-video {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: auto !important;
}

/* El blanco del MP4 se funde con el fondo institucional */
.oxford-final-video video {
    background: transparent !important;

    mix-blend-mode: multiply !important;

    opacity: .98 !important;

    filter:
        brightness(1.02)
        contrast(1.06)
        saturate(1.08) !important;
}

/* Evitar cualquier fondo residual heredado */
.oxford-final-video video,
.oxford-final-video source {
    border: 0 !important;
    box-shadow: none !important;
}

/* === FIN INTEGRACIÓN VIDEO === */

/* === UEO WHITE RESPONSIVE FINAL START === */

/* =========================================================
   BASE GENERAL
   ========================================================= */

html,
body.pagelayout-login {
    min-height: 100%;
    background: #ffffff !important;
}

body.pagelayout-login {
    overflow-x: hidden !important;
}


/* =========================================================
   LAYOUT GENERAL — DESKTOP
   ========================================================= */

.oxford-login-layout {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 440px) !important;

    gap:
        clamp(2rem, 4vw, 5rem) !important;

    align-items:
        center !important;

    width:
        100% !important;

    min-height:
        100vh !important;

    padding:
        clamp(2rem, 4vw, 4.5rem)
        clamp(2rem, 5vw, 6rem) !important;

    background:
        #ffffff !important;

    overflow:
        hidden !important;
}


/* =========================================================
   SECCIÓN IZQUIERDA
   ========================================================= */

.oxford-login-visual {
    position:
        relative !important;

    inset:
        auto !important;

    display:
        block !important;

    width:
        100% !important;

    min-height:
        auto !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    isolation:
        auto !important;

    background:
        transparent !important;
}

.oxford-login-visual::before,
.oxford-login-visual::after {
    display:
        none !important;
}


/* Contenedor izquierdo */
.oxford-login-visual-content {
    position:
        relative !important;

    inset:
        auto !important;

    display:
        grid !important;

    grid-template-rows:
        auto
        minmax(15rem, 1fr)
        auto !important;

    width:
        100% !important;

    max-width:
        56rem !important;

    min-height:
        clamp(38rem, 78vh, 51rem) !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    color:
        #173458 !important;
}


/* =========================================================
   CABECERA OXFORD
   ========================================================= */

.oxford-final-heading {
    align-self:
        start !important;

    padding:
        0 !important;
}

.oxford-final-heading > span {
    display:
        block !important;

    margin:
        0 0 .25rem !important;

    color:
        #173458 !important;

    font-size:
        clamp(1rem, 1.45vw, 1.65rem) !important;

    font-weight:
        500 !important;

    letter-spacing:
        .16em !important;

    line-height:
        1.1 !important;
}

.oxford-final-heading h2 {
    margin:
        0 !important;

    padding:
        0 !important;

    max-width:
        none !important;

    color:
        #173458 !important;

    font-size:
        clamp(3.2rem, 5vw, 5.8rem) !important;

    font-weight:
        850 !important;

    line-height:
        .9 !important;

    letter-spacing:
        -.045em !important;

    text-shadow:
        none !important;
}

.oxford-final-heading p {
    margin:
        .65rem 0 0 !important;

    color:
        #53657c !important;

    font-size:
        clamp(.95rem, 1.15vw, 1.2rem) !important;

    font-style:
        italic !important;

    line-height:
        1.35 !important;
}

.oxford-final-heading i {
    display:
        block !important;

    width:
        6rem !important;

    height:
        3px !important;

    margin-top:
        1rem !important;

    border-radius:
        100px !important;

    background:
        #79b82a !important;
}


/* =========================================================
   VIDEO
   ========================================================= */

.oxford-final-video {
    position:
        relative !important;

    align-self:
        center !important;

    justify-self:
        center !important;

    width:
        min(82%, 44rem) !important;

    aspect-ratio:
        16 / 9 !important;

    margin:
        1rem auto !important;

    background:
        #ffffff !important;

    border:
        0 !important;

    overflow:
        hidden !important;

    box-shadow:
        none !important;

    isolation:
        auto !important;
}


/*
 * El MP4 tiene fondo blanco.
 * Al estar ahora sobre una escena completamente blanca,
 * ese fondo se integra visualmente.
 */
.oxford-final-video video {
    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    opacity:
        1 !important;

    mix-blend-mode:
        normal !important;

    filter:
        none !important;

    background:
        #ffffff !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* =========================================================
   APRENDE / CREA / AVANZA
   ========================================================= */

.oxford-login-pillars {
    align-self:
        end !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    width:
        min(100%, 42rem) !important;

    max-width:
        42rem !important;

    margin:
        0 auto !important;

    gap:
        0 !important;
}

.oxford-login-pillars span {
    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    min-height:
        6rem !important;

    padding:
        2.15rem .75rem .25rem !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        #52647a !important;

    font-size:
        .88rem !important;

    line-height:
        1.3 !important;

    text-align:
        center !important;
}

.oxford-login-pillars span + span {
    border-left:
        1px solid rgba(23,52,88,.20) !important;
}

.oxford-login-pillars strong {
    margin-bottom:
        .15rem !important;

    color:
        #173458 !important;

    font-size:
        1.08rem !important;

    font-weight:
        800 !important;
}


/* =========================================================
   LOGIN DERECHO
   ========================================================= */

.oxford-login-shell {
    position:
        relative !important;

    inset:
        auto !important;

    transform:
        none !important;

    z-index:
        5 !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        440px !important;

    min-height:
        auto !important;

    margin:
        0 auto !important;

    padding:
        clamp(1.8rem, 2.5vw, 2.6rem) !important;

    border:
        1px solid rgba(23,52,88,.06) !important;

    border-radius:
        24px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 22px 55px rgba(22,47,78,.11) !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;
}


/* Marca */
.oxford-login-brand {
    margin:
        0 0 1.5rem !important;

    padding:
        0 0 1rem !important;

    text-align:
        center !important;
}

.oxford-login-logo {
    width:
        clamp(8.5rem, 9vw, 10.5rem) !important;
}


/* Card interior deja de ser otra caja */
.oxford-login-card {
    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;
}


/* =========================================================
   ACCESO INSTITUCIONAL
   ========================================================= */

.oxford-login-step {
    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    width:
        100% !important;

    min-height:
        3rem !important;

    margin:
        0 0 1.3rem !important;

    padding:
        .7rem 2.7rem .7rem 2.7rem !important;

    border-radius:
        10px !important;

    background:
        #eff6ea !important;

    color:
        #4b762c !important;

    font-size:
        .88rem !important;

    font-weight:
        750 !important;
}

.oxford-login-step::before {
    content:
        "🔒" !important;

    position:
        absolute !important;

    left:
        .9rem !important;

    top:
        50% !important;

    transform:
        translateY(-50%) !important;
}

.oxford-login-step::after {
    content:
        "›" !important;

    position:
        absolute !important;

    right:
        1rem !important;

    top:
        50% !important;

    transform:
        translateY(-52%) !important;

    color:
        #315f25 !important;

    font-size:
        1.65rem !important;
}


/* =========================================================
   TEXTO Y FORMULARIO
   ========================================================= */

.oxford-login-card h1 {
    margin:
        0 0 .45rem !important;

    color:
        #142f50 !important;

    font-size:
        clamp(1.7rem, 1.8vw, 2rem) !important;

    font-weight:
        800 !important;

    line-height:
        1.12 !important;

    letter-spacing:
        -.03em !important;
}

.oxford-login-intro {
    margin:
        0 0 1.3rem !important;

    color:
        #64768b !important;

    font-size:
        .93rem !important;

    line-height:
        1.5 !important;
}

.oxford-login-card form label {
    display:
        block !important;

    margin-bottom:
        .4rem !important;

    color:
        #173458 !important;

    font-size:
        .8rem !important;

    font-weight:
        750 !important;
}

.oxford-login-card input[type="text"],
.oxford-login-card input[type="password"] {
    width:
        100% !important;

    min-height:
        3.3rem !important;

    padding:
        .8rem 1rem .8rem 3rem !important;

    border:
        1px solid #ccd6e0 !important;

    border-radius:
        10px !important;

    background-color:
        #ffffff !important;

    color:
        #173458 !important;

    box-shadow:
        none !important;
}

.oxford-login-card input[type="text"]:focus,
.oxford-login-card input[type="password"]:focus {
    border-color:
        #79b82a !important;

    box-shadow:
        0 0 0 3px rgba(121,184,42,.12) !important;
}

.oxford-login-card button[type="submit"] {
    width:
        100% !important;

    min-height:
        3.3rem !important;

    margin-top:
        1rem !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    background:
        #17385f !important;

    color:
        #ffffff !important;

    font-size:
        .98rem !important;

    font-weight:
        750 !important;

    box-shadow:
        0 8px 20px rgba(23,56,95,.14) !important;
}


/* =========================================================
   FOOTER LOGIN
   ========================================================= */

.oxford-login-footer {
    margin-top:
        1.35rem !important;

    padding-top:
        1rem !important;

    border-top:
        1px solid rgba(23,52,88,.08) !important;

    color:
        #8492a3 !important;

    font-size:
        .72rem !important;

    text-align:
        center !important;
}


/* =========================================================
   LAPTOPS / VENTANAS MÁS PEQUEÑAS
   ========================================================= */

@media (max-width: 1250px) {

    .oxford-login-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, 400px) !important;

        gap:
            2rem !important;

        padding:
            2.5rem !important;
    }

    .oxford-login-visual-content {
        min-height:
            40rem !important;
    }

    .oxford-final-heading h2 {
        font-size:
            clamp(3rem, 4.8vw, 4.7rem) !important;
    }

    .oxford-final-video {
        width:
            min(82%, 35rem) !important;
    }
}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 900px) {

    .oxford-login-layout {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        grid-template-rows:
            auto auto !important;

        gap:
            1.5rem !important;

        min-height:
            100vh !important;

        padding:
            1.5rem !important;

        overflow:
            visible !important;
    }

    .oxford-login-visual {
        position:
            relative !important;

        width:
            100% !important;
    }

    .oxford-login-visual-content {
        display:
            grid !important;

        grid-template-rows:
            auto auto auto !important;

        min-height:
            auto !important;

        max-width:
            44rem !important;

        gap:
            1rem !important;
    }

    .oxford-final-heading {
        text-align:
            center !important;
    }

    .oxford-final-heading i {
        margin:
            1rem auto 0 !important;
    }

    .oxford-final-video {
        width:
            min(80vw, 32rem) !important;

        margin:
            .5rem auto !important;
    }

    .oxford-login-pillars {
        width:
            min(100%, 34rem) !important;
    }

    .oxford-login-shell {
        width:
            min(100%, 34rem) !important;

        max-width:
            34rem !important;
    }
}


/* =========================================================
   TELÉFONOS
   ========================================================= */

@media (max-width: 640px) {

    .oxford-login-layout {
        padding:
            1rem !important;

        gap:
            1rem !important;
    }

    .oxford-login-visual-content {
        gap:
            .75rem !important;
    }

    .oxford-final-heading > span {
        font-size:
            .82rem !important;

        letter-spacing:
            .13em !important;
    }

    .oxford-final-heading h2 {
        font-size:
            clamp(2.8rem, 15vw, 4rem) !important;
    }

    .oxford-final-heading p {
        font-size:
            .9rem !important;
    }

    .oxford-final-video {
        width:
            min(92vw, 27rem) !important;

        aspect-ratio:
            16 / 9 !important;
    }

    .oxford-login-pillars {
        grid-template-columns:
            repeat(3, minmax(0,1fr)) !important;

        width:
            100% !important;
    }

    .oxford-login-pillars span {
        min-height:
            4.8rem !important;

        padding:
            1.8rem .25rem .2rem !important;

        font-size:
            .7rem !important;
    }

    .oxford-login-pillars strong {
        font-size:
            .86rem !important;
    }

    .oxford-login-shell {
        width:
            100% !important;

        max-width:
            none !important;

        padding:
            1.35rem !important;

        border-radius:
            18px !important;
    }

    .oxford-login-logo {
        width:
            8.5rem !important;
    }

    .oxford-login-card h1 {
        font-size:
            1.55rem !important;
    }
}

/* === UEO WHITE RESPONSIVE FINAL END === */

/* =========================================================
   UEO — FONDO INSTITUCIONAL DEFINITIVO
   ========================================================= */

html,
body.pagelayout-login {
    background: #ffffff !important;
}

/* Escritorio / laptop */
.oxford-login-layout {
    background-color: #ffffff !important;
    background-image:
        url("pix/branding/fondo-login-ueo-final-v2.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* Todo el sector donde aparece el video permanece blanco/transparente
   para que el fondo blanco del MP4 se funda visualmente. */
.oxford-login-visual,
.oxford-login-visual-content,
.oxford-final-video {
    background-color: transparent !important;
}

.oxford-final-video video {
    background: #ffffff !important;
    mix-blend-mode: normal !important;
    filter: none !important;
}

/* Pantallas medianas */
@media (max-width: 1250px) {
    .oxford-login-layout {
        background-position: center bottom !important;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .oxford-login-layout {
        background-color: #ffffff !important;
        background-size: auto 100% !important;
        background-position: right bottom !important;
    }
}

/* Teléfono:
   mantenemos blanco y la cenefa institucional concentrada abajo/derecha. */
@media (max-width: 640px) {
    .oxford-login-layout {
        background-color: #ffffff !important;
        background-image:
            url("pix/branding/fondo-login-ueo-final-v2.png") !important;
        background-size: auto 100% !important;
        background-position: right bottom !important;
        background-repeat: no-repeat !important;
    }
}

/* =========================================================
   FIN FONDO INSTITUCIONAL DEFINITIVO
   ========================================================= */


/* =========================================================
   UEO — FONDO INSTITUCIONAL DEFINITIVO
   ========================================================= */

html,
body.pagelayout-login {
    background: #ffffff !important;
}

/* Escritorio / laptop */
.oxford-login-layout {
    background-color: #ffffff !important;
    background-image:
        url("pix/branding/fondo-login-ueo-final-v2.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* Todo el sector donde aparece el video permanece blanco/transparente
   para que el fondo blanco del MP4 se funda visualmente. */
.oxford-login-visual,
.oxford-login-visual-content,
.oxford-final-video {
    background-color: transparent !important;
}

.oxford-final-video video {
    background: #ffffff !important;
    mix-blend-mode: normal !important;
    filter: none !important;
}

/* Pantallas medianas */
@media (max-width: 1250px) {
    .oxford-login-layout {
        background-position: center bottom !important;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .oxford-login-layout {
        background-color: #ffffff !important;
        background-size: auto 100% !important;
        background-position: right bottom !important;
    }
}

/* Teléfono:
   mantenemos blanco y la cenefa institucional concentrada abajo/derecha. */
@media (max-width: 640px) {
    .oxford-login-layout {
        background-color: #ffffff !important;
        background-image:
            url("pix/branding/fondo-login-ueo-final-v2.png") !important;
        background-size: auto 100% !important;
        background-position: right bottom !important;
        background-repeat: no-repeat !important;
    }
}

/* =========================================================
   FIN FONDO INSTITUCIONAL DEFINITIVO
   ========================================================= */


/* =========================================================
   UEO — FONDO INSTITUCIONAL DEFINITIVO
   ========================================================= */

html,
body.pagelayout-login {
    background: #ffffff !important;
}

/* Escritorio / laptop */
.oxford-login-layout {
    background-color: #ffffff !important;
    background-image:
        url("pix/branding/fondo-login-ueo-final-v2.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* Todo el sector donde aparece el video permanece blanco/transparente
   para que el fondo blanco del MP4 se funda visualmente. */
.oxford-login-visual,
.oxford-login-visual-content,
.oxford-final-video {
    background-color: transparent !important;
}

.oxford-final-video video {
    background: #ffffff !important;
    mix-blend-mode: normal !important;
    filter: none !important;
}

/* Pantallas medianas */
@media (max-width: 1250px) {
    .oxford-login-layout {
        background-position: center bottom !important;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .oxford-login-layout {
        background-color: #ffffff !important;
        background-size: auto 100% !important;
        background-position: right bottom !important;
    }
}

/* Teléfono:
   mantenemos blanco y la cenefa institucional concentrada abajo/derecha. */
@media (max-width: 640px) {
    .oxford-login-layout {
        background-color: #ffffff !important;
        background-image:
            url("pix/branding/fondo-login-ueo-final-v2.png") !important;
        background-size: auto 100% !important;
        background-position: right bottom !important;
        background-repeat: no-repeat !important;
    }
}

/* =========================================================
   FIN FONDO INSTITUCIONAL DEFINITIVO
   ========================================================= */


/* =========================================================
   UEO — FONDO INSTITUCIONAL DEFINITIVO
   ========================================================= */

html,
body.pagelayout-login {
    background: #ffffff !important;
}

/* Escritorio / laptop */
.oxford-login-layout {
    background-color: #ffffff !important;
    background-image:
        url("pix/branding/fondo-login-ueo-final-v2.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* Todo el sector donde aparece el video permanece blanco/transparente
   para que el fondo blanco del MP4 se funda visualmente. */
.oxford-login-visual,
.oxford-login-visual-content,
.oxford-final-video {
    background-color: transparent !important;
}

.oxford-final-video video {
    background: #ffffff !important;
    mix-blend-mode: normal !important;
    filter: none !important;
}

/* Pantallas medianas */
@media (max-width: 1250px) {
    .oxford-login-layout {
        background-position: center bottom !important;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .oxford-login-layout {
        background-color: #ffffff !important;
        background-size: auto 100% !important;
        background-position: right bottom !important;
    }
}

/* Teléfono:
   mantenemos blanco y la cenefa institucional concentrada abajo/derecha. */
@media (max-width: 640px) {
    .oxford-login-layout {
        background-color: #ffffff !important;
        background-image:
            url("pix/branding/fondo-login-ueo-final-v2.png") !important;
        background-size: auto 100% !important;
        background-position: right bottom !important;
        background-repeat: no-repeat !important;
    }
}

/* =========================================================
   FIN FONDO INSTITUCIONAL DEFINITIVO
   ========================================================= */


/* === FONDO UEO DEFINITIVO === */
.oxford-login-layout { background-color:#fff !important; background-image:url("pix/branding/fondo-login-ueo-final-v2.png") !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important; }
@media (max-width:900px){.oxford-login-layout{background-image:url("pix/branding/fondo-login-ueo-final-v2.png") !important;background-position:center bottom !important;background-size:cover !important;}}