/**
 * Hero (logos + imagen). Escritorio: imagen grande, al borde izquierdo e inferior,
 * sin scroll (viewport fijo). Carga después de link_styles.
 */
.loginPage {
    /* clip fuerza overflow-y a clip y el contenido largo no hace scroll en móvil */
    overflow-x: hidden;
    box-sizing: border-box;
}

.loginPage .loginPage__shell {
    box-sizing: border-box;
}

.loginPage .loginPage__heroCol {
    box-sizing: border-box;
    padding-top: clamp(8px, 2vh, 20px);
}

/* Móvil / tablet estrecha: imagen moderada (algo menos alta) */
.loginPage .loginPage__visual {
    border-radius: 28px;
    box-sizing: border-box;
    min-height: 160px;
    height: min(36vh, 280px);
    margin-top: clamp(6px, 1.2vh, 14px);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-color: transparent;
    width: 100%;
}

@media (max-width: 899px) {
    .loginPage .loginPage__visual {
        min-height: 120px;
        height: min(26vh, 220px);
        margin-top: clamp(4px, 1vh, 12px);
    }
}

@media (min-width: 900px) {
    html {
        height: 100%;
    }

    body {
        margin: 0;
        height: 100%;
        max-height: 100dvh;
        overflow: hidden;
    }

    .loginPage {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .loginPage .loginPage__shell {
        flex: 1 1 auto;
        min-height: 0;
        max-width: 1520px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        padding-top: clamp(4px, 1vh, 12px);
        padding-bottom: 0;
        padding-left: 0;
        padding-right: clamp(4px, 0.9vw, 12px);
        box-sizing: border-box;
    }

    .loginPage .loginPage__body {
        flex: 1 1 auto;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.22fr) minmax(260px, 36%);
        grid-template-rows: 1fr;
        align-items: stretch;
        gap: clamp(4px, 0.7vw, 10px);
        width: 100%;
    }

    .loginPage.formRight .loginPage__body {
        grid-template-columns: minmax(260px, 36%) minmax(0, 1.22fr);
    }

    .loginPage.formRight .loginPage__heroCol {
        order: 2;
    }

    .loginPage.formRight .loginPage__panel {
        order: 1;
    }

    /* Columna hero: la imagen crece y usa casi todo el alto útil */
    .loginPage .loginPage__heroCol {
        display: flex;
        align-items: stretch;
        min-height: 0;
        height: 100%;
        align-self: stretch;
        padding-top: clamp(6px, 1.2vh, 16px);
        padding-left: clamp(12px, 1.8vw, 26px);
        margin-left: calc((min(1761px, 100vw) - 100vw) / 2);
        max-width: none;
        box-sizing: border-box;
    }

    .loginPage.formRight .loginPage__heroCol {
        margin-left: 0;
        margin-right: calc((min(1520px, 100vw) - 100vw) / 2);
        width: calc(100% + (100vw - min(1520px, 100vw)) / 2);
        padding-left: 0;
        padding-right: clamp(12px, 1.8vw, 26px);
        box-sizing: border-box;
    }

    /* Foto: ocupa casi todo el ancho y alto disponibles en la columna; un poco más abajo */
    .loginPage .loginPage__visual {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: 87vh;
        align-self: stretch;
        width: 100%;
        max-width: none;
        margin-top: clamp(46px, 1vh, 16px);
        margin-left: 0;
        margin-right: 0;
        margin-bottom: clamp(4px, 0.9vh, 12px);
        border-radius: clamp(20px, 2.2vw, 28px);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #001524;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    }

    .loginPage.formRight .loginPage__visual {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: clamp(4px, 0.9vh, 12px);
        border-radius: clamp(20px, 2.2vw, 28px);
    }

    /*
     * Columna formulario: en portátiles / PC con poco alto, la tarjeta superaba 100dvh y
     * overflow:hidden la cortaba. La columna ocupa el alto de la fila y hace scroll si hace falta.
     */
    .loginPage:not(.formRight) .loginPage__panel,
    .loginPage.formRight .loginPage__panel {
        align-self: stretch;
        min-height: 0;
        /* No ocultar overflow-x: la tarjeta quedaba “cortada” al usar transform o sombras. */
        overflow-x: visible;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }

    /* Tarjeta centrada en la columna (evita recorte lateral con overflow del padre). */
    .loginPage:not(.formRight) .loginPage__panel {
        box-sizing: border-box;
        padding-top: clamp(18px, 2.5vh, 40px);
        padding-bottom: clamp(18px, 2.5vh, 40px);
        padding-left: clamp(10px, 1.2vw, 20px);
        padding-right: clamp(10px, 1.2vw, 20px);
        align-items: center;
    }

    .loginPage.formRight .loginPage__panel {
        box-sizing: border-box;
        padding-top: clamp(18px, 2.5vh, 40px);
        padding-bottom: clamp(18px, 2.5vh, 40px);
        padding-right: clamp(10px, 1.2vw, 20px);
        padding-left: clamp(10px, 1.2vw, 20px);
        align-items: center;
    }

    /* Vista registro: prioridad al hero (menos aire granate vacío). */
    .loginPage.loginPage--signupMode:not(.formRight) .loginPage__body {
        grid-template-columns: minmax(0, 1.5fr) minmax(260px, 42%);
        gap: clamp(4px, 0.8vw, 12px);
    }

    .loginPage.formRight.loginPage--signupMode .loginPage__body {
        grid-template-columns: minmax(260px, 42%) minmax(0, 1.5fr);
        gap: clamp(4px, 0.8vw, 12px);
    }

    .loginPage.loginPage--signupMode:not(.formRight) .loginPage__panel {
        padding-top: clamp(18px, 3.5vh, 56px) !important;
        padding-right: 0 !important;
        padding-left: clamp(0px, 0.4vw, 6px) !important;
    }

    .loginPage.formRight.loginPage--signupMode .loginPage__panel {
        padding-top: clamp(18px, 3.5vh, 56px) !important;
        padding-left: 0 !important;
        padding-right: clamp(0px, 0.4vw, 6px) !important;
    }

    /* Modo registro en 900–1599px: misma lógica que login (evita márgenes fijos / escalado raro en portátiles). */
    .loginPage.loginPage--signupMode .loginPage__heroCol {
        justify-content: stretch;
        align-items: stretch;
    }
}

/*
 * PC estándar / portátil (900–1599px), modo registro: formulario con buen ancho; imagen llena el alto/ancho
 * disponibles en la columna izquierda (sin miniatura centrada).
 */
@media (min-width: 900px) and (max-width: 1599px) {
    .loginPage.loginPage--signupMode:not(.formRight) .loginPage__body {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 54%);
        gap: clamp(6px, 1vw, 14px);
    }

    .loginPage.formRight.loginPage--signupMode .loginPage__body {
        grid-template-columns: minmax(300px, 54%) minmax(0, 1fr);
        gap: clamp(6px, 1vw, 14px);
    }

    .loginPage.loginPage--signupMode .loginPage__heroCol {
        justify-content: stretch;
        align-items: stretch;
        min-height: 0;
    }

    .loginPage.loginPage--signupMode .loginPage__visual {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: clamp(6px, 1vh, 14px) !important;
        margin-bottom: clamp(4px, 0.8vh, 12px) !important;
        min-height: min(78dvh, calc(100dvh - 48px)) !important;
        max-height: none !important;
        height: auto !important;
        align-self: stretch !important;
    }

    .loginPage.loginPage--signupMode:not(.formRight) .loginPage__panel {
        padding-top: clamp(10px, 2vh, 28px) !important;
        padding-bottom: clamp(6px, 1vh, 12px) !important;
    }

    .loginPage.formRight.loginPage--signupMode .loginPage__panel {
        padding-top: clamp(10px, 2vh, 28px) !important;
        padding-bottom: clamp(6px, 1vh, 12px) !important;
    }
}

