/* Pantalla de edicion de articulos. Mismo reparto que la version de escritorio: barra arriba,
   pestanas paginadas en el medio y el hueco reservado abajo.

   **TODO cuelga de .editoria, y no es orden sino lo unico que funciona alojado.** Esta hoja la
   enlaza quien aloje el editor, y sus reglas se llamaban .lista, .hoja, .barra, .mensaje,
   .columnas y .campo a secas: nombres que cualquier aplicacion usa. Dentro de GesNetIA.Web, que
   enlaza esta hoja y la de ListaIA, .lista alcanzaba a la GRILLA de la lista -que es
   <table class="quickgrid lista">- y le ponia el position: fixed del desplegable de un campo.
   Un elemento fijo no se desplaza con el contenedor que lo contiene: la barra horizontal de la
   grilla existia, su pulgar media lo que debia, y arrastrarla no movia nada. Medido en el
   navegador: con esta hoja la grilla se desplazaba 0 pixeles, sin ella 300. Lo mismo le pasaba
   a .hoja -le metia borde, fondo y 8 pixeles de relleno a la pestana de la lista- y al .campo
   del login, que hubo que parchear desde el otro lado.

   Es la misma correccion que ya hizo lista.css con .listaia, y esta contada alli con estas
   palabras: un componente no puede traerle a nadie un reset de html y body.

   La raiz va en TRES elementos y no en uno: .pantalla es el editor, y los dos dialogos -Dialogo
   y Propiedades- se dibujan FUERA de el, con .velo por raiz. Por eso en esas dos reglas
   .editoria va pegada al selector y no como ancestro. */

.editoria.pantalla {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ------------------------------------------------------------------ barra de herramientas */

/* El cuadro de herramientas: el mismo naranja, el mismo alto y el mismo relleno que el de
   ListaIA -ver TemaEditor.FondoCuadroHerramientas-. Las dos barras se ven en la misma pantalla
   y muchas veces una encima de otra.

   Alto MINIMO y relleno solo a los lados, por lo mismo que alla: 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. */
.editoria .barra {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: var(--alto-cuadro-herramientas);
    padding: 0 8px;
    background: var(--fondo-cuadro-herramientas);
}

/* Blanco sobre negro y en negrita, como en las dos de escritorio y como la barra de ListaIA.
   Era la diferencia mas visible de todas, porque el editor se abre desde una lista y muchas
   veces encima de ella: dos barras de acciones a un palmo una de otra con negros distintos.

   Los colores no estan escritos aqui: los emite TemaCss desde TemaEditor, que es de donde leen
   los mismos seis valores las otras dos versiones. */
/* **El enlace va con los botones y no aparte.** Imprimir no es un <button>: es un <a> que abre
   el PDF en otra pestaña (ver BotonVista.Enlace). Escrito solo contra `button`, este bloque no
   le alcanzaba, y el navegador le ponía lo suyo: azul de enlace —morado después de visitarlo—,
   sin el fondo de la barra y de otra medida, en medio de una fila de botones negros. */
.editoria .barra button,
.editoria .barra a.con-dibujo {
    /* Un <a> es content-box y un <button> border-box: sin esto el relleno lateral se le sumaría
       al min-width y el enlace saldría más ancho que sus vecinos. */
    box-sizing: border-box;
    text-decoration: none;
    /* El tamaño sale de TemaEditor, igual que los colores y por lo mismo: estaba escrito aquí
       y otra vez en el XAML de escritorio, y los dos números no coincidían. El alto es el
       mismo que el de la barra de ListaIA, que se ve al lado de ésta. */
    /* Minimo y no fijo: en ListaIA el boton crece con su rotulo, y estas dos barras se ven
       una al lado de la otra. */
    min-width: var(--ancho-barra);
    height: var(--alto-barra);
    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
       TemaEditor.RadioBoton. */
    border-radius: var(--radio-boton-barra);
    cursor: pointer;
}

.editoria .barra button:hover,
.editoria .barra a.con-dibujo:hover {
    background: var(--fondo-barra-sobre);
}

.editoria .barra button:active,
.editoria .barra a.con-dibujo:active {
    background: var(--fondo-barra-pulsado);
}

/* La fila de botones la dibuja BarraDesbordable, de ListaIA: una sola fila, con el hueco de
   siempre entre botones, que desborda bajo un boton de tres puntos cuando no caben (ver
   .fila-desbordable en lista.css). Grabar, Aplicar y Cancelar van con los demas, a la
   izquierda: estuvieron pegados a la derecha, y luego en un grupo propio; ya no hay grupos. */
.editoria .barra .fila-desbordable {
    gap: 4px;
}

/* Un boton que lleva dibujo: la figura arriba y el rotulo abajo, como los de ListaIA. Es una
   clase y no la regla de todos porque Grabar, Aplicar y Cancelar no tienen figura y su rotulo
   va centrado en la caja, igual que los botones que agrega una tabla en la lista. */
.editoria .barra button.con-dibujo,
.editoria .barra a.con-dibujo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    padding: 5px 4px 6px;
    line-height: 1;
}

