/* ==========================================================================
   GESPRO2020 — HOJA DE ESTILOS DE PANTALLAS NUEVAS
   ==========================================================================

   Complementa a HuborControles.css, que NO debe modificarse por dar servicio
   a las 213 pantallas existentes de la solucion.

   Se enlaza DESPUES de huborControles.css en PgMaestra.master, de modo que
   sus reglas prevalecen en caso de coincidencia.

   ---------------------------------------------------------------------------
   REGLAS DE USO
   ---------------------------------------------------------------------------

   1. Solo clases NUEVAS. Nunca se redefine una clase de HuborControles.css:
      el efecto llegaria igual a las pantallas antiguas.

   2. Prefijo Gespro- en toda clase, para no colisionar con las clases Hubor-
      ni con las de Bootstrap.

   3. Variantes de tema OBLIGATORIAS. Ningun color absoluto sin sus dos
      declaraciones [data-bs-theme=light] y [data-bs-theme=dark].

   4. Comentario de origen en cada bloque, indicando en que pantalla se
      introdujo la clase, para poder retirarla si esa pantalla desaparece.

   ---------------------------------------------------------------------------
   CODIFICACION: UTF-8 sin BOM, saltos CRLF
   ---------------------------------------------------------------------------

   Version 1.11.0 — 01/10/2026
   (1.11.0 anade .Gespro-lupa-guardar-consultar, la lupa superpuesta al
    disquete del boton Guardar y consultar, con sus dos temas; 1.10.2 corrige el fondo de la cabecera fija en modo oscuro: era el mismo
    rojo claro que en modo claro y debe ser el rojo oscuro del resto de
    cabeceras de la aplicacion; 1.10.0 anade .Gespro-grafico, contenedor de los lienzos de Chart.js para
    que las graficas recuperen su tamano al agrandar la ventana; 1.9.0 anade .Gespro-lineatiempo-contenida, que encaja dentro de su
    contenedor la linea de tiempo de HuborTimeLine.css; 1.7.0 anade .Gespro-borrar-hover, .Gespro-editar-hover y
    .Gespro-clonar-hover, para que los botones de borrado, edicion y clonado
    del modo consulta viren al color del modo al que llevan cuando se apuntan; 1.6.0 retiro el intento de reponer el relleno de
    .container-fluid: medido en el navegador, ese relleno ya estaba correcto
    en 12px)

   IMPORTANTE: al modificar este fichero hay que subir el numero de version del
   enlace en PgMaestra.master (css/gespro.css?v=...). Si no se sube, el
   navegador sigue sirviendo la copia cacheada y los cambios no se ven, sin
   error ni aviso de ninguna clase.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES DE COLOR
   ==========================================================================
   Paleta corporativa expresada como variables, para que las clases de este
   fichero no repitan valores literales.

   Los tonos coinciden con los de HuborControles.css; se declaran aqui para
   no depender de su ambito.
   ========================================================================== */

[data-bs-theme=light] {
    --gespro-rojo: #C1121C;
    --gespro-gris-texto: #2E2A29;
    --gespro-fondo-suave: #F8F9FA;
    --gespro-borde-suave: #DEE2E6;
}

[data-bs-theme=dark] {
    --gespro-rojo: #E05C5C;
    --gespro-gris-texto: #E9ECEF;
    --gespro-fondo-suave: #2B3035;
    --gespro-borde-suave: #495057;
}


/* ==========================================================================
   2. CLASES DE PANTALLA
   ==========================================================================
   Cada bloque indica la pantalla en que se introdujo.

   Ejemplo de la estructura que debe seguir cada aportacion:

       [data-bs-theme=light] .Gespro-nombre-descriptivo { ... }
       [data-bs-theme=dark]  .Gespro-nombre-descriptivo { ... }

   ========================================================================== */

/* --------------------------------------------------------------------------
   Campo obligatorio: patron dorado — introducida en TransferenciasInternasFicha.aspx
   y aplicable a toda ficha con campos obligatorios (MG-12 12.1).

   El indicador es doble y deliberado: la ETIQUETA senala que dato falta y el
   BORDE del control senala donde hay que escribirlo.

   Hasta ahora cada ficha declaraba estas reglas en su propio bloque <style>,
   que es justo la duplicacion que el capitulo 10 quiere evitar: cambiar el tono
   obligaba a repasar todas las fichas migradas. Al vivir aqui se cambian en un
   solo sitio.

   Los dos tonos no son decorativos: #9A7D0A es legible sobre fondo claro y
   #E0C158 sobre fondo oscuro. Un unico tono resultaria ilegible en un tema.

   NOMBRES: los canonicos son Gespro-label-obligatorio y
   Gespro-control-obligatorio. Se conservan como ALIAS los nombres antiguos
   text-c-dorado y borde-c-dorado, porque las fichas ya migradas los llevan en
   su marcado: asi les basta con borrar su bloque <style> local, sin tocar el
   .aspx. Los alias se retiraran cuando ninguna pantalla los use.
   -------------------------------------------------------------------------- */

