/* EL CLUB DE FIDELIZACIÓN EN LA CENTRAL (F1-T12 y F1-T13 de docs/central/plan-fidelizacion-2026-10-24.md; bocetos aprobados en
   reports/central/bocetos-club-2026-10-24/central/ y, la F2, en reports/central/bocetos-club-f2-2026-10-25/central/). Las pantallas de /admin/fidelizacion: la fila de pestañas del área, las zonas
   de la ficha del programa (Marca con su vista previa en vivo), las tablas (tarjetas por debajo de 720 px), el panel del socio y el pie
   de «Guardar». Solo fichas --limpia-*: el claro y el oscuro salen solos de hoja-limpia.css. La VISTA PREVIA de la marca es la
   excepción a propósito: pinta con las variables --club-* de la marca del hostelero, como el microsite. Los campos los mide densidad.css
   (40 px, etiqueta de 12 px encima; 44 px en el teléfono). */

/* ---- El área: la fila de pestañas debajo de la cabecera ----------------------------------------------------------------- */
.club-area { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--limpia-borde); margin: 0 0 16px; scrollbar-width: thin; }
.club-area-pestana {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; white-space: nowrap; text-decoration: none;
    color: var(--limpia-tinta-2); font-size: .875rem; font-weight: 520; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.club-area-pestana:hover { color: var(--limpia-tinta); background: var(--limpia-hover); }
.club-area-pestana[aria-current="page"] { color: var(--limpia-morado); border-bottom-color: var(--limpia-morado); font-weight: 600; }

/* ---- Pestañas, segmentos y marcas de fase --------------------------------------------------------------------------------- */
.club-pestanas { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--limpia-borde); margin: 0 0 16px; }
.club-pestana {
    min-height: 40px; padding: 0 14px; border: 0; background: none; cursor: pointer; white-space: nowrap; font: inherit; font-size: .875rem;
    color: var(--limpia-tinta-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.club-pestana[aria-selected="true"] { color: var(--limpia-morado); border-bottom-color: var(--limpia-morado); font-weight: 600; }
.club-pestanas-panel { margin: 4px 0 12px; }
/* Las cinco pestañas de la ficha del socio (F2: Regalos y Recargas) caben en el panel de 440 px. */
.club-pestanas-panel .club-pestana { padding: 0 8px; font-size: .84rem; }
.club-cuenta { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: var(--limpia-neutro-fondo); color: var(--limpia-neutro-tinta); font-size: .75rem; }
.club-segmentos { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--limpia-radio-control); background: var(--limpia-neutro-fondo); flex-wrap: wrap; }
.club-segmento {
    min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: inherit; font-size: .8125rem;
    color: var(--limpia-tinta-2); display: inline-flex; align-items: center; gap: 6px;
}
.club-segmento[aria-checked="true"], .club-segmento[aria-selected="true"] { background: var(--limpia-hoja); color: var(--limpia-tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-weight: 560; }
.club-segmento:disabled { cursor: default; opacity: .7; }
.club-fase { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--limpia-aviso-fondo); color: var(--limpia-aviso-tinta); font-size: .6875rem; font-weight: 700; }

/* ---- Zonas, rejillas y campos -------------------------------------------------------------------------------------------- */
.club-cuerpo { padding-bottom: 72px; }
.club-zona { background: var(--limpia-hoja); border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio); min-width: 0; }
.club-zona-titulo { margin: 0; padding: 12px 16px; font-size: .9375rem; font-weight: 600; color: var(--limpia-tinta); border-bottom: 1px solid var(--limpia-borde-fino); }
.club-zona-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--limpia-borde-fino); }
.club-zona-cabecera .club-zona-titulo { border-bottom: 0; }
.club-zona-cuerpo { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.club-zona > p, .club-zona > a, .club-zona > ol { margin: 12px 16px; }
.club-rejilla { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px) { .club-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .club-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } .club-rejilla-ancha { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.club-campos { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .club-campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .club-campos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* En el lateral estrecho (Nueva campaña, ~280 px) dos fechas de lado cortaban el año («05/11/202»): una debajo de otra cuando
   la columna no da para 2 × 150 px, aunque la pantalla sea ancha. */
.club-lateral .club-campos-2 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Una fila de campos que ocupa las dos columnas de la rejilla de su zona (ficha del evento: fecha, hora y hasta; 1.0.131). */
.club-campos-fila { grid-column: 1 / -1; }
.club-etiqueta { display: block; font-size: .75rem; font-weight: 600; color: var(--limpia-tinta-2); margin-bottom: 4px; }
.club-ayuda { margin: 0; color: var(--limpia-tinta-3); font-size: .8125rem; line-height: 1.45; }
.club-nota { margin: 0; padding: 8px 12px; border-radius: var(--limpia-radio-control); font-size: .8125rem; line-height: 1.45; }
.club-nota-info { background: var(--limpia-morado-aguada); color: var(--limpia-tinta); }
.club-nota-aviso { background: var(--limpia-aviso-fondo); color: var(--limpia-aviso-tinta); }
.club-nuevo { max-width: 720px; }
.club-acciones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* Las acciones de UNA FILA de una tabla (Tarjetas de empleado, T11 de la F1): en el escritorio, en una línea y discretas (36 px), sin que la
   celda las apile y doble el alto de la fila; en el teléfono (la tabla pasa a tarjetas), 44 px de objetivo y saltan de línea si no caben. */
.club-celda-acciones { white-space: nowrap; width: 1%; }
.club-acciones-fila { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; }
.club-acciones-fila .mud-button-root { min-height: 36px; white-space: nowrap; }
@media (max-width: 719px) {
    .club-celda-acciones { white-space: normal; width: auto; }
    .club-acciones-fila { flex-wrap: wrap; }
    .club-acciones-fila .mud-button-root { min-height: 44px; }
}
.club-subtitulo { margin: 16px 0 6px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--limpia-tinta-3); }
.club-marca-pequena { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--limpia-neutro-fondo); color: var(--limpia-neutro-tinta); font-size: .6875rem; }
.club-nowrap { white-space: nowrap; }
.club-mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .8125rem; }
.club-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.club-derecha { text-align: right; }
.club-positivo { color: var(--limpia-bien-tinta); }
.club-enlace { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--limpia-morado); font-weight: 560; text-align: left; }
.club-lista { margin: 12px 16px; padding-left: 18px; font-size: .875rem; color: var(--limpia-tinta); line-height: 1.5; }

