:root {
	--primario: #013E6A;
	--secundario: #000;
}


body {
	background: #F0F4F3;
	font-family: 'Quicksand', sans-serif;

	height: 100%;
}

html {
	height: 100%;
	font-family: Ubuntu-Regular, sans-serif;
  
}

.contenedor {
	width: 90%;
	max-width: 800px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
	background: #fff;
	min-height: 60vh;

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

.columna-izquierda {
	padding: 40px;
}

.columna-derecha {
	background-image: url('../../../imagenes/perfilht.jpg');
	background-size: cover;
	background-position-x: center;
	filter: brightness(80%); /*para oscurecer la imagen*/
}


.header {
	margin-bottom: 40px;
	text-align: center;
}

.header h1 {
	color: var(--primario);
}

.header p {
	color: var(--secundario);
}

label {
	margin-bottom: 10px;
	display: block;
	font-weight: 500;
	color: var(--secundario);
	font-size: 14px;
}

.contenedor-input {
	position: relative;
}

.registro {
	display: none;
}

.registro.activo {
	display: block;
}

.exito {
	background-color: red;
	display: none;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.exito.activo {
	display: flex;
}

.exito svg {
	width: 50px;
	height: 50px;
	color: var(--primario);
}


input {
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	width: 100%;
	border: none;
	border-radius: 5px;
	padding: 0 20px 0 45px;
	margin-bottom: 20px;
	background: #f4f8f7;
	color: var(--primario);
	font-family: 'Quicksand', sans-serif;
	border: 2px solid transparent;
	transition: .3s ease all;
}

input:focus {
	outline: none;
	border: 2px solid var(--primario);
}

.contenedor-input svg {
	position: absolute;
	color: var(--primario);
	top: 17px;
	left: 17px;
}

.contenedor-boton {
	display: flex;
	justify-content: center;
}

button {
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	border-radius: 5px;
	margin-top: 20px;
	background: none;
	height: 50px;
	color: var(--primario);
	padding: 0 50px;
	display: flex;
	align-items: center;
	justify-content: end;
	border: 2px solid var(--primario);
	cursor: pointer;
	transition: .3s ease all;
	outline: none;
}

button:hover {
	cursor: pointer;
	background: var(--primario);
	color: #fff;
}

button svg {
	margin-left: 10px;
	width: 20px;
	height: 20px;
}

#btn-login{
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	border-radius: 5px;
	margin-top: 20px;
	background: none;
	height: 50px;
	color: var(--primario);
	padding: 0 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--primario);
	cursor: pointer;
	transition: .3s ease all;
	outline: none;
}
#btn-login:hover {
	cursor: pointer;
	background: var(--primario);
	color: #fff;
}

#btn-login svg {
	margin-left: 10px;
	width: 20px;
	height: 20px;
}


/*Sniper
https://codepen.io/wang0nya/pen/bzwQPr
https://codepen.io/EastingAndNorthing/pen/aNWrZz
https://codepen.io/vineethtrv/pen/NWxZqMM
*/
#spinner:not([hidden]) {
	position: fixed;
	/*	position: fixed;*/
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0px 10px;
	z-index:1;
	background-color: #3333;
  }

  #spinner::after {
	content: "";
	width: 50px;
	height: 50px;
	border: 2px solid #f3f3f3;
	border-top: 3px solid #f25a41;
	border-radius: 100%;
	will-change: transform;
	animation: spin 1s infinite linear
  }

  @keyframes spin {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
  }

  /* =========================================================
   HOTELTALENTO
   ACCESO DE CANDIDATOS
   ========================================================= */

.ht-candidate-login {
    --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;

    margin: 0;

    min-height: 100vh;

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

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


.ht-candidate-login * {
    box-sizing: border-box;
}


/* HEADER */

.ht-access-header {
    position: relative;
    z-index: 10;

    height: 72px;

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

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


.ht-access-header-inner {
    width: min(1180px, calc(100% - 40px));
    height: 100%;

    margin: auto;

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


.ht-access-brand {
    display: flex;
    align-items: center;

    gap: 10px;

    color: inherit;

    text-decoration: none;
}


.ht-access-brand img {
    width: 42px;
    height: 42px;

    object-fit: contain;

    border-radius: 10px;
}


.ht-access-brand-copy {
    display: flex;
    flex-direction: column;
}


.ht-access-brand-copy strong {
    color: var(--ht-navy);

    font-size: 1rem;
    line-height: 1.1;
}


.ht-access-brand-copy strong span {
    color: var(--ht-green);
}


.ht-access-brand-copy small {
    margin-top: 3px;

    color: var(--ht-muted);

    font-size: .66rem;
}


.ht-access-back {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #53666f;

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

    text-decoration: none;
}


.ht-access-back:hover {
    color: var(--ht-green);
}


/* =========================================================
   LAYOUT
   ========================================================= */

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

    display: grid;

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


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

.ht-access-visual {
    position: relative;

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

    display: flex;
    align-items: center;

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

    overflow: hidden;

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

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


.ht-access-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            105deg,
            rgba(16, 45, 58, .92) 0%,
            rgba(19, 61, 67, .80) 55%,
            rgba(23, 78, 67, .55) 100%
        );
}


.ht-access-visual-content {
    position: relative;
    z-index: 1;

    max-width: 570px;

    color: #fff;
}


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

    margin-bottom: 17px;

    color: #b9ead3;

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

    letter-spacing: .1em;
}


.ht-access-visual h1 {
    margin: 0;

    color: #fff;

    font-size: clamp(2.25rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1.07;

    letter-spacing: -.025em;
}


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

    color: #b8e8d1;
}


.ht-access-visual-content > p {
    max-width: 510px;

    margin: 23px 0 0;

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

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


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

    gap: 12px;

    margin-top: 34px;
}


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

    gap: 9px;

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

    font-size: .79rem;
}