/* PC con buen alto: más aire encima del formulario (antes iba en media anidada). */
@media (min-width: 900px) and (min-height: 920px) {
    .loginPage:not(.formRight) .loginPage__panel {
        padding-top: clamp(40px, 7.5vh, 100px);
    }

    .loginPage.formRight .loginPage__panel {
        padding-top: clamp(40px, 7.5vh, 100px);
    }

    /* Registro embebido: menos padding vertical para evitar scroll en portátiles altos. */
    .loginPage.loginPage--signupMode:not(.formRight) .loginPage__panel {
        padding-top: clamp(12px, 2.5vh, 32px) !important;
    }

    .loginPage.formRight.loginPage--signupMode .loginPage__panel {
        padding-top: clamp(12px, 2.5vh, 32px) !important;
    }
}

/* PC ancho medio: un poco más de sitio para la tarjeta sin apretar tanto el hero */
@media (min-width: 900px) and (max-width: 1320px) {
    .loginPage .loginPage__body {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 42%);
    }

    .loginPage.formRight .loginPage__body {
        grid-template-columns: minmax(300px, 42%) minmax(0, 1fr);
    }
}

/*
 * Pantallas muy anchas (≥1600px): shell a todo el ancho; form al borde; imagen acercada sin desbordar
 * (87% + 13% margen = 100%; en 1440–1599px se mantiene el layout de PC del bloque 900px).
 */
@media (min-width: 1600px) {
    .loginPage .loginPage__shell {
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-right: clamp(10px, 1vw, 18px);
    }

    /* Más fr al hero, columna form algo más estrecha, menos hueco entre columnas */
    .loginPage:not(.formRight) .loginPage__body {
        grid-template-columns: minmax(0, 1.62fr) minmax(280px, 32%);
        gap: clamp(2px, 0.35vw, 8px);
    }

    .loginPage.formRight .loginPage__body {
        grid-template-columns: minmax(280px, 32%) minmax(0, 1.62fr);
        gap: clamp(2px, 0.35vw, 8px);
    }

    .loginPage.loginPage--signupMode:not(.formRight) .loginPage__body {
        grid-template-columns: minmax(0, 1.55fr) minmax(280px, 40%) !important;
        gap: clamp(4px, 0.6vw, 10px) !important;
    }

    .loginPage.formRight.loginPage--signupMode .loginPage__body {
        grid-template-columns: minmax(280px, 40%) minmax(0, 1.55fr) !important;
        gap: clamp(4px, 0.6vw, 10px) !important;
    }

    .loginPage:not(.formRight) .loginPage__heroCol {
        padding-right: clamp(4px, 0.45vw, 10px);
    }

    .loginPage.formRight .loginPage__heroCol {
        padding-left: clamp(4px, 0.45vw, 10px);
    }

    /* Centrado vertical del bloque; tarjeta al borde derecho con solo un respiro */
    .loginPage:not(.formRight) .loginPage__panel {
        align-items: flex-end;
        justify-content: center;
        padding-top: clamp(6px, 1vh, 14px);
        padding-bottom: clamp(6px, 1vh, 14px);
        padding-left: clamp(8px, 0.9vw, 16px);
        padding-right: clamp(4px, 0.35vw, 10px);
    }

    .loginPage.formRight .loginPage__panel {
        align-items: flex-start;
        justify-content: center;
        padding-top: clamp(6px, 1vh, 14px);
        padding-bottom: clamp(6px, 1vh, 14px);
        padding-left: clamp(4px, 0.35vw, 10px);
        padding-right: clamp(8px, 0.9vw, 16px);
    }

    .loginPage.loginPage--signupMode:not(.formRight) .loginPage__panel {
        justify-content: center !important;
        align-items: flex-end !important;
        padding-top: clamp(6px, 1vh, 14px) !important;
        padding-bottom: clamp(6px, 1vh, 14px) !important;
        padding-right: clamp(4px, 0.35vw, 10px) !important;
        padding-left: clamp(8px, 0.8vw, 14px) !important;
    }

    .loginPage.formRight.loginPage--signupMode .loginPage__panel {
        justify-content: center !important;
        align-items: flex-start !important;
        padding-top: clamp(6px, 1vh, 14px) !important;
        padding-bottom: clamp(6px, 1vh, 14px) !important;
        padding-left: clamp(4px, 0.35vw, 10px) !important;
        padding-right: clamp(8px, 0.8vw, 14px) !important;
    }

    .loginPage:not(.formRight) .loginPage__panel > .loginPage__card {
        margin-left: auto;
        margin-top: 0;
        margin-bottom: 0;
    }

    .loginPage.loginPage--signupMode:not(.formRight) .loginPage__panel > .loginPage__signupEmbed {
        margin-left: auto;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .loginPage.formRight .loginPage__panel > .loginPage__card {
        margin-left: 0;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
    }

    .loginPage.formRight.loginPage--signupMode .loginPage__panel > .loginPage__signupEmbed {
        margin-left: 0;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* 87% + 13% de margen = 100% del ancho útil (95%+13% desbordaba y cortaba el form). */
    .loginPage:not(.loginPage--signupMode):not(.formRight) .loginPage__visual {
        width: 95%;
        margin-left: 13%;
        margin-right: auto;
    }

    .loginPage.formRight:not(.loginPage--signupMode) .loginPage__visual {
        width: 87%;
        margin-right: 13%;
        margin-left: auto;
    }

    /*
     * Modo «Crear cuenta» solo en pantallas muy anchas: imagen más grande y desplazada
     * (evita reglas agresivas en portátiles / PC estándar 1366–1440).
     */
    .loginPage.loginPage--signupMode:not(.formRight) .loginPage__visual {
        flex: 1 1 auto !important;
        min-height: clamp(300px, 56dvh, 640px) !important;
        max-height: min(82dvh, 760px) !important;
        height: auto !important;
        width: 88% !important;
        max-width: none !important;
        margin-left: 195px !important;
        margin-right: 0 !important;
        margin-top: 69px;
        align-self: stretch;
    }

    .loginPage.formRight.loginPage--signupMode .loginPage__visual {
        flex: 1 1 auto !important;
        min-height: clamp(300px, 56dvh, 640px) !important;
        max-height: min(82dvh, 760px) !important;
        height: auto !important;
        width: 88% !important;
        max-width: none !important;
        margin-right: 195px !important;
        margin-left: 0 !important;
        margin-top: 69px;
        align-self: stretch;
    }

    .loginPage.loginPage--signupMode .loginPage__heroCol {
        justify-content: stretch;
        align-items: stretch;
    }
}

/*
 * Móvil: prioridad alta (este archivo va después de link_styles).
 * Tema / admin pueden fijar html,body { height:100%; overflow:hidden } — se anula aquí.
 */
@media (max-width: 899px) {
    html:has(article.loginPage),
    body:has(article.loginPage) {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    article.loginPage {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .loginPage .loginPage__shell {
        flex: none !important;
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
    }

    .loginPage .loginPage__body {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
    }
}