/* La hoja de la lista. Viaja con la biblioteca y el anfitrion la enlaza asi:

       <link rel="stylesheet" href="/lista.css" />

   **Todo cuelga de .listaia, que es la raiz que dibuja ListaCompleta.** Antes esto vivia
   en app.css junto a las reglas del marco de la pagina -html, body, h1, .boton- y sin
   ambito ninguno. Alojada en otra aplicacion, esa mezcla le pisaba el marco al anfitrion:
   en el puente de GesNetIA hubo que reordenar los <link> para que su propia hoja ganara, y
   aun asi seguia siendo un apano. Ahora la hoja no puede alcanzar nada que este fuera de
   la lista, porque no hay un solo selector que empiece por otra cosa.

   Lo del marco -que la pagina ocupe la ventana y no crezca- se quedo en app.css, en la
   aplicacion: eso es de la pagina suelta y no del componente.

   Los colores, los tamanos y la tipografia no estan aqui: son variables que emite
   TemaCss desde TemaLista, que es de donde leen lo mismo ListaIA.Nat y ListaIA.Ava.
   El anfitrion tiene que dibujar <TemaCss /> en su cabecera, antes de esta hoja. */

/* La raiz. Se lleva el alto que le de el contenedor -sea la ventana, una pestana o un
   panel- y reparte: la franja arriba, el cuerpo con lo que sobre.

   La letra y los colores se ponen AQUI y no se heredan del body, y esa es justamente la
   diferencia entre una pagina y un componente: alojada, el body es del anfitrion y trae
   lo que a el le convenga. */
.listaia {
    display: flex;
    flex-direction: column;
    /* Del contenedor, no de la ventana. Un anfitrion que le de alto a su hueco -una
       pestana, un panel- ya deja la lista dentro; uno que no se lo de la vera vacia, que
       es lo mismo que le pasaria a cualquier otro contenido en flex. */
    height: 100%;
    /* Obligatorio, no una precaucion: sin el, un hijo flexible no baja de su tamano de
       contenido y la lista empuja hacia abajo en vez de repartirse lo que hay. */
    min-height: 0;
    font-family: var(--tipografia);
    font-size: var(--tamano-base);
    color: var(--texto);
    background: var(--fondo-grilla);
}

/* La franja de titulo, la misma que en ListaIA.Nat y ListaIA.Ava. Estuvo un tiempo sin
   ella -el titulo iba a la pestana del navegador y nada mas-, y era una diferencia de
   verdad: quien abria las tres veia dos pantallas con banner y una sin el. */
.listaia .franja-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--alto-franja);
    background: var(--fondo-titulo);
    color: var(--texto-titulo);
    font-size: var(--tamano-titulo);
    font-weight: 700;
    /* Un titulo mas largo que la ventana se corta con puntos suspensivos en vez de
       partirse en dos renglones y descuadrar la franja. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 1rem;
    box-sizing: border-box;
}

.listaia .franja-titulo {
    flex: none;
}

/* Todo lo que va debajo de la franja lleva el aire que antes ponia el body. */
.listaia .cuerpo {
    flex: 1;
    /* min-height: 0 es obligatorio y no una precaucion: sin el, un hijo flexible no baja
       de su tamano de contenido y el cuerpo empuja la pagina hacia abajo en vez de
       repartirse lo que hay. Es la linea que hace que todo lo demas funcione. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Poco aire, y a proposito: en una lista el sitio es para las filas. Los 8 pixeles
       son los mismos que deja la barra de botones de ListaIA.Ava, asi que el borde de la
       ventana se lee igual en las tres.

       El de abajo lo lee ademas lista.js para saber cuanto queda de ventana, asi que
       cambiarlo aqui ya ajusta la cuenta: no hay un segundo sitio que tocar. */
    padding: .5rem;
}