.editoria .barra .con-dibujo svg {
    width: var(--tamano-icono);
    height: var(--tamano-icono);
    display: block;
}




/* -------------------------------------------------------------------------- las pestanas */

.editoria .tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Sin esto un contenedor flex nunca encoge por debajo de su contenido y la hoja crece hasta
       desbordar la ventana en vez de quedarse con el alto que le toca. */
    min-height: 0;
    /* Sin aire arriba: las solapas van pegadas a la barra de herramientas, como en las dos de
       escritorio y como la banda de la lista. Los 8 de los lados son el margen de la hoja. */
    padding: 0 8px 0 8px;
}

/* Las solapas que no caben en una fila bajan a la siguiente, como en la version Ava. En una sola
   fila, con el telefono y seis o siete paginas, la banda medía mas que la ventana y dejaba una
   barra de desplazamiento horizontal a toda la pantalla. */
.editoria .solapas {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    flex: 0 0 auto;
}

.editoria .solapa {
    padding: 5px 14px;
    border: 1px solid #d0d0d0;
    border-bottom: none;
    background: #efefef;
    cursor: pointer;
    font: inherit;
    position: relative;
    top: 1px;
}

.editoria .solapa.activa {
    /* El mismo fondo que la hoja: la solapa al frente es el borde de arriba de la pagina, y con
       otro color se despegaria de ella. */
    background: #f5f5f5;
    font-weight: 600;
}

.editoria .hoja {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid #d0d0d0;
    /* El papel sobre el que van los campos. Es lo que se ve en todo lo que no sea un control,
       porque ni la etiqueta ni la rejilla llevan fondo propio. */
    background: #f5f5f5;
    padding: 8px;
}

/* La banda de las entidades hijas: la MITAD del alto de la pantalla.

   Se dice en porcentaje y no en pixeles porque aqui el reparto lo hace flex y no hay nada que
   medir: 0 0 50% es "ni crece ni encoge, y ocupa la mitad". Las pestanas de arriba se quedan con
   la otra mitad, y el reparto de campos se hace con lo que quede.

   Sin hijas este div no se dibuja, asi que la regla no llega a aplicarse. */
.editoria .pie {
    flex: 0 0 50%;
    /* Sin esto el 50% no se cumple. Un hijo flex nace con min-height:auto, que vale "lo que
       mida su contenido": al pasar de unas pocas filas la grilla empujaba esta banda por debajo
       hasta hacerla mas alta que su mitad, y como .tabs si lleva min-height:0, el que encogia
       era el de ARRIBA. La cabecera se quedaba sin sitio y sus campos se apretaban.

       Con min-height:0 la banda se planta en su mitad pase lo que pase, y lo que no cabe lo
       scrollea .pie .hoja, que para eso lleva overflow:auto. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* El 50% de flex-basis es del area de CONTENIDO: sin esto los 8 pixeles de relleno se
       suman encima y la banda acaba midiendo un 52%, no la mitad. */
    box-sizing: border-box;
    padding: 8px;
}

/* La hoja de la banda de hijas NO lleva relleno. Dentro va la grilla de EditorTablaIA, que es un
   componente de otro repositorio, y lo que se aloja tiene que llegar a los bordes del hueco que
   se le da: el relleno de aqui se veria como un marco que la grilla no pidio.

   Los 8 pixeles de .editoria .hoja siguen siendo los buenos para la hoja de ARRIBA, la de los
   campos, donde ese aire es lo que separa las etiquetas del recuadro. Es solo abajo donde
   sobran, y por eso la regla se acota con .pie en vez de cambiar la de todos.

   Lo mismo se hace en la version de escritorio: TabsPie va con Padding 0 para quitarle los 12
   pixeles que Fluent le pone al contenido. Las dos pantallas se miran una al lado de la otra. */
