/* LA DENSIDAD COMPACTA DE LA CENTRAL (2026-10-14; docs/central/densidad-compacta-2026-10-14.md).

   La queja del dueño, con la captura de «Cuenta · Pruebas» en Pagos: «no sé por qué haces las cajas tan grandes; que sea
   todo más discreto; revisa la web entera». Los campos medían 64-77 px (la etiqueta flotante de MudBlazor DENTRO de la
   caja más el relleno de Material), los botones 40-48 y los avisos llevaban 15 px de letra con 9 px de relleno.

   UNA DENSIDAD, AQUÍ, Y NO PANTALLA A PANTALLA. Es la del arreglo de «Ajustes técnicos» (2026-10-12) hecha regla de toda
   la central:
     - campos y desplegables de 40 px, con la ETIQUETA PEQUEÑA ENCIMA (12 px, 600) y no flotando dentro;
     - lo escrito a 14 px, la ayuda y el error debajo a 12 px;
     - botones de 36 px (32 los pequeños), avisos con relleno de 6 × 12 px y letra de 13;
     - diálogos con 20 px de margen y título de 17 px; tablas de filas de 40 px.
   Por debajo de 600 px (el teléfono) todo lo que se pulsa vuelve a 44 px: el dedo no encoge. Los campos siguen a 16 px
   de letra en el teléfono (nitida.css 4.1: Safari amplía la página con menos).

   VA LA ÚLTIMA en index.html, detrás de nitida.css, y gana por orden; donde MudBlazor pesa más (la etiqueta flotante,
   seis clases) el selector lleva una más, `:not(.densidad-libre)`, que es también la salida para un campo que de verdad
   quiera la etiqueta dentro. Solo fichas: ni un color. */

:root {
    --densidad-campo: 40px;
    --densidad-boton: 36px;
    --densidad-boton-pequeno: 32px;
    --densidad-letra: 0.875rem;
    --densidad-letra-pequena: 0.8125rem;
    --densidad-rotulo: 0.75rem;
    --densidad-ayuda: 0.75rem;

    /* Las fichas de toque de la web vieja (48 px en plano.css y app.css, 44 en plano.css) son la misma pregunta, y se
       contestan aquí: en el escritorio, el alto de un botón. */
    --tentalo-toque: var(--densidad-boton);
    --plano-toque: var(--densidad-boton);
    --plano-toque-movil: var(--densidad-boton);
}

@media (max-width: 600px) {
    :root {
        --densidad-campo: 44px;
        --densidad-boton: 44px;
        --densidad-boton-pequeno: 44px;
    }
}

/* =====================================================================================================================
   1. LOS CAMPOS: etiqueta encima, caja de 40 px, letra de 14
   ===================================================================================================================== */

/* El margen de cada campo es el denso de MudBlazor (4 px arriba y abajo): todos los campos son densos
   (DensidadCompactaTests). No se fija aquí: pisaría el `margin: 0` de las filas de filtros (Pagos › Cobros). */

.mud-input-control:not(.mud-input-control-boolean-input) > .mud-input-control-input-container { display: flex; flex-direction: column; }

/* La etiqueta, encima: siete clases contra las seis de MudBlazor (la flotante enfocada, densa y rellena). */
.mud-input-control > .mud-input-control-input-container > .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol:not(.densidad-libre) {
    position: static;
    order: -1;
    transform: none;
    max-inline-size: 100%;
    margin: 0 0 4px;
    padding: 0;
    overflow: hidden;
    color: var(--limpia-tinta-2);
    font-size: var(--densidad-rotulo);
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: auto;
}

/* La caja: 40 px con lo escrito centrado, sin el hueco que Material guardaba para la etiqueta. */
.mud-input-control .mud-input:is(.mud-input-filled, .mud-input-outlined, .mud-input-text) {
    min-block-size: var(--densidad-campo);
    align-items: center;
}

/* Cuatro clases y el elemento, como la regla de relleno más pesada de MudBlazor (rellena y densa): gana por orden. */
.mud-input-control .mud-input > input.mud-input-slot.mud-input-root,
.mud-input-control .mud-input > div.mud-input-slot.mud-input-root {
    box-sizing: border-box;
    min-block-size: var(--densidad-campo);
    padding-block: 0;
    font-size: var(--densidad-letra);
    line-height: 20px;
}

