/* ============================================================
   WÖRTH Selection
   Sistema visual para Login / Registro
   ============================================================ */

:root{
    --worth-green:#0a4636;
    --worth-green-dark:#06382b;
    --worth-green-soft:#dfeee7;

    --worth-sand:#c9a775;
    --worth-sand-soft:#eadcc7;

    --worth-cream:#f7f4ed;
    --worth-cream-2:#fbfaf6;

    --worth-mint:#b8f0d5;

    --worth-text:#16382f;
    --worth-muted:#69766f;
    --worth-border:#d8ddd9;

    --worth-danger:#b42318;
}


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

body{
    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            #ffffff 78px,
            var(--worth-cream) 78px,
            var(--worth-cream) 100%
        ) !important;

    color:var(--worth-text) !important;
}


body.ws-worth-auth-page{
    min-height:100vh;
}


/* ============================================================
   HEADER
   ============================================================ */

body.ws-worth-auth-page .header{
    height:78px !important;
    background:#fff !important;
    border-bottom:1px solid rgba(10,70,54,.10) !important;
    padding:0 5.5% !important;
    position:relative;
    z-index:30;
}


body.ws-worth-auth-page .brand-logo,
body.ws-worth-auth-page .logo{
    display:flex !important;
    align-items:center !important;
    color:var(--worth-green) !important;
    cursor:pointer;
}


body.ws-worth-auth-page .ws-worth-brand-image{
    display:block;
    width:auto;
    height:55px;
    max-width:205px;
    object-fit:contain;
}


body.ws-worth-auth-page .header-actions,
body.ws-worth-auth-page .register-header-actions{
    display:flex;
    align-items:center;
    gap:17px;
}


body.ws-worth-auth-page .audience-switch{
    display:flex !important;
    padding:3px !important;

    border:
        1px solid
        rgba(10,70,54,.42) !important;

    border-radius:25px !important;
    background:#fff !important;
}


body.ws-worth-auth-page .audience-btn{
    min-width:94px !important;
    height:34px !important;

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

    background:transparent !important;
    color:var(--worth-green) !important;

    font-size:12px !important;
    font-weight:700 !important;

    transition:.18s ease;
}


body.ws-worth-auth-page .audience-btn:hover{
    background:#f0f5f2 !important;
}


body.ws-worth-auth-page .audience-btn.active{
    background:var(--worth-green) !important;
    color:#fff !important;
}


body.ws-worth-auth-page .header-icon,
body.ws-worth-auth-page .header-symbol{
    color:var(--worth-green) !important;
}


/* ============================================================
   LOGIN / REGISTRO TABS
   Inspirado en la experiencia que mostraste,
   pero con identidad WÖRTH
   ============================================================ */

.ws-auth-modebar{
    width:min(980px,calc(100% - 40px));
    height:76px;

    margin:32px auto 0;

    display:grid;
    grid-template-columns:1fr 1fr;

    position:relative;
    z-index:12;

    border-radius:18px 18px 0 0;
    overflow:hidden;

    box-shadow:
        0 16px 40px
        rgba(25,55,45,.06);
}


.ws-auth-mode{
    display:flex;
    justify-content:center;
    align-items:center;

    border:0;
    text-decoration:none;

    background:#fff;
    color:var(--worth-green);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:16px;
    font-weight:750;

    cursor:pointer;

    transition:
        background .18s ease,
        color .18s ease;
}


.ws-auth-mode:hover{
    background:#f3f5f1;
}


.ws-auth-mode.active{
    background:var(--worth-sand-soft);
    color:var(--worth-green-dark);
}


/* ============================================================
   DECORACIONES GEOMÉTRICAS
   ============================================================ */

.ws-worth-shape{
    position:fixed;
    z-index:0;
    pointer-events:none;
    opacity:.72;
}


.ws-worth-circle-one{
    width:180px;
    height:180px;

    left:-75px;
    top:135px;

    border-radius:50%;

    background:
        rgba(190,237,213,.72);
}


.ws-worth-circle-two{
    width:105px;
    height:105px;

    right:-35px;
    top:190px;

    border-radius:50%;

    background:
        rgba(226,210,180,.65);
}


.ws-worth-square-one{
    width:125px;
    height:125px;

    right:8%;
    bottom:9%;

    border:
        2px solid
        rgba(150,232,194,.65);

    border-radius:25px;

    transform:
        rotate(8deg);
}


.ws-worth-square-two{
    width:100px;
    height:100px;

    left:7%;
    bottom:12%;

    border:
        1.5px solid
        rgba(10,70,54,.15);

    border-radius:20px;

    transform:
        rotate(-11deg);
}


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

body.ws-worth-auth-page .auth-wrapper{
    position:relative;
    z-index:5;
    min-height:auto !important;
}


