/*
 * Formulario público de candidaturas.
 *
 * Reproduce el aspecto que tenía en la web corporativa, que es de donde viene
 * el candidato: misma tipografía, mismos colores de marca, mismas casillas
 * dibujadas y la misma retícula de dos columnas sobre fondo gris.
 *
 * Reúne en un solo sitio lo que allí estaba repartido entre estilos.css (los
 * colores), cool_checkbox.css (las casillas) y un bloque <style> dentro de la
 * propia plantilla.
 *
 * Diferencia con el original: allí el input real se ocultaba con display:none,
 * lo que dejaba el formulario sin recorrido de teclado. Aquí se oculta
 * visualmente pero sigue siendo enfocable, y el foco se ve sobre la casilla
 * dibujada. El aspecto en reposo es el mismo.
 */

:root {
    --casual-magenta: #fe0075;
    --casual-azul: #00abd6;
    --casual-negro: #010103;
    --casual-gris: #f0f0f0;
    --casual-borde: #a9a9a9;
}

/*
 * El tema del portal aporta Bootstrap 5, pero también su tipografía, sus
 * colores y sus botones. Lo que sigue lo devuelve al aspecto de la web: en esta
 * página manda la marca, no el ERP.
 */
body.rrhh-candidatura,
body.rrhh-candidatura .form-control,
body.rrhh-candidatura .btn {
    font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
}

body.rrhh-candidatura {
    background-color: #fff;
    color: #212529;
    font-size: 1rem;
}

/*
 * Falcon encoge las etiquetas a .83rem, las pone en seminegrita y las separa
 * con letter-spacing. En la web son texto normal al tamano de la pagina, que es
 * lo que hace que los bloques de opciones se lean como alli.
 */
body.rrhh-candidatura label {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    margin-bottom: 0;
}

/*
 * Sin desplazamiento suave.
 *
 * Bootstrap lo enciende en :root, y con el puesto el navegador no consigue
 * enseñar el aviso de un campo obligatorio que se ha quedado fuera de la
 * pantalla: al pulsar ENVIAR desde el final del formulario, la subida hasta el
 * campo va animada y el globo ("Completa este campo") no llega a salir. Medido
 * con el formulario entero: con el desplazamiento suave el campo se queda a 854
 * pixeles del borde de una ventana de 800; con el salto instantaneo entra en
 * pantalla y el aviso aparece.
 */
:root {
    scroll-behavior: auto;
}

body.rrhh-candidatura .form-control:focus {
    border-color: var(--casual-borde);
    box-shadow: 0 0 0 .15rem rgba(254, 0, 117, .2);
}

/* --- Colores de marca --------------------------------------------------- */

.bg-magentacasual { background-color: var(--casual-magenta) !important; }
.bg-negrocasual { background-color: var(--casual-negro) !important; }
.magentacasual { color: var(--casual-magenta) !important; }
.azulcasual { color: var(--casual-azul) !important; }
.negrocasual { color: var(--casual-negro) !important; }

/* --- Barra superior ------------------------------------------------------ */

/*
 * Las medidas son las del menu de la web (logo de 38px, el titulo pegado a 10px
 * y el subtitulo con .4rem por debajo) para que la barra se vea igual. Falcon
 * pinta h5 en gris oscuro con !important y con su propio tamano, asi que ambas
 * cosas hay que repetirlas aqui.
 */
.rrhh-cabecera {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 0 15px 0 0;
    color: #000;
}

.rrhh-cabecera-logo {
    height: 38px;
    margin-left: 15px;
}

.rrhh-cabecera-titulo {
    margin: 4px 0 0 10px;
}

.rrhh-cabecera-titulo h5 {
    color: #000 !important;
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: -5px;
}

.rrhh-cabecera-titulo p {
    color: #6c757d;
    margin-bottom: .4rem;
}

.rrhh-cabecera-idiomas a {
    display: inline-block;
    padding: .5rem .35rem;
    line-height: 0;
    opacity: .75;
}

.rrhh-cabecera-idiomas a:hover,
.rrhh-cabecera-idiomas a:focus,
.rrhh-cabecera-idiomas a.activo {
    opacity: 1;
}

/* El idioma en curso, subrayado: sin esto no hay forma de saber cual esta puesto. */
.rrhh-cabecera-idiomas a.activo {
    border-bottom: 2px solid var(--casual-magenta);
}

/* --- Cabecera ----------------------------------------------------------- */