/* ---- El pie de «Guardar» ------------------------------------------------------------------------------------------------- */
.club-pie {
    position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 10px 16px;
    background: var(--limpia-hoja); border-top: 1px solid var(--limpia-borde);
}
.club-pie-cambios { flex: 1 1 auto; min-width: 0; color: var(--limpia-tinta-2); font-size: .875rem; overflow-wrap: anywhere; }

/* ---- Marca: tres zonas, imágenes, recorte, colores ------------------------------------------------------------------------ */
.club-marca { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .club-marca { grid-template-columns: repeat(2, minmax(0, 1fr)); } .club-zona-previa { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .club-marca { grid-template-columns: repeat(3, minmax(0, 1fr)); } .club-zona-previa { grid-column: auto; } }
.club-imagen-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.club-imagen-texto { flex: 1 1 180px; }
.club-miniatura { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio-control); background: #fff; overflow: hidden; }
.club-miniatura img { max-width: 100%; max-height: 100%; object-fit: contain; }
.club-miniatura-logo { width: 150px; height: 52px; padding: 6px; }
.club-miniatura-oscura { background: #17171c; border-color: #17171c; }
.club-miniatura-icono { width: 40px; height: 40px; border-radius: 10px; }
.club-miniatura-vacia { color: var(--limpia-tinta-3); font-size: .75rem; }
.club-miniatura-oscura .club-miniatura-vacia { color: #b9b9c6; }
.club-boton-imagen {
    position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control); background: var(--limpia-hoja); color: var(--limpia-tinta); font-size: .875rem; cursor: pointer;
}
.club-boton-imagen:focus-within { outline: 2px solid var(--limpia-morado); outline-offset: 2px; }
.club-boton-imagen-apagado { opacity: .6; cursor: default; }
.club-fichero { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.club-recorte {
    position: relative; aspect-ratio: 1125 / 432; border-radius: var(--limpia-radio-control); overflow: hidden; background-color: var(--limpia-neutro-fondo);
    background-repeat: no-repeat;
}
.club-recorte-marco { position: absolute; inset: 6%; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); }
.club-recorte-franja { position: absolute; left: 14%; right: 14%; top: 22%; bottom: 22%; border: 2px dashed #e8b84a; border-radius: 3px; }
.club-recorte-rotulo { position: absolute; left: 4px; top: 4px; padding: 1px 5px; border-radius: 3px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .6875rem; }
.club-recorte-franja .club-recorte-rotulo { top: auto; bottom: 4px; background: #e8b84a; color: #2b1f00; }
.club-recorte-vacio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--limpia-tinta-3); font-size: .8125rem; }
.club-recorte-mandos { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: .75rem; color: var(--limpia-tinta-2); }
.club-recorte-mandos label { display: flex; flex-direction: column; gap: 2px; }
.club-recorte-mandos input { width: 100%; min-height: 32px; accent-color: var(--limpia-morado); }
.club-color-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.club-color-caja { display: flex; align-items: center; gap: 6px; flex: 0 1 200px; }
.club-color-muestra { flex: none; width: 36px; height: 36px; padding: 2px; border: 1px solid var(--limpia-borde-control); border-radius: var(--limpia-radio-control); background: var(--limpia-hoja); cursor: pointer; }
.club-color-hex { flex: 1 1 auto; min-width: 7.5rem; margin: 0 !important; }
.club-contraste { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; font-size: .8125rem; }
.club-contraste-bien { background: var(--limpia-bien-fondo); color: var(--limpia-bien-tinta); }
.club-contraste-aviso { background: var(--limpia-aviso-fondo); color: var(--limpia-aviso-tinta); }
.club-contraste-muestra { display: inline-block; padding: 1px 6px; border-radius: 4px; font-weight: 700; font-size: .75rem; border: 1px solid rgba(0, 0, 0, .08); }
.club-chip-color { display: inline-block; width: 16px; height: 16px; border-radius: 4px; vertical-align: middle; }
.club-oscuro-a-mano { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px dashed var(--limpia-borde); }

/* ---- La vista previa (pinta con la marca del hostelero: --club-*) --------------------------------------------------------- */
.club-previa { display: flex; flex-direction: column; min-width: 0; }
.club-previa-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--limpia-borde-fino); }
.club-previa-rotulo { font-weight: 600; font-size: .9375rem; margin-right: auto; }
.club-previa-lienzo {
    display: flex; justify-content: center; padding: 16px 12px; min-height: 520px;
    background: repeating-linear-gradient(135deg, var(--limpia-papel), var(--limpia-papel) 8px, var(--limpia-hoja) 8px, var(--limpia-hoja) 16px);
}
.club-telefono {
    width: min(100%, 320px); border: 6px solid #111; border-radius: 28px; overflow: hidden; background: var(--club-fondo); color: var(--club-texto);
    font-size: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); align-self: flex-start;
}
.club-micro-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--club-superficie); }
.club-micro-logo img { max-height: 30px; max-width: 150px; display: block; }
.club-micro-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--club-principal); color: var(--club-texto-principal); font-weight: 700; }
.club-micro-portada { height: 118px; background-color: var(--club-principal); background-size: cover; background-position: center; background-repeat: no-repeat; }
.club-micro-tarjeta { margin: -46px 12px 10px; position: relative; padding: 12px; border-radius: 14px; background: var(--club-tarjeta); color: var(--club-texto-tarjeta); }
.club-micro-hola { font-size: 11px; opacity: .85; }
.club-micro-saldo strong { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-right: 4px; }
.club-micro-valor { font-size: 11px; opacity: .9; margin-bottom: 8px; }
.club-micro-qr { display: flex; gap: 10px; align-items: center; }
.club-micro-qr .club-qr { width: 92px; height: 92px; padding: 4px; background: #fff; border-radius: 8px; flex: none; }
.club-micro-qr strong { display: block; font-family: ui-monospace, monospace; font-size: 15px; letter-spacing: .08em; }
.club-micro-qr small { display: block; font-size: 10px; opacity: .85; }
.club-micro-cuenta { display: block; height: 4px; width: 90px; margin-top: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.club-micro-cuenta span { display: block; width: 70%; height: 100%; background: var(--club-acento); }
.club-micro-aviso, .club-micro-movimiento { margin: 0 12px 8px; padding: 8px 10px; border-radius: 10px; background: var(--club-superficie); border: 1px solid rgba(127, 127, 127, .18); }
.club-micro-aviso strong, .club-micro-aviso small { display: block; }
.club-micro-aviso small { opacity: .7; font-size: 10px; }
.club-micro-movimiento { display: flex; justify-content: space-between; align-items: center; }
.club-micro-movimiento small { display: block; opacity: .65; font-size: 10px; }
.club-micro-movimiento b { color: var(--club-acento); }
.club-placa { background: #fff; border-radius: 8px; padding: 3px 6px; }
.club-logo-texto { font-weight: 700; font-size: 14px; color: inherit; }
.club-qr { display: block; }
.club-correo { width: min(100%, 420px); background: #fff; color: #222; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); align-self: flex-start; font-size: 12px; }
.club-correo-cabecera { padding: 10px 12px; border-bottom: 1px solid #eee; color: #555; }
.club-correo-portada { height: 120px; background-color: var(--club-principal); background-size: cover; background-position: center; background-repeat: no-repeat; }
.club-correo-cuerpo { padding: 0 16px 14px; }
.club-correo-logo { display: inline-block; margin-top: -20px; padding: 6px 10px; background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.club-correo-logo img { max-height: 26px; display: block; }
.club-correo-cuerpo h3 { margin: 10px 0 4px; font-size: 16px; }
.club-correo-puntos { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: var(--club-acento); }
.club-correo-boton { display: inline-block; margin: 6px 0; padding: 9px 14px; border-radius: 8px; background: var(--club-principal); color: var(--club-texto-principal); font-weight: 600; }
.club-correo-nota { color: #777; font-size: 11px; }
.club-correo-pie { padding: 10px 16px; background: #f4f4f6; color: #666; font-size: 10px; }
.club-pase { width: min(100%, 300px); border-radius: 14px; overflow: hidden; background: var(--club-tarjeta); color: var(--club-texto-tarjeta); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); align-self: flex-start; font-size: 12px; }
.club-pase-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.club-pase-logo img { max-height: 24px; max-width: 130px; display: block; }
.club-pase-franja { height: 98px; background-color: var(--club-principal); background-size: cover; background-position: center; background-repeat: no-repeat; }
.club-pase-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; }
.club-pase-cifras small { display: block; font-size: 9px; letter-spacing: .06em; opacity: .8; }
.club-pase-cifras strong { font-size: 18px; font-weight: 500; }
.club-pase-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 14px; font-family: ui-monospace, monospace; font-weight: 700; }
.club-pase-qr .club-qr { width: 110px; height: 110px; padding: 6px; background: #fff; border-radius: 8px; }

/* ---- Tablas (tarjetas en el teléfono) ------------------------------------------------------------------------------------- */
.club-tabla-caja { background: var(--limpia-hoja); border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio); overflow-x: auto; }
/* F3-T5: los socios por nivel del informe, una tabla pequeña bajo las cifras. */
.club-tabla-pequena { max-width: 360px; margin-bottom: 12px; }
.club-tabla { width: 100%; border-collapse: collapse; font-size: .875rem; color: var(--limpia-tinta); }
.club-tabla th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--limpia-tinta-3); padding: 10px 12px; border-bottom: 1px solid var(--limpia-borde); white-space: nowrap; }
.club-tabla td { padding: 8px 12px; border-bottom: 1px solid var(--limpia-borde-fino); vertical-align: middle; }
.club-tabla tbody tr:last-child td { border-bottom: 0; }
.club-tabla-densa td { padding: 6px 8px; }
.club-tabla-enlaces tbody tr { cursor: pointer; }
.club-tabla-enlaces tbody tr:hover { background: var(--limpia-hover); }
.club-fila-activa { background: var(--limpia-morado-aguada) !important; }
.club-fila-apagada { color: var(--limpia-tinta-3); }
.club-tabla a { color: var(--limpia-morado); font-weight: 560; text-decoration: none; }
.club-aviso-fila { margin-top: 4px; font-size: .75rem; color: var(--limpia-aviso-tinta); max-width: 34ch; }
.club-local { display: inline-flex; align-items: center; gap: 8px; font-weight: 560; }
.club-iniciales { width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .75rem; font-weight: 700; flex: none; }
.club-ejemplo { width: 100%; border-collapse: collapse; font-size: .875rem; }
.club-ejemplo td { padding: 6px 4px; border-bottom: 1px solid var(--limpia-borde-fino); }
.club-ejemplo td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 719px) {
    .club-tabla thead { display: none; }
    .club-tabla, .club-tabla tbody, .club-tabla tr, .club-tabla td { display: block; width: 100%; }
    .club-tabla tr { padding: 8px 12px; border-bottom: 1px solid var(--limpia-borde); }
    .club-tabla td { border: 0; padding: 3px 0; text-align: left !important; }
    .club-tabla td[data-titulo]::before { content: attr(data-titulo) " · "; color: var(--limpia-tinta-3); font-size: .75rem; }
    .club-tabla td:first-child::before { content: none; }
    .club-tabla td:first-child { font-weight: 600; }
    .club-tabla-densa td::before { content: none; }
}

/* ---- Locales: tabla y columna de ayuda ------------------------------------------------------------------------------------ */
.club-con-lateral { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .club-con-lateral { grid-template-columns: minmax(0, 1fr) 300px; } }
.club-lateral { display: flex; flex-direction: column; gap: 12px; }

/* ---- Socios: filtros, paginación y panel ---------------------------------------------------------------------------------- */
.club-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.club-buscador { flex: 1 1 240px; max-width: 320px; }
.club-pastilla, .club-filtros .mud-menu .club-pastilla {
    min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--limpia-neutro-fondo); color: var(--limpia-tinta-2);
    font: inherit; font-size: .8125rem; cursor: pointer; text-transform: none;
}
.club-filtros .mud-menu.club-pastilla > .mud-button-root { min-height: 32px; text-transform: none; color: inherit; font-size: .8125rem; padding: 0 8px; }
/* Marcada, en morado lleno como el segmento elegido (2026-11-04): con la aguada (#efe7f6) contra el neutro (#efeaf5) no se veía
   la diferencia, y en «Nueva campaña» los siete días venían marcados sin parecerlo; al pulsar uno para «elegirlo» se desmarcaba. */
.club-pastilla-activa, .club-pastilla[aria-pressed="true"] { background: var(--limpia-morado); color: var(--limpia-sobre-morado); font-weight: 600; }
.club-paginas { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.club-paginas .club-ayuda { margin-right: auto; }
.club-socio-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.club-telefono-socio { font-family: ui-monospace, monospace; font-size: .8125rem; }
.club-saldos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.club-saldo { padding: 10px 12px; border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio-control); display: flex; flex-direction: column; gap: 2px; }
.club-saldo strong { font-size: 1.75rem; font-weight: 500; letter-spacing: -.01em; }
.club-saldo-rotulo { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--limpia-tinta-3); }
.club-saldo-deuda { background: var(--limpia-error-fondo); border-color: transparent; color: var(--limpia-error-tinta); }
.club-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; font-size: .875rem; }
.club-datos dt { color: var(--limpia-tinta-3); }
.club-datos dd { margin: 0; overflow-wrap: anywhere; }
.club-ajuste { margin-bottom: 12px; padding: 12px; border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio-control); background: var(--limpia-cabecera); display: flex; flex-direction: column; gap: 10px; }

