/*
 * Las peñas de la asociación (Configuración › Socios › Peñas, penas.php):
 * la lista con cuántos socios tiene cada una de habitual y, en su ventana,
 * los socios y el buscador para añadir (migración 0327, 2 nov 2026). Sobre
 * las piezas comunes del panel (tarjeta, botones, .dialogo--formulario,
 * .avatar-fila).
 *
 * Índice:
 *   1. La tarjeta y su cabecera
 *   2. Cada peña
 *   3. Sin peñas
 *   4. La ventana de sus socios
 */

/* #region 1. La tarjeta y su cabecera */
.penas__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

.penas__cabecera h2 {
    margin: 0;
}

/* «Nuevo grupo especial» y «Nueva peña», juntos (10 nov 2026, migración 0347). */
.penas__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.penas__cabecera + .ayuda-campo {
    margin: calc(-1 * var(--espacio-2)) 0 var(--espacio-4);
}

.penas__sin {
    margin: 0 0 var(--espacio-4);
}
/* #endregion */

/* #region 2. Cada peña */
.penas__lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.penas__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-3) 0;
}

.penas__fila + .penas__fila {
    border-top: 1px solid var(--rs-borde);
}

/* El nombre y sus socios abren la ventana, igual que el botón «Socios». */
.penas__abrir {
    display: flex;
    flex: 1 1 14rem;
    align-items: center;
    gap: var(--espacio-3);
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.penas__abrir:hover strong {
    color: var(--marca-acento);
}

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

.penas__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radio-md);
    background: color-mix(in oklch, var(--marca-acento) 14%, transparent);
    color: var(--marca-acento);
}

.penas__datos {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.penas__datos strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--duracion-hover) ease;
}

.penas__cuantos {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}

/* Una peña sin nadie: es lo que falta por hacer, en ámbar. */
.penas__cuantos--nadie {
    color: var(--rs-aviso);
}

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

.penas__mas .menu-desplegable__panel {
    right: 0;
    left: auto;
    min-width: 13rem;
}
/* #endregion */

/* #region 3. Sin peñas */
.penas__vacio {
    display: grid;
    justify-items: center;
    gap: var(--espacio-2);
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--espacio-8) var(--espacio-4);
    text-align: center;
}

.penas__vacio-icono {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--espacio-2);
    border-radius: 50%;
    background: color-mix(in oklch, var(--marca-acento) 14%, transparent);
    color: var(--marca-acento);
}

.penas__vacio h3 {
    margin: 0;
}

.penas__vacio p {
    margin: 0;
    color: var(--rs-texto-secundario);
    line-height: 1.5;
}
/* #endregion */

/* #region 4. La ventana de sus socios */
.penas-ventana__buscar {
    margin: 0;
}

.penas-ventana__personas {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.penas-ventana__resultados:empty {
    display: none;
}

/* Lo encontrado, en su caja, para no confundirlo con los que ya están. */
.penas-ventana__resultados {
    max-height: min(12rem, 25vh);
    overflow-y: auto;
    padding: var(--espacio-1) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.penas-ventana__persona {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) 0;
}

.penas-ventana__persona + .penas-ventana__persona {
    border-top: 1px solid var(--rs-borde-sutil);
}

.penas-ventana__nombre {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.penas-ventana__nombre strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.penas-ventana__nombre span {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.penas-ventana__ya {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--espacio-1);
    color: var(--rs-exito);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.penas-ventana__miembros {
    display: grid;
    gap: var(--espacio-2);
}

.penas-ventana__miembros h4 {
    margin: 0;
    font-size: var(--texto-base);
}

/* La lista larga se desplaza dentro de la ventana; el buscador y «Hecho» quedan a la vista aunque la pantalla sea baja. */
.penas-ventana__miembros .penas-ventana__personas {
    max-height: min(18rem, 30vh);
    overflow-y: auto;
}

.penas-ventana__nadie {
    margin: 0;
    padding: var(--espacio-2) 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}
/* #endregion */