/* «PAGOS» Y EL «DATÁFONO DE PRUEBAS» (T11 de docs/central/plan-pagos-fase-1-2026-10-12.md; bocetos de T0 aprobados por el
   usuario el 2026-10-12, docs/central/bocetos-pagos/bocetos.css). Solo fichas --limpia-*: el claro y el oscuro salen solos de
   hoja-limpia.css. Aparte por lo mismo que las demás hojas de pantalla: solo la usan estas dos páginas, la línea de la ficha
   del establecimiento y la de la caja. */

/* ---- La página ---------------------------------------------------------------------------------------------------- */
.pagos-nota { margin: 0; color: var(--limpia-tinta-2); font-size: .875rem; line-height: 1.45; max-width: 70ch; }
.pagos-nota-arriba { margin: 16px 0 12px; }
.pagos-sub { display: block; margin-top: 2px; color: var(--limpia-tinta-3); font-size: .8125rem; line-height: 1.35; font-weight: 420; }
.pagos-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pagos-nowrap { white-space: nowrap; }
.pagos-sin { color: var(--limpia-tinta-3); }
.pagos-codigo { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .8125rem; overflow-wrap: anywhere; }
.pagos-etiqueta-campo { font-size: .75rem; font-weight: 600; color: var(--limpia-tinta-2); }
.pagos-pestanas .mud-tab { min-height: 44px; padding: 0 18px; text-transform: none; white-space: nowrap; gap: 6px; }
.pagos-contador { min-width: 20px; padding: 0 6px; justify-content: center; }

/* La barra de una pestaña: la frase a la izquierda y su acción a la derecha. */
.pagos-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 12px; flex-wrap: wrap; }

