/* ==========================================================================
   Convocatum — el formulario de alta, en sus tres formas.

   Los controles (campos, casillas, botones) salen de convocatum.css, que es lo
   que comparten todas las pantallas del sitio. Aquí solo está el envoltorio:
   las secciones de la forma de corrido, el recorrido de la forma por pasos y
   los plegables de la de acordeón.

   La dirección la marca la plantilla que el cliente ya usa: su azul #23224f,
   reglas finas en vez de recuadros, esquinas rectas y ningún fondo de color
   salvo el gris de su ficha. Un formulario de veinticinco campos se sostiene
   con jerarquía tipográfica, no con cajas.
   ========================================================================== */

.convocatum-alta {
    max-width: 46rem;
    margin: 0 auto;
}

/* Aquí se probó la cenefa de la tarjeta como remate de arriba, y se quitó: cada sección abre
   con la regla de 2px de `.convocatum-seccion-titulo`, así que la cenefa caía a un centímetro
   de la primera y quedaban dos líneas paralelas. Además el logotipo de Convocatum ya está en
   el encabezado del sitio, con su verde: la marca no necesita repetirse dentro del formulario. */

/* La advertencia de que se está mirando una prueba: la ve solo quien opera el sistema, y va en
   la tinta de señal para que no se confunda con una instrucción del formulario */
.convocatum-alta-prueba {
    margin: 0 0 2rem;
    border-left-color: var(--cvp-error);
    font-size: 0.9rem;
}

/* El aviso de que los datos se comparan con inteligencia artificial. Va antes del formulario y
   con la tinta normal, no la de señal: es información del servicio, no una advertencia de error */
.convocatum-alta-ia {
    margin: 0 0 2rem;
    font-size: 0.95rem;
}

/* El «(opcional)» del rótulo de la maestría, que sale solo cuando el grado es doctorado. Va en
   redonda y más pequeño para que no compita con el nombre del campo */
.convocatum-etiqueta-opcional {
    margin-left: 0.35rem;
    font-weight: 400;
    font-size: 0.85em;
    color: var(--cvp-tinta-suave);
}

/* La edad que sale de la fecha de nacimiento. No es ayuda del campo sino una respuesta a lo que
   se acaba de escribir, así que va en la tinta normal y no en la suave de las ayudas */
.convocatum-edad-calculada {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
}

/* El JS esconde tramos y botones con el atributo `hidden`; algunas piezas son flex y
   `display: flex` le gana al valor por defecto de `hidden`, así que se dice aquí */
.convocatum-form [hidden] {
    display: none !important;
}

/* Entre secciones hay más aire que entre campos: eso es lo que hace que se lean como
   bloques y no como una lista de veinticinco preguntas seguidas */
.convocatum-form {
    gap: 2.75rem;
}