/* ---- Conciliación, cifras de informes, periodo ---------------------------------------------------------------------------- */
.club-verificacion { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--limpia-radio-control); background: var(--limpia-bien-fondo); color: var(--limpia-bien-tinta); font-size: .875rem; }
.club-verificacion-mal { background: var(--limpia-error-fondo); color: var(--limpia-error-tinta); }
.club-cifras { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
@media (min-width: 720px) { .club-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.club-cifra { padding: 10px 14px; background: var(--limpia-hoja); border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio-control); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.club-cifra span { font-size: .75rem; color: var(--limpia-tinta-3); }
.club-cifra strong { font-size: 1.375rem; font-weight: 560; font-variant-numeric: tabular-nums; }
.club-cifra small { font-size: .75rem; color: var(--limpia-tinta-2); overflow-wrap: anywhere; }
.club-periodo { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.club-periodo-fecha { max-width: 11rem; }
.club-tasa { margin-bottom: 16px; }
.club-ficha { display: flex; flex-direction: column; gap: 12px; padding-bottom: 72px; max-width: 900px; }

/* ---- La F2 (bocetos aprobados del 2026-10-25): compra, regalos y SMS, recompensas, regalos, recargas, pasivo y alertas ----------- */
.club-kvs { display: flex; flex-direction: column; }
.club-kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--limpia-borde-fino); font-size: .875rem; }
.club-kvs .club-kv:first-child, .club-zona-cuerpo > .club-kv:first-child { border-top: 0; }
.club-kv strong { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.club-interruptor { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: .875rem; color: var(--limpia-tinta); }
.club-interruptor > span { flex: 1 1 auto; min-width: 0; }
.club-interruptor small { display: block; font-size: .78rem; color: var(--limpia-tinta-3); }
.club-interruptor .mud-switch, .club-zona-cabecera .mud-switch { margin: 0; }
.club-zona-cabecera .mud-input-control { width: auto; }
@media (min-width: 1280px) { .club-zona-doble { grid-column: span 2; } }
.club-sms { padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--limpia-neutro-fondo); color: var(--limpia-tinta); font-size: .84rem; line-height: 1.4; overflow-wrap: anywhere; }
.club-sms small { display: block; margin-bottom: 4px; font-size: .72rem; font-weight: 700; color: var(--limpia-tinta-3); }
.club-solo-telefono { display: none; }
@media (max-width: 719px) { .club-solo-escritorio { display: none; } .club-solo-telefono { display: flex; } }
.club-titulo-seccion { margin: 20px 0 10px; font-size: .9375rem; font-weight: 600; color: var(--limpia-tinta); }
.club-bajo { display: block; font-size: .75rem; color: var(--limpia-tinta-3); font-weight: 500; }
.club-tabla-suelta td { padding: 7px 12px; line-height: 1.3; }
.club-ayuda-pie { margin-top: 10px; }

/* Las listas de Regalos y Recargas en el teléfono: tarjetas compactas (el boceto) en vez de la tabla hecha tarjetas. */
.club-tarjetas { flex-direction: column; gap: 8px; }
.club-tarjeta { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; background: var(--limpia-hoja); border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio); color: var(--limpia-tinta); font: inherit; text-align: left; width: 100%; }
.club-tarjeta-boton { cursor: pointer; }
.club-tarjeta-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .84rem; }
.club-tarjeta-texto b { font-size: .9375rem; overflow-wrap: anywhere; }
.club-tarjeta-texto > span { color: var(--limpia-tinta-3); overflow-wrap: anywhere; }
.club-tarjeta-valor { font-weight: 700; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.club-tarjeta-valor small { display: block; font-weight: 500; font-size: .75rem; color: var(--limpia-tinta-3); }
@media (max-width: 600px) { .club-tarjeta .mud-button-root { min-height: 44px; } }

/* Recompensas: tarjetas (4 por fila en escritorio; filas de 64 px en el teléfono) y su ficha. */
.club-recompensas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.club-recompensa { display: flex; flex-direction: column; overflow: hidden; background: var(--limpia-hoja); border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio);
    color: var(--limpia-tinta); text-decoration: none; min-width: 0; }
