/*
 * Grupos del socio (27 oct 2026, docs/grupos.md): una pestaña de Comunidad
 * con los grupos cerrados y los canales de la asociación. «Un WhatsApp pero
 * mejorado»: la lista (sus tareas, sus canales, sus grupos) y, dentro de uno,
 * sus cinco partes a un toque.
 *
 *  1. La lista: sus tareas, sus canales y sus grupos
 *  2. Un grupo: cabecera, WhatsApp, campana y partes
 *  3. La conversación: fijados, burbujas, citas, reacciones y «visto»
 *  4. Fotos y documentos dentro de un mensaje
 *  5. Escribir: responder, adjuntar y la cámara
 *  6. El canal (solo informan los responsables)
 *  7. La galería y sus álbumes
 *  8. Las tareas
 *  9. Los documentos
 * 10. Los miembros
 * 11. La hoja de opciones y «Visto por»
 *
 * Convenciones: móvil primero (390 px) y cada pieza con sus ajustes de
 * pantalla grande justo debajo. Solo variables de la plataforma; el color de
 * la asociación (--marca-*) en lo suyo, el azul de Rasedia en lo demás.
 */

/* #region 1. La lista: sus tareas, sus canales y sus grupos */
.grupos-inicio {
    display: grid;
    gap: clamp(32px, 3.4vw, 52px) clamp(24px, 4vw, 64px);
}

.grupos-apartado {
    display: grid;
    align-content: start;
    gap: var(--espacio-3);
    min-width: 0;
}

.grupos-apartado__titulo,
.grupos-mis-tareas__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.grupos-apartado__titulo .icono,
.grupos-mis-tareas__titulo .icono {
    display: none;
}

.grupos-apartado__ayuda {
    margin: calc(-1 * var(--espacio-2)) 0 0;
    color: var(--rs-texto-secundario);
    font-size: 15px;
}

.grupos-contador {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: var(--radio-pildora);
    color: var(--rs-texto-secundario);
    font-family: var(--fuente-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
}

/* Sus tareas pendientes: lo primero que ve, con su botón de «hecha». */
.grupos-mis-tareas {
    display: grid;
    gap: var(--espacio-3);
}

.grupos-mis-tareas__titulo .grupos-contador,
.grupo-tareas__bloque--mias .grupos-contador {
    background: var(--rs-oro);
    color: #1A1405;
}

.grupos-mis-tareas__lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.grupos-lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada grupo: su cara en grande, su nombre y lo último que se ha dicho, bajo una línea fina. */
.grupos-lista__grupo {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    margin: 0;
    padding: var(--espacio-4) 0;
    border-top: 1px solid var(--rs-borde-sutil);
    color: inherit;
    text-decoration: none;
    transition: color var(--duracion-hover) var(--curva);
}

.grupos-lista__grupo:hover,
.grupos-lista__grupo:focus-visible {
    text-decoration: none;
}

.grupos-lista__grupo:hover .grupos-lista__nombre {
    color: var(--marca-acento);
}

.grupos-lista__grupo:focus-visible {
    outline: none;
    border-radius: var(--radio-sm);
    box-shadow: var(--anillo-foco);
}

.grupos-lista__textos {
    display: grid;
    flex: 1;
    gap: 3px;
    min-width: 0;
}

.grupos-lista__textos strong {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    min-width: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    font-weight: 650;
    letter-spacing: -0.025em;
}

.grupos-lista__nombre {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color var(--duracion-hover) var(--curva);
}

.grupos-lista__ultimo {
    overflow: hidden;
    color: var(--rs-texto-secundario);
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grupos-lista__grupo--nuevo .grupos-lista__ultimo {
    color: var(--rs-texto);
    font-weight: 600;
}

.grupos-lista__etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1) var(--espacio-3);
    margin-top: 2px;
    font-size: 14px;
}

.grupos-lista__etiquetas .etiqueta .icono {
    width: 13px;
    height: 13px;
}

.grupos-lista__silencio {
    display: inline-flex;
    flex: none;
    color: var(--rs-texto-tenue);
}

.grupos-lista__silencio .icono {
    width: 15px;
    height: 15px;
}

.grupos-lista__lado {
    display: grid;
    flex: none;
    justify-items: end;
    gap: var(--espacio-1);
    color: var(--rs-texto-tenue);
    font-size: 14px;
}

.grupos-lista__hora--nuevo {
    color: var(--marca-acento);
    font-weight: 700;
}