/* La pestana al frente reparte el alto entre la grilla y lo que la rodea. */
.listaia .hoja {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Lo que rodea a la grilla mide lo que mide y no se estira. */
.listaia .barra,
.listaia .barra-filtro,
.listaia .pie-lista {
    flex: none;
}

/* ------------------------------------------------------------------- la lista */
/* La grilla trae su propia hoja dentro del paquete (bordes, encabezado pegajoso,
   flechas de orden). Lo de aqui es solo lo que ListaIA agrega encima: el tamano de
   letra, las filas dadas de baja y la barra de paginacion, que es propia. */

/* --------------------------------------------------------------- las pestanas */
/* Una por eslabon de la cadena de hijas. Con una sola entidad no se dibujan. */

.listaia .pestanas {
    display: flex;
    gap: .25rem;
    /* Pegada a la barra de botones, que va ENCIMA -una sola para la lista, como en el
       escritorio- y a la hoja que va debajo: los 16 pixeles que habia aqui separaban la
       banda de pestanas de la barra como si fueran dos zonas distintas, y son la misma
       cabecera de la lista. */
    margin: 0 0 .25rem;
    border-bottom: 1px solid var(--linea-grilla);
}

.listaia .pestana {
    padding: .5rem 1.1rem;
    font: inherit;
    color: var(--texto);
    background: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    /* La linea del contenedor pasa por debajo de las apagadas y se rompe bajo la
       encendida, que es lo que la deja unida a su contenido. */
    margin-bottom: -1px;
}

.listaia .pestana:hover {
    background: var(--fondo-barra-filtro);
}

.listaia .pestana.activa {
    color: var(--texto);
    font-weight: 600;
    background: var(--fondo-grilla);
    border-color: var(--linea-grilla);
    border-bottom: 1px solid var(--fondo-grilla);
    cursor: default;
}

/* La (x) de una pestana ajena -el editor de un registro-. Las de la cadena de entidades no
   la llevan: esas son la lista y no se cierran.

   Va dentro del boton de la pestana, asi que su clic para la propagacion (@onclick:stopPropagation)
   o cerrar seria tambien elegir. El cuadrado es holgado a proposito: un aspa del tamano de su
   letra es un blanco que hay que apuntar. */
.listaia .pestana .cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: .45rem;
    border-radius: 3px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.listaia .pestana .cerrar:hover {
    background: var(--fondo-barra-filtro);
}

/* El contenido de una pestana. Las que no estan al frente llevan hidden, que ya las
   esconde; esto solo evita que su hueco cuente. */
.listaia .hoja[hidden] {
    display: none;
}

/* Mientras la lista no sabe cuantas filas caben, esta dibujada pero no se ve.

   Es visibility y no display: lo que se esconde tiene que seguir OCUPANDO SU SITIO, porque
   lo que se esta midiendo es precisamente cuanto sitio hay. Con display:none la medida
   daria cero y no habria nada que decidir.

   Dura un pase de layout: se levanta en cuanto el observador de tamano entrega su primer
   aviso. Ver el comentario de PanelLista.asentado. */
.listaia .midiendo {
    visibility: hidden;
}

/* Una vista ancha no puede empujar la pagina: el que se desplaza es este marco. Dentro
   van la grilla y la banda de totales, y por eso la banda se corre con la grilla sin una
   linea de JavaScript: es el marco el que se mueve, con las dos dentro. */
.listaia .marco-lista {
    max-width: 100%;
    /* Se lleva el alto que sobra, y lo que no entre se desplaza AQUI DENTRO. Esta es la
       red que hace que el panel de paginas no pueda caerse de la ventana. */
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.listaia .lista {
    background: var(--fondo-grilla);
    /* La letra se repite aqui y no se hereda del body a proposito: QuickGrid trae su
       propia hoja y la tabla acababa dibujandose con la del navegador, que es una serif.
       Se veia como si el tema no se hubiera aplicado, y si estaba aplicado. */
    font-family: var(--tipografia);
    font-size: var(--tamano-base);
    /* Los anchos los emite la banda de totales, columna por columna, y valen para las dos
       tablas. Sin table-layout: fixed el navegador los recalcularia por contenido y cada
       tabla llegaria a un reparto distinto. */
    table-layout: fixed;
    /* Y con el mismo modelo de bordes que la banda. QuickGrid deja el de por defecto
       -separate, con 2 pixeles entre celdas-, y esos 2 pixeles por columna se van sumando
       contra una banda que colapsa: 48 al llegar a la ultima de 23. */
    border-collapse: collapse;
}

    .listaia .lista td, .listaia .lista th {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* El ancho que se les fija tiene que incluir el relleno en las DOS tablas. Sin
           esto, cada celda de la banda medía 14 pixeles mas que su columna -su relleno- y
           el desfase se iba sumando: la ultima quedaba a 286 pixeles de la suya. */
        box-sizing: border-box;
    }

/* La cuadricula: una linea entre cada dos celdas y el marco alrededor. Es lo que en
   ListaIA.Nat dibuja el DataGridView por su cuenta; QuickGrid no trae ninguna -su tema
   por defecto no pone un solo borde de celda-, asi que aqui se ponen a mano.

   VA A LAS DOS TABLAS Y CON LA MISMA LINEA, y no es simetria decorativa. Los anchos que
   emite BandaTotales valen para la grilla y para la banda, y con box-sizing: border-box el
   borde se descuenta del ancho: puesto en una sola, esa columna tendria dos pixeles menos
   de contenido que su gemela y la banda volveria a caer corrida, que es el fallo que la
   pasada por navegador tardo tres capas en encontrar.

   Con border-collapse: collapse -que ya tenian las dos- las lineas de celdas vecinas se
   funden en una: no hay que descontar nada entre columnas ni entre filas. */
.listaia .lista th,
.listaia .lista td,
.listaia .totales td {
    border: 1px solid var(--linea-grilla);
}

/* Debajo del encabezado, una linea mas marcada: separa los titulos de los datos, que es
   como se lee una grilla clasica. Al colapsar contra el borde de la primera fila gana la
   mas gruesa, asi que no suma alto. */
.listaia .lista thead th {
    background: var(--fondo-cabecera);
    border-bottom: 2px solid var(--linea-grilla);
    /* Alto fijo y no relleno, por lo mismo que en .barra-filtro.

       **Y su propia medida, no la de las franjas.** Llevaba --alto-franja, los 40 de la de
       titulo y la de totales, que son bandas de la ventana; esta es la primera fila de la
       grilla. Con aquello media 40 aqui y en Avalonia, y 23 en ListaIA.Nat, que no la fijaba
       y se la dejaba al DataGridView.

       Las FILAS DE DATOS llevan el alto del tema, que es el mismo que en las dos de
       escritorio: sin el, cada navegador daba el suyo segun el relleno. */
    height: var(--alto-cabecera);
    vertical-align: middle;
}

/* **El titulo de la columna en seminegrita**, que es lo que lo separa de los datos de debajo.
   Lo mismo en las otras dos: ver el estilo de TableViewColumnHeader en ListaIA.Ava y
   TemaNat.Encabezado en ListaIA.Nat, y el th de la grilla de detalle, que ya iba en 600.

   El selector es asi de largo por lo mismo que el de .col-header-content, un poco mas abajo:
   QuickGrid pone .quickgrid[theme=default] > thead > tr > th { font-weight: normal }, y su
   hoja se carga DESPUES que esta. Con .listaia .lista thead th no bastaba -empata en clases y
   pierde en elementos-, asi que van cuatro contra dos y ya no depende del orden.

   El rotulo es un <button> y hereda: lleva font: inherit, ver .titulo-columna. */
.listaia .lista.quickgrid[theme] > thead > tr > th {
    font-weight: 600;
}

/* **El alto lo pone el td, y el envoltorio se conforma con el.**
   Las dos mitades hicieron falta. Con el alto solo en el td y un envoltorio que se
   estiraba con line-height, la fila crecia de 26 a 30: el td tiene box-sizing border-box
   y su caja de contenido mide menos que el alto pedido. Y con el alto solo en el
   envoltorio, las filas que QuickGrid dibuja MIENTRAS CARGA -que vienen sin contenido, y
   por tanto sin envoltorio- se quedaban en nada: la grilla aparecia unos segundos como un
   amasijo de renglones pegados antes de llenarse. */
.listaia .lista tbody td {
    height: var(--alto-fila);
    padding: 0;
    vertical-align: middle;
}

/* El envoltorio que hace pulsable la celda entera.
   El alto se da con line-height y no con height: asi el texto queda centrado sin
   necesidad de flex, que en una celda con puntos suspensivos se lleva mal con el
   recorte. Los puntos suspensivos se repiten aqui porque el contenido ya no es hijo
   directo del td: los del td recortan al td, no a este. */
.listaia .lista tbody td .celda {
    display: flex;
    align-items: center;
    /* El 100% es del hueco que deja el td, bordes descontados, asi que llena la celda sin
       hacerla crecer. Es lo que hace pulsable toda la fila sin tocar su alto. */
    height: 100%;
    box-sizing: border-box;
    padding: 0 .4rem;
    /* Flecha y no cursor de texto: la celda se pulsa, no se escribe en ella. */
    cursor: default;
}

/* Los puntos suspensivos van en el texto y no en el envoltorio: dentro de un contenedor
   flex, el texto suelto es un elemento anonimo y text-overflow no lo alcanza. El
   min-width: 0 es el que le permite encogerse por debajo de su contenido, que es la
   condicion para que llegue a recortar. */
.listaia .lista tbody td .celda .texto {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La celda de una columna booleana: una casilla centrada, que se ve y no se toca. El
   centrado va aqui y no en el td: la celda es un flex, y el text-align que QuickGrid le
   pone al td no alcanza a lo que hay dentro de un flex. */
.listaia .lista tbody td .celda.casilla {
    justify-content: center;
}

    /* Sin el margen de serie, que la descentra; y sin recibir el raton, para que pulsarla
       sea pulsar la celda -elegir la fila, abrirla con doble clic- y no cambiar un valor
       que la lista no graba. Con pointer-events el navegador la dibuja como una casilla
       normal, no apagada como con disabled. */
    .listaia .lista tbody td .celda.casilla input[type=checkbox] {
        margin: 0;
        pointer-events: none;
    }

/* Una fila anulada o desactivada, en blanco humo, igual que en las dos de escritorio. */
.listaia .lista tr.baja td {
    background: var(--fondo-fila-inactiva);
}

/* Y una marcada, en el azul de seleccion. Le gana a la de baja: una fila anulada que el
   usuario acaba de marcar tiene que verse marcada, que es lo que le acaba de hacer. */
.listaia .lista tr.marcada td,
.listaia .lista tr.baja.marcada td {
    background: var(--fondo-fila-marcada);
    color: var(--texto-fila-marcada);
}

/* La banda de totales: la misma anchura de columna que la grilla, pegada abajo. */
.listaia .totales {
    table-layout: fixed;
    border-collapse: collapse;
    font-family: var(--tipografia);
    font-size: var(--tamano-base);
    font-weight: 600;
    background: var(--fondo-totales);
    /* La linea que la separa de la grilla ya la trae el borde de sus propias celdas. Habia
       aqui un border-top y con la cuadricula puesta quedaban dos: son tablas distintas, asi
       que ese borde y el de las celdas no colapsan entre si. */
}

    .listaia .totales td {
        padding: .3rem .5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Ver la nota de .lista td: el relleno va dentro del ancho, o la banda se corre.
           Y ademas es lo que hace que los 40 de alto sean los de fuera. */
        box-sizing: border-box;
        /* La misma altura que la barra de encabezado y que la de filtro. */
        height: var(--alto-franja);
        vertical-align: middle;
    }

    .listaia .totales td.derecha {
        text-align: right;
    }

    .listaia .totales td.centro {
        text-align: center;
        font-weight: 400;
        color: var(--texto);
    }

    /* Anulado (documentos) o desactivado (maestros): la misma senal que en las dos
       aplicaciones de escritorio. */
    /* El texto de una baja no cambia de color ni se inclina: en ListaIA.Nat y en
       ListaIA.Ava lo unico que la distingue es el fondo. */
    .listaia .lista tr.baja td {
        font-style: normal;
    }

/* La barra de botones. Los principales a la izquierda y los de icono a la derecha, en
   el mismo orden que en el escritorio.

   Naranja, el de la franja de titulo: ver TemaLista.FondoCuadroHerramientas, que cuenta por
   que es el mismo color y no uno parecido.

   **El relleno es solo a los lados, y eso fija el alto del cuadro.** Con relleno arriba y
   abajo la franja mide lo que el boton MAS ese relleno -50 se volvieron 64- y el alto deja
   de ser un numero que se pueda leer en TemaLista. Sin el, el cuadro mide exactamente
   AltoBotonAccion, que es lo que se quiere poder decir: "el cuadro de herramientas mide 48".
   El aire de arriba y abajo lo da la propia caja negra del boton, que ya lo trae dentro. */
.listaia .barra {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    /* Todos a la izquierda, en una sola fila: los de icono dejaron de ir pegados al otro
       borde el dia que se les puso rotulo y caja, como los demas. */
    justify-content: flex-start;
    align-items: center;
    /* El alto del cuadro sale de TemaLista y es SUYO, no el del boton: la caja negra mide
       AltoBotonAccion y va centrada dentro, asi que lo que sobra es el aire naranja de
       arriba y de abajo. Escrito como alto y no como relleno para que sea un numero que se
       lee, en vez de una suma. */
    /* Minimo y no fijo: los botones se parten en dos filas en una ventana estrecha, y con el
       alto clavado la segunda quedaria cortada. */
    min-height: var(--alto-cuadro-herramientas);
    padding: 0 8px;
    background: var(--fondo-cuadro-herramientas);
    /* Y pegada a lo que va debajo: la banda de pestanas, o la grilla cuando no hay banda.
       Llevaba 4 pixeles de margen de cuando iba debajo de las pestanas y encima de la
       grilla; encima de la banda ese aire la despegaba de sus pestanas, y en el escritorio
       la banda va pegada a la barra. Cada pixel que se le quita aqui es alto que gana la
       lista, y el borde de la cabecera de columnas ya separa las dos cosas sin margen. */
    margin: 0;
}

    .listaia .barra .principales {
        display: flex;
        gap: .25rem;
        align-items: center;
    }

/* -------------------------------------------------------------- la fila que desborda */

/* La fila de botones de una barra de herramientas, en las tres -lista, editor, rejilla-: es
   lo que dibuja BarraDesbordable, y por eso estas reglas NO van bajo .listaia. Una sola fila,
   siempre: lo que no cabe no baja de linea, se va bajo el boton de tres puntos (ver
   desborde.js). El min-width: 0 es lo que deja a la fila encogerse por debajo de sus botones
   dentro de una barra flex, que es la condicion para que el navegador vea que no caben.

   El recorte es SOLO a lo ancho, y es clip y no hidden: es para el instante entre que la
   fila se estrecha y el navegador dice cuantos caben, para que mientras tanto nada asome por
   la derecha. A lo alto tiene que quedar visible, que el desplegable de los puntos cuelga
   por debajo de la fila; con overflow: hidden se recortaba entero y el boton parecia no
   hacer nada. */
.fila-desbordable {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: clip;
    overflow-y: visible;
}

/* El boton de los puntos, ultimo de la fila, y su desplegable. El desplegable se abre hacia
   la IZQUIERDA: pegado al borde derecho de la fila, uno que abriera hacia la derecha se
   saldria. Blanco con el texto oscuro, como cualquier desplegable de la casa. */
.desborde-barra {
    position: relative;
    flex: 0 0 auto;
}

.desborde-barra .icono-signo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.desborde-barra .lista-desborde {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    min-width: 12rem;
    background: #FFFFFF;
    color: #333333;
    border: 1px solid #D0D0D0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.desborde-barra .lista-desborde button,
.desborde-barra .lista-desborde a {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.desborde-barra .lista-desborde button:hover,
.desborde-barra .lista-desborde a:hover {
    background: whitesmoke;
}

/* El dibujo, en chico, delante del rotulo; con el trazo del texto y no el blanco de la barra. */
.desborde-barra .lista-desborde .icono-barra {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: #333333;
}

/* Blanco sobre negro y en negrita, como en las dos de escritorio. Era la diferencia
   mas visible de las tres pantallas, porque la barra es lo primero que se mira. */
.listaia .boton-barra {
    min-width: 5rem;
    /* Dicho y no dejado al relleno: con padding el alto sale de la letra y de la caja que le
       de el navegador, y no tendria por que coincidir con el de Avalonia.

       **El mismo alto que la barra del EDITOR**, que se abre desde aqui y se ve al lado: dos
       barras de acciones a un palmo una de otra con alturas distintas se notan. Eran 32 las
       dos y ahora son 36 las dos. Si aqui cambia, hay que cambiar tambien
       .editoria .barra button, que lo lee de TemaEditor.AltoBarra. */
    height: 36px;
    padding: 0 .7rem;
    font-family: inherit;
    font-size: var(--tamano-barra);
    font-weight: 700;
    color: var(--texto-barra);
    background: var(--fondo-barra);
    border: 0;
    /* Las esquinas, apenas rebajadas: el numero es el mismo que usan las tres barras de
       escritorio, y llega desde TemaLista.RadioBotonAccion. */
    border-radius: var(--radio-boton-accion);
    cursor: pointer;
}

    .listaia .boton-barra:hover:not(:disabled) {
        background: var(--fondo-barra-sobre);
    }

    .listaia .boton-barra:active:not(:disabled) {
        background: var(--fondo-barra-pulsado);
    }

    .listaia .boton-barra:disabled {
        color: var(--texto-barra-apagado);
        background: var(--fondo-barra-apagado);
        cursor: default;
    }

/* Los botones que actuan sobre la seleccion: el dibujo arriba y el rotulo abajo, cada uno
   contra su borde. Es un anadido a .boton-barra y no otro boton, porque el color, el
   negro, la negrita y los tres estados son los mismos; lo que cambia es la caja.

   **Solo la ponen los de la barra.** .boton-barra la llevan tambien los Aceptar y Cancelar
   de todos los cuadros de la lista, y esos siguen siendo cajas de una linea: si esta regla
   fuera sobre .boton-barra, el Cerrar de la auditoria mediria 50 px de alto.

   El rotulo abajo con space-between y no con un margen: asi los siete quedan en la misma
   linea aunque un dibujo mida distinto que otro. Las tres medidas salen de TemaLista, que
   es de donde las lee tambien Avalonia. */
.listaia .boton-accion {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    min-width: var(--ancho-boton-accion);
    height: var(--alto-boton-accion);
    padding: 5px .7rem 6px;
    font-size: var(--tamano-rotulo-boton);
    line-height: 1;
}

    /* El dibujo pide su propia medida: la de .icono-barra es la de los botones cuadrados de
       la derecha, que son mas chicos. */
    .listaia .boton-accion .icono-barra {
        width: var(--icono-boton-accion);
        height: var(--icono-boton-accion);
    }

    /* Un boton que agrega la tabla por su extension no tiene dibujo -el nucleo no conoce su
       clave, ver BotonesBarra.IconoDe-, asi que su rotulo se centra en vez de quedar
       colgado del borde de abajo con el hueco del dibujo vacio encima. */
    .listaia .boton-accion.sin-dibujo {
        justify-content: center;
    }

/* El dibujo dentro del boton. Cuadrado, para que la grilla de 16 unidades sobre la que
   estan definidas las figuras no se deforme. */
.listaia .icono-barra {
    width: 1.15rem;
    height: 1.15rem;
}

/* El de la ayuda no es un dibujo sino un caracter (ver IconoBarra.razor). Ocupa la misma
   caja que los otros para que la fila de iconos no se descuadre. */
.listaia .icono-signo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

/* Lo que el boton contesta cuando la accion todavia no esta conectada. No es un error:
   por eso no se ve como el aviso de mas arriba. */
.listaia .mensaje {
    margin: 0 0 .75rem;
    padding: .5rem .75rem;
    font-size: .9rem;
    color: #33373d;
    background: #eef4fb;
    border-left: 3px solid #1b6ec2;
}

/* La columna de la casilla: angosta y centrada. El mismo ancho en las dos tablas, si no
   la banda de totales sale corrida una columna. */
.listaia .lista .marca,
.listaia .totales .marca {
    width: var(--ancho-columna-marca);
    width: 2.8rem;
    text-align: center;
    /* Sin esto la celda dibujaba unos puntos suspensivos al lado de cada casilla: la
       casilla mas el relleno llegaban justo al borde y el recorte de texto que llevan
       todas las celdas los daba por contenido que no cabe. Aqui no hay texto que recortar. */
    text-overflow: clip;
}

/* La ventana de Propiedades: una fila por columna. */
.listaia .modal.ancho {
    width: min(32rem, calc(100vw - 2rem));
}

.listaia .columnas {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

    .listaia .columnas th {
        padding: .25rem .4rem;
        font-weight: 600;
        text-align: left;
        border-bottom: 1px solid #dcdce0;
    }

    .listaia .columnas td {
        padding: .2rem .4rem;
        border-bottom: 1px solid #f0f0f2;
    }

    .listaia .columnas td.centro {
        text-align: center;
    }

/* El agarre del cuadro de Propiedades: de aqui se arrastra la fila. Solo el agarre lleva
   draggable, nunca la fila entera: arrastrando desde cualquier sitio, empezar a seleccionar
   el texto se convertiria en un arrastre. El cursor y el glifo son los que anuncian que eso
   se coge. Es el mismo reparto que en el cuadro de la rejilla (tabla.css) y en el escritorio. */
.listaia .columnas .agarre {
    width: 26px;
    padding: 0;
    text-align: center;
    color: #999999;
    cursor: grab;
    user-select: none;
}

.listaia .columnas .agarre:active {
    cursor: grabbing;
}

/* La fila que se esta llevando, mientras dura el gesto. Apagada y no resaltada: lo que
   interesa ver es donde va a caer, y eso ya lo dice que las demas se aparten. */
.listaia .columnas tr.arrastrando {
    opacity: 0.45;
}

/* La linea que dice como se cambia el orden, encima de la tabla. */
.listaia .modal .pista {
    margin: 0 0 .5rem;
    font-size: .85rem;
    color: #666666;
}

/* Marcadas algunas de la pagina pero no todas. El navegador solo dibuja el guion del
   estado intermedio si se lo pone JavaScript, asi que se dibuja aqui encima. */
.listaia .parcial {
    position: relative;
}

    .listaia .parcial::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: .5rem;
        height: 2px;
        background: #1b6ec2;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

/* ------------------------------------------------------- el orden y el filtro */

/* El encabezado de una columna: el titulo, el embudo y el icono de orden, en ese orden.

   Lleva contenedor propio porque una HeaderTemplate reemplaza entero lo que QuickGrid
   dibuja dentro del encabezado -su div .col-title con el rotulo y la flecha de orden-, y
   sin un contenedor los tres trozos quedarian sueltos repartiendose como les tocara. Lo
   que SI sobrevive es el .col-header-content que los envuelve, y de ahi las dos reglas de
   abajo. */
.listaia .encabezado {
    display: flex;
    align-items: center;
    /* Sin esto el titulo no se deja encoger y empuja los iconos fuera de la celda. */
    min-width: 0;
    /* Y QUE OCUPE TODA LA CELDA. QuickGrid mete lo que dibuja la HeaderTemplate dentro de
       un div propio, .col-header-content, que es display: flex; esta caja es entonces un
       elemento flex, y un elemento flex NO CRECE si no se le dice. Sin esto medía lo que
       su contenido y se quedaba pegada a la izquierda de la celda: los iconos salían justo
       detras del titulo en vez de en el borde derecho, y el centrado del titulo se hacía
       sobre esa caja encogida y no sobre la celda. */
    flex: 1;
}

/* El hueco que ese div de QuickGrid deja a la derecha. Su tema por defecto le pone
   padding-right: var(--col-gap) -1rem- para dejar sitio a la manija de redimensionar
   columnas; esta grilla no la usa, asi que ese hueco solo conseguia que los iconos no
   llegaran al borde de la celda.

   El selector es asi de largo a proposito: la regla del tema es .quickgrid[theme=default]
   .col-header-content, y la hoja de QuickGrid se carga DESPUES que esta, con lo que
   empatar en especificidad no bastaria. Van cinco clases contra tres -la raiz .listaia
   suma una-, asi que ya no depende del orden en que el anfitrion enlace las hojas. */
.listaia .lista.quickgrid[theme] .col-header-content {
    padding-right: 0;
    /* Y sin posicionar: QuickGrid lo hace relative para colgarle su menu de columna, que
       esta grilla no usa. Asi el tirador de abajo se coloca contra el th -que QuickGrid si
       posiciona- y queda en el borde de la celda, no en el borde de este div, que se queda
       un relleno mas adentro. */
    position: static;
}

/* El tirador con el que se cambia el ancho de la columna: una franja de seis pixeles pegada
   al borde derecho de la celda, invisible hasta que el cursor la anuncia. Se coloca contra el
   th, que QuickGrid posiciona -y su .col-header-content se deja sin posicionar arriba para
   que no se interponga-. Lo atiende lista.js. */
.listaia .encabezado .tirador {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 6px;
    cursor: col-resize;
    /* Sin esto el tirador solo se ve al pasar el raton, y esta bien asi: el borde de la
       celda ya dice donde esta. Al sobrevolarlo se marca, para que se vea que se agarra. */
    background: transparent;
}

    .listaia .encabezado .tirador:hover {
        background: var(--linea-grilla);
    }

/* Mientras se arrastra un borde, el cursor de redimensionar en toda la pagina y sin
   seleccionar texto: si no, al salirse del encabezado vuelve a ser una flecha y parece que
   se ha soltado. La clase la pone y la quita lista.js. */
body.listaia-redimensionando,
body.listaia-redimensionando * {
    cursor: col-resize !important;
    user-select: none;
}

/* Los iconos a la derecha y, a la izquierda, un hueco vacio que mide LO MISMO. Es lo que
   deja el titulo centrado en la celda y no en lo que sobra: sin el hueco, el centro del
   texto queda corrido media caja de iconos hacia la izquierda.

   El ancho es fijo, y son los mismos 38 pixeles que la cuenta de anchos reserva para el
   encabezado (ver AnchosDeColumna en PanelLista.razor). Ninguno de los dos se encoge:
   encogerse rompería la simetria, que es justo lo que sostiene el centrado. */
.listaia .encabezado .hueco,
.listaia .encabezado .iconos {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    width: 2.375rem;
}

/* El titulo va CENTRADO y se queda con lo que dejan el hueco y los iconos. Es un boton
   -pulsarlo ordena- asi que hay que devolverle la pinta de rotulo: un <button> trae
   fondo, borde y su propia tipografia. */
.listaia .titulo-columna {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: center;
    background: none;
    border: 0;
    cursor: pointer;
}

    .listaia .titulo-columna .texto {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .listaia .titulo-columna:hover {
        color: #1b6ec2;
    }

/* El icono de orden. Se dibuja SIEMPRE y ocupa su ancho aunque este apagado: asi se ve
   que la columna se puede ordenar, y el encabezado no cambia de ancho al pulsarlo. */
.listaia .orden {
    flex: none;
    width: 1rem;
    padding: 0;
    line-height: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

    .listaia .orden svg {
        width: .6rem;
        height: .6rem;
        /* Apagado: se ve que esta, no llama la atencion. Con veinte columnas, un triangulo
           oscuro en cada una seria ruido y no informacion. */
        fill: #d5d5da;
    }

    .listaia .orden:hover svg {
        fill: #9a9aa0;
    }

    /* Una sola forma para los dos sentidos: descendente es la misma girada, que es como se
       lee en cualquier grilla. */
    .listaia .orden.asc svg,
    .listaia .orden.desc svg {
        fill: #1b6ec2;
    }

    .listaia .orden.desc svg {
        transform: rotate(180deg);
    }

/* El embudo del encabezado. Apagado mientras la columna no tenga filtro, encendido
   cuando lo tiene, igual que en ListaIA.Nat y en ListaIA.Ava. */

.listaia .embudo {
    padding: 0;
    line-height: 0;
    background: none;
    border: 0;
    cursor: pointer;
    vertical-align: middle;
}

    .listaia .embudo svg {
        width: .8rem;
        height: .8rem;
        fill: #9a9aa0;
    }

    .listaia .embudo:hover svg {
        fill: #1b6ec2;
    }

    .listaia .embudo.activo svg {
        fill: #1b6ec2;
    }

/* Que esta filtrado, en castellano. Solo aparece cuando hay algo puesto.

   El margen es abajo y no arriba porque la barra dejo de ir al pie de la lista: ahora va
   pegada bajo la de botones, con la misma separacion que esta deja. */
.listaia .barra-filtro {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin: 0 0 .75rem;
    /* Solo a los lados: el alto lo fija height y no el relleno. Con relleno dependeria del
       tamano de letra y de lo alto que sea el boton de Limpiar, y esta barra dejaria de
       medir lo mismo que las otras dos en cuanto cualquiera de las dos cosas cambie. */
    padding: 0 .75rem;
    /* Las tres bandas de la lista miden igual: encabezado, filtro y totales. */
    height: var(--alto-barra-filtro, var(--alto-franja));
    box-sizing: border-box;
    background: var(--fondo-barra-filtro);
    border: 1px solid var(--linea-grilla);
    border-radius: 0;
}

    /* La palabra que presenta la cadena. En el azul de la banda y en negrita para que se
       lea como rotulo y no como la primera palabra de lo filtrado. */
    .listaia .barra-filtro .rotulo-filtro {
        font-weight: 600;
        color: var(--texto);
    }

    /* El campo donde se lee lo filtrado va un tono mas claro que su barra, para que se
       lea como el sitio donde vive el filtro. Es el mismo escalonado que en ListaIA.Nat. */
    .listaia .barra-filtro .descripcion {
        flex: 1;
        align-self: stretch;
        display: flex;
        align-items: center;
        padding: 0 .4rem;
        background: var(--fondo-campo-filtro);
    }

/* El cuadro de filtro. Sin JavaScript: el fondo es un div que ocupa la ventana y cierra
   al pulsarlo, y el cuadro para el clic para que pulsar dentro no lo cierre. */
/* ------------------------------------------------------------- menu contextual */

/* El fondo que cierra el menu al pulsar fuera. **Transparente y no oscurecido**, al reves
   que el de los cuadros: un menu no es un cuadro modal, no viene a interrumpir, y atenuar la
   lista detras diria lo contrario. Lo unico que hace es recoger el clic.

   Va por debajo del menu -un z-index menos- y por encima de todo lo demas. */
.listaia .menu-fondo {
    position: fixed;
    inset: 0;
    z-index: 110;
}

/* El menu. Fixed y colocado en las coordenadas del puntero: las que da el evento son de la
   ventana, asi que tiene que posicionarse contra ella y no contra la lista. Colgado de la
   grilla ademas lo recortaria su overflow. */
.listaia .menu-contextual {
    position: fixed;
    z-index: 111;
    min-width: 11rem;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    background: var(--fondo-grilla);
    border: 1px solid var(--gris-borde, #d0d0d0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.listaia .menu-contextual li {
    margin: 0;
}

/* La raya entre grupos: la de siempre y los de la tabla. */
.listaia .menu-contextual li.raya {
    height: 1px;
    margin: .25rem 0;
    background: var(--gris-borde, #d0d0d0);
}

/* Cada opcion ocupa el ancho entero: en un menu se apunta con el raton en vertical, y un
   boton que solo responde encima de su texto obliga a afinar. */
.listaia .menu-contextual button {
    display: block;
    width: 100%;
    padding: .3rem .9rem;
    text-align: left;
    font: inherit;
    color: var(--texto);
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.listaia .menu-contextual button:hover:not(:disabled) {
    background: var(--fondo-fila-marcada);
}

/* Apagada se ve apagada y no responde. Es el mismo criterio que en la barra: una opcion
   encendida que no hace nada al pulsarla es peor que una apagada, que al menos dice la
   verdad. */
.listaia .menu-contextual button:disabled {
    color: var(--texto-barra-apagado);
    cursor: default;
}

.listaia .modal-fondo {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    z-index: 100;
}

.listaia .modal {
    width: min(24rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: 1rem 1.1rem;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}

    .listaia .modal h3 {
        margin: 0 0 .75rem;
        font-size: 1.05rem;
    }

    .listaia .modal label {
        display: block;
        margin-bottom: .6rem;
        font-size: .85rem;
        color: #3b3b40;
    }

    .listaia .modal input[type=text],
    .listaia .modal input[type=date],
    .listaia .modal input[type=number],
    .listaia .modal select {
        display: block;
        width: 100%;
        margin-top: .15rem;
        padding: .35rem .4rem;
        font: inherit;
        font-size: .9rem;
        border: 1px solid #c9c9ce;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .listaia .modal .par {
        display: flex;
        gap: .6rem;
    }

        .listaia .modal .par label {
            flex: 1;
        }

.listaia .valores-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
    color: #3b3b40;
}

    .listaia .valores-titulo .todos input {
        margin-right: .2rem;
    }

.listaia .valores {
    max-height: 12rem;
    overflow-y: auto;
    margin: .25rem 0 .75rem;
    padding: .35rem .5rem;
    list-style: none;
    border: 1px solid #dcdce0;
    border-radius: 4px;
}

    .listaia .valores label {
        display: flex;
        gap: .35rem;
        align-items: center;
        margin: 0;
        padding: .1rem 0;
        font-size: .9rem;
        color: inherit;
    }

    .listaia .valores input[type=checkbox] {
        margin: 0;
    }

/* El texto de preguntar y avisar. En <pre> porque el parte de omitidos ya viene con sus
   renglones cortados; lo unico que hace falta es que no se corten mas. */
.listaia .dialogo-texto {
    margin: 0 0 .75rem;
    font: inherit;
    font-size: .9rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* La auditoria: mas ancha, que son cuatro columnas y una de ellas es un detalle. */
.listaia .modal.auditoria {
    width: min(52rem, calc(100vw - 2rem));
}

.listaia .historia {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

    .listaia .historia th {
        padding: .3rem .4rem;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
        border-bottom: 1px solid #dcdce0;
    }

    .listaia .historia td {
        padding: .25rem .4rem;
        vertical-align: top;
        border-bottom: 1px solid #f0f0f2;
    }

.listaia .modal-botones {
    display: flex;
    gap: .4rem;
    justify-content: flex-end;
    margin-top: .5rem;
    align-items: center;
}

/* ---------------------------------------------------------------- la ayuda */

/* Un renglon por video: el titulo y, debajo, si se puede abrir. Los dos son bloques del
   mismo ancho, con o sin direccion, para que la lista no se descoloque cuando a un video
   se le configure la suya. */
.listaia .videos {
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}

.listaia .video {
    display: block;
    padding: .55rem .7rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid #c9c9ce;
    border-radius: 4px;
}

    .listaia .videos li + li {
        margin-top: .4rem;
    }

    .listaia a.video:hover {
        background: #eef4fb;
        border-color: #1b6ec2;
    }

    /* Sin direccion no es un enlace y no tiene que parecerlo: ni cursor, ni realce al
       pasar por encima. Se muestra igual para que se sepa que el video existe. */
    .listaia .video.sin-direccion {
        color: #6b6b70;
        background: #f7f7f8;
    }

.listaia .video-titulo {
    display: block;
    font-weight: 600;
}

.listaia .video-detalle {
    display: block;
    font-size: .8rem;
    color: #6b6b70;
}

/* Imprimir y Exportar son enlaces y no botones -es lo que hace que el navegador abra la
   pestana por orden del usuario y no del programa; ver el parametro Enlace de
   BarraBotones-, asi que hay que devolverles LO QUE UN <a> NO TRAE, y nada mas.

   Y eso son dos cosas: que la caja se mida por fuera -un boton ya lo hace, un enlace no, y
   sin eso los 5+6 pixeles de relleno de .boton-accion se le suman al alto y sale mas alto
   que sus vecinos- y que no vaya subrayado.

   **El color, la forma y el reparto en columna NO se vuelven a decir aqui, y eso es el
   arreglo.** Se decian, y con mas peso que .boton-barra -a.boton-barra lleva una etiqueta
   ademas de la clase-, asi que ganaban: color: inherit dejaba el rotulo y el trazo del
   dibujo del color del texto de la pagina, que es negro, sobre la caja negra del boton, y
   display: inline-block deshacia la columna de .boton-accion. Los dos salian como sendos
   rectangulos negros vacios y mas altos que sus vecinos. La regla venia de cuando el unico
   enlace con esta pinta era el de la descarga del cuadro de salida, que ya no existe. */
.listaia a.boton-barra {
    box-sizing: border-box;
    text-decoration: none;
}

/* El que descarga es el que se pulsa: se marca, como el Aceptar de un cuadro. */
.listaia .boton-barra.principal {
    color: #fff;
    background: #1b6ec2;
    border-color: #1861ac;
}

    .listaia .boton-barra.principal:hover {
        background: #1861ac;
    }

/* ------------------------------------------------------- el cuadro de salida */

.listaia .salida-que,
.listaia .salida-generando,
.listaia .salida-lista {
    margin: .25rem 0 1rem;
    line-height: 1.5;
}

.listaia .salida-generando {
    color: #6b6b70;
}

.listaia .salida-archivo {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .9rem;
    color: #3b3b40;
}

.listaia .paginador {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    margin: .75rem 0 0;
    font-size: .9rem;
    color: #3b3b40;
}

    .listaia .paginador nav {
        display: flex;
        gap: .25rem;
        align-items: center;
    }

    .listaia .paginador .cuenta {
        padding: 0 .5rem;
    }

.listaia .paso {
    min-width: 2.2rem;
    padding: .25rem .5rem;
    font: inherit;
    background: #fff;
    border: 1px solid #c9c9ce;
    border-radius: 4px;
    cursor: pointer;
}

    .listaia .paso:hover:not(:disabled) {
        background: #eef4fb;
        border-color: #1b6ec2;
    }

    .listaia .paso:disabled {
        color: #b0b0b5;
        cursor: default;
    }

.listaia .aviso {
    padding: .75rem 1rem;
    color: #6b3b00;
    background: #fff6e5;
    border: 1px solid #e8c98a;
    border-radius: 4px;
}

.listaia .cargando {
    color: #6b6b70;
}

/* El cuadro de graficos. Es el mas ancho de todos porque lo que muestra es un dibujo, y un
   dibujo apretado no se lee; y alto fijo para que cambiar de preset no le haga dar saltos
   al cuadro segun cuantos puntos traiga cada uno. */
.listaia .modal.graficos {
    width: min(72rem, calc(100vw - 2rem));
}

    .listaia .modal.graficos .presets {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin-bottom: .75rem;
    }

.listaia .grafico-cuerpo {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

    .listaia .grafico-cuerpo .rango {
        flex: 0 0 12rem;
    }

        .listaia .grafico-cuerpo .rango .nota {
            margin: .75rem 0 0;
            font-size: .8rem;
            line-height: 1.35;
            color: #6b6b70;
        }

    .listaia .grafico-cuerpo .lienzo {
        flex: 1;
        min-width: 0;
    }

.listaia .grafico-titulo {
    margin: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

/* El SVG lleva su propio viewBox, asi que se escala solo al hueco que le toque: alto fijo y
   ancho el que haya. Sin el alto fijo, el navegador le daria el que pidiera la proporcion y
   el cuadro cambiaria de tamano al abrirlo. */
.listaia .grafico {
    display: block;
    width: 100%;
    height: 26rem;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
}

/* ---------- La fila encogida: solo dibujos ---------- */

/* Los botones de la barra van con dibujo y rotulo. Cuando con rotulo no caben todos a lo
   ancho, la fila ENCOGE -clase "compacta", que pone desborde.js y dibuja BarraDesbordable-:
   los botones van SIN rotulo y del tamano de su dibujo, una caja cuadrada de alto por alto
   con la figura mas grande en el medio, con la idea de que se sigan viendo todos; y solo si
   ni asi caben, los que sobran se van bajo el boton de tres puntos. No es cosa del telefono:
   es del ancho que hay, en cualquier pantalla; en seis pulgadas pasa siempre. El rotulo no
   se pierde del todo: sigue en el globo de ayuda -el title- y en lo que lee un lector de
   pantalla.

   Solo los que tienen dibujo. Un boton que agrega la tabla por su extension no lo tiene -ver
   .sin-dibujo- y sin rotulo seria una caja negra vacia: ese se queda como esta.

   Las mismas tres reglas estan en editor.css y en tabla.css, para sus barras; en Avalonia y
   en WinForms las hace PanelDesbordable. */
.listaia .compacta .boton-accion:not(.sin-dibujo) {
    min-width: 0;
    width: var(--alto-boton-accion);
    padding: 0;
    justify-content: center;
}

.listaia .compacta .boton-accion:not(.sin-dibujo) > span:not(.icono-barra) {
    display: none;
}

/* El dibujo ocupa algo mas de la mitad de la caja: a 16 unidades, mas grande que eso el
   trazo de 1.6 se ve grueso, y mas chico se pierde el hueco que deja el rotulo. */
.listaia .compacta .boton-accion:not(.sin-dibujo) .icono-barra {
    width: calc(var(--alto-boton-accion) * .55);
    height: calc(var(--alto-boton-accion) * .55);
}

/* El de la ayuda es un caracter y no un dibujo: crece con la letra, no con la caja. */
.listaia .compacta .boton-accion:not(.sin-dibujo) .icono-signo {
    font-size: calc(var(--alto-boton-accion) * .45);
}

/* ---------- Pantallas estrechas: el telefono ---------- */

/* Menos aire entre la fila de botones y las marcadas: la pantalla es de la lista. */
@media (max-width: 700px) {
    .listaia .barra {
        gap: .5rem;
    }
}

/* La cola de una barra -los avisos que van detras de los botones: "registro grabado", lo
   pendiente de grabar- no ocupa sitio propio: display contents deja sus avisos donde iban, como
   si la envoltura no estuviera. Ver BarraDesbordable. */
.cola-barra {
    display: contents;
}

/* **En el telefono la cola no se muestra.** El ancho es escaso y es de los botones: un aviso largo
   se lo comia y los botones acababan escondidos bajo los tres puntos. Vale para todas las barras
   -lista, editor, rejilla, presupuesto-, que son la misma BarraDesbordable. */
@media (max-width: 700px) {
    .cola-barra {
        display: none;
    }
}

/* La casilla de la pestaña Impresion de Propiedades: el rotulo al lado, y todo el rotulo la marca. */
/* El rotulo de cada seccion de la pestaña Propiedades, como en la ventana del editor. */
.listaia .modal .seccion {
    margin: .75rem 0 .25rem;
    font-weight: 600;
}

.listaia .casilla-impresion {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    cursor: pointer;
}