/* =========================================================
   HOTELTALENTO
   REGISTRO DE CANDIDATOS
   ========================================================= */

:root {
    --ht-green: #2d7a5b;
    --ht-green-dark: #225f47;
    --ht-green-soft: #eef7f2;

    --ht-navy: #193443;
    --ht-text: #30444f;
    --ht-muted: #78878e;

    --ht-border: #e1e8e4;
    --ht-bg: #f6f8f7;
    --ht-white: #ffffff;

    --ht-danger: #9a4444;
}


/* =========================================================
   RESET LOCAL
   ========================================================= */

.ht-register-page,
.ht-register-page * {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
}


body.ht-register-page {
    min-height: 100vh;

    color: var(--ht-text);
    background: var(--ht-bg);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


.ht-register-page button,
.ht-register-page input {
    font-family: inherit;
}


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

.ht-register-layout {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


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

.ht-register-topbar {
    position: relative;
    z-index: 20;

    height: 72px;

    flex: 0 0 72px;

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

    border-bottom: 1px solid var(--ht-border);
}


.ht-register-topbar-inner {
    width: min(
        1180px,
        calc(100% - 40px)
    );

    height: 100%;

    margin: 0 auto;

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

    gap: 30px;
}


/* Marca */

.ht-register-brand {
    display: flex;
    flex-direction: column;

    color: inherit;

    text-decoration: none;
}


.ht-register-brand-name {
    color: var(--ht-navy);

    font-size: 1.08rem;
    font-weight: 750;

    line-height: 1.1;
}


.ht-register-brand-name span {
    color: var(--ht-green);
}


.ht-register-brand small {
    margin-top: 4px;

    color: var(--ht-muted);

    font-size: .67rem;
    font-weight: 500;
}


/* Volver a vacantes */

.ht-register-jobs-link {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #52666f;

    font-size: .76rem;
    font-weight: 650;

    text-decoration: none;

    transition: color .16s ease;
}


.ht-register-jobs-link:hover {
    color: var(--ht-green);
}


.ht-register-jobs-link .fa {
    margin: 0;

    color: inherit;
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.ht-register-main {
    min-height: calc(100vh - 72px);

    flex: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(430px, .94fr);
}


/* =========================================================
   PANEL VISUAL
   ========================================================= */

.ht-register-visual {
    position: relative;

    min-height: calc(100vh - 72px);

    display: flex;
    align-items: center;

    padding:
        65px
        max(50px, 8vw);

    overflow: hidden;

    background-image:
        url('../../imagenes/cancun.jpeg');

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


.ht-register-visual-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            105deg,
            rgba(14, 40, 54, .93) 0%,
            rgba(17, 58, 64, .84) 53%,
            rgba(28, 87, 73, .60) 100%
        );
}


.ht-register-visual-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 590px;

    color: #fff;
}


.ht-register-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: #b9ead3;

    font-size: .69rem;
    font-weight: 750;

    letter-spacing: .11em;
}


.ht-register-visual h1 {
    max-width: 590px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            2.2rem,
            3.8vw,
            3.55rem
        );

    font-weight: 700;
    line-height: 1.07;

    letter-spacing: -.03em;
}


.ht-register-visual h1 span {
    display: block;

    margin-top: 5px;

    color: #b8e8d1;
}


.ht-register-visual-content > p {
    max-width: 515px;

    margin:
        24px
        0
        0;

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

    font-size: .96rem;
    line-height: 1.7;
}


/* Beneficios */

.ht-register-benefits {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-top: 34px;
}


.ht-register-benefits > div {
    display: flex;
    align-items: center;

    gap: 9px;

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

    font-size: .79rem;
    line-height: 1.4;
}


.ht-register-benefits .fa {
    flex: 0 0 auto;

    margin: 0;

    color: #8edbb8;

    font-size: .9rem;
}


/* =========================================================
   COLUMNA DEL FORMULARIO
   ========================================================= */

.ht-register-form-side {
    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        42px
        55px;

    background: #f8faf9;
}


.ht-register-card {
    width: 100%;
    max-width: 445px;

    margin: auto;
}


/* =========================================================
   ENCABEZADO DEL FORMULARIO
   ========================================================= */

.ht-register-heading {
    margin-bottom: 26px;
}


.ht-register-section-label {
    display: block;

    margin-bottom: 8px;

    color: var(--ht-green);

    font-size: .66rem;
    font-weight: 750;

    letter-spacing: .095em;
}


.ht-register-heading h2 {
    margin: 0;

    color: var(--ht-navy);

    font-size: 1.72rem;
    font-weight: 720;

    line-height: 1.15;

    letter-spacing: -.025em;
}


.ht-register-heading p {
    margin:
        9px
        0
        0;

    color: var(--ht-muted);

    font-size: .79rem;
    line-height: 1.55;
}


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

.ht-register-form {
    width: 100%;
}