/* El número de sin leer: en rojo; si el grupo está en silencio, en gris. */
.grupos-sin-leer {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: var(--radio-pildora);
    background: var(--rs-peligro-solido);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.grupos-sin-leer--silencio {
    background: var(--rs-superficie-4);
    color: var(--rs-texto-secundario);
}

.grupos-lista__grupo .grupo__icono {
    width: 56px;
    height: 56px;
}

.grupos-lista__grupo .grupo__icono > .icono {
    width: 26px;
    height: 26px;
}

@media (min-width: 768px) {
    .grupos-inicio {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .grupos-mis-tareas,
    .grupos-inicio > .estado-vacio {
        grid-column: 1 / -1;
    }
}
/* #endregion */

/* #region 2. Un grupo: cabecera, WhatsApp, campana y partes */
.grupo {
    display: grid;
    gap: var(--espacio-3);
}

.grupo__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.grupo__icono {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca-acento) 14%, transparent);
    color: var(--marca-acento);
}

.grupo__icono > .icono {
    width: 22px;
    height: 22px;
}

/* El megáfono de los canales, como una insignia. */
.grupo__icono-canal {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--rs-fondo);
    border-radius: 50%;
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
}

.grupo__icono-canal .icono {
    width: 11px;
    height: 11px;
}

.grupo__titulos {
    flex: 1;
    min-width: 0;
}

.grupo__titulos h2 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.grupo__titulos p {
    display: -webkit-box;
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.grupo__acciones {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--espacio-2);
}

.grupo__whatsapp {
    min-height: 40px;
}

.grupo__silenciar[aria-pressed="true"] {
    color: var(--rs-texto-tenue);
}

.grupo__pestanas {
    display: flex;
}

.grupo__pestanas button {
    position: relative;
    flex: 1;
    justify-content: center;
}

.grupo__pestanas button[hidden] {
    display: none;
}

/* Cuántas tareas suyas hay en el grupo, sobre la pestaña. */
.grupo__pestana-numero {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radio-pildora);
    background: var(--rs-oro);
    color: #1A1405;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 767px) {
    .grupo__whatsapp span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .grupo__whatsapp {
        width: 40px;
        padding: 0;
    }

}
/* #endregion */

/* #region 3. La conversación: fijados, burbujas, citas, reacciones y «visto» */
/* La conversación ocupa casi toda la pantalla, con la caja de escribir siempre abajo. */
.grupo-conversacion {
    position: relative;
    display: flex;
    flex-direction: column;
    /* La calcula grupos.js con lo que queda de pantalla; esto, por si acaso. */
    height: var(--alto-conversacion, calc(100dvh - 21rem));
    min-height: 20rem;
    overflow: clip;
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    /* Un fondo con una trama suave, como un papel: se distingue de la página. */
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--rs-texto) 5%, transparent) 1px, transparent 0) 0 0 / 18px 18px,
        var(--rs-superficie-1);
}

.grupo-conversacion[hidden] {
    display: none;
}

/* Lo que se borrará en el próximo mes (migración 0259): una franja discreta, en ámbar. */
.grupo-caduca {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-2) var(--espacio-3);
    border-bottom: 1px solid var(--rs-borde-sutil);
    background: color-mix(in srgb, var(--rs-aviso) 12%, var(--rs-superficie-1));
    color: var(--rs-aviso-texto);
    font-size: 0.875rem;
}

.grupo-caduca[hidden] {
    display: none;
}

.grupo-caduca .icono {
    flex: none;
    width: 16px;
    height: 16px;
}

/* Los fijados: una franja arriba; tocándola va al mensaje (y al siguiente). */
.grupo-fijados {
    flex: none;
    border-bottom: 1px solid var(--rs-borde-sutil);
    background: color-mix(in srgb, var(--rs-superficie-2) 92%, transparent);
    backdrop-filter: blur(6px);
}

.grupo-fijados__boton {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    width: 100%;
    min-height: 52px;
    padding: var(--espacio-2) var(--espacio-3);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.grupo-fijados__boton:focus-visible {
    outline: none;
    box-shadow: inset var(--anillo-foco);
}

.grupo-fijados__marcas {
    display: grid;
    flex: none;
    gap: 2px;
    align-self: stretch;
}

.grupo-fijados__marcas i {
    width: 3px;
    border-radius: 2px;
    background: var(--rs-borde-fuerte);
}

.grupo-fijados__marcas i.activa {
    background: var(--marca-acento);
}

.grupo-fijados__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca-acento) 14%, transparent);
    color: var(--marca-acento);
}

.grupo-fijados__icono .icono {
    width: 16px;
    height: 16px;
}

.grupo-fijados__textos {
    display: grid;
    min-width: 0;
}

.grupo-fijados__textos strong {
    color: var(--marca-acento);
    font-size: var(--texto-pequeno);
}

.grupo-fijados__textos span {
    overflow: hidden;
    font-size: var(--texto-etiqueta);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grupo-conversacion__mensajes {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--espacio-4);
}