.rrhh-portada {
    position: relative;
    overflow: hidden;
}

.rrhh-portada img {
    width: 100%;
    height: auto;
    display: block;
}

/*
 * El rotulo va encima de la imagen, no debajo. La imagen de cabecera es casi
 * toda blanca, asi que lo unico que hace legible el texto blanco es la doble
 * sombra negra: es la misma que usaba el elemento images_texts de la web, y sin
 * ella el titular desaparece. Los tamanos son tambien los de alli, que van por
 * tramos de ancho en vez de escalar de forma continua.
 */
/* El color va con !important porque Falcon pinta h1..h6 en gris oscuro con esa
   misma marca, y sin ella el rotulo sale gris sobre la imagen. */
.rrhh-portada-texto {
    color: #fff !important;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    margin: 0;
    text-align: center;
    color: #fff;
    text-shadow: 4px 4px 15px #000, -4px -4px 15px #000;
    font-size: 72px;
    line-height: 1.15;
}

@media (max-width: 400px) { .rrhh-portada-texto { font-size: 21px; } }
@media (min-width: 400.02px) and (max-width: 600px) { .rrhh-portada-texto { font-size: 27px; } }
@media (min-width: 601px) and (max-width: 900px) { .rrhh-portada-texto { font-size: 36px; } }
@media (min-width: 901px) and (max-width: 1200px) { .rrhh-portada-texto { font-size: 49px; } }
@media (min-width: 1201px) and (max-width: 1920px) { .rrhh-portada-texto { font-size: 58px; } }

/*
 * Las dos franjas de texto son los "paneles" de la web: 30px de aire por todos
 * lados y el titular a 1.3em. Se mantienen esas medidas para que el salto desde
 * la web no se note.
 */
.rrhh-banda,
.rrhh-intro {
    padding: 30px;
    text-align: center;
}

.rrhh-banda {
    background-color: var(--casual-negro);
    color: #fff;
}

.rrhh-banda h2,
.rrhh-intro h2 {
    font-size: 1.3em;
    font-weight: 400;
    margin: 0;
}