body.ws-worth-auth-page .auth-container{
    width:min(980px,calc(100% - 40px)) !important;
    max-width:980px !important;

    margin:0 auto 40px !important;

    min-height:570px !important;

    background:#fff;

    border:
        1px solid
        rgba(10,70,54,.10);

    border-radius:
        0 0 18px 18px;

    overflow:hidden;

    box-shadow:
        0 20px 65px
        rgba(20,50,40,.07);
}


body.ws-worth-auth-page .login-side{
    position:relative;
    z-index:3;

    padding:
        55px 62px 50px !important;

    background:#fff !important;
}


body.ws-worth-auth-page .register-side{
    position:relative;
    overflow:hidden;

    padding:
        55px 55px 50px !important;

    background:
        linear-gradient(
            145deg,
            #e8dcc8 0%,
            #d5b987 100%
        ) !important;
}


body.ws-worth-auth-page .register-side::before{
    content:"";

    position:absolute;

    width:190px;
    height:190px;

    right:-80px;
    top:-65px;

    border-radius:50%;

    background:
        rgba(255,255,255,.22);
}


body.ws-worth-auth-page .register-side::after{
    content:"";

    position:absolute;

    width:120px;
    height:120px;

    left:-45px;
    bottom:40px;

    border:
        2px solid
        rgba(10,70,54,.15);

    border-radius:25px;

    transform:
        rotate(14deg);
}


body.ws-worth-auth-page .auth-title{
    position:relative;
    z-index:2;

    margin:0 0 13px !important;

    color:
        var(--worth-green) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:36px !important;
    line-height:1.05;

    font-weight:500 !important;

    letter-spacing:-1px !important;

    text-align:left !important;
}


body.ws-worth-auth-page .auth-description{
    position:relative;
    z-index:2;

    max-width:390px;

    margin:
        0 0 34px !important;

    color:
        var(--worth-muted) !important;

    font-size:13px !important;
    line-height:1.65 !important;
}


/* ============================================================
   CAMPOS
   ============================================================ */

body.ws-worth-auth-page label{
    color:
        var(--worth-text) !important;

    font-size:12.5px !important;
    font-weight:650 !important;
}