.convocatum-seccion-campos {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

/* --------------------------------------------------------------------------
   Forma «de corrido»: las cinco secciones una debajo de otra
   -------------------------------------------------------------------------- */

.convocatum-seccion {
    padding: 0;
    margin: 0;
    border: 0;
}

/* La regla va en el título y no en el borde del fieldset: el navegador coloca el `<legend>`
   encima de ese borde y lo parte, así que la línea salía a la derecha del texto en lugar de
   arriba de la sección, como si fuera un subrayado torcido. */
.convocatum-seccion-titulo {
    display: block;
    float: none;
    width: 100%;
    padding: 1.3rem 0 0;
    margin: 0 0 0.35rem;
    border-top: 2px solid var(--cvp-tinta);
    color: var(--cvp-tinta);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

/* El número no es adorno: dice cuántas secciones hay y en cuál va */
.convocatum-seccion-numero,
.convocatum-avance-numero,
.convocatum-plegable-numero {
    color: var(--cvp-tinta-suave);
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.convocatum-seccion-numero {
    margin-right: 0.6rem;
}

.convocatum-seccion-entradilla,
.convocatum-tramo-entradilla {
    max-width: 58ch;
    margin: 0 0 1.4rem;
    color: var(--cvp-tinta-suave);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Las diez casillas de los tipos de invitación caben en dos columnas sin apretarse */
.convocatum-grupo-casillas {
    gap: 0.6rem;
}

.convocatum-casillas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 34rem) {
    .convocatum-casillas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.5rem;
    }
}

.convocatum-pie {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Forma «por pasos»: un tramo a la vez, con el avance arriba

   Todo lo de esta parte depende de `es-guiado`, que solo pone el JS: sin él el
   formulario se ve de corrido y la barra de progreso sobra, porque no habría
   nada que la mueva.
   -------------------------------------------------------------------------- */

.convocatum-avance {
    display: none;
}

.convocatum-form.es-guiado .convocatum-avance {
    display: block;
}

.convocatum-avance-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.6rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.convocatum-avance-paso {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--cvp-tinta-suave);
    font-size: 0.82rem;
    line-height: 1.4;
}

.convocatum-avance-paso.es-actual {
    color: var(--cvp-tinta);
    font-weight: 700;
}

/* Los pasos ya contestados se apagan, no se tachan: se puede volver a ellos */
.convocatum-avance-paso.es-hecho {
    color: var(--cvp-tinta);
    opacity: 0.55;
}

.convocatum-avance-cuenta {
    margin: 0 0 0.5rem;
    color: var(--cvp-tinta);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.convocatum-avance-barra {
    height: 3px;
    background: var(--cvp-regla);
}

.convocatum-avance-relleno {
    display: block;
    width: 20%;
    height: 100%;
    background: var(--cvp-tinta);
    transition: width 0.25s ease-out;
}

.convocatum-tramo-titulo {
    margin: 0 0 0.35rem;
    color: var(--cvp-tinta);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.convocatum-navegacion {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Atrás queda a la izquierda y la acción que avanza al otro extremo, para que no se
   aprieten por error una junto a la otra */
.convocatum-navegacion [data-cv-siguiente],
.convocatum-navegacion [data-cv-enviar] {
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   Forma «en acordeón»: todo en una página, abierta solo una sección
   -------------------------------------------------------------------------- */

/* Las secciones plegadas se separan con su propia regla, así que aquí el aire entre bloques del
   formulario estorba: con él, entre dos cabeceras cerradas quedaban cuatro centímetros de nada */
.convocatum-form[data-cv-acordeon] {
    gap: 0;
}

.convocatum-form[data-cv-acordeon] .convocatum-pie {
    margin-top: 2rem;
}

.convocatum-plegable {
    border-top: 1px solid var(--cvp-regla);
}

.convocatum-plegable:last-of-type {
    border-bottom: 1px solid var(--cvp-regla);
}

.convocatum-plegable-cabeza {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 3.25rem;
    padding: 0.9rem 0;
    color: var(--cvp-tinta);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

/* El triángulo que dibuja el navegador se quita en los dos motores; la flecha propia va
   al final de la fila, alineada con las de las demás secciones */
.convocatum-plegable-cabeza::-webkit-details-marker {
    display: none;
}

.convocatum-plegable-cabeza::marker {
    content: '';
}

.convocatum-plegable-cabeza::after {
    content: '';
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.4rem;
    border-right: 2px solid var(--cvp-tinta-suave);
    border-bottom: 2px solid var(--cvp-tinta-suave);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.15s ease-out;
}

.convocatum-plegable[open] > .convocatum-plegable-cabeza::after {
    transform: rotate(-135deg);
}

.convocatum-plegable-cabeza:focus-visible {
    outline: 2px solid var(--cvp-tinta);
    outline-offset: 2px;
}

.convocatum-plegable-titulo {
    min-width: 0;
}

/* Con todo plegado, esta es la única pista de qué sección quedó a medias */
.convocatum-plegable-marca {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.convocatum-plegable-marca:empty {
    display: none;
}

.convocatum-plegable-marca.es-listo {
    color: var(--cvp-exito);
}

.convocatum-plegable-marca.es-pendiente {
    color: var(--cvp-tinta-suave);
}

.convocatum-plegable-cuerpo {
    padding: 0.4rem 0 1.8rem;
}

.convocatum-plegable-pie {
    margin-top: 1.6rem;
}

/* --------------------------------------------------------------------------
   Cuando el registro ya entró

   El formulario se retira. Dejarlo vacío en pantalla hace dudar de si el
   registro se guardó o si hay que volver a mandarlo, y ese es justo el momento
   en que alguien se registra dos veces.
   -------------------------------------------------------------------------- */

.convocatum-form.es-enviado .convocatum-seccion,
.convocatum-form.es-enviado .convocatum-tramo,
.convocatum-form.es-enviado .convocatum-plegable,
.convocatum-form.es-enviado .convocatum-avance,
.convocatum-form.es-enviado .convocatum-navegacion,
.convocatum-form.es-enviado .convocatum-boton,
/* El consentimiento vive fuera de las secciones, así que hay que retirarlo aparte. Sin esta
   línea quedaba él solo en pantalla junto al «quedó registrado», y encima en rojo: al enviar
   bien se hace form.reset(), la casilla obligatoria vuelve a estar sin marcar y el
   :invalid de más abajo la rodeaba de error. Parecía que el registro había fallado. */
.convocatum-form.es-enviado .convocatum-consentimiento,
/* El comprobante también vive fuera de las secciones. Tras el reset quedaba en pantalla con
   «Ningún archivo seleccionado» junto al «quedó registrado», y parecía que no se había subido. */
.convocatum-form.es-enviado .convocatum-comprobante {
    display: none;
}

.convocatum-form.es-enviado .convocatum-respuesta.es-exito {
    padding: 1.6rem 1.8rem;
    border-left: 3px solid var(--cvp-exito);
    background: var(--cvp-papel-alt);
    font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Pantallas angostas
   -------------------------------------------------------------------------- */

@media (max-width: 47.9rem) {
    /* La lista de pasos por nombre no cabe en un teléfono: se queda la cuenta y la barra,
       que dicen lo mismo con dos datos */
    .convocatum-avance-lista {
        display: none;
    }

    .convocatum-tramo-titulo {
        font-size: 1.2rem;
    }

    .convocatum-seccion-titulo {
        font-size: 1.1rem;
    }

    /* Objetivos táctiles: los botones de avanzar ocupan el ancho y no se persiguen con el
       pulgar. «Atrás» va debajo porque es el que menos se usa. */
    .convocatum-navegacion {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .convocatum-navegacion .convocatum-boton,
    .convocatum-navegacion .convocatum-boton-secundario {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

    .convocatum-pie .convocatum-boton {
        width: 100%;
        text-align: center;
    }
}

/* Una casilla dentro de un grupo no es un título: la regla de peso de `.convocatum-campo label`
   se la llevaba también a ella, y las diez opciones de invitación salían en negrita como si cada
   una fuera la pregunta */
.convocatum-campo .convocatum-check {
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   La casilla del aviso de privacidad.

   Va separada del último bloque de campos por una regla: no es una pregunta
   más del formulario, es la condición para mandarlo, y mezclada entre los
   campos se marcaba sin leerla. Está en las tres formas, siempre justo antes
   del botón.
   -------------------------------------------------------------------------- */

.convocatum-consentimiento {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cvp-regla);
}

.convocatum-consentimiento .convocatum-check {
    font-size: 0.95rem;
}

/* El navegador marca en rojo la casilla sin aceptar cuando ya se intentó
   enviar; sin esto, el único aviso es el globo que desaparece al hacer clic */
.convocatum-consentimiento input:invalid {
    outline: 2px solid var(--cvp-error);
    outline-offset: 2px;
}