.mud-input-control .mud-input > input.mud-input-slot.mud-input-root { block-size: var(--densidad-campo); }

.mud-input-control .mud-input > div.mud-input-slot.mud-input-root {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-block: 2px;
}

/* EL VALOR DE UN DESPLEGABLE (2026-11-08, repaso de la ficha del evento: «Boda» quedaba 8 px más arriba que «Boda García» en la misma fila).
   MudSelect pinta su valor en ese div con style="display:inline", que gana al flex de arriba: el texto se iba arriba de la caja. Con el mismo
   relleno que deja la línea de 20 px en el centro de los 40, queda donde el de un campo de texto. */
.mud-input-control .mud-input > div.mud-input-slot.mud-input-root[style*="display:inline"] {
    padding-block: calc((var(--densidad-campo) - 20px) / 2);
}

/* El texto de varias líneas: 8 px arriba y abajo, sin el margen ni la máscara de la etiqueta flotante. */
.mud-input-control .mud-input > textarea.mud-input-slot.mud-input-root {
    box-sizing: border-box;
    margin-block-start: 0;
    padding-block: 8px;
    -webkit-mask-image: none;
    mask-image: none;
    font-size: var(--densidad-letra);
    line-height: 1.45;
}

/* Los iconos de dentro (el calendario, el reloj, la flecha del desplegable, el borrar): sin el aro de 48 px. */
.mud-input-control .mud-input-adornment { margin-block: 0; }
.mud-input-control .mud-input-adornment .mud-icon-button { padding: 4px; }
.mud-input-control .mud-input-adornment .mud-icon-root { font-size: 1.25rem; }
.mud-input-adornment-start.mud-input-root-filled-shrink { margin-block-start: 0; }

/* La ayuda y el error, debajo y pequeños. */
.mud-input-control .mud-input-control-helper-container { margin-block-start: 3px; }
.mud-input-control .mud-input-helper-text {
    font-size: var(--densidad-ayuda);
    line-height: 1.35;
}

/* El canto de Outlined (el `fieldset` con la muesca de la etiqueta) no se pinta: la etiqueta ya no va en él. */
.mud-input.mud-input-outlined > .mud-input-outlined-border legend { display: none; }

/* Los campos compartidos (CampoTexto y los demás de Components/Campos) con menos aire debajo. */
.campo { margin-bottom: 0.5rem; }

/* =====================================================================================================================
   2. LOS BOTONES: 36 px (32 los pequeños, 40 los grandes), letra de 14
   ===================================================================================================================== */

/* UNA CLASE Y NADA MÁS (`.mud-button`, que llevan los botones con texto y no los de icono): gana por orden a MudBlazor y a
   plano.css (`.mud-button-root`, una clase) y PIERDE contra cualquier regla de una pieza concreta, que pesa dos o más (la
   lupa del buscador y «Nuevo» se quedan en icono en el teléfono con `font-size: 0`, plano.css §8). */
.mud-button {
    min-block-size: var(--densidad-boton);
    padding-block: 0;
    padding-inline: 14px;
    font-size: var(--densidad-letra);
    line-height: 1.25;
}

.mud-button:where([class*="-size-small"]) {
    min-block-size: var(--densidad-boton-pequeno);
    padding-inline: 10px;
    font-size: var(--densidad-letra-pequena);
}

.mud-button:where([class*="-size-large"]) { min-block-size: calc(var(--densidad-boton) + 4px); }

.mud-button .mud-button-icon-start { margin-inline: -2px 6px; }
.mud-button .mud-button-icon-end { margin-inline: 6px -2px; }

/* El de icono suelto: 36 px (32 el pequeño) en el escritorio; en el teléfono, 44. */
.mud-icon-button { padding: 6px; }
.mud-icon-button-size-small { padding: 4px; }

@media (max-width: 600px) {
    .mud-icon-button { min-inline-size: 44px; min-block-size: 44px; }
}

/* EL DEDO NO ENCOGE TAMPOCO CON EL TELÉFONO TUMBADO (2026-10-31, «Arregla el responsivo»). A 844 × 390 la central se pinta con la
   disposición de escritorio (más de 720 px) y los botones se quedaban en 32-36 px y los «⋮» en 28: con toque (`pointer: coarse`,
   un teléfono o una tableta) todo lo que se pulsa vuelve a 44, como por debajo de 600 px. Los campos se quedan en 40. Con ratón
   no cambia nada. */