/* Etiqueta del campo obligatorio. Solo color de texto: ni fondo ni borde. */
[data-bs-theme=light] .Gespro-label-obligatorio,
[data-bs-theme=light] .text-c-dorado {
    color: #9A7D0A !important;
    font-weight: 600;
}

[data-bs-theme=dark] .Gespro-label-obligatorio,
[data-bs-theme=dark] .text-c-dorado {
    color: #E0C158 !important;
    font-weight: 600;
}

/* Control editable del campo obligatorio. El tono del borde es un punto mas
   saturado que el del texto para que se distinga sobre los dos fondos. */
[data-bs-theme=light] .Gespro-control-obligatorio,
[data-bs-theme=light] .Gespro-control-obligatorio.form-control,
[data-bs-theme=light] .Gespro-control-obligatorio.form-select,
[data-bs-theme=light] .borde-c-dorado,
[data-bs-theme=light] .borde-c-dorado.form-control,
[data-bs-theme=light] .borde-c-dorado.form-select {
    border-color: #C8A415 !important;
}

[data-bs-theme=dark] .Gespro-control-obligatorio,
[data-bs-theme=dark] .Gespro-control-obligatorio.form-control,
[data-bs-theme=dark] .Gespro-control-obligatorio.form-select,
[data-bs-theme=dark] .borde-c-dorado,
[data-bs-theme=dark] .borde-c-dorado.form-control,
[data-bs-theme=dark] .borde-c-dorado.form-select {
    border-color: #C8A415 !important;
}

/* flexselect oculta el <select> original y genera a continuacion su propio
   campo de texto. Sin este selector el borde se aplicaria a un elemento
   invisible y el operador no veria marca alguna. */
[data-bs-theme=light] .Gespro-control-obligatorio + input.flexselect,
[data-bs-theme=light] .borde-c-dorado + input.flexselect {
    border-color: #C8A415 !important;
}

[data-bs-theme=dark] .Gespro-control-obligatorio + input.flexselect,
[data-bs-theme=dark] .borde-c-dorado + input.flexselect {
    border-color: #C8A415 !important;
}
/* --------------------------------------------------------------------------
   Tarjeton de datos de ficha — introducido en CobrosPryFicha.aspx y
   TransferenciasInternasFicha.aspx, generalizado en PartidasFicha.aspx.

   Es el patron de presentacion de datos de las tres plantillas del FormView
   (consulta, edicion y alta). Su estructura y sus reglas de uso estan en
   MG-06 6.9.

   Sustituye al patron antiguo de input-group + input-group-text, que gastaba
   una columna fija en cada etiqueta: con los textos traducidos la etiqueta no
   cabia y partia la linea. Aqui la etiqueta va ENCIMA del valor, de modo que
   el ancho disponible es el de la columna completa.

   NOMBRES: se emplea la forma CORTA (subcard, dato-row, dato-ico, dato-body,
   dato-label, dato-valor), que es la que ya llevan CobrosPryFicha,
   CobrosPrgFicha y TransferenciasInternasFicha en su marcado: asi les basta
   con BORRAR su bloque <style> local, sin tocar el .aspx. Se declara ademas
   la forma con prefijo Gespro- para respetar la convension del capitulo 10;
   ambas son equivalentes. Ver MG-06 6.9.7. Hasta ahora cada ficha
   declaraba estas reglas por su cuenta, con divergencias entre ellas (la
   divisoria era continua en una y discontinua en otra). Los alias se
   retiraran cuando ninguna pantalla los use.
   -------------------------------------------------------------------------- */

/* Recuadro de agrupacion dentro del tarjeton: una columna tematica. */
[data-bs-theme=light] .Gespro-subcard,
[data-bs-theme=light] .subcard {
    border: 1px solid #E9ECEF;
    border-radius: .5rem;
}

[data-bs-theme=dark] .Gespro-subcard,
[data-bs-theme=dark] .Gespro-subcard.bg-white,
[data-bs-theme=dark] .subcard,
[data-bs-theme=dark] .subcard.bg-white {
    background-color: #1E1E1E !important;
    border: 1px solid #333333 !important;
    border-radius: .5rem;
}

/* Rotulo de la columna tematica. El color y el cuerpo se dan en el marcado
   (text-primary fs-5), para poder distinguir una seccion secundaria. */