/* Con la conversación a la vista, la página cabe entera en la pantalla: sin hueco abajo que obligue a bajar. */
.contenido-socio:has(.grupo-conversacion:not([hidden])) {
    padding-bottom: 0;
}

/* Y Rasi sube a la cabecera, como en el móvil: flotando taparía el botón de enviar. */
.app-socio:has(.grupo-conversacion:not([hidden])) .rasi-boton {
    display: none;
}

.app-socio:has(.grupo-conversacion:not([hidden])) .cabecera-socio__rasi {
    display: inline-flex;
    padding: 0;
}

.grupo-conversacion__mensajes:focus-visible {
    outline: none;
    box-shadow: inset var(--anillo-foco);
}

.grupo-conversacion__anteriores {
    display: block;
    margin: 0 auto var(--espacio-3);
}

.grupo-conversacion__lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.grupo-conversacion__dia {
    position: sticky;
    top: 0;
    z-index: 1;
    align-self: center;
    margin: var(--espacio-3) 0;
}

.grupo-conversacion__dia span {
    display: inline-block;
    padding: 3px var(--espacio-3);
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-3);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
    font-weight: 600;
    box-shadow: var(--sombra-sm);
}

.grupo-conversacion__dia span::first-letter {
    text-transform: uppercase;
}

/* «↓ 2 mensajes nuevos»: leyendo lo de antes, lo nuevo no le mueve la pantalla. */
.grupo-conversacion__bajar {
    position: absolute;
    right: var(--espacio-3);
    bottom: 5.25rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    min-height: 40px;
    padding: 0 var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-2);
    color: var(--marca-acento);
    font: inherit;
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    box-shadow: var(--sombra-md);
    cursor: pointer;
}

.grupo-conversacion__bajar[hidden] {
    display: none;
}

.grupo-conversacion__bajar:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.grupo-mensaje {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(86%, 36rem);
}

.grupo-mensaje--primero {
    margin-top: var(--espacio-2);
}

/* Los suyos, a la derecha y en el color de la asociación. */
.grupo-mensaje--mio {
    align-self: flex-end;
    align-items: flex-end;
}

.grupo-mensaje__autor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 var(--espacio-2) 2px;
    color: var(--marca-acento);
    font-size: var(--texto-pequeno);
    font-weight: 700;
}

.grupo-mensaje__autor .icono {
    width: 13px;
    height: 13px;
}

.grupo-mensaje__fila {
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
}

.grupo-mensaje--mio .grupo-mensaje__fila {
    flex-direction: row-reverse;
}

.grupo-mensaje__burbuja {
    display: grid;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding: var(--espacio-2) var(--espacio-3) 6px;
    border-radius: var(--radio-lg);
    border-top-left-radius: var(--radio-xs);
    background: var(--rs-superficie-2);
    box-shadow: 0 1px 1px color-mix(in srgb, var(--rs-texto) 8%, transparent);
    /* La pulsación larga abre las opciones, no el menú del navegador. */
    -webkit-touch-callout: none;
    -webkit-user-select: text;
    transition: transform 0.18s var(--curva);
    touch-action: pan-y;
}

.grupo-mensaje__burbuja--deslizando {
    transition: none;
}

.grupo-mensaje--mio .grupo-mensaje__burbuja {
    border-top-left-radius: var(--radio-lg);
    border-top-right-radius: var(--radio-xs);
    background: color-mix(in srgb, var(--marca-boton) 20%, var(--rs-superficie-2));
}

.grupo-mensaje:not(.grupo-mensaje--primero) .grupo-mensaje__burbuja {
    border-radius: var(--radio-lg);
}

.grupo-mensaje__burbuja--retirada {
    background: none;
    border: 1px dashed var(--rs-borde);
    box-shadow: none;
}

.grupo-mensaje--mio .grupo-mensaje__burbuja--retirada {
    background: none;
}

/* Al ir a un mensaje (desde una cita o un fijado): un destello. */
.grupo-mensaje--resaltado .grupo-mensaje__burbuja {
    animation: grupo-destello 1.4s var(--curva);
}

@keyframes grupo-destello {
    0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 55%, transparent); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

