/*
 * Junta y permisos (/gestion/junta).
 *
 * Solo la carga plantillas/gestion/junta.php, después de panel.css y
 * gestion.css (de ahí salen las tarjetas, la cabecera de cada bloque
 * .eventos-cabecera, la tabla .tabla-eventos, la cara .persona-celda, las
 * ventanas .dialogo--formulario con sus .ventana-paso, las píldoras
 * .casillas-chips, las opciones grandes .elecciones, los interruptores
 * explicados .ajuste y las etiquetas; los plegables .plegable y el
 * «Guardado» .guardado-flash, de base.css). Las piezas van en el orden en
 * que salen:
 *
 *   1. La cabecera de cada bloque: el «Guardado» junto a su botón
 *   2. Personas: cada fila y el filtro por cargo
 *   3. Cargos: cada fila y lo que puede, por apartados
 *   4. Ventana de una persona: sus cargos y lo que se hace aparte
 *   5. Ventana de un cargo: cada apartado de permisos
 *   6. Avisos por correo: el resumen semanal
 *   7. Avisos por correo: los departamentos
 *   8. Avisos por correo: quién recibe cada aviso
 */

/* #region 1. La cabecera de cada bloque: el «Guardado» junto a su botón */
/* El «Guardado» sale a la izquierda del botón y se va solo; si no cabe, baja de línea sin mover el título. */
.junta-cabecera__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espacio-2) var(--espacio-3);
}
/* #endregion */

/* #region 2. Personas: cada fila y el filtro por cargo */
/* El nombre con lo que le acompaña («(tú)», el escudo, «Desactivada»), en una línea que baja si no cabe. También el de un cargo. */
.junta-nombre strong {
    color: var(--rs-texto);
}

.junta-nombre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1) var(--espacio-2);
}

/* Entra con el código del móvil: el escudo, en verde, porque es lo seguro. */
.junta-codigo {
    display: inline-grid;
    place-items: center;
    color: var(--rs-exito-texto);
}

.junta-codigo .icono {
    width: 16px;
    height: 16px;
}

.junta-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
}

/* «Hace 3 días»: dato de apoyo, más suave que el nombre. */
.junta-acceso {
    color: var(--rs-texto-secundario);
    white-space: nowrap;
}

/* «Solo quien tiene el cargo» y su pastilla con la ✕, como los filtros de la lista de socios (socios.css). */
.junta-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-3);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.junta-filtro__quitar {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    min-height: 28px;
    padding: 0 6px 0 10px;
    border: 1px solid color-mix(in srgb, var(--marca-acento) 40%, var(--rs-borde));
    border-radius: var(--radio-pildora);
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
    color: var(--marca-acento);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.junta-filtro__quitar .icono {
    width: 14px;
    height: 14px;
}

.junta-filtro__quitar:hover {
    background: color-mix(in srgb, var(--marca-acento) 18%, transparent);
}

.junta-filtro__quitar:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}
/* #endregion */

/* #region 3. Cargos: cada fila y lo que puede, por apartados */
.junta-cargo {
    display: grid;
    gap: 2px;
}

/* Dónde trabaja, con su icono: bajo el nombre en la tabla (solo si es de puerta) y bajo el título en su ventana. */
.junta-ambito {
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.junta-ambito .icono {
    flex: none;
    width: 14px;
    height: 14px;
}

/* Lo que puede, en texto: «N apartados» y la lista, en dos líneas como mucho (entera al pasar el ratón). */
.junta-permisos-texto {
    display: -webkit-box;
    overflow: hidden;
    max-width: 60rem;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    line-height: 1.5;
}

.junta-permisos-texto strong {
    color: var(--rs-texto);
}

/* Acceso completo: con su escudo, en verde. */
.junta-todo {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--rs-exito-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.junta-todo .icono {
    width: 16px;
    height: 16px;
}

/* «1 persona», en una línea. */
#cargos-cuerpo [data-filtrar-cargo] {
    white-space: nowrap;
}

#cargos-cuerpo td:first-child {
    min-width: 12rem;
}
/* #endregion */

/* #region 4. Ventana de una persona: sus cargos y lo que se hace aparte */
/* En las píldoras de cargos: el candado del que no se puede dar ni quitar y «Desactivado», en ámbar. */
.junta-cargos .icono {
    flex: none;
    width: 14px;
    height: 14px;
}

.junta-cargos small {
    color: var(--rs-aviso-texto);
    font-weight: 500;
}

.junta-cargos .campo-checkbox:has(input:disabled) {
    cursor: not-allowed;
}

/* Reenviar la invitación y quitar el código del móvil se hacen al pulsar, sin «Guardar»: por eso van aparte, debajo. */
.junta-aparte {
    padding-top: var(--espacio-2);
    border-top: 1px solid var(--rs-borde-sutil);
}