.club-recompensa:hover { border-color: var(--limpia-borde-control); }
.club-recompensa:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 2px; }
.club-recompensa-imagen { height: 112px; display: flex; align-items: center; justify-content: center; background: var(--limpia-neutro-fondo); overflow: hidden; }
.club-recompensa-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-recompensa-sin { font-size: 1.5rem; font-weight: 700; color: var(--limpia-neutro-tinta); letter-spacing: .04em; }
.club-recompensa-apagada .club-recompensa-imagen { filter: grayscale(1); opacity: .6; }
.club-recompensa-cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; min-width: 0; }
.club-recompensa-cuerpo b { font-size: .9375rem; overflow-wrap: anywhere; }
.club-recompensa-coste { font-size: 1.125rem; font-weight: 800; color: var(--limpia-morado); font-variant-numeric: tabular-nums; }
.club-recompensa-coste small { font-size: .75rem; font-weight: 600; }
.club-recompensa-linea { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .78rem; color: var(--limpia-tinta-3); flex-wrap: wrap; }
.club-recompensa-nueva { border-style: dashed; align-items: center; justify-content: center; min-height: 220px; color: var(--limpia-morado); font-weight: 700; }
@media (max-width: 719px) {
    .club-recompensas { grid-template-columns: 1fr; gap: 8px; }
    .club-recompensa { flex-direction: row; align-items: center; min-height: 64px; padding: 8px 10px; gap: 10px; }
    .club-recompensa-imagen { width: 48px; height: 48px; flex: none; border-radius: 10px; }
    .club-recompensa-sin { font-size: .875rem; }
    .club-recompensa-cuerpo { padding: 0; flex: 1 1 auto; }
    .club-recompensa-nueva { min-height: 52px; }
}
/* Orden de las recompensas arrastrando: una columna de filas con el asa, la imagen, el nombre y las flechas (las flechas son lo que sirve con teclado y con dedo). */
.club-orden { max-width: 720px; }
.club-orden-lista { display: flex; flex-direction: column; gap: 8px; min-height: 48px; }
.club-orden-fila { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 10px; background: var(--limpia-hoja); border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio); cursor: grab; min-width: 0; }
.club-orden-fila:hover { border-color: var(--limpia-borde-control); }
.club-orden-fila .club-recompensa-imagen { width: 48px; height: 48px; flex: none; border-radius: 10px; }
.club-orden-fila .club-recompensa-sin { font-size: .875rem; }
.club-orden-asa { display: inline-flex; flex: none; color: var(--limpia-tinta-3); }
.club-orden-texto { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.club-orden-texto b { font-size: .9375rem; overflow-wrap: anywhere; }
.club-orden-texto span { font-size: .78rem; color: var(--limpia-tinta-3); overflow-wrap: anywhere; }
.club-orden-flechas { display: inline-flex; flex: none; gap: 2px; }
@media (max-width: 719px) { .club-orden-flechas .mud-icon-button { width: 44px; height: 44px; } }
.club-ficha-recompensa { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; padding-bottom: 72px; }
@media (min-width: 1100px) { .club-ficha-recompensa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 360px; } }
.club-columna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 719px) {
    .club-ficha-recompensa .club-sec { display: none; }
    .club-ficha-recompensa.ver-recompensa .club-sec-recompensa, .club-ficha-recompensa.ver-cuenta .club-sec-cuenta,
    .club-ficha-recompensa.ver-donde .club-sec-donde, .club-ficha-recompensa.ver-previa .club-sec-previa { display: block; }
    .club-columna { gap: 12px; }
}
.club-campo-fijo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.club-recompensa-foto { width: 88px; height: 56px; flex: none; border-radius: var(--limpia-radio-control); overflow: hidden; display: inline-flex; align-items: center;
    justify-content: center; background: var(--limpia-neutro-fondo); color: var(--limpia-tinta-3); font-size: .75rem; }
