@import '_content/NexproConnect.Web.Components/NexproConnect.Web.Components.wkajqm9m66.bundle.scp.css';

/* _content/NexproConnect.Web.Server/Pages/AverageMetricCard.razor.rz.scp.css */
.average-metric-card[b-d8bhqahnso] {
    background: var(--nexpro-bg-card);
    border-radius: var(--nexpro-border-radius-lg);
    box-shadow: var(--nexpro-shadow-sm);
    padding: 1rem 1.25rem;
    border: 1px solid var(--nexpro-surface-border-subtle);
    /* Que la card no intente estirarse por un número largo en mobile. */
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.average-metric-label[b-d8bhqahnso] {
    color: var(--nexpro-text-secondary);
}

.average-metric-value[b-d8bhqahnso] {
    color: var(--nexpro-text-primary);
    /* Si el número (ej. "16.744") no entra, que baje de línea en vez de cortarse. */
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
    line-height: 1.15;
}

@media (max-width: 767px) {
    .average-metric-value[b-d8bhqahnso] {
        font-size: 1.45rem;
    }
}

.average-trend[b-d8bhqahnso] {
    font-size: 0.75rem;
    font-weight: var(--nexpro-font-weight-semibold);
    padding: 0.35em 0.75em;
}

.average-trend--success[b-d8bhqahnso] {
    background: var(--nexpro-success-light);
    color: var(--nexpro-success-text);
}

.average-trend--danger[b-d8bhqahnso] {
    background: var(--nexpro-danger-bg);
    color: var(--nexpro-danger-text);
}

.average-trend--warning[b-d8bhqahnso] {
    background: var(--nexpro-warning-light);
    color: var(--nexpro-warning-text);
}
/* _content/NexproConnect.Web.Server/Pages/Dashboard.razor.rz.scp.css */
.dashboard-shell[b-vgnvxiaav7] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    /* En mobile alguna card se mete un pelín para afuera y aparece scroll horizontal.
       Lo corto acá para que la página quede dentro del viewport pase lo que pase. */
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* ── Skeleton placeholders (carga progresiva) ──────────────── */
.dashboard-skeleton[b-vgnvxiaav7] {
    background: linear-gradient(
        90deg,
        var(--nexpro-bg-hover, rgba(0,0,0,0.04)) 25%,
        rgba(0,0,0,0.02) 50%,
        var(--nexpro-bg-hover, rgba(0,0,0,0.04)) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.6s ease-in-out infinite;
    border-radius: var(--nexpro-border-radius-xl, 12px);
}

.dashboard-skeleton--metric[b-vgnvxiaav7] {
    height: 5.25rem;
    border-radius: var(--nexpro-border-radius-xl, 12px);
}

.dashboard-skeleton--scoring[b-vgnvxiaav7] {
    height: 4.2rem;
}

.dashboard-skeleton--chart[b-vgnvxiaav7] {
    height: 15rem;
    border-radius: var(--nexpro-border-radius-xl, 12px);
}

.dashboard-skeleton--average[b-vgnvxiaav7] {
    height: 5rem;
}

@@keyframes skeletonShimmer {
    0%[b-vgnvxiaav7]   { background-position: 200% 0; }
    100%[b-vgnvxiaav7] { background-position: -200% 0; }
}

/* Selector compacto de período (7/30/60/90). Reemplaza al viejo chip
   "Últimos 30 días". Los chips con .is-pending quedan visibles pero disabled
   hasta que el API acepte ?days= (flag _daysFilterApiReady). */
.dashboard-days-selector[b-vgnvxiaav7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--nexpro-surface-alt, rgba(var(--nexpro-primary-rgb), 0.06));
    border: 1px solid var(--nexpro-border, rgba(var(--nexpro-primary-rgb), 0.14));
    flex-wrap: wrap;
}

.dashboard-days-selector__icon[b-vgnvxiaav7] {
    color: var(--nexpro-primary);
    font-size: 0.95rem;
    line-height: 1;
    padding-left: 0.55rem;
    padding-right: 0.1rem;
}

.dashboard-days-selector__chip[b-vgnvxiaav7] {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--nexpro-text-secondary, #5b6472);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.dashboard-days-selector__chip:hover:not(:disabled):not(.is-active)[b-vgnvxiaav7] {
    background: rgba(var(--nexpro-primary-rgb), 0.08);
    color: var(--nexpro-text-primary);
}

.dashboard-days-selector__chip.is-active[b-vgnvxiaav7] {
    background: var(--nexpro-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(var(--nexpro-primary-rgb), 0.25);
}

.dashboard-days-selector__chip:disabled[b-vgnvxiaav7] {
    opacity: 0.55;
    cursor: wait;
}

/* recarga por cambio de período: el tablero queda visible pero atenuado,
   en vez del spinner a pantalla completa (ese es solo de la primera carga) */
.dashboard-desktop.is-reloading[b-vgnvxiaav7],
.dashboard-mobile.is-reloading[b-vgnvxiaav7] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.dashboard-days-selector__chip.is-pending[b-vgnvxiaav7] {
    opacity: 0.45;
    cursor: not-allowed;
    position: relative;
}

.dashboard-days-selector__chip.is-pending[b-vgnvxiaav7]::after {
    content: "";
    position: absolute;
    top: 0.25rem;
    right: 0.3rem;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--bs-warning, #f0ad4e);
}

/* Banner para cuando el login al API falló o el token no sirve. Mejor que el
   usuario vea este aviso y no se coma un dashboard en cero sin entender nada. */
.dashboard-api-warning[b-vgnvxiaav7] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--nexpro-border-radius-lg, 12px);
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.14), rgba(255, 193, 7, 0.06));
    border: 1px solid rgba(255, 193, 7, 0.45);
    color: #664d03;
    margin-bottom: var(--nexpro-spacing-md, 1rem);
}

.dashboard-api-warning__icon[b-vgnvxiaav7] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 193, 7, 0.22);
    color: #b88700;
    font-size: 1.05rem;
}

.dashboard-api-warning__content[b-vgnvxiaav7] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1.35;
}

.dashboard-api-warning__title[b-vgnvxiaav7] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #5a3e00;
}

.dashboard-api-warning__detail[b-vgnvxiaav7] {
    font-size: 0.82rem;
    color: #7a5b00;
}

/* Desktop: layout vertical simple. Cada sección crece según su contenido;
   no forzamos que los gráficos llenen toda la pantalla porque en monitores
   grandes quedaban enormes y el resto del contenido no se veía sin scrollear. */
.dashboard-desktop[b-vgnvxiaav7] {
    display: flex;
    flex-direction: column;
    /* gap ajustado para que el dashboard completo entre en 1080p al 100% sin scroll */
    gap: 0.75rem;
}

.dashboard-toolbar[b-vgnvxiaav7] {
    margin-bottom: var(--nexpro-spacing-md);
    padding: 0.8rem;
}

.dashboard-toolbar__content[b-vgnvxiaav7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dashboard-toolbar__group[b-vgnvxiaav7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexpro-spacing-sm);
}

.dashboard-toolbar__chip[b-vgnvxiaav7] {
    border: 1px solid var(--nexpro-border-color);
    min-height: 2.5rem;
    background: var(--nexpro-white);
    color: var(--nexpro-text-secondary);
    border-radius: var(--nexpro-border-radius-full);
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    font-weight: var(--nexpro-font-weight-semibold);
    transition: background-color var(--nexpro-transition-fast), color var(--nexpro-transition-fast), border-color var(--nexpro-transition-fast);
}

.dashboard-toolbar__chip.is-active[b-vgnvxiaav7] {
    background: var(--nexpro-brand-primary);
    border-color: var(--nexpro-brand-primary);
    color: var(--nexpro-white);
}

.dashboard-toolbar__dates[b-vgnvxiaav7] {
    display: flex;
    align-items: end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.dashboard-toolbar__field[b-vgnvxiaav7] {
    display: grid;
    gap: 0.35rem;
}

.dashboard-toolbar__label[b-vgnvxiaav7] {
    font-size: var(--nexpro-font-size-xs);
    color: var(--nexpro-text-secondary);
    font-weight: var(--nexpro-font-weight-semibold);
}

.dashboard-toolbar__input[b-vgnvxiaav7] {
    min-width: 10rem;
    border-radius: var(--nexpro-border-radius-md);
    border: 1px solid var(--nexpro-border-color);
    background: var(--nexpro-bg-card);
}

.dashboard-toolbar__apply[b-vgnvxiaav7] {
    border: none;
    background: var(--nexpro-brand-primary);
    color: var(--nexpro-white);
    border-radius: var(--nexpro-border-radius-md);
    padding: 0.65rem 0.95rem;
    font-size: 0.85rem;
    font-weight: var(--nexpro-font-weight-semibold);
}

.dashboard-desktop__metrics[b-vgnvxiaav7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    flex-shrink: 0;
}

.dashboard-desktop__metrics[b-vgnvxiaav7]  .kpi-card-root {
    min-height: 5.25rem;
}

.dashboard-desktop__averages[b-vgnvxiaav7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.dashboard-desktop__average[b-vgnvxiaav7] {
    min-width: 0;
    border-right: 1px solid var(--nexpro-border-color);
}

.dashboard-desktop__average:last-child[b-vgnvxiaav7] {
    border-right: none;
}

.dashboard-desktop__average[b-vgnvxiaav7]  .average-metric-card {
    height: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0.85rem 1.25rem;
}

.dashboard-desktop__charts[b-vgnvxiaav7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.dashboard-desktop__charts .chart-card[b-vgnvxiaav7] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* con los chips del toggle el header entra en una sola línea (toggle a la
   izquierda, período a la derecha); apilado en columna regalaba un renglón */
.dashboard-desktop__charts .chart-card__header[b-vgnvxiaav7] {
    align-items: center;
    flex-direction: row;
    flex-shrink: 0;
}

/* Altura fija del canvas en desktop. Antes estiraba con flex:1 y quedaba
   gigantesco en monitores 1080p / 1440p. */
.dashboard-desktop__charts .chart-container[b-vgnvxiaav7] {
    height: 15rem;
}

.dashboard-panel[b-vgnvxiaav7] {
    background: var(--nexpro-bg-card);
    border-radius: var(--nexpro-border-radius-xl);
    box-shadow: var(--nexpro-shadow-sm);
    border: 1px solid var(--nexpro-surface-border-subtle);
}

.chart-card[b-vgnvxiaav7] {
    padding: var(--nexpro-spacing-md);
}

.chart-card__header[b-vgnvxiaav7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nexpro-spacing-md);
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.chart-card__title[b-vgnvxiaav7] {
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--nexpro-spacing-sm);
    min-width: 0;
    font-size: var(--nexpro-font-size-lg);
    font-weight: var(--nexpro-font-weight-bold);
}

.chart-card__period[b-vgnvxiaav7] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: var(--nexpro-border-radius-full);
    background: var(--nexpro-bg-hover);
    color: var(--nexpro-text-secondary);
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-semibold);
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 100%;
}

/* toggle km/horas motor y combustible/ralentí dentro de cada card de gráfico:
   las 4 series entran en las 2 cards de siempre, sin agregar alto al dashboard */
.chart-card__toggle[b-vgnvxiaav7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: var(--nexpro-border-radius-full);
    background: var(--nexpro-surface-alt, rgba(var(--nexpro-primary-rgb), 0.06));
    border: 1px solid var(--nexpro-border, rgba(var(--nexpro-primary-rgb), 0.14));
    flex-wrap: wrap;
}

.chart-card__toggle-btn[b-vgnvxiaav7] {
    appearance: none;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--nexpro-text-secondary, #5b6472);
    font-size: var(--nexpro-font-size-sm, 0.85rem);
    font-weight: var(--nexpro-font-weight-semibold, 600);
    line-height: 1.2;
    padding: 0.35rem 0.8rem;
    border-radius: var(--nexpro-border-radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

    .chart-card__toggle-btn i[b-vgnvxiaav7] {
        font-size: 0.85rem;
        line-height: 1;
    }

    .chart-card__toggle-btn:hover:not(.is-active)[b-vgnvxiaav7] {
        background: rgba(var(--nexpro-primary-rgb), 0.08);
        color: var(--nexpro-text-primary);
    }

    .chart-card__toggle-btn.is-active[b-vgnvxiaav7] {
        background: var(--nexpro-primary);
        color: #fff;
        box-shadow: 0 1px 2px rgba(var(--nexpro-primary-rgb), 0.25);
    }

.nexpro-select-sm[b-vgnvxiaav7] {
    border: 1px solid transparent !important;
    background-color: var(--nexpro-bg-hover) !important;
    color: var(--nexpro-text-secondary) !important;
    font-weight: var(--nexpro-font-weight-semibold);
    font-size: 0.8rem;
    border-radius: var(--nexpro-border-radius-md);
    padding: 0.35rem 2rem 0.35rem 0.75rem;
    box-shadow: none !important;
}

.chart-container[b-vgnvxiaav7] {
    position: relative;
    height: 260px;
    width: 100%;
}

/* ============================================================
   Scoring corporativo: barra entre los KPIs y los gráficos.
   Va con 15 días (distinto al resto) => chip aparte.
   ============================================================ */
.dashboard-desktop__scoring-bar[b-vgnvxiaav7] {
    display: flex;
    align-items: center;
    gap: var(--nexpro-spacing-md);
    padding: 0.6rem 1.25rem;
    flex-shrink: 0;
    background: linear-gradient(
        135deg,
        var(--nexpro-bg-card) 0%,
        rgba(var(--nexpro-primary-rgb), 0.06) 100%
    );
    border: 1px solid var(--nexpro-surface-border-subtle);
}

.scoring-bar__info[b-vgnvxiaav7] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
    min-width: 0;
}

.scoring-bar__icon[b-vgnvxiaav7] {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--nexpro-border-radius-lg);
    background: rgba(var(--nexpro-primary-rgb), 0.12);
    color: var(--nexpro-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.scoring-bar__text[b-vgnvxiaav7] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.scoring-bar__label[b-vgnvxiaav7] {
    font-size: 0.95rem;
    font-weight: var(--nexpro-font-weight-bold);
    color: var(--nexpro-text-primary);
    line-height: 1.2;
}

.scoring-bar__description[b-vgnvxiaav7] {
    font-size: 0.78rem;
    color: var(--nexpro-text-secondary);
    line-height: 1.3;
}

.scoring-bar__value[b-vgnvxiaav7] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-shrink: 0;
}

.scoring-bar__number[b-vgnvxiaav7] {
    font-size: 1.9rem;
    font-weight: var(--nexpro-font-weight-bold);
    color: var(--nexpro-text-primary);
    line-height: 1;
    letter-spacing: -0.01em;
}

.scoring-bar__unit[b-vgnvxiaav7] {
    font-size: 0.85rem;
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-secondary);
}

.scoring-bar__no-data[b-vgnvxiaav7] {
    font-size: 0.9rem;
    color: var(--nexpro-text-secondary);
    font-style: italic;
}

/* Chip de riesgo del scoring (verde/amarillo/rojo). La idea es que se parezca
   al de producción pero con la paleta del theme Nexpro. Va al lado del número. */
.scoring-risk-chip[b-vgnvxiaav7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.6rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    align-self: center;
}

.scoring-risk-chip--low[b-vgnvxiaav7] {
    background: rgba(25, 135, 84, 0.14);
    color: #146c43;
    border-color: rgba(25, 135, 84, 0.35);
}

.scoring-risk-chip--medium[b-vgnvxiaav7] {
    background: rgba(255, 193, 7, 0.18);
    color: #8a6400;
    border-color: rgba(255, 193, 7, 0.45);
}

.scoring-risk-chip--high[b-vgnvxiaav7] {
    background: rgba(220, 53, 69, 0.14);
    color: #b02a37;
    border-color: rgba(220, 53, 69, 0.4);
}

.scoring-bar__period[b-vgnvxiaav7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--nexpro-bg-card);
    color: var(--nexpro-text-secondary);
    font-size: 0.78rem;
    font-weight: var(--nexpro-font-weight-semibold);
    border: 1px solid var(--nexpro-border-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.scoring-bar__period i[b-vgnvxiaav7] {
    color: var(--nexpro-primary);
    font-size: 0.9rem;
    line-height: 1;
}

.dashboard-desktop__scoring-bar--mobile[b-vgnvxiaav7] {
    flex-wrap: wrap;
    row-gap: 0.6rem;
}

/* Mobile: va armado aparte porque la referencia cambia bastante. */
.dashboard-mobile[b-vgnvxiaav7] {
    display: none;
}

.dashboard-mobile__intro[b-vgnvxiaav7] {
    margin-bottom: var(--nexpro-spacing-xl);
}

.dashboard-mobile__title[b-vgnvxiaav7] {
    margin: 0 0 var(--nexpro-spacing-sm);
    font-size: clamp(2rem, 7vw, 2.4rem);
    font-weight: var(--nexpro-font-weight-bold);
    color: var(--nexpro-text-primary);
}

.dashboard-mobile__updated[b-vgnvxiaav7] {
    margin: 0;
    color: var(--nexpro-text-secondary);
    font-size: var(--nexpro-font-size-sm);
}

.dashboard-mobile__section[b-vgnvxiaav7] {
    margin-bottom: var(--nexpro-spacing-xl);
}

.dashboard-mobile__section-label[b-vgnvxiaav7] {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--nexpro-text-secondary);
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-mobile__carousel[b-vgnvxiaav7] {
    display: grid;
    grid-auto-flow: column;
    /* Cada slide mide menos que el viewport así se "asoma" el próximo y se
       entiende que hay más para scrollear. Antes era 84% y quedaba gigante. */
    grid-auto-columns: clamp(13rem, 72%, 18rem);
    gap: var(--nexpro-spacing-md);
    overflow-x: auto;
    padding-bottom: var(--nexpro-spacing-xs);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Que no se desborde del contenedor padre (dashboard-mobile). */
    max-width: 100%;
    min-width: 0;
}

.dashboard-mobile__carousel[b-vgnvxiaav7]::-webkit-scrollbar {
    display: none;
}

.dashboard-mobile__carousel-item[b-vgnvxiaav7] {
    scroll-snap-align: start;
}

.dashboard-mobile__carousel-item--metric[b-vgnvxiaav7]  .kpi-card-root,
.dashboard-mobile__carousel-item--average[b-vgnvxiaav7]  .average-metric-card {
    min-height: 100%;
}

.dashboard-mobile__carousel-item--chart[b-vgnvxiaav7] {
    min-height: 19rem;
}

.dashboard-mobile__chart-card[b-vgnvxiaav7] {
    height: 100%;
}

.dashboard-mobile__chart-container[b-vgnvxiaav7] {
    position: relative;
    height: 16rem;
}

@media (max-width: 1199px) {
    .dashboard-desktop__metrics[b-vgnvxiaav7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-desktop__averages[b-vgnvxiaav7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chart-card__header[b-vgnvxiaav7] {
        align-items: flex-start;
        flex-direction: column;
    }

    .chart-card__period[b-vgnvxiaav7] {
        align-self: flex-start;
    }
}

@media (max-width: 767px) {
    .dashboard-desktop[b-vgnvxiaav7] {
        display: none;
    }

    .dashboard-days-selector[b-vgnvxiaav7] {
        padding: 0.2rem;
        gap: 0.15rem;
        /* Que no se pase del ancho de pantalla si el idioma mete chips más largos. */
        max-width: 100%;
    }

    .dashboard-days-selector__icon[b-vgnvxiaav7] {
        font-size: 0.85rem;
        padding-left: 0.4rem;
    }

    .dashboard-days-selector__chip[b-vgnvxiaav7] {
        font-size: 0.72rem;
        padding: 0.28rem 0.55rem;
    }

    .dashboard-mobile[b-vgnvxiaav7] {
        display: block;
        max-width: 32rem;
        width: 100%;
        /* Blindaje: el contenedor del dashboard mobile nunca se debe pasar del
           ancho de la pantalla, solo se scrollean los carruseles internos. */
        min-width: 0;
        margin: 0 auto;
        padding: 0 var(--nexpro-spacing-sm) var(--nexpro-spacing-2xl);
    }

    .dashboard-mobile__section[b-vgnvxiaav7] {
        min-width: 0;
    }

    .dashboard-toolbar[b-vgnvxiaav7] {
        padding: 0.75rem;
        margin-bottom: var(--nexpro-spacing-md);
        border-radius: var(--nexpro-border-radius-xl);
    }

    .dashboard-toolbar__content[b-vgnvxiaav7] {
        align-items: stretch;
        gap: var(--nexpro-spacing-md);
    }

    .dashboard-toolbar__group[b-vgnvxiaav7] {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--nexpro-spacing-sm);
    }

    .dashboard-toolbar__chip[b-vgnvxiaav7] {
        white-space: nowrap;
        min-height: 2.55rem;
        padding-inline: 0.55rem;
        text-align: center;
        font-size: 0.82rem;
    }

    .dashboard-toolbar__group .dashboard-toolbar__chip:last-child[b-vgnvxiaav7] {
        grid-column: 1 / -1;
    }

    .chart-card__header[b-vgnvxiaav7] {
        align-items: flex-start;
        flex-direction: column;
    }

    .chart-card__title[b-vgnvxiaav7] {
        font-size: var(--nexpro-font-size-base);
    }

    .dashboard-mobile__section[b-vgnvxiaav7] {
        margin-bottom: var(--nexpro-spacing-lg);
    }

    .dashboard-mobile__section-label[b-vgnvxiaav7] {
        margin-bottom: 0.65rem;
    }

    .dashboard-mobile__carousel[b-vgnvxiaav7] {
        /* En mobile las cards deben ser más chicas: ancho "contenido" con un
           tope máximo para que no se estiren de más. Si el número es largo
           el valor baja de línea (ver reglas de .metric-value más abajo). */
        grid-auto-columns: clamp(12rem, 68%, 16rem);
        gap: 0.85rem;
        padding-right: var(--nexpro-spacing-md);
        padding-bottom: 0.3rem;
    }

    /* Que los carousels de charts no se achiquen: los gráficos necesitan ancho. */
    .dashboard-mobile__carousel--charts[b-vgnvxiaav7] {
        grid-auto-columns: clamp(16rem, 88%, 22rem);
    }

    .dashboard-desktop__scoring-bar--mobile[b-vgnvxiaav7] {
        padding: 0.85rem 1rem;
        gap: 0.75rem;
        /* Pase lo que pase, no debe salirse del ancho del contenedor mobile. */
        max-width: 100%;
        min-width: 0;
    }

    .dashboard-desktop__scoring-bar--mobile .scoring-bar__info[b-vgnvxiaav7] {
        /* Que el bloque de info (icono + textos) ocupe toda la fila y el
           valor + chip se vayan a la fila siguiente. Antes convivían en una
           sola línea y el "196,6 %" + "Riesgo medio" se salía a la derecha. */
        flex: 1 1 100%;
        min-width: 0;
    }

    .dashboard-desktop__scoring-bar--mobile .scoring-bar__value[b-vgnvxiaav7] {
        /* Fila completa debajo del info; centrado para que visualmente quede
           como "etiqueta arriba + número + chip abajo". */
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
    }

    .dashboard-desktop__scoring-bar--mobile .scoring-bar__number[b-vgnvxiaav7] {
        font-size: 1.6rem;
    }

    .dashboard-desktop__scoring-bar--mobile .scoring-risk-chip[b-vgnvxiaav7] {
        /* En mobile usamos gap del padre, no margin-left, así si el chip cae a
           la línea siguiente queda alineado sin salirse. */
        margin-left: 0;
    }

    .dashboard-desktop__scoring-bar--mobile .scoring-bar__period[b-vgnvxiaav7] {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .dashboard-desktop__scoring-bar--mobile .scoring-bar__description[b-vgnvxiaav7] {
        display: none;
    }
}

@media (min-width: 768px) {
    .dashboard-mobile[b-vgnvxiaav7] {
        display: none;
    }
}

[b-vgnvxiaav7] .text-primary {
    color: var(--nexpro-brand-primary) !important;
}

[b-vgnvxiaav7] .spinner-border.text-primary {
    color: var(--nexpro-brand-primary) !important;
}
/* _content/NexproConnect.Web.Server/Pages/Desempeño.razor.rz.scp.css */
/* La pantalla no se encierra en el alto de la ventana: con el encabezado, los filtros
   y los marcos de la tarjeta, en un monitor de 743px de alto a la tabla le quedaban
   tres filas. Scrollea la página, que es lo que el usuario espera, y ampliar esconde
   lo de arriba para llegar antes a los datos. */
.desempeno-shell[b-msamhiqex3] {
    display: flex;
    flex-direction: column;
}
/* _content/NexproConnect.Web.Server/Pages/DesempeñoConduccion.razor.rz.scp.css */
/* La grilla ocupa el alto que queda y scrollea adentro: los KPI y el encabezado de
   la tabla quedan fijos. */
.conduccion-grilla[b-4sd253qb84] {
    /* Sin alto propio: la tabla se dibuja entera y scrollea la página. En bloque, y no
       en flex, porque NcDataTable se estira para llenar a su padre y sin alto definido
       se achicaba a cero. */
    display: block;
}

/* Ampliada no cambia el alto de la tarjeta: esconde los KPI y la distribución para
   acercar la tabla al borde de arriba. */
.conduccion-grilla--amplia[b-4sd253qb84] {
    margin-top: 0;
}

/* Son nueve columnas: en pantallas angostas no entran y se scrollea en horizontal
   en vez de perderlas. */
.conduccion-grilla[b-4sd253qb84]  .nc-datatable__scroll {
    /* Solo para el desborde horizontal: el alto lo da el contenido, así no queda un
       scroll adentro de otro. */
    overflow-x: auto;
    flex: none;
}

/* Apilada en tarjetas no hay nada que scrollear adentro: con alto fijo quedaban dos
   scrolls anidados. */
@media (max-width: 768px) {
    .conduccion-grilla[b-4sd253qb84],
    .conduccion-grilla--amplia[b-4sd253qb84] {
        max-height: none;
        height: auto;
    }

    .conduccion-grilla[b-4sd253qb84]  .nc-datatable__scroll {
        max-height: none;
        overflow: visible;
    }
}
/* _content/NexproConnect.Web.Server/Pages/DesempeñoConsumo.razor.rz.scp.css */
/* La grilla ocupa el alto que queda y scrollea adentro: los KPI y el encabezado
   de la tabla quedan fijos, y el pie de totales sigue pegado abajo. */
.consumo-grilla[b-bhcyremia5] {
    /* Sin alto propio: la tabla se dibuja entera y scrollea la página. En bloque, y no
       en flex, porque NcDataTable se estira para llenar a su padre y sin alto definido
       se achicaba a cero. */
    display: block;
}

/* Ampliada no cambia el alto de la tarjeta: esconde los KPI y la distribución para
   acercar la tabla al borde de arriba. */
.consumo-grilla--amplia[b-bhcyremia5] {
    margin-top: 0;
}

/* Son nueve columnas numéricas: en pantallas angostas no entran y NcDataTable
   recorta en horizontal por defecto. Acá se scrollea en vez de perderlas. */
.consumo-grilla[b-bhcyremia5]  .nc-datatable__scroll {
    /* Solo para el desborde horizontal: el alto lo da el contenido, así no queda un
       scroll adentro de otro. */
    overflow-x: auto;
    flex: none;
}

/* Apilada en tarjetas no hay nada que scrollear adentro: con alto fijo quedaban
   dos scrolls anidados. */
@media (max-width: 768px) {
    .consumo-grilla[b-bhcyremia5],
    .consumo-grilla--amplia[b-bhcyremia5] {
        max-height: none;
        height: auto;
    }

    .consumo-grilla[b-bhcyremia5]  .nc-datatable__scroll {
        max-height: none;
        overflow: visible;
    }
}
/* _content/NexproConnect.Web.Server/Pages/DiscoDiagrama.razor.rz.scp.css */
/* Disco diagrama — layout y detalle; tokens globales en variables.css / nexpro-theme.css */

.disco-page[b-ugb42q6fad] {
    /* Un solo gutter para KPIs, grafico y lateral: el sm se lee parejo en horizontal y vertical. */
    --disco-gap: var(--nexpro-spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--disco-gap);
    max-width: 100%;
    min-height: 100%;
}

.disco-date-sep[b-ugb42q6fad] {
    margin: 0 0.35rem;
    color: var(--nexpro-text-muted);
}

.disco-plate-badge[b-ugb42q6fad] {
    display: inline-flex;
    align-items: center;
    max-width: min(100%, 20rem);
    padding: 0.35rem 0.85rem;
    border-radius: var(--nexpro-border-radius-full);
    background: var(--nexpro-primary-lighter);
    color: var(--nexpro-primary);
    font-size: var(--nexpro-font-size-sm);
    font-weight: var(--nexpro-font-weight-bold);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
}

.disco-plate-badge--loading[b-ugb42q6fad] {
    background: var(--nexpro-gray-100);
    min-height: 1.75rem;
}

/* Barra de filtros: alinear controles con Seguimiento */
.disco-toolbar.nc-filter-bar[b-ugb42q6fad] {
    align-items: flex-end;
    flex-shrink: 0;
}

.disco-toolbar .nc-filter-group--date[b-ugb42q6fad] {
    flex: 0 1 220px;
    min-width: 160px;
}

.disco-toolbar__actions[b-ugb42q6fad] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexpro-spacing-sm);
    align-items: center;
}

.disco-mode[b-ugb42q6fad] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    margin-bottom: var(--nexpro-spacing-xs);
    font-size: var(--nexpro-font-size-sm);
    color: var(--nexpro-text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.disco-mode input[type="checkbox"][b-ugb42q6fad] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--nexpro-primary);
    cursor: pointer;
}

.disco-filter-mode[b-ugb42q6fad] {
    flex: 0 1 auto;
    min-width: 0;
}

.disco-filter-mode__spacer[b-ugb42q6fad] {
    visibility: hidden;
    margin-bottom: var(--nexpro-spacing-xs);
    min-height: 1rem;
    user-select: none;
}

/* KPIs */
.disco-metrics[b-ugb42q6fad] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--disco-gap);
}

/*
 * Grafico + lateral. Las dos columnas comparten alto (align-items por defecto:
 * stretch) para que sus bordes inferiores coincidan; el contenedor del grafico
 * absorbe el sobrante cuando el lateral es mas alto.
 */
.disco-main[b-ugb42q6fad] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: var(--disco-gap);
}

@media (max-width: 1100px) {
    .disco-main[b-ugb42q6fad] {
        grid-template-columns: 1fr;
    }
}

.disco-chart-block[b-ugb42q6fad] {
    display: flex;
    flex-direction: column;
}

/*
 * flex-grow con min-height de piso: el alto sale del layout y no del canvas,
 * asi Chart.js no entra en el bucle de crecer contenedor -> crecer canvas.
 */
.disco-chart-block .nc-chart-container[b-ugb42q6fad] {
    flex: 1 1 auto;
    height: auto;
    min-height: min(44vh, 400px);
}

/* Aclara que el grafico esta decimado y no muestra un punto por muestra */
.disco-chart-foot[b-ugb42q6fad] {
    margin: 0;
    padding: 0 var(--nexpro-spacing-md) var(--nexpro-spacing-sm);
    font-size: var(--nexpro-font-size-xs);
    color: var(--nexpro-text-muted);
    text-align: end;
}

.disco-chart-foot__sep[b-ugb42q6fad] {
    margin: 0 0.35rem;
    color: var(--nexpro-text-muted);
}

.disco-chart-zoom-hint[b-ugb42q6fad] {
    color: var(--nexpro-text-secondary);
}

.disco-chart-tools[b-ugb42q6fad] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nexpro-spacing-sm);
    margin-left: auto;
}

.disco-chart-zoom-reset[b-ugb42q6fad] {
    white-space: nowrap;
    padding: 0.3rem 0.65rem;
    font-size: var(--nexpro-font-size-xs);
}

/* Cursor de interaccion dentro de la card del grafico */
.disco-chart-canvas-wrap[b-ugb42q6fad] {
    cursor: grab;
    touch-action: none;
}

.disco-chart-canvas-wrap:active[b-ugb42q6fad] {
    cursor: grabbing;
}

.disco-aside[b-ugb42q6fad] {
    display: flex;
    flex-direction: column;
    gap: var(--disco-gap);
    min-width: 0;
}

/* Tarjetas de detalle (unidad / conductores) */
.disco-detail-card[b-ugb42q6fad] {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.disco-detail-card__head[b-ugb42q6fad] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nexpro-spacing-sm);
    padding: var(--nexpro-spacing-md);
    border-bottom: 1px solid var(--nexpro-border-color);
    background: var(--nexpro-gray-50);
}

.disco-detail-card__head .nc-section-title[b-ugb42q6fad] {
    color: var(--nexpro-text-primary);
}

.disco-detail-card__count[b-ugb42q6fad] {
    flex-shrink: 0;
    min-width: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--nexpro-border-radius-full);
    background: var(--nexpro-primary-lighter);
    color: var(--nexpro-primary);
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-bold);
    text-align: center;
}

.disco-dl[b-ugb42q6fad] {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    margin: 0;
    padding: 0 var(--nexpro-spacing-md) var(--nexpro-spacing-sm);
    gap: 0;
}

.disco-dl dt[b-ugb42q6fad],
.disco-dl dd[b-ugb42q6fad] {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--nexpro-surface-border-subtle);
    margin: 0;
    font-size: var(--nexpro-font-size-sm);
    line-height: 1.4;
}

.disco-dl dt:last-of-type[b-ugb42q6fad],
.disco-dl dd:last-of-type[b-ugb42q6fad] {
    border-bottom: none;
}

.disco-dl dt[b-ugb42q6fad] {
    color: var(--nexpro-text-secondary);
    font-weight: var(--nexpro-font-weight-semibold);
    padding-right: var(--nexpro-spacing-sm);
}

.disco-dl dd[b-ugb42q6fad] {
    color: var(--nexpro-text-primary);
    font-weight: var(--nexpro-font-weight-medium);
    text-align: end;
    word-break: break-word;
}

.disco-drivers[b-ugb42q6fad] {
    padding: var(--nexpro-spacing-xs) 0 var(--nexpro-spacing-sm);
}

.disco-driver[b-ugb42q6fad] {
    display: flex;
    gap: var(--nexpro-spacing-sm);
    padding: var(--nexpro-spacing-sm) var(--nexpro-spacing-md);
    border-bottom: 1px solid var(--nexpro-surface-border-subtle);
}

.disco-driver:last-child[b-ugb42q6fad] {
    border-bottom: none;
}

.disco-driver__num[b-ugb42q6fad] {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-bold);
    background: var(--nexpro-primary-lighter);
    color: var(--nexpro-primary);
}

.disco-driver__body[b-ugb42q6fad] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.disco-driver__name[b-ugb42q6fad] {
    font-size: var(--nexpro-font-size-sm);
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tramo horario en el que ese conductor estuvo al mando */
.disco-driver__span[b-ugb42q6fad] {
    font-size: var(--nexpro-font-size-xs);
    color: var(--nexpro-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.disco-driver__meta[b-ugb42q6fad] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    margin-top: 0.1rem;
}

.disco-driver__key[b-ugb42q6fad] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-secondary);
    font-variant-numeric: tabular-nums;
}

.disco-driver__points[b-ugb42q6fad] {
    font-size: var(--nexpro-font-size-xs);
    color: var(--nexpro-text-muted);
}

/* Tramos sin conductor logueado: presentes pero sin destacar */
.disco-driver--anon .disco-driver__num[b-ugb42q6fad] {
    background: var(--nexpro-gray-100);
    color: var(--nexpro-text-muted);
}

.disco-driver--anon .disco-driver__name[b-ugb42q6fad] {
    color: var(--nexpro-text-secondary);
    font-style: italic;
    font-weight: var(--nexpro-font-weight-medium);
}

/* Skeleton */
.disco-skel[b-ugb42q6fad] {
    display: block;
    border-radius: var(--nexpro-border-radius-md);
    background: linear-gradient(
        90deg,
        var(--nexpro-gray-100) 25%,
        var(--nexpro-gray-200) 50%,
        var(--nexpro-gray-100) 75%
    );
    background-size: 200% 100%;
    animation: disco-skel-shimmer-b-ugb42q6fad 1.4s ease-in-out infinite;
}

@keyframes disco-skel-shimmer-b-ugb42q6fad {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.disco-skel--label[b-ugb42q6fad] {
    height: 0.65rem;
    width: 70%;
}

.disco-skel--value[b-ugb42q6fad] {
    height: 1.35rem;
    width: 55%;
}

[data-theme="dark"] .disco-skel[b-ugb42q6fad] {
    background: linear-gradient(
        90deg,
        var(--nexpro-gray-800) 25%,
        var(--nexpro-gray-700) 50%,
        var(--nexpro-gray-800) 75%
    );
    background-size: 200% 100%;
}

[data-theme="dark"] .disco-detail-card__head[b-ugb42q6fad] {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: var(--nexpro-gray-700);
}

[data-theme="dark"] .disco-dl dt[b-ugb42q6fad],
[data-theme="dark"] .disco-dl dd[b-ugb42q6fad],
[data-theme="dark"] .disco-driver[b-ugb42q6fad] {
    border-bottom-color: var(--nexpro-gray-700);
}

[data-theme="dark"] .nc-entity[b-ugb42q6fad],
[data-theme="dark"] .disco-mode-tag[b-ugb42q6fad],
[data-theme="dark"] .disco-driver--anon .disco-driver__num[b-ugb42q6fad] {
    background: var(--nexpro-gray-800);
}

/* Movil */
@media (max-width: 640px) {
    .disco-page[b-ugb42q6fad] {
        overflow-x: hidden;
    }

    .disco-date-line[b-ugb42q6fad] {
        white-space: normal;
    }

    .disco-toolbar.nc-filter-bar[b-ugb42q6fad] {
        align-items: stretch;
    }

    .disco-toolbar__actions[b-ugb42q6fad] {
        width: 100%;
    }

    .disco-toolbar__actions .nc-btn[b-ugb42q6fad] {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/*
 * Impresion: dos hojas A4 apaisadas.
 *   1) Grafico solo, centrado, eje de tiempo a todo el ancho.
 *   2) Titulo, KPIs, unidad y conductores juntos (no un recorte de la 1).
 */
@media print {
    .disco-toolbar[b-ugb42q6fad],
    .nc-back[b-ugb42q6fad],
    .disco-chart-foot[b-ugb42q6fad],
    .disco-chart-tools[b-ugb42q6fad] {
        display: none !important;
    }

    .disco-page[b-ugb42q6fad] {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        min-height: 0;
        font-size: 9pt;
    }

    .disco-main[b-ugb42q6fad] {
        display: contents !important;
    }

    /*
     * Hoja 1: el gráfico ocupa casi todo el A4 apaisado y queda centrado
     * en vertical. 186 mm es el alto útil con @page margin 12 mm; un poco
     * menos en el canvas para que Chrome no parta las horas del eje X.
     */
    .disco-chart-block[b-ugb42q6fad] {
        order: -1;
        break-after: page;
        page-break-after: always;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        width: 100% !important;
        height: 186mm !important;
        max-height: 186mm !important;
        min-height: 186mm !important;
        padding: 8mm 6mm !important;
        box-sizing: border-box !important;
        border: none !important;
        box-shadow: none !important;
        overflow: hidden;
    }

    .disco-chart-block .nc-chart-container[b-ugb42q6fad] {
        flex: 0 0 158mm !important;
        height: 158mm !important;
        max-height: 158mm !important;
        min-height: 158mm !important;
        width: 100% !important;
        overflow: visible;
    }

    .disco-chart-block .nc-chart-card__header[b-ugb42q6fad] {
        flex: 0 0 auto;
        margin-bottom: 2mm !important;
        justify-content: center;
    }

    .disco-chart-block .nc-chart-card__header .nc-badge[b-ugb42q6fad] {
        display: none !important;
    }

    .nc-chart-card__title[b-ugb42q6fad] {
        font-size: 13pt !important;
    }

    /* Hoja 2: toda la data, con aire */
    .disco-page .nc-page-header[b-ugb42q6fad] {
        order: 2;
        break-before: page;
        page-break-before: always;
        margin-bottom: 5mm;
        gap: 5mm;
    }

    .disco-page .nc-page-header__lead[b-ugb42q6fad] {
        gap: 5mm;
    }

    .disco-page .nc-page-title[b-ugb42q6fad] {
        font-size: 16pt !important;
    }

    .disco-date-line[b-ugb42q6fad] {
        margin-top: 1.5mm !important;
        font-size: 9pt;
    }

    .nc-entity[b-ugb42q6fad] {
        background: transparent !important;
        border: 1px solid #000;
        padding: 2mm 4mm;
        align-items: flex-end;
    }

    .nc-entity__label[b-ugb42q6fad] {
        color: #666 !important;
        font-size: 7pt;
    }

    .nc-entity__value[b-ugb42q6fad] {
        color: #000 !important;
        font-size: 12pt;
    }

    .disco-mode-tag[b-ugb42q6fad] {
        background: transparent !important;
        border: 1px solid #999;
        margin-left: 3mm;
        padding: 0.5mm 2.5mm;
        font-size: 8pt;
    }

    .disco-metrics[b-ugb42q6fad] {
        order: 3;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 5mm !important;
        margin-bottom: 5mm;
    }

    .disco-metrics .nc-kpi-tile[b-ugb42q6fad] {
        padding: 4mm 3.5mm !important;
        border-radius: 2mm !important;
    }

    .disco-metrics .nc-card-label[b-ugb42q6fad] {
        font-size: 7.5pt !important;
        margin-bottom: 1.5mm;
    }

    .disco-metrics .nc-kpi-tile__value[b-ugb42q6fad] {
        font-size: 16pt !important;
    }

    .disco-metrics .nc-kpi-tile__unit[b-ugb42q6fad] {
        font-size: 8pt !important;
    }

    .disco-aside[b-ugb42q6fad] {
        order: 4;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 5mm;
        width: 100%;
    }

    .disco-detail-card__head[b-ugb42q6fad] {
        background: transparent !important;
        padding: 3mm 4mm !important;
    }

    .disco-detail-card__head .nc-section-title[b-ugb42q6fad] {
        font-size: 11pt !important;
    }

    .disco-detail-card__count[b-ugb42q6fad] {
        padding: 0 1.5mm !important;
        font-size: 8pt !important;
    }

    .disco-dl[b-ugb42q6fad] {
        padding: 0 4mm 3mm !important;
    }

    .disco-dl dt[b-ugb42q6fad],
    .disco-dl dd[b-ugb42q6fad] {
        padding: 1.6mm 0 !important;
        font-size: 9pt !important;
        line-height: 1.35 !important;
    }

    .disco-drivers[b-ugb42q6fad] {
        padding: 0 0 2mm !important;
    }

    .disco-driver[b-ugb42q6fad] {
        gap: 3mm !important;
        padding: 2.5mm 4mm !important;
    }

    .disco-driver__num[b-ugb42q6fad] {
        width: 5mm;
        height: 5mm;
        font-size: 7pt;
    }

    .disco-driver__name[b-ugb42q6fad] {
        font-size: 10pt;
    }

    .disco-driver__span[b-ugb42q6fad],
    .disco-driver__meta[b-ugb42q6fad],
    .disco-driver__key[b-ugb42q6fad],
    .disco-driver__points[b-ugb42q6fad] {
        font-size: 8pt !important;
    }

    .disco-driver[b-ugb42q6fad],
    .disco-detail-card[b-ugb42q6fad] {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}
/* _content/NexproConnect.Web.Server/Pages/Legajos.razor.rz.scp.css */
/* Legajos: estilos a nivel de page shell, todo lo demas viene del UI kit global */
/* _content/NexproConnect.Web.Server/Pages/LegajosEmpresa.razor.rz.scp.css */
/* LegajosEmpresa: estilos a nivel de componente, todo lo demas viene del UI kit global */
/* _content/NexproConnect.Web.Server/Pages/LegajosUnidades.razor.rz.scp.css */
/* LegajosUnidades: estilos a nivel de componente, todo lo demas viene del UI kit global */
/* _content/NexproConnect.Web.Server/Pages/MetricCard.razor.rz.scp.css */

.kpi-card-root[b-h22ehqjt3w] {
    background-color: var(--nexpro-bg-card);
    border-radius: var(--nexpro-border-radius-lg);
    box-shadow: var(--nexpro-shadow-sm);
    border: 1px solid var(--nexpro-surface-border-subtle);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    min-height: 7.4rem;
}

.kpi-card-root.kpi-highlighted[b-h22ehqjt3w] {
    background-color: var(--nexpro-bg-card);
    border-color: rgba(20, 80, 255, 0.16);
}

.kpi-card-body[b-h22ehqjt3w] {
    display: flex;
    align-items: flex-start;
    min-height: 100%;
    padding: 1.15rem 1.25rem;
}

.kpi-copy[b-h22ehqjt3w] {
    justify-content: flex-start;
    gap: 0.48rem;
    /* flex-item con min-width:0 para que los hijos (número grande) puedan wrappear
       en vez de forzar que la card se estire y se salga del carrusel mobile. */
    min-width: 0;
    flex: 1 1 auto;
}


.kpi-icon-wrapper[b-h22ehqjt3w] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background-color: var(--nexpro-brand-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}

.kpi-icon-wrapper i[b-h22ehqjt3w] {
    font-size: 1.15rem;
    color: var(--nexpro-brand-primary);
    display: inline-block;
}


.kpi-card-root.kpi-highlighted .kpi-icon-wrapper[b-h22ehqjt3w] {
    background-color: var(--nexpro-brand-primary-soft);
}

.kpi-card-root.kpi-highlighted .kpi-icon-wrapper i[b-h22ehqjt3w] {
    color: var(--nexpro-brand-primary);
}


.metric-label[b-h22ehqjt3w] {
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    color: var(--nexpro-text-secondary);
}

.metric-value[b-h22ehqjt3w] {
    font-size: 1.65rem;
    color: var(--nexpro-text-primary);
    /* Si el número no entra, que se parta en otra línea en vez de cortarse
       o desbordar la card. "16.744" tiene que caber sí o sí. */
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
    line-height: 1.15;
}

.metric-sublabel[b-h22ehqjt3w] {
    font-size: 0.86rem;
    font-weight: var(--nexpro-font-weight-medium);
    color: var(--nexpro-text-secondary);
}

@media (max-width: 767px) {
    .kpi-card-root[b-h22ehqjt3w] {
        min-height: 6.85rem;
    }

    .kpi-card-body[b-h22ehqjt3w] {
        padding: 1rem 1.1rem;
    }

    .kpi-copy[b-h22ehqjt3w] {
        gap: 0.38rem;
    }

    /* El "d-flex align-items-baseline" de bootstrap trae nowrap por defecto;
       en mobile si el número es grande lo dejamos bajar a la línea siguiente. */
    .kpi-copy .d-flex[b-h22ehqjt3w] {
        flex-wrap: wrap;
        min-width: 0;
    }

    .metric-value[b-h22ehqjt3w] {
        font-size: 1.5rem;
    }
}
/* _content/NexproConnect.Web.Server/Pages/Reportes.razor.rz.scp.css */
/* Reportes: estilos a nivel de page shell, todo lo demas viene del UI kit global */
/* _content/NexproConnect.Web.Server/Pages/ReportesMapa.razor.rz.scp.css */
/* ReportesMapa: estilos a nivel de componente, todo lo demas viene del UI kit global */
/* _content/NexproConnect.Web.Server/Pages/Seguimiento.razor.rz.scp.css */
.tracking-shell[b-rqv9gfusg8] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nexpro-spacing-xl) * 2);
    overflow: hidden;
}

.tracking-filters[b-rqv9gfusg8] {
    flex-shrink: 0;
}

.tracking-layout[b-rqv9gfusg8] {
    flex: 1;
    display: flex;
    gap: var(--nexpro-spacing-md);
    min-height: 0;
}

.tracking-grid-panel[b-rqv9gfusg8] {
    flex: 1.3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--nexpro-bg-card);
    border-radius: var(--nexpro-border-radius-lg);
    border: var(--nexpro-border-width) solid var(--nexpro-border-color);
    overflow: hidden;
}

/* Modos de vista: ocultan el panel que no corresponde. Los botones del
   selector ahora los renderiza <NcViewToggle> (estilos en ese componente). */
.tracking-layout--table .tracking-map-panel[b-rqv9gfusg8] {
    display: none;
}

.tracking-layout--map .tracking-grid-panel[b-rqv9gfusg8] {
    display: none;
}

/* Botón flotante para volver a la vista dividida desde "solo mapa" */
.tracking-map-restore[b-rqv9gfusg8] {
    position: absolute;
    top: var(--nexpro-spacing-sm);
    right: var(--nexpro-spacing-sm);
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-semibold);
    background: var(--nexpro-bg-card);
    color: var(--nexpro-text-primary);
    border: var(--nexpro-border-width) solid var(--nexpro-border-color);
    border-radius: var(--nexpro-border-radius-md);
    box-shadow: var(--nexpro-shadow-md);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.tracking-map-restore:hover[b-rqv9gfusg8] {
    background: var(--nexpro-primary);
    color: #fff;
    border-color: var(--nexpro-primary);
}

/* La <table> la renderiza NcDataTable, así que llegamos con ::deep desde el panel. */
.tracking-grid-panel[b-rqv9gfusg8]  .tracking-table {
    table-layout: fixed;
    width: 100%;
}

.tracking-grid-panel[b-rqv9gfusg8]  .tracking-table thead th,
.tracking-grid-panel[b-rqv9gfusg8]  .tracking-table tbody td {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: var(--nexpro-font-size-xs);
    overflow: hidden;
    text-overflow: ellipsis;
}

.tracking-grid-panel[b-rqv9gfusg8]  .tracking-table tbody tr {
    cursor: pointer;
}

.tracking-grid-panel[b-rqv9gfusg8]  .tracking-cell-sm {
    font-size: 0.7rem;
}

.tracking-grid-panel[b-rqv9gfusg8]  .tracking-cell-strong {
    font-weight: var(--nexpro-font-weight-semibold);
}

.tracking-grid-panel[b-rqv9gfusg8]  .tracking-row--selected {
    background: color-mix(in srgb, var(--nexpro-primary) 8%, transparent) !important;
    border-left: 3px solid var(--nexpro-primary);
}

.tracking-map-panel[b-rqv9gfusg8] {
    flex: 1;
    position: relative;
    border-radius: var(--nexpro-border-radius-lg);
    overflow: hidden;
    border: var(--nexpro-border-width) solid var(--nexpro-border-color);
    min-width: 300px;
}

.tracking-map-inner[b-rqv9gfusg8] {
    height: 100%;
    min-height: 400px;
}

@media (max-width: 992px) {
    .tracking-shell[b-rqv9gfusg8] {
        height: auto;
        min-height: calc(100vh - 80px);
        overflow: visible;
    }

    .tracking-layout[b-rqv9gfusg8] {
        flex-direction: column;
    }

    /* Apilado el mapa va primero: la pregunta de esta pantalla es dónde están las
       unidades y eso se contesta de un vistazo; la lista es el detalle. Con el mapa
       arriba la lista tampoco necesita el tope de media pantalla que la mantenía
       visible, así que scrollea la página y no un panel adentro de otro. */
    .tracking-map-panel[b-rqv9gfusg8] {
        min-height: 300px;
        min-width: 0;
        order: 1;
    }

    .tracking-grid-panel[b-rqv9gfusg8] {
        max-height: none;
        flex: none;
        order: 2;
    }
}

/* Tablet: la tabla sigue siendo tabla, así que necesita ancho mínimo y scroll
   horizontal. Debajo de 768px NcDataTable la apila en tarjetas y el ancho
   mínimo sobra: dejaría la tarjeta más ancha que la pantalla. */
@media (min-width: 769px) and (max-width: 992px) {
    .tracking-grid-panel[b-rqv9gfusg8]  .nc-datatable__scroll {
        overflow-x: auto;
    }

    .tracking-grid-panel[b-rqv9gfusg8]  .tracking-table {
        table-layout: auto;
        width: auto;
        min-width: 600px;
    }

    .tracking-grid-panel[b-rqv9gfusg8]  .tracking-table thead th {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }
}

/* En tarjetas el valor va completo: los puntos suspensivos tenían sentido cuando
   competía por el ancho de una columna. */
@media (max-width: 768px) {
    .tracking-grid-panel[b-rqv9gfusg8]  .tracking-table tbody td {
        overflow: visible;
        text-overflow: clip;
        font-size: var(--nexpro-font-size-sm);
    }
}
/* _content/NexproConnect.Web.Server/Pages/Settings.razor.rz.scp.css */
.settings-shell[b-m5cqj8583n] {
    display: grid;
    gap: var(--nexpro-spacing-lg);
}

.settings-grid[b-m5cqj8583n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nexpro-spacing-md);
}

.settings-card[b-m5cqj8583n] {
    background: var(--nexpro-bg-card);
    border: 1px solid var(--nexpro-surface-border-subtle);
    border-radius: var(--nexpro-border-radius-xl);
    box-shadow: var(--nexpro-shadow-sm);
    padding: 1.25rem;
}

.settings-card--profile[b-m5cqj8583n] {
    grid-column: span 2;
}

.settings-card__header[b-m5cqj8583n] {
    display: flex;
    align-items: flex-start;
    gap: var(--nexpro-spacing-md);
    margin-bottom: var(--nexpro-spacing-lg);
}

.settings-card__icon[b-m5cqj8583n] {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.9rem;
    background: var(--nexpro-brand-primary-soft);
    color: var(--nexpro-brand-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.settings-card__title[b-m5cqj8583n] {
    margin: 0 0 0.3rem;
}

.settings-card__text[b-m5cqj8583n] {
    margin: 0;
    color: var(--nexpro-text-secondary);
    font-size: var(--nexpro-font-size-sm);
}

.settings-card__content[b-m5cqj8583n] {
    display: flex;
    align-items: center;
}

.settings-language[b-m5cqj8583n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexpro-spacing-sm);
}

.settings-language__option[b-m5cqj8583n] {
    display: inline-flex;
    align-items: center;
    gap: var(--nexpro-spacing-sm);
    min-height: 2.9rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--nexpro-border-color);
    border-radius: var(--nexpro-border-radius-full);
    background: var(--nexpro-bg-card);
    color: var(--nexpro-text-primary);
    font-size: var(--nexpro-font-size-sm);
    font-weight: var(--nexpro-font-weight-semibold);
    transition: all var(--nexpro-transition-fast);
}

.settings-language__option:hover[b-m5cqj8583n],
.settings-language__option.is-active[b-m5cqj8583n] {
    background: var(--nexpro-primary-lighter);
    border-color: rgba(20, 80, 255, 0.2);
    color: var(--nexpro-brand-primary);
}

.settings-language__code[b-m5cqj8583n] {
    min-width: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.45rem;
    border-radius: var(--nexpro-border-radius-full);
    background: var(--nexpro-brand-primary-soft);
    color: var(--nexpro-brand-primary);
    font-size: 0.72rem;
    font-weight: var(--nexpro-font-weight-bold);
    letter-spacing: 0.08em;
}

.settings-language__name[b-m5cqj8583n] {
    line-height: 1;
}

.settings-profile[b-m5cqj8583n] {
    display: flex;
    align-items: center;
    gap: var(--nexpro-spacing-md);
    margin-bottom: var(--nexpro-spacing-lg);
}

.settings-profile__avatar[b-m5cqj8583n] {
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nexpro-border-radius-full);
    background: var(--nexpro-brand-primary-soft);
    color: var(--nexpro-brand-primary);
    font-weight: var(--nexpro-font-weight-bold);
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.settings-profile__name[b-m5cqj8583n] {
    font-size: 1rem;
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-primary);
}

.settings-profile__email[b-m5cqj8583n] {
    font-size: var(--nexpro-font-size-sm);
    color: var(--nexpro-text-secondary);
}

.settings-data[b-m5cqj8583n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nexpro-spacing-sm);
}

.settings-data__item[b-m5cqj8583n] {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border-radius: var(--nexpro-border-radius-lg);
    background: var(--nexpro-bg-secondary);
}

.settings-data__label[b-m5cqj8583n] {
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nexpro-text-secondary);
}

.settings-data__value[b-m5cqj8583n] {
    font-size: var(--nexpro-font-size-base);
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-primary);
}

.settings-theme[b-m5cqj8583n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexpro-spacing-sm);
}

.settings-theme__option[b-m5cqj8583n] {
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--nexpro-border-color);
    border-radius: var(--nexpro-border-radius-full);
    background: var(--nexpro-bg-card);
    color: var(--nexpro-text-secondary);
    font-size: var(--nexpro-font-size-sm);
    font-weight: var(--nexpro-font-weight-semibold);
    transition: all var(--nexpro-transition-fast);
}

.settings-theme__option:hover[b-m5cqj8583n],
.settings-theme__option.is-active[b-m5cqj8583n] {
    background: var(--nexpro-primary-lighter);
    border-color: rgba(20, 80, 255, 0.2);
    color: var(--nexpro-brand-primary);
}

.settings-actions[b-m5cqj8583n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexpro-spacing-sm);
}

.settings-action[b-m5cqj8583n] {
    display: inline-flex;
    align-items: center;
    gap: var(--nexpro-spacing-sm);
    min-height: 2.75rem;
    padding: 0.7rem 1rem;
    border-radius: var(--nexpro-border-radius-lg);
    border: 1px solid var(--nexpro-border-color);
    background: var(--nexpro-bg-card);
    color: var(--nexpro-text-primary);
    text-decoration: none;
    font-size: var(--nexpro-font-size-sm);
    font-weight: var(--nexpro-font-weight-semibold);
    transition: all var(--nexpro-transition-fast);
}

.settings-action:hover[b-m5cqj8583n] {
    background: var(--nexpro-primary-lighter);
    border-color: rgba(20, 80, 255, 0.2);
    color: var(--nexpro-brand-primary);
}

.settings-action--danger[b-m5cqj8583n] {
    color: var(--nexpro-danger-text);
    border-color: rgba(220, 53, 69, 0.18);
}

.settings-action--danger:hover[b-m5cqj8583n] {
    background: var(--nexpro-danger-bg);
    border-color: rgba(220, 53, 69, 0.24);
    color: var(--nexpro-danger-text);
}

@media (max-width: 991px) {
    .settings-grid[b-m5cqj8583n] {
        grid-template-columns: 1fr;
    }

    .settings-card--profile[b-m5cqj8583n] {
        grid-column: span 1;
    }
}

@media (max-width: 767px) {
    .settings-data[b-m5cqj8583n] {
        grid-template-columns: 1fr;
    }
}
/* _content/NexproConnect.Web.Server/Shared/MainLayout.razor.rz.scp.css */
.page[b-ndxwjwkd9x] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ndxwjwkd9x] {
    flex: 1;
}

.sidebar[b-ndxwjwkd9x] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ndxwjwkd9x] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ndxwjwkd9x]  a, .top-row .btn-link[b-ndxwjwkd9x] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-ndxwjwkd9x] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-ndxwjwkd9x] {
        display: none;
    }

    .top-row.auth[b-ndxwjwkd9x] {
        justify-content: space-between;
    }

    .top-row a[b-ndxwjwkd9x], .top-row .btn-link[b-ndxwjwkd9x] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ndxwjwkd9x] {
        flex-direction: row;
    }

    .sidebar[b-ndxwjwkd9x] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ndxwjwkd9x] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-ndxwjwkd9x], article[b-ndxwjwkd9x] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* _content/NexproConnect.Web.Server/Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-pzghuaxx6y] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-pzghuaxx6y] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-pzghuaxx6y] {
    font-size: 1.1rem;
}

.oi[b-pzghuaxx6y] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-pzghuaxx6y] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-pzghuaxx6y] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-pzghuaxx6y] {
        padding-bottom: 1rem;
    }

    .nav-item[b-pzghuaxx6y]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-pzghuaxx6y]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-pzghuaxx6y]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-pzghuaxx6y] {
        display: none;
    }

    .collapse[b-pzghuaxx6y] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* _content/NexproConnect.Web.Server/Shared/NavMenuItem.razor.rz.scp.css */
/* ============================================================
   NavMenuItem — items del sidebar. El submenu ya NO se despliega
   inline: se abre en un panel flotante al costado (SidebarFlyout).
   ============================================================ */

.nexpro-nav-menu-item[b-35kqf0x7z8] {
    position: relative;
}

/* ── Item (NavLink o button) ───────────────────────────── */
.nexpro-nav-item[b-35kqf0x7z8] {
    display: flex;
    align-items: center;
    gap: var(--nexpro-spacing-md);
    padding: 0.8rem 0.95rem;
    border-radius: var(--nexpro-border-radius-md);
    color: var(--nexpro-text-primary);
    font-size: 0.88rem;
    font-weight: var(--nexpro-font-weight-medium);
    line-height: 1.3;
    letter-spacing: 0.005em;
    text-decoration: none !important;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    position: relative;
}

.nexpro-nav-item:hover[b-35kqf0x7z8] {
    background-color: var(--nexpro-bg-hover);
    color: var(--nexpro-text-primary);
}

.nexpro-nav-item:hover .nexpro-nav-icon[b-35kqf0x7z8] {
    color: var(--nexpro-brand-primary);
}

.nexpro-nav-item.active[b-35kqf0x7z8] {
    background-color: var(--nexpro-primary-lighter);
    color: var(--nexpro-brand-primary);
    font-weight: var(--nexpro-font-weight-semibold);
}

.nexpro-nav-item.active .nexpro-nav-icon[b-35kqf0x7z8] {
    color: var(--nexpro-brand-primary);
}

/* ── Estado cuando el flyout correspondiente esta abierto ─ */
.nexpro-nav-item--parent.is-flyout-open[b-35kqf0x7z8] {
    background-color: var(--nexpro-primary-lighter);
    color: var(--nexpro-brand-primary);
}

.nexpro-nav-item--parent.is-flyout-open .nexpro-nav-icon[b-35kqf0x7z8],
.nexpro-nav-item--parent.is-flyout-open .nexpro-nav-arrow[b-35kqf0x7z8] {
    color: var(--nexpro-brand-primary);
}

.nexpro-nav-item--parent.is-flyout-open .nexpro-nav-arrow[b-35kqf0x7z8] {
    transform: translateX(2px);
}

/* ── Icono (Bootstrap Icon) ────────────────────────────── */
.nexpro-nav-icon[b-35kqf0x7z8] {
    font-size: 1.1rem;
    line-height: 1;
    width: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nexpro-text-secondary);
    transition: color 0.15s ease;
    flex-shrink: 0;
}

/* ── Texto ─────────────────────────────────────────────── */
.nexpro-nav-text[b-35kqf0x7z8] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* ── Chevron indicador de "hay mas" ────────────────────── */
.nexpro-nav-arrow[b-35kqf0x7z8] {
    font-size: 0.8rem;
    line-height: 1;
    color: var(--nexpro-text-muted);
    transition: transform 0.18s ease, color 0.15s ease;
    flex-shrink: 0;
    opacity: 0.7;
}

.nexpro-nav-item--parent:hover .nexpro-nav-arrow[b-35kqf0x7z8] {
    color: var(--nexpro-brand-primary);
    opacity: 1;
    transform: translateX(2px);
}

/* Nota: las reglas de colapsado y responsive que dependen de
   .nexpro-sidebar-content (padre) se manejan en nexpro-theme.css para
   evitar problemas con el scoping CSS de Blazor. */