/* Nunca salen las dos a la vez (sin haber entrado no hay código del móvil): sin raya propia; el botón baja si no cabe. */
.junta-aparte > .ajuste {
    flex-wrap: wrap;
    border-top: 0;
}
/* #endregion */

/* #region 5. Ventana de un cargo: cada apartado de permisos */
/* En la línea del apartado: su nombre, «2 de 3» y su interruptor, antes de la flecha. */
.junta-apartado__interruptor {
    flex: none;
    min-height: 0;
    margin: 0;
}

.junta-apartado > summary > small {
    font-variant-numeric: tabular-nums;
}

/* Dentro, cada cosa que puede hacer con su explicación entera a la vista (en el móvil no hay «pasar el ratón»). */
.junta-apartado__acciones {
    display: grid;
    gap: var(--espacio-2);
    padding: 0 0 var(--espacio-3);
}

.junta-apartado__acciones .campo-checkbox {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}
/* #endregion */

/* #region 6. Avisos por correo: el resumen semanal */
/* Un enlace directo a un bloque (#bloque-resumen-semanal, desde el buscador): que su título no quede bajo la barra de arriba. */
#bloque-resumen-semanal,
#bloque-departamentos,
#bloque-avisos-correo {
    scroll-margin-top: calc(var(--alto-superior) + var(--espacio-4));
}

/* «Qué día», con su desplegable a la derecha, como los interruptores de su lista. */
.junta-dia {
    flex: 0 1 12rem;
    width: auto;
    min-width: 0;
}
/* #endregion */

/* #region 7. Avisos por correo: los departamentos */
.departamentos-lista {
    list-style: none;
    margin: var(--espacio-3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--espacio-2);
}

.departamentos-lista__fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
}

.departamentos-lista__icono {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radio-md);
    background: var(--rs-azul-suave);
    color: var(--rs-azul);
}

.departamentos-lista__texto {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.departamentos-lista__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1);
}

@media (max-width: 767px) {
    .departamentos-lista__fila {
        grid-template-columns: minmax(0, 1fr);
    }

    .departamentos-lista__icono {
        display: none;
    }
}
/* #endregion */

/* #region 8. Avisos por correo: quién recibe cada aviso */
.avisos-correo {
    display: grid;
    gap: var(--espacio-3);
}

.avisos-correo__grupo {
    display: grid;
    gap: var(--espacio-2);
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
}

.avisos-correo__fila {
    display: grid;
    /* El desplegable, en proporción: a media pantalla, con un ancho fijo, el texto se quedaba en una columna de una palabra. */
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 40%);
    align-items: center;
    gap: var(--espacio-2) var(--espacio-4);
}

@media (max-width: 767px) {
    .avisos-correo__fila {
        grid-template-columns: minmax(0, 1fr);
    }
}

.avisos-correo__que {
    display: grid;
    gap: 2px;
}

/* El nombre del aviso y, al guardar, «Guardado» a su lado un momento (al lado de su desplegable, sin mover nada). */
.avisos-correo__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1) var(--espacio-3);
}

.avisos-correo__nombre {
    font-weight: 600;
    cursor: pointer;
}

/* Si no se ha guardado: el porqué, en rojo, bajo su explicación. */
.avisos-correo__error {
    color: var(--rs-peligro-texto);
    font-size: var(--texto-etiqueta);
}

/* Los avisos concretos de un grupo, sangrados bajo él y con menos peso. */
.avisos-correo__concretos {
    display: grid;
    gap: var(--espacio-2);
    margin-top: var(--espacio-2);
    padding-left: var(--espacio-4);
    border-left: 2px solid var(--rs-borde);
}

.avisos-correo__subtitulo {
    margin: 0;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
}

.avisos-correo__fila--concreta .avisos-correo__nombre {
    font-weight: 500;
}

/* En pantalla grande, a dos columnas: treinta avisos, uno bajo otro, eran 3.500 px. */
@media (min-width: 1280px) {
    #grupo-avisos:not([hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* La frase de arriba y la lista de los avisos, a lo ancho; el resumen y los departamentos, a medias. */
    #grupo-avisos > :not(#bloque-resumen-semanal, #bloque-departamentos) {
        grid-column: 1 / -1;
    }

    .avisos-correo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: dense;
    }

    .avisos-correo__grupo {
        align-content: start;
    }

    /* El que se reparte por tipos (Entradas, Tienda), entero a lo ancho y con ellos a dos columnas. */
    .avisos-correo__grupo:has(.avisos-correo__concretos) {
        grid-column: 1 / -1;
    }

    .avisos-correo__concretos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--espacio-6);
    }

    .avisos-correo__subtitulo {
        grid-column: 1 / -1;
    }
}
/* #endregion */