.grupo-mensaje__texto {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.grupo-mensaje__texto a {
    color: var(--rs-azul-texto);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.grupo-mensaje__retirado {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    margin: 0;
    color: var(--rs-texto-tenue);
    font-style: italic;
}

.grupo-mensaje__retirado .icono {
    width: 14px;
    height: 14px;
}

.grupo-mensaje__pie {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-tenue);
    font-size: 0.6875rem;
}

.grupo-mensaje__fijado {
    display: inline-flex;
    color: var(--marca-acento);
}

.grupo-mensaje__fijado .icono {
    width: 12px;
    height: 12px;
}

/* «Visto»: dos marcas; en azul cuando ya lo han visto todos. Tocándolo, quién sí y quién no. */
.grupo-mensaje__visto {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 24px;
    margin: -4px -4px -4px 0;
    padding: 0 4px;
    border: 0;
    border-radius: var(--radio-xs);
    background: none;
    color: var(--rs-texto-tenue);
    font: inherit;
    cursor: pointer;
}

.grupo-mensaje__visto .icono {
    width: 15px;
    height: 15px;
}

.grupo-mensaje__visto--todos {
    color: var(--rs-azul);
}

.grupo-mensaje__visto:hover,
.grupo-mensaje__visto:focus-visible {
    outline: none;
    background: var(--rs-hover);
}

/* «⋯»: las opciones de un mensaje. En el ordenador sale al pasar por encima; en el móvil, discreto. */
.grupo-mensaje__opciones {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--rs-texto-tenue);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity var(--duracion-hover) var(--curva), background var(--duracion-hover) var(--curva);
}

.grupo-mensaje__opciones .icono {
    width: 18px;
    height: 18px;
}

.grupo-mensaje__opciones:hover,
.grupo-mensaje__opciones:focus-visible {
    outline: none;
    background: var(--rs-hover);
    opacity: 1;
}

.grupo-mensaje__opciones:focus-visible {
    box-shadow: var(--anillo-foco);
}

@media (hover: hover) {
    .grupo-mensaje__opciones {
        opacity: 0;
    }

    .grupo-mensaje:hover .grupo-mensaje__opciones,
    .grupo-mensaje:focus-within .grupo-mensaje__opciones {
        opacity: 1;
    }
}

/* La cita del mensaje al que responde: con la raya del color de la asociación. */
.grupo-cita {
    display: grid;
    gap: 1px;
    min-width: 0;
    padding: 6px var(--espacio-2) 6px var(--espacio-3);
    border: 0;
    border-left: 3px solid var(--marca-acento);
    border-radius: var(--radio-sm);
    background: color-mix(in srgb, var(--rs-texto) 6%, transparent);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.grupo-cita:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.grupo-cita strong {
    color: var(--marca-acento);
    font-size: var(--texto-pequeno);
}

.grupo-cita__texto {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grupo-cita__texto .icono {
    flex: none;
    width: 13px;
    height: 13px;
}

.grupo-cita__texto--retirado {
    font-style: italic;
}

/* Las reacciones, debajo de la burbuja: tocando la propia, se quita. */
.grupo-mensaje__reacciones {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: -6px var(--espacio-2) 0;
    position: relative;
    z-index: 1;
}

.grupo-reaccion {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-2);
    color: var(--rs-texto-secundario);
    font: inherit;
    font-size: var(--texto-pequeno);
    font-weight: 600;
    line-height: 1;
    box-shadow: var(--sombra-sm);
}

button.grupo-reaccion {
    cursor: pointer;
}

.grupo-reaccion--mia {
    border-color: color-mix(in srgb, var(--marca-acento) 60%, var(--rs-borde));
    background: color-mix(in srgb, var(--marca-acento) 12%, var(--rs-superficie-2));
    color: var(--marca-acento);
}

.grupo-reaccion:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

@media (max-width: 767px) {
    .grupo-conversacion {
        margin: 0 calc(-1 * var(--espacio-2));
    }

    /* En el móvil, arrastrar en la conversación no mueve la página ni la recarga. */
    .grupo-conversacion__mensajes {
        padding: var(--espacio-3) var(--espacio-2);
        overscroll-behavior: contain;
    }

    .grupo-mensaje {
        max-width: 92%;
    }
}
/* #endregion */

/* #region 4. Fotos y documentos dentro de un mensaje */
/* Las fotos de un mensaje: una grande, o en rejilla de dos, tres o cuatro (la cuarta con «+2»). */
.grupo-mensaje__fotos {
    display: grid;
    gap: 3px;
    width: min(17rem, 66vw);
    margin: 0 -6px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radio-md);
    list-style: none;
}

.grupo-mensaje__fotos--2,
.grupo-mensaje__fotos--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grupo-mensaje__fotos--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grupo-mensaje__fotos--3 li:first-child {
    grid-column: 1 / -1;
}

/* Con fotos, la burbuja tiene el ancho de las fotos (el texto va debajo). */
.grupo-mensaje__burbuja:has(.grupo-mensaje__fotos) {
    width: calc(min(17rem, 66vw) + 2 * var(--espacio-3) - 12px);
}

.grupo-conversacion--canal .grupo-mensaje__burbuja:has(.grupo-mensaje__fotos) {
    width: auto;
}

.grupo-mensaje__fotos li[hidden] {
    display: none;
}