.ht-access-benefits .fa {
    color: #8edbb8;
}


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

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

    padding: 50px 60px;

    background: #f8faf9;
}


.ht-access-card {
    width: 100%;
    max-width: 430px;
}


/* Contexto de postulación */

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

    gap: 12px;

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

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

    border: 1px solid #d8e9df;
    border-radius: 9px;
}


.ht-access-context > .fa {
    color: var(--ht-green);

    font-size: 1.05rem;
}


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


.ht-access-context strong {
    color: #285843;

    font-size: .75rem;
}


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

    color: #708078;

    font-size: .68rem;
}


/* Encabezado */

.ht-access-heading {
    margin-bottom: 29px;
}


.ht-access-label {
    display: block;

    margin-bottom: 9px;

    color: var(--ht-green);

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

    letter-spacing: .09em;
}


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

    color: var(--ht-navy);

    font-size: 1.75rem;
    font-weight: 700;

    letter-spacing: -.02em;
}


.ht-access-heading p {
    margin: 8px 0 0;

    color: var(--ht-muted);

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


/* Error */

.ht-access-error {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-bottom: 18px;
    padding: 11px 13px;

    color: #8d3f3f;
    background: #fff5f5;

    border: 1px solid #efdada;
    border-radius: 7px;

    font-size: .74rem;
}


/* Campos */

.ht-access-field {
    margin-bottom: 18px;
}


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

    margin-bottom: 7px;

    color: #394e58;

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


.ht-access-input {
    position: relative;

    display: flex;
    align-items: center;
}


.ht-access-input > .fa {
    position: absolute;
    left: 14px;

    color: #87969c;

    font-size: .88rem;

    pointer-events: none;
}


.ht-access-input input {
    width: 100%;
    height: 48px;

    padding:
        0
        44px
        0
        40px;

    color: #2e414b;
    background: #fff;

    border: 1px solid #d9e2de;
    border-radius: 8px;

    outline: none;

    font-family: inherit;
    font-size: .82rem;

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


.ht-access-input input::placeholder {
    color: #a0aaae;
}


.ht-access-input input:focus {
    border-color: #75b99b;

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


/* Mostrar contraseña */

.ht-password-toggle {
    position: absolute;
    right: 6px;

    width: 36px;
    height: 36px;

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

    padding: 0;

    color: #7c8b91;
    background: transparent;

    border: 0;
    border-radius: 6px;

    cursor: pointer;
}


.ht-password-toggle:hover {
    color: var(--ht-green);

    background: #f3f7f5;
}


/* Botón */

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

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

    gap: 9px;

    margin-top: 7px;

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

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

    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;

    cursor: pointer;

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

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


.ht-access-submit:hover {
    background: var(--ht-green-dark);

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


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


/* Registro */

.ht-access-register {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 25px;
    padding-top: 20px;

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

    color: #7c8a90;

    font-size: .74rem;
}


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

    font-weight: 700;

    text-decoration: none;
}


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


/* Seguridad */

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

    gap: 5px;

    margin-top: 17px;

    color: #9aa4a8;

    font-size: .64rem;
}


.ht-access-security .fa {
    color: #82948b;
}


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

@media (max-width: 900px) {

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


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

        padding: 48px 30px;
    }


    .ht-access-visual h1 {
        max-width: 600px;

        font-size: 2.2rem;
    }


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


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

}


@media (max-width: 576px) {

    .ht-access-header {
        height: 62px;
    }


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


    .ht-access-brand img {
        width: 36px;
        height: 36px;
    }


    .ht-access-brand-copy small {
        display: none;
    }


    .ht-access-back {
        font-size: .7rem;
    }


    .ht-access-back .fa {
        display: none;
    }


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


    .ht-access-visual {
        padding: 34px 20px 37px;
    }


    .ht-access-eyebrow {
        margin-bottom: 11px;

        font-size: .61rem;
    }


    .ht-access-visual h1 {
        font-size: 1.75rem;
    }


    .ht-access-visual-content > p {
        margin-top: 14px;

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


    .ht-access-form-side {
        padding: 31px 20px 45px;
    }


    .ht-access-heading {
        margin-bottom: 23px;
    }


    .ht-access-heading h2 {
        font-size: 1.5rem;
    }

}