/* ==========================================================================
   Convocatum — las piezas de las pantallas públicas del sitio.

   Aquí solo viven los tokens y los controles que comparten todas: campos,
   casillas, botones y el mensaje de respuesta. Cada pantalla tiene su propia
   hoja (el alta, la convocatoria publicada, la pantalla de entrar), porque
   antes estaban las cuatro en este archivo y ya nadie sabía qué regla
   pertenecía a qué.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Los colores y las medidas de las pantallas públicas, en un solo sitio.

   Son los del cliente, tomados de la plantilla que él maqueta a mano: #23224f
   en los títulos y #eff2f7 en la ficha. Antes cada pantalla los repetía a mano
   y el botón del formulario había quedado en otro azul (#1d3f6e), así que el
   registro no parecía de la misma página que la convocatoria. Van prefijados
   con `cvp` (convocatum público) para no chocar con las variables del tema.
   -------------------------------------------------------------------------- */

:root {
    --cvp-tinta: #23224f;
    --cvp-tinta-suave: #5a6270;
    --cvp-papel: #ffffff;
    --cvp-papel-alt: #eff2f7;
    --cvp-regla: #d6dae4;
    --cvp-borde-campo: #c1c6d2;
    --cvp-exito: #1a6b45;
    --cvp-error: #a32020;

    /* El verde y el celeste de su manual de marca. Van aparte de `--cvp-exito`, que es el verde
       oscuro con el que se avisa que algo salió bien: ese es señal y este es identidad, y si se
       usara el mismo, cada remate de marca se leería como una confirmación.
       Solo pueden ir sobre `--cvp-tinta`: sobre papel blanco dan 1.88:1 y 1.77:1, que no basta
       ni para un borde. */
    --cvp-marca: #00d970;
    --cvp-marca-apoyo: #26d4f7;

    /* La ficha pública no tiene esquinas redondeadas y la pantalla de acceso usa 2px:
       ese es el radio de la casa, no el 0.4rem con el que nació este formulario */
    --cvp-radio: 2px;
    --cvp-alto-control: 2.9rem;
}

.convocatum-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 46rem;
}

/* Etiqueta arriba, campo abajo y a todo el ancho. Puestos de dos en dos, cada renglón
   quedaba con campos de distinto tamaño y la columna de etiquetas se veía desalineada. */
.convocatum-campo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border: 0;
    padding: 0;
    margin: 0;
}

.convocatum-campo label,
.convocatum-campo legend {
    color: var(--cvp-tinta);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Los tipos van enumerados y no `input` a secas para no pisar las casillas ni los botones
   de opción, que llevan su propio tamaño. Cada tipo nuevo que aparezca en el formulario hay
   que añadirlo aquí: el de fecha de nacimiento salió sin estilo porque `date` faltaba, y en
   esos casos el navegador dibuja su control nativo, que no se parece al resto. */
.convocatum-campo input[type="text"],
.convocatum-campo input[type="email"],
.convocatum-campo input[type="tel"],
.convocatum-campo input[type="number"],
.convocatum-campo input[type="date"],
.convocatum-campo select,
.convocatum-campo textarea {
    width: 100%;
    min-height: var(--cvp-alto-control);
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--cvp-borde-campo);
    border-radius: var(--cvp-radio);
    font: inherit;
    background: var(--cvp-papel);
    color: inherit;
}

.convocatum-campo input:focus-visible,
.convocatum-campo select:focus-visible,
.convocatum-campo textarea:focus-visible {
    outline: 2px solid var(--cvp-tinta);
    outline-offset: 1px;
}

/* Un campo que el navegador ya señaló como inválido: solo después de intentar avanzar,
   nunca mientras se escribe */
.convocatum-campo input:user-invalid,
.convocatum-campo textarea:user-invalid {
    border-color: var(--cvp-error);
}

.convocatum-campo textarea {
    resize: vertical;
}

/* La fecha de nacimiento no necesita 46rem de ancho: es el único campo que se queda corto.
   Son 12rem y no 9 porque el control de fecha dibuja «dd/mm/aaaa» más el botón del calendario,
   y con menos espacio el icono se encima sobre el año. */
.convocatum-campo input.es-corto {
    max-width: 12rem;
}

/* Safari y Chrome dibujan el control de fecha como una caja en línea con su propio alto, así
   que ignora el `min-height` de arriba y queda más bajo que los demás campos. Con `display:
   block` vuelve a comportarse como el resto. */