.editoria .pie .hoja {
    padding: 0;
}

/* El aviso de la barra de herramientas: donde se dice lo que salio bien. Va dentro de .barra, que
   es flex, asi que se coloca solo a la derecha del ultimo boton. */
.editoria .mensaje {
    margin-left: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2e8b57;
    white-space: nowrap;
}

/* ------------------------------------------------------------------------- los campos */

.editoria .rejilla {
    display: grid;
    /* Las filas se colocan por su indice, no en cascada, y no se estiran para llenar la hoja: lo
       que llena el alto no es estirar las filas sino cuantas hay, y de eso se encarga
       ParesAjustados quitando columnas hasta que quepan las que caben. */
    align-content: start;
    /* **Y el sobrante de ancho se reparte a los dos lados.** Las columnas miden lo que miden -no
       se estiran, o el campo se deformaria-, asi que al quitar columnas la fila se estrecha y
       sobra sitio. Pegada a la izquierda, ese sobrante se acumulaba entero a la derecha; asi se
       parte en dos margenes iguales y el bloque queda centrado en su hueco.

       `safe` y no `center` a secas: cuando los campos no caben a lo ancho, un centrado normal los
       desborda por la izquierda y la primera columna queda fuera del alcance de la barra de
       desplazamiento. Con `safe`, en ese caso se comporta como `start`. */
    justify-content: safe center;
}

/* **Ningun campo mide mas que su columna.** Un elemento de rejilla no encoge, de serie, por debajo
   de su ancho minimo propio, y en Safari un input tiene uno grande: en el iPhone, con las dos
   columnas estrechas del telefono, los campos de la derecha y los de dos columnas se salian por
   el borde de la pantalla. Chromium los deja encoger y no se notaba aqui. */
.editoria .rejilla > * {
    min-width: 0;
}

/* Lo que se comprobo fuera -un RUC en SUNAT-: en la celda de la caja, pegado al borde derecho de
   la celda, y la caja se encoge para dejarle sitio (EditorCompleto.AnchoDelLado): queda a su lado y
   no dentro. Mismo alto y margen que .campo para que quede centrado con la caja. Ava y Nat lo
   ponen tambien a la derecha de la caja. Ver EditorCompleto.MarcarVerificacionAsync. */
.editoria .marca {
    justify-self: end;
    align-self: start;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 25px;
    margin-top: 3px;
    font-size: 11px;
    white-space: nowrap;
}

/* La marca es solo el signo, sin "Verificado": algo mas grande para que se lea sola. */
.editoria .marca > b { font-size: 16px; }

/* El boton Verificar de un correo que se prueba con un codigo, en el sitio de la marca. Ver
   EditorCompleto.VerificarCorreoAsync; Ava y Nat lo ponen dentro de la caja, del mismo azul. */
.editoria .marca.verificar {
    height: 23px;
    margin-top: 4px;
    padding: 0 10px;
    border: 0;
    background: #1565C0;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
}

.editoria .marca.verificar:disabled { opacity: 0.7; cursor: default; }

/* El recuadro del codigo: el aviso, la caja y el error uno debajo del otro. */
.editoria .dialogo.codigo-correo > .cuerpo {
    flex-direction: column;
    align-items: stretch;
    max-width: 420px;
}

.editoria .dialogo.codigo-correo .codigo {
    width: 130px;
    font-size: 18px;
    letter-spacing: 4px;
    text-align: center;
}

