/* La pantalla del diseñador de reportes. Las variables de la barra las declara
   TemaDisenadorCss a partir de TemaBarra, que es el mismo del que leen la barra de Avalonia
   (BarraNegra) y la de WinForms: aquí no se decide ni un color de los botones.

   Lo que SÍ se decide aquí son los grises del lienzo, que son los mismos que escriben las otras
   dos en sus constantes: el fondo del lienzo, la franja del rótulo de la banda, el azul de la
   selección y la guía punteada de lo que no tiene borde. Están en un solo sitio, arriba. */

.disenadoria {
    /* Los del lienzo, uno por uno los mismos que Lienzo.cs en Ava y en Nat. */
    --fondo-lienzo: #E9E9E9;
    --fondo-rotulo: #D6D6D6;
    --texto-rotulo: #4A4A4A;
    --seleccion: #1E6FD9;
    --celda-marcada: rgba(30, 111, 217, 0.11);
    --oculto: rgba(128, 128, 128, 0.27);
    --guia: #C8C8C8;
    --guia-tabla: #D8D8D8;
    --sombra-banda: #B0B0B0;
    --linea-panel: #D0D0D0;
    --fondo-pie: #F5F5F5;
    --fondo-aviso: #FFF4CE;
    --texto-nota: #707070;

    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 10pt;
    background: #fff;
}

/* ------------------------------------------------------------------ la barra */

.disenadoria .cuadro-barra {
    background: var(--fondo-cuadro-herramientas);
    min-height: var(--alto-cuadro-herramientas);
    display: flex;
    align-items: center;
    padding: 0 8px;
    flex: 0 0 auto;
}

