/*
 * Lista de socios (/gestion/socios).
 *
 * Solo la carga plantillas/gestion/socios.php, después de panel.css y
 * gestion.css (de ahí salen las tarjetas, la tabla, la selección de varias
 * filas, el avatar y la familia bajo el nombre, que comparten Deudores y
 * Rifas). Las piezas van en el orden en que salen:
 *
 *   1. Las cifras: activos, de baja y sin completar
 *   2. «Les falta…»
 *   3. La tarjeta de la lista: búsqueda, filtros y la barra de encima
 *   4. Las etiquetas: el filtro, su botón y su ventana
 *   5. Los carnets sin imprimir: imprimirlos de una vez
 *   6. Las columnas que se ven
 *   7. Las filas: el socio, sus datos, «En la app» y abrir la ficha
 *   8. Editar un dato en la propia lista
 *   9. La paginación
 *  10. Móvil: cada socio en una ficha corta
 *
 * Convenciones:
 * - Cada tipo de socio, su color: el que le puso la asociación (el de su
 *   carnet) o, si no tiene, uno de su familia de tonos (--tono-1…6 de
 *   base.css); el mismo en las cifras, en la fila y en «Tipos de socio».
 * - Verde, ámbar y rojo solo para lo que va bien, pide atención o va mal.
 * - Colores, radios y espacios, de tokens de base.css; el modo claro, junto
 *   a cada pieza.
 */

/* #region La lista: su familia bajo el nombre */
.fila-socio__familia {
    display: block;
    margin: 2px 0 0 44px;
    color: var(--rs-texto-tenue);
    font-size: 0.78rem;
}

.app-panel .tabla-eventos .fila-socio__familia a {
    color: var(--rs-texto-secundario);
    font-weight: 600;
    text-decoration: none;
}

.app-panel .tabla-eventos .fila-socio__familia a:hover {
    color: var(--marca-acento);
}

@media (max-width: 767px) {
    .fila-socio__familia {
        margin-left: 52px;
    }
}
/* #endregion */

/* #region 1. Las cifras: activos, de baja, sin completar y cada tipo de socio */
.socios-cifras {
    display: grid;
    gap: var(--espacio-3);
}

/* Activos, de baja y sin completar: tarjetas que filtran la lista al pulsarlas. */
.socios-cifras__generales {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--espacio-3);
}

.socios-cifra {
    --tono-cifra: var(--color-personas);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-lg);
    background: linear-gradient(160deg, color-mix(in srgb, var(--tono-cifra) 9%, transparent), transparent 70%), var(--rs-superficie-1);
    color: var(--rs-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duracion-hover) var(--curva), transform var(--duracion-hover) var(--curva);
}

.socios-cifra--baja {
    --tono-cifra: var(--rs-peligro);
}

.socios-cifra--alta_pendiente {
    --tono-cifra: var(--rs-aviso);
}

:root[data-theme="light"] .socios-cifra {
    border-color: rgb(16 20 26 / 0.08);
    background: linear-gradient(160deg, color-mix(in srgb, var(--tono-cifra) 7%, transparent), transparent 70%), #FFFFFF;
    box-shadow: 0 4px 14px rgb(16 20 26 / 0.04);
}

.socios-cifra:hover {
    border-color: color-mix(in srgb, var(--tono-cifra) 45%, var(--rs-borde));
    transform: translateY(-1px);
}

.socios-cifra[aria-pressed="true"] {
    border-color: var(--tono-cifra);
    box-shadow: 0 0 0 1px var(--tono-cifra);
}

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

.socios-cifra__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tono-cifra) 16%, transparent);
    color: var(--tono-cifra);
}

.socios-cifra__textos {
    display: grid;
    min-width: 0;
}

.socios-cifra__textos strong {
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.socios-cifra__textos span {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}
/* #endregion */

/* #region 2. «Les falta…» */
/* A cuántos socios de alta les falta cada cosa: una franja ámbar; al pulsar, solo esos. */
.faltan-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid color-mix(in srgb, var(--rs-aviso) 30%, var(--rs-borde));
    border-left: 3px solid var(--rs-aviso);
    border-radius: var(--radio-lg);
    background: color-mix(in srgb, var(--rs-aviso) 6%, var(--rs-superficie-1));
}

:root[data-theme="light"] .faltan-lista {
    background: color-mix(in srgb, var(--rs-aviso) 5%, #FFFFFF);
}

.faltan-lista__titulo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: var(--espacio-2);
    color: var(--rs-aviso-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 700;
}

.faltan-lista__titulo .icono {
    width: 16px;
    height: 16px;
}

.falta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 var(--espacio-1) 0 var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-1);
    color: var(--rs-texto-secundario);
    font: inherit;
    font-size: var(--texto-etiqueta);
    cursor: pointer;
    transition: border-color var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva);
}

.falta-chip .icono {
    width: 14px;
    height: 14px;
}

.falta-chip strong {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--radio-pildora);
    background: color-mix(in srgb, var(--rs-aviso) 18%, transparent);
    color: var(--rs-aviso-texto);
    font-variant-numeric: tabular-nums;
}

.falta-chip:hover,
.falta-chip[aria-pressed="true"] {
    border-color: var(--rs-aviso);
    color: var(--rs-texto);
}

.falta-chip[aria-pressed="true"] {
    background: color-mix(in srgb, var(--rs-aviso) 12%, var(--rs-superficie-1));
}

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

/* Las cuatro primeras a la vista; el resto, tras «+N más» (2 nov 2026), seguido en la misma franja. */
.faltan-lista__resto {
    display: contents;
}

.faltan-lista__resto[hidden] {
    display: none;
}

.faltan-lista__mas {
    color: var(--rs-aviso-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}
/* #endregion */

/* #region 3. La tarjeta de la lista: búsqueda, filtros y la barra de encima */
.socios-lista {
    display: grid;
    gap: var(--espacio-4);
}

/* La búsqueda ocupa lo que sobra; los desplegables, a su lado. */
.app-panel .socios-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.socios-filtros .campo {
    margin: 0;
}

/* El buscador cede sitio para que el tipo, las etiquetas y «Tienen pendiente» quepan en la misma fila
   (pisa la regla común de .eventos-filtros, gestion.css). */
.socios-filtros .campo.socios-filtros__buscar:has(input[type="search"]) {
    flex: 2 1 12rem;
}

.socios-filtros select {
    width: auto;
    min-width: 11rem;
}

/* Cuántos hay a la izquierda; las columnas y descargar, a la derecha. */
.socios-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
    padding-bottom: var(--espacio-3);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

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

/* Lo que está filtrando, al lado del total: una pastilla por filtro en el color de la asociación, con su ✕. */
.socios-filtros-puestos {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.socios-filtro-puesto {
    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-size: var(--texto-etiqueta);
    font-weight: 600;
    cursor: pointer;
}

.socios-filtro-puesto .icono {
    width: 14px;
    height: 14px;
}

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

.socios-filtro-puesto:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.socios-barra .informe-exportar {
    margin: 0;
}
/* #endregion */

/* #region 4. Las etiquetas: el filtro, su botón y su ventana */
/* El desplegable y, pegado a él, el engranaje que abre la ventana (o «Crear etiquetas» si no hay ninguna). */
.socios-etiquetas {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.socios-etiquetas[hidden],
.socios-etiquetas .campo[hidden] {
    display: none;
}

.socios-etiquetas__gestionar {
    flex: none;
}

/* Añadir una: su color en un punto, el nombre a lo ancho y «Añadir». */
.etiquetas-nueva {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

/* Sin el ancho completo de los campos de base.css: así el color y el nombre van siempre en la misma línea. */
.etiquetas-nueva input[type="text"] {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* Un selector de color redondo, al añadir y en cada fila. */
.etiquetas-nueva input[type="color"],
.etiquetas-fila input[type="color"] {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: 0 0 0 2px var(--rs-superficie-2), 0 0 0 3px var(--rs-borde);
    cursor: pointer;
    appearance: none;
}

.etiquetas-nueva input[type="color"]::-webkit-color-swatch-wrapper,
.etiquetas-fila input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.etiquetas-nueva input[type="color"]::-webkit-color-swatch,
.etiquetas-fila input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}

.etiquetas-nueva input[type="color"]::-moz-color-swatch,
.etiquetas-fila input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 50%;
}

.etiquetas-fila input[type="color"] {
    width: 1.5rem;
    height: 1.5rem;
}

/* La lista: una fila por etiqueta, separadas por una línea; parece una etiqueta, no un formulario. */
.etiquetas-lista {
    display: grid;
    max-height: min(22rem, 45dvh);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.etiquetas-lista[hidden] {
    display: none;
}

.etiquetas-fila {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-1);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.etiquetas-fila:last-child {
    border-bottom: 0;
}

.etiquetas-fila__textos {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

/* El nombre, como texto; al pasar o al tocarlo se ve que se puede cambiar. */
.app-panel .etiquetas-fila__nombre {
    min-width: 0;
    min-height: 36px;
    padding: 0 var(--espacio-2);
    border: 1px solid transparent;
    border-radius: var(--radio-sm);
    background: transparent;
    box-shadow: none;
    color: var(--rs-texto);
    font-weight: 600;
}

.app-panel .etiquetas-fila__nombre:hover {
    border-color: var(--rs-borde);
}

.app-panel .etiquetas-fila__nombre:focus {
    border-color: var(--marca-acento);
    background: var(--rs-superficie-1);
}

.app-panel .etiquetas-fila__nombre[aria-invalid="true"] {
    border-color: var(--rs-peligro);
}

.etiquetas-fila__nota,
.etiquetas-fila__error {
    padding-inline: var(--espacio-2);
    font-size: var(--texto-etiqueta);
}

.etiquetas-fila__nota {
    color: var(--rs-peligro);
}

.etiquetas-fila__error {
    color: var(--rs-peligro);
    font-weight: 600;
}

/* Cuántos socios la llevan, en una píldora en el color de la asociación; las nuevas, «Nueva» en verde. */
.etiquetas-fila__socios,
.etiquetas-fila__marca {
    flex: none;
    padding: 2px 10px;
    border-radius: var(--radio-pildora);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.etiquetas-fila__socios {
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
    color: var(--marca-acento);
}

.etiquetas-fila__marca {
    background: color-mix(in srgb, var(--rs-exito) 14%, transparent);
    color: var(--rs-exito);
}

/* La que se va a borrar al guardar: tachada y apagada, con «No borrarla» a mano. */
.etiquetas-fila--borrar .etiquetas-fila__nombre {
    text-decoration: line-through;
    opacity: 0.6;
}

.etiquetas-fila--borrar input[type="color"],
.etiquetas-fila--borrar .etiquetas-fila__socios {
    opacity: 0.45;
}

.etiquetas-vacio {
    margin: 0;
    padding: var(--espacio-4) 0;
}

.etiquetas-vacio[hidden] {
    display: none;
}

/* En el móvil, «Añadir» debajo, a lo ancho. */
@media (max-width: 767px) {
    .etiquetas-nueva {
        flex-wrap: wrap;
    }

    .etiquetas-nueva .boton {
        flex-basis: 100%;
        justify-content: center;
    }
}
/* #endregion */

/* #region 5. Los carnets sin imprimir: imprimirlos de una vez */
/* Con «Carnet sin imprimir» puesto: cuántos son y, a la derecha, cambiar el diseño e imprimirlos. */
.socios-carnets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid color-mix(in srgb, var(--marca-acento) 30%, var(--rs-borde));
    border-radius: var(--radio-lg);
    background: color-mix(in srgb, var(--marca-acento) 7%, var(--rs-superficie-1));
}

.socios-carnets[hidden] {
    display: none;
}

.socios-carnets__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tono-seccion, var(--marca-acento)) 16%, transparent);
    color: var(--tono-seccion, var(--marca-acento));
}

.socios-carnets__texto {
    flex: 1 1 16rem;
    margin: 0;
    font-weight: 600;
}

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

.socios-lista > #socios-aviso {
    margin: 0;
}

/* En el móvil, «Imprimir» a lo ancho, lo primero de las acciones. */
@media (max-width: 767px) {
    .socios-carnets__acciones {
        flex-basis: 100%;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .socios-carnets__acciones .boton {
        justify-content: center;
    }

    .socios-carnets__acciones .enlace-flecha {
        justify-content: center;
    }
}
/* #endregion */

/* #region 6. Las columnas que se ven */
.columnas-elegir {
    position: relative;
}

.columnas-elegir > summary {
    list-style: none;
}

.columnas-elegir > summary::-webkit-details-marker {
    display: none;
}

.columnas-elegir__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    gap: var(--espacio-2);
    min-width: 200px;
    margin: 0;
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-3);
    box-shadow: var(--sombra-lg);
}

.columnas-elegir__menu legend {
    float: left;
    width: 100%;
    margin-bottom: var(--espacio-1);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

/* Las columnas ocultas por cada uno. */
#tabla-socios.ocultar-numero .col-numero,
#tabla-socios.ocultar-dni .col-dni,
#tabla-socios.ocultar-edad .col-edad,
#tabla-socios.ocultar-antiguedad .col-antiguedad,
#tabla-socios.ocultar-contacto .col-contacto,
#tabla-socios.ocultar-registro .col-registro {
    display: none;
}
/* #endregion */

/* #region 7. Las filas: el socio, sus datos, «En la app» y abrir la ficha */
/* Celdas algo más juntas que en otras tablas: así caben en un portátil sin deslizarse. */
#tabla-socios th:not(.columna-casilla),
#tabla-socios td:not(.columna-casilla) {
    padding-inline: 10px;
}

/*
 * El socio: la foto y, a su lado, el nombre (con «De baja» o si no es
 * socio, solo cuando pasa) y debajo, en pequeño, su tipo con su punto de
 * color, su familia y sus etiquetas.
 */
.fila-socio__persona {
    min-width: 15rem;
}

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

.fila-socio__identidad .avatar-fila {
    width: 36px;
    height: 36px;
}

.fila-socio__textos {
    display: grid;
    gap: 3px;
    min-width: 0;
}

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

.app-panel .tabla-eventos td a.fila-socio__nombre {
    color: var(--rs-texto);
    font-weight: 600;
    white-space: nowrap;
}

.app-panel .tabla-eventos td a.fila-socio__nombre:hover {
    color: var(--marca-acento);
}

.fila-socio--baja .fila-socio__nombre {
    opacity: 0.7;
}

/* «De baja», «Acompañante»…: una pastilla pequeña junto al nombre, solo cuando pasa. */
.socio-marca {
    padding: 1px 8px;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    color: var(--rs-texto-secundario);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.socio-marca--baja {
    border-color: transparent;
    background: color-mix(in srgb, var(--rs-peligro) 14%, transparent);
    color: var(--rs-peligro-texto);
}

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

/* La familia, en su propia línea bajo el tipo (sin el margen que le da gestion.css en Deudores). */
#tabla-socios .fila-socio__secundaria .fila-socio__familia {
    flex-basis: 100%;
    margin: 0;
    font-size: inherit;
}

/* El número va en su columna; en el móvil, aquí (región 8). */
.fila-socio__numero-movil {
    display: none;
}

.fila-socio__etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
}

/* Cada etiqueta, más pequeña que en la ficha. */
.etiqueta-libre--pequena {
    padding: 0 8px;
    font-size: 0.7rem;
}

/* El tipo, con su punto de color (el de su carnet): el mismo que en las cifras y en «Tipos de socio». */
.socio-tipo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.socio-tipo__punto {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tono-tipo);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rs-texto) 22%, transparent);
}

.fila-socio__tipo .dato-editable > span {
    overflow: visible;
}

/* El lápiz del tipo solo ocupa sitio al pasar: si no, deja un hueco antes de la familia. */
.fila-socio__tipo .dato-editable {
    gap: 0;
}

.fila-socio__tipo .dato-editable .icono {
    width: 0;
}

.fila-socio__tipo .dato-editable:is(:hover, :focus-visible) .icono {
    width: 13px;
    margin-left: 6px;
}

.fila-socio__edad,
.fila-socio__antiguedad {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* La fecha entera, debajo de los años (25 oct 2026). */
.fila-socio__fecha {
    display: block;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.celda-contacto {
    display: grid;
    justify-items: start;
    gap: 2px;
    max-width: 15rem;
}

/*
 * «En la app»: la fecha en que entró con su marca verde; si no ha entrado,
 * «Invitar» (le llega por correo su enlace de alta) o, si ya se le invitó,
 * cuándo y «Reenviar», más discreto.
 */
.fila-socio__registro {
    white-space: nowrap;
}

.registro-fecha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.registro-fecha .icono {
    width: 14px;
    height: 14px;
    color: var(--rs-exito);
}

.registro-invitar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: -6px;
    padding: 2px 6px;
    border: 0;
    border-radius: var(--radio-sm);
    background: none;
    color: var(--marca-acento);
    font: inherit;
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duracion-hover) var(--curva);
}

.registro-invitar .icono {
    width: 13px;
    height: 13px;
}

/* El fondo, solo al pasar el ratón: la columna no grita, pero se ve que se puede tocar. */
.registro-invitar:hover {
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
}

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

.registro-invitar:disabled {
    opacity: 0.5;
    cursor: wait;
}

.registro-invitado {
    display: inline-grid;
    justify-items: start;
    gap: 2px;
}

.registro-invitado__cuando {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

/* «Reenviar»: ya se le invitó, así que sin fondo ni borde, solo el texto en el color de la asociación. */
.registro-invitar--otra-vez {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
}

.registro-invitar--otra-vez:hover {
    background: none;
    color: color-mix(in srgb, var(--marca-acento) 80%, var(--rs-texto));
}

/* Abrir la ficha: una flecha al final de la fila. */
#tabla-socios .fila-socio__abrir,
#tabla-socios thead th:last-child {
    width: 1%;
    padding-inline: 0 var(--espacio-1);
    text-align: right;
}

.fila-socio__abrir a {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--rs-texto-tenue);
    transition: background-color var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva);
}

.fila-socio:hover .fila-socio__abrir a,
.fila-socio__abrir a:focus-visible {
    background: color-mix(in srgb, var(--marca-acento) 12%, transparent);
    color: var(--marca-acento);
}

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

/* #region 8. Editar un dato en la propia lista */
/* Un dato que se cambia ahí mismo: parece texto, y al pasar sale el lápiz. */
.dato-editable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: -3px -6px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: var(--radio-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: text;
}

.dato-editable > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dato-editable .icono {
    flex: none;
    width: 13px;
    height: 13px;
    opacity: 0;
    color: var(--rs-texto-tenue);
    transition: opacity var(--duracion-hover) var(--curva);
}

.dato-editable:hover,
.dato-editable:focus-visible {
    border-color: var(--rs-borde);
    background: color-mix(in srgb, var(--rs-texto) 4%, transparent);
    outline: none;
}

.dato-editable:hover .icono,
.dato-editable:focus-visible .icono {
    opacity: 1;
}

.dato-editable--vacio {
    color: var(--rs-texto-tenue);
}

/* Recién guardado: un momento en verde. */
.dato-editable--guardado {
    animation: dato-guardado 1.4s var(--curva);
}

@keyframes dato-guardado {
    0%, 40% {
        border-color: var(--rs-exito);
        background: color-mix(in srgb, var(--rs-exito) 14%, transparent);
    }
}

.edicion-celda {
    display: grid;
    gap: var(--espacio-1);
    min-width: 150px;
}

.edicion-celda input,
.edicion-celda select {
    min-height: 32px;
    padding: var(--espacio-1) var(--espacio-2);
    font-size: var(--texto-etiqueta);
}

.edicion-celda__aviso {
    max-width: 240px;
    color: var(--rs-peligro);
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
    .dato-editable--guardado {
        animation: none;
    }
}
/* #endregion */

/* #region 9. La paginación */
/* «del 1 al 20 de 58», los pasos y cuántos por página. */
.paginacion--con-rango {
    flex-wrap: wrap;
    justify-content: space-between;
}

.paginacion__rango {
    font-variant-numeric: tabular-nums;
}

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

.paginacion__por-pagina {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    font-size: var(--texto-etiqueta);
}

.paginacion__por-pagina select {
    width: auto;
    min-height: 34px;
    padding-block: 0;
}
/* #endregion */

/* #region 10. Móvil: cada socio en una ficha corta */
/*
 * La casilla, la foto y el nombre grandes, con «Nº 112 · Llanero adulto»
 * debajo (y «De baja» junto al nombre si lo está); si hay que invitarle a
 * la app, el botón debajo.
 * Sin las columnas largas ni el menú de columnas, para llegar antes a la
 * lista. Los tipos de arriba sí: son el único sitio donde se filtra por tipo.
 */
@media (max-width: 767px) {
    /* Las tres cifras en una fila, sin su icono (ya las distingue su color), para llegar antes a la lista. */
    .socios-cifras__generales {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: var(--espacio-2);
    }

    .socios-cifra {
        align-items: flex-start;
        padding: var(--espacio-3);
    }

    .socios-cifra__icono {
        display: none;
    }

    .socios-cifra__textos span {
        line-height: 1.25;
    }

    .socios-cifra__textos strong {
        font-size: 1.25rem;
    }

    .columnas-elegir {
        display: none;
    }

    .socios-filtros select {
        flex: 1;
        min-width: 0;
    }

    /* Cuántos hay en una línea y descargar, en la siguiente: solo los tres botones (con su icono ya se entiende). */
    .socios-barra .informe-exportar {
        flex-basis: 100%;
        justify-content: flex-start;
    }

    .socios-barra .informe-exportar > span {
        display: none;
    }

    #tabla-socios tr.fila-socio {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--espacio-2) var(--espacio-3);
        padding: var(--espacio-3) 0 var(--espacio-3) 40px;
    }

    #tabla-socios tr.fila-socio > td {
        width: auto;
        padding: 0 !important;
        background: transparent !important;
    }

    #tabla-socios tr.fila-socio > td::before {
        content: none !important;
    }

    #tabla-socios .fila-socio__numero,
    #tabla-socios .fila-socio__dni,
    #tabla-socios .fila-socio__edad,
    #tabla-socios .fila-socio__antiguedad,
    #tabla-socios .fila-socio__contacto,
    #tabla-socios .fila-socio__abrir {
        display: none !important;
    }

    #tabla-socios .fila-socio__persona {
        display: block !important;
        flex: 1 1 100%;
        min-width: 0;
    }

    #tabla-socios .fila-socio__identidad {
        align-items: flex-start;
    }

    #tabla-socios .fila-socio__identidad .avatar-fila {
        width: 40px;
        height: 40px;
    }

    #tabla-socios .fila-socio__nombre {
        font-size: 1.0625rem;
        white-space: normal;
    }

    /* «Nº 112 · Llanero adulto»: el número, aquí, delante del tipo. */
    #tabla-socios .fila-socio__numero-movil {
        display: inline;
    }

    #tabla-socios .fila-socio__numero-movil::after {
        content: "·";
        margin-left: var(--espacio-2);
        color: var(--rs-texto-tenue);
    }

    /* «En la app»: solo si hay que invitarle (la fecha no hace falta en la ficha corta). */
    #tabla-socios .fila-socio__registro {
        display: none !important;
    }

    #tabla-socios tr.fila-socio > td.fila-socio__registro:has(button) {
        display: block !important;
        flex-basis: 100%;
        padding-left: 52px !important;
    }

    #tabla-socios .registro-invitado {
        display: inline-flex;
        align-items: center;
        gap: var(--espacio-3);
    }
}
/* #endregion */

/* #region 11. El «⋯» de cada fila: dar de baja, volver a dar de alta o borrar (9 nov 2026) */
#tabla-socios .fila-socio__abrir {
    white-space: nowrap;
}

/* Fuera del recorte de la tabla (que se desliza de lado): socios.js lo pega a su botón. */
.socios-mas {
    display: inline-block;
    vertical-align: middle;
}

.socios-mas .menu-desplegable__panel {
    position: fixed;
    min-width: 15rem;
    text-align: left;
    white-space: normal;
}

@media (max-width: 767px) {
    /* En el móvil, arriba a la derecha de cada socio (la flecha de abrir no hace falta: se entra por el nombre). */
    #tabla-socios tr.fila-socio {
        position: relative;
    }

    #tabla-socios tr.fila-socio:has(.socios-mas) {
        padding-right: 40px;
    }

    #tabla-socios tr.fila-socio > td.fila-socio__abrir:has(.socios-mas) {
        display: block !important;
        position: absolute;
        top: var(--espacio-3);
        right: 0;
    }

    #tabla-socios td.fila-socio__abrir > a {
        display: none;
    }
}
/* #endregion */