.club-recompensa-foto img { width: 100%; height: 100%; object-fit: cover; }
.club-cuenta-ejemplo { border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio-control); padding: 4px 12px; }
.club-precio { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--limpia-borde-fino); font-size: .875rem; font-variant-numeric: tabular-nums; }
.club-precio:first-child { border-top: 0; }
.club-precio-club { color: var(--limpia-aviso-tinta); font-weight: 600; }
.club-precio-total { font-weight: 800; font-size: 1rem; }

/* Recargas: el panel con lo que pasó y lo que hizo la central. */
.club-pasos { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.club-paso { display: flex; gap: 10px; font-size: .84rem; padding: 6px 0; color: var(--limpia-tinta); }
.club-paso i { width: 10px; height: 10px; border-radius: 50%; background: var(--limpia-borde-control); margin-top: 4px; flex: none; }
.club-paso-bien i { background: var(--limpia-bien-tinta); }
.club-paso-mal i { background: var(--limpia-error-tinta); }
.club-lineas { display: flex; flex-direction: column; margin-bottom: 8px; }
.club-linea { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--limpia-borde-fino); font-size: .84rem; }
.club-linea:first-child { border-top: 0; }
.club-linea > span:first-child { flex: 1 1 auto; min-width: 0; }
.club-linea b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.club-linea b a { color: var(--limpia-morado); text-decoration: none; }
.club-linea small { display: block; font-size: .78rem; color: var(--limpia-tinta-3); }
.club-linea small .etiqueta { vertical-align: middle; }
.club-linea-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Pasivo: saldo comprado, traspasos y el medidor del 70 % del millón. */
.club-pasivo-f2 { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.club-pasivo-par { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .club-pasivo-par { grid-template-columns: minmax(0, 1fr) 360px; } }
.club-tabla-sin-borde { border: 0; border-radius: 0; }
.club-zona-nota { margin: 8px 16px 12px !important; }
.club-medidor { position: relative; height: 12px; border-radius: 6px; background: var(--limpia-neutro-fondo); overflow: visible; }
.club-medidor i { display: block; height: 100%; border-radius: 6px; background: var(--limpia-aviso-tinta); }
.club-medidor-70 { position: absolute; top: -3px; bottom: -3px; left: 70%; width: 2px; background: var(--limpia-error-tinta); }
.club-aviso-millon { margin-bottom: 14px; }

/* Conciliación › Alertas. */
.club-alertas { display: flex; flex-direction: column; background: var(--limpia-hoja); border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio); }
.club-alerta { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-top: 1px solid var(--limpia-borde-fino); font-size: .875rem; }
.club-alerta:first-child { border-top: 0; }
.club-alerta > .etiqueta { flex: none; margin-top: 1px; }
.club-alerta-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.club-alerta-texto small { font-size: .78rem; color: var(--limpia-tinta-3); }
.club-alerta-texto a { color: var(--limpia-morado); font-weight: 600; }
.club-alerta-revisada { opacity: .7; }