.disenadoria .barra {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.disenadoria .boton-barra {
    /* **Hace falta decirlo porque Abrir no es un <button>, es un <label>.** El navegador le da
       border-box a los botones y content-box a lo demás, así que el relleno lateral se sumaba al
       min-width solo en la etiqueta: Abrir salía catorce píxeles más ancho que sus vecinos. */
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: var(--ancho-boton-barra);
    height: var(--alto-boton-barra);
    padding: 0 7px;
    border: 0;
    border-radius: var(--radio-boton-barra);
    background: var(--fondo-barra);
    color: var(--texto-barra);
    font-size: var(--tamano-barra);
    font-weight: 700;
    cursor: pointer;
}

.disenadoria .boton-barra:hover { background: var(--fondo-barra-sobre); }
.disenadoria .boton-barra:active { background: var(--fondo-barra-pulsado); }
.disenadoria .boton-barra .icono-barra { width: var(--icono-boton-barra); height: var(--icono-boton-barra); }

/* Abrir es una etiqueta con el <input type=file> escondido dentro: pulsarla abre el diálogo de
   archivos del navegador, y se viste como los demás botones para que no se note. */
.disenadoria label.boton-barra { user-select: none; }

/* Sin reporte: el cuerpo entero es un aviso, hasta que se abra o se baje uno. */
.disenadoria .disenador-vacio {
    margin: 48px auto;
    max-width: 560px;
    text-align: center;
    color: var(--texto-atenuado, #666);
    font-size: 10pt;
}

/* ------------------------------------------------------------- las tres columnas */

.disenadoria .cuerpo {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.disenadoria .columna-arbol {
    flex: 0 0 240px;
    overflow: auto;
    border-right: 1px solid var(--linea-panel);
    padding: 4px;
    font-size: 9pt;
}

.disenadoria .columna-centro {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.disenadoria .columna-fichas {
    flex: 0 0 370px;
    overflow: auto;
    border-left: 1px solid var(--linea-panel);
    padding: 4px 10px 16px;
}

/* El árbol de la estructura: listas anidadas, sin viñetas, con el nombre como botón. */
.disenadoria .arbol, .disenadoria .arbol ul { list-style: none; margin: 0; padding: 0; }
.disenadoria .arbol ul { padding-left: 12px; }
.disenadoria .arbol button {
    background: none;
    border: 0;
    padding: 1px 4px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.disenadoria .arbol button:hover { background: #EEF4FC; }
.disenadoria .arbol button.marcado { background: var(--seleccion); color: #fff; }
.disenadoria .arbol .pliegue {
    width: 14px;
    display: inline-block;
    color: var(--texto-nota);
    cursor: pointer;
}

/* ---------------------------------------------------------------- el lienzo */

.disenadoria .marco-lienzo {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--fondo-lienzo);
}

.disenadoria .lienzo {
    position: relative;
    background: var(--fondo-lienzo);
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.disenadoria .lienzo .rotulo-banda {
    position: absolute;
    background: var(--fondo-rotulo);
    color: var(--texto-rotulo);
    font-size: 11px;
    line-height: 18px;
    padding-left: 6px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

.disenadoria .lienzo .banda {
    position: absolute;
    background: #fff;
    border: 1px solid var(--sombra-banda);
    box-sizing: content-box;
    overflow: hidden;
}

/* Cada elemento del reporte es un div en su sitio. box-sizing en border-box porque el cuadro
   del RDL incluye el borde, igual que en las otras dos. */
.disenadoria .lienzo .elemento {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
}

.disenadoria .lienzo .texto {
    display: flex;
    flex-direction: column;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.2;
}

/* Un texto suelto sin borde ni fondo se marca con una guía para que se vea que está. */
.disenadoria .lienzo .guia { outline: 1px dashed var(--guia); outline-offset: -1px; }

.disenadoria .lienzo .imagen img { width: 100%; height: 100%; display: block; }

.disenadoria .lienzo .sin-imagen {
    font-size: 10px;
    color: var(--texto-rotulo);
    padding: 2px;
}

.disenadoria .lienzo .linea { position: absolute; }

.disenadoria .lienzo .celda { outline: 1px solid var(--guia-tabla); outline-offset: -1px; }
.disenadoria .lienzo .celda-marcada { background-color: var(--celda-marcada); }

/* Lo oculto se ve a medias: está, pero no saldrá. */
.disenadoria .lienzo .a-medias { opacity: 0.45; }
.disenadoria .lienzo .velo { position: absolute; background: var(--oculto); pointer-events: none; }

/* El marco de la selección y sus ocho asas. Van por encima de todo y fuera del recorte de la
   banda, que es lo que hacen las otras dos al pintarlas al final. */
.disenadoria .lienzo .dis-seleccion {
    position: absolute;
    border: 1.5px solid var(--seleccion);
    box-sizing: border-box;
    cursor: move;
}
.disenadoria .lienzo .dis-seleccion.quieta { border-width: 1px; border-style: dashed; cursor: default; }
.disenadoria .lienzo .marco-celda {
    position: absolute;
    border: 1.5px solid var(--seleccion);
    box-sizing: border-box;
    pointer-events: none;
}
.disenadoria .lienzo .asa {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: #fff;
    border: 1.5px solid var(--seleccion);
    box-sizing: border-box;
}

/* ------------------------------------------------------------- el panel del código */

.disenadoria .panel-codigo {
    flex: 0 0 230px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #FAFAFA;
    border-top: 1px solid var(--linea-panel);
}

.disenadoria .panel-codigo .aviso { background: var(--fondo-aviso); padding: 6px 10px; font-size: 9pt; }
.disenadoria .panel-codigo .mitades { display: flex; flex: 1 1 auto; min-height: 0; }
.disenadoria .panel-codigo .mitad { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; padding: 4px 10px 8px; }
.disenadoria .panel-codigo .mitad + .mitad { border-left: 1px solid var(--linea-panel); }
.disenadoria .panel-codigo h4 { margin: 2px 0 4px; font-size: 9pt; }
.disenadoria .panel-codigo pre {
    flex: 1 1 auto;
    margin: 0;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--linea-panel);
    padding: 6px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 9pt;
}
.disenadoria .panel-codigo .usos { flex: 1 1 auto; overflow: auto; list-style: none; margin: 0; padding: 0; }
.disenadoria .panel-codigo .usos button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 3px 6px;
    font: inherit;
    cursor: pointer;
}
.disenadoria .panel-codigo .usos button:hover { background: #EEF4FC; }
.disenadoria .panel-codigo .usos strong { display: block; font-size: 9pt; }
.disenadoria .panel-codigo .usos code { color: #444; font-size: 9pt; word-break: break-all; }

/* ------------------------------------------------------------------- las fichas */

.disenadoria .fichas h3 { font-size: 9pt; margin: 12px 0 4px; }
.disenadoria .fichas .nota { font-size: 8.5pt; color: var(--texto-nota); margin: 0 0 4px; }
.disenadoria .fichas .fila { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.disenadoria .fichas .fila > label { flex: 0 0 96px; font-size: 9pt; }
.disenadoria .fichas .fila > .editor { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.disenadoria .fichas .editor > input[type=text], .disenadoria .fichas .editor > select, .disenadoria .fichas .editor > textarea { flex: 1 1 120px; min-width: 0; }
.disenadoria .fichas input, .disenadoria .fichas select, .disenadoria .fichas textarea { font: inherit; font-size: 9pt; padding: 2px 4px; }
.disenadoria .fichas input[type=number] { width: 90px; }
.disenadoria .fichas textarea { min-height: 56px; width: 100%; }
.disenadoria .fichas .casillas { display: flex; flex-wrap: wrap; gap: 10px; }
.disenadoria .fichas .casillas label { font-size: 9pt; display: inline-flex; align-items: center; gap: 4px; }
.disenadoria .fichas .muestra { width: 18px; height: 18px; border: 1px solid gray; flex: 0 0 auto; }
.disenadoria .fichas button { font: inherit; font-size: 9pt; padding: 3px 8px; cursor: pointer; }
.disenadoria .fichas button:disabled { cursor: default; opacity: 0.5; }

/* ---------------------------------------------------------------------- el pie */

.disenadoria .pie {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--fondo-pie);
    padding: 4px 10px;
    font-size: 9pt;
}
.disenadoria .pie .archivo { font-weight: 700; white-space: nowrap; }
.disenadoria .pie .estado { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.disenadoria .aviso-pantalla {
    margin: 24px auto;
    max-width: 560px;
    text-align: center;
    white-space: pre-wrap;
}

/* En una pantalla estrecha las tres columnas no caben una al lado de otra: se apilan, que es
   lo mismo que hace la lista con su barra. */
@media (max-width: 1100px) {
    .disenadoria .cuerpo { flex-direction: column; }
    .disenadoria .columna-arbol, .disenadoria .columna-fichas { flex: 0 0 auto; max-height: 260px; border: 0; border-bottom: 1px solid var(--linea-panel); }
    .disenadoria .columna-fichas { border-top: 1px solid var(--linea-panel); border-bottom: 0; }
}

/* ------------------------------------------------------------------- el puente

   Lo que envuelve al diseñador dentro de una pestaña de GesNetIA: el árbol de GrlAplicacion para
   elegir qué reporte se abre, y los avisos. Va aquí, con el resto de la hoja del diseñador, y no
   en app.css, porque es del diseñador y no de la cáscara: así se toca en un solo sitio.

   **Tiene sus propios .boton-barra y .modal a propósito.** Los de la lista viven bajo .listaia, y
   esto no es una lista; repetirlos aquí bajo .disenadoria-puente es lo mismo que hace la rejilla
   con los suyos. Los colores no se repiten: salen de las variables que declara TemaDisenadorCss. */

.disenadoria-puente {
    --fondo-pie: #F5F5F5;
    --linea-panel: #D0D0D0;
    --seleccion: #1E6FD9;
    --texto-nota: #707070;

    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 10pt;
}

.disenadoria-puente > .disenadoria { flex: 1 1 auto; min-height: 0; }

.disenadoria-puente .boton-barra {
    font: inherit;
    font-size: 9pt;
    font-weight: 700;
    padding: 6px 14px;
    border: 0;
    border-radius: var(--radio-boton-barra, 4px);
    background: var(--fondo-barra, #2B2B2B);
    color: var(--texto-barra, #fff);
    cursor: pointer;
}
.disenadoria-puente .boton-barra:hover:not(:disabled) { background: var(--fondo-barra-sobre, #3D3D3D); }
.disenadoria-puente .boton-barra:disabled { opacity: 0.5; cursor: default; }

/* Los que llevan dibujo: la figura a la IZQUIERDA del rótulo y no encima, porque estos botones
   están en una fila de un cuadro de diálogo donde lo que se lee es una línea de texto. Sus
   gemelos de Avalonia y de WinForms lo colocan igual. El trazo sale de currentColor, o sea del
   color del botón, así que apagarlo no necesita un segundo dibujo. */
.disenadoria-puente .boton-barra.con-dibujo { display: inline-flex; align-items: center; gap: 6px; }
.disenadoria-puente .boton-barra .icono-barra,
.disenadoria-puente .boton-archivo .icono-barra { width: 15px; height: 15px; flex: 0 0 auto; }

/* La banda de preguntar antes de renombrar o de borrar. Amarilla y dentro del propio cuadro:
   lo que se pregunta es sobre la fila marcada, que tiene que seguir viéndose mientras se
   contesta. Es la gemela de la banda de Avalonia y de la de WinForms. */
.disenadoria-puente .barra-pregunta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    background: #FFF8E1;
    border-radius: 4px;
    font-size: 9pt;
}
.disenadoria-puente .barra-pregunta > span { flex: 1 1 auto; min-width: 0; }
.disenadoria-puente .barra-pregunta input[type=text] { font: inherit; flex: 0 0 260px; padding: 4px 6px; }

/* Un <input type=file> no se puede vestir; la etiqueta que lo envuelve, sí. */
.disenadoria-puente .boton-archivo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9pt;
}
.disenadoria-puente .boton-archivo input { font: inherit; font-size: 8.5pt; }

.disenadoria-puente .disenador-aviso {
    margin: 32px auto;
    max-width: 560px;
    text-align: center;
    white-space: pre-wrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* El árbol para elegir un reporte: dentro de la pestaña al abrir, y encima al subir o bajar. */
.disenadoria-puente .selector-reporte { flex: 1 1 auto; min-height: 0; display: flex; padding: 12px; }
.disenadoria-puente .selector-cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.disenadoria-puente .selector-cuerpo h3, .disenadoria-puente .modal h3 { margin: 0 0 8px; font-size: 11pt; }

.disenadoria-puente .selector-columnas {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 0;
    border: 1px solid var(--linea-panel);
}
.disenadoria-puente .arbol-carpetas {
    flex: 0 0 260px;
    overflow: auto;
    list-style: none;
    margin: 0;
    padding: 4px;
    border-right: 1px solid var(--linea-panel);
}
.disenadoria-puente .arbol-carpetas ul { list-style: none; margin: 0; padding-left: 14px; }
.disenadoria-puente .arbol-carpetas button {
    background: none;
    border: 0;
    font: inherit;
    font-size: 9pt;
    padding: 2px 4px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.disenadoria-puente .arbol-carpetas button:hover { background: #EEF4FC; }
.disenadoria-puente .arbol-carpetas button.marcado { background: var(--seleccion); color: #fff; }

.disenadoria-puente .lista-reportes { flex: 1 1 auto; min-width: 0; overflow: auto; }
.disenadoria-puente .lista-reportes table { width: 100%; border-collapse: collapse; font-size: 9pt; }
.disenadoria-puente .lista-reportes th {
    text-align: left;
    background: #F0F0F0;
    padding: 4px 6px;
    position: sticky;
    top: 0;
}
.disenadoria-puente .lista-reportes td { padding: 3px 6px; white-space: nowrap; cursor: default; }
.disenadoria-puente .lista-reportes .kb { text-align: right; }
.disenadoria-puente .lista-reportes tr.marcada td { background: var(--seleccion); color: #fff; }

.disenadoria-puente .nota { font-size: 9pt; color: var(--texto-nota); margin: 8px 0; }

.disenadoria-puente .modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
}
.disenadoria-puente .modal {
    background: #fff;
    border-radius: 6px;
    padding: 16px 20px;
    min-width: 360px;
    max-width: 92vw;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.disenadoria-puente .modal-ancho { width: 900px; height: 70vh; display: flex; flex-direction: column; }
.disenadoria-puente .modal-ancho .selector-columnas { flex: 1 1 auto; min-height: 0; }
.disenadoria-puente .modal-botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }