/* MVarela ago/26 Estilos del editor de texto enriquecido estandar.

   POR QUE NO ES CSS AISLADO DEL COMPONENTE (.razor.css): Quill construye su barra y su area
   de edicion en tiempo de ejecucion, y esos nodos NO llevan el atributo de scope que Blazor
   inyecta, asi que las reglas aisladas nunca les aplicarian. Por eso va como hoja global de la
   RCL, y cada host la referencia:

       <link rel="stylesheet" href="_content/ibSoft.UI.Shared/css/editor-texto-enriquecido.css" />
*/

/* -- Alto del editor ----------------------------------------------------------

   quill.core.css le pone height:100% al .ql-container, que es nuestro .ete-host. Con el
   padre sin altura definida eso COLAPSA el contenedor: el contenido se dibuja fuera y no
   empuja lo que viene despues, asi que el editor termina tapando los botones del formulario.

   Se corrige devolviendole height:auto al contenedor y poniendo el alto minimo en el AREA
   DE EDICION (.ql-editor), que es lo que debe crecer. Asi el bloque completo
   (barra + area) ocupa su espacio real y el formulario fluye normal.

   El alto se ajusta por pantalla con la variable --ete-alto, sin tocar este archivo:

       .mi-clase { --ete-alto: 20rem; }
       <EditorTextoEnriquecido CssClass="mi-clase" />
*/

.ql-container.ete-host {
    height: auto;
}

.ql-container.ete-host .ql-editor {
    min-height: var(--ete-alto, 12rem);
}

/* -- Desplegable de tablas ----------------------------------------------------
   Quill rotula los <select> de la barra por CSS. Sin estas reglas el control
   aparece vacio y las opciones se ven como "insertar", "fila-arriba", etc. */

.ql-snow .ql-picker.ql-tabla {
    width: 6.5rem;
}

.ql-snow .ql-picker.ql-tabla .ql-picker-label::before {
    content: 'Tabla';
}

.ql-snow .ql-picker.ql-tabla .ql-picker-item[data-value='insertar']::before       { content: 'Insertar tabla'; }
.ql-snow .ql-picker.ql-tabla .ql-picker-item[data-value='fila-arriba']::before    { content: 'Fila arriba'; }
.ql-snow .ql-picker.ql-tabla .ql-picker-item[data-value='fila-abajo']::before     { content: 'Fila abajo'; }
.ql-snow .ql-picker.ql-tabla .ql-picker-item[data-value='columna-izq']::before    { content: 'Columna izquierda'; }
.ql-snow .ql-picker.ql-tabla .ql-picker-item[data-value='columna-der']::before    { content: 'Columna derecha'; }
.ql-snow .ql-picker.ql-tabla .ql-picker-item[data-value='borrar-fila']::before    { content: 'Eliminar fila'; }
.ql-snow .ql-picker.ql-tabla .ql-picker-item[data-value='borrar-columna']::before { content: 'Eliminar columna'; }
.ql-snow .ql-picker.ql-tabla .ql-picker-item[data-value='borrar-tabla']::before   { content: 'Eliminar tabla'; }

/* El desplegable necesita ancho para que quepan las etiquetas largas. */
.ql-snow .ql-picker.ql-tabla .ql-picker-options {
    width: 12rem;
}

/* -- Tablas dentro del editor -------------------------------------------------
   El tema snow no le pone bordes a las tablas: sin esto, el usuario inserta una
   tabla y no ve donde quedan las celdas. Los bordes son solo del EDITOR; lo que
   se guarda es el HTML, que se imprime con los estilos del formato. */

.ql-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
}

.ql-editor table td {
    border: 1px solid #adb5bd;
    padding: 0.25rem 0.5rem;
    min-width: 2rem;
}

/* Fila bajo el cursor, para no perderse en tablas grandes. */
.ql-editor table tr:hover td {
    background-color: rgba(13, 110, 253, 0.04);
}