/* ---- Tarjetas y pulseras del club (F3-T7b; boceto «Tarjetas» y la tarjeta de la ficha, aprobados el 2026-10-27) ------------------- */
@media (min-width: 1100px) { .club-con-lateral.club-tarjetas-pagina { grid-template-columns: minmax(0, 1fr) 360px; } }
.club-tarjetas-principal { display: flex; flex-direction: column; min-width: 0; }
.club-tarjetas-principal > .club-subtitulo:first-of-type { margin-top: 4px; }
.club-cifras.club-cifras-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.club-codigo-tarjeta { font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace; font-size: .8125rem; letter-spacing: .04em; white-space: nowrap; }
.club-segmentos-ancho { display: grid; grid-template-columns: 1fr 1fr; }
.club-segmentos-ancho .club-segmento { justify-content: center; min-height: 34px; }
.club-lote-muestra { display: flex; gap: 12px; align-items: flex-start; }
/* La hoja A4 en pequeño: papel blanco con las diez tarjetas (el color de la tarjeta impresa, en claro y en oscuro). */
.club-mini-a4 { width: 96px; height: 136px; flex: none; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 3px; padding: 7px 6px;
    background: #fff; border: 1px solid var(--limpia-borde); border-radius: 4px; }
.club-mini-a4 i { border-radius: 2px; background: linear-gradient(135deg, #162238, #24365a); }
.club-tarjeta-del-socio { display: flex; flex-direction: column; gap: 6px; }
.club-tarjeta-del-socio .club-linea > span:first-child { flex: none; }
.club-tarjeta-del-socio .club-linea > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.club-tarjeta-del-socio .club-linea b.club-codigo-tarjeta { font-size: .875rem; }
.club-icono-tarjeta { width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--limpia-neutro-fondo); color: var(--limpia-tinta-2); }
.club-boton-solo { align-self: flex-start; }
@media (max-width: 1099px) {
    .club-lateral-lote { display: none; }
    .club-lateral-lote.club-abierto { display: flex; order: -1; }
}
@media (max-width: 719px) {
    /* Las dos tablas se quedan en tabla (como el boceto): fuera las columnas de escritorio. */
    .club-tabla.club-tabla-fija { display: table; }
    .club-tabla-fija thead { display: table-header-group; }
    .club-tabla-fija tbody { display: table-row-group; }
    .club-tabla-fija tr { display: table-row; padding: 0; border: 0; }
    .club-tabla-fija td { display: table-cell; width: auto; padding: 8px 10px; border-bottom: 1px solid var(--limpia-borde-fino); }
    .club-tabla-fija td:first-child { font-weight: inherit; }
    .club-tabla-fija tbody tr:last-child td { border-bottom: 0; }
    .club-col-esc { display: none !important; }
    .club-cifras.club-cifras-3 { gap: 8px; }
    .club-cifras-3 .club-cifra { padding: 8px 10px; }
}
@media (max-width: 600px), (pointer: coarse) {
    /* El dedo, también con el móvil en horizontal (844×390, más ancho que 600): 44 px en las piezas de las tarjetas. */
    .club-tarjetas-pagina, .club-tarjeta-del-socio { --densidad-campo: 44px; --densidad-boton: 44px; --densidad-boton-pequeno: 44px; }
    .club-tarjetas-pagina .mud-button-root, .club-tarjeta-del-socio .mud-button-root { min-height: 44px; }
    .club-tarjetas-pagina .club-filtros .mud-menu.club-pastilla > .mud-button-root { min-height: 44px; }
    .club-segmentos-ancho .club-segmento, .club-pestanas-panel .club-pestana { min-height: 44px; }
}

/* ---- El teléfono: el dedo a 44 px ------------------------------------------------------------------------------------------ */
@media (max-width: 600px) {
    .club-area-pestana, .club-pestana, .club-segmento, .club-pastilla, .club-boton-imagen, .club-interruptor { min-height: 44px; }
    .club-alerta { flex-wrap: wrap; }
    .club-linea { flex-wrap: wrap; }
    .club-linea-valor { flex-direction: row; align-items: center; }
    .club-filtros .mud-menu.club-pastilla > .mud-button-root { min-height: 44px; }
    .club-color-muestra { width: 44px; height: 44px; }
    .club-buscador { max-width: none; flex-basis: 100%; }
    .club-pie { flex-wrap: wrap; padding: 8px 12px; }
    .club-pie-cambios { flex-basis: 100%; }
    .club-recorte-mandos { grid-template-columns: 1fr; }
    .club-recorte-mandos input { min-height: 44px; }
    .club-previa-lienzo { min-height: 0; padding: 12px 8px; }
}

/* ---- F3-T5c: Niveles (bocetos de la F3, alternativa 13 A: una tabla; en el teléfono, una tarjeta por nivel) ----------------- */
.club-nivel { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border-radius: 12px; font-size: .78rem; font-weight: 700; background: var(--limpia-neutro-fondo); color: var(--limpia-tinta); white-space: nowrap; vertical-align: middle; }
.club-nivel i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); flex: none; }
.club-niveles-aviso { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.club-niveles { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .club-niveles { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.club-niveles-principal, .club-niveles-lateral { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.club-tabla-niveles td { padding: 6px 10px; }
.club-niveles-asa { color: var(--limpia-tinta-3); letter-spacing: -2px; font-weight: 700; width: 18px; }
.club-nivel-campo { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio-control); background: var(--limpia-hoja); color: var(--limpia-tinta); box-sizing: border-box; min-width: 0; }
.club-nivel-campo:focus-within { border-color: var(--limpia-morado); box-shadow: 0 0 0 1px var(--limpia-morado); }
.club-nivel-campo input { border: 0; outline: 0; background: transparent; font: inherit; font-size: .875rem; color: inherit; min-width: 0; width: 100%; padding: 0; }
.club-nivel-campo-fijo { background: var(--limpia-neutro-fondo); color: var(--limpia-tinta-2); }
.club-nivel-nombre { width: 150px; }
.club-nivel-umbral { width: 130px; }
.club-nivel-umbral input { text-align: left; font-variant-numeric: tabular-nums; }
.club-nivel-factor { width: 84px; }
.club-nivel-unidad { color: var(--limpia-tinta-3); font-size: .8125rem; white-space: nowrap; }
.club-nivel-punto { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); flex: none; }
.club-nivel-muestras { display: inline-flex; gap: 6px; }
.club-nivel-muestra { width: 24px; height: 24px; border-radius: 6px; border: 0; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); position: relative; }
.club-nivel-muestra::after { content: ""; position: absolute; inset: -10px; } /* 44 px de dedo sin mover la fila */
.club-nivel-muestra-on { box-shadow: 0 0 0 2px var(--limpia-hoja), 0 0 0 4px var(--limpia-morado); }
.club-nivel-muestra:disabled { cursor: default; }
.club-niveles-anadir { align-self: flex-start; padding: 6px 14px; min-height: 36px; }
.club-niveles-recompensa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.club-niveles-tarjetas { flex-direction: column; gap: 10px; }
.club-niveles-tarjeta-cabecera { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--limpia-borde-fino); }
.club-niveles-socios { margin-left: auto; color: var(--limpia-tinta-3); font-size: .8125rem; }
.club-nivel-etiqueta { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; color: var(--limpia-tinta-2); min-width: 0; }
.club-nivel-etiqueta .club-nivel-campo { width: 100%; }
@media (max-width: 719px) {
    .club-nivel-campo { height: 44px; }
    .club-niveles-tarjeta-cabecera .club-enlace { min-height: 44px; }
    .club-niveles-anadir { min-height: 44px; }
}
.club-socio-nivel .club-medidor { margin-top: 6px; }
.club-socio-nivel .club-socio-nivel-pie { border-top: 0; padding-top: 4px; font-size: .75rem; color: var(--limpia-tinta-3); flex-wrap: wrap; }

