/* Paleta y proporciones tomadas de App.axaml / MainWindow.axaml de GesNetIA.Ava:
   barra de menú negra, cabeceras y pie #E8E8E8, fila seleccionada #E6F0FA.
   Tipografía por defecto: Segoe UI 10 pt, igual que la app de escritorio. */

:root {
    /* La franja del menú principal. Fue azul marino -#003366- y era el único sitio de la
       pantalla que lo llevaba; ahora es el mismo negro del botón de acción, que se ve un
       centímetro más abajo. El gemelo de este cambio está en MainWindow.axaml. */
    --negro-menu: #000000;
    --gris-barra: #E8E8E8;
    /* El naranja de la casa: el mismo de la franja de titulo de ListaIA y de su cuadro de
       herramientas (TemaLista.FondoCuadroHerramientas). Aqui va escrito porque la cascara
       tiene su propia paleta y no lee la del nucleo. */
    --naranja: #FFA500;
    --gris-borde: #D0D0D0;
    --azul-seleccion: #E6F0FA;
    --texto: #333333;

    /* El botón de acción, blanco sobre negro. No son un tono nuevo de GesNetIA: son los de la
       barra de ListaIA y los del editor, que se ven en esta misma pantalla. Los gemelos de
       estos seis están en TemaNat.cs (escritorio WinForms) y en App.axaml (escritorio). */
    --fondo-boton: #000000;
    --fondo-boton-sobre: #282828;
    --fondo-boton-pulsado: #464646;
    --fondo-boton-apagado: #3C3C3C;
    --texto-boton: #FFFFFF;
    --texto-boton-apagado: #8C8C8C;

    /* Segoe UI 10 pt; 10 pt = 10 * 96 / 72 = 13,333 px (ver Tipografia.cs de GesNetIA.Ava) */
    --fuente-base: "Segoe UI", Inter, system-ui, sans-serif;
    --tamano-fuente-base: 13.333px;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--fuente-base);
    font-size: var(--tamano-fuente-base);
    color: var(--texto);
    background-color: #FFFFFF;
}

/* Los controles de formulario no heredan la fuente del documento por defecto */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* **El alto que de verdad se ve.** En el iPhone 100vh cuenta tambien lo que tapa la barra de
       Safari: la pagina quedaba mas alta que la pantalla, y al cerrar el teclado del login se
       quedaba desplazada, con el menu y las pestañas fuera de la vista y la barra de botones
       debajo del reloj. dvh es el alto visible; quien no lo conozca se queda con el vh de arriba. */
    height: 100dvh;
    overflow: hidden;
}

/* ---------- Barra de menú ---------- */

.barra-menu {
    display: flex;
    align-items: stretch;
    background-color: var(--negro-menu);
    color: #FFFFFF;
    min-height: 34px;
    /* En UNA fila, siempre: lo que no cabe no baja de linea, se va bajo el boton de tres
       puntos (ver desborde.js y MainLayout). El recorte a lo ancho es para el instante entre
       que la fila se estrecha y el navegador dice cuantos caben: mientras tanto, nada asoma.
       A lo alto queda visible, que los desplegables cuelgan por debajo de la barra; con
       overflow: hidden se recortaban enteros. */
    flex-wrap: nowrap;
    overflow-x: clip;
    overflow-y: visible;
}

/* El boton de los puntos, ultimo de la fila. Su desplegable se abre hacia la IZQUIERDA:
   pegado al borde derecho de la fila, uno que abriera hacia la derecha se saldria. Es lo
   mismo que hace un desplegable de Avalonia cuando no le cabe a la derecha. */
.menu-raiz.desborde .menu-boton {
    font-size: 18px;
    line-height: 1;
    padding: 6px 12px;
}

.menu-raiz.desborde .submenu {
    left: auto;
    right: 0;
}

.barra-menu .marca {
    padding: 6px 10px;
    font-weight: 600;
}

.barra-menu .espaciador {
    flex: 1;
}

.barra-menu .usuario-icono {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
}

.barra-menu .usuario-icono:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.menu-raiz {
    position: relative;
}

.menu-boton,
.menu-raiz .submenu button {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

/* Un punto mas que el resto -11 pt- y en seminegrita: es el mapa de la aplicacion y se
   lee de un vistazo. Solo la franja: las opciones de dentro van con la letra de siempre. */
.menu-boton {
    color: #FFFFFF;
    padding: 6px 10px;
    height: 100%;
    font-size: 14.667px;
    font-weight: 600;
}

.menu-boton:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    min-width: 200px;
    background-color: #FFFFFF;
    color: var(--texto);
    border: 1px solid var(--gris-borde);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.submenu.anidado {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--gris-barra);
    margin-left: 10px;
    min-width: 0;
}

.submenu li button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 5px 12px;
    color: var(--texto);
}

.submenu li button:hover {
    background-color: whitesmoke;
}

/* ---------- Pestañas ---------- */

.barra-pestanias {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 4px 4px 0 4px;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--gris-barra);
    overflow-x: auto;
}

.pestania {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 2px 10px;
    color: #4A4A4A;
    background-color: #FFFFFF;
    border: 0.5px solid gainsboro;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    white-space: nowrap;
}

/* La pestania al frente, en el naranja de la casa. El texto en negro y no en el gris de las
   demas: sobre naranja, el #4A4A4A de .pestania se lee apagado justo en la que esta encendida. */
.pestania.activa {
    font-weight: bold;
    color: #000000;
    background-color: var(--naranja);
    border-bottom-color: var(--naranja);
}

.pestania .cerrar {
    background: none;
    border: none;
    cursor: pointer;
    color: #888888;
    font-size: 11px;
    padding: 0 2px;
}

.pestania .cerrar:hover {
    color: #C00000;
}

.contenido {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background-color: var(--gris-barra);
    /* Reparte en vertical, y no por gusto: el contenido de una pestaña puede necesitar
       ALTO DEFINIDO, no "el de su contenido". Siendo un bloque, un hijo con height:100%
       no siempre resuelve contra un padre cuyo alto sale del flex del padre, y entonces
       el hijo se ajusta a lo que tiene dentro. */
    display: flex;
    flex-direction: column;
}

/* Sin ninguna pestaña: el logo en medio del area de trabajo, del mismo ancho que en Ava y en
   Nat (336) y mas estrecho si la ventana no da -el celular-. Ver Home.razor. */
.area-vacia {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.area-vacia img {
    width: 336px;
    max-width: 70%;
    height: auto;
}

/* La lista se lleva todo el hueco que sobre. Sin esto se ajustaba a sus filas, y como
   ella misma mide su alto para decidir CUÁNTAS filas pedir, se mordía la cola: abría con
   cuatro o cinco y sólo se llenaba al forzar una segunda medición haciendo clic. El
   min-height:0 es obligatorio: sin él, un hijo flexible no baja de su tamaño de contenido
   y no hay nada que repartir. */
.contenido > .lista-en-pestania {
    flex: 1;
    min-height: 0;
}

/* El presupuesto, por lo mismo: su raíz .presupuestoia reparte por dentro con height:100%,
   y eso solo resuelve contra un hueco de alto definido. Sin esto se ajustaba a su árbol y
   el scroll se iba al contenedor. */
.contenido > .presupuesto-en-pestania {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Y el editor, por lo mismo que los dos de arriba. PanelEdicion no envuelve nada: el
   EditorCompleto pone su propia raíz -.editoria.pantalla- como hijo directo de .contenido,
   así que la regla se escribe contra ella.

   Aquí importa más que en los otros dos, porque el editor no sólo se reparte por dentro:
   su banda de hijas pide el 50% del alto, y un porcentaje contra un padre que mide "lo que
   tenga dentro" no quiere decir nada. Sin esto el editor se ajustaba a su contenido, la
   mitad se calculaba sobre una altura que crecía con las filas de la grilla, y el scroll
   se iba al contenedor en vez de quedarse dentro de la grilla. */
.contenido > .editoria.pantalla {
    flex: 1;
    min-height: 0;
}

/* ---------- Login ---------- */

/* La barra de herramientas del login: la misma de ListaIA y la del editor, de borde a borde
   arriba de la pestaña. Los colores y las medidas salen de las variables que declara
   TemaListaCss, que están en :root justo para lo poco que hay fuera de la lista, o sea esto.
   Su gemela es LoginPage.CrearBarraHerramientas (escritorio). */
.barra-login {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
    /* Mínimo y no fijo, y el relleno solo a los lados: es lo mismo que hace .listaia .barra, y
       por lo mismo -en una ventana estrecha los botones se parten en dos filas, y con el alto
       clavado la segunda quedaría cortada-. */
    min-height: var(--alto-cuadro-herramientas);
    padding: 0 8px;
    background: var(--fondo-cuadro-herramientas);
}

/* Blanco sobre negro y con el dibujo encima del rótulo, como los de las otras barras. No
   reusa .boton-barra ni .boton-accion porque aquellos viven bajo .listaia y esto no es una
   lista; lo que sí comparte son los valores, que salen todos de las mismas variables.

   El rótulo abajo con space-between y no con un margen: así los dos quedan en la misma línea
   aunque un dibujo mida distinto que otro. Es lo mismo que hace .listaia .boton-accion. */
.boton-barra-login {
    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-weight: 700;
    font-size: var(--tamano-rotulo-boton);
    line-height: 1;
    color: var(--texto-barra);
    background: var(--fondo-barra);
    border: 0;
    border-radius: var(--radio-boton-accion);
    cursor: pointer;
}

/* El dibujo pide su medida aquí: la que trae .icono-barra está escrita bajo .listaia, o sea
   que fuera de la lista el SVG saldría del tamaño que le dé el navegador. */
.boton-barra-login .icono-barra {
    width: var(--icono-boton-accion);
    height: var(--icono-boton-accion);
}

.boton-barra-login:hover {
    background: var(--fondo-barra-sobre);
}

.boton-barra-login:active {
    background: var(--fondo-barra-pulsado);
}

/* El cuadro de las credenciales. **Sin relleno propio**: lo lleva .cuerpo-login, para que la
   franja del título llegue a los bordes del cuadro. El ancho es el de antes -260 de campos más
   los 40 de cada lado, que ahora están dentro-, así que el cuadro mide lo mismo que medía. */
.panel-login {
    width: 340px;
    margin: 24px auto;
    background-color: #FFFFFF;
    border: 1px solid var(--gris-borde);
}

/* La cabecera del cuadro: negra, la letra blanca y 30 px de alto. El negro es el de la franja
   del menú, que es la otra banda de la pantalla. Su gemela es LoginPage.CrearFranjaTitulo, y
   los 30 están escritos en los dos sitios: si aquí cambia, allá también. */
.panel-login .titulo-login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    font-weight: 700;
    color: #FFFFFF;
    background-color: var(--negro-menu);
}

.panel-login .cuerpo-login {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 40px 40px 40px;
}

/* **campo-login y no campo, y el nombre importa.** El módulo de editor declara una
   RutaEstilos que la aplicación enlaza en la CABECERA (ver App.razor), o sea que su hoja es
   global. La de EditorIA.Web.Componentes define un `.campo` propio —el suyo es el control
   de entrada, no el envoltorio— con borde gris, fondo blanco y `height: 25px`, y caía
   sobre estos divs: cada etiqueta salía dentro de una caja de 25 píxeles.
   Ganaba porque `.panel-login .campo` no declaraba ni borde ni fondo, así que no había
   nada que le ganara por especificidad: simplemente se sumaban.
   La clase del anfitrión lleva sufijo para no compartir nombre con la de un módulo. */
.panel-login .campo-login {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* **Todas del mismo ancho total, 234 px, borde y relleno incluidos.** La contraseña es el
   control CajaContrasena, que llena el sitio que se le da con el borde y el relleno dentro: su
   ancho lo pone aqui el login, como el de las demas cajas. Con 220 de contenido y el relleno y el
   borde por fuera, las otras median 234, y la contraseña, con 220 en total, salia mas estrecha. */
.panel-login input[type="text"],
.panel-login input[type="password"],
.panel-login select,
.panel-login .caja-contrasena {
    box-sizing: border-box;
    width: 234px;
}

.panel-login input[type="text"],
.panel-login input[type="password"],
.panel-login select {
    padding: 4px 6px;
    border: 1px solid var(--gris-borde);
}

/* La rejilla de propiedades de un modulo: nombre y valor, por orden alfabetico, y la ayuda de
   la propiedad marcada debajo. Es la PropertyGrid de WinForms dibujada
   a mano; su gemela de escritorio es PaginaPropiedadesModulo. */
/* Las dos pestañas de Propiedades, Sistema y Empresa: ver PanelPropiedades.razor. La de al
   frente se pega a la barra de abajo, como la pestaña de un TabControl. */
.pestanas-propiedades {
    display: flex;
    gap: 2px;
    padding: 6px 8px 0;
    border-bottom: 1px solid var(--gris-borde);
}

.pestanas-propiedades button {
    padding: 4px 16px;
    border: 1px solid var(--gris-borde);
    border-bottom: none;
    background: #F0F0F0;
    cursor: pointer;
}

.pestanas-propiedades button.activa {
    background: #FFFFFF;
    font-weight: 700;
    margin-bottom: -1px;
}

.rejilla-propiedades {
    padding: 12px;
}

.rejilla-propiedades table {
    width: 100%;
    border: 1px solid var(--gris-borde);
    border-collapse: collapse;
    background: #FFFFFF;
}

.rejilla-propiedades td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--gris-borde);
    vertical-align: middle;
}

