/* Los colores son los de EditorTablaIA.Ava -texto #4A4A4A, lineas #DDDDDD, pie #777777-.
   Las dos aplicaciones pintan la misma tabla y se miran una al lado de la otra: dos grises
   distintos se notarian.

   **Todo cuelga de .editortablaia, que es la raiz del componente.** Las clases de esta pantalla
   se llaman .grilla, .barra, .pie, .lista: nombres que cualquier aplicacion usa. Esta hoja la
   enlaza tambien quien aloje la grilla -EditorIA, y por debajo GesNetIA, que ademas enlaza las
   hojas del editor y de la lista-, asi que un selector suelto no vestiria esta grilla: repintaria
   la barra y el pie de las otras. Es lo que ya le paso a lista.css y a editor.css, contado en la
   cabecera de esa segunda con estas palabras: un componente no puede traerle a nadie un reset.

   La unica excepcion es .editortablaia-redimensionando, que va en el <body> mientras se arrastra
   el ancho de una columna y por tanto no puede colgar de la raiz. Por eso lleva el nombre pegado
   en vez de acotarse.

   **Aqui no hay ni una regla de pagina, y es a proposito.** Esta hoja viaja con la biblioteca de
   componentes y la enlaza tambien quien aloje la grilla -EditorIA, y por debajo GesNetIA-, asi
   que un selector suelto como body o h1 no vestiria la grilla: repintaria la aplicacion entera de
   quien la aloja. Lo que era de la pagina se fue a la cascara, a EditorTablaIA.Web/wwwroot/pagina.css.

   Por eso la letra va dicha aqui, en los bloques del componente, y no heredada de body: alojada
   dentro de otra aplicacion, el body es de esa otra. Los controles de dentro -input, button- la
   toman con font: inherit, que es lo que ya hacian. */

.editortablaia .grilla,
.editortablaia .barra,
.editortablaia .pie,
.editortablaia .fallo,
.editortablaia .aviso,
.editortablaia .combo,
.editortablaia .cuadro {
    /* Segoe UI 10 pt, la misma que la de escritorio. */
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 13.333px;
    color: #4A4A4A;
}

.editortablaia .grilla {
    /* collapse deja una sola linea entre celdas en vez de dos pegadas. */
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #DDDDDD;
}

.editortablaia .grilla th,
.editortablaia .grilla td {
    border: 1px solid #DDDDDD;

    /* Para que la marca de la celda actual se pueda colocar contra ella. Ver td:focus-within
       mas abajo, que explica por que esa marca no puede ser un outline. */
    position: relative;

    /* **El alto va dicho, no lo decide el contenido.** Las dos aplicaciones se miran una al
       lado de la otra, y con el alto suelto la web sacaba filas de 41 pixeles donde la de
       escritorio las saca de 30: la misma tabla ocupaba una pantalla y media de la otra. Los
       numeros son los que da el DataGrid de EditorTablaIA.Ava, y ahi estan escritos tambien
       -RowHeight y ColumnHeaderHeight-, para que no se separen sin que nadie se entere.

       Con el relleno solo a los lados: el de arriba y abajo ya no hace falta -de eso se
       encarga el alto- y sumado a el daria una fila mas alta de la cuenta. */
    box-sizing: border-box;
    height: 30px;
    padding: 0 8px;

    /* **Y la altura de linea, que es lo que de verdad manda.** El alto de la celda es solo un
       minimo: lo que la estira es la caja de linea de lo que lleva dentro, y un input es un
       inline-block, bajo el cual el navegador reserva sitio para las colas de las letras aunque
       no haya ninguna. Con el alto puesto y sin esto, la celda pedia 35 y salia de 45. Aqui se
       dice cuanto mide esa linea: los 30 menos los dos pixeles del borde. */
    line-height: 28px;

    text-align: left;
    /* Blanco dicho a proposito, y no "lo que haya detras": una celda con foco, o el navegador
       pintando un campo a su manera, no debe cambiar de color. Lo unico que cambia al entrar en
       una celda es su borde. */
    background: #FFFFFF;
    /* La descripcion es larga y no se debe partir en varias lineas: la fila crecería y la
       grilla dejaría de leerse como una rejilla. */
    white-space: nowrap;
}

.editortablaia .grilla th {
    /* A medio camino entre WhiteSmoke -#F5F5F5- y Gainsboro -#DCDCDC-: 245 y 220 dan 232,5, y
       de ahi el 233. El mismo que pinta la de escritorio, que no lo trae de serie y hay que
       ponerselo -ver el estilo de DataGridColumnHeader en GrillaDeEntidad.axaml-. */
    background: #E9E9E9;
    font-weight: 600;
    /* El encabezado es mas bajo que una fila, igual que en la de escritorio. */
    height: 32px;
    line-height: 30px;
}