/* ---- La ficha del socio: los movimientos por día (2026-11-05; boceto aprobado, reports/central/movimientos-del-socio-2026-11-05/) -----
   La pestaña «Movimientos» y los «Últimos movimientos» del Resumen (ListaDeMovimientosDelSocio.razor). Antes, una tabla de cuatro columnas
   que no cabía en los 440 px del panel (textos partidos en cuatro líneas, la columna de puntos fuera). Ahora cada día con su total y cada
   movimiento en una fila de rejilla: el icono redondo de 32 px por clase (ganar, verde azulado; gastar, coral; nivel, morado; ajuste y
   caducidad, gris: los colores de bien, error, morado y neutro de la hoja limpia, que ya traen su oscuro), el título y el contexto en
   la columna que se estira y los puntos a la derecha con «quedan N». */
.club-movs { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.club-movs-filtros { gap: 6px; margin-bottom: 10px; }
.club-movs-dia { min-width: 0; }
.club-movs-dia-cabecera {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; padding: 0 0 5px;
    border-bottom: 1px solid var(--limpia-borde); font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--limpia-tinta-2);
}
.club-movs-dia-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.club-movs-lista { list-style: none; margin: 0; padding: 0; }
.club-mov {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 10px; align-items: start;
    padding: 8px 0; border-bottom: 1px solid var(--limpia-borde-fino); min-width: 0;
}
.club-mov:last-child { border-bottom: 0; }
.club-mov-icono {
    inline-size: 32px; block-size: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--limpia-neutro-fondo); color: var(--limpia-neutro-tinta);
}
.club-mov-icono .mud-icon-root { font-size: 18px; inline-size: 18px; block-size: 18px; }
.club-mov[data-clase="ganar"] .club-mov-icono { background: var(--limpia-bien-fondo); color: var(--limpia-bien-tinta); }
.club-mov[data-clase="gastar"] .club-mov-icono { background: var(--limpia-error-fondo); color: var(--limpia-error-tinta); }
.club-mov[data-clase="nivel"] .club-mov-icono { background: var(--limpia-morado-aguada); color: var(--limpia-morado); }
/* Un «Ticket sin puntos» (2026-11-13): discreto, icono gris (el neutro de arriba) y título en el gris del texto secundario. */
.club-mov[data-clase="sinpuntos"] .club-mov-titulo { font-weight: 500; color: var(--limpia-tinta-2); }
.club-mov[data-clase="sinpuntos"] .club-mov-cifra { color: var(--limpia-tinta-3); }
.club-mov-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.club-mov-titulo { font-size: .875rem; font-weight: 560; line-height: 1.35; color: var(--limpia-tinta); overflow-wrap: anywhere; }
/* El contexto en partes que saltan de renglón enteras; el «·» de cada una cuelga en el hueco de su izquierda y, si la parte abre renglón,
   cae fuera de la caja (que recorta): nunca un renglón que empieza por «·». */
