/* ============================================
   NEXPRO CONNECT - TEMA PRINCIPAL
   Estilos base y componentes principales
   ============================================ */
/* Los tokens los enlaza _Layout.cshtml con asp-append-version. Por @import no:
   esa URL no lleva versión, así que el navegador reusa la copia vieja y, al llegar
   después en el cascade, le gana a la del <link>. */

/* ===== RESET Y BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--nexpro-font-family);
    outline: none;
    scrollbar-width: thin;
    scrollbar-color: var(--nexpro-gray-300) transparent;
}

/* Scrollbars finas en todo el sistema (WebKit; Firefox usa las props de arriba). */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--nexpro-gray-300);
    border-radius: var(--nexpro-border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--nexpro-gray-400);
}

html, body {
    height: 100%;
    font-size: var(--nexpro-font-size-base);
    line-height: 1.5;
    background-color: var(--nexpro-bg-secondary);
    color: var(--nexpro-text-primary);
}

/* ===== TIPOGRAFÍA ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--nexpro-font-weight-semibold);
    line-height: 1.2;
    margin-bottom: var(--nexpro-spacing-md);
    color: var(--nexpro-text-primary);
}

h1 {
    font-size: var(--nexpro-font-size-4xl);
}

h2 {
    font-size: var(--nexpro-font-size-3xl);
}

h3 {
    font-size: var(--nexpro-font-size-2xl);
}

h4 {
    font-size: var(--nexpro-font-size-xl);
}

h5 {
    font-size: var(--nexpro-font-size-lg);
}

h6 {
    font-size: var(--nexpro-font-size-base);
}

p {
    margin-bottom: var(--nexpro-spacing-md);
}

/* ===== UI KIT: TIPOGRAFIA ===== */
.nc-page-title {
    font-family: var(--nexpro-font-family-condensed);
    font-size: var(--nexpro-type-page-title-size);
    font-weight: var(--nexpro-type-page-title-weight);
    letter-spacing: var(--nexpro-type-tight-tracking);
    line-height: 1.25;
}

.nc-section-title {
    font-size: var(--nexpro-type-section-title-size);
    font-weight: var(--nexpro-type-section-title-weight);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.nc-card-label {
    font-size: var(--nexpro-type-card-label-size);
    font-weight: var(--nexpro-type-card-label-weight);
    letter-spacing: var(--nexpro-type-eyebrow-spacing);
    text-transform: uppercase;
}

.nc-card-value {
    font-size: var(--nexpro-type-card-value-size);
    font-weight: var(--nexpro-type-card-value-weight);
    line-height: 1.1;
}

/* ===== LAYOUT PRINCIPAL ===== */
.nexpro-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.nexpro-sidebar {
    width: 280px;
    background-color: var(--nexpro-bg-sidebar);
    border-right: var(--nexpro-border-width) solid var(--nexpro-border-color);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: var(--nexpro-z-fixed);
    overflow: visible;
}

.nexpro-main {
    flex: 1;
    margin-left: 280px;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s ease;
    overflow-y: auto;
    min-height: 100vh;
}

.nexpro-content {
    flex: 1;
    padding: var(--nexpro-spacing-xl);
    background-color: var(--nexpro-bg-secondary);
}

.nexpro-mobile-topbar,
.nexpro-mobile-menu-btn,
.nexpro-mobile-backdrop {
    display: none;
}


body[data-sidebar-collapsed="true"] .nexpro-sidebar {
    width: 70px !important;
}

body[data-sidebar-collapsed="true"] .nexpro-main {
    margin-left: 70px !important;
}

body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-text,
body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-logo-img,
body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-logout-btn span {
    opacity: 0 !important;
    width: 0 !important;
    display: none !important;
}

body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-item,
body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-sidebar-logo {
    justify-content: center !important;
}

body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-icon,
body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-logout-icon {
    margin-right: 0 !important;
}

/* ===== HEADER ===== */
.nexpro-header {
    height: var(--nexpro-header-height);
    background-color: var(--nexpro-bg-primary);
    border-bottom: var(--nexpro-border-width) solid var(--nexpro-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--nexpro-spacing-xl);
    position: sticky;
    top: 0;
    z-index: var(--nexpro-z-sticky);
    box-shadow: var(--nexpro-shadow-sm);
}

/* ===== COMPONENTES COMUNES: CARDS ===== */
.nexpro-card {
    background-color: var(--nexpro-bg-card);
    border-radius: var(--nexpro-border-radius-lg);
    border: var(--nexpro-border-width) solid var(--nexpro-border-color);
    padding: var(--nexpro-spacing-lg);
    box-shadow: var(--nexpro-shadow-sm);
    transition: box-shadow var(--nexpro-transition-base), transform var(--nexpro-transition-base);
}

    .nexpro-card:hover {
        box-shadow: var(--nexpro-shadow-md);
    }

.nexpro-card-header {
    margin-bottom: var(--nexpro-spacing-md);
    padding-bottom: var(--nexpro-spacing-md);
    border-bottom: var(--nexpro-border-width) solid var(--nexpro-border-color);
}

/* ===== BOTONES ===== */
.nexpro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--nexpro-spacing-sm) var(--nexpro-spacing-lg);
    font-size: var(--nexpro-font-size-base);
    font-weight: var(--nexpro-font-weight-medium);
    border: var(--nexpro-border-width) solid transparent;
    border-radius: var(--nexpro-border-radius-md);
    cursor: pointer;
    transition: all var(--nexpro-transition-base);
    text-decoration: none;
}

.nexpro-btn-primary {
    background-color: var(--nexpro-primary);
    color: var(--nexpro-text-white);
}

    .nexpro-btn-primary:hover {
        background-color: var(--nexpro-primary-dark);
    }

/* ===== LOADING Y SPINNERS ===== */
.nexpro-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--nexpro-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--nexpro-z-loading);
}

    .nexpro-loading.hidden {
        display: none;
    }

.nexpro-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--nexpro-gray-200);
    border-top-color: var(--nexpro-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== MÓDULO DESEMPEÑO & REPORTES ===== */
.badge-estado {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--nexpro-border-radius-sm);
    font-weight: var(--nexpro-font-weight-bold);
    color: white;
}

.estado-a {
    background-color: var(--nexpro-score-a);
}

.estado-b {
    background-color: var(--nexpro-score-b);
}

.estado-c {
    background-color: var(--nexpro-score-c);
}

.estado-d {
    background-color: var(--nexpro-score-d);
}

.estado-e {
    background-color: var(--nexpro-score-e);
}

.tabla-header {
    background-color: var(--nexpro-bg-primary);
}

