/* LOS MOVIMIENTOS DE UN CLIENTE (2026-11-04, docs/central/plan-movimientos-del-cliente-2026-11-04.md): la pestaña «Movimientos» de la
   ficha del cliente. Compacta como el resto de la central: los filtros con la etiqueta pequeña encima y controles de 40 px con ratón
   (44 con el dedo), las cifras en una fila discreta (dos por fila en un teléfono), la lista como una tabla de rejilla que por debajo de
   640 px pasa a tarjetas «etiqueta: valor», y «Ver más» y los enlaces a 44 px en táctil. Solo consume las fichas --limpia-*: el claro y
   el oscuro salen solos de hoja-limpia.css. */

.movcli { --movcli-control: 44px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (pointer: fine) { .movcli { --movcli-control: 40px; } }

/* ---- Los filtros: Periodo (desplegable) y Tipo (segmentos), con el rango a la derecha --------------------------------------------- */
.movcli-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; min-width: 0; }
.movcli-filtro { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.movcli-filtro-periodo { inline-size: 13rem; max-inline-size: 100%; }
.movcli-rotulo { font-size: var(--plano-t-13, .8125rem); font-weight: 600; line-height: 1.3; color: var(--limpia-tinta-2); white-space: nowrap; }
.movcli-filtros .mud-input-control, .movcli-filtros .campo.mud-input-control { margin: 0; min-block-size: 0; }
.movcli-filtros .mud-input-control-helper-container { display: none; }
.movcli-filtros .mud-input-root { min-block-size: 0; }
.movcli-filtros .mud-input.mud-input-filled { min-block-size: var(--movcli-control); }
.movcli-filtros .mud-input.mud-input-filled > input.mud-input-slot {
    box-sizing: border-box; block-size: var(--movcli-control); min-block-size: 0; padding-block: 0; padding-inline: 12px;
    font-size: .9375rem; text-overflow: ellipsis;
}
.movcli-filtros .mud-input-adornment .mud-icon-button { min-block-size: 0; padding: 4px; }

.movcli-segmentos {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; max-inline-size: 100%;
    border-radius: var(--limpia-radio-control, 8px); background: var(--limpia-neutro-fondo);
}
.movcli-segmento {
    min-block-size: calc(var(--movcli-control) - 6px); padding: 0 12px; 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; justify-content: center;
}
.movcli-segmento:hover { color: var(--limpia-tinta); }
.movcli-segmento[aria-checked="true"] { background: var(--limpia-hoja); color: var(--limpia-tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.movcli-segmento:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 1px; }
.movcli-rango { margin-inline-start: auto; color: var(--limpia-tinta-3); font-size: .8125rem; font-variant-numeric: tabular-nums;
    min-block-size: var(--movcli-control); display: inline-flex; align-items: center; }

.movcli-aviso { margin: 0; }
.movcli-reintentar.mud-button-root { margin-top: 6px; }

/* ---- Las cuatro cifras: una fila discreta, la etiqueta pequeña encima ------------------------------------------------------------ */
.movcli-cifras {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; min-width: 0;
    border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio, 10px); background: var(--limpia-hoja);
}
.movcli-cifra { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; min-width: 0; border-inline-start: 1px solid var(--limpia-borde-fino); }
.movcli-cifra:first-child { border-inline-start: 0; }
.movcli-cifra dt { margin: 0; color: var(--limpia-tinta-3); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.movcli-cifra dd {
    margin: 0; color: var(--limpia-tinta); font-size: 1.125rem; font-weight: 650; font-variant-numeric: tabular-nums;
    line-height: 1.3; overflow-wrap: anywhere;
}
.movcli-cifra-nota { color: var(--limpia-tinta-3); font-size: .6875rem; line-height: 1.3; }
.movcli-debe { color: var(--limpia-aviso-tinta) !important; }

/* ---- La lista: una tabla de rejilla; cada fila hereda las columnas de la tabla (subgrid) ------------------------------------------- */
.movcli-tabla {
    display: grid; min-width: 0;
    grid-template-columns: minmax(8.5rem, .9fr) minmax(5.5rem, .6fr) minmax(7rem, .8fr) minmax(8rem, 1.4fr) minmax(6rem, .7fr) minmax(6rem, .7fr);
}
.movcli-fila {
    display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: 12px; align-items: center;
    min-block-size: 40px; padding: 4px 6px; border-bottom: 1px solid var(--limpia-borde-fino); min-width: 0;
}
.movcli-fila:not(.movcli-fila-titulos):hover { background: var(--limpia-hover); }
.movcli-fila > * { min-width: 0; overflow-wrap: anywhere; }
.movcli-fila-titulos {
    min-block-size: 32px; color: var(--limpia-tinta-3); font-size: .75rem; font-weight: 600; letter-spacing: .02em;
    border-bottom-color: var(--limpia-borde);
}
.movcli-fecha { color: var(--limpia-tinta-2); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.movcli-tipo {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.5;
    background: var(--limpia-neutro-fondo); color: var(--limpia-neutro-tinta); white-space: nowrap;
}
.movcli-tipo-factura { background: var(--limpia-morado-aguada); color: var(--limpia-morado); }
.movcli-tipo-albaran, .movcli-tipo-pedido { background: var(--limpia-aviso-fondo); color: var(--limpia-aviso-tinta); }
.movcli-numero a {
    color: var(--limpia-morado); font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .8125rem; font-weight: 650;
    text-decoration: none; white-space: nowrap;
}
.movcli-numero a:hover { text-decoration: underline; }
.movcli-numero a:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 2px; border-radius: 4px; }
.movcli-local { color: var(--limpia-tinta-2); font-size: .875rem; }
.movcli-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.movcli-mas { display: flex; justify-content: center; }
.movcli-mas .crud-boton.mud-button { min-block-size: var(--movcli-control); min-inline-size: 10rem; }
.movcli-vacio { padding: 8px 0; }

/* ---- El club (2026-11-08): una línea con el socio enlazado (o «No es socio del club» y «Enlazar con un socio»), el buscador de
   socios para enlazar (un campo de 40 px y sus botones, sin cajas) y los movimientos del club en la misma tabla. ------------------- */
.movcli-socio {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0;
    color: var(--limpia-tinta-2); font-size: .875rem; line-height: 1.4;
}
.movcli-socio-rotulo { color: var(--limpia-tinta-3); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.movcli-socio-dato { min-width: 0; overflow-wrap: anywhere; }
.movcli-socio-enlace {
    display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
    color: var(--limpia-morado); font-weight: 600; text-decoration: none;
}
.movcli-socio-enlace:hover { text-decoration: underline; }
.movcli-socio-enlace:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 2px; border-radius: 4px; }
.movcli-enlazar { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.movcli-filtro-buscar { inline-size: 20rem; max-inline-size: 100%; }
.movcli-boton.mud-button-root { min-block-size: var(--movcli-control); }
.movcli-nota { margin: 0; color: var(--limpia-tinta-3); font-size: .8125rem; line-height: 1.4; }
.movcli-candidatos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.movcli-candidato {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
    padding: 4px 6px; border-bottom: 1px solid var(--limpia-borde-fino); font-size: .875rem;
}
.movcli-candidato-dato { min-width: 0; overflow-wrap: anywhere; }
.movcli-tipo-club { background: var(--limpia-morado-aguada); color: var(--limpia-morado); }
.movcli-concepto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: .875rem; }

/* ---- Con el dedo, a cualquier ancho (también el teléfono tumbado, 844 × 390, medido: segmentos de 38 px y números de 17): los
   segmentos, los números y «Ver más», de 44 px. ------------------------------------------------------------------------------------ */
@media (pointer: coarse) {
    /* El campo del periodo también: densidad.css lo deja en 40 px por encima de 600 px de ancho (seis clases contra sus cuatro). */
    .movcli .movcli-filtros .mud-input-control .mud-input.mud-input-filled { min-block-size: 44px; }
    .movcli .movcli-filtros .mud-input-control .mud-input > input.mud-input-slot.mud-input-root { block-size: 44px; min-block-size: 44px; }
    .movcli-segmento { min-block-size: 44px; }
    .movcli-numero a { display: inline-flex; align-items: center; min-block-size: 44px; }
    .movcli-mas .crud-boton.mud-button { min-block-size: 44px; }
    .movcli-socio-enlace, .movcli-boton.mud-button-root { min-block-size: 44px; }
}

/* ---- Un teléfono (de pie) o una tableta estrecha: las cifras de dos en dos y cada fila, una tarjeta ------------------------------- */
@media (max-width: 640px) {
    .movcli-filtro-periodo { inline-size: 100%; }
    .movcli-filtro { flex: 1 1 100%; }
    .movcli-segmentos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); inline-size: 100%; box-sizing: border-box; }
    .movcli-segmento { padding: 0 4px; min-block-size: 44px; }
    /* Con el club son seis: de tres en tres (a 360 px, seis en una fila dejaban «Albaranes» sin sitio). */
    .movcli-segmentos-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .movcli-filtro-buscar { inline-size: 100%; }
    .movcli-enlazar .movcli-filtros > .movcli-boton { flex: 1 1 0; }
    .movcli-rango { margin-inline-start: 0; min-block-size: 0; }

    .movcli-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .movcli-cifra:nth-child(odd) { border-inline-start: 0; }
    .movcli-cifra:nth-child(n + 3) { border-top: 1px solid var(--limpia-borde-fino); }

    /* La tarjeta, en cuatro renglones (medido: con «etiqueta: valor» en cada dato eran 172 px por documento): el número y su tipo,
       la fecha, el local y, con su rótulo pequeño delante, el total a la izquierda y lo pendiente a la derecha. */
    .movcli-tabla { grid-template-columns: minmax(0, 1fr); }
    .movcli-fila-titulos { display: none; }
    .movcli-fila { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 6px 2px 10px; align-items: center; }
    .movcli-numero { order: 1; }
    .movcli-celda-tipo { order: 2; justify-self: end; }
    .movcli-fecha { order: 3; grid-column: 1 / -1; }
    .movcli-local { order: 4; grid-column: 1 / -1; font-size: .8125rem; }
    .movcli-fila > .movcli-num { order: 5; text-align: left; margin-top: 4px; font-weight: 600; }
    .movcli-fila > .movcli-num:last-child { order: 6; text-align: right; }
    .movcli-fila > .movcli-num::before {
        content: attr(data-etiqueta) " "; color: var(--limpia-tinta-3); font-size: .6875rem; font-weight: 600; letter-spacing: .02em;
    }
    /* Un ticket o una factura no tiene pendiente: en la tabla es «—» en su columna; en la tarjeta, nada. */
    .movcli-fila > .movcli-sin-pendiente { display: none; }
    .movcli-numero a { display: inline-flex; align-items: center; min-block-size: 44px; }
    .movcli-mas .crud-boton.mud-button { inline-size: 100%; min-block-size: 44px; }
}