.editoria .dialogo.codigo-correo .error-codigo { color: #C62828; }

.editoria .marca.bien { color: #1B8A3A; }
.editoria .marca.mal { color: #C62828; }
.editoria .marca.duda { color: #B26A00; }

/* La etiqueta va ENCIMA de su control, no al lado.

   Sin recuadro ni sangria: los tenia cuando iba al lado, donde el borde la cerraba contra el
   campo formando una sola caja, y los veinte pixeles de la izquierda la separaban del campo
   anterior. Encima no separa nada de nada y solo seria ruido; lo que la ata a su control es
   estar justo arriba y alineada a la izquierda con el.

   Pegada abajo (flex-end) para que quede junto al control y no flotando en su hueco.

   En gris y con el peso normal: el que pesa es el valor, no el rotulo. Ver .campo y, para el
   porque, TemaEditor.TextoEtiqueta, de donde sale el color. */
.editoria .etiqueta {
    display: flex;
    align-items: flex-end;
    background: transparent;
    margin: 3px 0 0 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--texto-etiqueta);
}

/* El ancho lo pone la rejilla estirando el campo, NO width: 100%.

   Un elemento de rejilla estirado ocupa el area de su celda MENOS sus margenes, y ese margen es
   justo la separacion entre columnas: la celda mide AnchoCampo + Separacion y el control se queda
   con AnchoCampo. Con width: 100% el control media la celda ENTERA, el margen se salia por la
   derecha y los campos aparecian pegados uno al otro, sin el hueco que si tiene la version de
   escritorio.

   justify-self va explicito y no se deja en normal: normal solo equivale a stretch cuando el
   navegador no trata el control como reemplazado, y de eso no conviene depender en un input. */
.editoria .campo {
    box-sizing: border-box;
    width: auto;
    justify-self: stretch;
    height: 25px;
    margin: 3px 0 5px 0;
    padding: 0 4px;
    font: inherit;
    /* El valor, en seminegrita: es lo que cambia de una ficha a otra y lo que se busca al
       mirarla; el rotulo de encima se queda en gris y en peso normal. Va DESPUES de font,
       porque el atajo font vuelve a poner el peso en el heredado. El numero sale de
       TemaEditor.PesoValor, que es donde esta el porque. */
    font-weight: var(--peso-valor);
    border: 1px solid #c0c0c0;
    background: #fff;
}

/* Lo que solo se lee va en WhiteSmoke: lo bastante cerca del blanco para no leerse como un
   control apagado, y lo bastante lejos para verse de un vistazo. Los dos estados, porque no
   todos los campos se bloquean igual: el cuadro de texto y el desplegable llevan readonly, para
   poder leerlos y copiarlos, y el resto disabled. */
.editoria .campo[readonly],
.editoria .campo[disabled] {
    background: #f5f5f5;
}

/* Una clave foranea que se quedo sin entidad: el desplegable esta ahi pero sale vacio, asi que se
   marca en ambar claro para distinguirlo del de una entidad que existe y no tiene filas. Va
   despues de la regla de solo lectura, y con su misma especificidad, para ganarle. */
.editoria .campo.sin-entidad {
    background: #fff4ce;
}

/* Una casilla no tiene superficie de texto que pintar, asi que se queda con su tamano propio.

   **Y por eso va centrada en el hueco del campo.** Mide lo que mide su recuadro, quince
   pixeles, mientras que el hueco que le toca en la rejilla es el mismo que el de una caja de
   texto: pegada a la izquierda quedaba perdida en una esquina de ese hueco. El centrado lo hace
   el contenedor, que si ocupa el hueco entero. Lo mismo en Ava y en Nat. */
.editoria .campo.casilla {
    width: auto;
    height: 25px;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editoria .campo.casilla input {
    width: 15px;
    height: 15px;
}

/* El control de una contraseña (CajaContrasena.razor), en cualquier pantalla: el editor y el
   login. Esta hoja se enlaza en la cabecera, asi que vale para las dos.

   **El control no decide su ancho: lo llena.** El ancho se lo da el formulario que lo pone -la
   rejilla del editor, el login-, igual que a cualquier otra caja suya; dentro, la caja ocupa el
   contenedor entero y el ojo va pegado a su borde derecho, centrado en el alto, con el sitio
   que necesita para que el texto no pase por debajo. Nada de lo que haya fuera -la marca de
   Verificado del alta de usuario- le toca. Ava y Nat igual. [type] solo para ganarle en
   especificidad a lo que el login pone a sus input (.panel-login input[type="password"]). */
.caja-contrasena {
    position: relative;
    display: block;
}

.caja-contrasena input.campo[type] {
    box-sizing: border-box;
    width: 100%;
    padding-right: 26px;
}

.caja-contrasena .ojo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 3px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

/* En el editor, envuelta como el desplegable y por lo mismo: el elemento de la rejilla es el
   div, que lleva el margen vertical y el ancho, y el input lo llena. */
.editoria .caja-contrasena {
    box-sizing: border-box;
    width: auto;
    justify-self: stretch;
    margin: 3px 0 5px 0;
}

.editoria .caja-contrasena .campo {
    margin-top: 0;
    margin-bottom: 0;
}

.editoria .campo.casilla label {
    margin-left: 6px;
    /* El mismo gris que el rotulo de encima: es un rotulo, no un valor. */
    color: var(--texto-etiqueta);
    font-weight: normal;
}

/* --------------------------------------------------------------- desplegable de entidad */

/* El hueco que el desplegable ocupa en la rejilla lo pone el estilo que calcula la pantalla,
   igual que en los demas campos; aqui solo se le da un sitio propio a la lista. */
.editoria .desplegable {
    position: relative;
    /* Mismo ancho que .campo, y por el mismo motivo: estirado por la rejilla, que es lo que
       respeta el margen de separacion.

       **Antes llevaba width: 100% para igualar a los demas campos, y los demas estaban mal.**
       Este se estiraba bien -area menos margenes- y salia 8 px mas angosto que ellos; en vez de
       corregirlos se le quito el hueco a este tambien. Ahora se estiran los cuatro igual. */
    box-sizing: border-box;
    width: auto;
    justify-self: stretch;
    /* El mismo margen vertical que .campo, y por el mismo motivo que el ancho: el elemento de la
       rejilla es este div y el margen lo llevaba el input de dentro, que no cuenta para el alto
       de la fila. Sin esto una fila de solo desplegables queda 8 px mas baja que una con cuadros
       de texto, y el espacio entre filas sale desigual. */
    margin: 3px 0 5px 0;
}

/* La flecha va dentro del campo, pegada a su borde derecho, como la de un combo. La caja del
   boton se hace coincidir con la del input —que empieza 3 px mas abajo por su margen— para que
   quede centrada en el campo y no en el hueco de la rejilla, que es mas alto. */
.editoria .desplegable .flecha {
    position: absolute;
    /* Cero, no 3: el input ya arranca en el borde del contenedor, porque su margen vertical se
       movio al propio contenedor para que cuente en el alto de la fila. */
    top: 0;
    right: 1px;
    width: 20px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #444;
    border: none;
    background: none;
    cursor: pointer;
}

/* El chevron se dibuja con dos bordes girados en vez de con un caracter: los glifos de flecha
   se dibujan abajo de su linea y quedan descentrados, y ademas cambian de una fuente a otra. */
.editoria .desplegable .flecha::before {
    content: "";
    width: 7px;
    height: 7px;
    /* Al girar el cuadrado 45 grados, la V que dibujan los dos bordes queda en su mitad de
       abajo: su trazo cae 2,5 px por debajo del centro de la caja. Este margen la sube esa
       distancia (el centrado reparte el margen a partes iguales), y asi el dibujo queda a la
       altura del texto del campo. */
    margin-bottom: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
}

.editoria .desplegable .flecha:disabled {
    color: #b0b0b0;
    cursor: default;
}

/* Sitio para la flecha, para que el texto no llegue a pasar por debajo. */
.editoria .desplegable .campo {
    /* El margen vertical lo lleva ahora el contenedor; repetirlo aqui lo sumaria dos veces. */
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 22px;
    /* **Aqui SI width: 100%, al reves que en los demas campos.** Este input no es elemento de la
       rejilla -lo es .desplegable, que lo envuelve-, asi que no lo estira nadie: con el ancho
       automatico que .campo necesita para estirarse en su celda, este se quedaria con el tamano
       de fabrica de un input. El 100% se mide contra .desplegable, que ya viene del ancho bueno,
       y la flecha y la lista siguen colgando de el como hasta ahora. */
    width: 100%;
}

/* El rotulo del campo vacio, en gris apagado: dice que no hay nada elegido, y tiene que leerse
   como un aviso y no como el nombre de una fila. El mismo gris que la flecha apagada. */
.editoria .desplegable .campo::placeholder {
    color: #b0b0b0;
    /* Firefox le baja la opacidad de fabrica y el gris saldria mas claro que en los demas. */
    opacity: 1;
}

/* La lista va en position fixed y la situa editor.situarLista: la hoja recorta lo que se sale,
   asi que dentro de ella los campos de abajo abririan una lista cortada. */
.editoria .lista {
    position: fixed;
    z-index: 900;
    max-height: 320px;
    /* Lo que midan las columnas, sin pasar de la pantalla: el mismo tope que la version Nat.
       El ancho sale del contenido, asi que dentro no puede haber nada que pida un porcentaje:
       en un elemento fixed ese porcentaje se cuenta contra la ventana y la lista se estiraria
       hasta el borde. Por eso la tabla lleva min-width y no width, y ninguna celda pide ancho. */
    width: max-content;
    max-width: 90vw;
    overflow: auto;
    border: 1px solid #c0c0c0;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* min-width y no width: solo sirve para rellenar cuando el campo es mas ancho que las columnas;
   el reparto entre ellas lo hace la tabla con el ancho de cada texto. */
.editoria .lista table {
    min-width: 100%;
    border-collapse: collapse;
}

.editoria .lista td {
    padding: 2px 5px;
    white-space: nowrap;
}

/* Una linea entre columnas, como la grilla de la version de escritorio. */
.editoria .lista td + td {
    border-left: 1px solid #e0e0e0;
}

.editoria .lista tr:hover td {
    background: #e8f0fb;
}

.editoria .lista tr.marcada td {
    background: #cde1f8;
}

/* ------------------------------------------------------------------- la cabecera en el telefono */

/* En una pantalla de 700 px o menos la cabecera va en dos columnas que llenan el ancho -las pone
   EditorCompleto.PlantillaColumnas- y las filas casi pegadas: 2 px entre el control de arriba y
   el rotulo de abajo. EditorCompleto.MargenVerticalTelefono cuenta lo mismo para saber cuantas
   filas entran por pagina. Solo los hijos directos de la rejilla: el input de dentro de un
   desplegable no lleva margen y no tiene que ganarlo aqui. */
@media (max-width: 700px) {
    .editoria .rejilla > .etiqueta {
        margin-top: 0;
    }

    .editoria .rejilla > .campo,
    .editoria .rejilla > .desplegable {
        margin-bottom: 2px;
    }
}

/* ------------------------------------------------------------ el campo ampliado del telefono */

/* En una pantalla de 700 px o menos el campo que se toca se edita aqui, con el ancho de toda la
   ventana y la letra grande. Ver EditorCompleto.Ampliar. Por debajo de la lista del desplegable
   (900), que tiene que poder abrirse encima, y de los dialogos (1000). */
.editoria .ampliado-fondo {
    position: fixed;
    inset: 0;
    z-index: 850;
    display: flex;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.35);
}

.editoria .ampliado {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.editoria .ampliado .rotulo {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
}

/* El control a lo ancho y con letra que se lee y se toca sin apuntar. */
.editoria .ampliado .campo,
.editoria .ampliado .desplegable {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    font-size: 20px;
}

.editoria .ampliado textarea.campo {
    height: auto;
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.editoria .ampliado .desplegable .campo {
    height: 100%;
}

/* La flecha a toda la altura de la caja grande y algo mayor: con la de la pantalla quedaba un
   triangulito pegado arriba, dificil de acertar con el dedo. */
.editoria .ampliado .desplegable .flecha {
    height: 100%;
    width: 40px;
}

.editoria .ampliado .desplegable .flecha::before {
    width: 12px;
    height: 12px;
    margin-bottom: 8px;
}

.editoria .ampliado .botones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* Los dos botones como los de la barra: el dibujo encima del rotulo, en caja negra. */
.editoria .ampliado .boton-ampliado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 96px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: #000;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* El dibujo a medida: suelto, el svg de IconoBarra crece hasta llenar el boton. */
.editoria .ampliado .boton-ampliado .icono-barra {
    width: 22px;
    height: 22px;
}

/* ------------------------------------------------------------------------------ dialogos */

.editoria.velo {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

.editoria .dialogo {
    background: #fff;
    border: 1px solid #8a8a8a;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
    min-width: 380px;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    max-height: 86vh;
}

.editoria .dialogo > header {
    padding: 8px 12px;
    background: #f0f0f0;
    border-bottom: 1px solid #d8d8d8;
    font-weight: 600;
}

.editoria .dialogo > .cuerpo {
    padding: 16px 20px;
    overflow: auto;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.editoria .dialogo > footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid #e4e4e4;
}

.editoria .dialogo footer button {
    min-width: 96px;
    height: 30px;
    font: inherit;
    background: #fdfdfd;
    border: 1px solid #c4c4c4;
    cursor: pointer;
}

.editoria .dialogo footer button:hover {
    background: #e8f0fb;
    border-color: #7aa4d8;
}

/* La ficha de un gestor nuevo (FichaDeGestor): rotulo a la izquierda y campo a la derecha, mas
   ancha que un aviso porque lleva una direccion entera. El escritorio la tiene en
   FichaDeGestor de EditorIA.Ava.Componente. */
.editoria .dialogo.ficha-gestor {
    min-width: 560px;
    max-width: 720px;
}

.editoria .dialogo.ficha-gestor > .cuerpo {
    flex-direction: column;
    align-items: stretch;
}

.editoria .rejilla-ficha {
    display: grid;
    grid-template-columns: 170px 1fr;
    align-items: center;
    column-gap: 10px;
}

.editoria .rejilla-ficha .campo,
.editoria .rejilla-ficha .desplegable {
    width: 100%;
}

.editoria .nota-ficha {
    color: #4682b4;
}

.editoria .nota-ficha.error {
    color: #cd5c5c;
}

.editoria .icono {
    font-size: 22px;
    line-height: 1;
}

.editoria .icono.informacion,
.editoria .icono.pregunta { color: #4682b4; }
.editoria .icono.aviso { color: #b8860b; }
.editoria .icono.error { color: #cd5c5c; }

.editoria .mensaje {
    white-space: pre-wrap;
}

/* -------------------------------------------------------------------------- propiedades */

.editoria .propiedades {
    width: 560px;
    max-width: 92vw;
    height: 560px;
    max-height: 86vh;
}

.editoria .propiedades .cuerpo {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px;
    min-height: 0;
}

.editoria .propiedades .ayuda {
    padding: 6px 0 12px 0;
}

.editoria .propiedades .ayuda.error { color: #cd5c5c; }

/* La pestaña Propiedades: sus secciones una debajo de otra, y si no caben se desplaza la
   pestaña entera y no cada tabla por su lado. */
.editoria .propiedades .secciones {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.editoria .propiedades .seccion {
    font-weight: 600;
    margin-top: 12px;
}

.editoria .propiedades .columnas.iniciales {
    flex: none;
    overflow: visible;
}

.editoria .columnas {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid #d3d3d3;
}

.editoria .columnas table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.editoria .columnas th {
    position: sticky;
    top: 0;
    background: #f0f0f0;
    border-bottom: 1px solid #d3d3d3;
    text-align: left;
    padding: 5px 6px;
    font-weight: 600;
}

.editoria .columnas td {
    border-bottom: 1px solid #ededed;
    padding: 0 6px;
    height: 28px;
}

.editoria .columnas .col-agarre { width: 26px; padding: 0; }
.editoria .columnas .col-visible { width: 64px; text-align: center; }
.editoria .columnas .col-columnas { width: 80px; text-align: center; }

/* El Estado del campo: Editable, Solo lectura o Invisible. Lo que mide el mas largo. */
.editoria .columnas .col-estado { width: 120px; }

.editoria .columnas .col-estado select {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    height: 24px;
}

/* Cuantas columnas ocupa el campo: un numero corto, centrado en su celda. */
.editoria .columnas input[type="number"] {
    width: 56px;
    box-sizing: border-box;
    font: inherit;
    height: 24px;
    text-align: center;
}

.editoria .columnas .agarre {
    cursor: grab;
    color: #888;
    text-align: center;
    user-select: none;
}

/* Misma regla que en la pantalla de edicion: la columna que solo se lee va en WhiteSmoke. */
.editoria .columnas .nombre {
    background: #f5f5f5;
}

.editoria .columnas tr.fija {
    color: #808080;
}

.editoria .columnas tr.arrastrando {
    background: #e8f0fb;
}

.editoria .columnas input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    border: none;
    background: #fff;
    height: 26px;
    padding: 0 4px;
}

/* Misma regla que la pantalla de edicion: donde solo se lee, WhiteSmoke. */
.editoria .columnas input[readonly] {
    background: #f5f5f5;
}

/* Las solapas de la ventana de Propiedades. Mismo dibujo que las de la pantalla, en pequeno. */
.editoria .dialogo .solapas {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
}

/* La casilla de la pestaña Impresion: el rotulo al lado, y todo el rotulo la marca. */
.editoria .dialogo .casilla-impresion {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    cursor: pointer;
}


/* ---------- 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. */
.editoria .barra .compacta button.con-dibujo,
.editoria .barra .compacta a.con-dibujo {
    min-width: 0;
    width: var(--alto-barra);
    padding: 0;
    justify-content: center;
}

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

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