.rejilla-propiedades td.nombre {
    width: 260px;
    border-right: 1px solid var(--gris-borde);
}

.rejilla-propiedades tr.marcada td.nombre {
    background: #E6F0FA;
}

.rejilla-propiedades td.valor input[type="text"],
.rejilla-propiedades td.valor select {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid var(--gris-borde);
}

.rejilla-propiedades .ayuda-propiedades {
    min-height: 70px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--gris-borde);
    background: #FFFFFF;
}

.rejilla-propiedades .aviso-propiedades {
    margin-top: 8px;
}

.panel-login .acciones {
    display: flex;
    justify-content: center;
}

.panel-login .recordar {
    text-align: center;
}

.boton {
    padding: 8px 30px;
    font-weight: 700;
    color: var(--texto-boton);
    background-color: var(--fondo-boton);
    border: 0;
    /* Sin esquinas redondeadas: las de WinForms y las de Avalonia son rectas. */
    border-radius: 0;
    cursor: pointer;
}

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

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

/* Continuar se apaga mientras se valida la sesión (ver PanelLogin). Sobre negro el gris que
   pone el navegador por su cuenta deja el rótulo ilegible, así que los dos van dichos. */
.boton:disabled {
    color: var(--texto-boton-apagado);
    background-color: var(--fondo-boton-apagado);
    cursor: default;
}

.mensaje-error,
.aviso-error {
    color: #B00020;
    margin: 4px 0;
}

.aviso-error {
    padding: 6px 10px;
    background-color: #FDECEE;
}

/* ---------- Barra de acciones (la usan los módulos de lista y de editor) ---------- */

.menu-acciones {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--gris-barra);
    color: var(--texto);
}

.menu-acciones .accion {
    background: none;
    border: none;
    font: inherit;
    padding: 6px 10px;
    cursor: pointer;
}

.menu-acciones .accion:hover {
    background-color: whitesmoke;
}

/* ---------- Pantallas estrechas: el teléfono ---------- */

/* La misma cáscara en seis pulgadas. No es otra pantalla: son las mismas piezas dejando que
   lo que no cabe a lo ancho baje de línea o se desplace, en vez de salirse. El menú
   principal no envuelve: lo que no cabe se va bajo su botón de tres puntos (ver .barra-menu);
   las pestañas ya se desplazaban a lo ancho; el cuadro
   del login toma el ancho que haya menos el aire de los lados; y las filas de la lista y del
   editor se leen con menos letra. El editor reparte sus campos solo, por lo que mida la hoja
   (ver EditorCompleto.ParesAjustados), así que aquí no hay nada que decirle. */
@media (max-width: 700px) {
    /* La barra ya no envuelve en dos o tres filas: lo que no cabe se va bajo el boton de tres
       puntos, en cualquier ancho. Ver .barra-menu. */

    .menu-boton {
        padding: 8px 10px;
    }

    .submenu {
        /* Que ningún desplegable se salga por la derecha: como mucho, la pantalla menos el
           aire de los lados. */
        min-width: 0;
        max-width: calc(100vw - 16px);
    }

    .panel-login {
        width: auto;
        max-width: 340px;
        margin: 16px;
    }

    .pestania {
        font-size: 14px;
    }

    .contenido {
        font-size: 14px;
    }
}