/* =========================================================
   DOLCI HANDS
   AUTH
   Login / Register
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.auth-page {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px 24px;

    background:
        var(--color-background, #f7f0e6);

}


/* =========================================================
   CARD PRINCIPAL
   ========================================================= */

.auth-card {

    width:
        min(100%, 1000px);

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    overflow:
        hidden;

    border:
        1px solid
        rgba(76, 43, 34, .10);

    border-radius:
        28px;

    background:
        #fffdf9;

    box-shadow:
        0 25px 70px
        rgba(76, 43, 34, .12);

}


/* =========================================================
   IMAGEN
   ========================================================= */

.auth-visual {

    min-height:
        660px;

    position:
        relative;

    overflow:
        hidden;

    background:
        #ead8c7;

}


.auth-visual::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(76, 43, 34, 0) 45%,
            rgba(76, 43, 34, .18) 100%
        );

    pointer-events:
        none;

}


.auth-visual img {

    width:
        100%;

    height:
        111%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        75% center;

}


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

.auth-form {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        64px 60px;

    background:
        #fffdf9;

}


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

.auth-header {

    margin-bottom:
        36px;

}


.auth-eyebrow {

    display:
        block;

    margin-bottom:
        12px;

    color:
        #b96f55;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.auth-header h1 {

    margin:
        0 0 14px;

    color:
        #2f211d;

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

    font-size:
        clamp(34px, 4vw, 46px);

    font-weight:
        500;

    line-height:
        1.05;

}


.auth-header p {

    margin:
        0;

    max-width:
        360px;

    color:
        #755f56;

    font-size:
        15px;

    line-height:
        1.7;

}


/* =========================================================
   MENSAJES
   ========================================================= */

.auth-message {

    margin-bottom:
        20px;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(76, 43, 34, .10);

    border-radius:
        12px;

    font-size:
        14px;

    line-height:
        1.5;

}


.auth-message-error {

    color:
        #8b3d32;

    background:
        rgba(185, 111, 85, .08);

}


.auth-message-success {

    color:
        #426342;

    background:
        rgba(92, 130, 92, .08);

}


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

.auth-form-fields {

    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;

}


.auth-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


.auth-field label {

    color:
        #4c2b22;

    font-size:
        13px;

    font-weight:
        600;

}


.auth-field input {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        14px 16px;

    border:
        1px solid
        #ddcec2;

    border-radius:
        12px;

    outline:
        none;

    color:
        #2f211d;

    background:
        #fff;

    font-family:
        inherit;

    font-size:
        14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.auth-field input::placeholder {

    color:
        #a8958b;

}


.auth-field input:hover {

    border-color:
        #cbb6a7;

}


.auth-field input:focus {

    border-color:
        #b96f55;

    background:
        #fffdfb;

    box-shadow:
        0 0 0 4px
        rgba(185, 111, 85, .10);

}


/* =========================================================
   CABECERA DEL CAMPO DE CONTRASEÑA
   ========================================================= */

.auth-field-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

}


.auth-forgot {

    color:
        #9b6652;

    font-size:
        12px;

    text-decoration:
        none;

    transition:
        color .2s ease;

}


.auth-forgot:hover {

    color:
        #4c2b22;

    text-decoration:
        underline;

}


/* =========================================================
   BOTÓN
   ========================================================= */

.auth-submit {

    width:
        100%;

    margin-top:
        4px;

    padding:
        15px 20px;

    border:
        1px solid
        #4c2b22;

    border-radius:
        12px;

    cursor:
        pointer;

    color:
        #fff;

    background:
        #4c2b22;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        600;

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

}


.auth-submit:hover {

    transform:
        translateY(-1px);

    background:
        #633b2f;

    box-shadow:
        0 10px 24px
        rgba(76, 43, 34, .16);

}


.auth-submit:active {

    transform:
        translateY(0);

}


/* =========================================================
   REGISTRO
   ========================================================= */

.auth-register {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        28px;

    color:
        #755f56;

    font-size:
        13px;

    text-align:
        center;

}


.auth-register a {

    color:
        #9b6652;

    font-weight:
        600;

    text-decoration:
        none;

}


.auth-register a:hover {

    color:
        #4c2b22;

    text-decoration:
        underline;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .auth-card {

        grid-template-columns:
            1fr;

        max-width:
            520px;

    }


    .auth-visual {

        min-height:
            260px;

        max-height:
            300px;

    }


    .auth-form {

        padding:
            48px 42px;

    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 520px) {

    .auth-page {

        padding:
            20px 14px;

        align-items:
            flex-start;

        padding-top:
            28px;

    }


    .auth-card {

        border-radius:
            22px;

    }


    .auth-visual {

        min-height:
            210px;

        max-height:
            230px;

    }


    .auth-form {

        padding:
            38px 26px 32px;

    }


    .auth-header {

        margin-bottom:
            28px;

    }


    .auth-header h1 {

        font-size:
            34px;

    }


    .auth-field-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            5px;

    }

}



/* =========================================================
   NAVBAR — AVISO PARA USUARIOS NO AUTENTICADOS
   ========================================================= */

.guest-navbar-action {

    position:
        relative;

}



.guest-navbar-notice {

    position:
        absolute;

    top:
        calc(100% + 12px);

    right:
        0;

    z-index:
        1000;

    width:
        max-content;

    max-width:
        220px;

    padding:
        11px 15px;

    border:
        1px solid
        rgba(76, 43, 34, .12);

    border-radius:
        10px;

    color:
        #4c2b22;

    background:
        #fffdf9;

    box-shadow:
        0 10px 28px
        rgba(76, 43, 34, .14);

    font-size:
        12px;

    line-height:
        1.4;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-6px);

    pointer-events:
        none;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;

}


/* Pequeño indicador */

.guest-navbar-notice::before {

    content:
        "";

    position:
        absolute;

    top:
        -6px;

    right:
        22px;

    width:
        10px;

    height:
        10px;

    border-top:
        1px solid
        rgba(76, 43, 34, .12);

    border-left:
        1px solid
        rgba(76, 43, 34, .12);

    background:
        #fffdf9;

    transform:
        rotate(45deg);

}


/* Mostrar aviso */

.guest-navbar-action.show-notice
.guest-navbar-notice {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}



/* =========================================================
   LOGIN — MISMAS DIMENSIONES QUE REGISTER
   ========================================================= */

/* =========================================================
   LOGIN + REGISTER
   DIMENSIONES UNIFICADAS
   ========================================================= */

.auth-card {

    width:
        min(100%, 1000px);

    height:
        660px;

    min-height:
        660px;

    align-items:
        stretch;

}


.auth-visual {

    height:
        100%;

    min-height:
        0;

    align-self:
        stretch;

}