/**
 * Estilos compartidos para dashboards.
 * Dirección usa grid responsive nativo de Filament; no posicionamiento absoluto.
 */

.fi-dashboard-filtros {
    margin-bottom: 0.75rem;
    padding-block: 0.125rem;
}

.fi-dashboard-filtros .fi-fo-component-ctn {
    margin-block-end: 0 !important;
}

.fi-dashboard-filtros .fi-fo-field-wrp {
    row-gap: 0.125rem;
}

.fi-dashboard-filtros .fi-input-wrp,
.fi-dashboard-filtros select {
    width: 100%;
    max-width: 100%;
}

.fi-dashboard-filtros-periodo {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.fi-dashboard-filtros-periodo .fi-btn-group {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fi-dashboard-filtros-periodo .fi-btn {
    flex: 1 1 calc(50% - 0.125rem);
    min-width: 0;
    justify-content: center;
    padding-inline: 0.35rem;
    padding-block: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .fi-dashboard-filtros-periodo .fi-btn-group {
        flex-wrap: nowrap;
    }

    .fi-dashboard-filtros-periodo .fi-btn {
        flex-basis: 0;
    }
}

.direccion-dashboard-sm-stats .fi-wi-stats-overview-stats-ctn {
    font-size: 0.875rem;
}

.direccion-dashboard-sm-stats .fi-wi-stats-overview-stats-ctn [class*='text-2xl'],
.direccion-dashboard-sm-stats .fi-wi-stats-overview-stats-ctn [class*='text-3xl'] {
    font-size: 0.875rem !important;
}

.fi-dashboard-masonry .fi-wi-stats-overview-stats-ctn {
    gap: 1rem !important;
}

.fi-dashboard-masonry .fi-wi-stats-overview-stat-icon {
    display: none !important;
}

.fi-dashboard-masonry .fi-wi-stats-overview table {
    font-size: 0.875rem;
}

.fi-dashboard-masonry .fi-wi-chart .text-xl {
    font-size: 1rem;
    line-height: 1.5rem;
}

.fi-dashboard-masonry .fi-wi-chart .text-3xl {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

@media (min-width: 640px) {
    .fi-dashboard-masonry .fi-wi-chart .sm\:text-2xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

.fi-dashboard-masonry,
.fi-dashboard-masonry .fi-wi,
.fi-dashboard-masonry .fi-wi > * {
    max-width: 100%;
    min-width: 0;
}

.fi-dashboard-widget-groups {
    display: grid;
    gap: 0.625rem;
}

.fi-dashboard-masonry .fi-wi {
    gap: 0.625rem !important;
    align-items: start;
}

.fi-dashboard-direccion .fi-wi {
    align-items: start;
}

/* Celda del grid de widgets: altura natural según contenido. */
.fi-dashboard-masonry .fi-wi-widget {
    min-width: 0;
    align-self: start;
}

/*
 * Dirección se renderiza en filas visuales independientes. Dentro de cada fila
 * sí conviene igualar por stretch natural del grid, sin definir alturas fijas.
 */
.fi-dashboard-direccion .fi-dashboard-widget-row .fi-wi {
    align-items: stretch;
}

.fi-dashboard-direccion .fi-dashboard-widget-row .fi-wi-widget {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.fi-dashboard-direccion .fi-dashboard-widget-row .fi-wi-widget > * {
    flex: 1 1 auto;
    width: 100%;
}

/*
 * Dirección · fila operativa (lg+): 12 columnas (pocos gaps; evita overflow).
 * Compras 4/12 | arriba cotiz/OC 4+4 sobre cols 5–12 (50%/50% del bloque derecho).
 * Abajo 3+3+2 cols sobre 5–12 ≈ 37,5% · 37,5% · 25% (aprox. a 35·35·30).
 */
@media (min-width: 1024px) {
    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-dashboard-widget-row-direccion-operativa.fi-dashboard-widget-row
        > .fi-wi {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, auto));
        align-items: stretch !important;
        gap: 1.5rem !important;
        min-width: 0;
    }

    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-dashboard-widget-row-direccion-operativa
        .fi-wi-widget.direccion-compras-proveedor-medida-widget {
        grid-column: 1 / span 4 !important;
        grid-row: 1 / span 2 !important;
    }

    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-dashboard-widget-row-direccion-operativa
        .fi-wi-widget.direccion-cotizaciones-estatus-periodo-historico-widget {
        grid-column: 5 / span 4 !important;
        grid-row: 1 !important;
    }

    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-dashboard-widget-row-direccion-operativa
        .fi-wi-widget.direccion-ordenes-compra-estatus-periodo-historico-widget {
        grid-column: 9 / span 4 !important;
        grid-row: 1 !important;
    }

    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-dashboard-widget-row-direccion-operativa
        .fi-wi-widget.direccion-logistica-grupo-dashboard-slot-periodo {
        grid-column: 5 / span 3 !important;
        grid-row: 2 !important;
    }

    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-dashboard-widget-row-direccion-operativa
        .fi-wi-widget.direccion-logistica-grupo-dashboard-slot-historico {
        grid-column: 8 / span 3 !important;
        grid-row: 2 !important;
    }

    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-dashboard-widget-row-direccion-operativa
        .fi-wi-widget.direccion-logistica-almacen-widget {
        grid-column: 11 / span 2 !important;
        grid-row: 2 !important;
    }
}

.fi-dashboard-masonry .fi-wi-stats-overview-stats-ctn {
    min-width: 0;
}

.fi-dashboard-masonry .fi-wi-stats-overview-stat {
    min-width: 0;
    overflow-wrap: break-word;
}

.fi-dashboard-masonry .fi-wi-stats-overview-stat-value {
    font-size: 0.9rem !important;
    line-height: 1.3rem !important;
}

/*
 * Widgets Apex con altura según su contenido.
 * El chart usa la altura definida en getOptions() (chart.height) como fuente de verdad.
 * Se mantienen mínimos de seguridad (min-height) como piso visual.
 */
.fi-dashboard-masonry .fi-wi-widget > .filament-apex-charts-widget {
    width: 100%;
}

.fi-dashboard-masonry .filament-apex-charts-widget {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.fi-dashboard-masonry .filament-apex-charts-widget .filament-apex-charts-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 0.625rem !important;
}

.fi-dashboard-direccion .direccion-card {
    border-radius: 0.875rem;
}

.fi-dashboard-direccion .direccion-card-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.fi-dashboard-direccion .direccion-card-body {
    min-width: 0;
}

.fi-dashboard-direccion .direccion-card-kpi {
    min-height: 7.5rem;
}

.fi-dashboard-direccion .direccion-card-chart-main {
    min-height: 26rem;
}

.fi-dashboard-direccion .direccion-card-chart-secondary {
    min-height: 22rem;
}

.fi-dashboard-direccion .direccion-card-operational {
    min-height: 8rem;
}

.fi-dashboard-direccion .direccion-card-finance {
    min-height: 10rem;
}

.fi-dashboard-direccion .direccion-chart-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Charts principales: ocupar alto disponible de card (fila análisis). */
.fi-dashboard-direccion .direccion-ventas-vs-presupuesto-widget .direccion-card-content,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-card-content {
    height: 100%;
}

/* Filament section wrappers: sin esto, hijos con h-full no estiran. */
.fi-dashboard-direccion .fi-section,
.fi-dashboard-direccion .fi-section-content-ctn,
.fi-dashboard-direccion .fi-section-content {
    height: 100%;
    min-height: 0;
}

.fi-dashboard-direccion .fi-section-content-ctn,
.fi-dashboard-direccion .fi-section-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.fi-dashboard-direccion .direccion-ventas-vs-presupuesto-widget .direccion-chart-area,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-chart-area {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: stretch;
}

.fi-dashboard-direccion .direccion-ventas-vs-presupuesto-widget .direccion-chart-area {
    min-height: 22rem;
}

.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-chart-area {
    height: 100% !important;
    min-height: 19rem;
}

.fi-dashboard-direccion .direccion-compras-proveedor-medida-widget .direccion-chart-area {
    min-height: 22.5rem !important;
}

.fi-dashboard-direccion .direccion-compras-proveedor-medida-widget .filament-apex-charts-chart,
.fi-dashboard-direccion .direccion-compras-proveedor-medida-widget .filament-apex-charts-chart-container,
.fi-dashboard-direccion .direccion-compras-proveedor-medida-widget .filament-apex-charts-chart-object,
.fi-dashboard-direccion .direccion-compras-proveedor-medida-widget .apexcharts-canvas,
.fi-dashboard-direccion .direccion-compras-proveedor-medida-widget .apexcharts-svg {
    min-height: 22.5rem !important;
}

.fi-dashboard-direccion .direccion-ventas-vs-presupuesto-widget .filament-apex-charts-chart,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .filament-apex-charts-chart,
.fi-dashboard-direccion .direccion-ventas-vs-presupuesto-widget .filament-apex-charts-chart-container,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .filament-apex-charts-chart-container,
.fi-dashboard-direccion .direccion-ventas-vs-presupuesto-widget .filament-apex-charts-chart-object,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .filament-apex-charts-chart-object,
.fi-dashboard-direccion .direccion-ventas-vs-presupuesto-widget .apexcharts-canvas,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .apexcharts-canvas,
.fi-dashboard-direccion .direccion-ventas-vs-presupuesto-widget .apexcharts-svg,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .apexcharts-svg {
    height: 100% !important;
}

/* Donut materiales: forzar cadena completa en stretch (wrapper original viene center/center). */
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart > .filament-apex-charts-chart {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch !important;
    justify-content: stretch !important;
    height: 100% !important;
}

.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart .filament-apex-charts-chart-container {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
}

.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart .filament-apex-charts-chart-object,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart .apexcharts-canvas,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart .apexcharts-svg {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
}

/* Donut materiales: todo árbol interno con alto completo. */
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart > div,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart > div > div,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart .filament-apex-charts-chart,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart .filament-apex-charts-chart-container,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart .filament-apex-charts-chart-object,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart .apexcharts-canvas,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart .apexcharts-svg,
.fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-yardas-donut-chart .apexcharts-inner {
    height: 100% !important;
    min-height: 0;
}

.fi-dashboard-direccion .direccion-ventas-vs-presupuesto-widget p,
.fi-dashboard-direccion .direccion-yardas-categoria-widget p {
    margin-bottom: 0.375rem !important;
}

.fi-dashboard-masonry .fi-section-content,
.fi-dashboard-masonry .dashboard-section-compact .fi-section-content {
    padding: 0.75rem !important;
}

.fi-dashboard-masonry .fi-section-header {
    padding-block: 0.75rem !important;
}

/* Bloque interno de la card Apex: flex para alinear cabecera + chart */
.fi-dashboard-masonry .filament-apex-charts-card > div:first-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fi-dashboard-masonry .filament-apex-charts-header {
    flex-shrink: 0;
}

/* chart.height de getOptions() define la altura; min-height como piso de seguridad */
.fi-dashboard-masonry .filament-apex-charts-chart {
    min-height: 200px;
}

.fi-dashboard-masonry .filament-apex-charts-chart-container {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fi-dashboard-masonry .filament-apex-charts-chart-object {
    min-height: 140px;
}

.fi-dashboard-masonry .apexcharts-canvas,
.fi-dashboard-masonry .apexcharts-svg {
    max-width: 100% !important;
}

.fi-dashboard-masonry .filament-apex-charts-chart,
.fi-dashboard-masonry .filament-apex-charts-chart-container,
.fi-dashboard-masonry .filament-apex-charts-chart-object {
    max-width: 100%;
    overflow: hidden;
}

/* Filtros globales: más ancho para valores largos sin agrandar toda la barra. */
.fi-dashboard-filtros .fi-dashboard-filtro-tipo,
.fi-dashboard-filtros .fi-dashboard-filtro-moneda {
    min-width: 0;
}

.fi-dashboard-filtros .fi-dashboard-filtro-tipo .fi-input-wrp,
.fi-dashboard-filtros .fi-dashboard-filtro-moneda .fi-input-wrp {
    min-width: 0;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .fi-dashboard-filtros .fi-dashboard-filtro-tipo .fi-input-wrp {
        min-width: 11rem;
    }

    .fi-dashboard-filtros .fi-dashboard-filtro-moneda .fi-input-wrp {
        min-width: 6.5rem;
    }
}

@media (min-width: 1024px) {
    .fi-dashboard-filtros .fi-dashboard-filtro-tipo .fi-input-wrp {
        min-width: 12rem;
    }

    .fi-dashboard-filtros .fi-dashboard-filtro-moneda .fi-input-wrp {
        min-width: 7rem;
    }
}

@media (max-width: 639px) {
    .fi-dashboard-filtros .fi-dashboard-filtro-tipo,
    .fi-dashboard-filtros .fi-dashboard-filtro-moneda {
        width: 100%;
        max-width: 100%;
    }
}

/* KPI fila cotización (3 widgets sin gráfica): cantidades a 1.5rem */
.fi-dashboard-masonry .direccion-cotizacion-kpi-valor {
    font-size: 1.35rem;
    line-height: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}

.fi-dashboard-direccion .direccion-resumen-ventas-materiales-ticket-valor {
    font-variant-numeric: tabular-nums;
}

.fi-dashboard-direccion .direccion-ordenes-por-aprobar-widget .filament-apex-charts-card,
.fi-dashboard-direccion .direccion-aprobacion-envio-widget .filament-apex-charts-card,
.fi-dashboard-direccion .direccion-rectificadas-widget .filament-apex-charts-card,
.fi-dashboard-direccion .direccion-resumen-ventas-materiales-kpi-widget .filament-apex-charts-card,
.fi-dashboard-direccion .direccion-finanzas-tarjeta .filament-apex-charts-card,
.fi-dashboard-ordenes_compra_logistica .direccion-finanzas-tarjeta .filament-apex-charts-card {
    justify-content: center;
    padding: 0.75rem !important;
}

.fi-dashboard-direccion .direccion-cotizacion-fila-body {
    justify-content: center;
    gap: 0.25rem;
}

/*
 * CxC/CxP (Dirección): tabla 3 columnas fijas + padding horizontal (no depende de flex/grid del bundle).
 */
.fi-dashboard-direccion .direccion-cxc-cxp-resumen-widget .direccion-cxc-cxp-cuerpo {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
}

.fi-dashboard-direccion .direccion-cxc-cxp-resumen-widget .direccion-cxc-cxp-tabla {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.fi-dashboard-direccion .direccion-cxc-cxp-resumen-widget .direccion-cxc-cxp-tabla thead th {
    padding: 0.25rem clamp(0.75rem, 3vw, 1.75rem) 0.375rem !important;
    font-size: 0.625rem !important;
    line-height: 1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgb(107 114 128) !important;
    vertical-align: bottom !important;
    width: 33.333% !important;
}

.dark .fi-dashboard-direccion .direccion-cxc-cxp-resumen-widget .direccion-cxc-cxp-tabla thead th {
    color: rgb(156 163 175) !important;
}

.fi-dashboard-direccion .direccion-cxc-cxp-resumen-widget .direccion-cxc-cxp-tabla tbody td {
    padding: 0.375rem clamp(0.75rem, 3vw, 1.75rem) !important;
    vertical-align: middle !important;
    text-align: center !important;
    width: 33.333% !important;
}

.fi-dashboard-direccion .direccion-cxc-cxp-resumen-widget .direccion-cxc-cxp-tabla .direccion-cxc-cxp-subcabecera td {
    padding-top: 0.75rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: rgb(75 85 99) !important;
}

.dark .fi-dashboard-direccion .direccion-cxc-cxp-resumen-widget .direccion-cxc-cxp-tabla .direccion-cxc-cxp-subcabecera td {
    color: rgb(209 213 219) !important;
}

.fi-dashboard-direccion .direccion-cxc-cxp-resumen-widget .direccion-cxc-cxp-tabla .direccion-cxc-cxp-fila-montos td {
    padding-top: 0.25rem !important;
    padding-bottom: 0.5rem !important;
}

.fi-dashboard-direccion .direccion-cxc-cxp-resumen-widget .direccion-cxc-cxp-tabla .direccion-cxc-cxp-separador-row td {
    padding: 0.75rem clamp(0.5rem, 2vw, 1rem) !important;
    vertical-align: middle !important;
}

.fi-dashboard-direccion .direccion-cxc-cxp-resumen-widget .direccion-cxc-cxp-linea-interna {
    display: block;
    height: 1px;
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
    background-color: rgb(229 231 235);
}

.dark .fi-dashboard-direccion .direccion-cxc-cxp-resumen-widget .direccion-cxc-cxp-linea-interna {
    background-color: rgb(55 65 81);
}

.fi-dashboard-direccion .direccion-ordenes-por-aprobar-kpi,
.fi-dashboard-direccion .direccion-aprobacion-envio-kpi,
.fi-dashboard-direccion .direccion-rectificadas-kpi {
    gap: 0.375rem !important;
}

/* KPI sin gráfica: título principal unificado (widget con una cabecera legible). */
.fi-dashboard-direccion .direccion-kpi-simple-heading,
.fi-dashboard-disenador .direccion-kpi-simple-heading,
.fi-dashboard-administracion .direccion-kpi-simple-heading,
.fi-dashboard-ordenes_compra_logistica .direccion-kpi-simple-heading {
    margin-top: 0 !important;
    margin-bottom: 0.375rem !important;
    width: 100%;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    font-weight: 600 !important;
    color: rgb(75 85 99);
}

.dark .fi-dashboard-direccion .direccion-kpi-simple-heading,
.dark .fi-dashboard-disenador .direccion-kpi-simple-heading,
.dark .fi-dashboard-administracion .direccion-kpi-simple-heading,
.dark .fi-dashboard-ordenes_compra_logistica .direccion-kpi-simple-heading {
    color: rgb(156 163 175);
}

/* Subsección dentro de la card (p. ej. «Cuentas por cobrar», histórico). */
.fi-dashboard-direccion .direccion-kpi-simple-seccion,
.fi-dashboard-disenador .direccion-kpi-simple-seccion,
.fi-dashboard-administracion .direccion-kpi-simple-seccion,
.fi-dashboard-ordenes_compra_logistica .direccion-kpi-simple-seccion {
    text-align: center;
    font-size: 0.625rem !important;
    line-height: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107 114 128);
}

.dark .fi-dashboard-direccion .direccion-kpi-simple-seccion,
.dark .fi-dashboard-disenador .direccion-kpi-simple-seccion,
.dark .fi-dashboard-administracion .direccion-kpi-simple-seccion,
.dark .fi-dashboard-ordenes_compra_logistica .direccion-kpi-simple-seccion {
    color: rgb(156 163 175);
}

/* Sólo filas con varias métricas o divisas: contraste suave por celda. */
.fi-dashboard-direccion .direccion-kpi-celda-multimetrica,
.fi-dashboard-disenador .direccion-kpi-celda-multimetrica,
.fi-dashboard-administracion .direccion-kpi-celda-multimetrica,
.fi-dashboard-ordenes_compra_logistica .direccion-kpi-celda-multimetrica {
    min-height: 2.875rem;
    padding: 0.35rem 0.25rem;
    border-radius: 0.5rem;
    background-color: rgb(249 250 251);
}

.dark .fi-dashboard-direccion .direccion-kpi-celda-multimetrica,
.dark .fi-dashboard-disenador .direccion-kpi-celda-multimetrica,
.dark .fi-dashboard-administracion .direccion-kpi-celda-multimetrica,
.dark .fi-dashboard-ordenes_compra_logistica .direccion-kpi-celda-multimetrica {
    background-color: rgb(31 41 55 / 0.65);
}

.fi-dashboard-direccion .direccion-kpi-etiqueta-metrica,
.fi-dashboard-disenador .direccion-kpi-etiqueta-metrica,
.fi-dashboard-administracion .direccion-kpi-etiqueta-metrica,
.fi-dashboard-ordenes_compra_logistica .direccion-kpi-etiqueta-metrica,
.fi-dashboard-direccion .direccion-aprobacion-envio-subtitulo,
.fi-dashboard-direccion .direccion-rectificadas-subtitulo,
.fi-dashboard-direccion .direccion-logistica-grupo-subtitulo,
.fi-dashboard-direccion .direccion-logistica-almacen-subtitulo,
.fi-dashboard-administracion .direccion-logistica-grupo-subtitulo,
.fi-dashboard-ordenes_compra_logistica .direccion-logistica-grupo-subtitulo {
    font-size: 0.625rem !important;
    line-height: 0.78rem !important;
    font-weight: 500 !important;
    color: rgb(75 85 99);
}

.dark .fi-dashboard-direccion .direccion-kpi-etiqueta-metrica,
.dark .fi-dashboard-disenador .direccion-kpi-etiqueta-metrica,
.dark .fi-dashboard-administracion .direccion-kpi-etiqueta-metrica,
.dark .fi-dashboard-ordenes_compra_logistica .direccion-kpi-etiqueta-metrica,
.dark .fi-dashboard-direccion .direccion-aprobacion-envio-subtitulo,
.dark .fi-dashboard-direccion .direccion-rectificadas-subtitulo,
.dark .fi-dashboard-direccion .direccion-logistica-grupo-subtitulo,
.dark .fi-dashboard-direccion .direccion-logistica-almacen-subtitulo,
.dark .fi-dashboard-administracion .direccion-logistica-grupo-subtitulo,
.dark .fi-dashboard-ordenes_compra_logistica .direccion-logistica-grupo-subtitulo {
    color: rgb(156 163 175);
}

.fi-dashboard-direccion p.direccion-kpi-etiqueta-metrica,
.fi-dashboard-disenador p.direccion-kpi-etiqueta-metrica,
.fi-dashboard-administracion p.direccion-kpi-etiqueta-metrica,
.fi-dashboard-ordenes_compra_logistica p.direccion-kpi-etiqueta-metrica {
    margin-top: 0;
    margin-bottom: 0;
}

/* Gráficas: título (arriba o abajo en el DOM según vista; tipografía como KPI-simple). */
.fi-dashboard-direccion .direccion-cotizaciones-por-estatus-titulo,
.fi-dashboard-administracion .direccion-cotizaciones-por-estatus-titulo {
    margin-top: 0 !important;
    margin-bottom: 0.375rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    font-weight: 600 !important;
    color: rgb(75 85 99);
}

.dark .fi-dashboard-direccion .direccion-cotizaciones-por-estatus-titulo,
.dark .fi-dashboard-administracion .direccion-cotizaciones-por-estatus-titulo {
    color: rgb(156 163 175);
}

.fi-dashboard-direccion .direccion-cotizaciones-por-estatus-titulo,
.fi-dashboard-direccion .direccion-cuentas-titulo-widget,
.fi-dashboard-administracion .direccion-cotizaciones-por-estatus-titulo,
.fi-dashboard-administracion .direccion-logistica-grupo-titulo,
.fi-dashboard-ordenes_compra_logistica .direccion-logistica-grupo-titulo {
    order: -1;
    width: 100%;
}

.fi-dashboard-direccion .direccion-aprobacion-envio-valor,
.fi-dashboard-direccion .direccion-rectificadas-valor,
.fi-dashboard-direccion .direccion-logistica-grupo-valor,
.fi-dashboard-direccion .direccion-logistica-almacen-valor,
.fi-dashboard-administracion .direccion-logistica-grupo-valor,
.fi-dashboard-ordenes_compra_logistica .direccion-logistica-grupo-valor {
    font-size: 1.05rem !important;
    line-height: 1.25rem !important;
}

.fi-dashboard-masonry .fi-wi-stats-overview-stat-label {
    font-size: 0.72rem !important;
    line-height: 1rem !important;
}

/* Pastel estatus (cotizaciones / OC): mismo alto de fila que «Compras» (stretch del grid; ver Blades h-full). */
@media (min-width: 1024px) {
    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-wi-widget.direccion-cotizaciones-por-estatus-widget
        .fi-section,
    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-wi-widget.direccion-cotizaciones-por-estatus-widget
        .fi-section-content-ctn,
    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-wi-widget.direccion-cotizaciones-por-estatus-widget
        .fi-section-content,
    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-wi-widget.direccion-ordenes-compra-por-estatus-widget
        .fi-section,
    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-wi-widget.direccion-ordenes-compra-por-estatus-widget
        .fi-section-content-ctn,
    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-wi-widget.direccion-ordenes-compra-por-estatus-widget
        .fi-section-content {
        height: auto !important;
        min-height: 0 !important;
    }

    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-wi-widget.direccion-cotizaciones-por-estatus-widget
        .direccion-chart-area,
    .fi-dashboard-direccion.fi-dashboard-masonry
        .fi-wi-widget.direccion-ordenes-compra-por-estatus-widget
        .direccion-chart-area {
        min-height: 22.5rem !important;
    }
}

/* Pastel estatus solo en Dirección: alto acorde a Compras por proveedor (fila lg). */
.fi-dashboard-direccion.fi-dashboard-masonry .direccion-cotizaciones-por-estatus-widget .filament-apex-charts-chart,
.fi-dashboard-direccion.fi-dashboard-masonry .direccion-ordenes-compra-por-estatus-widget .filament-apex-charts-chart {
    min-height: 22.5rem !important;
    height: 360px !important;
    max-height: none !important;
    flex: 0 0 auto;
}

.fi-dashboard-direccion.fi-dashboard-masonry .direccion-cotizaciones-por-estatus-widget .apexcharts-canvas,
.fi-dashboard-direccion.fi-dashboard-masonry .direccion-cotizaciones-por-estatus-widget .apexcharts-svg,
.fi-dashboard-direccion.fi-dashboard-masonry .direccion-ordenes-compra-por-estatus-widget .apexcharts-canvas,
.fi-dashboard-direccion.fi-dashboard-masonry .direccion-ordenes-compra-por-estatus-widget .apexcharts-svg {
    height: auto !important;
    max-height: none !important;
}

/* Subtítulos KPI: ancho máximo para no romper la cuadrícula */
.fi-dashboard-masonry .direccion-aprobacion-envio-widget .direccion-aprobacion-envio-subtitulo {
    max-width: 7.5rem;
    margin-inline: auto;
}

.fi-dashboard-masonry .direccion-aprobacion-envio-widget .direccion-aprobacion-envio-kpi {
    flex-direction: column;
}

.fi-dashboard-masonry .direccion-rectificadas-widget .direccion-rectificadas-subtitulo {
    max-width: 10rem;
    margin-inline: auto;
}

/* Misma fila KPI que rectificadas (4 columnas) */
.fi-dashboard-masonry .direccion-rectificadas-widget .direccion-rectificadas-kpi {
    flex-direction: row;
}

.fi-dashboard-masonry .direccion-logistica-grupo-widget .direccion-logistica-grupo-subtitulo {
    margin-inline: auto;
}

/* Etiquetas dentro de celdas multimetrico: sin tope fijo (p. ej. textos largos en Admin «Enviar al cliente»). */
.fi-dashboard-masonry .direccion-logistica-grupo-widget .direccion-kpi-celda-multimetrica .direccion-logistica-grupo-subtitulo,
.fi-dashboard-masonry .direccion-logistica-grupo-widget .direccion-kpi-celda-multimetrica .direccion-kpi-etiqueta-metrica {
    max-width: 100%;
}

.fi-dashboard-masonry .direccion-logistica-grupo-widget .direccion-logistica-grupo-kpi {
    flex-direction: row;
    flex-wrap: wrap;
}

.fi-dashboard-masonry .direccion-logistica-almacen-widget .direccion-logistica-almacen-subtitulo {
    max-width: 11rem;
    margin-inline: auto;
}

.fi-dashboard-masonry .direccion-logistica-almacen-widget .direccion-logistica-almacen-kpi {
    flex-direction: column;
}

/*
 * Compactación Logística por Grupo / Almacén: se apretan paddings, gaps
 * internos del KPI y margen del título para alinear la fila final del
 * dashboard (Logística Grupo + Almacén + Cobrar + Pagar) en alturas similares.
 */
.fi-dashboard-masonry .direccion-logistica-grupo-widget .filament-apex-charts-card,
.fi-dashboard-masonry .direccion-logistica-almacen-widget .filament-apex-charts-card {
    padding: 0.625rem !important;
}

.fi-dashboard-masonry .direccion-logistica-grupo-widget .direccion-logistica-grupo-kpi,
.fi-dashboard-masonry .direccion-logistica-almacen-widget .direccion-logistica-almacen-kpi {
    gap: 0.375rem !important;
}

.fi-dashboard-masonry .direccion-logistica-grupo-widget .direccion-logistica-grupo-kpi .direccion-kpi-celda-multimetrica,
.fi-dashboard-masonry .direccion-logistica-almacen-widget .direccion-logistica-almacen-kpi .direccion-kpi-celda-multimetrica {
    gap: 0.125rem !important;
    width: 100%;
    flex: 0 0 auto;
}

.fi-dashboard-masonry .direccion-logistica-grupo-widget .direccion-logistica-grupo-kpi .direccion-kpi-celda-multimetrica {
    flex: 1 1 calc(50% - 0.375rem);
    min-width: 6rem;
}

.fi-dashboard-masonry .direccion-logistica-grupo-widget .direccion-logistica-grupo-titulo,
.fi-dashboard-masonry .direccion-logistica-almacen-widget .direccion-logistica-almacen-titulo {
    margin-top: 0.25rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    font-weight: 600 !important;
}

.fi-dashboard-masonry .direccion-ordenes-por-aprobar-widget .direccion-kpi-simple-heading,
.fi-dashboard-masonry .direccion-ordenes-por-aprobar-widget .direccion-ordenes-por-aprobar-titulo {
    max-width: 18rem;
    margin-inline: auto;
}

/*
 * Cuentas cobrar/pagar (span 6): dentro del widget dos bloques
 * (Periodo | Histórico) en horizontal separados por un divisor vertical.
 * La card conserva ancho completo controlado para no verse aislada dentro del span.
 */
.fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-card,
.fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-card {
    width: 100%;
    max-width: 100%;
    align-self: center;
    margin-inline: auto;
    padding: 0.625rem !important;
}

/* Compactación de gaps internos */
.fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-cuerpo,
.fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-cuerpo {
    gap: 0.5rem;
}

.fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-bloques,
.fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-bloques {
    gap: 0.5rem;
}

/* Tamaño compacto por bloque (Periodo / Histórico) */
.fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-bloque,
.fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-bloque {
    max-width: none;
    gap: 0.375rem;
}

.fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-etiqueta-seccion,
.fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-etiqueta-seccion {
    font-size: 0.625rem;
    line-height: 0.875rem;
    letter-spacing: 0.08em;
}

/* KPI grid compacto: dos columnas, gap mínimo */
.fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-kpi,
.fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-kpi {
    gap: 0.375rem !important;
}

.fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-kpi-celda,
.fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-kpi-celda {
    gap: 0.125rem;
}

/* Fuente del valor: reducida para que quepa dentro del bloque compacto */
.fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cotizacion-kpi-valor,
.fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cotizacion-kpi-valor {
    font-size: 0.8125rem !important;
    line-height: 1.125rem !important;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Subtítulo muy pequeño para encajar las celdas KPI sin romper */
.fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-subtitulo,
.fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-subtitulo {
    font-size: 0.625rem;
    line-height: 0.75rem;
    max-width: 100%;
    margin-inline: auto;
    overflow-wrap: anywhere;
}

/* Separador vertical entre Periodo e Histórico (visible en ≥640px) */
.fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-separador,
.fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-separador {
    flex: 0 0 2px;
    align-self: stretch;
    background-color: rgb(209 213 219); /* gray-300 */
    border-radius: 9999px;
}

.dark .fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-separador,
.dark .fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-separador {
    background-color: rgb(55 65 81); /* gray-700 */
}

/* Título del widget compacto */
.fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-titulo-widget,
.fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-titulo-widget {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.375rem !important;
}

/*
 * Resumen ventas materiales (yardas por categoría): filtros flexibles con wrap
 * para evitar overflow en spans estrechos.
 */
.direccion-yardas-categoria-widget .direccion-yardas-filtros {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.direccion-yardas-categoria-widget .direccion-yardas-filtro-field {
    flex: 1 1 8rem !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.direccion-yardas-categoria-widget .direccion-yardas-filtro-select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-size: 0.75rem;
    line-height: 1rem;
}

@media (max-width: 1023px) {
    .fi-dashboard-filtros {
        margin-bottom: 1rem;
    }

    .fi-dashboard-direccion .fi-wi {
        align-items: start;
    }

    .fi-dashboard-direccion .direccion-card-kpi,
    .fi-dashboard-direccion .direccion-card-operational {
        min-height: 7rem;
    }

    .fi-dashboard-direccion .direccion-card-chart-main,
    .fi-dashboard-direccion .direccion-card-chart-secondary {
        min-height: 20rem;
    }

    .fi-dashboard-direccion .direccion-ventas-vs-presupuesto-widget .direccion-chart-area {
        min-height: 18rem;
    }

    .fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-chart-area {
        min-height: 16rem;
    }

    .fi-dashboard-direccion .direccion-compras-proveedor-medida-widget .direccion-chart-area {
        min-height: 22.5rem !important;
    }

    .fi-dashboard-direccion .direccion-card-finance {
        min-height: auto;
    }

    .fi-dashboard-direccion .direccion-cotizacion-kpi-valor {
        font-size: 1.25rem !important;
        line-height: 1.6rem !important;
    }

    .fi-dashboard-direccion .direccion-logistica-grupo-kpi,
    .fi-dashboard-direccion .direccion-rectificadas-kpi {
        flex-wrap: wrap !important;
    }

    .fi-dashboard-direccion .direccion-logistica-almacen-kpi {
        flex-wrap: nowrap !important;
    }

    .fi-dashboard-direccion .direccion-logistica-grupo-kpi > *,
    .fi-dashboard-direccion .direccion-rectificadas-kpi > * {
        flex-basis: calc(50% - 0.375rem) !important;
    }

    .fi-dashboard-direccion .direccion-logistica-almacen-kpi > * {
        flex-basis: 100% !important;
    }
}

@media (max-width: 639px) {
    .fi-dashboard-masonry .filament-apex-charts-card {
        padding: 0.625rem !important;
    }

    .fi-dashboard-direccion .direccion-card-kpi,
    .fi-dashboard-direccion .direccion-card-chart-main,
    .fi-dashboard-direccion .direccion-card-chart-secondary,
    .fi-dashboard-direccion .direccion-card-operational,
    .fi-dashboard-direccion .direccion-card-finance {
        min-height: auto;
    }

    .fi-dashboard-direccion .direccion-ventas-vs-presupuesto-widget .direccion-chart-area {
        min-height: 16rem;
    }

    .fi-dashboard-direccion .direccion-yardas-categoria-widget .direccion-chart-area {
        min-height: 14rem;
    }

    .fi-dashboard-direccion .direccion-compras-proveedor-medida-widget .direccion-chart-area {
        min-height: 22.5rem !important;
    }

    .direccion-yardas-categoria-widget .direccion-yardas-filtro-field {
        flex-basis: 100% !important;
    }

    .fi-dashboard-masonry .direccion-cuentas-cobrar-widget .direccion-cuentas-card,
    .fi-dashboard-masonry .direccion-cuentas-pagar-widget .direccion-cuentas-card {
        max-width: 100%;
    }
}

/*
 * Otros dashboards: mantener la misma densidad visual de Dirección sin
 * heredar reglas específicas de sus widgets.
 */
.fi-dashboard-administracion .fi-wi-chart,
.fi-dashboard-ordenes_compra_almacen .fi-wi-chart,
.fi-dashboard-disenador .fi-wi-chart {
    min-width: 0;
}

/*
 * Administración: usar el mismo estiramiento/alineación visual de Dirección
 * para igualar alturas de cards y ordenar el contenido interno.
 */
.fi-dashboard-administracion .fi-wi {
    align-items: stretch;
}

.fi-dashboard-administracion .fi-wi-widget {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
}

.fi-dashboard-administracion .fi-wi-widget > * {
    flex: 1 1 auto;
    width: 100%;
}

/*
 * Panel Administración (md+ · 768px): segunda fila — estatus cotizaciones + logística + CxC/CxP/balance.
 */
@media (min-width: 768px) {
    .fi-dashboard-administracion.fi-dashboard-masonry
        .fi-dashboard-widget-row-administracion-estatus-logistica.fi-dashboard-widget-row
        > .fi-wi {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: stretch !important;
        gap: 1.5rem !important;
        min-width: 0;
    }

    .fi-dashboard-administracion.fi-dashboard-masonry
        .fi-dashboard-widget-row-administracion-estatus-logistica
        .fi-wi-widget.direccion-cotizaciones-estatus-periodo-historico-widget {
        grid-column: 1 / span 4 !important;
    }

    .fi-dashboard-administracion.fi-dashboard-masonry
        .fi-dashboard-widget-row-administracion-estatus-logistica
        .fi-wi-widget.admin-panel-widget-logistica-grupo {
        grid-column: 5 / span 4 !important;
    }

    .fi-dashboard-administracion.fi-dashboard-masonry
        .fi-dashboard-widget-row-administracion-estatus-logistica
        .fi-wi-widget.admin-panel-widget-cxc-cxp-resumen {
        grid-column: 9 / span 4 !important;
    }

    .fi-dashboard-administracion.fi-dashboard-masonry
        .fi-dashboard-widget-row-administracion-estatus-logistica
        .direccion-cotizaciones-estatus-periodo-historico-widget
        .filament-apex-charts-chart {
        min-height: 18rem !important;
        flex: 1 1 auto;
    }

    .fi-dashboard-ordenes_compra_logistica.fi-dashboard-masonry
        .fi-dashboard-widget-row-oc-logistica-principal.fi-dashboard-widget-row
        > .fi-wi {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, auto));
        align-items: stretch !important;
        gap: 1.5rem !important;
        min-width: 0;
    }

    .fi-dashboard-ordenes_compra_logistica.fi-dashboard-masonry
        .fi-dashboard-widget-row-oc-logistica-principal
        .fi-wi-widget.oc-logistica-principal-chart {
        grid-column: 1 / span 6 !important;
        grid-row: 1 / span 2 !important;
    }

    .fi-dashboard-ordenes_compra_logistica.fi-dashboard-masonry
        .fi-dashboard-widget-row-oc-logistica-principal
        .fi-wi-widget.oc-logistica-principal-kpi-ordenes {
        grid-column: 7 / span 6 !important;
        grid-row: 1 / span 1 !important;
    }

    .fi-dashboard-ordenes_compra_logistica.fi-dashboard-masonry
        .fi-dashboard-widget-row-oc-logistica-principal
        .fi-wi-widget.oc-logistica-principal-logistica-grupo {
        grid-column: 7 / span 6 !important;
        grid-row: 2 / span 1 !important;
    }

    .fi-dashboard-ordenes_compra_logistica.fi-dashboard-masonry
        .fi-dashboard-widget-row-oc-logistica-principal
        .oc-logistica-principal-chart
        .filament-apex-charts-chart {
        min-height: 18rem !important;
        flex: 1 1 auto;
    }

}

.fi-dashboard-administracion .fi-wi-chart .dashboard-section-compact,
.fi-dashboard-administracion .fi-wi-chart .fi-section-content,
.fi-dashboard-administracion .fi-wi-chart .fi-section-content-ctn {
    height: 100%;
}

.fi-dashboard-administracion .direccion-cotizaciones-estatus-periodo-historico-widget .direccion-card-content,
.fi-dashboard-administracion .direccion-logistica-grupo-widget .direccion-card-content,
.fi-dashboard-administracion .direccion-cxc-cxp-resumen-widget .direccion-card-content,
.fi-dashboard-ordenes_compra_logistica .direccion-finanzas-tarjeta .direccion-card-content,
.fi-dashboard-ordenes_compra_logistica .direccion-logistica-grupo-widget .direccion-card-content,
.fi-dashboard-ordenes_compra_logistica .oc-logistica-compras-proveedor-medida-widget .direccion-card-content {
    height: 100%;
}

.fi-dashboard-administracion .direccion-card-body,
.fi-dashboard-ordenes_compra_logistica .direccion-finanzas-tarjeta .direccion-card-body,
.fi-dashboard-ordenes_compra_logistica .direccion-logistica-grupo-widget .direccion-card-body,
.fi-dashboard-ordenes_compra_logistica .oc-logistica-compras-proveedor-medida-widget .direccion-card-body {
    width: 100%;
}

/* Administración: paridad visual con widgets de Dirección + legibilidad de métricas. */
.fi-dashboard-administracion .direccion-cotizacion-fila-body,
.fi-dashboard-ordenes_compra_logistica .direccion-logistica-grupo-widget .direccion-cotizacion-fila-body {
    justify-content: center;
    gap: 0.25rem;
}

.fi-dashboard-administracion .admin-panel-widget-logistica-grupo .filament-apex-charts-card,
.fi-dashboard-administracion .direccion-cotizaciones-estatus-periodo-historico-widget .filament-apex-charts-card,
.fi-dashboard-administracion .admin-panel-widget-cxc-cxp-resumen .filament-apex-charts-card,
.fi-dashboard-ordenes_compra_logistica .direccion-finanzas-tarjeta .filament-apex-charts-card,
.fi-dashboard-ordenes_compra_logistica .oc-logistica-por-grupo-widget .filament-apex-charts-card {
    justify-content: center;
    padding: 0.75rem !important;
}

.fi-dashboard-ordenes_compra_logistica .oc-logistica-compras-proveedor-medida-widget .filament-apex-charts-card {
    justify-content: flex-start;
    padding: 0.75rem !important;
}

.fi-dashboard-administracion .direccion-cxc-cxp-resumen-widget .direccion-cotizacion-kpi-valor {
    font-size: 0.92rem !important;
    line-height: 1.2rem !important;
}

.fi-dashboard-administracion .direccion-cxc-cxp-resumen-widget .direccion-logistica-grupo-subtitulo {
    margin-top: 0;
}

.fi-dashboard-direccion .fi-section,
.fi-dashboard-ordenes_compra_logistica .fi-section,
.fi-dashboard-ordenes_compra_almacen .fi-section,
.fi-dashboard-disenador .fi-section,
.fi-dashboard-administracion .fi-section {
    --tw-ring-offset-width: 0px;
    height: 100%;
}

.fi-dashboard-masonry .dashboard-section-compact .fi-section-content {
    padding: 0.75rem !important;
}

.fi-dashboard-ordenes_compra_logistica .oc-logistica-widget-sm-content .fi-wi-stats-overview-stats-ctn,
.fi-dashboard-ordenes_compra_almacen .oc-almacen-widget-sm-content .fi-wi-stats-overview-stats-ctn,
.fi-dashboard-disenador .direccion-dashboard-sm-stats .fi-wi-stats-overview-stats-ctn {
    gap: 0.75rem !important;
}

/* Taller (ordenes_compra_almacen): misma línea gráfica, solo UI. */
.fi-dashboard-ordenes_compra_almacen .fi-wi {
    align-items: stretch;
}

.fi-dashboard-ordenes_compra_almacen .fi-wi-widget {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
}

.fi-dashboard-ordenes_compra_almacen .fi-wi-widget > * {
    flex: 1 1 auto;
    width: 100%;
}

.fi-dashboard-ordenes_compra_almacen .dashboard-section-compact,
.fi-dashboard-ordenes_compra_almacen .fi-section-content-ctn,
.fi-dashboard-ordenes_compra_almacen .fi-section-content {
    height: 100%;
    min-height: 0;
}

.fi-dashboard-ordenes_compra_almacen .dashboard-section-compact .fi-section-content {
    padding: 0.75rem !important;
}

.fi-dashboard-ordenes_compra_almacen .fi-dashboard-widget-row {
    display: grid;
    gap: 0.625rem;
}

/* Taller: KPI Cotizaciones Rectificadas (misma línea visual que Dirección). */
.fi-dashboard-ordenes_compra_almacen .direccion-rectificadas-widget .filament-apex-charts-card,
.fi-dashboard-ordenes_compra_almacen .oc-almacen-rectificadas-widget .filament-apex-charts-card {
    justify-content: center;
    padding: 0.75rem !important;
}

.fi-dashboard-ordenes_compra_almacen .direccion-cotizacion-fila-body {
    justify-content: center;
    gap: 0.25rem;
}

.fi-dashboard-ordenes_compra_almacen .direccion-rectificadas-kpi {
    gap: 0.375rem !important;
}

.fi-dashboard-ordenes_compra_almacen .direccion-rectificadas-kpi > div {
    min-height: 2.875rem;
    padding: 0.35rem 0.25rem;
    border-radius: 0.5rem;
    background-color: rgb(249 250 251);
}

.dark .fi-dashboard-ordenes_compra_almacen .direccion-rectificadas-kpi > div {
    background-color: rgb(31 41 55 / 0.65);
}

.fi-dashboard-ordenes_compra_almacen .direccion-rectificadas-titulo {
    margin-top: 0 !important;
    margin-bottom: 0.375rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    font-weight: 600 !important;
    order: -1;
    width: 100%;
}

.fi-dashboard-ordenes_compra_almacen .direccion-rectificadas-subtitulo {
    font-size: 0.625rem !important;
    line-height: 0.78rem !important;
}

.fi-dashboard-ordenes_compra_almacen .direccion-rectificadas-valor {
    font-size: 1.05rem !important;
    line-height: 1.25rem !important;
}

.fi-dashboard-ordenes_compra_almacen .fi-wi-stats-overview-stat {
    border-radius: 0.625rem;
    padding: 0.5rem 0.55rem;
    background-color: rgb(249 250 251);
}

.dark .fi-dashboard-ordenes_compra_almacen .fi-wi-stats-overview-stat {
    background-color: rgb(31 41 55 / 0.65);
}

.fi-dashboard-ordenes_compra_almacen .fi-wi-stats-overview-stat-value {
    font-size: 1rem !important;
    line-height: 1.35rem !important;
    font-variant-numeric: tabular-nums;
}

.fi-dashboard-ordenes_compra_almacen .fi-wi-stats-overview-stat-label {
    font-size: 0.72rem !important;
    line-height: 0.95rem !important;
    font-weight: 600;
}

.fi-dashboard-ordenes_compra_almacen .fi-wi-stats-overview-stat-description {
    font-size: 0.68rem !important;
    line-height: 0.9rem !important;
}

.fi-dashboard-ordenes_compra_almacen .oc-almacen-resumen-logistico-taller-widget .fi-wi-stats-overview-stats-ctn {
    margin-top: 0.5rem !important;
    gap: 0.6rem !important;
}

/* Ordenes de compra + logística: alineación y legibilidad visual (sin tocar datos). */
.fi-dashboard-ordenes_compra_logistica .fi-wi {
    align-items: stretch;
}

.fi-dashboard-ordenes_compra_logistica .fi-wi-widget {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
}

.fi-dashboard-ordenes_compra_logistica .fi-wi-widget > * {
    flex: 1 1 auto;
    width: 100%;
}

.fi-dashboard-ordenes_compra_logistica .dashboard-section-compact,
.fi-dashboard-ordenes_compra_logistica .fi-section-content-ctn,
.fi-dashboard-ordenes_compra_logistica .fi-section-content {
    height: 100%;
    min-height: 0;
}

.fi-dashboard-ordenes_compra_logistica .dashboard-section-compact .fi-section-content {
    padding: 0.75rem !important;
}

.fi-dashboard-ordenes_compra_logistica .fi-dashboard-widget-row {
    display: grid;
    gap: 0.625rem;
}

.fi-dashboard-ordenes_compra_logistica .fi-wi-stats-overview-stat {
    border-radius: 0.625rem;
    padding: 0.5rem 0.55rem;
    background-color: rgb(249 250 251);
}

.dark .fi-dashboard-ordenes_compra_logistica .fi-wi-stats-overview-stat {
    background-color: rgb(31 41 55 / 0.65);
}

.fi-dashboard-ordenes_compra_logistica .fi-wi-stats-overview-stat-value {
    font-size: 1rem !important;
    line-height: 1.35rem !important;
    font-variant-numeric: tabular-nums;
}

.fi-dashboard-ordenes_compra_logistica .oc-logistica-kpi-widget .fi-section-header-heading,
.fi-dashboard-ordenes_compra_logistica .oc-logistica-cumplimiento-entrega-widget .fi-section-header-heading {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    font-weight: 600 !important;
    color: rgb(75 85 99) !important;
}

.dark .fi-dashboard-ordenes_compra_logistica .oc-logistica-kpi-widget .fi-section-header-heading,
.dark .fi-dashboard-ordenes_compra_logistica .oc-logistica-cumplimiento-entrega-widget .fi-section-header-heading {
    color: rgb(156 163 175) !important;
}

.fi-dashboard-ordenes_compra_logistica .fi-wi-stats-overview-stat-label {
    font-size: 0.72rem !important;
    line-height: 0.95rem !important;
    font-weight: 500 !important;
    color: rgb(75 85 99);
}

.dark .fi-dashboard-ordenes_compra_logistica .fi-wi-stats-overview-stat-label {
    color: rgb(156 163 175);
}

.fi-dashboard-ordenes_compra_logistica .fi-wi-stats-overview-stat-description {
    font-size: 0.68rem !important;
    line-height: 0.9rem !important;
}

.fi-dashboard-ordenes_compra_logistica .oc-logistica-kpi-widget .fi-wi-stats-overview-stats-ctn {
    margin-top: 0.5rem !important;
    gap: 0.6rem !important;
}

.fi-dashboard-ordenes_compra_logistica .oc-logistica-cumplimiento-entrega-widget .fi-wi-stats-overview-stats-ctn {
    gap: 0.6rem !important;
}

.fi-dashboard-ordenes_compra_logistica .oc-logistica-cumplimiento-entrega-widget table {
    font-size: 0.8125rem;
}

.fi-dashboard-ordenes_compra_logistica .oc-logistica-cumplimiento-entrega-widget thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: rgb(249 250 251);
}

.dark .fi-dashboard-ordenes_compra_logistica .oc-logistica-cumplimiento-entrega-widget thead th {
    background-color: rgb(31 41 55);
}

.fi-dashboard-ordenes_compra_logistica .oc-logistica-table-scroll,
.fi-dashboard-disenador .disenador-dashboard-table-scroll {
    max-height: 22rem;
    overflow: auto;
}

/* Diseñador: misma línea gráfica, solo UI/layout. */
.fi-dashboard-disenador .fi-wi {
    align-items: stretch;
}

.fi-dashboard-disenador .fi-wi-widget {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
}

.fi-dashboard-disenador .fi-wi-widget > * {
    flex: 1 1 auto;
    width: 100%;
}

.fi-dashboard-disenador .dashboard-section-compact,
.fi-dashboard-disenador .fi-section-content-ctn,
.fi-dashboard-disenador .fi-section-content {
    height: 100%;
    min-height: 0;
}

.fi-dashboard-disenador .dashboard-section-compact .fi-section-content {
    padding: 0.75rem !important;
}

.fi-dashboard-disenador .fi-dashboard-widget-row {
    display: grid;
    gap: 0.625rem;
}

.fi-dashboard-disenador .disenador-ventas-kpi-card,
.fi-dashboard-disenador .disenador-materiales-kpi-pod {
    border-radius: 0.625rem;
    background-color: rgb(249 250 251) !important;
    padding: 0.6rem !important;
}

.dark .fi-dashboard-disenador .disenador-ventas-kpi-card,
.dark .fi-dashboard-disenador .disenador-materiales-kpi-pod {
    background-color: rgb(31 41 55 / 0.65) !important;
}

.fi-dashboard-disenador .disenador-ventas-kpi-label {
    font-size: 0.72rem;
    line-height: 1rem;
}

.fi-dashboard-disenador .disenador-ventas-kpi-value {
    font-size: 1rem;
    line-height: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.fi-dashboard-disenador .disenador-resumen-ventas-materiales-widget p.text-lg {
    font-size: 1rem !important;
    line-height: 1.35rem !important;
    font-variant-numeric: tabular-nums;
}

.fi-dashboard-disenador .disenador-resumen-ventas-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.fi-dashboard-disenador .disenador-dashboard-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: rgb(249 250 251);
}

.dark .fi-dashboard-disenador .disenador-dashboard-table-scroll thead th {
    background-color: rgb(31 41 55);
}

.fi-dashboard-ordenes_compra_logistica table,
.fi-dashboard-disenador table {
    font-size: 0.8125rem;
}

.fi-dashboard-ordenes_compra_logistica th,
.fi-dashboard-ordenes_compra_logistica td,
.fi-dashboard-disenador th,
.fi-dashboard-disenador td {
    padding-block: 0.45rem !important;
}

.fi-dashboard-administracion .fi-wi-chart canvas,
.fi-dashboard-disenador .fi-wi-chart canvas,
.fi-dashboard-ordenes_compra_almacen .fi-wi-chart canvas {
    max-height: 260px;
}

.fi-dashboard-disenador .disenador-ventas-progreso-widget.fi-wi-chart canvas {
    max-height: none !important;
}

.fi-dashboard-disenador .disenador-cotizaciones-por-estatus-widget .filament-apex-charts-chart,
.fi-dashboard-disenador .disenador-cotizaciones-por-estatus-widget .apexcharts-canvas,
.fi-dashboard-disenador .disenador-cotizaciones-por-estatus-widget .apexcharts-svg {
    height: 240px !important;
    max-height: 240px !important;
}

/* Diseñador: KPI / gráficas con mismas clases que Dirección */
.fi-dashboard-disenador .direccion-resumen-ventas-materiales-kpi-widget .filament-apex-charts-card,
.fi-dashboard-disenador .direccion-cotizaciones-por-estatus-widget .filament-apex-charts-card,
.fi-dashboard-disenador .direccion-logistica-grupo-widget .filament-apex-charts-card {
    justify-content: center;
    padding: 0.75rem !important;
}

/* Logística por Grupo (Diseñador): el cuerpo rellena el alto disponible del card / celda grid */
.fi-dashboard-disenador .disenador-logistica-grupo-widget.filament-widgets-chart-widget {
    height: 100%;
    min-height: 0;
}

.fi-dashboard-disenador .disenador-logistica-grupo-widget .filament-apex-charts-card {
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.fi-dashboard-disenador .disenador-logistica-grupo-widget .direccion-card-content.direccion-cotizacion-fila-body {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.fi-dashboard-disenador .direccion-cotizacion-fila-body {
    justify-content: center;
    gap: 0.25rem;
    height: 100%;
}

.fi-dashboard-disenador .disenador-logistica-grupo-widget .disenador-logistica-grupo-kpi-line {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: 0.375rem !important;
    row-gap: 0;
    align-items: stretch;
    justify-items: center;
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
}

/* Pantallas angostas: una sola fila con desplazamiento horizontal si falta ancho. */
@media (max-width: 1023px) {
    .fi-dashboard-disenador .disenador-logistica-grupo-widget .disenador-logistica-grupo-kpi-line {
        grid-template-columns: repeat(7, minmax(4.5rem, 1fr));
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
}

.fi-dashboard-disenador .disenador-logistica-grupo-widget .disenador-logistica-grupo-kpi-line > .direccion-kpi-celda-multimetrica {
    width: 100%;
    max-width: 100%;
}

.fi-dashboard-disenador .direccion-logistica-grupo-kpi {
    gap: 0.375rem !important;
}

.fi-dashboard-disenador .disenador-cotizaciones-por-estatus-widget .direccion-chart-area,
.fi-dashboard-disenador .disenador-yardas-por-proveedor-widget .direccion-chart-area {
    border-radius: 0.5rem;
    background-color: rgb(249 250 251);
    padding-inline: 0.25rem;
    padding-block: 0.375rem;
}

.dark .fi-dashboard-disenador .disenador-cotizaciones-por-estatus-widget .direccion-chart-area,
.dark .fi-dashboard-disenador .disenador-yardas-por-proveedor-widget .direccion-chart-area {
    background-color: rgb(31 41 55 / 0.5);
}

.fi-dashboard-disenador .disenador-materiales-kpi-pod {
    padding: 0.95rem !important;
}

.fi-dashboard-disenador .disenador-ventas-progreso-widget .fi-section-header-heading {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    font-weight: 600 !important;
    color: rgb(75 85 99) !important;
}

.dark .fi-dashboard-disenador .disenador-ventas-progreso-widget .fi-section-header-heading {
    color: rgb(156 163 175) !important;
}

.fi-dashboard-disenador .direccion-kpi-simple-heading,
.fi-dashboard-disenador .direccion-resumen-ventas-materiales-titulo,
.fi-dashboard-disenador .direccion-cotizaciones-por-estatus-titulo,
.fi-dashboard-disenador .direccion-logistica-grupo-titulo {
    margin-top: 0 !important;
    margin-bottom: 0.375rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    font-weight: 600 !important;
    color: rgb(75 85 99) !important;
    order: -1;
    width: 100%;
    text-align: center;
}

.dark .fi-dashboard-disenador .direccion-kpi-simple-heading,
.dark .fi-dashboard-disenador .direccion-resumen-ventas-materiales-titulo,
.dark .fi-dashboard-disenador .direccion-cotizaciones-por-estatus-titulo,
.dark .fi-dashboard-disenador .direccion-logistica-grupo-titulo {
    color: rgb(156 163 175) !important;
}

.fi-dashboard-disenador .direccion-logistica-grupo-subtitulo {
    font-size: 0.625rem !important;
    line-height: 0.78rem !important;
}

.fi-dashboard-disenador .direccion-logistica-grupo-valor {
    font-size: 1.05rem !important;
    line-height: 1.25rem !important;
}

.fi-dashboard-disenador .direccion-resumen-ventas-materiales-ticket-valor {
    font-variant-numeric: tabular-nums;
}