@media (pointer: coarse) {
    :root {
        --densidad-boton: 44px;
        --densidad-boton-pequeno: 44px;
    }

    .mud-icon-button { min-inline-size: 44px; min-block-size: 44px; }

    /* Los botones de los avisos con pregunta (ShowMessageBoxAsync: «Volver» / «Guardar igualmente») se quedaban en 27 px a 360-430
       (medido el 2026-11-13 con «Ninguna familia ganará puntos»). */
    .mud-dialog .mud-dialog-actions .mud-button-root { min-block-size: 44px; }
}

/* =====================================================================================================================
   3. LOS AVISOS: relleno pequeño y letra de 13
   ===================================================================================================================== */

.mud-alert {
    padding: 6px 12px;
    font-size: var(--densidad-letra-pequena);
    line-height: 1.45;
}

.mud-alert .mud-alert-message { padding-block: 3px; }
.mud-alert .mud-alert-icon { margin-inline-end: 8px; padding-block: 3px; }
.mud-alert .mud-alert-icon .mud-icon-root { font-size: 1.125rem; }

/* En una hoja o un diálogo el aviso ocupa su ancho: el tope de prosa (plano.css 7.7) es para la página. */
.mud-dialog .mud-alert { max-inline-size: none; }

/* =====================================================================================================================
   4. LOS DIÁLOGOS: márgenes de 20 px, título de 17
   ===================================================================================================================== */

.mud-dialog .mud-dialog-title { padding: 16px 20px 6px; font-size: 1.0625rem; }
.mud-dialog .mud-dialog-content { padding: 8px 20px 12px; font-size: var(--densidad-letra); }
.mud-dialog .mud-dialog-actions { padding: 10px 20px; }

.mud-dialog-centerright .mud-dialog .mud-dialog-title { padding: 16px 20px 6px; }
.mud-dialog-centerright .mud-dialog .mud-dialog-content { padding: 8px 20px 16px; }
.mud-dialog-centerright .mud-dialog .mud-dialog-actions { padding: 10px 20px; }

/* =====================================================================================================================
   5. LAS TABLAS DE MUDBLAZOR: densas
   ===================================================================================================================== */

.mud-table .mud-table-cell { padding-block: 6px; font-size: var(--densidad-letra); }
.mud-table .mud-table-head .mud-table-cell { padding-block: 8px; }
.mud-simple-table table * tr > td,
.mud-simple-table table * tr > th { padding-block: 6px; font-size: var(--densidad-letra); }

/* =====================================================================================================================
   6. LA CAJA DE COLOR (CampoColor) Y EL ESTILO DE UNA REGLA DEL MONITOR
   ===================================================================================================================== */

/* La caja de color: etiqueta encima, la muestra del color DENTRO a la izquierda (el adorno de MudBlazor pintado con
   --campo-color-muestra, que pone el componente), el hex entero y «Sin color» al lado, a la altura de la caja. */
.campo-color {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 8px;
    margin-bottom: 0.5rem;
}

.campo-color .campo-color-caja { flex: 0 1 12rem; min-inline-size: 9.5rem; margin-bottom: 0; }
.campo-color .campo-color-caja input.mud-input-slot { font-variant-numeric: tabular-nums; text-transform: uppercase; }

.campo-color .campo-color-caja .mud-input-adornment-start { margin-inline: 6px 0; }
.campo-color .campo-color-caja .mud-input-adornment-start .mud-icon-root {
    color: var(--campo-color-muestra);
    font-size: 1.5rem;
    filter: drop-shadow(0 0 1px var(--limpia-tinta-3));
}

.campo-color-vacio .campo-color-caja .mud-input-adornment-start .mud-icon-root { color: var(--limpia-tinta-3); filter: none; }

/* «Sin color», a la altura de la caja: debajo del rótulo (12 px × 1,3 + 4) y del margen del control (4). */
.campo-color .campo-color-vaciar.mud-button {
    min-block-size: var(--densidad-campo);
    margin-block-start: calc(0.75rem * 1.3 + 8px);
}

.campo-color-sin-etiqueta .campo-color-vaciar.mud-button { margin-block-start: 4px; }
.campo-color .campo-color-error { flex-basis: 100%; margin: 0; }

/* Las propiedades de estilo de una regla: una fila por propiedad, nombre · valor · papelera, a la misma altura. */
.regla-estilo-filas { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--limpia-borde-fino); }

.regla-estilo-fila {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-block-size: calc(var(--densidad-campo) + 8px);
    padding-block: 2px;
    border-block-end: 1px solid var(--limpia-borde-fino);
}

.regla-estilo-nombre { color: var(--limpia-tinta-2); font-size: var(--densidad-letra-pequena); font-weight: 600; }
.regla-estilo-valor { min-inline-size: 0; }
.regla-estilo-valor .campo-color { margin: 0; }
.regla-estilo-valor .mud-input-control { margin-block: 0; }
.regla-estilo-quitar.mud-icon-button { color: var(--limpia-tinta-3); }
.regla-estilo-quitar.mud-icon-button:hover { color: var(--limpia-error-tinta); }

@media (max-width: 600px) {
    .regla-estilo-fila { grid-template-columns: minmax(0, 1fr) auto; }
    .regla-estilo-nombre { grid-column: 1 / -1; padding-block-start: 6px; }
}

/* =====================================================================================================================
   7. LO QUE EL BARRIDO DE LA WEB ENTERA ENCONTRÓ (tools/central/barrer-densidad.mjs)
   ===================================================================================================================== */

/* El cajón de la vista previa del diseñador de impresión, CERRADO, se quedaba a la derecha de la ventana y ensanchaba
   la página 26rem (documento de 1.856 px a 1.440; 807 a 390): desplazamiento horizontal en el diseñador. Cerrado no
   ocupa nada. */
.impresion-editor-cajon.mud-drawer.mud-drawer--closed { display: none; }

/* El esqueleto de carga (App.razor, 26rem) no ensancha la página de un teléfono: 444 px de documento a 390. */
.mud-skeleton { max-inline-size: 100%; }

/* «Pagos › Cuentas, Establecimientos y cajas, Medios de pago»: las columnas por su contenido también en el escritorio.
   `.admin-tabla .mud-sm-table .mud-table-root` (app.css) fija `table-layout: fixed` y ganaba al `auto` de plano-pagos.css:
   columnas a partes iguales y «Editar» cortado por la derecha a 1.440 px (lo mismo que arregló «Cobros» el 2026-10-14). */
@media (min-width: 720px) {
    .admin-tabla:is(.pagos-tabla-cuentas, .pagos-tabla-locales, .pagos-tabla-medios) .mud-sm-table .mud-table-root { table-layout: auto; width: 100%; }
    .pagos-tabla-cuentas .pagos-celda-acciones { width: 1%; white-space: nowrap; }
}

/* Entre 720 y 960 px la tabla de cuentas va apilada y «Comprobar» y «Editar» no cabían junto al «⋮» (se montaban): con
   el menú basta, que tiene las tres acciones (como en el teléfono). */
@media (max-width: 959.98px) {
    .pagos-tabla-cuentas .pagos-celda-acciones .crud-boton { display: none; }
}

/* Los rangos de fechas con «Buscar» (presencia, mi presencia, Veri*factu): el botón medía 68 px de alto y la tercera
   parte de la fila (`.crud-fechas > *` de app.css lo estiraba como a los campos). Ahora los campos miden lo que una
   fecha y el botón lo de un botón, a la altura de la caja de los campos. */
.crud-fechas { align-items: flex-end; }
.crud-fechas > .mud-picker,
.crud-fechas > .mud-input-control { flex: 0 1 12rem; }
.crud-fechas > .mud-button { flex: 0 0 auto; min-block-size: var(--densidad-campo); margin-block-end: 4px; }

/* Los filtros de «Pagos › Cobros» van en UNA fila desde 720 px (plano-pagos.css), y los siete no caben hasta unos 1.200:
   a 768 px «Adquirente» y el contador salían por la derecha (documento de 851 px). Hasta 1.200, en dos filas. */
@media (min-width: 720px) and (max-width: 1199.98px) {
    .pagos-filtros-compactos { flex-wrap: wrap; }
}