/* La columna sin longitud previsible se queda con el ancho que sobra. El 100% no se cumple
   -no cabe-, y por eso el navegador le da el resto.

   Antes esto era :nth-child(2), la segunda columna, porque la tabla era siempre la misma.
   Ahora la segunda columna es un numero: es la tabla la que marca cual es la ancha. */
.editortablaia .grilla .ancha {
    width: 100%;
}

.editortablaia .grilla .numero {
    text-align: right;
}

.editortablaia .grilla .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 de un titulo se convertiria en un arrastre y no habria forma de
   escribir. Es el mismo reparto que en la ventana de escritorio.

   El cursor y el glifo son los que anuncian que eso se coge; sin ellos la columna parece una
   celda vacia y nadie descubre que las filas se pueden mover. */
.editortablaia .propiedades .agarre {
    width: 26px;
    padding: 0;
    text-align: center;
    color: #999999;
    cursor: grab;
    user-select: none;
}

.editortablaia .propiedades .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. */
.editortablaia .propiedades tr.arrastrando {
    opacity: 0.45;
}

/* La celda de un desplegable mientras sus opciones no han llegado.

   En gris y no en negro porque no es un dato: es el hueco de un dato que viene. Los catalogos se
   piden despues de dibujar la grilla -son lo que mas tarda de abrir, ver GrillaDeEntidad.razor-,
   asi que estas celdas existen durante un rato en cada apertura. */
.editortablaia .grilla .esperando {
    color: #999999;
}

.editortablaia .pie {
    margin: 8px 0 0;
    color: #777777;
}

/* Cuando no hay tabla que pintar porque algo fallo. Rojo apagado y no el rojo de aviso: es
   informacion para quien mira, no una alarma. */
.editortablaia .fallo {
    margin: 8px 0 0;
    color: #A33A3A;
}

/* Los controles de las celdas: el desplegable de las columnas que apuntan a una tabla
   auxiliar, y la caja de texto del resto. Sin marco y del ancho de la celda: dentro de una
   rejilla, un control con su propio borde en cada celda convierte la tabla en un muro de
   cajas. Se escribe encima del texto, como si se editara la propia celda. */
.editortablaia .grilla .desplegable,
.editortablaia .grilla .texto {
    /* En el centro de la linea y no sobre su base: apoyado en la base, lo que cuelga por debajo
       -el sitio de las colas de las letras- se suma al alto de la fila. */
    vertical-align: middle;
    /* Blanco y no transparente: asi el campo no coge el color que el navegador quiera darle
       -al autocompletar, por ejemplo, que lo tiñe de amarillo-. */
    background: #FFFFFF;
    /* **El ancho lo da el atributo size de cada input, en caracteres, y no un 100% aqui.** Con
       width:100% el navegador resuelve el porcentaje contra una celda que todavia no sabe cuanto
       mide, se queda con lo que ocupa el encabezado y "CHOMPA" se lee "CHO". El ancho de una
       columna sale de lo que hay dentro de sus celdas, y el valor de un input va en un atributo,
       que no se mide: size es lo unico que se lo dice. Ver Ancho() en Inicio.razor. */
    width: auto;
    border: none;
    font: inherit;
    color: inherit;
    padding: 0;
}

/* La columna sin longitud previsible si estira su control hasta el borde: es la que se queda
   con el ancho que sobra, y un input corto en medio de una celda ancha se lee como si la celda
   estuviera a medio pintar.

   **Ya no es lo que hace que se pueda pinchar en toda la celda.** Eso lo arreglaba aqui, y solo
   en esta columna; ahora vale en todas y sin tocar el reparto de anchos: pinchando en el hueco
   de una celda, grilla.js lleva el foco a su control. */
.editortablaia .grilla .ancha .desplegable,
.editortablaia .grilla .ancha .texto {
    width: 100%;
}

/* **Los controles no marcan nada al recibir el foco: lo marca la celda.** Ni el recuadro que
   pinta el navegador por su cuenta ni ninguna linea propia. Lo que se ve al entrar es el borde
   azul de la celda -mas abajo-, y nada mas: un control con su propio aviso dentro de una celda
   que ya esta avisando son dos marcas para una cosa. */
.editortablaia .grilla .desplegable:focus,
.editortablaia .grilla .texto:focus,
.editortablaia .grilla input[type="checkbox"]:focus {
    outline: none;
}

/* La celda en la que se esta: un borde azul y nada mas.

   **Va como una capa aparte y no como outline, y ese fue justo el fallo.** Un outline lo pinta
   la celda junto con su fondo, y los hijos se dibujan DESPUES: el input, que va en blanco y
   ocupa todo el alto de la celda, se comia la franja de arriba y la de abajo. A los lados no
   pasaba, porque ahi los ocho pixeles de relleno lo dejan asomar, asi que el recuadro salia con
   dos pixeles a los costados y uno arriba y abajo. Se veia recortado y costaba de creer, porque
   el CSS decia dos por los cuatro lados.

   Un ::after colocado sobre la celda se pinta despues que el contenido -es una capa posicionada-
   y no lo tapa nada. Es lo mismo que hubo que hacer en la de escritorio, y por el mismo motivo:
   alli la marca tambien se dibujaba debajo de la caja de escribir y solo asomaban las esquinas.
   Ver el rectangulo de la celda actual en GrillaDeEntidad.axaml.

   Tampoco mueve nada al aparecer -esta fuera del flujo-, que es lo que se buscaba con el
   outline: un borde de verdad empujaria la fila entera.

   El inset de -1px la lleva del borde de relleno al borde de la celda, para que los dos pixeles
   caigan encima de la linea gris de la rejilla en vez de al lado. Los mismos dos pixeles y el
   mismo #2E7CBF que pinta la de escritorio: las dos se miran una al lado de la otra, y una marca
   mas gruesa en una que en otra es de lo que mas salta.

   Y pointer-events en none porque una capa encima de la celda se comeria los clics: es lo que
   lleva el foco al control al pinchar en el hueco. Ver grilla.js.

   focus-within y no focus: quien recibe el foco es el campo de dentro, no la celda. */
.editortablaia .grilla td:focus-within::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 2px solid #2E7CBF;
    pointer-events: none;
}

/* Los numeros siguen a la derecha tambien mientras se escriben. La regla .numero alinea la
   celda, pero el input es un elemento aparte y no la hereda. */
.editortablaia .grilla .numero input {
    text-align: right;
}

/* La barra de herramientas, encima de la grilla. Los 4px de separacion son los mismos que el
   Spacing del StackPanel de EditorTablaIA.Ava, y los mismos que los de la barra de EditorIA:
   las tres se miran una al lado de la otra. */
.editortablaia .barra {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* La fila de botones la dibuja BarraDesbordable, de ListaIA: una sola fila que desborda bajo
   un boton de tres puntos cuando no caben (ver .fila-desbordable en lista.css). El hueco entre
   botones es el mismo que el de la barra. */
.editortablaia .barra .fila-desbordable {
    gap: 4px;
}

.editortablaia .barra {
    /* El mismo hueco alrededor que la barra de EditorIA -.editoria .barra- y que la de
       ListaIA. **Aqui no habia ninguno**, asi que los botones arrancaban pegados al borde
       izquierdo mientras los de las otras dos empiezan a ocho pixeles; alojada dentro del
       editor, que es lo normal, las dos barras se ven una encima de la otra y la de abajo
       salia corrida. */
    /* Alto MINIMO y relleno solo a los lados, como en ListaIA: con relleno arriba y abajo la
       franja mide lo que el boton mas ese relleno, y con el alto clavado una segunda fila de
       botones quedaria cortada. */
    min-height: var(--alto-cuadro-herramientas);
    padding: 0 8px;
    /* Y la separacion con la grilla, que es otra cosa: aquellas dos llevan una raya debajo y
       esta no, asi que lo que separa es el hueco. */
    margin: 0 0 8px;
    /* **La banda pinta su fondo, y antes no pintaba ninguno.** Sin el se veia el del
       anfitrion, que no siempre es el mismo: dentro del editor salia su papel y en una
       pestaña suelta del area de trabajo salia el gris de la aplicacion. El valor es el de
       .editoria .barra; ver TemaBarra.FondoBanda. */
    background: var(--fondo-cuadro-herramientas);
}

/* Blanco sobre negro y en negrita, como la barra de EditorIA, como la de ListaIA y como la de la
   ventana de escritorio de esta misma grilla.

   **Era la diferencia mas visible de todas.** Aqui los botones se dejaban como los pintaba el
   navegador; esta grilla se abre desde una lista y dentro del editor, muchas veces a un palmo de
   la barra del anfitrion, y dos barras de acciones pegadas -una negra y otra gris del sistema- se
   leen como dos aplicaciones distintas.

   Los colores no estan escritos aqui: los emite TemaCss desde TemaBarra, que es de donde los lee
   tambien BarraNegra en la de escritorio. El ancho y el alto, por lo mismo. */
.editortablaia .barra button {
    /* Minimo y no fijo: en ListaIA el boton crece con su rotulo, y las tres barras se ven en
       la misma pantalla. */
    min-width: var(--ancho-boton-barra);
    height: var(--alto-boton-barra);
    /* La letra NO se hereda por omision en los controles de formulario: sin esto el rotulo saldria
       en la del navegador mientras el resto de la pagina va en Segoe UI. */
    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 mismo numero que las otras dos barras, desde
       TemaBarra.RadioBoton. */
    border-radius: var(--radio-boton-barra);
    cursor: pointer;
}

/* Un boton que lleva dibujo: la figura arriba y el rotulo abajo, como los de ListaIA -de donde
   sale ademas la figura, que es el mismo componente-.

   **Hoy lo llevan los cinco**, igual que en la de escritorio: Imprimir, Propiedades, Eliminar,
   Grabar y Deshacer. Sigue siendo una clase y no la regla de todos porque la barra tiene mas
   cosas que botones -el aviso- y porque Grabar y Deshacer estuvieron sin figura, con el rotulo
   centrado en la caja, hasta que se igualaron con las de Ava. */
.editortablaia .barra button.con-dibujo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    padding: 5px 4px 6px;
    line-height: 1;
}