.grupo-mensaje__foto {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--rs-superficie-3);
    cursor: zoom-in;
}

.grupo-mensaje__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.grupo-mensaje__fotos--2 img,
.grupo-mensaje__fotos--4 img,
.grupo-mensaje__fotos--3 li:not(:first-child) img {
    aspect-ratio: 1;
}

.grupo-mensaje__foto:focus-visible {
    outline: none;
    box-shadow: inset var(--anillo-foco);
}

.grupo-mensaje__mas-fotos {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, #000000 50%, transparent);
    color: #FFFFFF;
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    font-weight: 700;
}

/* Un documento: su ficha con el icono de su clase, el nombre, lo que pesa y descargar. */
.grupo-documento {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-width: min(15rem, 62vw);
    padding: var(--espacio-2);
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--rs-texto) 5%, transparent);
    color: inherit;
    text-decoration: none;
}

.grupo-documento:hover,
.grupo-documento:focus-visible {
    outline: none;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--marca-acento);
}

.grupo-documento__icono {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.75rem;
    border-radius: var(--radio-sm);
    background: color-mix(in srgb, var(--rs-azul) 14%, transparent);
    color: var(--rs-azul);
}

.grupo-documento__icono .icono {
    width: 18px;
    height: 18px;
    margin-top: -8px;
}

.grupo-documento__icono small {
    position: absolute;
    bottom: 4px;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.grupo-documento__icono--pdf {
    background: color-mix(in srgb, var(--rs-peligro) 14%, transparent);
    color: var(--rs-peligro-texto);
}

.grupo-documento__icono--hoja {
    background: color-mix(in srgb, var(--rs-exito) 16%, transparent);
    color: var(--rs-exito-texto);
}

.grupo-documento__icono--presentacion {
    background: color-mix(in srgb, var(--rs-aviso) 18%, transparent);
    color: var(--rs-aviso-texto);
}

.grupo-documento__textos {
    display: grid;
    flex: 1;
    min-width: 0;
}

.grupo-documento__textos strong {
    overflow: hidden;
    font-size: var(--texto-etiqueta);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grupo-documento__textos small {
    color: var(--rs-texto-tenue);
}

.grupo-documento__descargar {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--rs-borde);
    border-radius: 50%;
    color: var(--marca-acento);
}

.grupo-documento__descargar .icono {
    width: 16px;
    height: 16px;
}
/* #endregion */

/* #region 5. Escribir: responder, adjuntar y la cámara */
.grupo-escribir {
    flex: none;
    border-top: 1px solid var(--rs-borde-sutil);
    background: var(--rs-superficie-2);
}

.grupo-escribir[hidden] {
    display: none;
}

.grupo-escribir__fila {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: var(--espacio-2);
}

.grupo-escribir__fila textarea {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 9rem;
    margin: 0 var(--espacio-1);
    border-radius: 22px;
    resize: none;
}

.grupo-escribir__adjuntar {
    position: relative;
    flex: none;
    cursor: pointer;
}

.grupo-escribir__adjuntar:focus-within {
    box-shadow: var(--anillo-foco);
}

.grupo-escribir__enviar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

/* Respondiendo a: la cita encima de la caja, con su ✕. */
.grupo-escribir__respondiendo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-2) 0 var(--espacio-3);
    color: var(--marca-acento);
}

.grupo-escribir__respondiendo[hidden] {
    display: none;
}

.grupo-escribir__respondiendo > .icono {
    flex: none;
    width: 18px;
    height: 18px;
}

.grupo-cita--escribir {
    flex: 1;
    cursor: default;
    color: var(--rs-texto);
}

/* Lo que va a mandar: cada uno con su vista previa y su ✕ para quitarlo. */
.grupo-escribir__adjuntos {
    display: flex;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-3) var(--espacio-3) 0;
    overflow-x: auto;
    list-style: none;
}

.grupo-escribir__adjunto {
    position: relative;
    display: grid;
    flex: none;
    justify-items: center;
    gap: 2px;
    width: 5.5rem;
    padding: var(--espacio-1);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
}

.grupo-escribir__adjunto img,
.grupo-escribir__adjunto .grupo-documento__icono {
    width: 100%;
    height: 3.5rem;
    border-radius: var(--radio-sm);
    object-fit: cover;
}

