/* ==========================================================================
   Convocatum — el perfil de la persona registrada.

   Tres bloques en una página: lo que le tocó, sus datos y la baja. La lista es
   lo único abierto de entrada; los otros dos van plegados, porque quien entra
   viene a ver si le tocó algo y con los tres desplegados la tabla quedaba
   fuera de la pantalla en el celular, que es de donde llega casi todo el
   mundo (el aviso sale por WhatsApp).

   Las convocatorias van en fichas y no en la tabla que imitaba su hoja de
   cálculo: muchas llegan sin ubicación, sin tipo y sin fechas, y con diez
   columnas la pantalla se llenaba de rayas y de «Sin especificar». En ficha el
   campo que no existe no ocupa lugar, y la misma forma sirve en cualquier
   ancho sin apaños para el celular.

   Los colores y las medidas salen de convocatum.css. Aquí no se declara ni un
   valor de color a mano.
   ========================================================================== */

.convocatum-perfil {
    max-width: 72rem;
    color: var(--cvp-tinta);
}

.convocatum-perfil-cabecera {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--cvp-tinta);
}

.convocatum-perfil-cabecera h2 {
    margin: 0 0 0.25rem;
    color: var(--cvp-tinta);
}

.convocatum-perfil-resumen {
    margin: 0;
    color: var(--cvp-tinta-suave);
}

.convocatum-perfil-bloque {
    margin-bottom: 2rem;
}

.convocatum-perfil-bloque h3 {
    margin: 0 0 0.75rem;
    color: var(--cvp-tinta);
}

/* --------------------------------------------------------------------------
   Los bloques plegables: los datos y la baja.

   El `<summary>` lleva dentro un h3 para que el índice de encabezados de la
   página siga teniendo sentido con los bloques cerrados. Se le quita el
   `display` que trae de fábrica porque con `list-item` el título se va a la
   línea de abajo del triángulo.
   -------------------------------------------------------------------------- */

.convocatum-plegable > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--cvp-regla);
    cursor: pointer;
    list-style: none;
    /* Objetivo táctil cómodo: es un control que se pulsa con el pulgar */
    min-height: 2.75rem;
}

.convocatum-plegable > summary::-webkit-details-marker {
    display: none;
}

.convocatum-plegable > summary h3 {
    margin: 0;
    font-size: 1.05rem;
}

/* El triángulo se dibuja aquí para poder girarlo al abrir; el nativo no se
   puede rotar de forma fiable entre navegadores */
.convocatum-plegable > summary::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-right: 2px solid var(--cvp-tinta-suave);
    border-bottom: 2px solid var(--cvp-tinta-suave);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

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

.convocatum-form-perfil {
    padding-top: 1rem;
}

/* La nota de debajo de la lista. El listado en sí vive en convocatum-lista.css: es la vista
   tipo hoja de cálculo que pidió el cliente, con su propia forma en el celular, y tenía tamaño
   de sobra para no ir apretada aquí dentro. */

.convocatum-nota-tabla {
    margin-top: 1.1rem;
    font-size: 0.85rem;
    color: var(--cvp-tinta-suave);
}

/* --------------------------------------------------------------------------
   La baja.

   El rojo es señal y aquí es donde toca gastarlo: es la única acción de la
   página que no se puede deshacer.
   -------------------------------------------------------------------------- */

.convocatum-baja > summary h3 {
    color: var(--cvp-error);
}

.convocatum-baja .convocatum-check + .convocatum-check {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   El aviso de auditoría.

   Quien opera el sistema puede abrir esta pantalla como la ve una persona
   concreta. Tiene que notarse desde el primer vistazo: sin el aviso es fácil
   creer que se está mirando la propia cuenta, y desde ahí se reporta mal lo
   que se ve. Va en el amarillo de advertencia y no en el verde de la marca,
   porque no es una función del sitio: es una vista prestada.
   -------------------------------------------------------------------------- */

.convocatum-auditoria {
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid #b26a00;
    background: #fff8e5;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--cvp-tinta);
}