.editortablaia .barra button.con-dibujo svg {
    width: var(--icono-boton-barra);
    height: var(--icono-boton-barra);
    display: block;
}

.editortablaia .barra button:hover {
    background: var(--fondo-barra-sobre);
}

.editortablaia .barra button:active {
    background: var(--fondo-barra-pulsado);
}

/* **Ni grupo aparte, ni ancho fijo, ni color propio para Grabar y Deshacer.** Iban en un div
   .acciones pegado a la derecha con margin-left auto, con un width clavado y con verde y
   naranja propios. La de escritorio los pone en fila con los otros tres, del mismo negro y con
   MinWidth -que crece con el rotulo- en vez de Width; ver BarraNegra, donde esta escrito que
   ahi ya no hay botones de color. Con las dos barras a la vista, esa era la diferencia mas
   visible de todas.

   Tampoco hay estado apagado: un boton que no puede hacer nada no se dibuja. Ver
   BarraNegra.Mostrar y el @if de la barra en GrillaDeEntidad.razor. */

/* Cuantas filas estan sin grabar. El mismo gris del pie: es informacion de al lado, no lo que
   se ha venido a leer. */
.editortablaia .aviso {
    color: #777777;
    /* Ocho, que con el hueco de cuatro de la barra dan los doce que separan el aviso del ultimo
       boton en la de escritorio: alli son Spacing 4 del StackPanel mas Margin 8 del TextBlock. */
    margin-left: 8px;
}

/* Las celdas que no se pueden escribir —de las que se pintan, el nombre del papa—, en
   whitesmoke. Una que no se toca y una que se rellena a mano se leen igual estando las dos en
   blanco, y ahi la unica forma de descubrir cual es cual es intentar escribirla y ver que no
   pasa nada. El gris lo dice antes de intentarlo.

   Cuales son lo decide ReglasDeColumna.EsEditable, la misma regla que aplica la de escritorio, y
   el gris es el mismo —#F5F5F5—: las dos se miran una al lado de la otra.

   No alcanza a la columna de seleccion: ahi tampoco se escribe, pero si se puede hacer algo
   -marcar-, y pintarla de gris diria lo contrario. */
.editortablaia .grilla td.cerrada {
    background: #F5F5F5;
}

/* El panel de totales: el mismo gris y el mismo alto que el encabezado, porque es la misma clase
   de cosa —una franja que enmarca los datos, no un dato mas—. En negrita para que un total no se
   confunda con la ultima fila de la tabla.

   Los numeros se alinean a la derecha solos: la celda lleva la clase de su columna, la misma que
   llevan las de arriba. Ver ClaseDe en Inicio.razor. */
.editortablaia .grilla tfoot td {
    background: #E9E9E9;
    font-weight: 600;
    height: 32px;
    line-height: 30px;
    padding: 0 8px;
    white-space: nowrap;
}

/* La columna de seleccion: lo justo para la casilla y su aire, y centrada. Es una columna sin
   rotulo y con un solo control dentro; dejada al reparto automatico se lleva el ancho de un
   encabezado que no tiene. Los mismos 34 pixeles que la de escritorio -ver AnchoDeSeleccion-,
   que las dos se miran una al lado de la otra.

   El min-width va aparte del width porque con table-layout: fixed -que es como queda la tabla en
   cuanto alguien arrastra un tirador- el navegador reparte por columna y el width solo cuenta
   como una peticion mas. */
.editortablaia .grilla th.seleccion,
.editortablaia .grilla td.seleccion {
    width: 34px;
    min-width: 34px;
    text-align: center;
    padding: 0;
}

/* La columna del lapiz, que abre la fila en el editor: del ancho de la de seleccion, y el boton
   sin marco, solo el dibujo. Ava y Nat la pintan igual. */
.editortablaia .grilla th.editar,
.editortablaia .grilla td.editar {
    width: 34px;
    min-width: 34px;
    text-align: center;
    padding: 0;
}