.club-mov-contexto {
    display: flex; flex-wrap: wrap; column-gap: 13px; min-width: 0; overflow: hidden;
    font-size: .75rem; line-height: 1.45; color: var(--limpia-tinta-3);
}
.club-mov-parte { min-width: 0; overflow-wrap: anywhere; }
.club-mov-parte + .club-mov-parte::before {
    content: "·"; display: inline-block; inline-size: 13px; margin-inline-start: -13px; text-align: center; color: var(--limpia-tinta-3);
}
.club-mov-ticket { color: var(--limpia-morado); font-weight: 560; text-decoration: none; white-space: nowrap; }
.club-mov-ticket:hover { text-decoration: underline; }
.club-mov-ticket:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 1px; border-radius: 3px; }
.club-mov-puntos { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.club-mov-cifra { font-size: .9375rem; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--limpia-tinta); }
.club-mov-quedan { font-size: .6875rem; line-height: 1.45; color: var(--limpia-tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.club-mas { color: var(--limpia-bien-tinta); }
.club-menos { color: var(--limpia-error-tinta); }
.club-movs-pie { display: flex; justify-content: center; margin-top: 8px; }
/* Con el dedo (el teléfono de pie y tumbado, 844 × 390): las fichas, «Ver más», el enlace del ticket y el «Ver» del teléfono a 44 px. El
   renglón del ticket crece hasta 44 px y las otras partes de ese renglón se centran con él (medido el 2026-11-05: sin centrar, «· QR del
   móvil» quedaba arriba y el ticket abajo). */
@media (max-width: 600px), (pointer: coarse) {
    .club-movs-filtros .club-pastilla, .club-movs-mas.mud-button-root { min-height: 44px; }
    .club-mov-contexto { align-items: center; }
    .club-mov-ticket { display: inline-flex; align-items: center; min-block-size: 44px; }
    .club-socio-cabecera .club-enlace { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; }
    [data-testid=socio-cliente] .club-enlace { display: inline-flex; align-items: center; min-block-size: 44px; }
}
/* El cliente enlazado del socio (2026-11-08): su nombre (a su ficha) y «Quitar el enlace», en un renglón. */
[data-testid=socio-cliente] { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.club-enlace-quitar { color: var(--limpia-tinta-2); font-weight: 500; }
/* «Enlazar con un cliente» desde la ficha del socio (2026-11-08): campo de 40 px con su etiqueta pequeña, «Buscar» y «Cancelar» en una fila
   que parte en el teléfono; los clientes encontrados, uno por renglón con «Enlazar» a la derecha. Compacto, como el de la ficha del cliente. */
.club-enlazar-cliente { display: grid; gap: 6px; margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--limpia-raya, rgba(0,0,0,.08)); }
.club-enlazar-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.club-enlazar-fila .mud-input-control { flex: 1 1 16rem; min-width: 0; margin: 0; }
.club-enlazar-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.club-enlazar-candidato { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-block-size: 40px;
    font-size: .875rem; overflow-wrap: anywhere; }
@media (max-width: 600px), (pointer: coarse) {
    .club-enlazar-fila .mud-button-root, .club-enlazar-candidato .mud-button-root { min-height: 44px; }
    [data-testid=socio-cliente] .club-enlace { min-block-size: 44px; }
}
/* Las cuatro fichas, SIEMPRE en una fila y ancho a su texto (revisión del 2026-11-05: la rejilla 2 × 2 del teléfono eran cajas grandes, contra
   «central compacta y discreta»). En el teléfono de pie no caben (medido: 364 px de 358 a 390 de ancho): la fila se desplaza a lo ancho
   DENTRO de su caja, sin barra a la vista, y la página no desborda. */
.club-movs-filtros {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-width: 0;
}
.club-movs-filtros::-webkit-scrollbar { display: none; }
.club-movs-filtros .club-pastilla { flex: none; white-space: nowrap; }

/* «Familias que ganan puntos» (2026-11-13): el «y K más» de «No ganan puntos N familias: …» es un enlace dentro de la línea; con el
   dedo, 44 px de alto sin cambiar el renglón (el alto lo pone el relleno, no la letra). */
@media (pointer: coarse) {
    .club-familias-ver { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 4px; vertical-align: middle; }
}