[data-bs-theme=light] .Gespro-subcard .Gespro-subcard-head,
[data-bs-theme=light] .subcard .subcard-head,
[data-bs-theme=dark] .Gespro-subcard .Gespro-subcard-head,
[data-bs-theme=dark] .subcard .subcard-head {
    font-weight: 700;
    letter-spacing: .02em;
}

/* Fila de dato. La divisoria separa filas sin recuadrar cada una. */
[data-bs-theme=light] .Gespro-dato-row,
[data-bs-theme=light] .dato-row {
    display: flex;
    align-items: flex-start;
    padding: .35rem .25rem;
    border-bottom: 1px dashed #EEF0F2;
}

[data-bs-theme=dark] .Gespro-dato-row,
[data-bs-theme=dark] .dato-row {
    display: flex;
    align-items: flex-start;
    padding: .35rem .25rem;
    border-bottom: 1px dashed #343A40;
}

/* La ultima fila no lleva divisoria: cerraria el bloque con una linea suelta. */
[data-bs-theme=light] .Gespro-dato-row:last-child,
[data-bs-theme=light] .dato-row:last-child,
[data-bs-theme=dark] .Gespro-dato-row:last-child,
[data-bs-theme=dark] .dato-row:last-child {
    border-bottom: 0;
}

/* Icono de la fila. Ancho fijo para que las etiquetas queden alineadas aunque
   los iconos tengan anchos distintos. */
[data-bs-theme=light] .Gespro-dato-ico,
[data-bs-theme=light] .dato-ico {
    width: 1.4rem;
    text-align: center;
    margin-top: .15rem;
    color: #ADB5BD;
}

[data-bs-theme=dark] .Gespro-dato-ico,
[data-bs-theme=dark] .dato-ico {
    width: 1.4rem;
    text-align: center;
    margin-top: .15rem;
    color: #6C757D;
}

/* Cuerpo de la fila. min-width:0 es imprescindible: sin el, un valor largo sin
   espacios impide que el contenedor flexible se encoja y desborda la columna. */
[data-bs-theme=light] .Gespro-dato-body,
[data-bs-theme=light] .dato-body,
[data-bs-theme=dark] .Gespro-dato-body,
[data-bs-theme=dark] .dato-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Etiqueta: cuerpo menor y tono apagado, para que no compita con el valor. */
[data-bs-theme=light] .Gespro-dato-label,
[data-bs-theme=light] .dato-label {
    font-size: .72rem;
    line-height: 1;
    margin-bottom: .15rem;
    color: #8C98A4;
}

[data-bs-theme=dark] .Gespro-dato-label,
[data-bs-theme=dark] .dato-label {
    font-size: .72rem;
    line-height: 1;
    margin-bottom: .15rem;
    color: #9AA7B2 !important;
}

/* Valor del dato. word-break evita que un codigo largo sin espacios desborde. */
[data-bs-theme=light] .Gespro-dato-valor,
[data-bs-theme=light] .dato-valor {
    font-size: .9rem;
    font-weight: 600;
    word-break: break-word;
    color: #2C3E50;
}

[data-bs-theme=dark] .Gespro-dato-valor,
[data-bs-theme=dark] .dato-valor {
    font-size: .9rem;
    font-weight: 600;
    word-break: break-word;
    color: #E9ECEF !important;
}

/* Controles editables dentro de una fila de dato: se ajustan al cuerpo de la
   etiqueta para que alta y edicion no descuadren respecto a consulta. */
[data-bs-theme=light] .Gespro-dato-valor .form-control,
[data-bs-theme=light] .Gespro-dato-valor .form-select,
[data-bs-theme=light] .dato-valor .form-control,
[data-bs-theme=light] .dato-valor .form-select,
[data-bs-theme=dark] .Gespro-dato-valor .form-control,
[data-bs-theme=dark] .Gespro-dato-valor .form-select,
[data-bs-theme=dark] .dato-valor .form-control,
[data-bs-theme=dark] .dato-valor .form-select {
    font-size: .85rem;
}

/* Los campos de solo lectura heredaban el fondo claro fijo de la regla global
   .form-control[readonly] y quedaban en blanco sobre el tema oscuro. */
[data-bs-theme=dark] .Gespro-dato-body .form-control[readonly],
[data-bs-theme=dark] .Gespro-dato-body .form-control:disabled,
[data-bs-theme=dark] .dato-body .form-control[readonly],
[data-bs-theme=dark] .dato-body .form-control:disabled {
    background-color: var(--bs-secondary-bg);
}

