/* ==========================================================
   WÖRTH Selection
   Logo coordinado con la web corporativa
   ========================================================== */


/*
 * Web principal:
 * contenido aproximado de 1280px centrado.
 *
 * Esto hace que el logo mantenga la misma
 * alineación izquierda en diferentes monitores.
 */

.ws-auth-v2-header {
    height: 104px !important;
    min-height: 104px !important;

    padding-left:
        max(
            28px,
            calc((100vw - 1280px) / 2)
        ) !important;

    padding-right:
        max(
            28px,
            calc((100vw - 1280px) / 2)
        ) !important;

    box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   LINK DEL LOGO
   ---------------------------------------------------------- */

.ws-auth-v2-logo {
    position: relative !important;

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

    width: 205px !important;
    min-width: 205px !important;

    height: 78px !important;

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

    overflow: visible !important;

    cursor: pointer !important;

    text-decoration: none !important;
}


/* contenedor */

.ws-auth-v2-logo-mount {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 205px !important;
    min-width: 205px !important;

    height: 78px !important;

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

    overflow: visible !important;
}


/*
 * IMPORTANTE
 *
 * El archivo que estás usando tiene margen interno.
 * Por eso el bitmap es más grande que la parte visible.
 *
 * Este tamaño deja el WÖRTH visible aproximadamente
 * como el logo de la web corporativa.
 */

.ws-auth-v2-logo-mount img,
.ws-auth-v2-logo img,
#wsWorthCleanLogo,
#wsWorthCorporateLogo {

    display: block !important;

    width: 285px !important;
    min-width: 285px !important;
    max-width: 285px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: left center !important;

    /*
     * Compensa únicamente el margen transparente
     * del archivo.
     */
    transform:
        translateX(-26px) !important;

    transform-origin:
        left center !important;

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

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none !important;

    image-rendering: auto !important;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1000px) {

    .ws-auth-v2-header {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .ws-auth-v2-logo,
    .ws-auth-v2-logo-mount {
        width: 190px !important;
        min-width: 190px !important;
    }

    .ws-auth-v2-logo-mount img,
    .ws-auth-v2-logo img,
    #wsWorthCleanLogo,
    #wsWorthCorporateLogo {

        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;

        transform:
            translateX(-24px) !important;
    }
}


/* ----------------------------------------------------------
   MÓVIL
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .ws-auth-v2-header {
        height: 82px !important;
        min-height: 82px !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .ws-auth-v2-logo,
    .ws-auth-v2-logo-mount {
        width: 160px !important;
        min-width: 160px !important;

        height: 62px !important;
    }

    .ws-auth-v2-logo-mount img,
    .ws-auth-v2-logo img,
    #wsWorthCleanLogo,
    #wsWorthCorporateLogo {

        width: 215px !important;
        min-width: 215px !important;
        max-width: 215px !important;

        transform:
            translateX(-20px) !important;
    }
}