body.ws-worth-auth-page input[type="text"],
body.ws-worth-auth-page input[type="email"],
body.ws-worth-auth-page input[type="password"],
body.ws-worth-auth-page input[type="url"]{
    min-height:48px !important;

    border:
        1px solid
        var(--worth-border) !important;

    border-radius:9px !important;

    background:#fff !important;

    color:#21352f !important;

    font-size:13.5px !important;

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


body.ws-worth-auth-page input:focus{
    border-color:
        var(--worth-green) !important;

    box-shadow:
        0 0 0 3px
        rgba(10,70,54,.09) !important;
}


body.ws-worth-auth-page .eye{
    color:
        var(--worth-green) !important;
}


/* ============================================================
   BOTONES
   ============================================================ */

body.ws-worth-auth-page .btn-primary{
    background:
        var(--worth-green) !important;

    color:#fff !important;

    border-radius:25px !important;

    box-shadow:
        0 7px 20px
        rgba(10,70,54,.12);

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


body.ws-worth-auth-page .btn-primary:hover{
    background:
        var(--worth-green-dark) !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 25px
        rgba(10,70,54,.17);
}


/* ============================================================
   PANEL REGISTRO DEL LOGIN
   ============================================================ */

body.ws-worth-auth-page .register-image{
    position:relative;
    z-index:2;

    border-radius:18px !important;
    overflow:hidden;

    box-shadow:
        0 15px 35px
        rgba(50,65,48,.12);
}


body.ws-worth-auth-page .register-benefits{
    position:relative;
    z-index:2;

    color:
        var(--worth-green-dark) !important;
}


body.ws-worth-auth-page .check{
    color:
        var(--worth-green) !important;
}


/* ============================================================
   REGISTER.HTML / REGISTER-COMPANY.HTML
   ============================================================ */

body.ws-worth-auth-page .page{
    position:relative;
    z-index:5;
}


body.ws-worth-auth-page .page > .columns,
body.ws-worth-auth-page .register-layout{
    position:relative;
    z-index:3;
}


body.ws-worth-auth-page .page h1,
body.ws-worth-auth-page .hero h1{
    color:
        var(--worth-green) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-weight:500 !important;

    letter-spacing:-1px !important;
}


body.ws-worth-auth-page .subtitle,
body.ws-worth-auth-page .hero p{
    color:
        var(--worth-muted) !important;
}


body.ws-worth-auth-page .card{
    border:
        1px solid
        rgba(10,70,54,.11) !important;

    box-shadow:
        0 15px 40px
        rgba(20,55,43,.055);

    border-radius:15px !important;
}


body.ws-worth-auth-page .card-title{
    color:
        var(--worth-green) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:21px !important;
}


body.ws-worth-auth-page .info-card{
    background:
        var(--worth-green) !important;

    border-radius:18px !important;

    box-shadow:
        0 18px 45px
        rgba(10,70,54,.13);
}


body.ws-worth-auth-page .info-number{
    background:
        var(--worth-sand) !important;

    color:
        var(--worth-green-dark) !important;
}


/* Registro candidato: panel derecho */

body.ws-worth-auth-page .social-button{
    border-radius:25px !important;

    background:
        #ece6db !important;

    color:
        #777066 !important;
}


body.ws-worth-auth-page .login-link a,
body.ws-worth-auth-page .check-row a{
    color:
        var(--worth-green) !important;
}


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

body.ws-worth-auth-page .footer,
body.ws-worth-auth-page .footer-legal{
    position:relative;
    z-index:4;

    color:
        var(--worth-muted) !important;
}


/* ============================================================
   MENSAJE CONFIANZA
   ============================================================ */

.ws-auth-trust{
    position:relative;
    z-index:4;

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

    gap:25px;
    flex-wrap:wrap;

    width:min(900px,calc(100% - 40px));

    margin:
        0 auto 28px;

    color:
        var(--worth-muted);

    font-size:11px;
}


.ws-auth-trust span{
    display:flex;
    align-items:center;
    gap:6px;
}


.ws-auth-trust i{
    width:18px;
    height:18px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        var(--worth-green);

    color:#fff;

    font-size:9px;
    font-style:normal;
}


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

@media(max-width:800px){

    .ws-auth-modebar{
        width:
            calc(100% - 30px);

        height:60px;

        margin-top:20px;
    }


    .ws-auth-mode{
        font-size:13px;
    }


    body.ws-worth-auth-page .auth-container{
        width:
            calc(100% - 30px) !important;
    }


    body.ws-worth-auth-page .login-side{
        padding:
            40px 25px !important;
    }


    body.ws-worth-auth-page .auth-title{
        font-size:31px !important;
    }


    body.ws-worth-auth-page .audience-switch{
        display:none !important;
    }


    .ws-worth-shape{
        opacity:.35;
    }
}


/* ============================================================
   WÖRTH · AUTH v3
   Alineación visual con la página pública
   ============================================================ */


/*
 * HEADER
 * La web pública utiliza un encabezado más alto
 * y el logo comienza más adentro.
 */

body.ws-worth-auth-page .header{
    height:106px !important;

    padding-left:7.8% !important;
    padding-right:7.8% !important;

    background:#ffffff !important;

    border-bottom:
        1px solid
        rgba(10,70,54,.08) !important;
}


/*
 * IMPORTANTE:
 * dimensionamos el logo por WIDTH, no por HEIGHT.
 *
 * El PNG transparente contiene espacio vertical,
 * por eso con height:55px se veía demasiado pequeño.
 */

body.ws-worth-auth-page .ws-worth-brand-image{
    width:185px !important;
    height:auto !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;
}


/*
 * Selector Candidatos / Empresas
 */

body.ws-worth-auth-page .header-actions,
body.ws-worth-auth-page .register-header-actions{
    gap:18px !important;
}


body.ws-worth-auth-page .audience-switch{
    min-height:42px;

    align-items:center;

    border-color:
        rgba(10,70,54,.28) !important;

    background:#fff !important;
}


body.ws-worth-auth-page .audience-btn{
    height:36px !important;

    min-width:100px !important;

    font-size:12px !important;
}


/*
 * Fondo inmediatamente después del header.
 */

body.ws-worth-auth-page{
    background:
        #f7f4ed !important;
}


/*
 * Tabs Login / Registro
 */

.ws-auth-modebar{
    width:min(
        1000px,
        calc(100% - 40px)
    ) !important;

    height:76px !important;

    margin-top:32px !important;

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

    box-shadow:
        0 10px 32px
        rgba(32,60,48,.045) !important;
}


.ws-auth-mode{
    font-size:16px !important;
    font-weight:750 !important;
}


.ws-auth-mode.active{
    background:
        #e9dac1 !important;

    color:
        #073f31 !important;
}


/*
 * Caja principal.
 * Exactamente el mismo ancho que las tabs.
 */

body.ws-worth-auth-page .auth-container{
    width:min(
        1000px,
        calc(100% - 40px)
    ) !important;

    max-width:1000px !important;

    margin:
        0 auto 32px !important;

    min-height:570px !important;

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

    box-shadow:
        0 22px 55px
        rgba(27,55,44,.08) !important;
}


/*
 * Proporciones internas.
 */

body.ws-worth-auth-page .login-side{
    padding:
        58px 64px
        52px !important;
}


body.ws-worth-auth-page .register-side{
    padding:
        58px 55px
        52px !important;

    background:
        linear-gradient(
            145deg,
            #eadcc5 0%,
            #d8bd8d 100%
        ) !important;
}


/*
 * Foto:
 * eliminamos definitivamente el violeta
 * de la versión anterior.
 */

body.ws-worth-auth-page .register-image{
    height:190px !important;

    border-radius:17px !important;

    background:
        linear-gradient(
            135deg,
            rgba(7,63,49,.18),
            rgba(7,63,49,.05)
        ),
        url(
            'https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1000&q=80'
        )
        center / cover !important;

    box-shadow:
        0 12px 28px
        rgba(27,55,44,.12) !important;
}


/*
 * Títulos más parecidos a la Home.
 */

body.ws-worth-auth-page .auth-title{
    color:
        #073f31 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        37px !important;

    line-height:
        1.02 !important;

    font-weight:
        500 !important;
}


/*
 * Inputs un poco más refinados.
 */

body.ws-worth-auth-page input[type="text"],
body.ws-worth-auth-page input[type="email"],
body.ws-worth-auth-page input[type="password"],
body.ws-worth-auth-page input[type="url"]{

    min-height:
        50px !important;

    border-radius:
        9px !important;

    border-color:
        #ccd5d0 !important;
}


/*
 * Botón principal siguiendo el CTA verde
 * de la página principal.
 */

body.ws-worth-auth-page .btn-primary{
    min-height:52px !important;

    background:
        #07513e !important;

    border-radius:
        27px !important;
}


body.ws-worth-auth-page .btn-primary:hover{
    background:
        #063f31 !important;
}


/*
 * Formas decorativas.
 * Más sutiles para que acompañen y no distraigan.
 */

.ws-worth-circle-one{
    width:175px !important;
    height:175px !important;

    left:-105px !important;
    top:150px !important;
}


.ws-worth-circle-two{
    width:115px !important;
    height:115px !important;

    right:-48px !important;
    top:205px !important;
}


.ws-worth-square-one,
.ws-worth-square-two{
    opacity:.58 !important;
}


/*
 * Responsive
 */

@media(max-width:900px){

    body.ws-worth-auth-page .header{
        height:82px !important;

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


    body.ws-worth-auth-page .ws-worth-brand-image{
        width:145px !important;
    }

}


@media(max-width:800px){

    .ws-auth-modebar,
    body.ws-worth-auth-page .auth-container{

        width:
            calc(100% - 30px) !important;
    }

}



/* ============================================================
   WÖRTH AUTH v4
   Proporciones del header iguales a la web pública
   ============================================================ */


/*
 * La Home trabaja visualmente dentro de un contenedor
 * aproximado de 1180 px centrado.
 *
 * En vez de usar un porcentaje fijo lateral,
 * calculamos automáticamente el margen.
 */

body.ws-worth-auth-page .header{

    height:90px !important;

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

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

    background:#fff !important;

    border-bottom:
        1px solid
        rgba(10,70,54,.07) !important;
}


/*
 * Tamaño visual equivalente al logo de la Home.
 */

body.ws-worth-auth-page .ws-worth-brand-image{

    width:165px !important;

    height:auto !important;

    max-width:none !important;

    display:block !important;
}


/*
 * Selector superior con proporción más compacta,
 * como en la web principal.
 */

body.ws-worth-auth-page .audience-switch{

    min-height:39px !important;

    padding:2px !important;

    border:
        1px solid
        #cad5d0 !important;

    border-radius:
        23px !important;
}


body.ws-worth-auth-page .audience-btn{

    min-width:92px !important;

    height:33px !important;

    padding:
        0 14px !important;

    font-size:
        11px !important;

    border-radius:
        19px !important;
}


/*
 * Iconos superiores algo más compactos.
 */

body.ws-worth-auth-page .header-icon,
body.ws-worth-auth-page .header-symbol{

    width:25px !important;

    height:25px !important;

    font-size:18px !important;
}


/*
 * La caja del acceso no debe quedar pegada al header.
 * Dejamos aire parecido al inicio del hero de la Home.
 */

.ws-auth-modebar{

    width:min(
        1000px,
        calc(100% - 40px)
    ) !important;

    margin-top:
        34px !important;
}


/*
 * Todo el formulario ligeramente más bajo para mantener
 * la relación de espacio del Home.
 */

body.ws-worth-auth-page .auth-container{

    min-height:
        560px !important;
}


/*
 * Ajustamos también el fondo para que empiece inmediatamente
 * después del header igual que la portada.
 */

body.ws-worth-auth-page{

    background:
        #f7f4ed !important;
}


/*
 * Móviles / tablets
 */

@media(max-width:1250px){

    body.ws-worth-auth-page .header{

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

}


@media(max-width:800px){

    body.ws-worth-auth-page .header{

        height:78px !important;

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


    body.ws-worth-auth-page .ws-worth-brand-image{

        width:135px !important;
    }

}