.grupo-escribir__adjunto-nombre {
    width: 100%;
    overflow: hidden;
    font-size: var(--texto-pequeno);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grupo-escribir__adjunto .boton {
    position: absolute;
    top: -8px;
    right: -8px;
    border-radius: 50%;
    background: var(--rs-superficie-4);
}

.grupo-escribir__fallo {
    margin: var(--espacio-2) var(--espacio-3) 0;
}

/* La cámara, solo donde la hay (el móvil); en el ordenador basta el clip. */
@media (hover: hover) and (pointer: fine) {
    .grupo-escribir__camara {
        display: none;
    }
}
/* #endregion */

/* #region 6. El canal (solo informan los responsables) */
/* En un canal todo va a la izquierda, como publicaciones anchas. */
.grupo-conversacion--canal .grupo-mensaje {
    align-self: stretch;
    align-items: stretch;
    max-width: 40rem;
}

.grupo-conversacion--canal .grupo-mensaje__fila {
    flex-direction: row;
    width: 100%;
}

.grupo-conversacion--canal .grupo-mensaje__burbuja {
    flex: 1;
    padding: var(--espacio-3) var(--espacio-4) var(--espacio-2);
    border-radius: var(--radio-lg);
    border-left: 3px solid var(--marca-acento);
    background: var(--rs-superficie-2);
}

.grupo-conversacion--canal .grupo-mensaje__fotos {
    width: 100%;
    margin: 0;
}

.grupo-conversacion--canal .grupo-mensaje--fijado .grupo-mensaje__burbuja {
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--marca-acento) 8%, transparent), transparent 60%),
        var(--rs-superficie-2);
}

/* Quien no publica: en vez de la caja de escribir, un pie que lo explica. */
.grupo-canal-pie {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-3) var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
    background: var(--rs-superficie-2);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    text-align: center;
}

.grupo-canal-pie[hidden] {
    display: none;
}

.grupo-canal-pie .icono {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--marca-acento);
}
/* #endregion */

/* #region 7. La galería y sus álbumes */
.grupo-galeria {
    display: grid;
    gap: var(--espacio-3);
}

.grupo-galeria__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
}

.grupo-galeria__titulo {
    display: grid;
    justify-items: start;
    gap: 2px;
    min-width: 0;
}

/* Los títulos de dentro de cada parte, con la letra de la lista. */
.grupo-galeria__titulo h3,
.grupo-galeria__subtitulo,
.grupo-tareas__bloque h3,
.grupo-miembros__titulo {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.3rem, 1.9vw, 1.7rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.grupo-galeria__subtitulo {
    margin-top: var(--espacio-4);
}

.grupo-galeria__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.grupo-galeria__acciones [hidden] {
    display: none;
}

.grupo-galeria__subir {
    position: relative;
    cursor: pointer;
}

.grupo-galeria__subir:focus-within {
    box-shadow: var(--anillo-foco);
}

.grupo-galeria__subir--ocupado {
    opacity: 0.6;
    pointer-events: none;
}

.grupo-galeria__subiendo {
    margin: 0;
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-md);
    background: var(--rs-azul-suave);
    color: var(--rs-azul-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.grupo-galeria__subiendo--error {
    background: color-mix(in srgb, var(--rs-peligro) 12%, transparent);
    color: var(--rs-peligro-texto);
}

/* Los álbumes: la portada llena el cartel y el nombre va encima. */
.grupo-albumes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.grupo-albumes[hidden] {
    display: none;
}

.grupo-album {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: end;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radio-xl);
    background: color-mix(in srgb, var(--marca-acento) 14%, var(--rs-superficie-2));
    color: #FFFFFF;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 240ms var(--curva);
}

.grupo-album::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    z-index: -1;
    background: linear-gradient(to top, rgb(0 0 0 / 0.78), transparent);
}

.grupo-album:hover {
    transform: translateY(-4px);
}

.grupo-album:focus-visible {
    outline: 2px solid var(--marca-acento);
    outline-offset: 3px;
}

.grupo-album:active {
    transform: scale(0.985);
}

.grupo-album__portada {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: grid;
    place-items: center;
    color: var(--marca-acento);
}

.grupo-album__portada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grupo-album__portada .icono {
    width: 48px;
    height: 48px;
    stroke-width: 1.2;
}

.grupo-album__textos {
    display: grid;
    gap: 2px;
    padding: var(--espacio-3) var(--espacio-4);
}

.grupo-album__textos strong {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--fuente-display);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.grupo-album__textos small {
    color: rgb(255 255 255 / 0.85);
    font-size: 14px;
}

/* Las fotos: rejilla cuadrada de tres en el móvil, más en el ordenador, con la foto pequeña. */
.grupo-fotos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radio-lg);
    list-style: none;
}

.grupo-foto {
    position: relative;
}

.grupo-foto__ver {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--rs-superficie-3);
    cursor: zoom-in;
}

.grupo-foto__ver img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.grupo-foto__ver:focus-visible {
    outline: none;
    box-shadow: inset var(--anillo-foco);
}

.grupo-foto__opciones {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, #000000 45%, transparent);
    color: #FFFFFF;
    cursor: pointer;
}

.grupo-foto__opciones .icono {
    width: 18px;
    height: 18px;
}