/* Un control acompanado de boton o icono se agrupa en un input-group dentro de
   la fila. El CSS corporativo fuerza .input-group .input-group-text{width:100%},
   pensado para el patron antiguo de etiqueta + prepend: dentro de una fila de
   dato eso estiraria el anexo y encogeria el control, de modo que se neutraliza
   SOLO en este contexto. Introducido en PartidasFicha.aspx (MG-06 6.9.3). */
[data-bs-theme=light] .Gespro-dato-body .input-group > .input-group-text,
[data-bs-theme=light] .dato-body .input-group > .input-group-text,
[data-bs-theme=dark] .Gespro-dato-body .input-group > .input-group-text,
[data-bs-theme=dark] .dato-body .input-group > .input-group-text {
    width: auto !important;
    flex: 0 0 auto;
}

[data-bs-theme=light] .Gespro-dato-body .input-group > .form-control,
[data-bs-theme=light] .Gespro-dato-body .input-group .special-flexselect,
[data-bs-theme=light] .Gespro-dato-body .input-group .flexselect_input,
[data-bs-theme=light] .dato-body .input-group > .form-control,
[data-bs-theme=light] .dato-body .input-group .special-flexselect,
[data-bs-theme=light] .dato-body .input-group .flexselect_input,
[data-bs-theme=dark] .Gespro-dato-body .input-group > .form-control,
[data-bs-theme=dark] .Gespro-dato-body .input-group .special-flexselect,
[data-bs-theme=dark] .Gespro-dato-body .input-group .flexselect_input,
[data-bs-theme=dark] .dato-body .input-group > .form-control,
[data-bs-theme=dark] .dato-body .input-group .special-flexselect,
[data-bs-theme=dark] .dato-body .input-group .flexselect_input {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Fila de dato en tamano holgado — introducida en PartidasFicha.aspx, en la
   ventana de configuracion inicial del alta.

   Modificador de Gespro-dato-row para ventanas modales y formularios de pocos
   campos, donde sobra espacio vertical: la etiqueta en cuerpo menor resulta
   diminuta en una pantalla practicamente vacia. Solo cambia el tamano; la
   estructura y los colores son los de la fila normal.
   -------------------------------------------------------------------------- */
[data-bs-theme=light] .Gespro-dato-row-lg,
[data-bs-theme=dark] .Gespro-dato-row-lg,
[data-bs-theme=light] .dato-row-lg,
[data-bs-theme=dark] .dato-row-lg {
    padding: .6rem .25rem;
}

[data-bs-theme=light] .Gespro-dato-row-lg > .Gespro-dato-ico,
[data-bs-theme=dark] .Gespro-dato-row-lg > .Gespro-dato-ico,
[data-bs-theme=light] .dato-row-lg > .dato-ico,
[data-bs-theme=dark] .dato-row-lg > .dato-ico {
    width: 2rem;
    font-size: 1.15rem;
    margin-top: .35rem;
}

[data-bs-theme=light] .Gespro-dato-row-lg .Gespro-dato-label,
[data-bs-theme=dark] .Gespro-dato-row-lg .Gespro-dato-label,
[data-bs-theme=light] .dato-row-lg .dato-label,
[data-bs-theme=dark] .dato-row-lg .dato-label {
    font-size: .95rem;
    line-height: 1.2;
    margin-bottom: .35rem;
}

[data-bs-theme=light] .Gespro-dato-row-lg .Gespro-dato-valor,
[data-bs-theme=dark] .Gespro-dato-row-lg .Gespro-dato-valor,
[data-bs-theme=light] .dato-row-lg .dato-valor,
[data-bs-theme=dark] .dato-row-lg .dato-valor {
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Utilidades de color dentro de una fila de dato — corregido en
   PartidasFicha.aspx (remanente negativo invisible en modo oscuro).

   El color de Gespro-dato-valor lleva !important y, en modo oscuro, su selector
   tiene mas especificidad que una utilidad de Bootstrap ([atributo]+clase frente
   a clase sola), de modo que anulaba el rojo de .text-danger. En modo claro no
   ocurria, porque alli la regla no lleva !important y ganaba la utilidad: el
   mismo marcado se veia rojo en un tema y neutro en el otro.

   Se restablecen aqui con la especificidad necesaria y con los tonos de enfasis,
   mas claros que los planos y legibles sobre fondo oscuro. El significado de un
   importe en negativo no puede depender del tema activo.
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] .Gespro-dato-valor.text-danger,
[data-bs-theme=dark] .dato-valor.text-danger {
    color: #EA868F !important;
}

[data-bs-theme=dark] .Gespro-dato-valor.text-success,
[data-bs-theme=dark] .dato-valor.text-success {
    color: #75B798 !important;
}

[data-bs-theme=dark] .Gespro-dato-valor.text-info,
[data-bs-theme=dark] .dato-valor.text-info {
    color: #6EDFF6 !important;
}

[data-bs-theme=dark] .Gespro-dato-valor.text-warning,
[data-bs-theme=dark] .dato-valor.text-warning {
    color: #FFDA6A !important;
}

[data-bs-theme=dark] .Gespro-dato-valor.text-muted,
[data-bs-theme=dark] .dato-valor.text-muted {
    color: #9AA7B2 !important;
}

/* En modo claro la utilidad ya prevalece por si sola, pero el rojo plano de
   Bootstrap sobre fondo blanco queda algo apagado para una cifra en negativo. */
[data-bs-theme=light] .Gespro-dato-valor.text-danger,
[data-bs-theme=light] .dato-valor.text-danger {
    color: #B02A37 !important;
}

/* --------------------------------------------------------------------------
   Cabecera fija en rejillas con desplazamiento — introducida en
   PartidasPpal.aspx, aplicable a todo panel de seleccion (MG-03).

   Los titulos de columna deben seguir visibles al desplazar la rejilla: en un
   listado largo, sin ellos el operador no sabe que esta mirando.

   HuborControles.css ya declara position:sticky en .HuborFormViewHeader, pero
   no bastaba: un GridView dibuja su fila de cabecera dentro de <tbody>, y ahi
   el anclaje no se resuelve contra el contenedor con scroll. La fila se lleva a
   <thead> desde el codigo (TableSection) y estas reglas rematan el anclaje.

   Se aplica junto a la clase de desplazamiento (Hubor-barra-desplaz-*), que es
   la que aporta el max-height y el overflow contra los que se ancla.

   EL FONDO: .HuborFormViewHeader declara un degradado de rojo a blanco que en
   una rejilla ancha deja las ultimas columnas casi ilegibles. Hasta ahora no se
   veia porque Bootstrap lo tapaba con su relleno
   (box-shadow: inset 0 0 0 9999px), y cualquier regla que declare box-shadow
   sobre esas celdas lo sustituye y destapa el degradado. Ha ocurrido ya varias
   veces, de modo que aqui se fija el tono solido de forma explicita, por las
   dos vias -background-color y relleno por sombra- y anulando la imagen de
   fondo heredada. Asi el resultado no depende de que otra regla gane.
   -------------------------------------------------------------------------- */

[data-bs-theme=light] {
    --gespro-cabecera-tabla: #F06470;
    --gespro-cabecera-tabla-texto: #FFFFFF;
    --gespro-cabecera-tabla-linea: rgba(0, 0, 0, .18);
}

[data-bs-theme=dark] {
    /* Rojo oscuro de las cabeceras del resto de la aplicacion, TAL COMO SE VE.
       HuborControles.css (incidencia 2023-001) pinta el degradado
       #240b0d -> #2c0d10, pero en esas tablas la cabecera es la primera fila de
       <tbody>, fila impar, y Bootstrap le superpone el velo de fila rayada
       (blanco al 5 % en modo oscuro). Tono medio del degradado mas ese velo:
       #33181A. El valor del modo claro sale de la misma cuenta: #FC6D7A ->
       #FF6270 con velo negro al 5 % da #F16270, practicamente el #F06470 de
       arriba. Solido y no degradado por lo explicado en la cabecera. */
    --gespro-cabecera-tabla: #33181A;
    --gespro-cabecera-tabla-texto: #FFFFFF;
    --gespro-cabecera-tabla-linea: rgba(0, 0, 0, .35);
}

[data-bs-theme=light] .Gespro-cabecera-fija > thead > tr > th,
[data-bs-theme=light] .Gespro-cabecera-fija > thead > tr > td,
[data-bs-theme=dark] .Gespro-cabecera-fija > thead > tr > th,
[data-bs-theme=dark] .Gespro-cabecera-fija > thead > tr > td {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* Por encima de las celdas de datos, que de otro modo se dibujarian encima
       al desplazar */
    z-index: 30;

    /* Tono corporativo solido. background-image:none retira el degradado que
       .HuborFormViewHeader deja heredado. */
    background-image: none;
    background-color: var(--gespro-cabecera-tabla);
    color: var(--gespro-cabecera-tabla-texto);

    /* El relleno por sombra reproduce el mecanismo de Bootstrap, de modo que el
       fondo se mantiene solido aunque alguna regla posterior pise
       background-color. La linea inferior va declarada ANTES para que se dibuje
       por encima del relleno; con border-collapse:collapse el borde de una
       celda anclada no se redibuja al desplazar. */
    box-shadow: inset 0 -1px 0 var(--gespro-cabecera-tabla-linea),
                inset 0 0 0 9999px var(--gespro-cabecera-tabla);
}

/* Alineacion: el titulo se centra en el alto de la celda. Sin esto queda pegado
   abajo, porque la fila la estira la columna de titulo mas largo, que parte en
   dos lineas. No se toca la alineacion horizontal: cada columna conserva la
   suya, y las de importes van a la derecha. */
[data-bs-theme=light] .Gespro-cabecera-fija > thead > tr > th,
[data-bs-theme=light] .Gespro-cabecera-fija > thead > tr > td,
[data-bs-theme=dark] .Gespro-cabecera-fija > thead > tr > th,
[data-bs-theme=dark] .Gespro-cabecera-fija > thead > tr > td {
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Que columna se puede ordenar, y cual no.

   Una columna ordenable dibuja un enlace dentro de su celda de titulo; una que
   no lo es, texto plano. Se aprovecha esa diferencia para que el aspecto lo diga
   sin marcar nada en el marcado:

     - Ordenable    -> amarillo y subrayado, la convencion de enlace
     - No ordenable -> blanco y sin subrayar

   Asi el operador distingue de un vistazo por donde puede ordenar, y una columna
   nueva hereda el aspecto correcto sin que haya que acordarse de nada.
   -------------------------------------------------------------------------- */

[data-bs-theme=light] {
    --gespro-cabecera-tabla-enlace: #FFE08A;
}

[data-bs-theme=dark] {
    --gespro-cabecera-tabla-enlace: #FFE08A;
}

[data-bs-theme=light] .Gespro-cabecera-fija > thead > tr > th a,
[data-bs-theme=light] .Gespro-cabecera-fija > thead > tr > th a:link,
[data-bs-theme=light] .Gespro-cabecera-fija > thead > tr > th a:visited,
[data-bs-theme=light] .Gespro-cabecera-fija > thead > tr > th a:hover,
[data-bs-theme=light] .Gespro-cabecera-fija > thead > tr > th a:focus,
[data-bs-theme=dark] .Gespro-cabecera-fija > thead > tr > th a,
[data-bs-theme=dark] .Gespro-cabecera-fija > thead > tr > th a:link,
[data-bs-theme=dark] .Gespro-cabecera-fija > thead > tr > th a:visited,
[data-bs-theme=dark] .Gespro-cabecera-fija > thead > tr > th a:hover,
[data-bs-theme=dark] .Gespro-cabecera-fija > thead > tr > th a:focus {
    color: var(--gespro-cabecera-tabla-enlace) !important;
    text-decoration: underline;
}

/* Titulo sin enlace: no es ordenable, de modo que no debe parecerlo */
[data-bs-theme=light] .Gespro-cabecera-fija > thead > tr > th,
[data-bs-theme=dark] .Gespro-cabecera-fija > thead > tr > th {
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Menu colapsado: desplazamiento vertical — introducida en PgMaestra.master
   (afecta a las tres submaestras con menu)

   El menu colapsa por debajo de 992px (navbar-expand-lg). Al desplegarse un
   apartado con muchas opciones —Paneles de Seleccion, Crear nuevo— la lista
   sobrepasa el alto de la ventana y las ultimas opciones quedan fuera. La rueda
   del raton desplaza la PAGINA, que no se mueve porque la barra esta fija, de
   modo que el operador no tiene forma de llegar a lo que no ve.

   Ocurre sobre todo en portatil con la ventana estrechada a un lateral: ancho
   de movil y alto de escritorio, que es el peor caso posible.

   La solucion es acotar la altura del contenedor colapsado y darle su propio
   desplazamiento. Se limita a 100vh menos la altura de la barra superior, con
   un margen inferior para que la ultima opcion no quede pegada al borde.

   -webkit-overflow-scrolling permite el desplazamiento por inercia en los
   navegadores de tableta y movil.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    [data-bs-theme=light] .navbar-collapse.show,
    [data-bs-theme=dark] .navbar-collapse.show {
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Los desplegables fluyen con el resto dentro del menu colapsado, en lugar
       de posicionarse en absoluto, de modo que el desplazamiento del contenedor
       los alcanza. Bootstrap ya lo hace asi; se declara de forma expresa para
       que una futura regla de .dropdown-submenu de huborControles.css no lo
       deshaga sin que nadie lo advierta. */
    [data-bs-theme=light] .navbar-collapse.show .dropdown-menu,
    [data-bs-theme=dark] .navbar-collapse.show .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        max-height: none;
        border: 0;
    }
}

/* --------------------------------------------------------------------------
   Menu desplegado en pantalla ancha: desplazamiento vertical — introducida en
   PgMaestra.master

   Mismo problema, distinta causa: con el menu en horizontal, un apartado con
   muchas opciones puede superar el alto de la ventana en pantallas bajas. Aqui
   el desplegable SI esta posicionado en absoluto, de modo que se acota el
   propio desplegable y no el contenedor.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

    [data-bs-theme=light] .navbar-nav .dropdown-menu,
    [data-bs-theme=dark] .navbar-nav .dropdown-menu {
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   Boton de borrado del modo consulta — introducida en GastosFicha.aspx y
   GastosDePersonalFicha.aspx

   MG-12 exige que la botonera del modo consulta sea neutra: un boton Borrar
   rojo destacaria una accion que todavia no se ha emprendido. Pero el rojo al
   pasar el raton si es util: avisa de lo que va a ocurrir en el momento en que
   el operador se acerca, sin teñir la pantalla en reposo.

   Se aplica JUNTO A btn-outline-secondary, no en su lugar.
   -------------------------------------------------------------------------- */
[data-bs-theme=light] .Gespro-borrar-hover:hover,
[data-bs-theme=light] .Gespro-borrar-hover:focus {
    color: #FFFFFF;
    background-color: #C1121C;
    border-color: #C1121C;
}

[data-bs-theme=dark] .Gespro-borrar-hover:hover,
[data-bs-theme=dark] .Gespro-borrar-hover:focus {
    color: #FFFFFF;
    background-color: #E05C5C;
    border-color: #E05C5C;
}

/* --------------------------------------------------------------------------
   Boton de edicion del modo consulta — introducida en GastosFicha.aspx y
   GastosDePersonalFicha.aspx

   Mismo criterio que .Gespro-borrar-hover: la botonera de consulta es neutra en
   reposo, y el color del modo al que lleva el boton aparece solo al apuntarlo.
   Azul porque edicion es el modo azul (MG-12).

   Se aplica JUNTO A btn-outline-secondary, no en su lugar.
   -------------------------------------------------------------------------- */
[data-bs-theme=light] .Gespro-editar-hover:hover,
[data-bs-theme=light] .Gespro-editar-hover:focus {
    color: #FFFFFF;
    background-color: #0D6EFD;
    border-color: #0D6EFD;
}

[data-bs-theme=dark] .Gespro-editar-hover:hover,
[data-bs-theme=dark] .Gespro-editar-hover:focus {
    color: #FFFFFF;
    background-color: #6EA8FE;
    border-color: #6EA8FE;
}

/* --------------------------------------------------------------------------
   Boton de clonado del modo consulta — introducida en GastosFicha.aspx y
   GastosDePersonalFicha.aspx

   Mismo criterio que .Gespro-borrar-hover y .Gespro-editar-hover: neutro en
   reposo y, al apuntarlo, el color del modo al que lleva. Verde porque clonar
   abre un ALTA a partir del registro actual (MG-12).
   -------------------------------------------------------------------------- */
[data-bs-theme=light] .Gespro-clonar-hover:hover,
[data-bs-theme=light] .Gespro-clonar-hover:focus {
    color: #FFFFFF;
    background-color: #198754;
    border-color: #198754;
}

[data-bs-theme=dark] .Gespro-clonar-hover:hover,
[data-bs-theme=dark] .Gespro-clonar-hover:focus {
    color: #FFFFFF;
    background-color: #75B798;
    border-color: #75B798;
}

/* --------------------------------------------------------------------------
   Columna que puede encoger — introducida en PgSubMaestraMenuInicioLateral.master

   El cuerpo de las pantallas con barra lateral es una fila de dos columnas: la
   barra, de anchura automatica, y el contenido, con col-sm.

   Bootstrap le da a col-sm flex: 1 0 0%, «ocupa lo que quede», pero deja
   min-width: auto, que impide bajar de su ANCHURA MINIMA DE CONTENIDO. Y dentro
   viven los contenedores Hubor-barra-desplaz-horizontal-vertical, que
   huborControles.css declara con min-width: 640px.

   Resultado: la columna del cuerpo no baja de unos 700px. Si lo que queda tras
   la barra lateral es menos, no cabe, y como la fila lleva flex-wrap: wrap el
   cuerpo SALTA A LA SEGUNDA LINEA, debajo de la barra.

   Depende de la anchura de la ventana y de cuantas rejillas tenga la pantalla:
   por eso se manifestaba en el panel de control de proyectos —doce contenedores
   de 640— y no en los de programas o financiaciones.

   Con min-width: 0 la columna encoge, la fila deja de partir, y los
   contenedores conservan sus 640px y su barra de desplazamiento, que es
   justamente para lo que estan.

   NO se toca .Hubor-barra-desplaz-horizontal-vertical: sus 640px son el minimo
   por debajo del cual una rejilla con desplazamiento deja de ser usable, y la
   clase vive en huborControles.css (§10).
   -------------------------------------------------------------------------- */
[data-bs-theme=light] .Gespro-col-encogible,
[data-bs-theme=dark] .Gespro-col-encogible {
    min-width: 0;
}


/* --------------------------------------------------------------------------
   Linea de tiempo contenida — introducida en EnviosPanelDeMandos.aspx
   Solo geometria: no declara colores.

   HuborTimeLine.css da a cada tarjeta de la linea de tiempo un 60% de ancho,
   centrada, y la desplaza un 30% a cada lado con posicionamiento relativo:

       columna izquierda  -10% ... 50%
       columna derecha     50% ... 110%   <- asoma un 10% por la derecha

   Ese sobrante sale de la tarjeta que contiene la linea de tiempo y provoca la
   barra de desplazamiento horizontal de TODA la pagina.

   Con un 50% de ancho y un 25% de desplazamiento, las dos columnas siguen
   tocando la linea central -que es donde se dibujan el circulo y el conector-
   y quedan dentro de su contenedor:

       columna izquierda    0% ... 50%
       columna derecha     50% ... 100%

   Se aplica anadiendo la clase al mismo div que lleva Hubortimeline:
       <div class="Hubortimeline Gespro-lineatiempo-contenida">

   NO se toca HuborTimeLine.css (§10): lo enlazan otras pantallas y su
   geometria original es la que ellas esperan.
   -------------------------------------------------------------------------- */
[data-bs-theme=light] .Gespro-lineatiempo-contenida > .container,
[data-bs-theme=dark] .Gespro-lineatiempo-contenida > .container {
    width: 50%;
}

[data-bs-theme=light] .Gespro-lineatiempo-contenida > .container.left,
[data-bs-theme=dark] .Gespro-lineatiempo-contenida > .container.left {
    left: -25%;
}

[data-bs-theme=light] .Gespro-lineatiempo-contenida > .container.right,
[data-bs-theme=dark] .Gespro-lineatiempo-contenida > .container.right {
    left: 25%;
}


/* --------------------------------------------------------------------------
   Contenedor de grafica — introducida en EnviosPanelDeMandos.aspx
   Solo geometria: no declara colores.

   Chart.js, en modo responsive, NO mide el lienzo: mide su elemento padre y
   ajusta el lienzo a el. La documentacion de la libreria exige que ese padre
   este dedicado en exclusiva al lienzo y posicionado de forma relativa.

   Con el lienzo suelto dentro de card-body, al estrechar la ventana la grafica
   encoge, pero al volver a ensancharla se queda pequena: el lienzo conserva el
   ancho en pixeles que se le fijo al encoger, ese ancho sostiene el del
   card-body, y la libreria no percibe que haya sitio para crecer.

   min-width: 0 impide ademas que el lienzo imponga su anchura minima al
   contenedor cuando este es elemento flexible.

   Uso:  <div class="Gespro-grafico"><canvas id="grafica1"></canvas></div>
   -------------------------------------------------------------------------- */
[data-bs-theme=light] .Gespro-grafico,
[data-bs-theme=dark] .Gespro-grafico {
    position: relative;
    width: 100%;
    min-width: 0;
}


/* --------------------------------------------------------------------------
   Lupa del boton «Guardar y consultar» — introducida en EnviosFicha.aspx
   (encargo 25, punto 19)

   La lupa se superpone al disquete del boton y es su unico distintivo frente a
   «Guardar y crear nuevo» (MG-12 §12.6). Hasta ahora llevaba sus colores en
   linea (#333 sobre blanco), sin variante de tema: en modo oscuro quedaba un
   circulo blanco sobre la botonera oscura.

   Uso, dentro del Text del boton:
     <span><i class='far fa-3x fa-save' style='position: relative;'></i><i class='fas fa-search Gespro-lupa-guardar-consultar'></i></span>
   -------------------------------------------------------------------------- */
[data-bs-theme=light] .Gespro-lupa-guardar-consultar,
[data-bs-theme=dark] .Gespro-lupa-guardar-consultar {
    position: absolute;
    font-size: 1.2rem;
    margin-left: -1.4rem;
    margin-top: 1.2rem;
    border-radius: 50%;
    padding: 2px;
}

[data-bs-theme=light] .Gespro-lupa-guardar-consultar {
    color: #333333;
    background-color: #FFFFFF;
}

[data-bs-theme=dark] .Gespro-lupa-guardar-consultar {
    color: #F8F9FA;
    background-color: #2B3035;
}