.convocatum-campo input[type="date"] {
    display: block;
}

.convocatum-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: start;
    min-height: 2.75rem;
    padding: 0.4rem 0;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

.convocatum-check input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.15rem 0 0;
    accent-color: var(--cvp-tinta);
}

.convocatum-boton {
    align-self: flex-start;
    min-height: var(--cvp-alto-control);
    padding: 0.75rem 1.6rem;
    border: 1px solid var(--cvp-tinta);
    border-radius: var(--cvp-radio);
    background: var(--cvp-tinta);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.convocatum-boton:hover,
.convocatum-boton:focus-visible {
    background: #171633;
    color: #fff;
}

.convocatum-boton:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* El botón de volver atrás o de avanzar de sección: mismo tamaño, sin peso */
.convocatum-boton-secundario {
    min-height: var(--cvp-alto-control);
    padding: 0.75rem 1.4rem;
    border: 1px solid var(--cvp-tinta);
    border-radius: var(--cvp-radio);
    background: transparent;
    color: var(--cvp-tinta);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.convocatum-boton-secundario:hover,
.convocatum-boton-secundario:focus-visible {
    background: var(--cvp-papel-alt);
}

.convocatum-boton-secundario:disabled {
    opacity: 0.6;
    cursor: progress;
}

.convocatum-respuesta {
    margin: 0;
    line-height: 1.5;
}

.convocatum-respuesta:empty {
    display: none;
}

.convocatum-respuesta.es-exito {
    color: var(--cvp-exito);
    font-weight: 600;
}

.convocatum-respuesta.es-error {
    color: var(--cvp-error);
}

/* Un mensaje suelto en la página: sin perfil ligado, sin sesión, o la advertencia de
   que se está viendo una prueba. Lo usan varias pantallas, por eso vive con los controles. */
.convocatum-aviso {
    padding: 1rem 1.2rem;
    border-left: 3px solid var(--cvp-tinta);
    background: var(--cvp-papel-alt);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Teléfono: el país se elige y el número se escribe.

   Antes era un campo libre y cada quien decidía si escribía el 52, el +52 o
   nada; el aviso salía hacia un número que WhatsApp no reconoce y no llegaba
   nunca, sin ningún error de por medio. Los dos controles se ven como uno solo
   porque son un solo dato.
   -------------------------------------------------------------------------- */

.convocatum-telefono {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.convocatum-telefono select {
    flex: 0 0 auto;
    width: auto;
    max-width: 11.5rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.convocatum-telefono input[type="tel"] {
    flex: 1 1 8rem;
    min-width: 0;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* El campo con el foco se pone delante para que su borde no quede tapado por el de al lado */
.convocatum-telefono select:focus,
.convocatum-telefono input[type="tel"]:focus {
    position: relative;
    z-index: 1;
}

.convocatum-ayuda-campo {
    color: var(--cvp-tinta-suave);
    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 30rem) {
    /* En pantallas muy angostas el selector de país no cabe al lado del número */
    .convocatum-telefono {
        flex-direction: column;
    }

    .convocatum-telefono select {
        max-width: none;
        border-radius: var(--cvp-radio);
    }

    .convocatum-telefono input[type="tel"] {
        margin-left: 0;
        margin-top: 0.4rem;
        border-radius: var(--cvp-radio);

        /* Apilados, el eje principal es el vertical y el `flex: 1 1 8rem` de arriba deja de
           ser un ancho base para volverse una ALTURA base: el campo del número se dibujaba de
           ocho rem de alto, tres veces el resto del formulario. Aquí vuelve a medir lo que
           midan sus propios estilos. */
        flex: 0 0 auto;
    }
}

/* --------------------------------------------------------------------------
   El sello de abierta o cerrada.

   Lo usan la rejilla de una sección y la tabla del perfil, así que vive aquí y
   no en la hoja de una de las dos. Va con borde y sin relleno: el verde de
   señal sobre papel ya es tinta, y un fondo de color competiría con la marca.
   -------------------------------------------------------------------------- */

.convocatum-estatus {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: var(--cvp-radio);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.convocatum-estatus.es-abierta { color: var(--cvp-exito); }
.convocatum-estatus.es-cerrada { color: var(--cvp-tinta-suave); }