.grupo-foto__opciones:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

@media (min-width: 768px) {
    .grupo-albumes {
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    }

    .grupo-fotos {
        grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    }
}
/* #endregion */

/* #region 8. Las tareas */
.grupo-tareas {
    display: grid;
    gap: var(--espacio-3);
}

.grupo-tareas__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    min-height: 40px;
}

.grupo-tareas__resumen {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-weight: 600;
}

.grupo-tarea-formulario {
    display: grid;
    gap: 0;
    margin: 0;
}

.grupo-tarea-formulario[hidden] {
    display: none;
}

.grupo-tarea-formulario h3 {
    margin: 0 0 var(--espacio-3);
    font-size: 1.0625rem;
}

.grupo-tarea-formulario__fila {
    display: grid;
    gap: 0 var(--espacio-3);
}

.grupo-tareas__bloque {
    display: grid;
    gap: var(--espacio-2);
}

.grupo-tareas__bloque + .grupo-tareas__bloque,
.grupo-tareas__hechas {
    margin-top: var(--espacio-3);
}

.grupo-tareas__bloque h3 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.grupo-tareas__lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.grupo-tareas__hechas {
    padding: var(--espacio-2) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
}

.grupo-tareas__hechas summary {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 40px;
    color: var(--rs-texto-secundario);
    font-weight: 600;
    cursor: pointer;
}

.grupo-tareas__hechas summary .icono {
    color: var(--rs-exito);
}

.grupo-tarea {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
    padding: var(--espacio-3) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

/* «Hecha»: un círculo grande que se toca con el pulgar. */
.grupo-tarea__marca {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 4px 0 0;
    padding: 0;
    border: 2px solid var(--rs-borde-fuerte);
    border-radius: 50%;
    background: var(--rs-superficie-1);
    color: transparent;
    cursor: pointer;
    transition: background var(--duracion-hover) var(--curva), border-color var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva);
}

/* Lo bastante grande para el dedo, aunque se vea pequeño. */
button.grupo-tarea__marca {
    box-shadow: 0 0 0 6px transparent;
}

.grupo-tarea__marca .icono {
    width: 18px;
    height: 18px;
}

button.grupo-tarea__marca:hover {
    border-color: var(--rs-exito);
    color: var(--rs-exito);
}

.grupo-tarea__marca:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.grupo-tarea__marca[aria-pressed="true"],
.grupo-tarea--hecha .grupo-tarea__marca--quieta {
    border-color: var(--rs-exito-solido);
    background: var(--rs-exito-solido);
    color: #FFFFFF;
}

.grupo-tarea__marca--quieta {
    cursor: default;
}

.grupo-tarea__textos {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
    padding-top: 6px;
}

.grupo-tarea__textos strong {
    font-family: var(--fuente-display);
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.grupo-tarea--hecha .grupo-tarea__textos strong {
    color: var(--rs-texto-tenue);
    text-decoration: line-through;
}

.grupo-tarea__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--espacio-3);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.grupo-tarea__meta a {
    color: var(--marca-acento);
    font-weight: 600;
}