.rrhh-banda h2 { color: #fff !important; }
.rrhh-intro h2 { color: inherit !important; }

.rrhh-intro h2 { margin-bottom: 1.5rem; }

.rrhh-intro p {
    margin-bottom: 1rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Marco del formulario ----------------------------------------------- */

.form-rrhh-cv-element {
    background-color: var(--casual-gris);
    padding-bottom: 1.5rem;
}

/*
 * Los mismos margenes laterales que en la web: un 15% a cada lado a partir de
 * 1420px de ancho. Por debajo de ahi va de borde a borde, que es lo que hace
 * que en tableta y movil siga cabiendo todo.
 *
 * El dato sale de estilos.min.css, que es el que sirve la web; el estilos.css
 * sin minificar se quedo atras y ahi .form-rrhh-cv-element ni aparece.
 */
@media (min-width: 1420px) {
    .form-rrhh-cv-element {
        padding-left: 15%;
        padding-right: 15%;
    }
}

.form-rrhh-cv-element .form-control {
    border-width: 0;
}

.form-rrhh-cv-element select.form-control {
    border: 1px solid var(--casual-borde);
}

.form-rrhh-cv-element .magentacasual big {
    line-height: 1.2;
}

/* Los bloques blancos que agrupan opciones. */
.checkboxContainer,
.file-input {
    border-radius: .25rem;
    padding: .375rem .75rem;
}

/* Cabecera de cada categoría de puestos: barra gris de ancho completo. */
.btn-see-puestos {
    display: block;
    width: 100%;
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn-see-puestos:hover,
.btn-see-puestos:focus {
    background-color: #5c636a;
    border-color: #5c636a;
    color: #fff;
}

/* Botones de marca. El tema los repinta, así que se fijan aquí. */
body.rrhh-candidatura .bg-magentacasual,
body.rrhh-candidatura .bg-negrocasual {
    border: 0;
}

body.rrhh-candidatura .btn.bg-magentacasual:hover,
body.rrhh-candidatura .btn.bg-magentacasual:focus {
    background-color: #d80065 !important;
    color: #fff;
}

body.rrhh-candidatura .btn.bg-negrocasual:hover,
body.rrhh-candidatura .btn.bg-negrocasual:focus {
    background-color: #2b2b30 !important;
    color: #fff;
}

/* --- Casillas dibujadas -------------------------------------------------- */

/*
 * La casilla dibujada va posicionada, no flotada.
 *
 * En la web iba con float:left, y eso hace que una etiqueta que no cabe en una
 * linea ("FORMACION ESPECIFICA DEL PUESTO" en una columna estrecha) devuelva la
 * segunda linea al borde izquierdo, por debajo del cuadradito. Con la casilla en
 * absoluto y el hueco reservado con padding, el texto se sangra entero y queda
 * alineado. En reposo se ve igual.
 */
.checkbox label {
    position: relative;
    display: block;
    padding-left: 1.85em;
    margin-bottom: .55rem;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

/* La aceptación de la política va centrada bajo su botón, no en bloque. */
.checkbox-centrado label {
    display: inline-block;
    text-align: start;
}

.checkbox .cr {
    position: absolute;
    left: 0;
    top: 3px;
    display: inline-block;
    border: 1px solid var(--casual-borde);
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    background-color: #fff;
}

.checkbox .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

/* El input sigue ahi y sigue recibiendo el foco: solo deja de verse. Va encima de
   la casilla dibujada, para que el clic caiga donde se ve. */
.checkbox label input[type="checkbox"],
.checkbox label input[type="radio"] {
    position: absolute;
    left: 0;
    top: 3px;
    width: 1.3em;
    height: 1.3em;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.checkbox label input + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

.checkbox label input:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

.checkbox label input:focus-visible + .cr {
    outline: 2px solid var(--casual-azul);
    outline-offset: 1px;
}


/* --- Cuestionario --------------------------------------------------------- */

/*
 * El enunciado en negrita y sus opciones debajo en dos columnas, como en la
 * web. El selector lleva delante body.rrhh-candidatura porque ahi arriba las
 * etiquetas se devuelven a peso normal y, a igual especificidad, ganaria aquella.
 */
body.rrhh-candidatura .rrhh-pregunta {
    display: block;
    font-weight: 700;
    margin-bottom: .5rem;
}

/*
 * El aviso de que el cuestionario no es opcional. Va con la franja magenta de la
 * marca y sobre el gris del formulario, que es lo que lo despega del texto de
 * alrededor sin gritar como lo haria una alerta roja del tema.
 */
.rrhh-aviso-test {
    background-color: var(--casual-gris);
    border-left: 4px solid var(--casual-magenta);
    padding: .875rem 1rem;
    margin-bottom: .5rem;
}

.rrhh-aviso-test i,
.rrhh-aviso-test strong {
    color: var(--casual-magenta);
}

/* El aire entre las dos columnas de opciones; en la web iba suelto en el HTML. */
.rrhh-cuestionario .checkbox {
    padding-right: 3%;
}

/* --- Adjuntar el currículum ---------------------------------------------- */

.file-input {
    position: relative;
}

.file-input .title {
    line-height: 1.9;
}

/*
 * El campo de fichero no se ve, pero sigue dibujado.
 *
 * Iba con d-none, y un control obligatorio con display:none el navegador no lo
 * puede enfocar: al enviar sin adjuntar nada cortaba el envio sin decir que
 * faltaba, que es justo lo contrario de lo que hace con los demas campos.
 * Reducido a un punto transparente sigue oculto, pero es enfocable y el aviso
 * ("Selecciona un archivo") sale sobre esta caja.
 */
#campo-cv {
    position: absolute;
    left: .75rem;
    bottom: .375rem;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
}

.trigger-input img {
    height: 20px;
}

/* --- Política de privacidad ---------------------------------------------- */

/*
 * El alto se ata a la ventana para que el documento tenga sitio en pantallas
 * grandes sin desbordar en las pequenas; el modal es scrollable, asi que lo que
 * no entre se recorre dentro.
 */
#marco-privacidad {
    display: block;
    width: 100%;
    height: 70vh;
    min-height: 320px;
    border: 0;
}

/* --- Sobre los niveles ---------------------------------------------------- */

#title_sobre_niveles {
    cursor: pointer;
}

/* --- Móvil ---------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .form-rrhh-cv-element .magentacasual big big {
        font-size: 1.4rem;
    }
    .form-rrhh-cv-element textarea.form-control {
        height: 140px !important;
    }
    .form-rrhh-cv-element .btn.submitForm {
        width: 100%;
    }
    .form-rrhh-cv-element .checkbox {
        padding-right: 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .checkbox label input + .cr > .cr-icon { transition: none; }
}