/* Nombre + apellido */

.ht-register-name-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


/* Campo */

.ht-register-field {
    margin-bottom: 16px;
}


.ht-register-field label {
    display: block;

    margin-bottom: 7px;

    color: #3b505a;

    font-size: .71rem;
    font-weight: 650;
}


/* Input wrapper */

.ht-register-input {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;
}


.ht-register-input > .fa {
    position: absolute;

    left: 14px;

    z-index: 2;

    margin: 0;

    color: #87979d;

    font-size: .87rem;

    pointer-events: none;
}


.ht-register-input input {
    width: 100%;
    height: 47px;

    margin: 0;

    padding:
        0
        43px
        0
        40px;

    color: #2f424c;
    background: #fff;

    border:
        1px
        solid
        #d9e2de;

    border-radius: 8px;

    outline: none;

    font-size: .8rem;
    font-weight: 400;

    box-shadow: none;

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


.ht-register-input input::placeholder {
    color: #9da9ad;

    opacity: 1;
}


.ht-register-input input:hover {
    border-color: #c7d5ce;
}


.ht-register-input input:focus {
    background: #fff;

    border-color: #70b495;

    box-shadow:
        0 0 0 3px
        rgba(45, 122, 91, .08);
}


/* =========================================================
   MOSTRAR CONTRASEÑA
   ========================================================= */

.ht-register-password-toggle {
    position: absolute;

    top: 50%;
    right: 6px;

    z-index: 3;

    width: 35px;
    height: 35px;

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

    padding: 0;
    margin: 0;

    color: #7c8c92;
    background: transparent;

    border: 0;
    border-radius: 6px;

    outline: none;

    cursor: pointer;

    transform: translateY(-50%);

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


.ht-register-password-toggle:hover {
    color: var(--ht-green);
    background: #f1f6f3;
}


.ht-register-password-toggle .fa {
    margin: 0;

    color: inherit;
}


/* =========================================================
   TÉRMINOS
   ========================================================= */

.ht-register-terms {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin:
        2px
        0
        19px;

    color: #6c7c83;

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

    cursor: pointer;
}


.ht-register-terms input {
    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    margin:
        2px
        0
        0;

    accent-color: var(--ht-green);

    cursor: pointer;
}


.ht-register-terms span {
    display: block;
}


.ht-register-terms a {
    color: var(--ht-green);

    font-weight: 650;

    text-decoration: none;
}


.ht-register-terms a:hover {
    text-decoration: underline;
}


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

.ht-register-submit {
    width: 100%;
    height: 49px;

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

    gap: 9px;

    padding: 0 18px;
    margin: 0;

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

    border:
        1px
        solid
        var(--ht-green);

    border-radius: 8px;

    outline: none;

    font-size: .79rem;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 18px
        rgba(45, 122, 91, .15);

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


.ht-register-submit:hover {
    background: var(--ht-green-dark);
    border-color: var(--ht-green-dark);

    box-shadow:
        0 9px 22px
        rgba(45, 122, 91, .20);
}


.ht-register-submit:active {
    transform: translateY(1px);
}


.ht-register-submit .fa {
    margin: 0;

    color: inherit;
}


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

.ht-register-login {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 23px;
    padding-top: 19px;

    color: #7a898f;

    border-top:
        1px
        solid
        var(--ht-border);

    font-size: .73rem;
}


.ht-register-login a {
    color: var(--ht-green);

    font-weight: 700;

    text-decoration: none;
}


.ht-register-login a:hover {
    text-decoration: underline;
}


/* =========================================================
   SEGURIDAD
   ========================================================= */

.ht-register-security {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: 6px;

    max-width: 350px;

    margin:
        15px
        auto
        0;

    color: #98a3a7;

    text-align: center;

    font-size: .62rem;
    line-height: 1.4;
}


.ht-register-security .fa {
    flex: 0 0 auto;

    margin:
        1px
        0
        0;

    color: #82948b;
}


/* =========================================================
   VACANTE SELECCIONADA
   ========================================================= */

.ht-register-job {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 23px;
    padding: 13px 14px;

    background: #f1f8f4;

    border:
        1px
        solid
        #d7e8de;

    border-radius: 9px;
}


.ht-register-job-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

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

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

    border:
        1px
        solid
        #d5e7dd;

    border-radius: 8px;
}


.ht-register-job-icon .fa {
    margin: 0;

    color: inherit;

    font-size: .88rem;
}


.ht-register-job-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.ht-register-job-label {
    margin-bottom: 4px;

    color: var(--ht-green);

    font-size: .58rem;
    font-weight: 750;

    letter-spacing: .075em;
}


.ht-register-job-title {
    color: #203a47;

    font-size: .86rem;
    font-weight: 700;
    line-height: 1.3;
}


.ht-register-job-hotel {
    margin-top: 3px;

    color: #4d6169;

    font-size: .71rem;
    font-weight: 600;
}


.ht-register-job-location {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 4px;

    color: #77868c;

    font-size: .66rem;
}


.ht-register-job-location .fa {
    margin: 0;

    color: #63a889;
}


.ht-register-job-content p {
    margin:
        8px
        0
        0;

    color: #718078;

    font-size: .66rem;
    line-height: 1.45;
}


/* Contexto alternativo */

.ht-register-context {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 23px;
    padding: 12px 14px;

    color: #416453;
    background: #f1f8f4;

    border:
        1px
        solid
        #d7e8de;

    border-radius: 9px;
}


.ht-register-context > .fa {
    margin: 0;

    color: var(--ht-green);
}


.ht-register-context div {
    display: flex;
    flex-direction: column;
}


.ht-register-context strong {
    color: #315d49;

    font-size: .73rem;
}


.ht-register-context span {
    margin-top: 2px;

    color: #718078;

    font-size: .66rem;
}


/* =========================================================
   VERIFICACIÓN DE CORREO
   ========================================================= */

.ht-verification-pending {
    width: 100%;

    text-align: center;
}


.ht-verification-icon {
    width: 62px;
    height: 62px;

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

    margin:
        0
        auto
        19px;

    color: var(--ht-green);
    background: var(--ht-green-soft);

    border:
        1px
        solid
        #d7e9df;

    border-radius: 50%;
}


.ht-verification-icon .fa {
    margin: 0;

    color: inherit;

    font-size: 1.35rem;
}


.ht-verification-pending h2 {
    margin: 0;

    color: var(--ht-navy);

    font-size: 1.65rem;
    font-weight: 700;
}


.ht-verification-pending > p {
    max-width: 350px;

    margin:
        10px
        auto
        0;

    color: #697a82;

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


.ht-verification-pending > p strong {
    color: #344c57;
}


.ht-verification-help {
    color: #89959a !important;

    font-size: .72rem !important;
}


.ht-verification-job-note {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    max-width: 360px;

    margin:
        22px
        auto
        0;

    padding:
        12px
        14px;

    color: #416453;
    background: #f2f8f5;

    border:
        1px
        solid
        #d8e9df;

    border-radius: 8px;

    text-align: left;

    font-size: .71rem;
    line-height: 1.45;
}


.ht-verification-job-note .fa {
    flex: 0 0 auto;

    margin:
        1px
        0
        0;

    color: #49a478;
}


.ht-verification-back {
    display: inline-block;

    margin-top: 24px;

    color: var(--ht-green);

    font-size: .73rem;
    font-weight: 650;

    text-decoration: none;
}


.ht-verification-back:hover {
    text-decoration: underline;
}


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

@media (max-width: 960px) {

    .ht-register-main {
        grid-template-columns: 1fr;
    }


    .ht-register-visual {
        min-height: auto;

        padding:
            48px
            32px;
    }


    .ht-register-visual-content {
        max-width: 680px;

        margin: auto;
    }


    .ht-register-visual h1 {
        max-width: 620px;

        font-size: 2.25rem;
    }


    .ht-register-visual-content > p {
        margin-top: 15px;
    }


    .ht-register-benefits {
        display: none;
    }


    .ht-register-form-side {
        padding:
            45px
            24px
            60px;
    }


    .ht-register-card {
        max-width: 480px;
    }

}


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

@media (max-width: 576px) {

    .ht-register-topbar {
        height: 62px;

        flex-basis: 62px;
    }


    .ht-register-topbar-inner {
        width: calc(100% - 28px);
    }


    .ht-register-brand-name {
        font-size: .98rem;
    }


    .ht-register-brand small {
        display: none;
    }


    .ht-register-jobs-link {
        font-size: .69rem;
    }


    .ht-register-jobs-link .fa {
        display: none;
    }


    .ht-register-main {
        min-height: calc(100vh - 62px);
    }


    .ht-register-visual {
        padding:
            31px
            20px
            34px;
    }


    .ht-register-eyebrow {
        margin-bottom: 10px;

        font-size: .59rem;
    }


    .ht-register-visual h1 {
        font-size: 1.72rem;
        line-height: 1.1;
    }


    .ht-register-visual-content > p {
        margin-top: 13px;

        font-size: .78rem;
        line-height: 1.55;
    }


    .ht-register-form-side {
        padding:
            30px
            19px
            44px;
    }


    .ht-register-heading {
        margin-bottom: 22px;
    }


    .ht-register-heading h2 {
        font-size: 1.48rem;
    }


    .ht-register-name-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .ht-register-input input {
        height: 46px;
    }


    .ht-register-submit {
        height: 48px;
    }


    .ht-register-job {
        margin-bottom: 20px;

        padding: 12px;
    }


    .ht-register-job-icon {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }


    .ht-register-job-title {
        font-size: .81rem;
    }

}