/* ════════════════════════════════════════════════════════════════════════
   Tema Gestionalia — densidad de vista sobre DevExpress Fluent
   Se carga como stylesheet personalizado del grupo Fluent (appsettings.json,
   ThemeSwitcher > Groups > CustomUrls). Solo usa variables públicas --dxds-*
   (las --dxbl-* son internas y pueden cambiar entre versiones).

   El usuario elige el modo con el selector de la cabecera
   (Components/DensidadVistaComponent.razor). La elección se guarda en el
   navegador y wwwroot/js/densidad.js la aplica como atributo en <html>:

     <html data-densidad="compacta">   → todo lo de este archivo
     <html data-densidad="estandar">   → densidad original de Fluent

   Sin el atributo (por ejemplo, JavaScript desactivado) no se aplica nada.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Escala de espaciado ─────────────────────────────────────────────────
   --dxds-spacing-* es común a todos los temas (rem). Se multiplica por un
   único factor (--gst-densidad) para reducir de forma uniforme márgenes,
   paddings y gaps de los componentes DevExpress. Al usar rem se mantiene el
   comportamiento responsive del tema.

   Esta escala también dimensiona iconos y checkboxes, por eso el factor es
   suave (con 0,6 los controles ya se ven demasiado pequeños). El grueso del
   ahorro vertical en formularios viene de las reglas de layout del final. */
:root[data-densidad="compacta"] {
    /* 1 = densidad original de Fluent. Menor = más compacto. */
    --gst-densidad: 0.85;
}

/* En móvil se recupera el espaciado original: los objetivos táctiles
   necesitan aire (≥ 40 px). 576 px = breakpoint "sm" de DevExpress/Bootstrap. */
@media (max-width: 575.98px) {
    :root[data-densidad="compacta"] {
        --gst-densidad: 1;
    }
}

:root[data-densidad="compacta"] {
    --dxds-spacing-10: calc(0.0625rem * var(--gst-densidad));
    --dxds-spacing-20: calc(0.125rem * var(--gst-densidad));
    --dxds-spacing-30: calc(0.1875rem * var(--gst-densidad));
    --dxds-spacing-40: calc(0.25rem * var(--gst-densidad));
    --dxds-spacing-50: calc(0.3125rem * var(--gst-densidad));
    --dxds-spacing-60: calc(0.375rem * var(--gst-densidad));
    --dxds-spacing-70: calc(0.4375rem * var(--gst-densidad));
    --dxds-spacing-80: calc(0.5rem * var(--gst-densidad));
    --dxds-spacing-90: calc(0.5625rem * var(--gst-densidad));
    --dxds-spacing-100: calc(0.625rem * var(--gst-densidad));
    --dxds-spacing-110: calc(0.6875rem * var(--gst-densidad));
    --dxds-spacing-120: calc(0.75rem * var(--gst-densidad));
    --dxds-spacing-130: calc(0.8125rem * var(--gst-densidad));
    --dxds-spacing-140: calc(0.875rem * var(--gst-densidad));
    --dxds-spacing-150: calc(0.9375rem * var(--gst-densidad));
    --dxds-spacing-160: calc(1rem * var(--gst-densidad));
    --dxds-spacing-170: calc(1.0625rem * var(--gst-densidad));
    --dxds-spacing-180: calc(1.125rem * var(--gst-densidad));
    --dxds-spacing-190: calc(1.1875rem * var(--gst-densidad));
    --dxds-spacing-200: calc(1.25rem * var(--gst-densidad));
    --dxds-spacing-210: calc(1.3125rem * var(--gst-densidad));
    --dxds-spacing-220: calc(1.375rem * var(--gst-densidad));
    --dxds-spacing-230: calc(1.4375rem * var(--gst-densidad));
    --dxds-spacing-240: calc(1.5rem * var(--gst-densidad));
}

/* ── Layout de formularios (DetailView) ──────────────────────────────────
   Reduce el aire vertical entre filas, etiquetas y grupos. Usa clases del
   DxFormLayout (dxbl-fl-*), que no son API pública: si una actualización de
   DevExpress deja de aplicarlas, es el único bloque que hay que revisar.
   Solo desde 576 px: en móvil se mantiene el espaciado original del tema. */
@media (min-width: 576px) {
    /* Ajuste de filas: el DxFormLayout reparte 12 columnas según el ancho de
       la ventana, no del contenedor. Con etiqueta lateral, un elemento por
       debajo de este ancho se queda sin sitio para el editor, así que se fija
       un mínimo: si no cabe, el elemento baja a la fila siguiente (el
       contenedor ya es flex-wrap). min(…, 100%) evita desbordar en móvil. */
    :root[data-densidad="compacta"] .dxbl-fl-item-horizontal {
        min-width: min(15rem, 100%);
    }

    :root[data-densidad="compacta"] .dxbl-fl-item,
    :root[data-densidad="compacta"] .dxbl-fl-group {
        margin-block: calc(var(--dxds-spacing-60) * 1.1) !important;
    }

    :root[data-densidad="compacta"] .dxbl-fl-cpt {
        padding-block: calc(var(--dxds-spacing-60) * 0.8) !important;
    }

    :root[data-densidad="compacta"] .dxbl-group-body-content {
        padding: var(--dxds-spacing-60) !important;
    }
}