/* El "+" del encabezado, que agrega una linea, va igual que el lapiz de las filas. */
.editortablaia .grilla th.editar button.lapiz,
.editortablaia .grilla td.editar button.lapiz {
    border: 0;
    background: transparent;
    padding: 0;
    color: dimgray;
    cursor: pointer;
    line-height: 0;
}

.editortablaia .grilla th.editar button.lapiz .icono-barra,
.editortablaia .grilla td.editar button.lapiz .icono-barra {
    width: 14px;
    height: 14px;
}

/* Sin el margen que el navegador le pone de serie a una casilla suelta: dentro de una celda de
   34 pixeles, ese margen la descentra. */
.editortablaia .grilla .seleccion input,
.editortablaia .grilla input.marcarTodas {
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

/* La lista del desplegable. Va colgando de la celda -de ahi el relative en .combo- y por
   encima de las filas de abajo, que si no quedaria tapada por ellas. */
.editortablaia .combo {
    position: relative;
}

/* **La lista es un div con una tabla dentro, y no la tabla a secas.** El max-height y el
   overflow tienen que ir en algo que sepa recortar, y un <table> no lo es: los navegadores
   tratan su alto como un minimo y la lista salia entera, cien filas cayendo hasta mas abajo de
   la pagina. El div si se corta, y la tabla de dentro sigue midiendo sus columnas entre si. */
.editortablaia .combo .opciones {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;

    margin: 0;
    padding: 0;

    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    /* Una sombra corta: es lo que hace que se lea como algo que esta ENCIMA de la grilla y no
       como una fila mas que ha aparecido en medio. */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

    /* Ancha como la celda por lo menos, y lo que necesite si sus nombres son mas largos. */
    min-width: 100%;
    width: max-content;
    white-space: nowrap;

    /* Diez filas y pico. La lista no puede llegar hasta el final de la pagina: se corta y se
       recorre. Es el mismo alto que la de escritorio -ver AltoDeLaLista en GrillaDeEntidad-,
       que las dos se miran una al lado de la otra. */
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.editortablaia .combo .opciones table {
    /* Las columnas se miden entre si: es lo que las deja alineadas de una fila a otra. */
    border-collapse: collapse;
    /* Hasta el borde del recuadro: sin esto la rejilla acaba a medio camino y queda un hueco en
       blanco a la derecha. */
    width: 100%;
}

/* El encabezado de la lista: el mismo gris y el mismo peso que el de la rejilla de detras, que
   es la misma clase de cosa. */
.editortablaia .combo .opciones th {
    padding: 3px 8px;
    border: 1px solid #DDDDDD;
    background: #E9E9E9;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;

    /* Se queda arriba mientras la lista se recorre: bajando cien filas, una rejilla de numeros
       sin rotulos obliga a adivinar cual es el codigo y cual el stock, que es justo lo que el
       encabezado esta ahi para evitar. */
    position: sticky;
    top: 0;
    z-index: 1;

    /* Con border-collapse, el borde de una celda pegajosa se queda atras al desplazarse -lo
       dibuja la tabla, no la celda-. Se repite por dentro con una sombra, que si se mueve con
       ella. */
    box-shadow: inset 0 1px 0 #DDDDDD, inset 0 -1px 0 #DDDDDD;
}

.editortablaia .combo .opciones td {
    padding: 3px 8px;
    cursor: pointer;
    /* Las mismas lineas que la rejilla de detras: la lista de un desplegable es una grilla mas, y
       dos grises distintos en la misma pantalla se notan. */
    border: 1px solid #DDDDDD;
    background: #FFFFFF;
}

/* La que se llevaria el Enter. **Azul claro y no el gris de los encabezados**: con el gris, la
   linea marcada se leia como una fila de encabezado mas y no como "aqui estas", porque es el
   mismo color que tiene la fila de arriba de la lista. Es la familia del azul del borde de la
   celda —#2E7CBF— muy aclarada, asi que la letra negra encima se sigue leyendo sin tocarla. No es un color de
   aviso, es "aqui esta". El mismo que pinta la de escritorio, ver ColorMarcada.

   Va en las celdas porque son ellas las que llevan el fondo blanco: en la fila quedaria por
   debajo y no se veria. */
.editortablaia .combo .opciones tr.marcada td {
    background: #DCEBF7;
}

/* Cuantas opciones se quedan fuera, al final de la lista. **Es lo que evita que una lista
   recortada parezca un catalogo corto.** Sin esto, un desplegable de cuatro mil articulos que
   solo enseña cien se lee como si solo hubiera cien, y quien busca el suyo entre las que faltan
   no tiene motivo para ponerse a escribir. Gris y en cursiva: no es una opcion mas, es una
   explicacion. */
.editortablaia .combo .opciones .hayMas {
    padding: 4px 8px;
    border-top: 1px solid #DDDDDD;
    background: #F5F5F5;
    color: #777777;
    font-style: italic;
    cursor: default;
}

/* La flecha del desplegable, a la derecha del control. Gris como el pie: dice que ahi hay una
   lista, no pide que se pulse. Pulsandola se abre entera. */
.editortablaia .combo {
    display: flex;
    align-items: center;
    /* Toda la celda: es lo que deja empujar la flecha hasta el borde derecho. */
    width: 100%;
}

/* El campo se come el ancho que sobra, y con eso la flecha queda pegada al borde derecho de la
   celda. Sin esto se queda pegada al texto, y como cada fila tiene un nombre de distinto largo,
   caeria en un sitio distinto en cada una: la columna se lee como una escalerilla.

   El flex-basis va en auto y NO en cero -que es lo que pone el atajo "flex: 1"-: en cero, el
   ancho que el campo pide deja de contar para calcular el de la columna, y la columna se vuelve
   a encoger hasta lo que ocupa el encabezado. Ver Ancho() en Inicio.razor. */
.editortablaia .grilla .combo .desplegable {
    flex: 1 1 auto;
    min-width: 0;
}

.editortablaia .combo .flecha {
    padding-left: 4px;
    color: #777777;
    cursor: pointer;
    /* Que no se pueda seleccionar: al pulsar sobre ella arrastrando un poco, el navegador
       marcaria el caracter en azul y quedaria feo dentro de la celda. */
    user-select: none;
}


/* ---- El ancho de las columnas, a mano ---------------------------------------------------- */

/* El tirador: una franja en el borde derecho del encabezado. No se pinta nada -lo que avisa de
   que esta ahi es el cursor-, para no meter una linea mas en una rejilla que ya tiene las
   suyas. El relative del th es lo que le da el sitio. */
.editortablaia .grilla th {
    position: relative;
}

/* El rotulo del encabezado, que es lo que se pulsa para ordenar. Ocupa todo el encabezado menos
   la franja del tirador, para que haya donde pulsar sin tener que acertarle a la palabra.

   Sin subrayado ni color de enlace: no es un enlace, es un encabezado que responde. Lo unico que
   lo dice es el cursor. Y sin seleccionar el texto al pulsar dos veces seguidas, que ordenando
   arriba y abajo se pinta todo de azul. */
.editortablaia .grilla th .rotulo {
    /* Flex y no block: dentro van dos cajas -el titulo y la flecha de orden- y tienen que
       repartirse el ancho, no ir una detras de otra pegadas al texto. */
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-right: 6px;
}

/* El titulo se queda con todo el hueco que la flecha no usa, y dentro se alinea como su
   columna: el text-align que traen .numero y .centro sigue mandando aqui dentro. El min-width
   en cero es lo que deja que se recorte en una columna estrecha; sin el, un flex item no baja
   de lo que mide su contenido y empujaria la flecha fuera del encabezado.

   **Se llama rotulo-texto y no texto, y ese nombre importa.** En esta hoja .texto ya es la
   caja de escribir de las celdas -mas arriba-, que va con fondo blanco, ancho auto y, en la
   columna ancha, al 100%. Llamando texto a este span, el encabezado heredaba todo aquello: el
   rotulo salia sobre un recuadro blanco que se paraba justo donde empieza la flecha, y ademas
   la pasada de medir -.grilla.medida .texto- lo media como si fuera un control. */
.editortablaia .grilla th .rotulo .rotulo-texto {
    flex: 1 1 auto;
    min-width: 0;
}

/* La flecha, siempre pegada al borde derecho del encabezado, ordene la columna por texto o por
   numeros. Es lo mismo que hace la de escritorio acoplando su TextBlock a la derecha. */
.editortablaia .grilla th .rotulo .flecha-orden {
    flex: 0 0 auto;
    margin-left: 4px;
}

/* Sin flecha no hay caja: vacia seguiria gastando su margen y correria el titulo cuatro
   pixeles en todas las columnas por las que no se ordena. */
.editortablaia .grilla th .rotulo .flecha-orden:empty {
    display: none;
}

/* Mientras hay algo sin grabar no se ordena -ver OrdenDeGrilla.SePuedeOrdenar-, y tiene que
   verse: sin esto el encabezado sigue invitando a pulsarlo y no pasa nada, que es peor que no
   invitar. Se apaga el cursor, no el rotulo: el nombre de la columna hay que seguir leyendolo. */
.editortablaia .grilla th .rotulo.quieto {
    cursor: default;
}

/* La columna de seleccion no ordena -su encabezado es la casilla de marcar todas-, asi que ahi
   no hay rotulo que pulsar. Se dice por si algun dia lo tuviera. */
.editortablaia .grilla th.seleccion .rotulo {
    cursor: default;
}

.editortablaia .grilla .tirador {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    user-select: none;
}

/* Mientras se arrastra, el cursor de redimensionar en toda la pagina: saliendose del
   encabezado volveria a ser una flecha y pareceria que se ha soltado. */
.editortablaia-redimensionando,
.editortablaia-redimensionando * {
    cursor: col-resize !important;
}

/* Una vez medida -lo hace grilla.js al entrar-, el ancho lo dice cada columna y no el contenido:
   es lo que hace que arrastrar sirva de algo. Sin fixed, el contenido vuelve a estirar la
   columna en cuanto se la intenta estrechar.

   Y width en auto: mandan los anchos, y su suma es lo que mide la tabla. Con el 100% de antes,
   el navegador los repartiria en proporcion para cuadrar, y estrechar una columna ensancharia
   las demas sin que nadie se lo hubiera pedido. */
.editortablaia .grilla.medida {
    table-layout: fixed;
    /* El ancho en pixeles lo pone grilla.js, y es la suma de las columnas. No se pone aqui un
       auto: con la tabla sin un ancho concreto, el reparto fijo no se aplica -el navegador
       vuelve al automatico- y arrastrar deja de servir para nada. */
}

/* Centrada a lo ancho cuando quien la aloja lo pide -el editor, para sus rejillas de detalle;
   ver GrillaDeEntidad.Centrada-. Con el ancho en pixeles que le pone grilla.js, los margenes en
   auto reparten lo que sobra a los dos lados; y cuando la tabla mide mas que el hueco, el
   navegador los deja en cero y la tabla se pega a la izquierda y se desplaza como siempre. Es
   una sola regla para los dos casos, sin medir nada. Solo una vez medida: antes, la tabla va al
   100% y no hay nada que centrar. */
.editortablaia.centrada .grilla.medida {
    margin-left: auto;
    margin-right: auto;
}

/* Al estrechar, lo que no cabe se corta en vez de desbordar sobre la columna de al lado. En los
   encabezados y en las celdas de solo lectura, que son las que llevan texto suelto; NO en el td,
   que recortaria tambien la lista desplegada del combo, y esa tiene que poder salirse. */
.editortablaia .grilla.medida th,
.editortablaia .grilla.medida .recorta {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El ancho que se pide es el que se pinta, relleno incluido. Sin esto el navegador suma los
   ocho pixeles de relleno de cada lado por su cuenta, y la columna sale mas ancha de lo que se
   arrastro: el tirador se queda un poco por detras del raton. */
.editortablaia .grilla.medida th {
    box-sizing: border-box;
}

.editortablaia .grilla.medida .recorta {
    display: block;
}

/* Con la tabla mandando el ancho, el atributo size de los campos ya no pinta nada: cada uno se
   estira hasta donde llegue su celda. */
.editortablaia .grilla.medida .desplegable,
.editortablaia .grilla.medida .texto {
    width: 100%;
}


/* Lo que queda seleccionado al entrar en una celda: fondo azul y letra blanca. Es el mismo azul
   del borde de la celda pero mas oscuro -mismo tono, menos claridad-, porque sobre el claro el
   blanco no se lee. Se dice y no se deja al sistema: cada Windows tiene su color de acento, y la
   grilla acabaria pintandose de un color distinto en cada maquina. */
.editortablaia .grilla ::selection {
    background: #2E7CBF;
    color: #FFFFFF;
}


/* ---------------------------------------------------------------------------------------------
   El cuadro de Propiedades: que columnas se ven, como se llaman y cuales se suman.

   En la de escritorio esto es una ventana aparte; aqui una capa encima de la pagina, que es la
   forma de decir lo mismo en un navegador. Los colores y los grosores son los de la grilla -el
   gris #DDDDDD de los bordes, el #E9E9E9 del encabezado-, que las dos se miran una al lado de la
   otra y un cuadro con otro aspecto se lee como otra aplicacion.
   --------------------------------------------------------------------------------------------- */

/* El velo. Oscurece lo de detras para que se vea que la pagina esta esperando, y ademas recoge
   los clics: sin el, se podria seguir escribiendo en la grilla con el cuadro abierto. */
.editortablaia .velo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Los mismos 620x520 que la ventana de escritorio, pero como maximos: en una pantalla pequeña
   el cuadro se encoge en vez de salirse. */
.editortablaia .cuadro {
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 12px;
    width: 620px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
}

.editortablaia .cuadro h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
}

.editortablaia .cuadro .explicacion {
    color: #777777;
    margin: 0 0 8px;
}

/* La lista se lleva el alto que sobra y se desplaza ella sola: con veintitantas columnas, el
   cuadro entero creceria hasta salirse de la pantalla y los botones quedarian fuera. */
.editortablaia .cuadro .lista {
    flex: 1;
    overflow: auto;
    border: 1px solid #DDDDDD;
}

.editortablaia .propiedades {
    border-collapse: collapse;
    width: 100%;
}

/* El encabezado se queda arriba al desplazar la lista: con veintitantas filas, bajando un poco
   se pierde de vista cual columna es cual. */
.editortablaia .propiedades th {
    position: sticky;
    top: 0;
    background: #E9E9E9;
    border: 1px solid #DDDDDD;
    font-weight: 400;
    height: 32px;
    padding: 0 8px;
    text-align: left;
    white-space: nowrap;
}

.editortablaia .propiedades td {
    border: 1px solid #DDDDDD;
    height: 30px;
    padding: 0 8px;
}

.editortablaia .propiedades .centro {
    text-align: center;
    width: 80px;
}

/* El nombre de la base, en gris: es lo unico de la fila que no se toca, y el gris lo dice antes
   de que nadie intente escribirlo. Es el mismo gris que la grilla usa para las celdas cerradas. */
.editortablaia .propiedades .nombre {
    background: #F5F5F5;
    white-space: nowrap;
}

/* El campo del titulo ocupa su celda entera y sin marco: dentro de una rejilla, un control con su
   propio borde en cada celda convierte la lista en un muro de cajas. Es lo mismo que hace la
   grilla de detalle. */
.editortablaia .propiedades input[type="text"] {
    font: inherit;
    color: inherit;
    border: none;
    background: transparent;
    width: 100%;
    padding: 0;
}

/* A la derecha y Aceptar el ultimo, que es donde se buscan. El mismo orden que la de escritorio. */
.editortablaia .cuadro .botones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.editortablaia .cuadro .botones button {
    font: inherit;
    padding: 3px 12px;
}

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

/* Cuando con rotulo no caben todos, la fila encoge -clase "compacta", que pone desborde.js-:
   los botones con dibujo van sin rotulo y cuadrados, del alto de la barra, con la figura mas
   grande en el medio, para que se sigan viendo todos antes de mandar ninguno bajo los puntos.
   Es la misma regla que la barra de la lista (ver lista.css, que cuenta por que). El rotulo
   sigue en el globo de ayuda. */
.editortablaia .barra .compacta button.con-dibujo {
    min-width: 0;
    width: var(--alto-boton-barra);
    padding: 0;
    justify-content: center;
}

.editortablaia .barra .compacta button.con-dibujo > span:not(.icono-barra) {
    display: none;
}

.editortablaia .barra .compacta button.con-dibujo svg {
    width: calc(var(--alto-boton-barra) * .55);
    height: calc(var(--alto-boton-barra) * .55);
}

/* ---------- El menu contextual de la fila ----------

   El mismo recurso que el de la lista -ver .menu-contextual en lista.css, que cuenta por que-:
   un fondo transparente que ocupa la ventana y recoge el clic que lo cierra, y la lista de
   opciones fija en las coordenadas del puntero. Las reglas se repiten aqui porque las de la
   lista estan acotadas a .listaia, y esta rejilla no cuelga de una lista. Los grises son los
   de esta hoja. */
.editortablaia .menu-fondo {
    position: fixed;
    inset: 0;
    z-index: 110;
}

.editortablaia .menu-contextual {
    position: fixed;
    z-index: 111;
    min-width: 11rem;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 13.333px;
    color: #4A4A4A;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

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

.editortablaia .menu-contextual button {
    display: block;
    width: 100%;
    padding: 5px 14px;
    text-align: left;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.editortablaia .menu-contextual button:hover:not(:disabled) {
    background: #E9E9E9;
}

/* Apagada se ve apagada y no responde: una fila que todavia no esta en la base no tiene
   historia que contar. */
.editortablaia .menu-contextual button:disabled {
    color: #AAAAAA;
    cursor: default;
}

/* ---------- El cuadro de auditoria ----------

   La historia de una fila, en el mismo cuadro que Propiedades y con la tabla dibujada igual que
   la de alli: encabezado gris que se queda arriba, celdas con el mismo borde. Mas estrecho, que
   son cuatro columnas cortas. */
.editortablaia .cuadro.auditoria {
    width: 560px;
}

.editortablaia .cuadro .explicacion.fallo {
    color: #B00020;
}

.editortablaia .historia {
    border-collapse: collapse;
    width: 100%;
}

.editortablaia .historia th {
    position: sticky;
    top: 0;
    background: #E9E9E9;
    border: 1px solid #DDDDDD;
    font-weight: 400;
    height: 32px;
    padding: 0 8px;
    text-align: left;
    white-space: nowrap;
}

.editortablaia .historia td {
    border: 1px solid #DDDDDD;
    height: 30px;
    padding: 0 8px;
    white-space: nowrap;
}