.grupo-tarea__fecha {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.grupo-tarea__fecha .icono {
    width: 13px;
    height: 13px;
}

.grupo-tarea__fecha--hoy {
    color: var(--rs-aviso-texto);
}

.grupo-tarea__fecha--vencida {
    color: var(--rs-peligro-texto);
}

.grupo-tarea__detalle {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.grupo-tarea__quien {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
}

@media (min-width: 768px) {
    .grupo-tarea-formulario__fila {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* De dos en dos donde caben. */
@media (min-width: 900px) {
    .grupo-tareas__lista,
    .grupos-mis-tareas__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(24px, 4vw, 64px);
    }
}
/* #endregion */

/* #region 9. Los documentos */
.grupo-archivos {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.grupo-archivo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
    padding-block: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.grupo-archivo__textos {
    display: grid;
    flex: 1;
    min-width: 0;
}

.grupo-archivo__textos strong {
    overflow-wrap: anywhere;
}

.grupo-archivo__textos small {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

.grupo-archivo__acciones {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
    padding-left: calc(2.5rem + var(--espacio-3));
}

.grupo-archivos__mas {
    display: block;
    margin: var(--espacio-3) auto 0;
}

@media (min-width: 768px) {
    .grupo-archivo {
        flex-wrap: nowrap;
    }

    .grupo-archivo__acciones {
        flex: none;
        padding-left: 0;
    }
}
/* #endregion */

/* #region 10. Los miembros */
.grupo-anadir {
    display: grid;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
    padding: var(--espacio-3);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.grupo-anadir label {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    font-weight: 600;
}

.grupo-anadir label .icono {
    color: var(--marca-acento);
}

.grupo-anadir__resultados {
    display: grid;
    gap: var(--espacio-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.grupo-anadir__resultados li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    min-height: 44px;
}

.grupo-anadir__resultados small {
    color: var(--rs-texto-tenue);
}

.grupo-miembros__cuantos {
    margin: 0 0 var(--espacio-2);
    color: var(--rs-texto-secundario);
}

.grupo-miembros__titulo {
    margin: var(--espacio-4) 0 var(--espacio-2);
}

.grupo-miembros {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.grupo-miembro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    min-height: 72px;
    padding: var(--espacio-2) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.grupo-miembro__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca-acento) 16%, var(--rs-superficie-2));
    color: var(--marca-acento);
    font-family: var(--fuente-display);
    font-weight: 700;
}

.grupo-miembro__textos {
    display: grid;
    flex: 1;
    min-width: 8rem;
}

.grupo-miembro__textos strong {
    font-family: var(--fuente-display);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.grupo-miembro__textos small {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    font-weight: 400;
}

@media (min-width: 900px) {
    .grupo-miembros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(24px, 4vw, 64px);
    }
}
/* #endregion */

/* #region 11. La hoja de opciones y «Visto por» */
.grupo-hoja {
    width: min(26rem, calc(100vw - 2 * var(--espacio-4)));
}

.grupo-hoja__contenido {
    display: grid;
    gap: var(--espacio-3);
    max-height: min(80dvh, 40rem);
    padding: var(--espacio-4);
    overflow-y: auto;
}

/* La rayita de arriba: se lee como una hoja que sube desde abajo. */
.grupo-hoja__contenido::before {
    content: "";
    justify-self: center;
    width: 40px;
    height: 4px;
    margin-top: calc(-1 * var(--espacio-2));
    border-radius: 2px;
    background: var(--rs-borde-fuerte);
}

.grupo-hoja__titulo {
    margin: 0;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.grupo-hoja__cita {
    margin: 0;
    padding: var(--espacio-2) var(--espacio-3);
    border-left: 3px solid var(--marca-acento);
    border-radius: var(--radio-sm);
    background: var(--rs-superficie-1);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.grupo-hoja__reacciones {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--espacio-1);
    padding: var(--espacio-2);
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-1);
    box-shadow: var(--sombra-sm);
}

.grupo-hoja__emoji {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--duracion-hover) var(--curva), background var(--duracion-hover) var(--curva);
}

.grupo-hoja__emoji:hover,
.grupo-hoja__emoji:focus-visible {
    outline: none;
    background: var(--rs-hover);
    transform: scale(1.15);
}

.grupo-hoja__emoji:focus-visible {
    box-shadow: var(--anillo-foco);
}

.grupo-hoja__emoji--mia {
    background: color-mix(in srgb, var(--marca-acento) 16%, transparent);
}

.grupo-hoja__opciones {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
}

.grupo-hoja__opcion {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-height: 52px;
    padding: 0 var(--espacio-4);
    border: 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
    background: none;
    color: var(--rs-texto);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.grupo-hoja__opcion:last-child {
    border-bottom: 0;
}

.grupo-hoja__opcion .icono {
    width: 20px;
    height: 20px;
    color: var(--rs-texto-secundario);
}

.grupo-hoja__opcion:hover,
.grupo-hoja__opcion:focus-visible {
    outline: none;
    background: var(--rs-hover);
}

.grupo-hoja__opcion:focus-visible {
    box-shadow: inset var(--anillo-foco);
}

.grupo-hoja__opcion--peligro,
.grupo-hoja__opcion--peligro .icono {
    color: var(--rs-peligro-texto);
}

.grupo-hoja__mensaje {
    display: grid;
    gap: var(--espacio-2);
}

.grupo-hoja__mensaje small {
    color: var(--rs-texto-tenue);
}

.grupo-vistos__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: var(--espacio-2) 0 0;
    font-size: var(--texto-etiqueta);
}

.grupo-vistos__titulo .icono {
    width: 16px;
    height: 16px;
}

.grupo-vistos__titulo--si .icono {
    color: var(--rs-azul);
}

.grupo-vistos__titulo--no .icono {
    color: var(--rs-texto-tenue);
}

.grupo-vistos {
    display: grid;
    gap: var(--espacio-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.grupo-vistos li {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 40px;
}

.grupo-vistos .grupo-miembro__avatar {
    width: 2rem;
    height: 2rem;
    font-size: var(--texto-pequeno);
}

@media (max-width: 767px) {
    .grupo-hoja {
        width: 100%;
    }

    .grupo-hoja__contenido {
        padding-bottom: calc(var(--espacio-4) + env(safe-area-inset-bottom, 0px));
    }
}
/* #endregion */