.tabla-body {
    border-top: var(--nexpro-border-width) solid var(--nexpro-border-color);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .nexpro-sidebar {
        transform: translateX(-100%);
        top: var(--nexpro-mobile-topbar-height);
        height: calc(100dvh - var(--nexpro-mobile-topbar-height));
        width: min(19rem, 86vw);
        background: var(--nexpro-bg-card);
        border-right: 1px solid var(--nexpro-border-color);
        box-shadow: var(--nexpro-shadow-xl);
        z-index: calc(var(--nexpro-z-fixed) + 2);
    }

    .nexpro-sidebar.mobile-open {
        transform: translateX(0);
    }

    body[data-sidebar-collapsed="true"] .nexpro-sidebar {
        width: min(19rem, 86vw) !important;
    }

    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-text,
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-logout-btn span {
        opacity: 1 !important;
        width: auto !important;
        display: inline !important;
    }

    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-item {
        justify-content: flex-start !important;
    }

    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-icon,
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-logout-icon {
        margin-right: var(--nexpro-spacing-md) !important;
    }

    /* El estado "plegada" vive en el body y sobrevive al cambio de tamaño. Hay que
       nombrar esa regla acá: es más específica y si no deja 70px de margen en
       mobile, con la barra ya invisible. */
    .nexpro-main,
    body[data-sidebar-collapsed="true"] .nexpro-main {
        margin-left: 0 !important;
    }

    .nexpro-content {
        /* Justo debajo del topbar fijo: el colchón extra que había acá se comía
           casi un centímetro de pantalla antes de que empezara el contenido. */
        padding: calc(var(--nexpro-mobile-topbar-height) + 0.35rem) 0.75rem 1.5rem;
    }

    /* El encabezado de página ocupa menos: en mobile el título va solo. */
    .nc-page-header {
        min-height: 0;
        padding-bottom: var(--nexpro-spacing-xs);
        margin-bottom: var(--nexpro-spacing-sm);
    }

    /* ── Containers que no deben limitar ancho en mobile ────── */
    .nc-page-shell,
    .tracking-shell,
    .nc-filter-bar,
    .tracking-grid-panel,
    .tracking-map-panel {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .nexpro-mobile-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--nexpro-mobile-topbar-height);
        padding: 0 var(--nexpro-spacing-md);
        background: var(--nexpro-bg-card);
        border-bottom: 1px solid var(--nexpro-border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: calc(var(--nexpro-z-fixed) + 3);
        box-shadow: var(--nexpro-shadow-sm);
    }

    .nexpro-mobile-topbar__logo-link {
        display: inline-flex;
        align-items: center;
        text-decoration: none !important;
    }

    .nexpro-mobile-topbar__logo {
        height: 1.8rem;
        width: auto;
        max-width: 8.5rem;
        object-fit: contain;
    }

    .nexpro-mobile-topbar__spacer {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* El disparador de la cuenta ocupa el lugar del viejo engranaje, con el
       mismo blanco de toque de 44px que pide la guía táctil. */
    .nexpro-mobile-topbar .nexpro-user-wrap {
        flex-shrink: 0;
    }

    .nexpro-mobile-topbar .nexpro-user-trigger--compact {
        width: 2.75rem;
        height: 2.75rem;
        justify-content: center;
        border-radius: var(--nexpro-border-radius-full);
    }

    .nexpro-mobile-menu-btn {
        position: static;
        width: 2.75rem;
        height: 2.75rem;
        border: none;
        border-radius: var(--nexpro-border-radius-full);
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.22rem;
        color: var(--nexpro-text-primary);
    }

    .nexpro-mobile-menu-btn:hover {
        background: var(--nexpro-bg-hover);
    }

    .nexpro-mobile-menu-btn span {
        width: 1rem;
        height: 2px;
        border-radius: 999px;
        background: var(--nexpro-text-primary);
    }

    .nexpro-mobile-backdrop.is-visible {
        display: block;
        position: fixed;
        top: var(--nexpro-mobile-topbar-height);
        right: 0;
        bottom: 0;
        left: min(19rem, 86vw);
        background: rgba(2, 6, 23, 0.4);
        z-index: calc(var(--nexpro-z-fixed) + 1);
    }

    .metric-col {
        border-right: none;
        border-bottom: 1px solid var(--nexpro-border-color);
    }
}

/* ===== UTILITY: TEXT ===== */
.nexpro-text-primary {
    color: var(--nexpro-text-primary);
}

.nexpro-text-secondary {
    color: var(--nexpro-text-secondary);
}

.nexpro-text-muted {
    color: var(--nexpro-text-muted);
}

/* ===== UTILITY: SPACING ===== */
.nexpro-mb-xs {
    margin-bottom: var(--nexpro-spacing-xs);
}

.nexpro-mb-sm {
    margin-bottom: var(--nexpro-spacing-sm);
}

.nexpro-mb-md {
    margin-bottom: var(--nexpro-spacing-md);
}

.nexpro-mb-lg {
    margin-bottom: var(--nexpro-spacing-lg);
}

/* ===== UI KIT: PAGE LAYOUT ===== */
.nc-page-shell {
    /* sin "forwards": al terminar la animacion el navegador reporta transform
       como matrix(1,0,0,1,0,0) en vez de "none" (aunque no mueva nada), y eso
       igual rompe el position:fixed de los hijos. Sin forwards, el elemento
       vuelve solo a su estado sin animar apenas termina. */
    animation: nc-fadeIn 0.3s ease-out;
}

.nc-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--nexpro-spacing-sm);
    gap: var(--nexpro-spacing-md);
    flex-wrap: wrap;
}

.nc-page-header__lead {
    display: flex;
    align-items: center;
    gap: var(--nexpro-spacing-md);
    min-width: 0;
    flex: 1 1 12rem;
}

.nc-page-header__titles {
    min-width: 0;
    flex: 1 1 auto;
}

.nc-page-subtitle {
    color: var(--nexpro-text-secondary);
    font-size: var(--nexpro-font-size-sm);
    line-height: 1.45;
    margin: 0.45rem 0 0 0;
}

/*
 * Volver: control con borde, no un icono suelto. El ghost transparente
 * junto a un título grande hacía que la flecha pareciera un adorno.
 */
.nc-back {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 2rem;
    padding: 0 0.65rem 0 0.45rem;
    border: 1px solid var(--nexpro-border-color);
    border-radius: var(--nexpro-border-radius-md);
    background: var(--nexpro-bg-card);
    color: var(--nexpro-text-secondary);
    font-size: var(--nexpro-font-size-sm);
    font-weight: var(--nexpro-font-weight-medium);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.nc-back i {
    font-size: 0.95rem;
    line-height: 1;
}

.nc-back:hover {
    background: var(--nexpro-bg-hover);
    color: var(--nexpro-text-primary);
    border-color: var(--nexpro-text-muted);
}

.nc-entity {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--nexpro-border-color);
    border-radius: var(--nexpro-border-radius-md);
    background: var(--nexpro-bg-card);
    line-height: 1.15;
    flex-shrink: 0;
    min-width: 0;
}

.nc-entity__label {
    font-size: 0.65rem;
    font-weight: var(--nexpro-font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nexpro-text-muted);
}

.nc-entity__value {
    font-size: var(--nexpro-font-size-sm);
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nc-filter-bar--compact {
    padding: var(--nexpro-spacing-sm) var(--nexpro-spacing-md);
}

@media (max-width: 480px) {
    .nc-back span {
        display: none;
    }

    .nc-back {
        width: 2rem;
        padding: 0;
    }
}

/* ===== UI KIT: TAB GROUP ===== */
/* Columnas iguales: con flex cada pestaña toma el ancho de su palabra y la
   píldora activa queda corta contra el óvalo. */
.nc-tab-group {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--nexpro-bg-card);
    border-radius: var(--nexpro-border-radius-full);
    padding: 0.25rem;
    border: var(--nexpro-border-width) solid var(--nexpro-border-color);
    box-shadow: var(--nexpro-shadow-sm);
    gap: 0.25rem;
}

.nc-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem 1.25rem;
    border-radius: var(--nexpro-border-radius-full);
    border: none;
    background: transparent;
    color: var(--nexpro-text-secondary);
    font-size: var(--nexpro-font-size-sm);
    font-weight: var(--nexpro-font-weight-semibold);
    cursor: pointer;
    transition: all var(--nexpro-transition-fast);
    white-space: nowrap;
}

.nc-tab:hover {
    background: var(--nexpro-bg-hover);
    color: var(--nexpro-text-primary);
}

.nc-tab.is-active {
    background: var(--nexpro-primary);
    color: var(--nexpro-text-white);
}

.nc-tab.is-active:hover {
    background: var(--nexpro-primary-dark);
    color: var(--nexpro-text-white);
}

/* ===== UI KIT: FILTER BAR ===== */
.nc-filter-bar {
    display: flex;
    gap: var(--nexpro-spacing-md);
    align-items: flex-end;
    flex-wrap: wrap;
    background: var(--nexpro-bg-card);
    border: var(--nexpro-border-width) solid var(--nexpro-border-color);
    border-radius: var(--nexpro-border-radius-lg);
    padding: var(--nexpro-spacing-md);
    box-shadow: var(--nexpro-shadow-sm);
}

.nc-filter-group {
    flex: 1;
    min-width: 160px;
}

/* Botón de solo ícono para barras de herramientas (ampliar grilla, acciones
   secundarias). Discreto en reposo y con el marco recién al pasar el mouse. */
.nc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border: var(--nexpro-border-width) solid transparent;
    border-radius: var(--nexpro-border-radius-md);
    background: transparent;
    color: var(--nexpro-text-secondary);
    cursor: pointer;
    transition: background var(--nexpro-transition-fast), color var(--nexpro-transition-fast), border-color var(--nexpro-transition-fast);
}

.nc-icon-btn:hover {
    background: var(--nexpro-bg-hover);
    border-color: var(--nexpro-border-color);
    color: var(--nexpro-text-primary);
}

.nc-icon-btn[aria-pressed="true"] {
    background: var(--nexpro-primary-lighter);
    border-color: var(--nexpro-primary-lighter);
    color: var(--nexpro-primary);
}

.nc-icon-btn i {
    font-size: 1.05rem;
    line-height: 1;
}

/* Aviso de filtro inválido, debajo de la barra. */
.nc-filter-hint {
    display: flex;
    align-items: center;
    gap: var(--nexpro-spacing-xs);
    margin: 0;
    font-size: var(--nexpro-font-size-sm);
    color: var(--nexpro-danger-text);
}

.nexpro-label {
    display: block;
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-bold);
    color: var(--nexpro-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--nexpro-spacing-xs);
}

/* ===== UI KIT: FORM INPUTS ===== */
.nc-input,
.nc-select {
    display: block;
    width: 100%;
    height: 2.5rem;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    border-radius: var(--nexpro-border-radius-md);
    border: var(--nexpro-border-width) solid var(--nexpro-border-color);
    background: var(--nexpro-gray-50);
    font-size: var(--nexpro-font-size-sm);
    color: var(--nexpro-text-primary);
    padding: 0 var(--nexpro-spacing-md);
    transition: border-color var(--nexpro-transition-fast), box-shadow var(--nexpro-transition-fast);
}

.nc-input:focus,
.nc-select:focus {
    border-color: var(--nexpro-primary);
    box-shadow: 0 0 0 3px var(--nexpro-brand-primary-soft);
    outline: none;
}

.nc-input::placeholder {
    color: var(--nexpro-text-muted);
}

.nc-select {
    padding-right: 2.25rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 1 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 1 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
}

/* ===== UI KIT: SEARCH FIELD ===== */
.nc-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}

.nc-search-wrap .nc-search-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--nexpro-text-muted);
    font-size: var(--nexpro-font-size-sm);
    pointer-events: none;
}

.nc-search-wrap .nc-input {
    padding-left: 2.25rem;
}

/* ===== UI KIT: BUTTONS ===== */
.nc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: var(--nexpro-font-size-sm);
    font-weight: var(--nexpro-font-weight-semibold);
    border-radius: var(--nexpro-border-radius-md);
    border: var(--nexpro-border-width) solid transparent;
    cursor: pointer;
    transition: all var(--nexpro-transition-fast);
    white-space: nowrap;
    text-decoration: none;
    height: 2.5rem;
}

.nc-btn--primary {
    background: var(--nexpro-primary);
    color: var(--nexpro-text-white);
}

.nc-btn--primary:hover {
    background: var(--nexpro-primary-dark);
    color: var(--nexpro-text-white);
}

.nc-btn--outline {
    background: transparent;
    color: var(--nexpro-text-secondary);
    border-color: var(--nexpro-border-color);
}

.nc-btn--outline:hover {
    background: var(--nexpro-bg-hover);
    color: var(--nexpro-text-primary);
}

.nc-btn--ghost {
    background: transparent;
    color: var(--nexpro-text-secondary);
    border: none;
}

.nc-btn--ghost:hover {
    background: var(--nexpro-bg-hover);
    color: var(--nexpro-text-primary);
}

.nc-btn__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: nc-spin 0.8s linear infinite;
    flex-shrink: 0;
}

.nc-btn--outline .nc-btn__spinner,
.nc-btn--ghost .nc-btn__spinner {
    border-color: rgba(20, 80, 255, 0.22);
    border-top-color: var(--nexpro-primary);
}

@keyframes nc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== UI KIT: TABLES ===== */
.nc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.nc-table thead {
    position: sticky;
    top: 0;
    /* Por encima del pie, que también es sticky: con el mismo z-index ganaba el pie por
       ir después en el DOM, y se comía la referencia que se abre desde el encabezado.
       Nunca se superponen entre sí, así que el orden no molesta. */
    z-index: 3;
}

.nc-table thead th {
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-bold);
    color: var(--nexpro-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 0.85rem var(--nexpro-spacing-sm);
    border-bottom: 2px solid var(--nexpro-border-color);
    background: var(--nexpro-gray-50);
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.nc-table thead th.text-start {
    text-align: left;
}

.nc-table thead th.nc-th--sortable {
    cursor: pointer;
}

.nc-table thead th.nc-th--sortable:hover {
    background: var(--nexpro-gray-100);
}

.nc-table thead th .nc-sort {
    display: inline-flex;
    flex-direction: column;
    margin-left: 0.3rem;
    vertical-align: middle;
    line-height: 0;
    opacity: 0.3;
    transition: opacity var(--nexpro-transition-fast);
}

.nc-table thead th:hover .nc-sort {
    opacity: 0.6;
}

.nc-table thead th .nc-sort i {
    font-size: 0.55rem;
    line-height: 0.6;
    transition: opacity var(--nexpro-transition-fast);
}

.nc-table thead th .nc-sort.nc-sort--asc i:first-child {
    opacity: 1;
    color: var(--nexpro-primary);
}

.nc-table thead th .nc-sort.nc-sort--asc i:last-child {
    opacity: 0.2;
}

.nc-table thead th .nc-sort.nc-sort--desc i:first-child {
    opacity: 0.2;
}

.nc-table thead th .nc-sort.nc-sort--desc i:last-child {
    opacity: 1;
    color: var(--nexpro-primary);
}

.nc-table thead th .nc-sort.nc-sort--asc,
.nc-table thead th .nc-sort.nc-sort--desc {
    opacity: 1;
}

.nc-table tbody tr {
    transition: background-color var(--nexpro-transition-fast);
}

/* La manito solo donde la fila hace algo: prometer un click que no existe es peor
   que no ofrecerlo. El resaltado al pasar se queda igual, que ayuda a no perder de
   vista qué fila se está leyendo. */
.nc-table--clickable tbody tr {
    cursor: pointer;
}

.nc-table tbody tr:hover {
    background: var(--nexpro-gray-50);
}

.nc-table tbody tr.is-selected,
.nc-table tbody tr.is-selected:hover {
    background: var(--nexpro-primary-lighter);
    box-shadow: inset 3px 0 0 var(--nexpro-primary);
}

.nc-table tbody td {
    padding: 0.75rem var(--nexpro-spacing-sm);
    vertical-align: middle;
    text-align: center;
    border-bottom: var(--nexpro-border-width) solid var(--nexpro-gray-100);
    font-size: var(--nexpro-font-size-sm);
    color: var(--nexpro-text-secondary);
}

.nc-table tbody td.text-start {
    text-align: left;
}

.nc-table tbody tr:last-child td {
    border-bottom: none;
}

.nc-table .nc-table-footer {
    background: var(--nexpro-bg-table-footer);
    color: var(--nexpro-text-table-footer);
    font-weight: var(--nexpro-font-weight-bold);
}

.nc-table .nc-table-footer td {
    color: inherit;
    border-bottom: none;
}

/* Totales al pie de la grilla. Van en <tfoot> y quedan anclados abajo para
   seguir a la vista mientras se scrollean las filas. */
.nc-table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

/* Varias filas de total (una por combustible) son un solo bloque: el borde
   grueso lo abre y adentro las separa una línea fina. */
.nc-table tfoot td {
    padding: 0.75rem var(--nexpro-spacing-sm);
    vertical-align: middle;
    text-align: center;
    font-size: var(--nexpro-font-size-sm);
    border-top: 1px solid var(--nexpro-surface-border-subtle);
}

.nc-table tfoot tr:first-child td {
    border-top: 2px solid var(--nexpro-border-table-footer);
}

.nc-table tfoot td.text-start {
    text-align: left;
}

/* Sobre la franja de totales el tono tenue se pierde contra el fondo: ahí la pastilla
   va con relleno pleno. */
.nc-table tfoot .nc-grade {
    color: var(--nexpro-grade-on-solid);
    border: var(--nexpro-border-width) solid var(--nexpro-grade-edge);
    padding-inline: 0.6rem;
}

.nc-table tfoot .nc-grade--a { background: var(--nexpro-grade-a-solid); }
.nc-table tfoot .nc-grade--b { background: var(--nexpro-grade-b-solid); }
.nc-table tfoot .nc-grade--c { background: var(--nexpro-grade-c-solid); }
.nc-table tfoot .nc-grade--d { background: var(--nexpro-grade-d-solid); }
.nc-table tfoot .nc-grade--e { background: var(--nexpro-grade-e-solid); }

/* La etiqueta del grupo se destaca del resto. Va con td en el selector para
   ganarle al "color: inherit" de la fila. */
.nc-table .nc-table-footer td.nc-table-footer__label {
    color: var(--nexpro-text-table-footer-label);
    letter-spacing: 0.02em;
}

/* Celda combinada sobre todas las filas del total: una sola etiqueta, centrada,
   con el sombreado sin cortes. */
.nc-table .nc-table-footer td.nc-table-footer__label[rowspan] {
    vertical-align: middle;
    text-align: center;
    /* Fondo propio: la celda cruza filas y el pie va fijo, así que no conviene
       que dependa del fondo de las filas que atraviesa. */
    background: var(--nexpro-bg-table-footer);
    border-right: var(--nexpro-border-width) solid var(--nexpro-surface-border-subtle);
}

/* La escala dentro del panel de referencia: letra, rango y nombre en tres columnas
   para que los rangos se lean uno debajo del otro. */
.nc-scale {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0.35rem 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nc-scale__item {
    display: contents;
}

.nc-scale__range {
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.nc-scale__name {
    font-size: var(--nexpro-font-size-xs);
    color: var(--nexpro-text-muted);
}

.nc-scale__hint {
    font-size: var(--nexpro-font-size-xs);
    color: var(--nexpro-text-secondary);
    border-top: var(--nexpro-border-width) solid var(--nexpro-border-color);
    padding-top: 0.4rem;
}

/* Los pesos van debajo de su título, no a continuación. */
.nc-scale__weights {
    display: block;
    color: var(--nexpro-text-primary);
    font-weight: var(--nexpro-font-weight-semibold);
}

/* Un dato y su calificación son una sola cosa: van juntos y no se separan en dos
   renglones. El número a la derecha para que las cifras de la columna se alineen
   entre sí, y la letra siempre después. */
.nc-metric {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    white-space: nowrap;
}

.nc-metric__value {
    font-variant-numeric: tabular-nums;
}

/* Flecha para plegar los totales, pegada a la etiqueta. */
.nc-totals-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: var(--nexpro-spacing-xs);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--nexpro-text-table-footer-label);
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

.nc-totals-toggle:hover {
    background: var(--nexpro-brand-primary-soft);
}

.nc-totals-toggle i {
    font-size: 0.8rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Plegado: la flecha apunta al bloque que va a aparecer. */
.nc-table-footer--collapsed .nc-totals-toggle i {
    transform: rotate(-90deg);
}

.nc-table tfoot.nc-table-footer--collapsed td {
    text-align: center;
}

/* El botón de desplegar la tarjeta solo existe en mobile. */
.nc-row-toggle {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .nc-totals-toggle i,
    .nc-row-toggle i {
        transition: none;
    }
}

/* ── Tablas en mobile: cada fila es una tarjeta ──────────────────────
   Nueve columnas en 360px obligan a scrollear de costado y se pierde de vista qué
   fila se está mirando. Como el encabezado se oculta, cada celda muestra el nombre
   de su columna desde el data-label que pone NcDataTable. Vale para todas las
   tablas del sistema. */
@media (max-width: 768px) {
    .nc-table,
    .nc-table tbody,
    .nc-table tfoot {
        display: block;
        width: 100%;
    }

    .nc-table thead {
        /* Oculto para la vista, presente para lectores de pantalla. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .nc-table tbody tr,
    .nc-table tfoot tr {
        display: block;
        padding: 0.85rem 1rem;
        border: var(--nexpro-border-width) solid var(--nexpro-border-color);
        border-radius: var(--nexpro-border-radius-lg);
        margin-bottom: 0.6rem;
        background: var(--nexpro-bg-card);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .nc-table tbody tr:last-child {
        margin-bottom: 0;
    }

    /* Tarjeta plegada: título y un par de datos. Con todo desplegado, quince
       unidades por nueve columnas son una lista imposible de recorrer. */
    .nc-table tbody tr:not(.is-open) td:not(.nc-cell--summary) {
        display: none;
    }

    .nc-row-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0.7rem;
        right: 0.75rem;
        width: 1.9rem;
        height: 1.9rem;
        padding: 0;
        border: var(--nexpro-border-width) solid var(--nexpro-border-color);
        border-radius: 50%;
        background: var(--nexpro-bg-card);
        color: var(--nexpro-text-secondary);
        cursor: pointer;
    }

    .nc-row-toggle i {
        font-size: 0.8rem;
        line-height: 1;
        transition: transform 0.2s ease;
    }

    .nc-table tbody tr.is-open .nc-row-toggle i {
        transform: rotate(180deg);
    }

    /* El botón se ancla a la tarjeta, no a la celda del título. */
    .nc-table tbody tr {
        position: relative;
    }

    /* El título deja libre el ancho del botón de acción (right 0.75 + 1.9 = 2.65rem)
       más un respiro; si no, una patente larga se metía abajo del botón. */
    .nc-table tbody td.nc-cell--titulo {
        padding-right: 3rem;
    }

    .nc-table tbody td,
    .nc-table tfoot td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--nexpro-spacing-md);
        padding: 0.2rem 0;
        border: none;
        text-align: right;
    }

    /* El nombre de la columna, a la izquierda de su valor. */
    .nc-table tbody td::before,
    .nc-table tfoot td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 55%;
        text-align: left;
        font-size: var(--nexpro-font-size-xs);
        font-weight: var(--nexpro-font-weight-semibold);
        color: var(--nexpro-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* La primera columna es el título de la tarjeta: sin rótulo y más grande. */
    .nc-table tbody td.nc-cell--titulo,
    .nc-table tfoot td:first-child {
        display: block;
        text-align: left;
        font-size: var(--nexpro-font-size-base);
        font-weight: var(--nexpro-font-weight-bold);
        color: var(--nexpro-text-primary);
        padding-bottom: 0.4rem;
        margin-bottom: 0.3rem;
        border-bottom: var(--nexpro-border-width) solid var(--nexpro-border-color);
    }

    .nc-table tbody td.nc-cell--titulo::before,
    .nc-table tfoot td:first-child::before {
        display: none;
    }

    /* La columna de acciones no es un dato: va arriba de todo, chica y sin etiqueta. */
    .nc-table tbody td:not([data-label]):first-child,
    .nc-table tbody td[data-label=""]:first-child {
        display: block;
        padding: 0 0 0.2rem;
    }

    .nc-table tbody td[data-label=""]::before {
        display: none;
    }

    /* Los totales se distinguen de las unidades por color, no por posición:
       apilados ya no quedan "al pie". */
    .nc-table tfoot {
        position: static;
        margin-top: var(--nexpro-spacing-sm);
    }

    .nc-table .nc-table-footer td:first-child {
        border-bottom-color: currentColor;
    }

    /* Apilados, cada total es una tarjeta suelta y necesita decir de qué es: la
       etiqueta vuelve a aparecer en todas, pero como antetítulo, y el título de
       la tarjeta pasa a ser lo que las distingue (el combustible). */
    /* Apilado no hay celdas que combinar: el total es una tarjeta con una sección
       por combustible y la etiqueta combinada pasa a ser su título. */
    .nc-table tfoot.nc-table-footer--grouped {
        border: var(--nexpro-border-width) solid var(--nexpro-border-color);
        border-radius: var(--nexpro-border-radius-lg);
        background: var(--nexpro-bg-table-footer);
        overflow: hidden;
    }

    .nc-table tfoot.nc-table-footer--grouped tr {
        border: none;
        border-radius: 0;
        margin-bottom: 0;
        background: transparent;
    }

    .nc-table tfoot.nc-table-footer--grouped tr + tr {
        border-top: var(--nexpro-border-width) solid var(--nexpro-surface-border-subtle);
    }

    /* Apilado, ese borde se repetiría en cada dato de la primera fila. */
    .nc-table tfoot tr:first-child td {
        border-top: none;
    }

    .nc-table tfoot.nc-table-footer--grouped td.nc-table-footer__label[rowspan] {
        text-align: left;
        border-right: none;
    }

    /* Subrayado con la línea de siempre: heredar el color de la etiqueta lo
       pintaba de azul y competía con los datos. */
    .nc-table tfoot.nc-table-footer--grouped td.nc-table-footer__label {
        border-bottom-color: var(--nexpro-border-color);
    }

    /* El combustible titula cada sección. En la primera fila es la segunda celda
       (la primera es la etiqueta); en las demás ya es la primera. */
    .nc-table tfoot.nc-table-footer--grouped tr:first-child td:nth-child(2),
    .nc-table tfoot.nc-table-footer--grouped tr + tr td:first-child {
        display: block;
        text-align: left;
        font-size: var(--nexpro-font-size-sm);
        font-weight: var(--nexpro-font-weight-bold);
        color: inherit;
        padding-bottom: 0.25rem;
        margin-bottom: 0.25rem;
        border-bottom: none;
    }

    .nc-table tfoot.nc-table-footer--grouped tr:first-child td:nth-child(2)::before,
    .nc-table tfoot.nc-table-footer--grouped tr + tr td:first-child::before {
        display: none;
    }

    /* Con aire alrededor las filas quedan más angostas que el panel, en vez de dos
       bordes del mismo ancho encimados. */
    /* Acá y no en el panel: los paneles traen p-0 de Bootstrap, con !important. */
    .nc-datatable__scroll {
        padding: 0.6rem;
    }

    /* Se distinguen del panel por fondo y no por borde: sobre blanco, un recuadro
       blanco con borde se ve duplicado. */
    .nc-table tbody tr {
        background: var(--nexpro-bg-secondary);
        border-color: transparent;
        box-shadow: none;
    }

    /* Un scroll adentro de otro: se pelean y no se sabe cuál se está moviendo. */
    .nc-datatable__scroll {
        max-height: none;
        overflow: visible;
    }

    /* La fila de "sin resultados" no es una tarjeta. */
    .nc-table tbody tr.nc-datatable__empty {
        border: none;
        background: transparent;
        padding: 0;
    }

    .nc-table tbody tr.nc-datatable__empty td {
        display: block;
        text-align: center;
    }

    .nc-table tbody tr.nc-datatable__empty td::before {
        display: none;
    }
}

.nc-cell-primary {
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-primary) !important;
}

/* ===== UI KIT: BADGES ===== */
.nc-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--nexpro-border-radius-full);
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-semibold);
}

.nc-badge {
    white-space: nowrap;
}

.nc-badge--success {
    background: var(--nexpro-success-bg);
    color: var(--nexpro-success-text);
}

.nc-badge--danger {
    background: var(--nexpro-danger-bg);
    color: var(--nexpro-danger-text);
}

.nc-badge--warning {
    background: var(--nexpro-warning-light);
    color: var(--nexpro-warning-text);
}

/* ===== UI KIT: ACTION BUTTON ===== */
.nc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--nexpro-border-radius-md);
    border: none;
    background: transparent;
    color: var(--nexpro-text-secondary);
    cursor: pointer;
    transition: all var(--nexpro-transition-fast);
}

.nc-action-btn:hover {
    background: var(--nexpro-bg-hover);
    color: var(--nexpro-text-primary);
}

.nc-action-btn.dropdown-toggle::after,
.nc-action-btn[data-bs-toggle="dropdown"]::after {
    display: none;
}

/* ===== UI KIT: MAP CONTAINER ===== */
.nc-map-container {
    height: 300px;
    border-radius: var(--nexpro-border-radius-lg);
    background: var(--nexpro-gray-100);
    border: var(--nexpro-border-width) solid var(--nexpro-border-color);
    overflow: hidden;
    position: relative;
}

.nc-map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== UI KIT: LINK BUTTON ===== */
.nc-link {
    color: var(--nexpro-primary);
    font-weight: var(--nexpro-font-weight-semibold);
    text-decoration: none;
    font-size: var(--nexpro-font-size-sm);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.nc-link:hover {
    color: var(--nexpro-primary-dark);
    text-decoration: underline;
}

/* ===== UI KIT: EMPTY STATE ===== */
.nc-empty-state {
    text-align: center;
    padding: var(--nexpro-spacing-2xl) var(--nexpro-spacing-lg);
    color: var(--nexpro-text-muted);
}

/* Solo el icono grande del estado vacio, no los que van dentro de un boton (ej. reintentar) */
.nc-empty-state > i {
    font-size: 3rem;
    margin-bottom: var(--nexpro-spacing-md);
    opacity: 0.25;
    display: block;
}

/* ===== RESPONSIVE: PAGE LAYOUT ===== */
@media (max-width: 768px) {
    /* Cada solapa toma una fraccion igual del ancho completo (2 o 3 segun el modulo),
       con el texto centrado. */
    .nc-tab-group {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        width: 100%;
    }

    .nc-tab {
        width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .nc-filter-bar {
        display: grid;
        /* minmax(0, 1fr) evita que las columnas crezcan segun el contenido
           interno (asi el input de busqueda no desborda la card). */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        /* Con cuatro o cinco filtros apilados hace falta separar bien las filas. */
        gap: var(--nexpro-spacing-md) 0.75rem;
        padding: var(--nexpro-spacing-md);
    }

    .nc-filter-group {
        min-width: 0;
        max-width: 100%;
    }

    /* Filtros cuyo contenido no se entiende recortado (nombres de empresa en un
       combo, por ejemplo): ocupan la fila entera en vez de media. */
    .nc-filter-group--wide {
        grid-column: 1 / -1;
    }

    /* El botón acompaña al último filtro en vez de llevarse una fila entera:
       con dos filtros dejaba media fila vacía arriba y una fila muerta abajo.
       align-self: end lo alinea con los controles, no con sus etiquetas. */
    .nc-filter-bar > .nc-btn {
        grid-column: auto;
        align-self: end;
    }

    /* ── Search wrap: sin min-width para que no desborde en mobile ─ */
    .nc-search-wrap {
        min-width: 0;
        width: 100%;
    }

    .nc-search-wrap .nc-input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* ── Inputs/selects: nunca mas anchos que su contenedor ──────── */
    .nc-select,
    .nc-input {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* ===== Prevenir scroll horizontal global en cualquier tamaño ===== */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

.nexpro-content {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ===== Sidebar: colapsado desktop vs drawer mobile ================
   Las reglas estan aca (y no en NavMenuItem.razor.css) para evitar el
   scoping CSS de Blazor cuando el selector depende de un ancestro
   (.nexpro-sidebar-content) que pertenece a otro componente. */

/* Desktop colapsado: escondemos texto/flecha y centramos el icono.
   Duplicamos selectores (`body[data-sidebar-collapsed]` y `.collapsed`) para
   que siempre gane una de las dos, sin depender del orden en que el estado
   quede sincronizado. */
body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-arrow,
.nexpro-sidebar-content.collapsed .nexpro-nav-arrow,
body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-text,
.nexpro-sidebar-content.collapsed .nexpro-nav-text {
    display: none !important;
}

body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-item,
.nexpro-sidebar-content.collapsed .nexpro-nav-item {
    justify-content: center !important;
    padding: 0.75rem 0.5rem !important;
    gap: 0 !important;
}

/* ── Menú cargando ──────────────────────────────────────────────────
   Se alinea como un ítem del menú, así al plegar la barra queda solo el
   spinner centrado en vez de un texto cortado contra el borde. */
.nexpro-nav-loading {
    display: flex;
    align-items: center;
    gap: var(--nexpro-spacing-sm);
    padding: 0.75rem var(--nexpro-spacing-md);
    color: var(--nexpro-text-muted);
    font-size: var(--nexpro-font-size-sm);
    white-space: nowrap;
    overflow: hidden;
}

.nexpro-nav-loading__spinner {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    border: 2px solid var(--nexpro-gray-200);
    border-top-color: var(--nexpro-primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-loading,
.nexpro-sidebar-content.collapsed .nexpro-nav-loading {
    justify-content: center;
    padding: 0.75rem 0.5rem;
    gap: 0;
}

/* Con movimiento reducido no gira: se queda como un anillo quieto. */
@media (prefers-reduced-motion: reduce) {
    .nexpro-nav-loading__spinner {
        animation: none;
    }
}

/* El icono se centra: sin ancho fijo que lo desalinee con items sin flecha */
body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-icon,
.nexpro-sidebar-content.collapsed .nexpro-nav-icon {
    width: 1.3rem !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* Mobile: el drawer siempre se ve expandido aunque el estado desktop
   este colapsado. Mostramos texto, chevron, logo y card de usuario.
   OJO: usamos el selector con body[data-sidebar-collapsed] para empatar
   la especificidad con las reglas base que ocultan estos elementos. */
@media (max-width: 768px) {
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-text,
    .nexpro-sidebar-content.collapsed .nexpro-nav-text {
        display: inline-block !important;
        opacity: 1 !important;
        width: auto !important;
    }
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-arrow,
    .nexpro-sidebar-content.collapsed .nexpro-nav-arrow {
        display: inline-flex !important;
    }
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-item,
    .nexpro-sidebar-content.collapsed .nexpro-nav-item {
        justify-content: flex-start !important;
        padding: 0.75rem 0.9rem !important;
    }
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-logo-link,
    .nexpro-sidebar-content.collapsed .nexpro-logo-link {
        display: inline-flex !important;
    }
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-logo-img,
    .nexpro-sidebar-content.collapsed .nexpro-logo-img {
        display: block !important;
        opacity: 1 !important;
        width: auto !important;
    }
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-sidebar-logo,
    .nexpro-sidebar-content.collapsed .nexpro-sidebar-logo {
        justify-content: space-between !important;
        padding: 1rem 1.1rem !important;
    }
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-user-trigger,
    .nexpro-sidebar-content.collapsed .nexpro-user-trigger {
        justify-content: flex-start !important;
        padding: 0.55rem 0.6rem !important;
    }
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-user-copy,
    .nexpro-sidebar-content.collapsed .nexpro-user-copy {
        display: flex !important;
    }
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-user-chevron,
    .nexpro-sidebar-content.collapsed .nexpro-user-chevron {
        display: inline-block !important;
    }
    /* En mobile tambien restauramos el icon sin el margin-right:0 del desktop
       colapsado, para que quede separado del texto. */
    body[data-sidebar-collapsed="true"] .nexpro-sidebar-content .nexpro-nav-icon {
        margin-right: 0.75rem !important;
    }
}

/* ============================================================
   Reportes: catalogo moderno (pills horizontales + cards)
   ============================================================ */
.nc-rc {
    display: flex;
    flex-direction: column;
    gap: var(--nexpro-spacing-lg);
    width: 100%;
    max-width: 100%;
}

/* ── Selector horizontal (pills/segmented) ─────────────── */
.nc-rc__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.5rem;
    background: var(--nexpro-bg-card);
    border: 1px solid var(--nexpro-border-color);
    border-radius: var(--nexpro-border-radius-lg);
    box-shadow: var(--nexpro-shadow-xs);
}

.nc-rc__pill {
    flex: 1 1 auto;
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.95rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--nexpro-text-secondary);
    font-size: 0.92rem;
    font-weight: var(--nexpro-font-weight-semibold);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease;
}

.nc-rc__pill:hover {
    background: var(--nexpro-bg-hover);
    color: var(--nexpro-text-primary);
}

.nc-rc__pill.is-active {
    background: var(--cat-bg, var(--nexpro-primary-lighter));
    color: var(--cat-color, var(--nexpro-brand-primary));
    border-color: color-mix(in srgb, var(--cat-color, var(--nexpro-brand-primary)) 35%, transparent);
}

.nc-rc__pill-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.05);
    color: var(--nexpro-text-secondary);
    font-size: 1rem;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nc-rc__pill.is-active .nc-rc__pill-icon {
    background: var(--cat-color, var(--nexpro-brand-primary));
    color: #fff;
}

.nc-rc__pill-label {
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nc-rc__pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 0.45rem;
    background: rgba(15, 23, 42, 0.07);
    color: var(--nexpro-text-secondary);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: var(--nexpro-font-weight-semibold);
    flex-shrink: 0;
}

.nc-rc__pill.is-active .nc-rc__pill-count {
    background: rgba(255, 255, 255, 0.85);
    color: var(--cat-color, var(--nexpro-brand-primary));
}

/* ── Intro de categoria ────────────────────────────────── */
.nc-rc__intro {
    margin: 0;
    font-size: 0.92rem;
    color: var(--nexpro-text-muted);
}

/* ── Grilla de cards (auto-fit -> sin huecos) ──────────── */
.nc-rc__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--nexpro-spacing-lg);
}

/* ── Card de reporte (grande, visual) ──────────────────── */
.nc-rc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.4rem 1.25rem 1.25rem;
    background: var(--nexpro-bg-card);
    border: 1px solid var(--nexpro-border-color);
    border-radius: var(--nexpro-border-radius-lg);
    text-decoration: none !important;
    color: var(--nexpro-text-primary);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
}

.nc-rc-card:hover {
    box-shadow: var(--nexpro-shadow-sm);
    border-color: color-mix(in srgb, var(--card-color, var(--nexpro-brand-primary)) 35%, var(--nexpro-border-color));
    color: var(--nexpro-text-primary);
}

.nc-rc-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg, var(--nexpro-primary-lighter));
    color: var(--card-color, var(--nexpro-brand-primary));
    font-size: 1.45rem;
    flex-shrink: 0;
}

.nc-rc-card__title {
    font-size: 1.05rem;
    font-weight: var(--nexpro-font-weight-bold);
    color: var(--nexpro-text-primary);
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.nc-rc-card__subtitle {
    font-size: 0.84rem;
    color: var(--nexpro-text-muted);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nc-rc-card__cta {
    margin-top: auto;
    padding-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--card-color, var(--nexpro-brand-primary));
}

/* Reporte todavía sin conectar: sin link, apagado, sin realce al pasar el mouse. */
.nc-rc-card--soon {
    cursor: default;
    opacity: 0.62;
}
.nc-rc-card--soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--nexpro-border-color);
}
.nc-rc-card--soon .nc-rc-card__icon {
    color: var(--nexpro-text-muted);
    background: var(--nexpro-gray-100);
}
.nc-rc-card__cta--soon {
    color: var(--nexpro-text-muted);
    font-weight: var(--nexpro-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

.nc-tab-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 3.5rem 1rem;
    color: var(--nexpro-text-muted);
    text-align: center;
}
.nc-tab-soon i {
    font-size: 2rem;
    opacity: 0.5;
    margin-bottom: 0.4rem;
}
.nc-tab-soon__title {
    margin: 0;
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-secondary);
}
.nc-tab-soon__text {
    font-size: var(--nexpro-font-size-sm);
}

@media (max-width: 768px) {
    .nc-rc__pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .nc-rc__pill {
        flex: 0 0 auto;
        min-width: 180px;
        scroll-snap-align: start;
    }
}

@media (max-width: 600px) {
    .nc-rc__cards {
        grid-template-columns: 1fr;
    }
    .nc-rc__pill {
        min-width: 150px;
        padding: 0.55rem 0.7rem;
    }
}

/* ============================================================
   KPI cards (usadas en Permanencia)
   ============================================================ */
/* Una sola fila siempre. Cinco tarjetas no se reparten parejo: al bajar de cinco
   columnas a cuatro queda una sola estirada abajo. Si entran se reparten el ancho,
   y si no la fila se desliza, sin cortes fijos. */
/* Un renglón, repartiendo el ancho. El piso de 12rem evita que se angosten hasta
   aplastar el título o cortar el número; a un ancho normal las seis entran sin
   scroll. Si la ventana es más chica que seis pisos (o con zoom), recién ahí se
   deslizan, antes que romper el texto. La grilla queda con todo su alto. */
.nc-kpi-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(12rem, 1fr);
    gap: var(--nexpro-spacing-md);
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
}

.nc-kpi-grid > * {
    scroll-snap-align: start;
}

/* Con una fila por combustible las tarjetas piden más ancho y son varias, así que
   ahí sí se deslizan en lugar de achicarse hasta no leerse. */
.nc-kpi-grid--rows {
    grid-auto-flow: column;
    grid-auto-columns: minmax(21rem, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
}

.nc-kpi-grid--rows > * {
    scroll-snap-align: start;
}

/* ── KPI en mobile: carrusel deslizable ──────────────────────────────
   Apiladas, cinco tarjetas empujaban la tabla fuera de la pantalla. Deslizando
   ocupan el alto de una sola. El 86% de ancho deja asomar la siguiente, que es
   lo que le avisa al usuario que hay más sin flechas ni puntos. Es scroll
   nativo: anda con el dedo, con la rueda y con el teclado. */
@media (max-width: 768px) {
    .nc-kpi-grid,
    .nc-kpi-grid--rows {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        gap: var(--nexpro-spacing-md);
        /* El scroll llega hasta el borde de la pantalla, pero las tarjetas
           respetan el margen del contenido. */
        margin-inline: -0.75rem;
        padding-inline: 0.75rem;
        scroll-padding-inline: 0.75rem;
        scrollbar-width: none;
    }

    .nc-kpi-grid::-webkit-scrollbar {
        display: none;
    }

    .nc-kpi-grid > * {
        flex: 0 0 86%;
        scroll-snap-align: start;
        min-width: 0;
    }
}

.nc-kpi-card {
    display: flex;
    /* El cuerpo se estira a todo el alto para poder repartir su contenido; el ícono
       se queda arriba, que con centrado quedaba flotando contra un cuerpo de tres o
       cuatro líneas. */
    align-items: stretch;
    gap: var(--nexpro-spacing-md);
    /* Ajustado: cada píxel de alto acá se lo saca a la tabla, que es lo que se mira. */
    padding: 0.85rem 1rem;
    background: var(--nexpro-bg-card);
    border: 1px solid var(--nexpro-border-color);
    border-radius: var(--nexpro-border-radius-lg);
    box-shadow: var(--nexpro-shadow-xs);
    min-width: 0;
    /* Habilita las unidades cqi del valor: el número se mide contra el ancho real
       de la tarjeta, no del viewport. */
    container-type: inline-size;
}

.nc-kpi-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    align-self: flex-start;
}

/* El contenido va junto arriba y la variación se ancla abajo. Repartir todo el alto
   dejaba las tarjetas de dos o tres líneas con huecos en el medio, como si les
   faltara algo. */
.nc-kpi-card__body {
    display: flex;
    flex-direction: column;
    /* Arrancan arriba para que los títulos de todas las tarjetas queden a la misma altura,
       con un respiro parejo entre líneas. La variación ya no se ancla abajo con margin-top
       auto: eso dejaba el número pegado al título y un hueco en el medio. */
    justify-content: flex-start;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
}

/* El chip ("3 combustibles") es un elemento aparte, no la última palabra del
   título: con el título en dos renglones quedaba pegado al final del segundo. */
.nc-kpi-card__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    font-size: 0.84rem;
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

/* Valor propio en vez de un número: una calificación, un estado. El tamaño lo pone
   quien lo pasa. */
.nc-kpi-card__value--custom {
    display: flex;
    align-items: center;
    /* En una card angosta el número y el chip no entran en la misma línea: que el
       chip baje en vez de salirse de la tarjeta. */
    flex-wrap: wrap;
    gap: 0.35rem var(--nexpro-spacing-sm);
    font-size: inherit;
    min-width: 0;
}

/* La barra respira un poco: pegada al número se lee como un subrayado. */
.nc-kpi-card__chart {
    display: block;
    margin: 0.15rem 0 0.1rem;
}

/* Qué quiere decir la letra, al lado de la letra. */
.nc-kpi-card__grade-text {
    font-size: var(--nexpro-font-size-sm);
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-secondary);
}

.nc-kpi-card__value {
    font-size: 1.45rem; /* fallback si el navegador no soporta cqi */
    /* Se mide contra el ancho de la tarjeta: con cinco KPI en fila se achica sola
       y con pocos crece, sin pasar de 1.6rem. */
    font-size: clamp(1.2rem, 9cqi, 1.6rem);
    font-weight: var(--nexpro-font-weight-bold);
    color: var(--nexpro-text-primary);
    line-height: 1.15;
    /* Cifras de ancho fijo: los millones no bailan al refrescar. */
    font-variant-numeric: tabular-nums;
    min-width: 0;
    /* Última red: antes que salirse de la tarjeta, que corte. */
    overflow-wrap: anywhere;
}

.nc-kpi-card__delta {
    font-size: 0.82rem;
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.1rem 0.35rem;
    line-height: 1.3;
}

.nc-kpi-card__delta--up {
    color: #10b981;
}

.nc-kpi-card__delta--down {
    color: #ef4444;
}

/* Status badges (OK / Warning) usados en tablas */
.nc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: var(--nexpro-font-weight-semibold);
}

.nc-status-badge--ok {
    background: rgba(16, 185, 129, 0.12);
    color: #0f766e;
}

.nc-status-badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.nc-filter-actions {
    display: flex;
    gap: var(--nexpro-spacing-sm);
    align-items: flex-end;
}

/* ===== GLOBAL INTERACTIVITY ===== */
.nc-badge,
.nc-action-btn,
.nc-tab,
.dropdown-item,
.nc-link,
a[href] {
    cursor: pointer;
}

/* ===== ROUTE STATE LEGEND ===== */
.nc-route-legend {
    display: flex;
    align-items: center;
    gap: var(--nexpro-spacing-md);
    font-size: var(--nexpro-font-size-xs);
}

.nc-route-legend__item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.nc-route-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.nc-route-dot--moving   { background: #2e7d32; }
.nc-route-dot--idle     { background: #f9a825; }
.nc-route-dot--stopped  { background: #c62828; }

/* ===== MAP MARKERS (Leaflet) ===== */
.nc-map-marker {
    background: transparent !important;
    border: none !important;
}

.nc-marker-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    transition: transform 0.15s ease;
}

.nc-marker-dot:hover {
    transform: scale(1.4);
}

.nc-map-popup {
    font-family: var(--nexpro-font-family);
    font-size: 0.8rem;
    line-height: 1.5;
    min-width: 200px;
}

/* Mientras el server manda el detalle del punto (ver viajeMap._bindLazyPopup). */
.nc-map-popup--loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    color: var(--nexpro-primary);
}

.nc-map-popup strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: var(--nexpro-primary);
}

/* Etiqueta y valor juntos a la izquierda, como HtmlLineaDetalleInfoWindow del
   legacy. Con space-between el valor se iba al borde derecho y, en la fila de
   Estado (punto + etiqueta + valor), los tres quedaban desparramados. */
.nc-map-popup__row {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 6px;
    border-bottom: 1px solid #eee;
    padding: 2px 0;
}

.nc-map-popup__row span:first-child {
    color: #666;
    font-weight: 600;
    flex-shrink: 0;
}

/* ===== Módulos: paneles y gráficos (Dashboard, Disco, etc.) ===== */
.nc-module-panel {
    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);
}

.nc-chart-card {
    padding: var(--nexpro-spacing-md);
}

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

.nc-chart-card__title {
    margin: 0;
    font-size: var(--nexpro-font-size-lg);
    font-weight: var(--nexpro-font-weight-bold);
    color: var(--nexpro-text-primary);
    line-height: 1.25;
    min-width: 0;
}

.nc-chart-container {
    position: relative;
    width: 100%;
    min-height: 260px;
    height: min(42vh, 380px);
}

.nc-kpi-tile {
    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);
    padding: var(--nexpro-spacing-md);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nexpro-spacing-xs);
}

.nc-kpi-tile__value {
    font-size: var(--nexpro-type-card-value-size);
    font-weight: var(--nexpro-type-card-value-weight);
    line-height: 1.15;
    color: var(--nexpro-text-primary);
}

.nc-kpi-tile__value--primary {
    color: var(--nexpro-primary);
}

.nc-kpi-tile__value--success {
    color: var(--nexpro-success-text);
}

.nc-kpi-tile__value--danger {
    color: var(--nexpro-danger-text);
}

.nc-kpi-tile__unit {
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-normal);
    opacity: 0.72;
    margin-inline-start: 0.15rem;
}

/* ===== ANIMACIONES ===== */
.nc-fade-in {
    animation: nc-fadeIn 0.3s ease-out;
}

@keyframes nc-fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ===== SCORING: PUNTAJE Y NIVELES DE RIESGO ===== */

/* Variante de dos columnas de la escala: acá el nivel ya dice el color, no hace
   falta la columna del nombre. */
.nc-scale--dos {
    grid-template-columns: auto 1fr;
}

/* El puntaje es el dato principal de la tarjeta, con el nivel al lado. */
.nc-score {
    font-size: clamp(0.9rem, 8cqi, 1.35rem);
    font-weight: var(--nexpro-font-weight-bold);
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--nexpro-text-primary);
}

/* Una unidad que no llegó al mínimo de kilómetros. Se ve distinta de un cero, que
   en esta escala es la mejor nota. */
.nc-sin-dato {
    font-size: var(--nexpro-font-size-xs);
    font-style: italic;
    color: var(--nexpro-text-muted);
    cursor: help;
}

.nc-riesgo-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem var(--nexpro-spacing-md);
    padding: 0.7rem var(--nexpro-spacing-md);
    border-bottom: var(--nexpro-border-width) solid var(--nexpro-border-color);
}

.nc-riesgo-bar__title {
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--nexpro-type-eyebrow-spacing);
    color: var(--nexpro-text-secondary);
    white-space: nowrap;
}

/* La barra se lleva el espacio sobrante, con un piso para que no quede una rayita. */
.nc-riesgo-bar > .nc-split-bar {
    flex: 1 1 12rem;
}

.nc-riesgo-bar__legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem var(--nexpro-spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nc-riesgo-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.nc-riesgo-bar__count {
    font-size: var(--nexpro-font-size-xs);
    font-weight: var(--nexpro-font-weight-semibold);
    color: var(--nexpro-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Filtro de tipo casilla: se alinea con los controles de al lado, que tienen su
   etiqueta arriba. */
.nc-filter-group--check {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    align-self: end;
    padding-bottom: 0.4rem;
}

.nc-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--nexpro-font-size-sm);
    color: var(--nexpro-text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.nc-check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--nexpro-brand-primary);
    cursor: pointer;
}

@media (max-width: 768px) {
    .nc-riesgo-bar {
        padding: 0.7rem 0.75rem;
    }

    .nc-riesgo-bar > .nc-split-bar {
        flex-basis: 100%;
        order: 3;
    }
}

/* ===== SCORING: LOS TRES NIVELES ===== */

/* La fila abierta queda marcada mientras se mira su detalle, que aparece más abajo:
   sin esto se pierde de vista de cuál unidad es lo que se está leyendo. */
.nc-table tbody tr.is-selected,
.nc-table tbody tr.is-selected:hover {
    background: var(--nexpro-brand-primary-soft);
    box-shadow: inset 3px 0 0 var(--nexpro-brand-primary);
}

/* Aviso de que la fila se puede abrir. Va al lado del título de la tabla y desaparece
   cuando no hay lugar. */
.nc-tabla-pista {
    font-size: var(--nexpro-font-size-xs);
    color: var(--nexpro-text-muted);
}

@media (max-width: 992px) {
    .nc-tabla-pista {
        display: none;
    }
}

/* La columna de acciones no compite por ancho con las de datos. */
.nc-table th.nc-col-acciones {
    width: 1%;
    white-space: nowrap;
}

/* Los paneles de detalle se abren debajo del anterior: necesitan aire suficiente para
   leerse como algo aparte y no como la continuación de la tabla de arriba. */
.nc-detalle-panel {
    margin-top: var(--nexpro-spacing-2xl);
}

/* Dentro del modal la tabla no lleva el marco de la tarjeta: el marco ya lo pone el modal. */
.nc-modal-tabla .nc-datatable {
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Un dato de contexto dentro de la barra de filtros: no es un control, se lee al pasar. */
.nc-filter-nota {
    align-self: end;
    padding-bottom: 0.55rem;
    font-size: var(--nexpro-font-size-xs);
    color: var(--nexpro-text-muted);
    white-space: nowrap;
}

/* El puntaje arriba y el nivel debajo: al lado, la etiqueta empujaba el número contra el
   borde y la columna quedaba el doble de ancha de lo necesario. */
.nc-puntaje {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    cursor: help;
}

/* El subrayado punteado avisa que hay algo para leer, sin gritar como un link. */
.nc-puntaje__valor {
    font-weight: var(--nexpro-font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* El desglose sale al pasar el mouse (title del contenedor); el cursor lo insinúa
   sin subrayar, que hacía parecer que el puntaje era un link. */
.nc-puntaje {
    cursor: help;
}

/* Tendencia vs. el período anterior. Menor puntaje es mejor: si bajó, la flecha baja
   y va en verde; si subió, sube y va en rojo. */
.nc-puntaje__linea {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.nc-tendencia {
    display: inline-flex;
    align-items: center;
    cursor: help;
}
.nc-tendencia i {
    font-size: 0.95rem;
    line-height: 1;
}
.nc-tendencia--mejora {
    color: var(--nexpro-success-text);
}
.nc-tendencia--empeora {
    color: var(--nexpro-danger-text);
}

@media (max-width: 768px) {
    /* Los filtros de tilde ocupan la fila entera del grid: en media celda el texto
       se partía y el ícono de ayuda caía a otro renglón. grid-column, no flex-basis:
       la barra en mobile es grid y flex-basis no la afecta. */
    .nc-filter-group--check {
        grid-column: 1 / -1;
        align-self: auto;
        padding-bottom: 0;
        justify-content: flex-start;
    }

    .nc-check {
        white-space: normal;
    }

    .nc-filter-nota {
        flex-basis: 100%;
        align-self: auto;
        padding-bottom: 0;
        white-space: normal;
    }
}

/* ===== TABLA: LA UNIDAD QUEDA A LA VISTA AL CORRERSE DE COSTADO ===== */

/* Con catorce columnas, al llegar a ralentí o consumo ya no se sabe de qué fila es el dato.
   La columna que identifica la fila queda pegada a la izquierda, con la de acciones si la
   tabla tiene una. En mobile no aplica: ahí cada fila es una tarjeta. */
@media (min-width: 769px) {
    .nc-table thead th.nc-cell--control,
    .nc-table tbody td.nc-cell--control {
        position: sticky;
        left: 0;
        width: 3rem;
        min-width: 3rem;
    }

    .nc-table thead th.nc-cell--titulo,
    .nc-table tbody td.nc-cell--titulo {
        position: sticky;
        left: 0;
    }

    .nc-table--con-control thead th.nc-cell--titulo,
    .nc-table--con-control tbody td.nc-cell--titulo {
        left: 3rem;
    }

    /* Fondo propio: sin esto se transparenta lo que pasa por debajo. */
    .nc-table tbody td.nc-cell--control,
    .nc-table tbody td.nc-cell--titulo {
        background: var(--nexpro-bg-card);
        z-index: 1;
    }

    .nc-table tbody tr:hover td.nc-cell--control,
    .nc-table tbody tr:hover td.nc-cell--titulo {
        background: var(--nexpro-gray-50);
    }

    /* Opaco a propósito: el translúcido dejaba pasar lo que scrollea por detrás.
       Mismo tono que la fila seleccionada, para que la parte fija no corte. */
    .nc-table tbody tr.is-selected td.nc-cell--control,
    .nc-table tbody tr.is-selected td.nc-cell--titulo {
        background: var(--nexpro-primary-lighter);
    }

    /* El encabezado ya es sticky hacia arriba: en la esquina manda sobre el resto. */
    .nc-table thead th.nc-cell--control,
    .nc-table thead th.nc-cell--titulo {
        z-index: 4;
    }

    /* El borde marca dónde termina lo fijo y empieza lo que se mueve. */
    .nc-table thead th.nc-cell--titulo,
    .nc-table tbody td.nc-cell--titulo {
        border-right: var(--nexpro-border-width) solid var(--nexpro-border-color);
    }
}

@media (max-width: 768px) {
    /* La columna de acciones se apoya arriba a la izquierda, a la altura de la flecha, en
       vez de ocupar un renglón propio: así el dominio o la fecha arrancan pegados al borde
       y no debajo de un espacio vacío. */
    .nc-table--con-control tbody td.nc-cell--control {
        position: absolute;
        top: 0.7rem;
        left: 0.85rem;
        padding: 0;
    }

    /* El botón de acción mide 2rem y arranca en left 0.85rem, o sea termina en
       2.85rem: el título tiene que arrancar después o la patente se le monta encima.
       El !important es para ganarle al ps-3 de Bootstrap (padding-left 1rem !important)
       que trae la celda del dominio; sin esto la patente quedaba pegada al borde. */
    .nc-table--con-control tbody td.nc-cell--titulo {
        padding-left: 3.2rem !important;
    }
}