/* ---- Tablas: columnas por su contenido y no a partes iguales (solo fuera del modo apilado) ------------------------- */
@media (min-width: 600px) {
    .pagos-tabla-cuentas .mud-table-root,
    .pagos-tabla-cobros .mud-table-root,
    .pagos-tabla-locales .mud-table-root,
    .pagos-tabla-medios .mud-table-root,
    .pagos-cajas .mud-table-root { table-layout: auto; width: 100%; }
}
.pagos-tabla-locales > .mud-table-root > thead th,
.pagos-cajas > .mud-table-root > thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--limpia-tinta-3);
    padding: 10px 16px;
    border-bottom: 1px solid var(--limpia-borde);
}
.pagos-tabla-locales > .mud-table-root > tbody > tr > td,
.pagos-cajas > .mud-table-root > tbody > tr > td { padding: 6px 16px; border-bottom: 1px solid var(--limpia-borde-fino); vertical-align: middle; }
.pagos-nombre { font-weight: 600; color: var(--limpia-morado); text-decoration: none; }
.pagos-capacidades { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pagos-capacidad {
    display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; white-space: nowrap;
    background: var(--limpia-neutro-fondo); color: var(--limpia-neutro-tinta); font-size: .8125rem; font-weight: 540;
}
.pagos-comprobacion { display: inline-flex; align-items: flex-start; gap: 6px; }
.pagos-comprobacion .mud-icon-root { margin-top: 2px; flex: none; }
.pagos-comprobacion-bien .mud-icon-root { color: var(--limpia-bien-tinta); }
.pagos-comprobacion-mal { color: var(--limpia-error-tinta); font-weight: 560; }
.pagos-comprobacion-mal .mud-icon-root { color: var(--limpia-error-tinta); }
.pagos-celda-acciones { text-align: right !important; white-space: nowrap; width: 1%; }
.pagos-acciones { display: inline-flex; gap: 2px; align-items: center; }
.pagos-nombre-local, .pagos-caja { display: inline-flex; align-items: center; gap: 8px; font-weight: 560; }
.pagos-nombre-local .mud-icon-root, .pagos-caja .mud-icon-root { color: var(--limpia-tinta-3); }
.pagos-que { color: var(--limpia-tinta-2); font-size: .875rem; }
.pagos-tabla-locales .campo-en-celda { min-width: 15rem; }
.pagos-cajas .campo-en-celda { min-width: 13rem; }
.pagos-segmentado { min-width: 17rem; }
.pagos-segmentado-corto { min-width: 12rem; }

/* Un establecimiento abierto: sus cajas, metidas bajo su fila, sobre la cabecera de la hoja. */
.pagos-fila-abierta > td { border-bottom: 0 !important; }
.pagos-fila-cajas > td.pagos-celda-cajas { padding: 0 16px 16px 32px !important; background: var(--limpia-cabecera); }
.pagos-nota-cajas { margin-top: 8px; font-size: .8125rem; color: var(--limpia-tinta-3); }
.pagos-fila-aviso > td, tr.pagos-fila-aviso { background: var(--limpia-aviso-fondo); }

/* LA TABLA DE «COBROS» (2026-10-14). `.admin-tabla .mud-sm-table .mud-table-root` (app.css) fuerza `table-layout: fixed` en todo ancho
   —es la regla del modo apilado— y ganaba al `auto` de más arriba: nueve columnas a partes iguales, un hueco vacío entre «Estado» y
   «Cuenta» y el local, con `white-space: nowrap`, montado sobre la tarjeta. Ahora, desde 720 px, las columnas se miden por su
   contenido; el local y la tarjeta parten línea DENTRO de su columna (nunca se montan sobre la vecina); la fecha, la tarjeta, el
   adquirente y el importe no parten; la cabecera cabe en una línea; y las celdas se alinean por su primera línea (baseline), de modo
   que la raya «—» de un cobro sin tarjeta cae donde cae el primer renglón de las demás. Por debajo de 720 px la fila se apila como las
   demás listas de la central (plano.css), y entre las dos, si no cabe, la tabla se desplaza dentro de su caja (.admin-tabla). */
@media (min-width: 720px) {
    .admin-tabla.pagos-tabla-cobros .mud-sm-table .mud-table-root { table-layout: auto; width: 100%; }
    .pagos-tabla-cobros thead th { white-space: nowrap; }
    .pagos-tabla-cobros tbody td { vertical-align: baseline; overflow-wrap: break-word; }
    /* Ocho columnas con el relleno de MudBlazor (16 px a la izquierda, 24 a la derecha) se comían 320 px: 8 px a cada lado entre
       columnas y 16 en los bordes, que es donde arranca el texto de la franja de conciliación y de los filtros. */
    .admin-tabla.pagos-tabla-cobros .mud-table-root .mud-table-cell { padding-inline: 8px; }
    .admin-tabla.pagos-tabla-cobros .mud-table-root .mud-table-cell:first-child { padding-inline-start: 16px; }
    .admin-tabla.pagos-tabla-cobros .mud-table-root .mud-table-cell:last-child { padding-inline-end: 16px; }
    .pagos-tabla-cobros .pagos-adquirente { white-space: normal; }
    /* El reparto: lo que no parte línea (fecha, importe, acciones) mide lo que su contenido; el local, la tarjeta, el
       estado y la cuenta se reparten el resto, con un mínimo para que «SALA PRINCIPAL - CAFE» no se parta en cada fila. */
    .pagos-tabla-cobros .pagos-col-justa { white-space: nowrap; width: 1%; }
    .pagos-tabla-cobros th.pagos-col-donde { width: 28%; }
    .pagos-tabla-cobros th.pagos-col-tarjeta { width: 22%; }
    .pagos-tabla-cobros th.pagos-col-estado { width: 12%; }
    .pagos-tabla-cobros th.pagos-col-cuenta { width: 16%; }
    .pagos-tabla-cobros .pagos-col-donde { min-inline-size: 9.5rem; }
    .pagos-tabla-cobros .pagos-col-estado { min-inline-size: 6.5rem; }
    .pagos-tabla-cobros .pagos-col-cuenta { min-inline-size: 5.5rem; }
}

/* La tarjeta y el adquirente de un cobro (C-11): AMEX, que va a otro adquirente, se distingue. */
.pagos-tarjeta { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pagos-adquirente { white-space: nowrap; }
.pagos-adquirente-amex { font-weight: 600; }

/* ---- Cobros: la conciliación de ayer, los filtros y el pie -------------------------------------------------------- */
/* LA FRANJA DE CONCILIACIÓN (2026-10-14): el icono pasa a la línea del título (sin él, todo el contenido arrancaba 32 px a la derecha
   de la tabla). Con el mismo relleno lateral que las celdas de la tabla (16 px), el título, la cuenta de cada fila y «Conciliar
   ahora» caen en la vertical del primer dato y del último de la tabla; arriba la separa de las pestañas lo mismo que la separa
   de los filtros por abajo (16 px), y entre el título y las filas hay 8 px, los mismos que entre una fila y otra. */
.pagos-conc-aviso { max-width: none !important; margin-block-start: 16px; }
.pagos-conc-aviso.mud-alert { padding: 8px 16px; }
.pagos-conc-aviso .mud-alert-position { width: 100%; }
.pagos-conc-aviso .mud-alert-message { flex: 1; max-width: none; padding: 0; }
.pagos-conc { display: grid; gap: 8px; }
.pagos-conc-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; }
.pagos-conc-titulo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pagos-conc-titulo .mud-icon-root { flex: none; }
.pagos-conc-fila { display: grid; grid-template-columns: minmax(8rem, 12rem) 6.5rem minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 32px; }
.pagos-conc-cuenta { font-weight: 560; }
.pagos-conc-cifras { color: var(--limpia-tinta-2); font-variant-numeric: tabular-nums; }
.pagos-conc-acciones { display: inline-flex; gap: 2px; }
.pagos-diferencias { margin: 0 0 8px; padding-left: 1.2rem; color: var(--limpia-tinta-2); font-size: .875rem; }
.pagos-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 12px; }
.pagos-filtro { width: 10.5rem; }
.pagos-filtros .mud-input-control { margin: 0; }
.pagos-filtros .mud-input-control-helper-container { display: none; }
.pagos-filtro-fecha { width: 9.75rem; }
.pagos-total { margin-left: auto; color: var(--limpia-tinta-2); font-variant-numeric: tabular-nums; font-size: .875rem; }

/* LOS FILTROS DE «COBROS», COMPACTOS COMO «AJUSTES TÉCNICOS» (2026-10-14, .config-claves de app.css): el rótulo encima, en una
   línea, y todos los controles —las dos fechas y los cinco desplegables— sin etiqueta flotante y de la MISMA altura (40 px con
   ratón, 44 con el dedo) y del mismo tamaño de texto. El contador baja a la línea de los controles. Solo «Cobros»: los
   filtros de «Reparto › Pedidos» siguen con su `.pagos-filtros` de siempre. */
.pagos-filtros-compactos { --ajuste-control: var(--plano-toque); align-items: flex-end; gap: 8px 12px; }
@media (pointer: fine) { .pagos-filtros-compactos { --ajuste-control: 40px; } }
.pagos-filtros-compactos .pagos-filtro { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pagos-filtro-rotulo { font-size: var(--plano-t-13); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.pagos-filtros-compactos .mud-input-control,
.pagos-filtros-compactos .campo.mud-input-control { margin: 0; min-block-size: 0; }
.pagos-filtros-compactos .mud-input-root { min-block-size: 0; }
.pagos-filtros-compactos .mud-input.mud-input-filled { min-block-size: var(--ajuste-control); }
.pagos-filtros-compactos .mud-input.mud-input-filled > input.mud-input-slot {
    box-sizing: border-box;
    block-size: var(--ajuste-control);
    min-block-size: 0;
    padding-block: 0;
    padding-inline: 12px;
    font-size: .9375rem;
    text-overflow: ellipsis;
}
.pagos-filtros-compactos .mud-input-adornment .mud-icon-button { min-block-size: 0; padding: 4px; }
.pagos-filtros-compactos .pagos-total { display: flex; align-items: center; min-block-size: var(--ajuste-control); }
/* Con ratón y más de 720 px, los siete filtros y el contador caben en UNA fila: las fechas con su ancho (9,25rem: «13/10/2026» y el
   calendario) y los cinco desplegables repartiéndose el resto, de 6,75rem a 10,5rem. Por debajo, dos por fila (más abajo). */
@media (min-width: 720px) {
    .pagos-filtros-compactos { flex-wrap: nowrap; column-gap: 8px; }
    .pagos-filtros-compactos .pagos-filtro { flex: 1 1 7rem; inline-size: auto; min-inline-size: 6.75rem; max-inline-size: 10.5rem; }
    .pagos-filtros-compactos .pagos-filtro-fecha { flex: 0 0 9.25rem; min-inline-size: 9.25rem; max-inline-size: none; }
    .pagos-filtros-compactos .pagos-total { flex: none; white-space: nowrap; }
}
.pagos-pie { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; color: var(--limpia-tinta-3); font-size: .8125rem; }

/* ---- Las hojas y los modales -------------------------------------------------------------------------------------- */
.pagos-dialogo .mud-dialog-actions { gap: 8px; }
.pagos-dialogo-izquierda { margin-right: auto; }
.pagos-dialogo-cuerpo { display: grid; gap: 4px; padding-bottom: 8px; container-type: inline-size; }
.pagos-ayuda-proveedor { margin: 0; color: var(--limpia-tinta-3); font-size: .75rem; line-height: 1.4; }
.pagos-zona { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); gap: 1.25rem; padding: 16px 0; border-top: 1px solid var(--limpia-borde-fino); }
.pagos-zona:first-child { border-top: 0; padding-top: 4px; }
.pagos-zona-rotulo h3 { margin: 0 0 4px; }
.pagos-zona-rotulo p { margin: 0; color: var(--limpia-tinta-3); font-size: .8125rem; line-height: 1.4; }
.pagos-zona-campos { display: grid; gap: 12px; min-width: 0; }
.pagos-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pagos-dos .mud-input-control { margin: 0; }
/* EN LA HOJA, EL RÓTULO DE LA ZONA ENCIMA (densidad compacta, 2026-10-14). En una hoja de 48rem la columna del rótulo
   (13rem) dejaba la explicación en cuatro renglones y los campos en dos columnas de 14rem con la ayuda en seis: «textos
   de ayuda largos en columnas estrechas». Encima, la explicación corre a lo ancho y los campos tienen la hoja entera. */
@container (max-width: 56rem) {
    .pagos-zona { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 0; }
    .pagos-zona-rotulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
    .pagos-zona-rotulo h3 { margin: 0; }
}
.pagos-entorno { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pagos-entorno .pagos-sub { margin: 0; }
.pagos-url { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
/* «Copiar», a la altura del campo y en su línea (la etiqueta va encima del campo desde la densidad compacta). Sin margen
   abajo (1.0.94): con align-items: end el borde de abajo del botón ya es el del campo; los 4 px que quedaban de antes de la
   densidad lo dejaban 4 px descolocado respecto al campo (medido en la hoja «Cuenta · …» a 1440 y a 390). */
.pagos-url .crud-boton.mud-button { min-block-size: var(--densidad-campo, 40px); margin: 0; }
.pagos-url .mud-input-control { margin: 0; }
.pagos-url input { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .8125rem; }
.pagos-detalles { margin: 4px 0 0; padding-left: 1.1rem; }
.pagos-resumen { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 6px 12px; margin: 0 0 12px; }
.pagos-resumen dt { color: var(--limpia-tinta-3); font-size: .8125rem; }
.pagos-resumen dd { margin: 0; text-align: left !important; }
.pagos-detalle { display: grid; gap: 10px; }
.pagos-detalle h3 { margin: 8px 0 0; }
.pagos-detalle-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pagos-detalle-importe { font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pagos-devolver .campo-precio input, .pagos-devolver input { font-variant-numeric: tabular-nums; }

/* ---- La línea de la ficha del establecimiento y la de la caja (P16, P18) ------------------------------------------ */
.pagos-del-local, .pagos-datafono-de-la-caja { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }

/* ---- El datáfono de pruebas --------------------------------------------------------------------------------------- */
.dp-franja {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 20px; border-radius: 12px;
    background: var(--limpia-aviso-fondo); color: var(--limpia-tinta);
}
.dp-franja > .mud-icon-root { color: var(--limpia-aviso-tinta); flex: none; }
.dp-franja p { margin: 0; flex: 1; }
.dp-franja b { color: var(--limpia-aviso-tinta); letter-spacing: .02em; }
.dp-vivo { display: inline-flex; align-items: center; gap: 6px; color: var(--limpia-tinta-2); font-size: .8125rem; white-space: nowrap; }
.dp-luz { width: 8px; height: 8px; border-radius: 50%; background: var(--limpia-bien-tinta); }
.dp-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 46rem), 1fr)); gap: 20px; align-items: start; }
.dp-tarjeta { background: var(--limpia-hoja); border: 1px solid var(--limpia-borde); border-radius: 12px; padding: 16px 20px 20px; display: grid; gap: 16px; }
.dp-tarjeta-cabecera { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dp-tarjeta-titulo { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 650; }
.dp-tarjeta-titulo .mud-icon-root { color: var(--limpia-tinta-3); }
.dp-modo { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.dp-segmentado { min-width: 26rem; }
.dp-segmentado .mud-button-root { min-height: 40px; }
.dp-segmentado .mud-button-label { white-space: nowrap; }
.dp-segundos { width: 9rem; }
.dp-tarjeta-simulada { width: 20rem; }
.dp-segundos .mud-input-control, .dp-tarjeta-simulada .mud-input-control { margin: 0; }
.dp-cobro { display: grid; gap: 12px; padding: 16px; border-radius: 12px; background: var(--limpia-cabecera); border: 1px solid var(--limpia-borde-fino); }
.dp-cobro-cifra { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
.dp-importe { grid-row: span 2; font-size: 2.5rem; line-height: 1; font-weight: 720; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-cobro-linea { font-weight: 560; }
.dp-cobro-tarde { background: var(--limpia-aviso-fondo); }
.dp-botones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dp-botones-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dp-boton { min-height: 56px !important; white-space: normal; line-height: 1.2; }
.dp-vacio p { margin: 0; }
.dp-ultimos { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--limpia-borde-fino); display: grid; gap: 6px; }
.dp-ultimos li { display: grid; grid-template-columns: 4.5rem 5rem auto minmax(0, 1fr); gap: 12px; align-items: center; font-variant-numeric: tabular-nums; }
.dp-ultimos li > .etiqueta { justify-self: start; }
.dp-ultimos .pagos-sub { margin: 0; }

/* ---- El teléfono (< 720 px) --------------------------------------------------------------------------------------- */
@media (max-width: 719.98px) {
    /* Las listas siguen la regla de la etiqueta (papeles de plano.css): lo de debajo de cada dato pasa a su línea. */
    .pagos-tabla-cuentas tbody .pagos-sub { display: none; }
    .pagos-tabla-cobros tbody .pagos-sub { display: inline; margin: 0; font-size: inherit; color: inherit; }
    .pagos-tabla-cobros tbody .pagos-sub::before { content: " · "; }
    /* En el teléfono la fila dice la marca y las cuatro cifras; el resto de la tarjeta, en su detalle (se toca la fila). */
    .pagos-tabla-cobros [data-papel="cifra"] .pagos-sub,
    .pagos-tabla-cobros [data-testid^="tarjeta-"] .pagos-sub,
    .pagos-tabla-cobros [data-testid^="tarjeta-"] .pagos-sin { display: none; }
    .pagos-tabla-cuentas .pagos-celda-acciones .crud-boton { display: none; }
    .pagos-tabla-cobros .pagos-celda-acciones .crud-boton .mud-button-label { font-size: 0; }
    .pagos-celda-acciones { padding: 0 !important; width: auto; }
    .pagos-acciones { gap: 0; }
    .pagos-celda-bloque { display: block !important; flex: 1 0 100%; order: 3 !important; margin-top: 8px; }
    .pagos-comprobacion { display: inline; }
    .pagos-comprobacion .mud-icon-root { display: none; }
    .pagos-barra { flex-direction: column; align-items: stretch; }
    .pagos-segmentado, .pagos-segmentado-corto { min-width: 0; width: 100%; }
    .pagos-tabla-locales .campo-en-celda, .pagos-cajas .campo-en-celda { min-width: 0; }
    .pagos-fila-cajas > td.pagos-celda-cajas { padding: 0 0 12px !important; }
    .pagos-conc-cabecera { flex-wrap: wrap; }
    .pagos-conc-fila { grid-template-columns: minmax(0, 1fr) auto; }
    .pagos-conc-cifras, .pagos-conc-acciones { grid-column: 1 / -1; }
    .pagos-filtro, .pagos-filtro-fecha { width: calc(50% - 6px); }
    .pagos-total { margin-left: 0; }
    .pagos-zona { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .pagos-dos { grid-template-columns: minmax(0, 1fr); }
    .pagos-dialogo .mud-dialog-actions { flex-wrap: wrap; }
    .dp-franja { flex-wrap: wrap; }
    .dp-vivo { flex-basis: 100%; padding-left: 36px; }
    .dp-segmentado, .dp-segundos, .dp-tarjeta-simulada { min-width: 0; width: 100%; }
    .dp-segmentado { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dp-botones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dp-cobro-cifra { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
    .dp-importe { grid-row: auto; font-size: 2.25rem; }
    .dp-ultimos li { grid-template-columns: 4.5rem 4.5rem auto; }
    .dp-ultimos li .pagos-sub { grid-column: 1 / -1; }
}

/* ---- «Pedido y pago desde la mesa» en la ficha del establecimiento (tarea 13 de
   docs/central/plan-pedido-y-pago-desde-la-mesa-2026-10-12.md). Los campos son los compactos de «Ajustes técnicos»
   (.config-claves, app.css); aquí solo el estado de arriba, las propinas, las líneas del comensal y los movimientos, que
   reutilizan la tabla densa de «Pagos › Cobros» (apilada por debajo de 600 px). ------------------------------------------- */
.mesa-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mesa-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .875rem; line-height: 1.4; color: var(--limpia-tinta-2); }
.mesa-punto { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: 0 0 auto; }
.mesa-punto-bien { background: var(--limpia-bien-tinta); }
.mesa-punto-mal { background: var(--limpia-error-tinta); }
.mesa-estado-separador { color: var(--limpia-tinta-3); }
.mesa-estado .mesa-estado-pendientes.mud-button-root { min-block-size: 0; padding-block: 2px; }
.mesa-aviso.mud-alert { margin: 0; }
.mesa-aviso a, .mesa-comensal a, .mesa-panel .config-clave-ayuda a { white-space: nowrap; }
/* El relleno de .config-clave alinea los bloques entre sí; la rejilla se sale ese relleno para que el texto de los bloques
   empiece donde el del estado de arriba. */
.mesa-claves { margin-inline: -.75rem; }
.mesa-bloque { gap: .35rem; }
.mesa-subopciones { display: flex; flex-direction: column; padding-inline-start: 1.6rem; }
.mesa-subopciones .campo-casilla-control .mud-typography { font-weight: 450; }
.mesa-propinas { display: flex; flex-direction: column; gap: .35rem; margin-block: .25rem 0; }
.mesa-propinas-fichas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mesa-propina-nueva { display: inline-flex; align-items: center; gap: 2px; inline-size: 7.5rem; }
.mesa-propina-nueva .mud-input-control { margin: 0; }
.mesa-propina-nueva .mud-input.mud-input-filled { min-block-size: 32px; }
.mesa-propina-nueva .mud-input.mud-input-filled > input.mud-input-slot { block-size: 32px; padding-block: 0; padding-inline: 8px; }
.mesa-comensal { display: flex; flex-direction: column; gap: 6px; padding-block: 8px; border-block: 1px solid var(--limpia-borde-fino); }
.mesa-comensal-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: .875rem; line-height: 1.4; }
.mesa-comensal-icono { color: var(--limpia-tinta-3); }
.mesa-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mesa-movimientos { display: flex; flex-direction: column; gap: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--limpia-borde-fino); min-width: 0; }
.mesa-movimientos-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mesa-movimientos-vistas { display: flex; flex-wrap: wrap; gap: 6px; }
/* Pedir y pagar: dos bloques anchos (22rem como mínimo) para que sus avisos no queden en una columna estrecha. */
.mesa-interruptores { grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); }
/* «Reintentar» y «Devolver» en la misma celda: se parten en dos líneas antes que sacar la tabla de su caja. */
.mesa-tabla-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 4px; }
/* Las tres vistas, a la altura de los campos compactos (40 px con ratón; con el dedo, la de siempre). */
@media (pointer: fine) {
    .mesa-movimientos-vistas .mud-button-root { min-block-size: 32px; block-size: 32px; padding-block: 0; }
}