/* /Components/Layout/DlgAdjuntosDo.razor.rz.scp.css */
.dlgadj[b-5dzfr9gv6l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 260px;
}

.dlgadj__archivo[b-5dzfr9gv6l] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dlgadj__icono[b-5dzfr9gv6l] {
    font-size: 17px;
    color: var(--nvx-700);
    flex: none;
}

.dlgadj__vacio[b-5dzfr9gv6l] { color: var(--nvx-gray-400); }

.dlgadj__nota[b-5dzfr9gv6l] {
    margin: 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}
/* /Components/Layout/DlgBuscarDo.razor.rz.scp.css */
/* Búsqueda avanzada de D.O. */

.bdo[b-t3u7lh8za3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 340px;
}

.bdo__tabla[b-t3u7lh8za3] {
    min-width: 0;
}
/* /Components/Layout/DlgComentarioSeguimiento.razor.rz.scp.css */
.dlgcom[b-huvhchbr79] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: min(520px, 80vw);
}

.dlgcom__ayuda[b-huvhchbr79] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}
/* /Components/Layout/DlgSeguimientoDo.razor.rz.scp.css */
.dlgseg[b-wept29h5dn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
}

/* ── Resumen del avance ─────────────────────────────────────────────────── */
.dlgseg__resumen[b-wept29h5dn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--nvx-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.dlgseg__cifras[b-wept29h5dn] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dlgseg__cifra[b-wept29h5dn] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

.dlgseg__cifra b[b-wept29h5dn] {
    font-family: var(--nvx-font-mono);
    color: var(--nvx-800);
    font-size: var(--nvx-text-h3);
}

.dlgseg__barra[b-wept29h5dn] {
    height: 7px;
    border-radius: 4px;
    background: var(--nvx-gray-200);
    overflow: hidden;
}

.dlgseg__barra-avance[b-wept29h5dn] {
    display: block;
    height: 100%;
    background: var(--nvx-success);
    border-radius: 4px;
    transition: width var(--nvx-transition);
}

.dlgseg__pct[b-wept29h5dn] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    font-variant-numeric: tabular-nums;
}

/* ── Filas ──────────────────────────────────────────────────────────────── */
/* La marca acompaña al texto de la columna Situación; nunca lo sustituye. */
.dlgseg__marca[b-wept29h5dn] { font-size: 19px; }

.dlgseg__marca--success[b-wept29h5dn] { color: var(--nvx-success); }
.dlgseg__marca--warning[b-wept29h5dn] { color: var(--nvx-warning); }
.dlgseg__marca--danger[b-wept29h5dn]  { color: var(--nvx-danger); }
.dlgseg__marca--info[b-wept29h5dn]    { color: var(--nvx-info); }
.dlgseg__marca--neutral[b-wept29h5dn] { color: var(--nvx-gray-400); }

.dlgseg__estado[b-wept29h5dn] {
    font-weight: 600;
    white-space: normal;
    min-width: 210px;
}

.dlgseg__presencia[b-wept29h5dn] {
    display: block;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}

/* ── Edición de la fecha ────────────────────────────────────────────────── */
.dlgseg__fecha[b-wept29h5dn] { min-width: 260px; }

.dlgseg__editor[b-wept29h5dn] {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 96px;
    gap: 6px;
    align-items: center;
}

/* Sin esto los campos de MudBlazor no encogen dentro de la rejilla. */
.dlgseg__editor[b-wept29h5dn]  > * { min-width: 0; }

.dlgseg__pendientes[b-wept29h5dn] {
    margin-right: auto;
    padding-left: 8px;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-warning);
}

/* ── Booking que falta ──────────────────────────────────────────────────── */
.dlgseg__booking[b-wept29h5dn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: var(--nvx-border);
    border-left: 4px solid var(--nvx-warning);
    border-radius: var(--nvx-r-md);
    font-size: var(--nvx-text-sm);
}

.dlgseg__booking-fila[b-wept29h5dn] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Vencimiento de la tarea ────────────────────────────────────────────── */
/* La fecha de vencimiento arriba y su cumplimiento debajo, con nombre y color. */
.dlgseg__venc[b-wept29h5dn] {
    min-width: 150px;
    white-space: nowrap;
}

.dlgseg__vence[b-wept29h5dn] {
    display: block;
    margin-bottom: 3px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    font-variant-numeric: tabular-nums;
}

/* ── Agregar estado ─────────────────────────────────────────────────────── */
.dlgseg__agregar[b-wept29h5dn] {
    display: grid;
    grid-template-columns: minmax(220px, 420px) auto;
    gap: 8px;
    align-items: start;
}

/* Sin esto los campos de MudBlazor no encogen dentro de la rejilla. */
.dlgseg__agregar[b-wept29h5dn]  > * { min-width: 0; }

.dlgseg__agregado[b-wept29h5dn] {
    display: block;
    font-size: var(--nvx-text-xs);
    font-weight: 400;
    color: var(--nvx-700);
}

.dlgseg__acciones[b-wept29h5dn] { white-space: nowrap; }

/* ── Comentarios bajo el estado ─────────────────────────────────────────── */
.dlgseg__comentarios[b-wept29h5dn] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 400;
}

.dlgseg__comentario[b-wept29h5dn] {
    padding: 4px 8px;
    border-left: 3px solid var(--nvx-200);
    background: var(--nvx-gray-50);
    border-radius: var(--nvx-r-sm);
}

.dlgseg__comentario-autor[b-wept29h5dn] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

/* Texto libre: se respetan los saltos y se corta la palabra antes que estirar la tabla. */
.dlgseg__comentario-texto[b-wept29h5dn] {
    display: block;
    max-height: 90px;
    overflow-y: auto;
    font-size: var(--nvx-text-sm);
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================================
   Shell de la aplicación.

   Dos cosas que hay que tener presentes para que este archivo funcione:

   1. Todo cuelga de .nvx-shell, el div envolvente de MainLayout.razor. En CSS
      aislado, una regla que EMPIEZA con ::deep necesita un ancestro con el
      atributo de ámbito; MudLayout no lo lleva porque es un componente, no un
      elemento del marcado propio. Sin ese div, nada de esto aplicaría.

   2. Las clases son las que emite MudBlazor 9: el grupo del menú es
      .mud-nav-group (NO .mud-nav-link-group, que era la de versiones previas),
      su cabecera es un <button class="mud-nav-link"> hijo directo, y cada
      enlace va envuelto en un .mud-nav-item.
   ============================================================================ */

/* ── Topbar ─────────────────────────────────────────────────────────────── */
/* El fondo del topbar y del menú es el de la empresa del usuario si tiene uno
   (columnas ColorBarra / ColorMenu, script 24), y si no el teal de Novacomex.
   El texto encima es siempre blanco: por eso ColorMarca rechaza un color con
   contraste menor a 4,5:1. */
.nvx-shell[b-irqkc5jop4]  .nvx-topbar {
    background: var(--nvx-shell-barra, var(--nvx-900));
    color: #fff;
}

/* Barra de marca. Va como pseudo-elemento y no como border-bottom porque
   MudBlazor ya controla los bordes del appbar. El turquesa, el verde y el cian
   son de Novacomex: con el color de otra empresa desentonaban, así que la
   paleta de la empresa la cambia por --nvx-franja (PaletaMarca.CssRaiz). */
.nvx-shell[b-irqkc5jop4]  .nvx-topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--nvx-franja, linear-gradient(90deg,
        var(--nvx-500) 0%,
        var(--nvx-success) 45%,
        var(--nvx-info) 100%));
}

/* ── Cabecera de marca del menú ─────────────────────────────────────────────
   Sección donde vive el logo. El logo conserva SIEMPRE sus colores originales
   (globo turquesa, "N" gris); lo que se le da es una superficie propia, porque
   sobre el fondo teal profundo del menú se mezclaría. Nunca se repinta.
   ────────────────────────────────────────────────────────────────────────── */
.nvx-shell[b-irqkc5jop4]  .nvx-brand {
    display: grid;
    place-items: center;
    padding: 14px 12px 16px;
    background: #ffffff;
    /* Alto fijo: evita que el menú salte al alternar entre lockup y símbolo. */
    min-height: 96px;
    box-sizing: border-box;
}

.nvx-shell[b-irqkc5jop4]  .nvx-brand__logo {
    height: 62px;
    width: auto;
    display: block;
}

.nvx-shell[b-irqkc5jop4]  .nvx-brand__mark {
    height: 34px;
    width: auto;
    display: block;
}

.nvx-shell[b-irqkc5jop4]  .nvx-drawer--mini .nvx-brand {
    padding: 12px 6px 14px;
    min-height: 76px;
}


/* ── Drawer ─────────────────────────────────────────────────────────────── */
.nvx-shell[b-irqkc5jop4]  .nvx-drawer {
    background: var(--nvx-shell-menu, var(--nvx-900));
    border-right: 0;
    overflow-x: hidden;
    transition: width .25s ease;
}

/* Se respeta la preferencia del sistema: sin animación de ancho. */
@media (prefers-reduced-motion: reduce) {
    .nvx-shell[b-irqkc5jop4]  .nvx-drawer { transition: none; }
}

/* ── Navegación ─────────────────────────────────────────────────────────── */
.nvx-shell[b-irqkc5jop4]  .nvx-nav {
    padding-top: 6px;
}

/* Enlaces y cabeceras de grupo. Blanco atenuado, no un gris de la rampa:
   sobre el fondo profundo lo que se quiere es transparencia, no otro color. */
.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-link {
    color: rgba(255, 255, 255, .72);
    font-size: var(--nvx-text-body);
    min-height: 38px;
    transition: background var(--nvx-transition), color var(--nvx-transition);
}

.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-link .mud-icon-root {
    color: rgba(255, 255, 255, .5);
    font-size: 19px;
}

.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-link:hover .mud-icon-root {
    color: var(--nvx-500);
}

/* Página actual. Se marca con una barra turquesa a la izquierda además del
   color de fondo: el estado activo no debe depender sólo del tono. */
.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-link.active {
    background: color-mix(in srgb, var(--nvx-500) 18%, transparent);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--nvx-500);
}

.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-link.active .mud-icon-root {
    color: var(--nvx-500);
}

/* Cabecera del grupo: hijo directo del <nav class="mud-nav-group">. */
.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-group > .mud-nav-link {
    font-weight: 600;
}

/* Grupo desplegado: se separa del anterior para que se lea como bloque. */
.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-group > .mud-nav-link.mud-expanded {
    color: #fff;
}

.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-group > .mud-nav-link.mud-expanded .mud-icon-root {
    color: var(--nvx-500);
}

/* Enlaces dentro de un grupo: indentados y un punto más chicos. */
.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-group .mud-nav-item .mud-nav-link {
    padding-left: 34px;
    font-size: var(--nvx-text-sm);
    min-height: 34px;
}

.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-group .mud-nav-item .mud-nav-link .mud-icon-root {
    font-size: 17px;
}

/* Flecha de expansión */
.nvx-shell[b-irqkc5jop4]  .nvx-nav .mud-nav-link-expand-icon {
    color: rgba(255, 255, 255, .42);
}

/* ══ MENÚ ENCOGIDO — sólo íconos ═════════════════════════════════════════════
   El texto de los enlaces son nodos de texto sueltos, no <span>, así que no se
   pueden ocultar directamente. Se colapsan con font-size:0 en el enlace y se
   restituye el tamaño en el ícono, que es un SVG dimensionado en em.
   ═══════════════════════════════════════════════════════════════════════════ */
.nvx-shell[b-irqkc5jop4]  .nvx-drawer--mini .nvx-nav .mud-nav-link {
    font-size: 0;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
}

.nvx-shell[b-irqkc5jop4]  .nvx-drawer--mini .nvx-nav .mud-nav-link .mud-icon-root {
    font-size: 21px;
    margin: 0;
}

/* La barra del elemento activo se mantiene: es lo que indica dónde se está
   cuando ya no hay texto. */
.nvx-shell[b-irqkc5jop4]  .nvx-drawer--mini .nvx-nav .mud-nav-link.active {
    box-shadow: inset 3px 0 0 var(--nvx-500);
}

/* Sin flecha de expansión ni submenús: con 64 px no hay dónde desplegarlos.
   Se abre el menú para navegar dentro de un grupo. */
.nvx-shell[b-irqkc5jop4]  .nvx-drawer--mini .nvx-nav .mud-nav-link-expand-icon,
.nvx-shell[b-irqkc5jop4]  .nvx-drawer--mini .nvx-nav .mud-nav-group .mud-collapse-container {
    display: none;
}

/* Encogido, "desplegado" no significa nada — los hijos están ocultos — y el
   ícono en turquesa se leía como si esa sección estuviera seleccionada. Se
   neutraliza para que el único destacado sea la página actual. */
.nvx-shell[b-irqkc5jop4]  .nvx-drawer--mini .nvx-nav .mud-nav-group > .mud-nav-link.mud-expanded,
.nvx-shell[b-irqkc5jop4]  .nvx-drawer--mini .nvx-nav .mud-nav-group > .mud-nav-link.mud-expanded:not(:hover) {
    color: rgba(255, 255, 255, .72);
    background: transparent;
    box-shadow: none;
}

.nvx-shell[b-irqkc5jop4]  .nvx-drawer--mini .nvx-nav .mud-nav-group > .mud-nav-link.mud-expanded:not(:hover) .mud-icon-root {
    color: rgba(255, 255, 255, .5);
}

/* ── Buscador del menú (2026-11-07) ──────────────────────────────────────────
   La caja va sobre el fondo oscuro del menú: borde y texto en blanco atenuado,
   como los enlaces, y el anillo de marca al enfocarla. */
.nvx-shell[b-irqkc5jop4]  .nvx-busca {
    padding: 10px 10px 2px;
}

.nvx-shell[b-irqkc5jop4]  .nvx-drawer--mini .nvx-busca {
    display: flex;
    justify-content: center;
    padding: 8px 0 0;
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__caja {
    margin: 0;
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__caja .mud-input {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    font-size: var(--nvx-text-sm);
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__caja .mud-input-slot::placeholder {
    color: rgba(255, 255, 255, .6);
    opacity: 1;
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__caja .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, .22);
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__caja .mud-input:hover .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, .45);
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__caja .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--nvx-500);
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__caja .mud-input-adornment .mud-icon-root,
.nvx-shell[b-irqkc5jop4]  .nvx-busca__caja .mud-input-clear-button {
    color: rgba(255, 255, 255, .6);
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__lupa {
    color: rgba(255, 255, 255, .72);
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__lupa:hover {
    color: var(--nvx-500);
}

/* Cada resultado lleva su nombre y, debajo, de qué sección cuelga. */
.nvx-shell[b-irqkc5jop4]  .nvx-nav--resultados .mud-nav-link {
    align-items: flex-start;
    padding-top: 7px;
    padding-bottom: 7px;
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__rotulo {
    display: block;
    line-height: 1.3;
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__camino {
    display: block;
    margin-top: 1px;
    font-size: var(--nvx-text-xs);
    font-weight: 400;
    color: rgba(255, 255, 255, .5);
    line-height: 1.3;
}

.nvx-shell[b-irqkc5jop4]  .nvx-busca__nada {
    padding: 12px 16px;
    font-size: var(--nvx-text-sm);
    color: rgba(255, 255, 255, .6);
}

/* ── Contenido ──────────────────────────────────────────────────────────── */
.nvx-shell[b-irqkc5jop4]  .nvx-main {
    background: var(--nvx-50);
    min-height: 100vh;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-uh44v29b41] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-uh44v29b41] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

.bi[b-uh44v29b41] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-uh44v29b41] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-uh44v29b41] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-uh44v29b41] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

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

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

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

    .nav-item[b-uh44v29b41]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

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

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

.nav-scrollable[b-uh44v29b41] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-uh44v29b41] {
    display: block;
}

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

    .nav-scrollable[b-uh44v29b41] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/NvxBuscadorDo.razor.rz.scp.css */
/* Buscador de D.O. del topbar. Va sobre el fondo teal profundo, así que los
   tonos son blanco atenuado y no grises de la rampa. */

.nvx-do[b-st42ldjqd4] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* ── Caja de búsqueda ───────────────────────────────────────────────────────
   Es un MudAutocomplete desde el 2026-11-07: se le pinta el campo con ::deep
   para que siga pareciendo la caja translúcida de siempre sobre la barra. */
.nvx-do[b-st42ldjqd4]  .nvx-do__caja {
    width: 220px;
    margin: 0;
}

.nvx-do[b-st42ldjqd4]  .nvx-do__caja .mud-input {
    height: 32px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-sm);
    transition: background var(--nvx-transition);
}

.nvx-do[b-st42ldjqd4]  .nvx-do__caja .mud-input:focus-within {
    background: rgba(255, 255, 255, .18);
}

.nvx-do[b-st42ldjqd4]  .nvx-do__caja .mud-input-slot::placeholder {
    color: rgba(255, 255, 255, .5);
    font-family: var(--nvx-font);
    opacity: 1;
}

.nvx-do[b-st42ldjqd4]  .nvx-do__caja .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, .18);
}

.nvx-do[b-st42ldjqd4]  .nvx-do__caja .mud-input:hover .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, .4);
}

.nvx-do[b-st42ldjqd4]  .nvx-do__caja .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--nvx-500);
}

.nvx-do[b-st42ldjqd4]  .nvx-do__caja .mud-input-adornment .mud-icon-root,
.nvx-do[b-st42ldjqd4]  .nvx-do__caja .mud-input-adornment-end .mud-icon-button {
    color: rgba(255, 255, 255, .6);
}

.nvx-do[b-st42ldjqd4]  .nvx-do__caja .mud-progress-linear {
    background: transparent;
}

/* ── Sugerencias ────────────────────────────────────────────────────────────
   La lista la dibuja MudBlazor fuera de este componente, pero lo de adentro
   viene de nuestro ItemTemplate y sí lleva el ámbito: se estiliza sin ::deep.
   Ancho propio: el de la caja no alcanza para el importador. */
.nvx-do__sugerencia[b-st42ldjqd4] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "nro meta"
        "imp imp";
    column-gap: var(--nvx-space-md);
    row-gap: 1px;
    width: min(420px, 86vw);
    padding: 2px 0;
}

.nvx-do__sug-nro[b-st42ldjqd4] {
    grid-area: nro;
    font-weight: 600;
    color: var(--nvx-800);
}

.nvx-do__sug-meta[b-st42ldjqd4] {
    grid-area: meta;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--nvx-space-sm);
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

.nvx-do__sug-imp[b-st42ldjqd4] {
    grid-area: imp;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

.nvx-do__sin[b-st42ldjqd4] {
    width: min(420px, 86vw);
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

/* ── D.O. activo ────────────────────────────────────────────────────────── */
.nvx-do__activo[b-st42ldjqd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 340px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--nvx-r-sm);
    /* Turquesa translúcido: se distingue del resto del topbar sin gritar. */
    background: color-mix(in srgb, var(--nvx-500) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--nvx-500) 55%, transparent);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--nvx-transition);
}

.nvx-do__activo:hover[b-st42ldjqd4] { background: color-mix(in srgb, var(--nvx-500) 34%, transparent); }

.nvx-do__activo-icono[b-st42ldjqd4] {
    font-size: 17px;
    color: var(--nvx-500);
    flex: none;
}

.nvx-do__nro[b-st42ldjqd4] {
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.nvx-do__importador[b-st42ldjqd4] {
    font-size: var(--nvx-text-xs);
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── Angosto ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .nvx-do__importador[b-st42ldjqd4] { display: none; }
    .nvx-do[b-st42ldjqd4]  .nvx-do__caja { width: 150px; }
}

@media (max-width: 620px) {
    .nvx-do[b-st42ldjqd4]  .nvx-do__caja { display: none; }
}
/* /Components/Pages/Anticipos/Anticipos.razor.rz.scp.css */
.pagina[b-w5x3kapzmy] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Estados de página ──────────────────────────────────────────────────── */

.ant__cargando[b-w5x3kapzmy] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-xl);
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

.ant__vacio[b-w5x3kapzmy] {
    margin: 0;
    max-width: 68ch;
    color: var(--nvx-gray-600);
    line-height: 1.55;
}

/* ── Cinta del documento ────────────────────────────────────────────────── */

.ant__doc[b-w5x3kapzmy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-lg);
    padding: 12px var(--nvx-space-md);
    background: var(--nvx-50);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-md);
}

.ant__docdato[b-w5x3kapzmy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ant__docdato--fin[b-w5x3kapzmy] {
    margin-left: auto;
    text-align: right;
}

.ant__doclabel[b-w5x3kapzmy] {
    font-size: var(--nvx-text-xs);
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-800);
    font-weight: 600;
}

.ant__docvalor[b-w5x3kapzmy] {
    font-size: var(--nvx-text-body);
    color: var(--nvx-gray-800);
    overflow-wrap: anywhere;
}

.ant__doctotal[b-w5x3kapzmy] {
    font-size: var(--nvx-text-h3);
    font-weight: 700;
    color: var(--nvx-900);
}

.ant__docestado[b-w5x3kapzmy] {
    display: flex;
    align-items: center;
}

/* ── Formularios ────────────────────────────────────────────────────────── */

/* PanelClass y Class viajan a componentes de MudBlazor, cuyo marcado no lleva el
   atributo de ámbito de esta página: hay que alcanzarlos con ::deep. */
.pagina[b-w5x3kapzmy]  .ant__panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: var(--nvx-space-md);
}

.pagina[b-w5x3kapzmy]  .ant__alerta {
    margin-bottom: var(--nvx-space-md);
}

.pagina[b-w5x3kapzmy]  .ant__observaciones {
    margin-top: var(--nvx-space-md);
}

.ant__rejilla[b-w5x3kapzmy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--nvx-space-md);
    align-items: start;
}

.ant__agregar[b-w5x3kapzmy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--nvx-space-sm);
    align-items: center;
    padding: var(--nvx-space-md);
    border-bottom: 1px solid var(--nvx-border);
    background: var(--nvx-gray-50);
}

.ant__barra[b-w5x3kapzmy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-sm);
    padding-top: var(--nvx-space-xs);
}

.ant__procesos[b-w5x3kapzmy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2px var(--nvx-space-md);
}

/* ── Totales ────────────────────────────────────────────────────────────── */

.ant__totales[b-w5x3kapzmy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-sm);
}

.ant__total[b-w5x3kapzmy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--nvx-gray-50);
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-sm);
}

.ant__total--fuerte[b-w5x3kapzmy] {
    background: var(--nvx-50);
    border-color: var(--nvx-300);
}

.ant__totallabel[b-w5x3kapzmy] {
    font-size: var(--nvx-text-xs);
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-gray-600);
    font-weight: 600;
}

.ant__totalvalor[b-w5x3kapzmy] {
    font-size: var(--nvx-text-h3);
    font-weight: 600;
    color: var(--nvx-gray-800);
}

.ant__total--fuerte .ant__totalvalor[b-w5x3kapzmy] {
    color: var(--nvx-900);
    font-weight: 700;
}

/* ── Tablas ─────────────────────────────────────────────────────────────── */

.ant__acciones[b-w5x3kapzmy] {
    text-align: right;
    white-space: nowrap;
}

.ant__sinvalor[b-w5x3kapzmy] {
    color: var(--nvx-warning-text);
    font-size: var(--nvx-text-sm);
    font-style: italic;
}

/* Las filas en blanco del consolidado son separadores del informe original. */
.ant__separador td[b-w5x3kapzmy] {
    height: 10px;
    padding: 0;
    background: var(--nvx-gray-50);
}

/* ── Notas ──────────────────────────────────────────────────────────────── */

.ant__nota[b-w5x3kapzmy] {
    margin: var(--nvx-space-sm) 0 0;
    padding: 0 var(--nvx-space-md);
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    line-height: 1.5;
    max-width: 90ch;
}

.ant__nota code[b-w5x3kapzmy] {
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-xs);
    background: var(--nvx-gray-100);
    border-radius: var(--nvx-r-sm);
    padding: 1px 5px;
}

/* ── Angosto ────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .pagina[b-w5x3kapzmy] {
        padding: 14px var(--nvx-space-md) 32px;
    }

    .ant__docdato--fin[b-w5x3kapzmy] {
        margin-left: 0;
        text-align: left;
    }
}
/* /Components/Pages/Anticipos/AnticiposPorLegalizar.razor.rz.scp.css */
/* Anticipos x Legalizar.

   Diez columnas, cuatro de ellas de dinero: la pagina es mas ancha que una de
   formulario y la tabla va en modo compacto. Todo el color sale de los tokens
   de nvx-theme.css; aqui no hay un solo hex. */

.pagina[b-z06iq0k58w] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── La alerta «D.O. legalizado sin transferencia» ────────────────────────── */

/* El atributo de ambito del CSS aislado no llega a la raiz de un componente
   hijo, asi que la NvxCard se tine desde este envoltorio propio con ::deep. */
.alerta[b-z06iq0k58w]  .nvx-card {
    border-color: var(--nvx-danger-bd);
}

.alerta[b-z06iq0k58w]  .nvx-card__head {
    background: var(--nvx-danger-bg);
    border-bottom-color: var(--nvx-danger-bd);
}

.alerta[b-z06iq0k58w]  .nvx-card__title,
.alerta[b-z06iq0k58w]  .nvx-card__icon {
    color: var(--nvx-danger-text);
}

/* La tabla de la alerta es corta —hoy cuatro filas— y va sin cabecera fija ni
   zebra: no justifica una NvxTable, que arrastra los tres estados. */
.tabla-alerta[b-z06iq0k58w] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nvx-text-sm);
}

.tabla-alerta th[b-z06iq0k58w] {
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    text-align: left;
    font-weight: 600;
    color: var(--nvx-danger-text);
    background: var(--nvx-danger-bg);
    border-bottom: 1px solid var(--nvx-danger-bd);
    white-space: nowrap;
}

.tabla-alerta td[b-z06iq0k58w] {
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    border-bottom: var(--nvx-border);
    vertical-align: top;
}

.tabla-alerta tr:last-child td[b-z06iq0k58w] {
    border-bottom: 0;
}

/* ── La tabla del reporte ─────────────────────────────────────────────────── */

/* La fecha de la vista trae hora, y en este reporte importa: dos anticipos del
   mismo dia al mismo proveedor solo se distinguen por ella. Va monoespaciada
   para que las columnas de digitos queden alineadas. */
.fecha[b-z06iq0k58w] {
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-xs);
    white-space: nowrap;
}
/* /Components/Pages/Anticipos/DlgBuscarAnticipo.razor.rz.scp.css */
.dlgant[b-4a6tmml4ag] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: min(720px, 80vw);
}

/* Rejilla y no flex: el campo es un componente de MudBlazor y su marcado no lleva
   el atributo de ámbito, así que no se puede seleccionar desde aquí. La rejilla lo
   coloca sin necesidad de tocarlo. */
.dlgant__filtro[b-4a6tmml4ag] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--nvx-space-sm);
}

.dlgant__accion[b-4a6tmml4ag] {
    text-align: right;
    white-space: nowrap;
}

/* La clase viaja a MudAlert, cuyo marcado no lleva el atributo de ámbito: ::deep. */
.dlgant[b-4a6tmml4ag]  .dlgant__nuevo {
    margin: 0;
}

.dlgant__nuevofila[b-4a6tmml4ag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvx-space-md);
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    .dlgant[b-4a6tmml4ag] {
        min-width: 0;
    }

    .dlgant__filtro[b-4a6tmml4ag] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Anticipos/DlgValorAnticipo.razor.rz.scp.css */
.dlgval[b-cduev37a0v] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: min(380px, 80vw);
    padding-top: var(--nvx-space-xs);
}
/* /Components/Pages/Anticipos/LegalizacionAnticipos.razor.rz.scp.css */
/* Legalización de anticipos.

   El sistema anterior traía 320 líneas de <style> pegadas en el .aspx —dos
   definiciones distintas de .style3, dos de .TextField, un .style8 rojo que
   nadie usaba— y encima colores puestos a mano en cada control. Aquí no hay ni
   un hex: todo sale de los tokens de nvx-theme.css. */

.pagina[b-29xycijxkv] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.leg__nota[b-29xycijxkv] {
    margin: 0;
}

.leg__alerta[b-29xycijxkv] {
    margin-bottom: var(--nvx-space-sm);
}

/* La casilla del valor y su campo son un solo filtro: van juntos en una celda
   de la rejilla de NvxFilterBar, no como dos campos sueltos. */
.leg__conmutador[b-29xycijxkv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leg__rejilla[b-29xycijxkv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
}

.leg__acciones[b-29xycijxkv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
    padding-top: var(--nvx-space-md);
    border-top: 1px solid var(--nvx-border);
}

/* Por qué el botón de legalizar está apagado. Un botón gris sin explicación
   obliga al usuario a adivinar, y aquí adivinar cuesta plata. */
.leg__pista[b-29xycijxkv] {
    margin: var(--nvx-space-sm) 0 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

.leg__aviso[b-29xycijxkv] {
    color: var(--nvx-danger-text);
    font-weight: 700;
}

/* El contenido de NvxTable llega por RenderFragment: sin ::deep el ámbito del
   CSS aislado no lo alcanza. */
.pagina[b-29xycijxkv]  .leg__th-check,
.pagina[b-29xycijxkv]  .leg__td-check {
    width: 44px;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

.pagina[b-29xycijxkv]  .leg__th-accion,
.pagina[b-29xycijxkv]  .leg__td-accion {
    width: 120px;
    white-space: nowrap;
}

/* La causación escogida como destino de la legalización. */
.pagina[b-29xycijxkv]  .leg__fila-activa > td {
    background: var(--nvx-100);
    font-weight: 600;
}

@media (max-width: 1023px) {
    .pagina[b-29xycijxkv] {
        padding: 12px var(--nvx-space-md) 32px;
    }

    .leg__rejilla[b-29xycijxkv] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Anticipos/TrazabilidadAnticipos.razor.rz.scp.css */
/* Trazabilidad Antic/Fact.

   Doce columnas en la tabla de causaciones, asi que la pagina es ancha. Arriba
   va una rejilla de cifras grandes: solicitado, recibido y causado son los tres
   numeros que el usuario compara de un vistazo, y en el sistema anterior estaban
   metidos dentro de un parrafo de texto en una caja multilinea. */

.pagina[b-hl1x2kyelx] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Cliente al lado del titulo de la tarjeta: acompana al numero de documento,
   no compite con el. */
.tz-cliente[b-hl1x2kyelx] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    font-weight: 600;
}

/* Rejilla de cifras. Se auto-ajusta: con cuatro datos caben cuatro columnas en
   escritorio y dos en un portatil angosto, sin fijar el numero de columnas. */
.tz-datos[b-hl1x2kyelx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-md);
}

.tz-dato[b-hl1x2kyelx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    background: var(--nvx-gray-50);
    border: 1px solid var(--nvx-border);
    border-left: 3px solid var(--nvx-500);
    border-radius: var(--nvx-r-md);
}

.tz-dato__rotulo[b-hl1x2kyelx] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-gray-600);
}

/* El importe es el dato principal del bloque. A 20px sigue cumpliendo contraste
   sobre el gris claro con el color de texto normal. */
.tz-dato__valor[b-hl1x2kyelx] {
    font-size: 20px;
    font-weight: 700;
    color: var(--nvx-gray-800);
    line-height: 1.2;
}

/* La fecha, el conteo o quien autorizo. Nunca es el dato principal. */
.tz-dato__pie[b-hl1x2kyelx] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    min-height: 1em;
}

/* Aviso dentro de la tarjeta: se separa de la rejilla de cifras que tiene
   encima. */
.tz-aviso[b-hl1x2kyelx] {
    margin-top: var(--nvx-space-md);
}

/* Fila escogida dentro de la lista de coincidencias. El fondo va en el <td> y
   no en el <tr>: la zebra de NvxTable pinta la fila, y el fondo de la celda
   queda por encima sin pelear a golpe de !important. */
tr.tz-sel td[b-hl1x2kyelx] {
    background: var(--nvx-100);
    font-weight: 600;
}

/* Columna del boton "Ver" en las tablas de desempate: que no se estire. */
.tz-accion[b-hl1x2kyelx] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Bajo 900px la rejilla de cifras pasa a una sola columna y el importe se
   encoge, para que no desborde el ancho de la tarjeta. */
@media (max-width: 900px) {
    .pagina[b-hl1x2kyelx] {
        padding-left: var(--nvx-space-md);
        padding-right: var(--nvx-space-md);
    }

    .tz-dato__valor[b-hl1x2kyelx] {
        font-size: var(--nvx-text-h3);
    }
}
/* /Components/Pages/Auth/AuthPanel.razor.rz.scp.css */
/* ============================================================================
   Marco de las pantallas de acceso.

   El fondo es la imagen del Novacomex legacy: una mano señalando un mapa del
   mundo, con los continentes en turquesa. La forma —dos columnas sobre la foto,
   marca a la izquierda y formulario a la derecha— es la que NovacomexRH le dio
   a su ingreso, para que las dos aplicaciones se entren igual.

   El panel del formulario NO es blanco sólido: es traslúcido con desenfoque
   detrás, así la foto se sigue viendo a través de él. El nivel de opacidad no
   es estético: por debajo de ~.85 el texto gris sobre la foto deja de pasar el
   contraste mínimo.
   ============================================================================ */

.acceso[b-mkst7oyvmi] {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--nvx-space-lg);
    overflow: hidden;
}

/* ── Fondo ──────────────────────────────────────────────────────────────── */
.acceso__fondo[b-mkst7oyvmi] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Velo de marca. Más cargado a la derecha, que es donde va el formulario y
   donde el texto necesita fondo estable. */
.acceso__velo[b-mkst7oyvmi] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg,
        rgba(0, 68, 64, .58) 0%,
        rgba(0, 68, 64, .68) 45%,
        rgba(0, 51, 48, .80) 100%);
}

/* Círculos de la casa: dan profundidad sin competir con la foto. */
.acceso__deco[b-mkst7oyvmi] {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    pointer-events: none;
}

.acceso__deco--1[b-mkst7oyvmi] { width: 340px; height: 340px; top: -120px; right: -70px; }
.acceso__deco--2[b-mkst7oyvmi] { width: 240px; height: 240px; bottom: -60px; left: -80px; }
.acceso__deco--3[b-mkst7oyvmi] { width: 140px; height: 140px; top: 44%; left: 38%; }

/* ── Rejilla ────────────────────────────────────────────────────────────── */
.acceso__grid[b-mkst7oyvmi] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nvx-space-xl);
    align-items: center;
}

@media (min-width: 940px) {
    .acceso__grid[b-mkst7oyvmi] { grid-template-columns: 1fr 400px; gap: 56px; }
}

/* ── Marca ──────────────────────────────────────────────────────────────── */
.marca[b-mkst7oyvmi] {
    color: var(--nvx-white);
    text-align: center;
}

@media (min-width: 940px) {
    .marca[b-mkst7oyvmi] { text-align: left; }
}

.marca__titulo[b-mkst7oyvmi] {
    margin: 0;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: var(--nvx-tracking-tight);
    color: var(--nvx-white);
    line-height: 1.1;
}

.marca__sub[b-mkst7oyvmi] {
    margin: 10px 0 0;
    max-width: 44ch;
    font-size: 15px;
    color: rgba(255, 255, 255, .78);
}

@media (min-width: 940px) {
    .marca__sub[b-mkst7oyvmi] { margin-left: 0; }
}

.marca__puntos[b-mkst7oyvmi] {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    gap: 11px;
    text-align: left;
}

.marca__puntos li[b-mkst7oyvmi] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--nvx-text-body);
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

.punto[b-mkst7oyvmi] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.punto--marca[b-mkst7oyvmi] { background: var(--nvx-500); }
.punto--ok[b-mkst7oyvmi]    { background: var(--nvx-success); }
.punto--info[b-mkst7oyvmi]  { background: var(--nvx-info); }

/* ── Panel del formulario ───────────────────────────────────────────────────
   Traslúcido con desenfoque: la foto se ve pasar por detrás. Donde el
   navegador no soporte backdrop-filter, el @supports de abajo lo deja opaco
   antes que ilegible.
   ────────────────────────────────────────────────────────────────────────── */
.panel[b-mkst7oyvmi] {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--nvx-r-lg);
    box-shadow: var(--nvx-shadow-lg);
    overflow: hidden;
    animation: nvx-fade-up .35s ease both;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .panel[b-mkst7oyvmi] { background: rgba(255, 255, 255, .97); }
}

/* El mismo remate que lleva el topbar de la aplicación. */
.panel__barra[b-mkst7oyvmi] {
    height: 4px;
    background: linear-gradient(90deg,
        var(--nvx-500) 0%,
        var(--nvx-success) 45%,
        var(--nvx-info) 100%);
}

.panel__cuerpo[b-mkst7oyvmi] {
    padding: 28px 30px 26px;
    display: flex;
    flex-direction: column;
}

/* El logo encabeza el formulario. El panel es claro, así que va con sus
   colores originales y sin superficie propia. */
.panel__logo[b-mkst7oyvmi] {
    display: block;
    height: 64px;
    width: auto;
    margin: 0 auto 18px;
}

.panel__titulo[b-mkst7oyvmi] {
    margin: 0;
    text-align: center;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-tight);
    color: var(--nvx-800);
}

.panel__sub[b-mkst7oyvmi] {
    margin: 6px 0 18px;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    line-height: 1.5;
    text-align: center;
}

/* Los campos sí van sobre blanco sólido: un input traslúcido sobre una foto
   se lee mal justo cuando el usuario está escribiendo. Aplica a los campos de
   cualquiera de las tres pantallas de acceso. */
.panel__cuerpo[b-mkst7oyvmi]  .mud-input-slot,
.panel__cuerpo[b-mkst7oyvmi]  .mud-input-control .mud-input.mud-input-outlined {
    background: var(--nvx-white);
    border-radius: var(--nvx-r-sm);
}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.acceso__pie[b-mkst7oyvmi] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
    text-align: center;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-white);
    text-shadow: 0 1px 3px rgba(0, 40, 38, .55);
}

.acceso__pie a[b-mkst7oyvmi] {
    color: var(--nvx-white);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.acceso__pie a:hover[b-mkst7oyvmi] { border-bottom-color: var(--nvx-white); }

/* ── Angosto ────────────────────────────────────────────────────────────── */
@media (max-width: 939px) {
    .acceso[b-mkst7oyvmi] {
        align-items: flex-start;
        padding: var(--nvx-space-lg) var(--nvx-space-md) 56px;
    }

    .acceso__grid[b-mkst7oyvmi] { max-width: 420px; gap: var(--nvx-space-lg); }

    .marca__titulo[b-mkst7oyvmi] { font-size: 26px; }

    /* En vertical la lista alarga la pantalla y empuja el formulario abajo. */
    .marca__puntos[b-mkst7oyvmi] { display: none; }
}

@media (max-width: 420px) {
    .panel__cuerpo[b-mkst7oyvmi] { padding: 22px 20px 22px; }
    .panel__logo[b-mkst7oyvmi] { height: 54px; }
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* Formulario de ingreso. El fondo, el panel y el pie los pone AuthPanel. */

.login__alerta[b-p5evscbkpk] { margin-bottom: 16px; }

.login__campos[b-p5evscbkpk] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.login__boton[b-p5evscbkpk] { margin-bottom: 16px; }

.login__spin[b-p5evscbkpk] {
    width: 17px;
    height: 17px;
    margin-right: 9px;
}

.login__olvido[b-p5evscbkpk] {
    align-self: center;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-700);
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: border-color var(--nvx-transition);
}

.login__olvido:hover[b-p5evscbkpk] { border-bottom-color: currentColor; }
/* /Components/Pages/Auth/RecuperarClave.razor.rz.scp.css */
/* Recuperación de contraseña. El marco lo pone AuthPanel. */

.rec__alerta[b-aqs10643ex] { margin-bottom: 16px; }

.rec__campo[b-aqs10643ex] { margin-bottom: 18px; }

.rec__campos[b-aqs10643ex] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

/* Seis dígitos: monoespaciado y espaciado, para compararlo de un vistazo con
   el que llegó al correo. */
.rec__codigo[b-aqs10643ex]  input {
    font-family: var(--nvx-font-mono);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 10px;
    text-align: center;
    padding-left: 10px;
}

.rec__boton[b-aqs10643ex] { margin-bottom: 16px; }

.rec__spin[b-aqs10643ex] {
    width: 17px;
    height: 17px;
    margin-right: 9px;
}

.rec__enlace[b-aqs10643ex] {
    align-self: center;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-700);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--nvx-transition);
}

.rec__enlace:hover[b-aqs10643ex] { border-bottom-color: currentColor; }
/* /Components/Pages/Auth/VerificarCodigo.razor.rz.scp.css */
/* Verificación del código. El marco lo pone AuthPanel. */

.cod__alerta[b-d6d2pm6v3z] { margin-bottom: 16px; }

.cod__campo[b-d6d2pm6v3z] { margin-bottom: 18px; }

/* El código son seis dígitos: monoespaciado, grande y espaciado, para poder
   compararlo de un vistazo con el que llegó al correo. */
.cod__campo[b-d6d2pm6v3z]  input {
    font-family: var(--nvx-font-mono);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 10px;
    text-align: center;
    padding-left: 10px;   /* compensa el espaciado del último dígito */
}

.cod__boton[b-d6d2pm6v3z] { margin-bottom: 16px; }

.cod__spin[b-d6d2pm6v3z] {
    width: 17px;
    height: 17px;
    margin-right: 9px;
}

.cod__acciones[b-d6d2pm6v3z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cod__enlace[b-d6d2pm6v3z] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-700);
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: border-color var(--nvx-transition);
}

.cod__enlace:hover:not(:disabled)[b-d6d2pm6v3z] { border-bottom-color: currentColor; }

.cod__enlace:disabled[b-d6d2pm6v3z] {
    color: var(--nvx-gray-400);
    cursor: default;
}
/* /Components/Pages/Clientes/ExportadorControl.razor.rz.scp.css */
/* Maestro de clientes.

   Todo el color sale de los tokens de nvx-theme.css. La versión anterior de
   esta pantalla llevaba tres hex a mano —#f0f8f8, #b2dfdb, #e0f2f1— y
   veintiún estilos en línea. */

.cli[b-ciy391mdgf] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── La barra de acciones ─────────────────────────────────────────────── */

.cli__barra[b-ciy391mdgf] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    flex-wrap: wrap;
    padding: 10px var(--nvx-space-md);
    background: var(--nvx-50);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-md);
}

/* Qué cliente está abierto, para no perderlo de vista entre siete pestañas. */
.cli__abierto[b-ciy391mdgf] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    white-space: nowrap;
}

.cli__abierto b[b-ciy391mdgf] {
    color: var(--nvx-800);
}

/* ── Las pestañas ─────────────────────────────────────────────────────── */

.cli__tabs[b-ciy391mdgf] {
    background: #fff;
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
    overflow: hidden;
}

/* El contenido llega por RenderFragment, así que necesita ::deep. */
.cli__tabs[b-ciy391mdgf]  .mud-tabs-panels {
    padding: var(--nvx-space-md);
}

.cli__tabs[b-ciy391mdgf]  .mud-tab {
    text-transform: none;
    font-weight: 600;
}

/* ── La tabla de documentos del cliente ───────────────────────────────── */

.cli__tabla[b-ciy391mdgf] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nvx-text-sm);
}

.cli__tabla thead tr[b-ciy391mdgf] {
    background: var(--nvx-100);
}

.cli__tabla th[b-ciy391mdgf] {
    text-align: left;
    padding: 6px 8px;
    font-weight: 600;
    color: var(--nvx-800);
    border-bottom: 1px solid var(--nvx-200);
    white-space: nowrap;
}

.cli__tabla td[b-ciy391mdgf] {
    padding: 3px 8px;
    border-bottom: 1px solid var(--nvx-gray-100);
    vertical-align: middle;
}

.cli__tabla tbody tr:hover[b-ciy391mdgf] {
    background: var(--nvx-50);
}

.cli__th-chk[b-ciy391mdgf],
.cli__td-chk[b-ciy391mdgf] {
    text-align: center;
    white-space: nowrap;
    width: 80px;
}

/* ── Buscar un cliente ────────────────────────────────────────────────── */

.cli__buscar[b-ciy391mdgf] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--nvx-space-sm);
}

.cli__buscar > :first-child[b-ciy391mdgf] {
    flex: 1 1 320px;
}

.cli__grid[b-ciy391mdgf]  .mud-table-row {
    cursor: pointer;
}

.cli__vacio[b-ciy391mdgf] {
    padding: var(--nvx-space-lg);
    text-align: center;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

/* ── Angosto ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .cli[b-ciy391mdgf] {
        padding: 12px var(--nvx-space-md) 32px;
    }

    .cli__barra[b-ciy391mdgf] {
        gap: 6px;
    }
}

/* ── Historial ────────────────────────────────────────────────────────── */

.cli__hist-filtros[b-ciy391mdgf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--nvx-space-sm);
    align-items: center;
    margin-bottom: var(--nvx-space-sm);
}

/* Un valor largo no debe estirar la tabla; se corta y se ve completo al pasar
   por encima. */
.cli__hist-valor[b-ciy391mdgf] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nvx-gray-600);
}

.cli__hist-valor--nuevo[b-ciy391mdgf] {
    color: var(--nvx-gray-800);
    font-weight: 600;
}
/* /Components/Pages/Clientes/Pqr.razor.rz.scp.css */
.pagina[b-ejuz4j0xcx] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pqr__rejilla[b-ejuz4j0xcx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

.pqr__ancho[b-ejuz4j0xcx]  { grid-column: span 2; }
.pqr__ancho3[b-ejuz4j0xcx] { grid-column: span 3; }

@media (max-width: 900px) {
    .pqr__ancho[b-ejuz4j0xcx], .pqr__ancho3[b-ejuz4j0xcx] { grid-column: span 1; }
}

.pqr__acciones[b-ejuz4j0xcx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin: var(--nvx-space-md) 0;
}

/* Se abre pinchando la fila. */
.pagina[b-ejuz4j0xcx]  .pqr__fila { cursor: pointer; }

.pagina[b-ejuz4j0xcx]  .pqr__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Comercial/BusquedaTarifa.razor.rz.scp.css */
/* Busqueda comparativa de tarifas.

   Diecinueve columnas en la forma FCL, varias con una segunda linea (el pais
   bajo el puerto, el desglose bajo el total). Es una pantalla de comparacion:
   la tabla manda y la pagina se ensancha para darle sitio. El scroll horizontal
   ocurre dentro de NvxTable, nunca en el body. */

.pagina[b-410aa01pj4] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Segunda linea de una celda: el pais bajo el puerto, los dias libres en
   destino bajo los de origen, el desglose por unidad bajo el total de gastos.
   Nunca es el dato principal. */
.sub[b-410aa01pj4] {
    display: block;
    margin-top: 2px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    font-weight: 400;
}

/* La segunda linea de una celda numerica hereda la fuente monoespaciada de
   .nvx-num, que es justo lo que se quiere para que las cifras del desglose
   sigan alineadas con el total de arriba. Solo se le baja el peso. */

/* El all in y el flete W/M son las cifras por las que se compara: se leen
   primero. El resto de columnas numericas son el detalle que las explica. */
.destacado[b-410aa01pj4] {
    font-weight: 700;
    color: var(--nvx-800);
}

/* Las fechas de vigencia no son cifras que se sumen, pero si se comparan
   verticalmente entre filas: se alinean igual que los numeros. */
.fecha[b-410aa01pj4] {
    font-family: var(--nvx-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Las observaciones son texto libre del comercial: llegan largas y con
   separadores //. Se cortan a un ancho fijo y el texto completo queda en el
   title de la celda. */
.obs[b-410aa01pj4] {
    display: inline-block;
    max-width: 280px;
    max-height: 3.2em;
    overflow: hidden;
    word-break: break-word;
}

.vacio[b-410aa01pj4] {
    color: var(--nvx-gray-400);
}
/* /Components/Pages/Comercial/ConceptoTarifas.razor.rz.scp.css */
.pagina[b-jmoq2xylnw] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* La empresa es lo que agrupa mentalmente la lista: se lee primero. */
.ctf__empresa[b-jmoq2xylnw] {
    font-weight: 600;
    white-space: nowrap;
}

/* Nombres de naviera y de tercero son largos; se dejan romper antes que estirar
   la tabla y forzar scroll horizontal. */
.ctf__contraparte[b-jmoq2xylnw] {
    min-width: 220px;
}

.ctf__acciones[b-jmoq2xylnw] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    white-space: nowrap;
}
/* /Components/Pages/Comercial/Cotizar.razor.rz.scp.css */
/* Cotizar — Comercial.
   Migración de Presentacion/Comercial/Cotizar.aspx. */

.cot[b-a9o826psvu] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Consecutivo ──
   Reemplaza el <h1 id="concecutivo">---------------</h1> del legacy, que ocupaba
   una línea entera para mostrar quince guiones cuando no había nada. */
.cot__consecutivo[b-a9o826psvu] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    background: var(--nvx-100);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.cot__consecutivo-label[b-a9o826psvu] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-800);
}

.cot__consecutivo-valor[b-a9o826psvu] {
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-h2);
    font-weight: 700;
    color: var(--nvx-900);
    /* #concecutivo { text-transform: uppercase } del legacy */
    text-transform: uppercase;
}

.cot__consecutivo-valor--vacio[b-a9o826psvu] {
    color: var(--nvx-gray-400);
    font-weight: 400;
    text-transform: none;
}

/* ── Tarifa integrada ──
   El contenido lo pone MudAlert, así que hace falta ::deep para alcanzarlo. */
.cot__tarifario[b-a9o826psvu]  .cot__tarifario-fila,
.cot__tarifario-fila[b-a9o826psvu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nvx-space-md);
    width: 100%;
}

/* ── Rejilla de campos ──
   Auto-ajustable a propósito: el legacy fijaba columnas de Bootstrap (col-md-4)
   y por debajo de 1024px los campos se encimaban. */
.cot__grid[b-a9o826psvu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--nvx-space-md);
    align-items: start;
}

/* El estado sigue editable con la cotización bloqueada, así que va en su propia
   rejilla fuera del fieldset deshabilitado. */
.cot__grid--estado[b-a9o826psvu] {
    margin-top: var(--nvx-space-md);
}

.cot__ancho[b-a9o826psvu] {
    grid-column: 1 / -1;
}

.cot__rotulo[b-a9o826psvu] {
    display: block;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    margin-bottom: 2px;
}

/* Un fieldset deshabilitado apaga todo lo que tiene dentro de una vez. Es la
   forma limpia de replicar DeshabilitarBotones(), que en el legacy recorría tres
   colecciones de clases cambiando pointerEvents a mano. */
.cot__fieldset[b-a9o826psvu] {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.cot__fieldset[disabled][b-a9o826psvu] {
    opacity: 0.72;
}

.cot__checks[b-a9o826psvu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-md);
    align-items: center;
    margin-top: var(--nvx-space-md);
}

.cot__acciones[b-a9o826psvu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
    padding-top: var(--nvx-space-md);
    border-top: var(--nvx-border);
}

/* ── Grids ── */

/* La fila que se está editando, para no perderla de vista al desplazarse. */
.cot__fila-activa td[b-a9o826psvu] {
    background: var(--nvx-100);
}

/* Descripción y comentario son campos largos: sin techo, una fila estira la tabla
   entera. El texto completo queda en el title. */
.cot__desc[b-a9o826psvu] {
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nvx-gray-600);
}

.cot__td-acciones[b-a9o826psvu] {
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .cot[b-a9o826psvu] {
        padding: 14px var(--nvx-space-md) 32px;
    }
}
/* /Components/Pages/Comercial/DashboardComercial.razor.rz.scp.css */
/* Tablero comercial.

   Tres pestañas sobre los mismos filtros: la tabla del reto, el radar del área y
   los relojes de cumplimiento. El radar y los relojes son SVG propios; el
   original los traía de Chart.js y ApexCharts por CDN.

   Todo el color sale de var(--nvx-*). En SVG eso funciona porque una regla CSS
   siempre gana sobre un atributo de presentación, así que aquí se fijan `fill` y
   `stroke` y en el marcado no hay un solo color. */

.pagina[b-bepxeuzvnx] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* El panel lo dibuja MudTabs, no esta página: sin ::deep el atributo de ámbito
   no llega y la regla no aplicaría. */
.pagina[b-bepxeuzvnx]  .tab__panel {
    padding-top: 14px;
}

/* La fila «Global» del procedimiento no es un ejecutivo más: es el total del
   indicador. Se marca para que nadie la sume con las demás. */
.fila-global[b-bepxeuzvnx] {
    background: var(--nvx-100);
    font-weight: 700;
}

/* Cargando / vacío / error de los bloques que no son NvxTable (el radar y la
   rejilla de relojes traen sus estados aquí). */
.estado[b-bepxeuzvnx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 180px;
    padding: var(--nvx-space-lg);
    text-align: center;
    font-size: var(--nvx-text-body);
    color: var(--nvx-gray-600);
}

.estado--error[b-bepxeuzvnx] {
    color: var(--nvx-danger-text);
    background: var(--nvx-danger-bg);
    border: 1px solid var(--nvx-danger-bd);
    border-radius: var(--nvx-r-md);
}

/* ── Pestaña Gráfico ─────────────────────────────────────────────────────────
   El radar al lado de la tabla mientras haya ancho; debajo cuando no. El
   original los ponía en dos columnas fijas de Bootstrap que sumaban catorce de
   doce, y en pantallas medianas la gráfica se salía. */

.grafico[b-bepxeuzvnx] {
    display: grid;
    grid-template-columns: minmax(420px, 5fr) minmax(340px, 6fr);
    gap: var(--nvx-space-md);
    align-items: start;
}

@media (max-width: 1180px) {
    .grafico[b-bepxeuzvnx] {
        grid-template-columns: 1fr;
    }
}

/* La clase se la pasamos a NvxCard, que la pinta en su propio marcado: hace
   falta ::deep. Sin min-width:0 la rejilla no deja encoger la tarjeta y el SVG
   desborda a lo ancho. */
.grafico[b-bepxeuzvnx]  .grafico__radar {
    min-width: 0;
}

/* ── Radar ───────────────────────────────────────────────────────────────── */

.radar[b-bepxeuzvnx] {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.radar__rejilla[b-bepxeuzvnx] {
    fill: none;
    stroke: var(--nvx-gray-200);
    stroke-width: 1;
}

.radar__eje[b-bepxeuzvnx] {
    stroke: var(--nvx-gray-200);
    stroke-width: 1;
}

/* El 100% de la meta: es la referencia contra la que se lee todo lo demás, así
   que va punteado y en el turquesa de marca, no en gris. */
.radar__meta[b-bepxeuzvnx] {
    fill: none;
    stroke: var(--nvx-500);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.radar__serie[b-bepxeuzvnx] {
    fill: var(--nvx-300);
    fill-opacity: .35;
    stroke: var(--nvx-700);
    stroke-width: 2;
    stroke-linejoin: round;
}

.radar__punto[b-bepxeuzvnx] {
    stroke: var(--nvx-white);
    stroke-width: 1.5;
}

.radar__punto.es-bajo[b-bepxeuzvnx] { fill: var(--nvx-danger); }
.radar__punto.es-medio[b-bepxeuzvnx] { fill: var(--nvx-warning); }
.radar__punto.es-alto[b-bepxeuzvnx] { fill: var(--nvx-success); }

.radar__rotulo[b-bepxeuzvnx] {
    fill: var(--nvx-gray-600);
    font-family: var(--nvx-font);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .01em;
}

.radar__pie[b-bepxeuzvnx] {
    margin: var(--nvx-space-sm) 0 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    line-height: 1.5;
}

.radar__pie span[b-bepxeuzvnx] {
    display: block;
    margin-top: 3px;
    color: var(--nvx-warning-text);
}

/* ── Relojes ─────────────────────────────────────────────────────────────────
   Rejilla que se auto-ajusta: el original fijaba tres columnas al 33% y en
   portátil los relojes se montaban unos sobre otros. */

.relojes[b-bepxeuzvnx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--nvx-space-md);
}

.reloj[b-bepxeuzvnx] {
    margin: 0;
    padding: var(--nvx-space-md) var(--nvx-space-sm) var(--nvx-space-sm);
    background: var(--nvx-white);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    box-shadow: var(--nvx-shadow-sm);
    text-align: center;
}

.reloj__svg[b-bepxeuzvnx] {
    display: block;
    width: 100%;
    max-width: 190px;
    margin: 0 auto;
    height: auto;
}

.reloj__pista[b-bepxeuzvnx] {
    fill: none;
    stroke: var(--nvx-gray-100);
    stroke-width: 11;
    stroke-linecap: round;
}

.reloj__valor[b-bepxeuzvnx] {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
}

/* Las tres bandas del semáforo. El original tenía seis, con los hex escritos a
   mano en el JavaScript de la página. */
.reloj.es-bajo .reloj__valor[b-bepxeuzvnx] { stroke: var(--nvx-danger); }
.reloj.es-medio .reloj__valor[b-bepxeuzvnx] { stroke: var(--nvx-warning); }
.reloj.es-alto .reloj__valor[b-bepxeuzvnx] { stroke: var(--nvx-success); }

.reloj__cifra[b-bepxeuzvnx] {
    font-family: var(--nvx-font-mono);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    fill: var(--nvx-gray-800);
}

.reloj.es-bajo .reloj__cifra[b-bepxeuzvnx] { fill: var(--nvx-danger-text); }
.reloj.es-medio .reloj__cifra[b-bepxeuzvnx] { fill: var(--nvx-warning-text); }
.reloj.es-alto .reloj__cifra[b-bepxeuzvnx] { fill: var(--nvx-success-text); }

.reloj__pie[b-bepxeuzvnx] {
    margin-top: 2px;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-800);
    line-height: 1.4;
}

.reloj__nota[b-bepxeuzvnx] {
    display: block;
    margin-top: 2px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--nvx-success-text);
}
/* /Components/Pages/Comercial/DlgBuscarClienteSolicitud.razor.rz.scp.css */
/* Diálogo «Buscar cliente» del seguimiento de solicitudes. */

.bcli[b-d9pe8kwxaw] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 340px;
}

.bcli__tabla[b-d9pe8kwxaw] {
    min-width: 0;
}
/* /Components/Pages/Comercial/DlgConceptoTarifa.razor.rz.scp.css */
.dlgct[b-yb8449q0jr] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: 0;
}

.dlgct__cargando[b-yb8449q0jr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    color: var(--nvx-gray-600);
}

.dlgct__bloque[b-yb8449q0jr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dlgct__titulo[b-yb8449q0jr] {
    margin: 0;
    padding-bottom: 6px;
    border-bottom: var(--nvx-border);
    color: var(--nvx-800);
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--nvx-tracking-label);
}

.dlgct__fila3[b-yb8449q0jr] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    align-items: start;
}

/* Concepto, aplica por, obligatorio y el botón, en una sola línea: agregar un
   concepto es el gesto que más se repite en esta pantalla. */
.dlgct__agregar[b-yb8449q0jr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px auto auto;
    gap: 12px;
    align-items: center;
}

@media (max-width: 860px) {
    .dlgct__fila3[b-yb8449q0jr] { grid-template-columns: 1fr; }
    .dlgct__agregar[b-yb8449q0jr] { grid-template-columns: 1fr; }
}

.dlgct__sinconceptos[b-yb8449q0jr] {
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--nvx-gray-200);
    border-radius: var(--nvx-r-md);
    background: var(--nvx-gray-50);
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    line-height: 1.5;
}

/* ── Tabla de conceptos ───────────────────────────────────────────────────── */

.dlgct__tabla[b-yb8449q0jr] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nvx-text-sm);
}

.dlgct__tabla thead th[b-yb8449q0jr] {
    text-align: left;
    padding: 8px 10px;
    background: var(--nvx-800);
    color: var(--nvx-white);
    font-weight: 600;
    font-size: var(--nvx-text-xs);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.dlgct__tabla thead th:first-child[b-yb8449q0jr] { border-radius: var(--nvx-r-sm) 0 0 0; }
.dlgct__tabla thead th:last-child[b-yb8449q0jr]  { border-radius: 0 var(--nvx-r-sm) 0 0; }

.dlgct__tabla tbody td[b-yb8449q0jr] {
    padding: 6px 10px;
    border-bottom: var(--nvx-border);
    vertical-align: middle;
}

.dlgct__tabla tbody tr:nth-child(even)[b-yb8449q0jr] {
    background: var(--nvx-gray-50);
}

.dlgct__col-obl[b-yb8449q0jr] { width: 110px; text-align: center; }
.dlgct__col-apl[b-yb8449q0jr] { width: 190px; }
.dlgct__col-acc[b-yb8449q0jr] { width: 56px; text-align: right; }

.dlgct__spin[b-yb8449q0jr] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
/* /Components/Pages/Comercial/DlgCumplimiento.razor.rz.scp.css */
.dlgcmp[b-axhqlflwt7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding-top: var(--nvx-space-xs);
}

.dlgcmp__cargando[b-axhqlflwt7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    color: var(--nvx-gray-600);
}

/* Dos campos por renglón; en pantalla angosta, uno debajo del otro. */
.dlgcmp__fila2[b-axhqlflwt7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

@media (max-width: 720px) {
    .dlgcmp__fila2[b-axhqlflwt7] {
        grid-template-columns: 1fr;
    }
}

/* El avance se calcula mientras se escribe: evita guardar y volver a la rejilla
   sólo para comprobar que el número quedó donde se esperaba. */
.dlgcmp__avance[b-axhqlflwt7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px var(--nvx-space-md);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-md);
    background: var(--nvx-50);
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

.dlgcmp__avance b[b-axhqlflwt7] {
    color: var(--nvx-800);
    font-size: var(--nvx-text-h3);
}

.dlgcmp__spin[b-axhqlflwt7] {
    margin-right: var(--nvx-space-sm);
}
/* /Components/Pages/Comercial/DlgDuplicarCotizacion.razor.rz.scp.css */
/* Duplicar cotización.
   Migra el modal «duplicate-modalC» de Presentacion/Comercial/Cotizar.aspx. */

.dupcot[b-tjtu1jy7ug] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: min(560px, 78vw);
}

/* Origen → copia. En el legacy el número de la copia vivía en un div con
   display:none y el usuario duplicaba sin verlo. */
.dupcot__cabecera[b-tjtu1jy7ug] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nvx-space-md);
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    background: var(--nvx-100);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.dupcot__rotulo[b-tjtu1jy7ug] {
    display: block;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-800);
}

.dupcot__valor[b-tjtu1jy7ug] {
    display: block;
    font-size: var(--nvx-text-body);
    font-weight: 700;
    color: var(--nvx-900);
}

.dupcot__valor--nuevo[b-tjtu1jy7ug] {
    color: var(--nvx-700);
}

.dupcot__grid[b-tjtu1jy7ug] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--nvx-space-md);
    align-items: start;
}

.dupcot__nota[b-tjtu1jy7ug] {
    color: var(--nvx-gray-600);
}

@media (max-width: 1024px) {
    .dupcot[b-tjtu1jy7ug] {
        min-width: 0;
    }
}
/* /Components/Pages/Comercial/DlgTarifaCotizacion.razor.rz.scp.css */
/* Línea de tarifa de una cotización.
   Migra rate-modalGuardar y rate-modalEdit de Presentacion/Comercial/Cotizar.aspx. */

.tarcot[b-9b7hm4b5uh] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: min(640px, 78vw);
}

/* Rejilla auto-ajustable: el legacy repartía col-md-3 / col-md-6 a mano y el
   JavaScript se los intercambiaba en caliente según la sección. */
.tarcot__grid[b-9b7hm4b5uh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--nvx-space-md);
    align-items: start;
}

.tarcot__ancho[b-9b7hm4b5uh] {
    grid-column: 1 / -1;
}

.tarcot__rotulo[b-9b7hm4b5uh] {
    display: block;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    margin-bottom: 2px;
}

/* Resumen de la liquidación. No existe en el legacy: allí el número sólo
   aparecía después de guardar, ya en el grid. */
.tarcot__resumen[b-9b7hm4b5uh] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    background: var(--nvx-100);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.tarcot__resumen-rotulo[b-9b7hm4b5uh] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-800);
}

.tarcot__resumen-valor[b-9b7hm4b5uh] {
    font-size: var(--nvx-text-h3);
    font-weight: 700;
    color: var(--nvx-900);
}

.tarcot__resumen-nota[b-9b7hm4b5uh] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

@media (max-width: 1024px) {
    .tarcot[b-9b7hm4b5uh] {
        min-width: 0;
    }
}
/* /Components/Pages/Comercial/DlgTarifaItem.razor.rz.scp.css */
.dlgitem[b-0gg6a0ovt0] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    padding-top: 4px;
}

.dlgitem__rejilla[b-0gg6a0ovt0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
}

.dlgitem__rangos[b-0gg6a0ovt0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--nvx-space-sm);
}

.dlgitem__seccion[b-0gg6a0ovt0] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-md);
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
    background: var(--nvx-gray-50);
}

.dlgitem__rotulo[b-0gg6a0ovt0] {
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    color: var(--nvx-800);
}

.dlgitem__spin[b-0gg6a0ovt0] {
    margin-right: 8px;
}
/* /Components/Pages/Comercial/MaestroCumplimiento.razor.rz.scp.css */
.pagina[b-4y0l5y6yqz] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* El indicador es la columna que el usuario lee primero para ubicarse. */
.mc__tipo[b-4y0l5y6yqz] {
    font-weight: 600;
}

/* Marca que el cumplimiento de ese indicador lo calcula el tablero: explica por
   qué la columna aparece vacía y no es un dato que falte cargar. */
.mc__auto[b-4y0l5y6yqz] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--nvx-info-bd);
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-info-bg);
    color: var(--nvx-info-text);
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: help;
}

/* Mismo tratamiento para el comercial que ya no está activo: la meta sigue siendo
   válida, pero el usuario tiene que saber que esa persona salió de la lista. */
.mc__inactiva[b-4y0l5y6yqz] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--nvx-warning-bd);
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-warning-bg);
    color: var(--nvx-warning-text);
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: help;
}

/* Un dato ausente se ve distinto de un cero: en este maestro la diferencia entre
   «cumplimiento cero» y «cumplimiento sin cargar» es justo lo que se consulta. */
.mc__vacio[b-4y0l5y6yqz] {
    color: var(--nvx-gray-400);
}

.mc__acciones[b-4y0l5y6yqz] {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.pagina__nota[b-4y0l5y6yqz] {
    margin: 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-400);
}
/* /Components/Pages/Comercial/SeguimientoCotizaciones.razor.rz.scp.css */
/* Seguimiento de Cotizaciones — Comercial.
   Migración de Presentacion/Comercial/SeguimientoCotizaciones.aspx.

   Son las dieciocho columnas del reporte original, así que la página es más
   ancha que una de formulario y la tabla resuelve su propio scroll horizontal
   dentro de NvxTable. El legacy lo hacía al revés: fijaba .container a 970px y
   la grilla desbordaba el body. */

.cot[b-fw0ljdxcrv] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Tipo de operación y motivo de rechazo son frases largas —«Otros Servicios
   (Clasificación/Courrier, Seguro, bodegaje…)», «Condiciones de la oferta no se
   ajustan a la solicitud»—. Sin techo, una sola de ellas decide el ancho de la
   tabla entera. */
.cot__ancho[b-fw0ljdxcrv] {
    max-width: 20ch;
    white-space: normal;
    line-height: 1.3;
}

/* Cotizaciones.ObservacionesGenerales es varchar(max). Se acota a una línea y el
   texto completo queda en el title.

   Sin `color` a propósito: el color de una celda lo fija NvxTable con
   `.nvx-table__el ::deep tbody td`, que gana en especificidad a una clase de
   página. Una declaración aquí sería CSS muerto. */
.cot__obs[b-fw0ljdxcrv] {
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ausencia de dato, no dato en blanco: la solicitud existe y aún no se cotizó. */
.cot__vacio[b-fw0ljdxcrv] {
    color: var(--nvx-gray-400);
    font-style: italic;
}

@media (max-width: 1024px) {
    .cot[b-fw0ljdxcrv] {
        padding: 14px var(--nvx-space-md) 32px;
    }
}
/* /Components/Pages/Comercial/SeguimientoSolicitudes.razor.rz.scp.css */
/* Seguimiento de Solicitudes — Comercial.
   Migración de Presentacion/Comercial/SegumientoSolicitud.aspx. */

.sol[b-2n12y3zk56] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Solicitudes.ObservacionesGenerales es varchar(2000): sin techo, una sola fila
   estira la tabla entera. Se acota y el texto completo queda en el title. */
.sol__obs[b-2n12y3zk56] {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nvx-gray-600);
}

@media (max-width: 1024px) {
    .sol[b-2n12y3zk56] {
        padding: 14px var(--nvx-space-md) 32px;
    }
}
/* /Components/Pages/Comercial/SeguimientoTarifas.razor.rz.scp.css */
/* Seguimiento de Tarifas — Comercial.

   Antes esto era un <style> dentro del .razor con reglas sobre `*`, `html` y
   `body`: se salían de la página y le cambiaban la tipografía y el fondo al
   resto de la aplicación. Aquí queda todo aislado al componente.

   Los colores del semáforo son los cuatro semánticos del tema. La única
   indirección que se conserva es --seg-*: cada tarjeta del tablero cambia esas
   tres variables y las reglas de abajo no se repiten cinco veces. Van sobre
   .seg, la clase raíz del componente, nunca en el ámbito global: los tokens se
   definen en un solo sitio, que es nvx-theme.css. */

.seg[b-vymsl2qaee] {
    /* Valores por defecto del tablero: los sobreescribe cada modificador. */
    --seg-acento:      var(--nvx-800);
    --seg-acento-bg:   var(--nvx-100);
    --seg-acento-text: var(--nvx-800);

    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Tablero de vigencia ───────────────────────────────────────────────────
   Cinco conteos sobre el resultado completo de la consulta. La rejilla se
   auto-ajusta: fijar cinco columnas era lo que rompía la pantalla angosta.
   ───────────────────────────────────────────────────────────────────────── */

.seg__kpis[b-vymsl2qaee] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: var(--nvx-space-sm);
}

.seg__kpi[b-vymsl2qaee] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px var(--nvx-space-md);
    background: var(--nvx-white);
    border: var(--nvx-border);
    border-left: 4px solid var(--seg-acento);
    border-radius: var(--nvx-r-md);
    box-shadow: var(--nvx-shadow-sm);
}

.seg__kpi--marca[b-vymsl2qaee] { --seg-acento: var(--nvx-800);      --seg-acento-bg: var(--nvx-100);        --seg-acento-text: var(--nvx-800); }
.seg__kpi--rojo[b-vymsl2qaee]  { --seg-acento: var(--nvx-danger);   --seg-acento-bg: var(--nvx-danger-bg);  --seg-acento-text: var(--nvx-danger-text); }
.seg__kpi--ambar[b-vymsl2qaee] { --seg-acento: var(--nvx-warning);  --seg-acento-bg: var(--nvx-warning-bg); --seg-acento-text: var(--nvx-warning-text); }
.seg__kpi--verde[b-vymsl2qaee] { --seg-acento: var(--nvx-success);  --seg-acento-bg: var(--nvx-success-bg); --seg-acento-text: var(--nvx-success-text); }
.seg__kpi--gris[b-vymsl2qaee]  { --seg-acento: var(--nvx-gray-400); --seg-acento-bg: var(--nvx-gray-100);   --seg-acento-text: var(--nvx-gray-600); }

/* El ícono de MudBlazor hereda `currentColor`, así que basta con darle color
   al envoltorio propio: no hace falta alcanzar el <svg> con ::deep. */
.seg__kpi-icono[b-vymsl2qaee] {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--seg-acento-bg);
    color: var(--seg-acento-text);
}

.seg__kpi-datos[b-vymsl2qaee] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* nvx-num alinea a la derecha porque nació para celdas de tabla; aquí la cifra
   encabeza una tarjeta y va a la izquierda. Se conserva la numeración tabular. */
.seg__kpi-cifra[b-vymsl2qaee] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--nvx-tracking-tight);
    color: var(--seg-acento-text);
    text-align: left;
}

.seg__kpi-rotulo[b-vymsl2qaee] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--nvx-tracking-label);
    color: var(--nvx-gray-600);
}

.seg__kpi-pct[b-vymsl2qaee] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    color: var(--nvx-gray-400);
    text-align: left;
}

.seg__kpi-nota[b-vymsl2qaee] {
    font-size: var(--nvx-text-xs);
    font-style: italic;
    line-height: 1.35;
    color: var(--nvx-gray-400);
}

/* ── Tabla ─────────────────────────────────────────────────────────────────
   Head y Row llegan a NvxTable como RenderFragment, así que todo lo que los
   estilice necesita ::deep para atravesar el límite del componente.
   ───────────────────────────────────────────────────────────────────────── */

/* Las columnas las decide el SP y varias traen texto largo; una sola línea por
   celda mantiene la fila legible y deja el scroll horizontal a NvxTable. */
.seg[b-vymsl2qaee]  .seg__celda {
    white-space: nowrap;
}

.seg[b-vymsl2qaee]  .seg__th-alerta,
.seg[b-vymsl2qaee]  .seg__celda-alerta {
    text-align: center;
    width: 1%;
}

/* Semáforo de vigencia. El SP a veces manda el color dentro de un fragmento de
   HTML; aquí sólo se usa para elegir el modificador, y el color sale del tema. */
.seg[b-vymsl2qaee]  .seg__punto {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--nvx-gray-400);
    box-shadow: 0 0 0 3px var(--nvx-gray-200);
}

.seg[b-vymsl2qaee]  .seg__punto--red {
    background: var(--nvx-danger);
    box-shadow: 0 0 0 3px var(--nvx-danger-bd);
}

.seg[b-vymsl2qaee]  .seg__punto--amber {
    background: var(--nvx-warning);
    box-shadow: 0 0 0 3px var(--nvx-warning-bd);
}

.seg[b-vymsl2qaee]  .seg__punto--green {
    background: var(--nvx-success);
    box-shadow: 0 0 0 3px var(--nvx-success-bd);
}

.seg[b-vymsl2qaee]  .seg__punto--gray {
    background: var(--nvx-gray-400);
    box-shadow: 0 0 0 3px var(--nvx-gray-200);
}

@media (max-width: 1023px) {
    .seg[b-vymsl2qaee] {
        padding: 14px var(--nvx-space-md) 32px;
    }
}
/* /Components/Pages/Comercial/Solicitudes.razor.rz.scp.css */
/* Solicitudes — Comercial.
   Migración de Presentacion/Comercial/Seguimiento.aspx. */

.sol[b-8ogmj41vyw] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Consecutivo ──
   Reemplaza el <h1 id="concecutivo">---------------</h1> del legacy, que ocupaba
   una línea entera para mostrar quince guiones cuando no había nada. */
.sol__consecutivo[b-8ogmj41vyw] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    background: var(--nvx-100);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.sol__consecutivo-label[b-8ogmj41vyw] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-800);
}

.sol__consecutivo-valor[b-8ogmj41vyw] {
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-h2);
    font-weight: 700;
    color: var(--nvx-900);
    /* #concecutivo { text-transform: uppercase } del legacy */
    text-transform: uppercase;
}

.sol__consecutivo-valor--vacio[b-8ogmj41vyw] {
    color: var(--nvx-gray-400);
    font-weight: 400;
    text-transform: none;
}

/* ── Rejilla de campos ──
   Auto-ajustable a propósito: el legacy fijaba columnas de Bootstrap (col-md-4)
   y por debajo de 1024px los campos se encimaban. */
.sol__grid[b-8ogmj41vyw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--nvx-space-md);
    align-items: start;
}

.sol__campo-ancho[b-8ogmj41vyw] {
    grid-column: 1 / -1;
}

.sol__checks[b-8ogmj41vyw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-md);
    align-items: center;
}

.sol__acciones[b-8ogmj41vyw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
    padding-top: var(--nvx-space-md);
    border-top: var(--nvx-border);
}

/* ── Grid del detalle ── */

/* La fila que se está editando, para no perderla de vista al desplazarse. */
.sol__fila-activa td[b-8ogmj41vyw] {
    background: var(--nvx-100);
}

/* DetalleMercanciasSolicitud.Descripcion es nvarchar(max): sin techo, una fila
   estira la tabla entera. El texto completo queda en el title. */
.sol__desc[b-8ogmj41vyw] {
    max-width: 26ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nvx-gray-600);
}

.sol__td-acciones[b-8ogmj41vyw] {
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .sol[b-8ogmj41vyw] {
        padding: 14px var(--nvx-space-md) 32px;
    }
}
/* /Components/Pages/Comercial/Tarifas.razor.rz.scp.css */
.pagina[b-mcx8s13it9] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Número de tarifa, en el encabezado de la tarjeta. En el legacy era rojo de
   42px; aquí toma el tono más oscuro de la marca, que contrasta y no compite
   con los mensajes de error. */
.tar__nro[b-mcx8s13it9] {
    font-size: var(--nvx-text-h3);
    font-weight: 700;
    color: var(--nvx-900);
    letter-spacing: .02em;
}

.tar__rejilla[b-mcx8s13it9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
}

.tar__ancho[b-mcx8s13it9] {
    margin-top: var(--nvx-space-sm);
}

.tar__alerta[b-mcx8s13it9] {
    margin-bottom: var(--nvx-space-sm);
}

/* All in 20 / 40 */
.tar__totales[b-mcx8s13it9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-md);
    margin-top: var(--nvx-space-md);
}

.tar__total[b-mcx8s13it9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
    padding: 10px var(--nvx-space-md);
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
    background: var(--nvx-50);
}

.tar__total-rotulo[b-mcx8s13it9] {
    font-size: var(--nvx-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nvx-800);
}

.tar__total-valor[b-mcx8s13it9] {
    font-size: var(--nvx-text-h3);
    font-weight: 700;
    color: var(--nvx-900);
}

.tar__acciones[b-mcx8s13it9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-lg);
    padding-top: var(--nvx-space-md);
    border-top: 1px solid var(--nvx-border);
}

.tar__paneles[b-mcx8s13it9] {
    border-radius: var(--nvx-r-md);
    overflow: hidden;
}

/* El contenido de NvxTable llega por RenderFragment: hace falta ::deep. */
.pagina[b-mcx8s13it9]  .tar__fila-acciones {
    white-space: nowrap;
    text-align: right;
}

.pagina[b-mcx8s13it9]  .tar__comentario {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1023px) {
    .pagina[b-mcx8s13it9] {
        padding: 12px var(--nvx-space-md) 32px;
    }

    .tar__rejilla[b-mcx8s13it9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Configuracion/PanelIngreso.razor.rz.scp.css */
/* Pantalla de ingreso del grupo: configuración y vista previa. La vista previa
   copia el velo y el panel de Components/Pages/Auth/AuthPanel.razor.css; si
   aquel cambia, éste debe seguirlo. */

/* El ancho y el relleno los pone la página de Personalización. */
.ing[b-v6n2yv4imb] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ing__rejilla[b-v6n2yv4imb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: start;
}

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

.ing__columna[b-v6n2yv4imb] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ing__ayuda[b-v6n2yv4imb] {
    margin: 0 0 var(--nvx-space-md);
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

.ing__ayuda--pie[b-v6n2yv4imb] {
    margin: 0;
    padding: var(--nvx-space-sm) var(--nvx-space-md) var(--nvx-space-md);
}

/* ── Imágenes ─────────────────────────────────────────────────────────── */
.ing__imagen[b-v6n2yv4imb] {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--nvx-space-md);
    align-items: center;
    margin-bottom: var(--nvx-space-md);
}

.ing__vista[b-v6n2yv4imb] {
    display: grid;
    place-items: center;
    height: 100px;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    overflow: hidden;
    background: var(--nvx-gray-50);
}

.ing__vista--logo img[b-v6n2yv4imb] {
    max-width: 90%;
    max-height: 80px;
}

.ing__vista--fondo img[b-v6n2yv4imb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ing__sinimagen[b-v6n2yv4imb] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-400);
}

.ing__controles[b-v6n2yv4imb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nvx-space-sm);
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

/* InputFile es un componente: su <input> no lleva el ámbito, de ahí el ::deep. */
.ing__subir[b-v6n2yv4imb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--nvx-500);
    border-radius: var(--nvx-r-sm);
    color: var(--nvx-700);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.ing__subir:hover[b-v6n2yv4imb] { background: var(--nvx-50); }

.ing__subir[b-v6n2yv4imb]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ── Textos ───────────────────────────────────────────────────────────── */
.ing__textos[b-v6n2yv4imb] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-sm);
}

.ing__acciones[b-v6n2yv4imb] {
    display: flex;
    justify-content: flex-end;
    gap: var(--nvx-space-sm);
}

/* ── Vista previa ─────────────────────────────────────────────────────── */
.ing__muestra[b-v6n2yv4imb] {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--nvx-r-md) var(--nvx-r-md) 0 0;
}

.ing__muestra-fondo[b-v6n2yv4imb] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* El mismo velo del ingreso de verdad. */
.ing__muestra-velo[b-v6n2yv4imb] {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        rgba(0, 68, 64, .58) 0%,
        rgba(0, 68, 64, .68) 45%,
        rgba(0, 51, 48, .80) 100%);
}

.ing__muestra-rejilla[b-v6n2yv4imb] {
    position: relative;
    height: 100%;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 6%;
    padding: 0 6%;
}

.ing__muestra-titular[b-v6n2yv4imb] {
    font-size: clamp(18px, 2.6vw, 30px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--nvx-tracking-tight);
    color: var(--nvx-white);
    overflow-wrap: anywhere;
}

.ing__muestra-sub[b-v6n2yv4imb] {
    margin-top: 6px;
    font-size: var(--nvx-text-xs);
    color: rgba(255, 255, 255, .78);
}

.ing__muestra-puntos[b-v6n2yv4imb] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ing__muestra-puntos li[b-v6n2yv4imb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

.ing__punto[b-v6n2yv4imb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

.ing__punto--marca[b-v6n2yv4imb] { background: var(--nvx-500); }
.ing__punto--ok[b-v6n2yv4imb]    { background: var(--nvx-success); }
.ing__punto--info[b-v6n2yv4imb]  { background: var(--nvx-info); }

.ing__muestra-panel[b-v6n2yv4imb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    background: rgba(255, 255, 255, .9);
    border-radius: var(--nvx-r-md);
    box-shadow: var(--nvx-shadow-lg);
}

.ing__muestra-logo[b-v6n2yv4imb] {
    align-self: center;
    max-height: 40px;
    max-width: 80%;
}

.ing__muestra-form-titulo[b-v6n2yv4imb] {
    font-size: var(--nvx-text-sm);
    font-weight: 700;
    color: var(--nvx-900);
}

.ing__muestra-campo[b-v6n2yv4imb] {
    height: 16px;
    border: var(--nvx-border-input);
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-white);
}

.ing__muestra-boton[b-v6n2yv4imb] {
    padding: 4px 0;
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-700);
    color: var(--nvx-white);
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    text-align: center;
}
/* /Components/Pages/Configuracion/PanelMarca.razor.rz.scp.css */
/* La marca de cada empresa. Lo de las imágenes y la vista previa vino del
   diálogo de Empresas (2026-11-07), donde vivía hasta que se reunió todo en
   Configuración › Personalización. */

.marca[b-l0xesg85y2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.marca__empresa[b-l0xesg85y2] {
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: var(--nvx-space-md);
    align-items: center;
}

.marca__empresa[b-l0xesg85y2]  > * { min-width: 0; }

@media (max-width: 780px) {
    .marca__empresa[b-l0xesg85y2] { grid-template-columns: 1fr; }
}

.marca__rejilla[b-l0xesg85y2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

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

.marca__columna[b-l0xesg85y2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.marca__ayuda[b-l0xesg85y2] {
    margin: 0 0 var(--nvx-space-md);
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

.marca__empresa .marca__ayuda[b-l0xesg85y2] { margin: 0; }

.marca__ayuda--pie[b-l0xesg85y2] {
    margin: 0;
    padding: var(--nvx-space-sm) var(--nvx-space-md) var(--nvx-space-md);
}

.marca__acciones[b-l0xesg85y2] {
    display: flex;
    justify-content: flex-end;
    gap: var(--nvx-space-sm);
}

/* ── Marca: el logo y el símbolo de la empresa ───────────────────────────────
   Dos bloques iguales, cada uno con su vista previa y sus controles. Se sube el
   archivo al momento y la empresa lo apunta al guardar, igual que el maestro de
   plantillas. */
.marca__imagen[b-l0xesg85y2] {
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 620px) {
    .marca__imagen[b-l0xesg85y2] { grid-template-columns: 1fr; }
}

/* El tablero de cuadros deja ver la transparencia del PNG: un logo con fondo
   blanco opaco se distingue a simple vista de uno recortado, y sobre el fondo
   oscuro del menú la diferencia se nota. */
.marca__vista[b-l0xesg85y2] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 8px;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    background-color: var(--nvx-white);
    background-image:
        linear-gradient(45deg, var(--nvx-gray-100) 25%, transparent 25%),
        linear-gradient(-45deg, var(--nvx-gray-100) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--nvx-gray-100) 75%),
        linear-gradient(-45deg, transparent 75%, var(--nvx-gray-100) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

.marca__vista img[b-l0xesg85y2] {
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
}

.marca__sinimagen[b-l0xesg85y2] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    text-align: center;
    line-height: 1.4;
}

.marca__controles[b-l0xesg85y2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.marca__que[b-l0xesg85y2] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    line-height: 1.5;
}

/* InputFile es un componente: el <input> que dibuja NO lleva el atributo de
   ámbito del CSS aislado, así que hay que alcanzarlo con ::deep desde la
   etiqueta que lo envuelve. Sin él, el control nativo «Seleccionar archivo /
   Ningún archivo seleccionado» se veía y se salía del diálogo (visto en la
   prueba de los colores, 2026-10-15). */
.marca__subir[b-l0xesg85y2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--nvx-500);
    border-radius: var(--nvx-r-sm);
    color: var(--nvx-700);
    font-size: var(--nvx-text-sm);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color .15s ease;
}

.marca__subir:hover[b-l0xesg85y2] {
    background: var(--nvx-50);
}

.marca__subir[b-l0xesg85y2]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}


/* ── Colores del menú y de la barra ─────────────────────────────────────────
   Los colores elegidos llegan como variables (--muestra-menu, --muestra-barra)
   en el style del contenedor: son datos de la empresa, no del sistema. */
.marca__colores[b-l0xesg85y2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--nvx-space-md);
}

.marca__colores[b-l0xesg85y2]  > * { min-width: 0; }

.marca__color[b-l0xesg85y2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nvx-space-xs);
}

.marca__contraste[b-l0xesg85y2] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-success-text);
}

.marca__contraste--mal[b-l0xesg85y2] {
    color: var(--nvx-danger-text);
    font-weight: 700;
}

/* El shell en miniatura. */
.marca__muestra[b-l0xesg85y2] {
    margin: var(--nvx-space-md);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    overflow: hidden;
    box-shadow: var(--nvx-shadow-sm);
    font-size: var(--nvx-text-xs);
}

.marca__muestra-barra[b-l0xesg85y2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvx-space-sm);
    height: 34px;
    padding: 0 var(--nvx-space-sm);
    background: var(--muestra-barra);
    color: var(--nvx-white);
}

.marca__muestra-buscador[b-l0xesg85y2] {
    padding: 3px 10px;
    border-radius: var(--nvx-r-sm);
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .8);
}

.marca__muestra-usuario[b-l0xesg85y2] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}

.marca__muestra-cuerpo[b-l0xesg85y2] {
    display: flex;
    height: 240px;
}

.marca__muestra-menu[b-l0xesg85y2] {
    display: flex;
    flex-direction: column;
    width: 150px;
    flex: none;
    background: var(--muestra-menu);
}

/* El logo va sobre blanco y con sus colores, como en el menú de verdad. */
.marca__muestra-logo[b-l0xesg85y2] {
    display: grid;
    place-items: center;
    height: 44px;
    background: var(--nvx-white);
}

.marca__muestra-logo img[b-l0xesg85y2] {
    max-height: 34px;
    max-width: 120px;
}

.marca__muestra-item[b-l0xesg85y2] {
    padding: 5px 10px;
    color: rgba(255, 255, 255, .72);
}

.marca__muestra-item--activo[b-l0xesg85y2] {
    background: rgba(255, 255, 255, .1);
    color: var(--nvx-white);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--muestra-500);
}

.marca__muestra-busca[b-l0xesg85y2] {
    margin: 8px 8px 4px;
    padding: 3px 8px;
    border-radius: var(--nvx-r-sm);
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .7);
}

/* La página de muestra lleva la rampa de la empresa elegida: los encabezados
   de tabla y el botón cambian con el color de la barra, como en la de verdad. */
.marca__muestra-pagina[b-l0xesg85y2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--muestra-50);
}

.marca__muestra-titulo[b-l0xesg85y2] {
    width: 45%;
    height: 10px;
    border-radius: 3px;
    background: var(--muestra-800);
}

.marca__muestra-tabla[b-l0xesg85y2] {
    border: var(--nvx-border);
    border-radius: var(--nvx-r-sm);
    overflow: hidden;
    background: var(--nvx-white);
}

.marca__muestra-thead[b-l0xesg85y2] {
    height: 18px;
    background: var(--muestra-800);
}

.marca__muestra-fila[b-l0xesg85y2] {
    height: 16px;
    border-top: var(--nvx-border);
}

.marca__muestra-boton[b-l0xesg85y2] {
    align-self: flex-end;
    padding: 4px 14px;
    border-radius: var(--nvx-r-sm);
    background: var(--muestra-700);
    color: var(--nvx-white);
    font-weight: 600;
}

/* La pestaña del navegador, para que se vea dónde sale el símbolo. */
.marca__muestra-pestana[b-l0xesg85y2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-top: var(--nvx-border);
    background: var(--nvx-gray-50);
    color: var(--nvx-gray-800);
}

.marca__muestra-pestana img[b-l0xesg85y2] {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
/* /Components/Pages/Configuracion/Personalizacion.razor.rz.scp.css */
.pagina[b-t1er0z14ea] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Las pestañas dibujan su panel fuera del marcado propio: ::deep. */
.pagina[b-t1er0z14ea]  .pers__panel {
    padding-top: var(--nvx-space-md);
}

.pers__texto[b-t1er0z14ea] {
    margin: 0 0 var(--nvx-space-md);
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    max-width: 72ch;
}

.pers__enlaces[b-t1er0z14ea] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
}
/* /Components/Pages/Cotizaciones/VincularTarifas.razor.rz.scp.css */
/* Vincular tarifas a una cotización.

   Esta pantalla no tenía CSS: llevaba 108 estilos en línea y cuatro helpers
   —ThStyle, TdStyle, TrStyle, AlertaChipStyle— que devolvían cadenas de
   estilo con los colores escritos a mano. La guía de diseño los da por
   derogados por nombre. Ahora devuelven clases y el color sale del sistema. */

.vt[b-lun032rxgn] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
}

/* ── La tabla ─────────────────────────────────────────────────────────── */

.vt-tabla[b-lun032rxgn] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nvx-text-sm);
}

.vt-thead[b-lun032rxgn] {
    background: var(--nvx-100);
    border-bottom: 2px solid var(--nvx-500);
}

.vt-th[b-lun032rxgn] {
    padding: 8px 10px;
    text-align: left;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    color: var(--nvx-800);
    white-space: nowrap;
}

.vt-td[b-lun032rxgn] {
    padding: 7px 10px;
    border-bottom: 1px solid var(--nvx-gray-100);
    vertical-align: middle;
}

.vt-td--centro[b-lun032rxgn] { text-align: center; }

.vt-tr[b-lun032rxgn] {
    background: var(--nvx-white);
    cursor: pointer;
    transition: background .15s;
}

.vt-tr:hover[b-lun032rxgn]   { background: var(--nvx-50); }
.vt-tr--sel[b-lun032rxgn]    { background: var(--nvx-100); }

/* ── El estado de la tarifa ───────────────────────────────────────────── */

.vt-chip[b-lun032rxgn] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--nvx-r-sm);
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.vt-chip--vigente[b-lun032rxgn] {
    background: var(--nvx-vigente-bg);
    color: var(--nvx-vigente-text);
}

.vt-chip--porvencer[b-lun032rxgn] {
    background: var(--nvx-porvencer-bg);
    color: var(--nvx-porvencer-text);
}

.vt-chip--vencida[b-lun032rxgn] {
    background: var(--nvx-vencida-bg);
    color: var(--nvx-vencida-text);
}

.vt-chip--archivada[b-lun032rxgn] {
    background: var(--nvx-archivada-bg);
    color: var(--nvx-archivada-text);
}

/* ── Lo demás ─────────────────────────────────────────────────────────── */

.vt-titulo[b-lun032rxgn]  { font-size: 1.1rem; }

.vt-seccion[b-lun032rxgn] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: var(--nvx-text-body);
    letter-spacing: .05em;
}

.vt-icono[b-lun032rxgn] {
    color: var(--nvx-white);
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.vt-acento[b-lun032rxgn] { color: var(--nvx-700); }

.vt-vacio[b-lun032rxgn] {
    text-align: center;
    padding: 40px;
    color: var(--nvx-gray-600);
}

.vt-vacio--alto[b-lun032rxgn] { padding: 60px 0; }

/* Anchos de columna y contenedores que estaban en linea */
.vt-w42[b-lun032rxgn]  { width: 42px; }
.vt-w70[b-lun032rxgn]  { width: 70px; }
.vt-w80[b-lun032rxgn]  { width: 80px; }
.vt-w90[b-lun032rxgn]  { width: 90px; }
.vt-w110[b-lun032rxgn] { width: 110px; }

.vt-fondo[b-lun032rxgn]    { min-height: 100vh; background: var(--nvx-50); }
.vt-pad-top[b-lun032rxgn]  { padding: 20px 24px 16px; }
.vt-scroll-y[b-lun032rxgn] { overflow-y: auto; padding: 12px 16px 16px; }
.vt-scroll-x[b-lun032rxgn] { padding: 0 4px 12px; }

.vt-ayuda[b-lun032rxgn] {
    padding: 10px 16px 6px;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

/* ── Lo que estaba en línea ───────────────────────────────────────────── */

/* La banda de título del diálogo. La de la página la reemplazó
   NvxPageHeader; esta se queda porque un diálogo sí lleva su propia
   cabecera, pero con los tonos del sistema en vez del degradado viejo. */
.vt-banda[b-lun032rxgn] {
    background: linear-gradient(90deg, var(--nvx-800) 0%, var(--nvx-600) 100%);
    color: var(--nvx-white);
    text-align: center;
    padding: 16px 24px;
}

.vt-banda--dialogo[b-lun032rxgn] {
    text-align: left;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vt-subbanda[b-lun032rxgn] {
    background: var(--nvx-100);
    border-bottom: 1px solid var(--nvx-200);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vt-cabecera[b-lun032rxgn] {
    background: var(--nvx-700);
    color: var(--nvx-white);
    padding: 11px 20px;
    font-weight: 600;
    font-size: var(--nvx-text-sm);
    letter-spacing: .07em;
    display: flex;
    align-items: center;
}

.vt-cabecera--oscura[b-lun032rxgn] {
    background: var(--nvx-900);
    justify-content: space-between;
    letter-spacing: normal;
}

.vt-tarjeta[b-lun032rxgn] {
    border-radius: var(--nvx-r-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

.vt-tarjeta--pegada[b-lun032rxgn] { margin-bottom: 0; }

.vt-contador[b-lun032rxgn] {
    background: rgba(255, 255, 255, .2);
    border-radius: 10px;
    padding: 2px 10px;
    font-size: var(--nvx-text-xs);
    font-weight: 600;
}

.vt-pill[b-lun032rxgn] {
    background: var(--nvx-700);
    color: var(--nvx-white);
    font-size: var(--nvx-text-xs);
    height: 22px;
    border-radius: var(--nvx-r-sm);
}

.vt-pill--bajo[b-lun032rxgn]  { height: 20px; }

.vt-pill--suave[b-lun032rxgn] {
    background: var(--nvx-100);
    color: var(--nvx-800);
}

.vt-boton[b-lun032rxgn] {
    min-width: 120px;
    border-color: var(--nvx-gray-200);
    color: var(--nvx-gray-600);
    font-weight: 600;
    letter-spacing: .05em;
}

.vt-boton--primario[b-lun032rxgn] {
    min-width: 130px;
    background: var(--nvx-700);
    color: var(--nvx-white);
    font-weight: 700;
}

/* El diálogo hecho a mano. Se conserva su forma para no rehacer la pantalla,
   pero el color sale del sistema. */
.vt-telon[b-lun032rxgn] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vt-dialogo[b-lun032rxgn] {
    background: var(--nvx-white);
    border-radius: var(--nvx-r-lg);
    width: min(860px, 96vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vt-t-xl[b-lun032rxgn] { font-size: 1.4rem; }
.vt-t-lg[b-lun032rxgn] { font-size: 1.2rem; }
.vt-t-md[b-lun032rxgn] { font-size: 1rem; }
.vt-t-sm[b-lun032rxgn] { font-size: var(--nvx-text-body); }

.vt-acento-oscuro[b-lun032rxgn] { color: var(--nvx-800); }
.vt-aviso[b-lun032rxgn]         { color: var(--nvx-warning); }
.vt-fuerte[b-lun032rxgn]        { font-weight: 600; }
.vt-tenue[b-lun032rxgn]         { color: var(--nvx-gray-600); }
.vt-blanco[b-lun032rxgn]        { background: var(--nvx-white); }
.vt-plano[b-lun032rxgn]         { border-radius: 0; margin: 0; }

.vt-sep[b-lun032rxgn]        { color: var(--nvx-gray-400); margin: 0 2px; }
.vt-sep--ancho[b-lun032rxgn] { margin: 0 4px; }

.vt-mt[b-lun032rxgn]    { margin-top: 10px; }
.vt-mt-sm[b-lun032rxgn] { margin-top: 8px; }

.vt-fila[b-lun032rxgn] {
    gap: 10px;
    margin-top: 2px;
}

.vt-icono-vacio[b-lun032rxgn] {
    font-size: 2.5rem;
    color: var(--nvx-gray-400);
}

.vt-icono-vacio--sm[b-lun032rxgn] { font-size: 2rem; }
/* /Components/Pages/CRM/CantidadOperacionesCliente.razor.rz.scp.css */
/* Cantidad de operaciones — CRM.

   Antes esto era un <style> dentro del .razor, y sus dos primeras reglas
   —`*, *::before, *::after { margin:0; padding:0 }` y `html, body { … }`—
   no se quedaban en la página: le cambiaban el reset, la tipografía y el fondo
   a toda la aplicación. Aquí queda todo aislado al componente.

   Todo el color sale de var(--nvx-*). Lo único que el tema no tiene es una
   paleta categórica para los nueve tipos de operación, así que se arma aquí
   sobre .coc —la clase raíz del componente— y nunca en :root: los tokens se
   definen en un solo sitio, que es nvx-theme.css.

   La paleta aprovecha que los tipos vienen por parejas (IM/IA, AI/AE, EM/EA,
   TN/TM): cada pareja toma una familia semántica del tema y se separa por
   claro/oscuro dentro de ella. OS, que es el cajón de sastre, va en gris y con
   textura, para que se distinga aun impreso en blanco y negro.

   Nota sobre ::deep: los <th>, los <td> y las tarjetas de gráfica se dibujan
   dentro de NvxTable y NvxCard. Los selectores que los alcanzan llevan además
   el elemento (`thead th.…`, `tbody td.…`) para ganarle en especificidad a las
   reglas propias de esos componentes, que sí las traen. */

.coc[b-4066yboq5t] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* ── Rastro de navegación del nivel 2 ───────────────────────────────────────
   Va dentro del <Breadcrumb> de NvxPageHeader, que es marcado de esta página:
   hereda de .nvx-head__crumb el tamaño y el color, y sólo se distingue el
   trozo que devuelve al listado. Es un <button> y no un <span> para que se
   pueda alcanzar con el teclado.
   ───────────────────────────────────────────────────────────────────────── */

.coc__crumb-link[b-4066yboq5t] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--nvx-700);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.coc__crumb-link:hover[b-4066yboq5t] { color: var(--nvx-600); }

.coc__crumb-sep[b-4066yboq5t] { opacity: .5; }


/* ── Pie de la página ─────────────────────────────────────────────────────
   Del pie corporativo de antes sólo sobrevive el dato que no está en ningún
   otro sitio: cuándo se generó lo que se está mirando. El conteo de registros
   lo da NvxToolbar.
   ───────────────────────────────────────────────────────────────────────── */

.coc__pie[b-4066yboq5t] {
    margin: 0;
    padding-top: var(--nvx-space-xs);
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}


/* ── Tablas ────────────────────────────────────────────────────────────────
   Head y Row llegan a NvxTable como RenderFragment, así que todo lo que los
   estilice necesita ::deep.
   ───────────────────────────────────────────────────────────────────────── */

/* Cada fila del listado abre el detalle de ese cliente. */
.coc[b-4066yboq5t]  tbody tr.coc__fila { cursor: pointer; }

/* La columna de totales cierra la tabla y se lee como un subtotal, no como una
   medición más. El borde izquierdo la mantiene delimitada también cuando el
   hover de NvxTable pinta la fila entera. */
.coc[b-4066yboq5t]  tbody td.coc__total {
    background: var(--nvx-100);
    border-left: 1px solid var(--nvx-300);
    font-weight: 700;
    color: var(--nvx-800);
}

.coc[b-4066yboq5t]  thead th.coc__th-total {
    background: var(--nvx-900);
    border-left: 1px solid var(--nvx-700);
}

/* Mapa de calor de Q1–Q4: la intensidad es el dato, así que el porcentaje de
   mezcla llega desde el marcado en --coc-heat. La mezcla va de --nvx-100 (sin
   operaciones) a --nvx-800 (el máximo de la tabla).

   Cuando la celda no trae valor, la página no emite ninguna de las tres
   variables: las tres declaraciones quedan inválidas y la celda se pinta como
   cualquier otra, sin tinte y sin negrita. */
.coc[b-4066yboq5t]  tbody td.coc__q {
    background: color-mix(in srgb, var(--nvx-800) var(--coc-heat), var(--nvx-100));
    color: var(--coc-heat-tinta);
    font-weight: var(--coc-heat-peso);
}

/* Aviso de trimestre parcial dentro del <th> de ese trimestre. El encabezado
   va en versalitas; la píldora no. */
.coc[b-4066yboq5t]  thead th .coc__th-badge {
    margin-left: 6px;
    text-transform: none;
    letter-spacing: normal;
    vertical-align: middle;
}

.coc[b-4066yboq5t]  thead th .coc__th-badge .nvx-badge {
    font-size: 9px;
    padding: 1px 6px;
    cursor: help;
}


/* ── Tablero de indicadores del nivel 2 ────────────────────────────────────
   La rejilla se auto-ajusta. Antes eran seis columnas fijas con dos saltos a
   mano, y en pantallas medianas las cifras se partían.
   ───────────────────────────────────────────────────────────────────────── */

.coc__kpis[b-4066yboq5t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--nvx-space-sm);
}

.coc__kpi[b-4066yboq5t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px var(--nvx-space-md);
    background: var(--nvx-white);
    border: var(--nvx-border);
    border-top: 3px solid var(--nvx-500);
    border-radius: var(--nvx-r-md);
    box-shadow: var(--nvx-shadow-sm);
    min-width: 0;
}

.coc__kpi-rotulo[b-4066yboq5t] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--nvx-tracking-label);
    color: var(--nvx-gray-600);
}

/* nvx-num alinea a la derecha porque nació para celdas de tabla; aquí la cifra
   encabeza una tarjeta y va a la izquierda. Se conserva la numeración tabular. */
.coc__kpi-cifra[b-4066yboq5t] {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: var(--nvx-tracking-tight);
    color: var(--nvx-800);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coc__kpi-nota[b-4066yboq5t] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.4;
}


/* ── Las dos gráficas ─────────────────────────────────────────────────────── */

.coc__graficas[b-4066yboq5t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--nvx-space-md);
    align-items: start;
}

/* La clase se la pasamos a NvxCard, que la pinta en su propio marcado: hace
   falta ::deep. Sin min-width:0 la rejilla no deja encoger la tarjeta y el SVG
   se desborda a lo ancho. */
.coc__graficas[b-4066yboq5t]  .coc__grafica { min-width: 0; }

.coc__meta[b-4066yboq5t] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    color: var(--nvx-gray-600);
    white-space: nowrap;
}


/* ── SVG ───────────────────────────────────────────────────────────────────
   Las dos gráficas son marcado propio, sin librerías. Una regla CSS gana
   siempre sobre un atributo de presentación, así que el color se fija aquí y
   en el marcado no queda ni un hex.
   ───────────────────────────────────────────────────────────────────────── */

.coc__chart[b-4066yboq5t] {
    width: 100%;
    max-width: 620px;
    height: auto;
    display: block;
}

.coc__grid[b-4066yboq5t] {
    stroke: var(--nvx-gray-200);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.coc__axis[b-4066yboq5t] {
    fill: var(--nvx-gray-400);
    font-family: var(--nvx-font-mono);
    font-size: 8px;
}

.coc__qlabel[b-4066yboq5t] {
    fill: var(--nvx-gray-600);
    font-family: var(--nvx-font);
    font-size: 10px;
    font-weight: 700;
}

/* Etiqueta directa dentro de un segmento de la barra apilada. La tinta la
   decide la página según lo claro que sea el relleno de ese tipo. */
.coc__seglabel[b-4066yboq5t] {
    font-family: var(--nvx-font);
    font-size: 9px;
    font-weight: 700;
}

.coc__seglabel--oscura[b-4066yboq5t] { fill: var(--nvx-gray-800); }
.coc__seglabel--clara[b-4066yboq5t]  { fill: var(--nvx-white); }

/* Línea de totales por trimestre. */
.coc__linea[b-4066yboq5t] {
    fill: none;
    stroke: var(--nvx-700);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.coc__punto[b-4066yboq5t] { fill: var(--nvx-700); }

/* Trama diagonal de OS: el gris solo no basta si la gráfica se imprime. */
.coc__textura-fondo[b-4066yboq5t] { fill: var(--nvx-gray-400); }
.coc__textura-raya[b-4066yboq5t]  { stroke: var(--nvx-gray-600); }


/* ── Paleta categórica de los tipos de operación ────────────────────────────
   Una sola clase por tipo fija --coc-cat, y de ahí beben tanto el relleno del
   segmento en el SVG como el cuadrito de la leyenda. Así el color de un tipo
   se cambia en un único sitio.
   ───────────────────────────────────────────────────────────────────────── */

.coc__cat--im[b-4066yboq5t] { --coc-cat: var(--nvx-info); }
.coc__cat--ia[b-4066yboq5t] { --coc-cat: var(--nvx-info-text); }
.coc__cat--ai[b-4066yboq5t] { --coc-cat: var(--nvx-warning); }
.coc__cat--ae[b-4066yboq5t] { --coc-cat: var(--nvx-warning-text); }
.coc__cat--em[b-4066yboq5t] { --coc-cat: var(--nvx-success); }
.coc__cat--ea[b-4066yboq5t] { --coc-cat: var(--nvx-success-text); }
.coc__cat--tn[b-4066yboq5t] { --coc-cat: var(--nvx-accent); }
.coc__cat--tm[b-4066yboq5t] { --coc-cat: var(--nvx-accent-text); }
.coc__cat--os[b-4066yboq5t] { --coc-cat: var(--nvx-gray-400); }

.coc__seg[b-4066yboq5t] { fill: var(--coc-cat); }

.coc__seg.coc__cat--os[b-4066yboq5t] { fill: url(#coc-textura-os); }


/* ── Leyenda ─────────────────────────────────────────────────────────────── */

.coc__legend[b-4066yboq5t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-sm) var(--nvx-space-md);
    padding-top: var(--nvx-space-sm);
}

.coc__legend-item[b-4066yboq5t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    color: var(--nvx-gray-600);
}

.coc__swatch[b-4066yboq5t] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--coc-cat);
    flex: none;
}

/* El cuadrito de OS repite la trama del segmento, sin depender del <pattern>
   del SVG: así la leyenda se pinta igual aunque la gráfica no se dibuje. */
.coc__swatch.coc__cat--os[b-4066yboq5t] {
    background-image: repeating-linear-gradient(
        45deg,
        var(--nvx-gray-600) 0 2px,
        var(--nvx-gray-400) 2px 6px);
}

.coc__swatch--linea[b-4066yboq5t] {
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--nvx-700);
}

/* La píldora del trimestre en curso cierra la leyenda de la primera gráfica. */
.coc__legend[b-4066yboq5t]  .nvx-badge { cursor: help; }


@media (max-width: 1023px) {
    .coc[b-4066yboq5t] { padding: 14px var(--nvx-space-md) 32px; }

    .coc__graficas[b-4066yboq5t] { grid-template-columns: 1fr; }
}
/* /Components/Pages/CRM/CrmActividades.razor.rz.scp.css */
.pagina[b-6cds9ticsm] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* El nombre es la columna que el usuario lee para identificar la fila. */
.act__nombre[b-6cds9ticsm] {
    font-weight: 600;
}

/* Ausencia de dato: se dice, pero sin competir con lo que sí hay. */
.act__sin[b-6cds9ticsm] {
    color: var(--nvx-gray-400);
    font-style: italic;
}

.act__bandera[b-6cds9ticsm] {
    display: inline-flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    white-space: nowrap;
}

/* El punto de color acompaña al nombre de la bandera, no lo sustituye: en el
   sistema anterior las cuatro opciones eran el mismo texto «●●●» pintado de
   distinto color, ilegible para quien no distingue rojo de verde. */
.act__punto[b-6cds9ticsm] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.act__punto--roja[b-6cds9ticsm]     { background: var(--nvx-danger); }
.act__punto--amarilla[b-6cds9ticsm] { background: var(--nvx-warning); }
.act__punto--verde[b-6cds9ticsm]    { background: var(--nvx-success); }
.act__punto--gris[b-6cds9ticsm]     { background: var(--nvx-gray-400); }

.act__punto--ninguna[b-6cds9ticsm] {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--nvx-gray-200);
}

/* Los dos botones de la fila, uno al lado del otro y sin que la columna crezca. */
.act__acciones[b-6cds9ticsm] {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

/* El buscador vive dentro de la barra de la tabla: se le acota el ancho para que
   no empuje al conteo ni al resumen. */
.act__buscar[b-6cds9ticsm] {
    width: 280px;
    max-width: 100%;
}

.pagina__nota[b-6cds9ticsm] {
    margin: 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-400);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .act__buscar[b-6cds9ticsm] {
        width: 100%;
    }
}
/* /Components/Pages/CRM/CrmDashboard.razor.rz.scp.css */
.pagina[b-kjih4mpb90] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Observaciones de la alerta ──────────────────────────────────────────────
   El legacy las escribía enteras dentro de una celda con nowrap, así que una
   observación larga empujaba la tabla y obligaba a barrer la página a lo ancho.
   Aquí se recortan con puntos suspensivos y el texto completo queda en el
   tooltip. */
.crm-obs[b-kjih4mpb90] {
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Rejilla de tarjetas de indicadores ───────────────────────────────────── */
.crm-rejilla[b-kjih4mpb90] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--nvx-space-md);
    align-items: start;
}

/* Total del grupo, en el encabezado de la tarjeta. */
.crm-total[b-kjih4mpb90] {
    font-size: var(--nvx-text-h2);
    font-weight: 700;
    color: var(--nvx-900);
}

.crm-vacio[b-kjih4mpb90] {
    margin: 0;
    color: var(--nvx-gray-600);
}

/* ── Barras ──────────────────────────────────────────────────────────────────
   Gráfica de barras horizontales sin librería: el ancho del relleno es el
   porcentaje sobre el mayor valor del grupo, que la página calcula en C#. El
   legacy no dibujaba nada de esto: los indicadores llegaban como cadenas de
   HTML con la cifra entre paréntesis al lado del nombre. */
.crm-barras[b-kjih4mpb90] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-barra[b-kjih4mpb90] {
    display: grid;
    grid-template-columns: minmax(80px, 38%) 1fr auto;
    align-items: center;
    gap: var(--nvx-space-sm);
}

.crm-barra__rotulo[b-kjih4mpb90] {
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    color: var(--nvx-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-barra__pista[b-kjih4mpb90] {
    height: 9px;
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-gray-100);
    overflow: hidden;
}

.crm-barra__valor[b-kjih4mpb90] {
    display: block;
    height: 100%;
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-500);
    transition: width var(--nvx-transition);
}

/* Un tono por grupo: los conteos neutros van en el turquesa de marca y los que
   sí cargan significado toman su color semántico. Al ser relleno y no texto,
   --nvx-500 no incumple la regla de contraste. */
.crm-barra__valor--marca[b-kjih4mpb90]   { background: var(--nvx-500); }
.crm-barra__valor--info[b-kjih4mpb90]    { background: var(--nvx-info); }
.crm-barra__valor--exito[b-kjih4mpb90]   { background: var(--nvx-success); }
.crm-barra__valor--aviso[b-kjih4mpb90]   { background: var(--nvx-warning); }
.crm-barra__valor--peligro[b-kjih4mpb90] { background: var(--nvx-danger); }

.crm-barra__cifra[b-kjih4mpb90] {
    min-width: 42px;
    font-size: var(--nvx-text-sm);
    font-weight: 700;
    color: var(--nvx-900);
}

@media (max-width: 1023px) {
    .pagina[b-kjih4mpb90] {
        padding: 12px var(--nvx-space-md) 32px;
    }

    .crm-rejilla[b-kjih4mpb90] {
        grid-template-columns: 1fr;
    }

    .crm-obs[b-kjih4mpb90] {
        max-width: 220px;
    }
}
/* /Components/Pages/CRM/CrmLeads.razor.rz.scp.css */
.pagina[b-wxyu8w4cb1] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* La razón social es lo que el usuario busca con la vista: pesa más que el resto
   de la fila y no se parte en dos líneas si hay sitio. */
.lead__nombre[b-wxyu8w4cb1] {
    font-weight: 600;
    min-width: 200px;
}

/* Segunda línea de una celda: país bajo la ciudad, teléfonos y correo bajo el
   nombre del contacto. Así caben cuatro datos de contacto en una sola columna
   sin que la tabla se vuelva ilegible. */
.lead__sub[b-wxyu8w4cb1] {
    display: block;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.lead__acciones[b-wxyu8w4cb1] {
    display: flex;
    gap: 6px;
    white-space: nowrap;
    justify-content: flex-end;
}
/* /Components/Pages/CRM/CrmMetas.razor.rz.scp.css */
.pagina[b-ywnn98leqc] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* El asesor es la columna por la que el usuario se ubica: va destacada. */
.met__nombre[b-ywnn98leqc] {
    font-weight: 600;
}

/* Un dato que ya no se puede resolver contra su catálogo. No es un estado de
   negocio —no cabe en NvxBadge—, es una fila rota que hay que arreglar o borrar,
   y por eso se marca con el rojo de peligro y no con un gris. */
.met__roto[b-ywnn98leqc] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--nvx-danger-bd);
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-danger-bg);
    color: var(--nvx-danger-text);
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: help;
}

/* El asesor existe pero ya no trabaja las metas: la fila es válida, sólo hay que
   saberlo antes de editarla. */
.met__inactivo[b-ywnn98leqc] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--nvx-warning-bd);
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-warning-bg);
    color: var(--nvx-warning-text);
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: help;
}

/* El identificador crudo de un asesor o un tipo que ya no está: se muestra apagado
   para que no compita con los nombres de verdad. */
.met__vacio[b-ywnn98leqc] {
    color: var(--nvx-gray-400);
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-xs);
}

.met__acciones[b-ywnn98leqc] {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.pagina__nota[b-ywnn98leqc] {
    margin: 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-400);
}
/* /Components/Pages/CRM/CrmRegistroLlamadas.razor.rz.scp.css */
.pagina[b-rbiv3q4b21] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* La empresa es lo que el usuario busca al recorrer la tabla con la vista. */
.llam__empresa[b-rbiv3q4b21] {
    font-weight: 600;
    max-width: 260px;
}

/* Teléfono, correo, próxima llamada y fecha de visita: el dato de apoyo va bajo
   el principal, para no gastar una columna en cada uno. */
.llam__sub[b-rbiv3q4b21] {
    display: block;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.4;
}

/* Un dato que falta se dice, no se deja en blanco: en blanco parece un error de
   carga y no un campo que nadie llenó. */
.llam__vacio[b-rbiv3q4b21] {
    color: var(--nvx-gray-400);
    font-style: italic;
}

/* Las observaciones llegan hasta 250 caracteres. Se recortan a una línea con el
   texto completo en el tooltip: si crecieran, cada fila mediría distinto y la
   tabla dejaría de poderse recorrer de un vistazo. */
.llam__notas[b-rbiv3q4b21] {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nvx-gray-600);
}

.llam__acciones[b-rbiv3q4b21] {
    white-space: nowrap;
    text-align: right;
}

/* Por debajo de 1024px la tabla ya va con scroll horizontal propio; lo que hay
   que ceder es el ancho de las columnas de texto largo. */
@media (max-width: 1024px) {
    .pagina[b-rbiv3q4b21] {
        padding: 14px var(--nvx-space-md) 32px;
    }

    .llam__empresa[b-rbiv3q4b21],
    .llam__notas[b-rbiv3q4b21] {
        max-width: 180px;
    }
}
/* /Components/Pages/CRM/CrmReporteLlamadas.razor.rz.scp.css */
/* Reporte de llamadas del CRM.

   Nueve columnas y varias con dos lineas —la empresa lleva su NIT debajo, el
   contacto su telefono y su correo—, asi que la pagina es mas ancha que una de
   formulario y el dato secundario va en un tamano menor. */

.pagina[b-c36wzboeze] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Segunda linea de una celda: el NIT bajo la empresa, el contacto bajo el
   nombre, la fecha bajo el badge de la visita. Nunca es el dato principal. */
.sub[b-c36wzboeze] {
    display: block;
    margin-top: 2px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    word-break: break-word;
}

/* Observaciones y comentario de la llamada: texto libre del asesor, que puede
   venir largo y con saltos. Se respeta el salto y se corta la palabra antes que
   estirar la tabla. */
.obs[b-c36wzboeze] {
    display: inline-block;
    max-width: 280px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Dato que no existe. Se marca en gris en lugar de dejar la celda en blanco:
   una celda vacia se lee como un error de carga. */
.vacio[b-c36wzboeze] {
    color: var(--nvx-gray-400);
}
/* /Components/Pages/CRM/CrmReporteServicios.razor.rz.scp.css */
/* Reporte por servicios del CRM.

   Siete columnas y ninguna de texto largo, asi que la pagina no necesita el
   ancho de los reportes de detalle: se queda en el ancho de lectura comodo y
   deja la tabla centrada. */

.pagina[b-bbef2aqnuv] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Segunda linea de la celda de servicio: el nombre del catalogo bajo el codigo
   de dos letras. El dato principal es el codigo, que es como lo nombra la gente
   en la operacion. */
.sub[b-bbef2aqnuv] {
    display: block;
    margin-top: 3px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

/* Prefijos de D.O. que nadie dio de alta en tipodeoperacion. Se dice, en vez de
   dejar el hueco y que parezca un error de la pantalla. */
.sin-catalogo[b-bbef2aqnuv] {
    font-style: italic;
    color: var(--nvx-gray-400);
}

/* Advertencia de lectura al pie de la tabla: como se cuentan los D.O. y que hay
   dentro de "otras empresas". No es un error, asi que no lleva color de alerta. */
.nota[b-bbef2aqnuv] {
    margin: 0;
    padding: 0 var(--nvx-space-xs);
    font-size: var(--nvx-text-xs);
    line-height: 1.55;
    color: var(--nvx-gray-600);
    max-width: 90ch;
}
/* /Components/Pages/CRM/CrmServicios.razor.rz.scp.css */
.pagina[b-jj0eq1usuu] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* La caja de búsqueda vive dentro del NvxToolbar: sin un ancho propio se estira y
   desplaza el conteo de la izquierda. La clase se la pinta MudBlazor en su propio
   marcado, que no lleva el atributo de ámbito, así que hace falta ::deep. */
.pagina[b-jj0eq1usuu]  .svc__buscar {
    max-width: 320px;
}

/* ── Tabla ───────────────────────────────────────────────────────────────── */

.svc__col-nombre[b-jj0eq1usuu] {
    width: 28%;
}

.svc__col-uso[b-jj0eq1usuu] {
    width: 110px;
}

.svc__col-acc[b-jj0eq1usuu] {
    width: 1%;
}

.svc__nombre[b-jj0eq1usuu] {
    font-weight: 600;
    color: var(--nvx-gray-800);
}

/* La descripción llega a 500 caracteres. Se deja envolver en vez de recortarla
   con puntos suspensivos: es el texto que distingue dos servicios parecidos. */
.svc__descripcion[b-jj0eq1usuu] {
    color: var(--nvx-gray-600);
    white-space: normal;
    overflow-wrap: anywhere;
}

.svc__acciones[b-jj0eq1usuu] {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .svc__col-nombre[b-jj0eq1usuu] {
        width: auto;
    }

    .pagina[b-jj0eq1usuu]  .svc__buscar {
        max-width: 100%;
    }
}
/* /Components/Pages/CRM/CustomerProfile.razor.rz.scp.css */
.pagina[b-fr15pn862a] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cp__cargando[b-fr15pn862a] {
    display: flex;
    justify-content: center;
    padding: 40px;
}

/* ── Identidad ────────────────────────────────────────────────────────────
   El nombre del cliente y sus tres datos de cabecera. Va sobre --nvx-900,
   que es el único tono que aguanta texto blanco con holgura. */
.cp__identidad[b-fr15pn862a] {
    background: var(--nvx-900);
    color: #fff;
    border-radius: var(--nvx-r-lg);
    padding: var(--nvx-space-md) var(--nvx-space-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvx-space-md);
}

.cp__nombre[b-fr15pn862a] {
    font-size: var(--nvx-text-h2);
    font-weight: 700;
    line-height: 1.2;
}

.cp__nit[b-fr15pn862a] {
    font-size: var(--nvx-text-sm);
    color: rgba(255, 255, 255, .75);
}

.cp__meta[b-fr15pn862a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-lg);
}

.cp__meta > div[b-fr15pn862a] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cp__meta .cp__lbl[b-fr15pn862a] { color: rgba(255, 255, 255, .70); }
.cp__meta .cp__val[b-fr15pn862a] { color: #fff; font-weight: 600; }

/* ── Pestañas ─────────────────────────────────────────────────────────────
   El marcado lo genera MudTabs, así que sin ::deep estas reglas no lo
   alcanzarían. */
.cp__tabs[b-fr15pn862a]  .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--nvx-border);
}

.cp__tabs[b-fr15pn862a]  .mud-tabs-panels {
    padding-top: var(--nvx-space-md);
}

/* ── Rejilla de tarjetas ──────────────────────────────────────────────────
   Se ajusta sola. Un número fijo de columnas es lo que rompía estas fichas
   en un portátil angosto. */
.cp__grid[b-fr15pn862a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--nvx-space-md);
    align-items: start;
}

/* ── Fila etiqueta / valor ────────────────────────────────────────────── */
.cp__row[b-fr15pn862a] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nvx-space-sm);
    padding: 7px 0;
    border-bottom: 1px dashed var(--nvx-border);
}

.cp__row:last-child[b-fr15pn862a] { border-bottom: none; }

.cp__lbl[b-fr15pn862a] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nvx-gray-600);
    white-space: nowrap;
}

.cp__val[b-fr15pn862a] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-800);
    text-align: right;
}

/* Lo que falta por fuente de datos, no por error del usuario. */
.cp__nota[b-fr15pn862a] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    font-style: italic;
    padding: 6px 0;
}

/* ── Procedimientos de cada servicio ────────────────────────────────────── */
.cp__procs[b-fr15pn862a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp__proc[b-fr15pn862a] {
    color: var(--nvx-700);
    font-weight: 600;
    text-decoration: none;
    font-size: var(--nvx-text-sm);
}

.cp__proc:hover[b-fr15pn862a] {
    color: var(--nvx-800);
    text-decoration: underline;
}

/* ── Indicadores de crédito ─────────────────────────────────────────────── */
.cp__kpis[b-fr15pn862a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-md);
}

.cp__kpi[b-fr15pn862a] {
    background: #fff;
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-lg);
    box-shadow: var(--nvx-shadow-sm);
    padding: var(--nvx-space-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.cp__kpi-val[b-fr15pn862a] {
    font-family: var(--nvx-font-mono);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--nvx-800);
}

.cp__kpi-lbl[b-fr15pn862a] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nvx-gray-600);
}

/* El que todavía no tiene fuente de datos se atenúa, para que no se lea como
   un cero. */
.cp__kpi--sindato[b-fr15pn862a] {
    background: var(--nvx-gray-50);
    border-style: dashed;
    box-shadow: none;
}

.cp__kpi--sindato .cp__kpi-val[b-fr15pn862a] { color: var(--nvx-gray-400); }

/* Dentro del diálogo el ancho y el relleno los pone el diálogo: la ficha no
   se centra ella misma ni deja el aire de una página suelta. */
.pagina--dialogo[b-fr15pn862a] {
    max-width: none;
    margin: 0;
    padding: 0;
}
/* /Components/Pages/CRM/DlgCrmActividad.razor.rz.scp.css */
.dlgact[b-vl3dp4gfyu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding-top: var(--nvx-space-xs);
}

.dlgact__cargando[b-vl3dp4gfyu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    color: var(--nvx-gray-600);
}

/* Dos campos por renglón; en pantalla angosta, uno debajo del otro. */
.dlgact__fila2[b-vl3dp4gfyu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

@media (max-width: 720px) {
    .dlgact__fila2[b-vl3dp4gfyu] {
        grid-template-columns: 1fr;
    }
}

/* El punto de color acompaña al nombre de la bandera, no lo sustituye. */
.dlgact__bandera[b-vl3dp4gfyu] {
    display: inline-flex;
    align-items: center;
    gap: var(--nvx-space-sm);
}

.dlgact__punto[b-vl3dp4gfyu] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.dlgact__punto--roja[b-vl3dp4gfyu]     { background: var(--nvx-danger); }
.dlgact__punto--amarilla[b-vl3dp4gfyu] { background: var(--nvx-warning); }
.dlgact__punto--verde[b-vl3dp4gfyu]    { background: var(--nvx-success); }
.dlgact__punto--gris[b-vl3dp4gfyu]     { background: var(--nvx-gray-400); }

.dlgact__punto--ninguna[b-vl3dp4gfyu] {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--nvx-gray-200);
}

/* Aviso de arrastre: renombrar una actividad ya agendada cambia lo que ven los
   negocios que la tienen programada. Se dice antes de guardar, no después. */
.dlgact__agendas[b-vl3dp4gfyu] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px var(--nvx-space-md);
    border: 1px solid var(--nvx-info-bd);
    border-radius: var(--nvx-r-md);
    background: var(--nvx-info-bg);
    color: var(--nvx-info-text);
    font-size: var(--nvx-text-sm);
    line-height: 1.6;
}

.dlgact__spin[b-vl3dp4gfyu] {
    margin-right: var(--nvx-space-sm);
}
/* /Components/Pages/CRM/DlgCrmLead.razor.rz.scp.css */
.dlglead[b-q0wy7q3x4e] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.dlglead__panel[b-q0wy7q3x4e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dlglead__fila2[b-q0wy7q3x4e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

/* El DV es un solo carácter: darle media fila lo haría parecer otro campo largo
   y es justo el que la gente rellenaba de más. */
.dlglead__nit[b-q0wy7q3x4e] {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 12px;
    align-items: start;
}

@media (max-width: 720px) {
    .dlglead__fila2[b-q0wy7q3x4e] { grid-template-columns: 1fr; }
    .dlglead__nit[b-q0wy7q3x4e]   { grid-template-columns: 1fr 90px; }
}

.dlglead__spin[b-q0wy7q3x4e] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
/* /Components/Pages/CRM/DlgCrmMeta.razor.rz.scp.css */
.dlgmeta[b-ro75rm6580] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding-top: var(--nvx-space-xs);
}

.dlgmeta__cargando[b-ro75rm6580] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    color: var(--nvx-gray-600);
}

.dlgmeta__spin[b-ro75rm6580] {
    margin-right: var(--nvx-space-sm);
}
/* /Components/Pages/CRM/DlgCrmServicio.razor.rz.scp.css */
.dlgsvc[b-feo7b6zrh4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.dlgsvc__cargando[b-feo7b6zrh4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    color: var(--nvx-gray-600);
}

/* El spinner y el rótulo «Guardando…» dentro del botón. */
.dlgsvc__guardando[b-feo7b6zrh4] {
    display: inline-flex;
    align-items: center;
    gap: var(--nvx-space-sm);
}
/* /Components/Pages/CRM/DlgCustomerProfile.razor.rz.scp.css */
.dlgcp__titulo[b-a8zflb8uff] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    min-width: 0;
    color: var(--nvx-800);
    font-weight: 700;
}

/* La razón social puede ser larga: se corta con puntos suspensivos en vez de
   empujar los botones del diálogo fuera de la caja. */
.dlgcp__cliente[b-a8zflb8uff] {
    font-weight: 500;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* /Components/Pages/CRM/DlgRegistroLlamada.razor.rz.scp.css */
.dlgllam[b-mgq11rmx4y] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-height: 240px;
}

.dlgllam__panel[b-mgq11rmx4y] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Rejillas de dos y tres campos. Se colapsan a una columna en cuanto el diálogo
   no da el ancho: un campo estrujado no se puede leer ni llenar. */
.dlgllam__fila2[b-mgq11rmx4y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.dlgllam__fila3[b-mgq11rmx4y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

/* El aviso de «no está en el directorio» lleva su acción al lado: leer el
   problema y resolverlo en el mismo sitio. */
.dlgllam__alerta[b-mgq11rmx4y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvx-space-md);
    flex-wrap: wrap;
}

.dlgllam__acciones[b-mgq11rmx4y] {
    display: flex;
    justify-content: flex-end;
    gap: var(--nvx-space-sm);
}

.dlgllam__nota[b-mgq11rmx4y] {
    margin: 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}
/* /Components/Pages/CRM/FlightClearedForTakeoff.razor.rz.scp.css */
    /* Validación final del D.O. antes del despacho.

   Todo esto estaba en un <style> DENTRO del .razor, con su propio :root y con
   reglas sobre `body, html` y sobre `*`: estilos globales que se colaban a toda
   la aplicación desde una sola pantalla. Ahora es CSS aislado, las reglas
   globales se quitaron y el color sale de los tokens de nvx-theme.css.

   Los nombres --fct-* se conservan para no reescribir las reglas; lo que cambia
   es de dónde sale cada color. Van sobre .fct y no sobre :root porque el CSS
   aislado de Blazor no alcanza la raíz del documento. */
.fct[b-cn9k427pk8] {
    --fct-bg:        var(--nvx-50);
    --fct-surface:   var(--nvx-white);
    --fct-surface2:  var(--nvx-100);
    --fct-border:    var(--nvx-200);
    --fct-border-dk: var(--nvx-300);
    --fct-teal:      var(--nvx-500);
    --fct-teal-dark: var(--nvx-700);
    --fct-teal-deep: var(--nvx-800);
    --fct-text:      var(--nvx-gray-800);
    --fct-text-mid:  var(--nvx-gray-600);
    --fct-muted:     var(--nvx-gray-400);
    --fct-green:     var(--nvx-success);
    --fct-red:       var(--nvx-danger);
    --fct-amber:     var(--nvx-warning);
    --fct-info:      var(--nvx-info);
}
    .fct-titleband[b-cn9k427pk8] {
        background: var(--fct-teal); border-bottom: 3px solid var(--fct-teal-dark);
        padding: 14px 36px; color: var(--nvx-white); font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
        font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 12px;
    }
    .fct-titleband .dot[b-cn9k427pk8] { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); }

    .fct-main[b-cn9k427pk8] { max-width: 1100px; margin: 0 auto; padding: 28px 36px; }

    /* STATUS BANNER */
    .fct-status[b-cn9k427pk8] {
        border-radius: 14px; padding: 18px 24px; margin-bottom: 22px;
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
        border: 1px solid var(--fct-border); box-shadow: 0 2px 12px color-mix(in srgb, var(--nvx-500) 8%, transparent);
        transition: background 0.2s, border-color 0.2s;
    }
    .fct-status-left[b-cn9k427pk8] { display: flex; align-items: center; gap: 14px; }
    .fct-status-icon[b-cn9k427pk8] { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
    .fct-status-title[b-cn9k427pk8] { font-weight: 800; font-size: 18px; letter-spacing: 0.5px; }
    .fct-status-sub[b-cn9k427pk8] { font-size: 12px; color: var(--fct-muted); margin-top: 2px; letter-spacing: 0.3px; }
    .fct-status-en[b-cn9k427pk8] { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; padding: 6px 14px; border-radius: 20px; letter-spacing: 1px; text-transform: uppercase; }

    .fct-st-cleared[b-cn9k427pk8] { background: rgba(42,157,110,0.10); border-color: rgba(42,157,110,0.35); }
    .fct-st-cleared .fct-status-icon[b-cn9k427pk8] { background: rgba(42,157,110,0.15); color: var(--fct-green); }
    .fct-st-cleared .fct-status-title[b-cn9k427pk8] { color: var(--nvx-success-text); }
    .fct-st-cleared .fct-status-en[b-cn9k427pk8] { background: rgba(42,157,110,0.15); color: var(--nvx-success-text); }
    .fct-st-hold[b-cn9k427pk8] { background: rgba(192,57,43,0.08); border-color: rgba(192,57,43,0.30); }
    .fct-st-hold .fct-status-icon[b-cn9k427pk8] { background: rgba(192,57,43,0.12); color: var(--fct-red); }
    .fct-st-hold .fct-status-title[b-cn9k427pk8] { color: var(--fct-red); }
    .fct-st-hold .fct-status-en[b-cn9k427pk8] { background: rgba(192,57,43,0.12); color: var(--fct-red); }
    .fct-st-pending[b-cn9k427pk8] { background: rgba(217,119,6,0.07); border-color: rgba(217,119,6,0.28); }
    .fct-st-pending .fct-status-icon[b-cn9k427pk8] { background: rgba(217,119,6,0.12); color: var(--fct-amber); }
    .fct-st-pending .fct-status-title[b-cn9k427pk8] { color: var(--nvx-warning-text); }
    .fct-st-pending .fct-status-en[b-cn9k427pk8] { background: rgba(217,119,6,0.12); color: var(--nvx-warning-text); }

    /* CARD */
    .fct-card[b-cn9k427pk8] { background: var(--fct-surface); border: 1px solid var(--fct-border); border-radius: 14px; box-shadow: 0 2px 12px color-mix(in srgb, var(--nvx-500) 8%, transparent); margin-bottom: 22px; overflow: hidden; }
    .fct-card-top[b-cn9k427pk8] { background: var(--fct-teal); padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; }
    .fct-card-title[b-cn9k427pk8] { font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--nvx-white); }
    .fct-card-badge[b-cn9k427pk8] { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.35); border-radius: 20px; padding: 3px 12px; font-size: 10px; font-weight: 600; color: var(--nvx-white); letter-spacing: 1px; text-transform: uppercase; }
    .fct-card-body[b-cn9k427pk8] { padding: 24px 26px; }

    /* FORM GRID */
    .fct-form-grid[b-cn9k427pk8] { display: grid; gap: 16px 18px; }
    .fct-g-2[b-cn9k427pk8] { grid-template-columns: 1fr 1fr; }
    .fct-g-3[b-cn9k427pk8] { grid-template-columns: 1fr 1fr 1fr; }
    .fct-g-scac[b-cn9k427pk8] { grid-template-columns: 0.7fr 1.15fr 1.15fr; }
    .fct-field[b-cn9k427pk8] { display: flex; flex-direction: column; gap: 6px; }
    .fct-field-lbl[b-cn9k427pk8] { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fct-muted); }
    .fct-field-ctrl[b-cn9k427pk8] {
        font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--fct-text);
        background: var(--fct-bg); border: 1.5px solid var(--fct-border); border-radius: 8px;
        padding: 10px 13px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%;
        font-family: inherit;
    }
    .fct-field-ctrl:focus[b-cn9k427pk8] { border-color: var(--fct-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nvx-500) 12%, transparent); }
    .fct-field-ctrl[readonly][b-cn9k427pk8] { background: var(--fct-surface2); color: var(--fct-teal-dark); font-weight: 500; cursor: default; }

    /* CLEARANCE ROWS */
    .fct-clr-row[b-cn9k427pk8] { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(194,232,230,0.7); }
    .fct-clr-row:last-child[b-cn9k427pk8] { border-bottom: none; }
    .fct-clr-lbl[b-cn9k427pk8] { font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--fct-text-mid); }
    .fct-clr-hint[b-cn9k427pk8] { display: block; font-size: 10px; color: var(--fct-muted); font-weight: 400; letter-spacing: 0.3px; margin-top: 2px; text-transform: none; }

    /* SEGMENTED CONTROL */
    .fct-seg[b-cn9k427pk8] { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .fct-seg-btn[b-cn9k427pk8] {
        font-weight: 600; font-size: 12px; letter-spacing: 0.5px;
        padding: 8px 18px; border-radius: 8px; cursor: pointer; user-select: none;
        border: 1.5px solid var(--fct-border); background: var(--fct-bg); color: var(--fct-text-mid);
        transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
    }
    .fct-seg-btn:hover[b-cn9k427pk8] { border-color: var(--fct-border-dk); }
    .fct-seg-btn.fct-ok.fct-active[b-cn9k427pk8] { background: rgba(42,157,110,0.12); border-color: rgba(42,157,110,0.45); color: var(--nvx-success-text); }
    .fct-seg-btn.fct-bad.fct-active[b-cn9k427pk8] { background: rgba(192,57,43,0.10); border-color: rgba(192,57,43,0.40); color: var(--fct-red); }
    .fct-clr-danger[b-cn9k427pk8] { font-size: 11px; color: var(--fct-red); font-weight: 600; margin-left: 6px; letter-spacing: 0.3px; }

    /* ISF PILL */
    .fct-isf-pill[b-cn9k427pk8] {
        display: inline-flex; align-items: center; gap: 8px;
        font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
        background: rgba(8,145,178,0.10); color: var(--nvx-info-text); border: 1px solid rgba(8,145,178,0.25);
        border-radius: 8px; padding: 8px 14px; letter-spacing: 0.5px;
    }
    .fct-isf-calc[b-cn9k427pk8] { font-size: 11px; color: var(--fct-muted); margin-left: 10px; }

    /* ACTIONS */
    .fct-actions[b-cn9k427pk8] { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
    .fct-btn[b-cn9k427pk8] {
        font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
        border-radius: 8px; padding: 11px 22px; cursor: pointer; transition: all 0.15s;
        display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid transparent; font-family: inherit;
    }
    .fct-btn-primary[b-cn9k427pk8] { background: var(--fct-teal); color: var(--nvx-white); box-shadow: 0 3px 12px color-mix(in srgb, var(--nvx-500) 35%, transparent); }
    .fct-btn-primary:hover:not(:disabled)[b-cn9k427pk8] { background: var(--fct-teal-dark); transform: translateY(-1px); }
    .fct-btn-primary:disabled[b-cn9k427pk8] { opacity: .6; cursor: not-allowed; }
    .fct-btn-clear[b-cn9k427pk8] { background: transparent; color: var(--fct-muted); border-color: var(--fct-border); }
    .fct-btn-clear:hover[b-cn9k427pk8] { border-color: var(--fct-red); color: var(--fct-red); }

    .fct-alert-error[b-cn9k427pk8] { background: var(--nvx-danger-bg); color: var(--nvx-danger-text); border: 1px solid var(--nvx-danger-bd); border-radius: 8px; padding: 14px 18px; font-size: 13px; font-weight: 600; }
    .fct-alert-ok[b-cn9k427pk8] { background: rgba(42,157,110,0.10); color: var(--nvx-success-text); border: 1px solid rgba(42,157,110,0.3); border-radius: 8px; padding: 12px 18px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
    .fct-loading[b-cn9k427pk8] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; gap: 16px; color: var(--fct-muted); font-size: 13px; font-weight: 600; }

    @@media (max-width: 760px) {
        .fct-main[b-cn9k427pk8] { padding: 18px; }
        .fct-g-2[b-cn9k427pk8], .fct-g-3[b-cn9k427pk8], .fct-g-scac[b-cn9k427pk8] { grid-template-columns: 1fr; }
        .fct-clr-row[b-cn9k427pk8] { grid-template-columns: 1fr; gap: 10px; }
        .fct-status[b-cn9k427pk8] { flex-direction: column; align-items: flex-start; }
    }

/* El contenedor de la página */
.fct[b-cn9k427pk8] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    color: var(--fct-text);
}

.fct-spinner[b-cn9k427pk8]  { color: var(--nvx-500); }
.fct-mt[b-cn9k427pk8]       { margin-top: var(--nvx-space-md); }
.fct-angosto[b-cn9k427pk8]  { max-width: 520px; }
/* /Components/Pages/CRM/RegistroVisitas.razor.rz.scp.css */
/* Registro de visitas — CRM.

   Todo lo que antes vivía en el <style> de la página, sin un solo hex: los
   veintiséis colores propios se resolvieron con los tokens de nvx-theme.css, y
   la banda de título, la tarjeta, la tabla y los badges los ponen ahora
   NvxPageHeader, NvxCard, NvxTable y NvxBadge. Aquí sólo queda la disposición
   que es de esta pantalla. */

.pagina[b-x8cra6838s] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Formulario ──────────────────────────────────────────────────────────── */

/* Rejilla auto-ajustable, no de dos columnas fijas: con `1fr 1fr` los campos
   quedaban estrujados por debajo de 900px, que es justo el ancho al que se
   trabaja con el menú abierto. */
.rv__rejilla[b-x8cra6838s] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
    align-items: start;
}

/* Campos que ocupan la fila entera: los dos grupos de opción y el comentario. */
.rv__ancho[b-x8cra6838s] {
    grid-column: 1 / -1;
    min-width: 0;
}

/* MudRadioGroup no trae etiqueta propia, y sin ella los dos grupos de opción
   flotarían sin decir de qué son. */
.rv__rotulo[b-x8cra6838s] {
    display: block;
    margin-bottom: 2px;
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    color: var(--nvx-gray-600);
}

/* La clase viaja en el `Class` de un componente de MudBlazor: su marcado no
   lleva el atributo de ámbito, así que hace falta ::deep para alcanzarlo. */
.rv__ancho[b-x8cra6838s]  .rv__radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-lg);
}

/* Etiqueta de cada opción: el ícono y el texto en una sola línea. Antes eran
   emojis (🏢, 💻, 👔, 🙋), que cada sistema operativo dibuja distinto. */
.rv__opcion[b-x8cra6838s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nvx-text-body);
    color: var(--nvx-gray-800);
}

.rv__opcion[b-x8cra6838s]  .mud-icon-root {
    color: var(--nvx-700);
}

/* Guardar y Nuevo, separados del último campo por una línea: son el final del
   formulario, no un campo más. */
.rv__acciones[b-x8cra6838s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-lg);
    padding-top: var(--nvx-space-md);
    border-top: var(--nvx-border);
}

/* ── Listado ─────────────────────────────────────────────────────────────── */

/* La empresa es lo que el ojo busca al recorrer el listado. */
.rv__empresa[b-x8cra6838s] {
    font-weight: 600;
    max-width: 280px;
}

/* Un dato que falta se dice; en blanco parece un error de carga y no un campo
   que nadie llenó. */
.rv__vacio[b-x8cra6838s] {
    color: var(--nvx-gray-400);
    font-style: italic;
}

/* La fila que está cargada arriba en el formulario. Se marca con el tinte de
   marca y una barra a la izquierda, para que se distinga del simple hover
   mientras el usuario edita. */
.rv__fila-activa td[b-x8cra6838s] {
    background: var(--nvx-100);
    color: var(--nvx-900);
    font-weight: 600;
}

.rv__fila-activa td:first-child[b-x8cra6838s] {
    box-shadow: inset 3px 0 0 var(--nvx-500);
}

.rv__acciones-fila[b-x8cra6838s] {
    white-space: nowrap;
    text-align: right;
}

/* Por debajo de 1024px la tabla ya lleva su propio scroll horizontal; lo que
   hay que ceder es el ancho de las columnas de texto largo y el de la rejilla. */
@media (max-width: 1024px) {
    .pagina[b-x8cra6838s] {
        padding: 14px var(--nvx-space-md) 32px;
    }

    .rv__rejilla[b-x8cra6838s] {
        grid-template-columns: 1fr;
    }

    .rv__empresa[b-x8cra6838s] {
        max-width: 180px;
    }
}
/* /Components/Pages/CRM/ReporteMetasUsuario.razor.rz.scp.css */
/* Reporte de metas por usuario — CRM.

   Aquí vive todo el CSS de la página. Antes estaba en un bloque <style> dentro
   del .razor, con su propio :root, treinta y cinco colores escritos a mano y
   copias de la banda de título, la tarjeta, los botones, la tabla y la
   paginación que el sistema ya resuelve.

   Aquel <style> además abría con `*, *::before, *::after { margin:0; padding:0 }`
   y con reglas sobre `body`. Al no estar aislado, eso se aplicaba a TODA la
   aplicación mientras la página estuviera cargada. Al mudarlo a este archivo la
   fuga desaparece, y el reset ya no hace falta: nvx-theme.css trae el suyo,
   deliberadamente conservador.

   De lo anterior sólo queda lo que ningún Nvx* da: las tarjetas de indicadores,
   las barras de efectividad, el semáforo y el pie de paginación.

   Sobre ::deep — el marcado que la página escribe dentro de NvxCard, NvxTable,
   NvxToolbar y los componentes de MudBlazor se dibuja dentro de ellos, así que
   se alcanza con `.pagina ::deep`; lo que es marcado propio y directo de la
   página va con el selector desnudo. */

.pagina[b-mpftmkfvgn] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* ══ INDICADORES ═══════════════════════════════════════════════════════════
   Rejilla auto-ajustable: la versión anterior fijaba seis columnas y en
   portátil las tarjetas quedaban de 130px, con la cifra partida en dos líneas.

   Cada modificador define sus propias variables a partir de los tokens del
   tema; nada de :root en la página. */

.rm__kpis[b-mpftmkfvgn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: var(--nvx-space-sm);
}

.rm__kpi[b-mpftmkfvgn] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px var(--nvx-space-md);
    background: var(--nvx-white);
    border: var(--nvx-border);
    border-left: 4px solid var(--rm-acento);
    border-radius: var(--nvx-r-md);
    box-shadow: var(--nvx-shadow-sm);
}

.rm__kpi--marca[b-mpftmkfvgn]   { --rm-acento: var(--nvx-800);     --rm-acento-bg: var(--nvx-100);        --rm-acento-text: var(--nvx-800); }
.rm__kpi--verde[b-mpftmkfvgn]   { --rm-acento: var(--nvx-success); --rm-acento-bg: var(--nvx-success-bg); --rm-acento-text: var(--nvx-success-text); }
.rm__kpi--ambar[b-mpftmkfvgn]   { --rm-acento: var(--nvx-warning); --rm-acento-bg: var(--nvx-warning-bg); --rm-acento-text: var(--nvx-warning-text); }
.rm__kpi--info[b-mpftmkfvgn]    { --rm-acento: var(--nvx-info);    --rm-acento-bg: var(--nvx-info-bg);    --rm-acento-text: var(--nvx-info-text); }
.rm__kpi--violeta[b-mpftmkfvgn] { --rm-acento: var(--nvx-accent);  --rm-acento-bg: var(--nvx-accent-bg);  --rm-acento-text: var(--nvx-accent-text); }

/* El ícono de MudBlazor hereda `currentColor`: basta con darle color al
   envoltorio propio, sin alcanzar el <svg>. */
.rm__kpi-icono[b-mpftmkfvgn] {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rm-acento-bg);
    color: var(--rm-acento-text);
}

.rm__kpi-datos[b-mpftmkfvgn] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* La cifra encabeza la tarjeta, así que va a la izquierda: nvx-num alinea a la
   derecha porque nació para celdas de tabla. Se conserva la numeración
   tabular, que es lo que hace comparables las seis tarjetas. */
.rm__kpi-cifra[b-mpftmkfvgn] {
    font-family: var(--nvx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--nvx-tracking-tight);
    color: var(--rm-acento-text);
}

.rm__kpi-rotulo[b-mpftmkfvgn] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--nvx-tracking-label);
    color: var(--nvx-gray-600);
}

.rm__kpi-nota[b-mpftmkfvgn] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.35;
}


/* ══ ANÁLISIS ══════════════════════════════════════════════════════════════ */

.rm__analisis[b-mpftmkfvgn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--nvx-space-md);
    align-items: start;
}

/* El semáforo es una NvxTable dentro de una NvxCard sin relleno. La tabla trae
   su propio borde y su radio, que dentro de la tarjeta dibujarían una segunda
   línea a un píxel de la primera. Se le quitan sólo aquí, dentro de la rejilla
   de análisis: la tabla de resultados, que va suelta, conserva los suyos. */
.rm__analisis[b-mpftmkfvgn]  .nvx-table__scroll {
    border: 0;
    border-radius: 0;
}


/* ── Efectividad por asesor ─────────────────────────────────────────────────
   Barras sin librería: el ancho del relleno es el porcentaje que la página
   calcula en C#, y por eso ese `style` sigue siendo el único en línea del
   bloque. El color lo pone la clase, no el atributo. */

.pagina[b-mpftmkfvgn]  .rm__ef-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-md);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--nvx-gray-100);
}

.pagina[b-mpftmkfvgn]  .rm__ef-leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    color: var(--nvx-gray-600);
}

.pagina[b-mpftmkfvgn]  .rm__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

/* Relleno, no texto: aquí los tonos plenos no incumplen la regla de contraste. */
.pagina[b-mpftmkfvgn]  .rm__punto--alta  { background: var(--nvx-success); }
.pagina[b-mpftmkfvgn]  .rm__punto--media { background: var(--nvx-warning); }
.pagina[b-mpftmkfvgn]  .rm__punto--baja  { background: var(--nvx-danger); }

.pagina[b-mpftmkfvgn]  .rm__ef-titulo {
    margin: 12px 0 10px;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--nvx-tracking-label);
    color: var(--nvx-gray-400);
    text-align: right;
}

.pagina[b-mpftmkfvgn]  .rm__ef-fila {
    margin-bottom: 13px;
}

.pagina[b-mpftmkfvgn]  .rm__ef-fila:last-child {
    margin-bottom: 0;
}

.pagina[b-mpftmkfvgn]  .rm__ef-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvx-space-sm);
    margin-bottom: 5px;
}

.pagina[b-mpftmkfvgn]  .rm__ef-usuario {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.pagina[b-mpftmkfvgn]  .rm__ef-nombre {
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    color: var(--nvx-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pagina[b-mpftmkfvgn]  .rm__ef-pct {
    font-size: var(--nvx-text-sm);
    font-weight: 700;
}

.pagina[b-mpftmkfvgn]  .rm__ef-pct--alta  { color: var(--nvx-success-text); }
.pagina[b-mpftmkfvgn]  .rm__ef-pct--media { color: var(--nvx-warning-text); }
.pagina[b-mpftmkfvgn]  .rm__ef-pct--baja  { color: var(--nvx-danger-text); }

.pagina[b-mpftmkfvgn]  .rm__pista {
    display: block;
    height: 8px;
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-gray-100);
    overflow: hidden;
}

.pagina[b-mpftmkfvgn]  .rm__valor {
    display: block;
    height: 100%;
    border-radius: var(--nvx-r-sm);
    transition: width var(--nvx-transition);
}

.pagina[b-mpftmkfvgn]  .rm__valor--alta  { background: var(--nvx-success); }
.pagina[b-mpftmkfvgn]  .rm__valor--media { background: var(--nvx-warning); }
.pagina[b-mpftmkfvgn]  .rm__valor--baja  { background: var(--nvx-danger); }


/* ── Semáforo de cumplimiento ─────────────────────────────────────────────── */

/* Las columnas de señal son estrechas y se leen de arriba abajo: centradas, no
   a la derecha como una cifra. El selector arranca en .pagina para ganarle en
   especificidad al `thead th` del propio NvxTable. */
.pagina[b-mpftmkfvgn]  th.rm__th-sem,
.pagina[b-mpftmkfvgn]  td.rm__td-sem {
    text-align: center;
    width: 1%;
}

.pagina[b-mpftmkfvgn]  .rm__sem-asesor {
    font-weight: 600;
    color: var(--nvx-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.pagina[b-mpftmkfvgn]  .rm__sem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.pagina[b-mpftmkfvgn]  .rm__sem--ok    { background: var(--nvx-success-bg); color: var(--nvx-success-text); }
.pagina[b-mpftmkfvgn]  .rm__sem--medio { background: var(--nvx-warning-bg); color: var(--nvx-warning-text); }
.pagina[b-mpftmkfvgn]  .rm__sem--bajo  { background: var(--nvx-danger-bg);  color: var(--nvx-danger-text); }

/* El tamaño por defecto de MudIcon (24px) desborda el círculo de 22px. */
.pagina[b-mpftmkfvgn]  .rm__sem-icono {
    font-size: 14px;
    flex: none;
}

.pagina[b-mpftmkfvgn]  .rm__sem-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm) var(--nvx-space-md);
}

.pagina[b-mpftmkfvgn]  .rm__sem-leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    color: var(--nvx-gray-600);
    text-transform: none;
    letter-spacing: normal;
}

/* En la leyenda las señales son sólo referencia: más pequeñas que en la tabla. */
.pagina[b-mpftmkfvgn]  .rm__sem-leyenda .rm__sem {
    width: 18px;
    height: 18px;
}

.pagina[b-mpftmkfvgn]  .rm__sem-leyenda .rm__sem-icono {
    font-size: 12px;
}


/* ══ TABLA DE RESULTADOS ═══════════════════════════════════════════════════
   El contenedor, el encabezado fijo, la zebra, el pie de totales y los tres
   estados son de NvxTable. Lo que la página agrega son los matices de celda. */

.pagina[b-mpftmkfvgn]  .rm__buscar {
    width: 230px;
    max-width: 100%;
}

.pagina[b-mpftmkfvgn]  .rm__usuario {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* El fondo lo calcula la página con AvatarColor, que devuelve un token de los
   que aguantan texto blanco: encima van las iniciales. */
.pagina[b-mpftmkfvgn]  .rm__avatar {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    color: var(--nvx-white);
}

.pagina[b-mpftmkfvgn]  .rm__nombre {
    font-weight: 600;
    color: var(--nvx-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

/* Un cero y un dato en firme se leían igual. En vez de un punto de color al
   lado de cada cifra —que era un adorno más por celda—, el cero se apaga y la
   cifra con contenido se afirma. */
.pagina[b-mpftmkfvgn]  .rm__cifra {
    color: var(--nvx-gray-400);
}

.pagina[b-mpftmkfvgn]  .rm__cifra--activa {
    color: var(--nvx-900);
    font-weight: 600;
}

/* Meta: lo alcanzado arriba, contra qué se compara debajo y la brecha al pie.
   La columna lleva nvx-num, así que el bloque alinea a la derecha con ella. */
.pagina[b-mpftmkfvgn]  .rm__meta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    line-height: 1.25;
}

.pagina[b-mpftmkfvgn]  .rm__meta-real {
    font-weight: 700;
    color: var(--nvx-900);
}

.pagina[b-mpftmkfvgn]  .rm__meta-obj {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}

.pagina[b-mpftmkfvgn]  .rm__brecha {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
}

.pagina[b-mpftmkfvgn]  .rm__brecha--pos { color: var(--nvx-success-text); }
.pagina[b-mpftmkfvgn]  .rm__brecha--neg { color: var(--nvx-danger-text); }

/* La flecha dentro de la píldora de tendencia. */
.pagina[b-mpftmkfvgn]  .rm__badge-icono {
    font-size: 13px;
    flex: none;
}

/* Dato que no existe. Se dice en gris en vez de dejar la celda en blanco: una
   celda vacía se lee como un error de carga y no como un campo sin valor. */
.pagina[b-mpftmkfvgn]  .rm__vacio {
    color: var(--nvx-gray-400);
    font-style: italic;
}


/* ══ PIE Y PAGINACIÓN ══════════════════════════════════════════════════════ */

.rm__pie[b-mpftmkfvgn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvx-space-sm);
    padding: 2px var(--nvx-space-xs);
}

.rm__pie-conteo[b-mpftmkfvgn] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

.rm__pie-conteo b[b-mpftmkfvgn] {
    color: var(--nvx-800);
}

.rm__paginas[b-mpftmkfvgn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-xs);
}

/* Botón de página: cuadrado y angosto, para que veinte quepan en una línea. */
.pagina[b-mpftmkfvgn]  .rm__pagina {
    min-width: 32px;
    padding: 2px 6px;
}


/* ══ ANGOSTO ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    .pagina[b-mpftmkfvgn] {
        padding: 12px var(--nvx-space-md) 32px;
    }

    .rm__analisis[b-mpftmkfvgn] {
        grid-template-columns: 1fr;
    }

    .pagina[b-mpftmkfvgn]  .rm__buscar {
        width: 100%;
    }

    .pagina[b-mpftmkfvgn]  .rm__nombre {
        max-width: 150px;
    }
}
/* /Components/Pages/CRM/ReporteVisitas.razor.rz.scp.css */
/* Reporte de visitas comerciales.

   Aquí vive todo el CSS de la página. Antes estaba en un bloque <style> dentro
   del .razor, con su propio :root, cuarenta y nueve colores escritos a mano y
   una copia de la banda de título, la tabla, los botones y la paginación que el
   sistema ya resuelve. De aquello sólo queda lo que ningún Nvx* da: las
   tarjetas de indicadores, las barras de distribución, el ranking de asesores y
   el pie de paginación.

   Sobre ::deep — el marcado que la página le pasa a NvxFilterBar, NvxCard,
   NvxTable y a los componentes de MudBlazor se dibuja dentro de ellos, así que
   el atributo de ámbito no basta para alcanzarlo. Todo lo que cuelga de un
   componente lleva `.pagina ::deep`; lo que es marcado propio de la página va
   con el selector desnudo. */

.pagina[b-sg5scdwfzv] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* ══ FILTROS ═══════════════════════════════════════════════════════════════
   La casilla «Todos los asesores» ocupa una celda más de la rejilla de
   NvxFilterBar y lleva debajo la aclaración de qué hace. */

.pagina[b-sg5scdwfzv]  .rv__todos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.pagina[b-sg5scdwfzv]  .rv__hint {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    line-height: 1.4;
    padding-left: 30px;   /* alinea con la etiqueta de la casilla */
}


/* ══ INDICADORES ═══════════════════════════════════════════════════════════
   Rejilla auto-ajustable: la versión anterior fijaba tres columnas y en
   portátil las tarjetas se montaban unas sobre otras.

   Cada modificador define sus propias variables a partir de los tokens del
   tema; nada de :root en la página. */

.rv__kpis[b-sg5scdwfzv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--nvx-space-sm);
}

.rv__kpi[b-sg5scdwfzv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px var(--nvx-space-md);
    background: var(--nvx-white);
    border: var(--nvx-border);
    border-left: 4px solid var(--rv-acento);
    border-radius: var(--nvx-r-md);
    box-shadow: var(--nvx-shadow-sm);
}

.rv__kpi--marca[b-sg5scdwfzv] { --rv-acento: var(--nvx-800);     --rv-acento-bg: var(--nvx-100);         --rv-acento-text: var(--nvx-800); }
.rv__kpi--verde[b-sg5scdwfzv] { --rv-acento: var(--nvx-success); --rv-acento-bg: var(--nvx-success-bg);  --rv-acento-text: var(--nvx-success-text); }
.rv__kpi--ambar[b-sg5scdwfzv] { --rv-acento: var(--nvx-warning); --rv-acento-bg: var(--nvx-warning-bg);  --rv-acento-text: var(--nvx-warning-text); }

/* El ícono de MudBlazor hereda `currentColor`: basta con darle color al
   envoltorio propio, sin alcanzar el <svg>. */
.rv__kpi-icono[b-sg5scdwfzv] {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rv-acento-bg);
    color: var(--rv-acento-text);
}

.rv__kpi-datos[b-sg5scdwfzv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* La cifra encabeza la tarjeta, así que va a la izquierda: nvx-num alinea a la
   derecha porque nació para celdas de tabla. Se conserva la numeración
   tabular, que es lo que hace comparables las tres tarjetas. */
.rv__kpi-cifra[b-sg5scdwfzv] {
    font-family: var(--nvx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--nvx-tracking-tight);
    color: var(--rv-acento-text);
}

.rv__kpi-rotulo[b-sg5scdwfzv] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--nvx-tracking-label);
    color: var(--nvx-gray-600);
}

.rv__kpi-nota[b-sg5scdwfzv] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.35;
}


/* ══ ANÁLISIS ══════════════════════════════════════════════════════════════ */

.rv__analisis[b-sg5scdwfzv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--nvx-space-md);
    align-items: start;
}


/* ── Distribución por categoría ─────────────────────────────────────────────
   Barras sin librería: el ancho del relleno es el porcentaje que la página
   calcula en C#, y por eso ese `style` sigue siendo el único en línea de este
   bloque. El color lo pone la clase, no el atributo. */

.pagina[b-sg5scdwfzv]  .rv__dist {
    margin-bottom: 18px;
}

.pagina[b-sg5scdwfzv]  .rv__dist:last-child {
    margin-bottom: 0;
}

.pagina[b-sg5scdwfzv]  .rv__dist-asesor {
    margin: 0 0 8px;
    font-size: var(--nvx-text-sm);
    font-weight: 700;
    color: var(--nvx-800);
}

.pagina[b-sg5scdwfzv]  .rv__barra-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvx-space-sm);
    margin-bottom: 5px;
}

.pagina[b-sg5scdwfzv]  .rv__barra-meta--segunda {
    margin-top: 10px;
}

.pagina[b-sg5scdwfzv]  .rv__barra-rotulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    color: var(--nvx-gray-600);
}

.pagina[b-sg5scdwfzv]  .rv__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.pagina[b-sg5scdwfzv]  .rv__punto--exito { background: var(--nvx-success); }
.pagina[b-sg5scdwfzv]  .rv__punto--info  { background: var(--nvx-info); }

.pagina[b-sg5scdwfzv]  .rv__barra-nums {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pagina[b-sg5scdwfzv]  .rv__barra-cifra {
    font-size: var(--nvx-text-sm);
    font-weight: 700;
    color: var(--nvx-900);
}

.pagina[b-sg5scdwfzv]  .rv__barra-pct {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}

.pagina[b-sg5scdwfzv]  .rv__barra-pista {
    display: block;
    height: 8px;
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-gray-100);
    overflow: hidden;
}

.pagina[b-sg5scdwfzv]  .rv__barra-valor {
    display: block;
    height: 100%;
    border-radius: var(--nvx-r-sm);
    transition: width var(--nvx-transition);
}

/* Relleno, no texto: aquí los tonos plenos no incumplen la regla de contraste. */
.pagina[b-sg5scdwfzv]  .rv__barra-valor--exito { background: var(--nvx-success); }
.pagina[b-sg5scdwfzv]  .rv__barra-valor--info  { background: var(--nvx-info); }


/* ── Ranking de asesores ──────────────────────────────────────────────────── */

.pagina[b-sg5scdwfzv]  .rv__rank {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--nvx-gray-100);
}

.pagina[b-sg5scdwfzv]  .rv__rank:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Los tres primeros llevan trofeo; del cuarto en adelante, el número. */
.pagina[b-sg5scdwfzv]  .rv__rank-medalla {
    flex: none;
    width: 18px;
    text-align: center;
}

.pagina[b-sg5scdwfzv]  .rv__rank-medalla--oro    { color: var(--nvx-warning); }
.pagina[b-sg5scdwfzv]  .rv__rank-medalla--plata  { color: var(--nvx-gray-400); }
.pagina[b-sg5scdwfzv]  .rv__rank-medalla--bronce { color: var(--nvx-warning-text); }

.pagina[b-sg5scdwfzv]  .rv__rank-pos {
    flex: none;
    width: 18px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    text-align: center;
}

/* El fondo lo calcula la página con AvatarColorFor, que devuelve un token de
   los que aguantan texto blanco. */
.pagina[b-sg5scdwfzv]  .rv__rank-avatar {
    flex: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    color: var(--nvx-white);
}

.pagina[b-sg5scdwfzv]  .rv__rank-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pagina[b-sg5scdwfzv]  .rv__rank-nombre {
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    color: var(--nvx-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pagina[b-sg5scdwfzv]  .rv__rank-sub {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}

.pagina[b-sg5scdwfzv]  .rv__rank-cifra {
    flex: none;
    font-size: var(--nvx-text-h3);
    font-weight: 700;
    color: var(--nvx-900);
}


/* ══ TABLA ═════════════════════════════════════════════════════════════════
   El contenedor, el encabezado fijo, la zebra y los tres estados son de
   NvxTable. Lo que la página agrega es el encabezado ordenable y dos matices
   de celda. */

.pagina[b-sg5scdwfzv]  .rv__buscar {
    width: 240px;
    max-width: 100%;
}

.pagina[b-sg5scdwfzv]  .rv__th-orden {
    cursor: pointer;
    user-select: none;
}

.pagina[b-sg5scdwfzv]  .rv__th-orden:hover {
    background: var(--nvx-900);
}

/* La flecha reserva su hueco siempre: sin ancho fijo, ordenar por una columna
   corría de sitio las demás. */
.pagina[b-sg5scdwfzv]  .rv__orden {
    display: inline-block;
    width: 12px;
    margin-left: 4px;
    text-align: center;
    color: var(--nvx-300);
}

.pagina[b-sg5scdwfzv]  .rv__asesor {
    font-weight: 600;
    color: var(--nvx-800);
}

/* Dato que no existe. Se marca en gris en vez de dejar la celda en blanco: una
   celda vacía se lee como un error de carga. */
.pagina[b-sg5scdwfzv]  .rv__vacio {
    color: var(--nvx-gray-400);
}


/* ══ PIE Y PAGINACIÓN ══════════════════════════════════════════════════════ */

.rv__pie[b-sg5scdwfzv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvx-space-sm);
    padding: 2px var(--nvx-space-xs);
}

.rv__pie-conteo[b-sg5scdwfzv] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

.rv__pie-conteo b[b-sg5scdwfzv] {
    color: var(--nvx-800);
}

.rv__paginas[b-sg5scdwfzv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-xs);
}

/* Botón de página: cuadrado y angosto, para que veinte quepan en una línea. */
.pagina[b-sg5scdwfzv]  .rv__pagina {
    min-width: 32px;
    padding: 2px 6px;
}


/* ══ ANGOSTO ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    .pagina[b-sg5scdwfzv] {
        padding: 12px var(--nvx-space-md) 32px;
    }

    .rv__analisis[b-sg5scdwfzv] {
        grid-template-columns: 1fr;
    }

    .pagina[b-sg5scdwfzv]  .rv__buscar {
        width: 100%;
    }
}
/* /Components/Pages/CRM/Responsable.razor.rz.scp.css */
/* Responsables (CRM).

   Todo el color sale de los tokens de nvx-theme.css. La página no define
   variables propias porque no necesita ninguna: cada valor que usaba el diseño
   viejo tiene ya su token equivalente. */

.pagina[b-8p5m6kdjeg] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Formulario ──────────────────────────────────────────────────────────────
   Rejilla que se auto-ajusta: con dos columnas fijas, el diseño viejo se
   rompía por debajo de 900px y había que rescatarlo con una media query.
   ─────────────────────────────────────────────────────────────────────────── */

.resp__rejilla[b-8p5m6kdjeg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
}

.resp__acciones[b-8p5m6kdjeg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
    padding-top: var(--nvx-space-md);
    border-top: var(--nvx-border);
}

/* ── Tabla ───────────────────────────────────────────────────────────────────
   Estas filas y celdas se escriben en Responsable.razor y se pasan a NvxTable
   como fragmento, así que llevan el ámbito de esta página: se estilizan
   directamente, sin ::deep.
   ─────────────────────────────────────────────────────────────────────────── */

/* La fila entera es clicable: sube el registro al formulario de arriba. */
.resp__fila[b-8p5m6kdjeg] {
    cursor: pointer;
}

/* El fondo va en las celdas y no en la fila: así gana sobre la zebra y el
   hover de NvxTable, que pintan el <tr>, sin pelear por especificidad. */
.resp__fila-activa td[b-8p5m6kdjeg] {
    background: var(--nvx-100);
}

.resp__fila-activa td:first-child[b-8p5m6kdjeg] {
    box-shadow: inset 3px 0 0 var(--nvx-500);
}

.resp__nombre[b-8p5m6kdjeg] {
    font-weight: 600;
    color: var(--nvx-800);
}

.resp__th-accion[b-8p5m6kdjeg],
.resp__celda-accion[b-8p5m6kdjeg] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* ── Confirmación de borrado ─────────────────────────────────────────────── */

.resp__dlg-titulo[b-8p5m6kdjeg] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
}

.resp__dlg-texto[b-8p5m6kdjeg] {
    margin: 0;
    font-size: var(--nvx-text-body);
    color: var(--nvx-gray-600);
    line-height: 1.6;
}

.resp__dlg-texto strong[b-8p5m6kdjeg] {
    color: var(--nvx-gray-800);
}
/* /Components/Pages/CRM/Scoring.razor.rz.scp.css */
/* Scoring de clientes. Todos los colores salen de nvx-theme.css; las cuatro
   categorías, de los tokens --nvx-score-*. */

.pagina[b-8eram1eac9] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* ══ CATEGORÍAS ═════════════════════════════════════════════════════════════
   Una clase por categoría fija tres variables; la píldora, el botón de la
   leyenda y la tarjeta KPI las consumen igual. */
.sco__banda--a[b-8eram1eac9]       { --sco-bg: var(--nvx-score-a-bg); --sco-bd: var(--nvx-score-a-bd); --sco-text: var(--nvx-score-a-text); --sco-solido: var(--nvx-score-a); }
.sco__banda--b[b-8eram1eac9]       { --sco-bg: var(--nvx-score-b-bg); --sco-bd: var(--nvx-score-b-bd); --sco-text: var(--nvx-score-b-text); --sco-solido: var(--nvx-score-b); }
.sco__banda--c[b-8eram1eac9]       { --sco-bg: var(--nvx-score-c-bg); --sco-bd: var(--nvx-score-c-bd); --sco-text: var(--nvx-score-c-text); --sco-solido: var(--nvx-score-c); }
.sco__banda--d[b-8eram1eac9]       { --sco-bg: var(--nvx-score-d-bg); --sco-bd: var(--nvx-score-d-bd); --sco-text: var(--nvx-score-d-text); --sco-solido: var(--nvx-score-d); }
.sco__banda--sindato[b-8eram1eac9] { --sco-bg: var(--nvx-gray-100);   --sco-bd: var(--nvx-gray-200);   --sco-text: var(--nvx-gray-600);   --sco-solido: var(--nvx-gray-400); }

.sco__banda[b-8eram1eac9] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nvx-r-sm);
    border: 1px solid var(--sco-bd);
    background: var(--sco-bg);
    color: var(--sco-text);
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}


/* ══ KPI ════════════════════════════════════════════════════════════════════ */
.sco__kpis[b-8eram1eac9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--nvx-space-sm);
}

.sco__kpi[b-8eram1eac9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px var(--nvx-space-md);
    background: var(--nvx-white);
    border: var(--nvx-border);
    border-left: 4px solid var(--sco-acento);
    border-radius: var(--nvx-r-md);
    box-shadow: var(--nvx-shadow-sm);
}

.sco__kpi--marca[b-8eram1eac9]   { --sco-acento: var(--nvx-800);     --sco-acento-bg: var(--nvx-100);        --sco-acento-text: var(--nvx-800); }
.sco__kpi--ok[b-8eram1eac9]      { --sco-acento: var(--nvx-success); --sco-acento-bg: var(--nvx-success-bg); --sco-acento-text: var(--nvx-success-text); }
.sco__kpi--alerta[b-8eram1eac9]  { --sco-acento: var(--nvx-warning); --sco-acento-bg: var(--nvx-warning-bg); --sco-acento-text: var(--nvx-warning-text); }
.sco__kpi--riesgo[b-8eram1eac9]  { --sco-acento: var(--nvx-danger);  --sco-acento-bg: var(--nvx-danger-bg);  --sco-acento-text: var(--nvx-danger-text); }
.sco__kpi--banda-a[b-8eram1eac9] { --sco-acento: var(--nvx-score-a); --sco-acento-bg: var(--nvx-score-a-bg); --sco-acento-text: var(--nvx-score-a-text); }
.sco__kpi--banda-b[b-8eram1eac9] { --sco-acento: var(--nvx-score-b); --sco-acento-bg: var(--nvx-score-b-bg); --sco-acento-text: var(--nvx-score-b-text); }
.sco__kpi--banda-c[b-8eram1eac9] { --sco-acento: var(--nvx-score-c); --sco-acento-bg: var(--nvx-score-c-bg); --sco-acento-text: var(--nvx-score-c-text); }
.sco__kpi--banda-d[b-8eram1eac9] { --sco-acento: var(--nvx-score-d); --sco-acento-bg: var(--nvx-score-d-bg); --sco-acento-text: var(--nvx-score-d-text); }

/* El ícono de MudBlazor hereda currentColor: basta con colorear el envoltorio. */
.sco__kpi-icono[b-8eram1eac9] {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sco-acento-bg);
    color: var(--sco-acento-text);
}

.sco__kpi-datos[b-8eram1eac9] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sco__kpi-cifra[b-8eram1eac9] {
    font-family: var(--nvx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--nvx-tracking-tight);
    color: var(--sco-acento-text);
}

.sco__kpi-rotulo[b-8eram1eac9] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--nvx-tracking-label);
    color: var(--nvx-gray-600);
}

.sco__kpi-nota[b-8eram1eac9] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}


/* ══ GRÁFICAS ═══════════════════════════════════════════════════════════════ */
.sco__graficas[b-8eram1eac9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 14px;
}

/* Bajo 1024px dos columnas de 420 no caben: una sola. */
@media (max-width: 960px) {
    .sco__graficas[b-8eram1eac9] { grid-template-columns: 1fr; }
}

.sco__dona[b-8eram1eac9] {
    position: relative;
    height: 230px;
}

/* El alto de las barras crece con el número de comerciales, en escalones. */
.sco__barras[b-8eram1eac9]       { position: relative; }
.sco__barras--s[b-8eram1eac9]    { height: 200px; }
.sco__barras--m[b-8eram1eac9]    { height: 340px; }
.sco__barras--l[b-8eram1eac9]    { height: 470px; }
.sco__barras--xl[b-8eram1eac9]   { height: 520px; }

.sco__grafica-vacia[b-8eram1eac9] {
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 var(--nvx-space-lg);
    color: var(--nvx-gray-400);
    font-size: var(--nvx-text-sm);
}

.sco__leyenda[b-8eram1eac9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: 14px;
}

/* La leyenda filtra la tabla: es un botón, con su foco. */
.sco__leyenda-item[b-8eram1eac9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--nvx-r-md);
    border: 2px solid transparent;
    background: var(--sco-bg);
    color: var(--sco-text);
    font: inherit;
    font-size: var(--nvx-text-xs);
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--nvx-transition);
}

.sco__leyenda-item:hover[b-8eram1eac9]          { border-color: var(--sco-bd); }
.sco__leyenda-item:focus-visible[b-8eram1eac9]  { outline: none; box-shadow: var(--nvx-focus-ring); }
.sco__leyenda-item--activo[b-8eram1eac9],
.sco__leyenda-item--activo:hover[b-8eram1eac9]  { border-color: var(--sco-solido); }

.sco__leyenda-pct[b-8eram1eac9] { opacity: .75; }

.sco__convencion[b-8eram1eac9] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

.sco__punto[b-8eram1eac9] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    vertical-align: middle;
}
.sco__punto--ok[b-8eram1eac9]     { background: var(--nvx-success); }
.sco__punto--alerta[b-8eram1eac9] { background: var(--nvx-warning); }
.sco__punto--riesgo[b-8eram1eac9] { background: var(--nvx-danger); }


/* ══ TABLA ══════════════════════════════════════════════════════════════════
   Las filas llegan a NvxTable por RenderFragment, pero el marcado es de esta
   página: lleva su atributo de ámbito y no necesita ::deep. Sí lo necesita
   lo que dibuja MudBlazor adentro, como el <input> del campo numérico. */
.sco__subth[b-8eram1eac9] {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: .8;
}

.sco__fila--ajustada[b-8eram1eac9] { background: var(--nvx-warning-bg); }

.sco__cliente[b-8eram1eac9] {
    font-weight: 600;
    color: var(--nvx-gray-800);
}

.sco__nit[b-8eram1eac9] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}

.sco__marca-ajuste[b-8eram1eac9] {
    margin-left: 6px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--nvx-warning-text);
}

.sco__comercial[b-8eram1eac9] { font-size: var(--nvx-text-sm); }

/* Celda de insumo: el tono —verde a rojo según los puntos— se fija una vez
   en una variable y lo heredan el número y la etiqueta de abajo. */
.sco__insumo[b-8eram1eac9] {
    min-width: 104px;
    text-align: right;
}

.sco__tono--100[b-8eram1eac9]     { --sco-tono: var(--nvx-success-text); }
.sco__tono--70[b-8eram1eac9]      { --sco-tono: var(--nvx-warning-text); }
.sco__tono--40[b-8eram1eac9]      { --sco-tono: var(--nvx-score-c-text); }
.sco__tono--10[b-8eram1eac9]      { --sco-tono: var(--nvx-danger-text); }
.sco__tono--sindato[b-8eram1eac9] { --sco-tono: var(--nvx-gray-400); background: var(--nvx-gray-50); }

.sco__insumo--ajustado[b-8eram1eac9] { background: var(--nvx-warning-bg); }

.sco__insumo[b-8eram1eac9]  input {
    text-align: right;
    font-family: var(--nvx-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--sco-tono);
}

.sco__pts[b-8eram1eac9] {
    margin-top: -2px;
    font-size: 10.5px;
    color: var(--sco-tono);
}

.sco__puntaje[b-8eram1eac9] {
    font-size: var(--nvx-text-h3);
    font-weight: 700;
    color: var(--nvx-gray-800);
}

.sco__puntaje--parcial[b-8eram1eac9] {
    font-size: var(--nvx-text-body);
    color: var(--nvx-gray-400);
}

/* MudTextField dibuja su propio marcado: la clase se alcanza desde .pagina. */
.pagina[b-8eram1eac9]  .sco__busqueda { min-width: 260px; }

.sco__ajustadas[b-8eram1eac9] { color: var(--nvx-warning-text); }

.sco__nota[b-8eram1eac9] {
    margin: 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}


/* ══ DIÁLOGOS ═══════════════════════════════════════════════════════════════
   El diálogo se dibuja en MudDialogProvider, fuera del árbol de la página,
   pero su contenido lo escribe esta página y conserva el ámbito. */
.sco__dlg-titulo[b-8eram1eac9] {
    display: inline-flex;
    align-items: center;
    gap: var(--nvx-space-sm);
}

.sco__seccion[b-8eram1eac9] {
    margin: 20px 0 8px;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--nvx-tracking-label);
    color: var(--nvx-800);
}

.sco__tabla[b-8eram1eac9] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nvx-text-body);
}

.sco__tabla th[b-8eram1eac9] {
    padding: 8px 10px;
    text-align: left;
    background: var(--nvx-800);
    color: var(--nvx-white);
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.sco__tabla td[b-8eram1eac9] {
    padding: 7px 10px;
    border-bottom: 1px solid var(--nvx-gray-200);
    vertical-align: middle;
}

.sco__tabla tbody tr:nth-child(even)[b-8eram1eac9] { background: var(--nvx-gray-50); }
.sco__tabla .sco__tabla-total[b-8eram1eac9]        { background: var(--nvx-100); }
.sco__tabla .sco__fila--sindato[b-8eram1eac9]      { color: var(--nvx-gray-400); }

.sco__aviso[b-8eram1eac9]         { margin-top: var(--nvx-space-md); }
.sco__aviso--antes[b-8eram1eac9]  { margin: 0 0 var(--nvx-space-md); }

.sco__resultado[b-8eram1eac9] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-md);
    margin-bottom: 18px;
    padding: 14px 18px;
    background: var(--nvx-50);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-md);
}

.sco__resultado-cifra[b-8eram1eac9] {
    font-family: var(--nvx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--nvx-900);
}

.sco__resultado-escala[b-8eram1eac9] {
    font-size: var(--nvx-text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--nvx-gray-400);
}

.sco__resultado-banda[b-8eram1eac9] { flex: 1; }

.sco__resultado-texto[b-8eram1eac9] {
    margin-top: 6px;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

.sco__parcial[b-8eram1eac9] {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--nvx-gray-600);
}

.sco__contexto[b-8eram1eac9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.sco__dato[b-8eram1eac9] {
    padding: 8px 12px;
    background: var(--nvx-50);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-md);
}

.sco__dato-titulo[b-8eram1eac9] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

.sco__dato-valor[b-8eram1eac9] {
    margin-top: 2px;
    font-family: var(--nvx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--nvx-text-h3);
    font-weight: 700;
    color: var(--nvx-gray-800);
}

.sco__vacio[b-8eram1eac9] {
    margin: 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-400);
}

.sco__confirmar[b-8eram1eac9] {
    margin: 0 0 14px;
    color: var(--nvx-gray-600);
}
/* /Components/Pages/CRM/Segmentos.razor.rz.scp.css */
/* Segmentos de mercado (CRM).

   Todo el color sale de los tokens de nvx-theme.css. La página no define
   variables propias porque no necesita ninguna: cada valor que usaba el diseño
   viejo tiene ya su token equivalente. */

.pagina[b-t2avf5hbwv] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Formulario ──────────────────────────────────────────────────────────────
   Rejilla que se auto-ajusta: con dos columnas fijas, el diseño viejo se
   rompía por debajo de 900px y había que rescatarlo con una media query.
   ─────────────────────────────────────────────────────────────────────────── */

.seg__rejilla[b-t2avf5hbwv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
}

/* Las observaciones ocupan la fila entera: son 200 caracteres y en media
   columna quedan en una tira ilegible. La clase la pinta MudBlazor en su propio
   marcado, que no lleva el atributo de ámbito, así que hace falta ::deep. */
.pagina[b-t2avf5hbwv]  .seg__notas {
    grid-column: 1 / -1;
}

.seg__acciones[b-t2avf5hbwv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
    padding-top: var(--nvx-space-md);
    border-top: var(--nvx-border);
}

/* ── Tabla ───────────────────────────────────────────────────────────────────
   Estas filas y celdas se escriben en Segmentos.razor y se pasan a NvxTable
   como fragmento, así que llevan el ámbito de esta página: se estilizan
   directamente, sin ::deep.
   ─────────────────────────────────────────────────────────────────────────── */

/* La fila entera es clicable: sube el registro al formulario de arriba. */
.seg__fila[b-t2avf5hbwv] {
    cursor: pointer;
}

/* El fondo va en las celdas y no en la fila: así gana sobre la zebra y el
   hover de NvxTable, que pintan el <tr>, sin pelear por especificidad. */
.seg__fila-activa td[b-t2avf5hbwv] {
    background: var(--nvx-100);
}

.seg__fila-activa td:first-child[b-t2avf5hbwv] {
    box-shadow: inset 3px 0 0 var(--nvx-500);
}

.seg__th-id[b-t2avf5hbwv] {
    width: 80px;
}

.seg__th-nombre[b-t2avf5hbwv] {
    width: 26%;
}

.seg__nombre[b-t2avf5hbwv] {
    font-weight: 600;
    color: var(--nvx-800);
}

/* La observación llega a 200 caracteres. Se deja envolver en vez de recortarla
   con puntos suspensivos: es el texto que distingue dos segmentos de nombre
   parecido. */
.seg__observaciones[b-t2avf5hbwv] {
    color: var(--nvx-gray-600);
    white-space: normal;
    overflow-wrap: anywhere;
}

.seg__th-accion[b-t2avf5hbwv],
.seg__celda-accion[b-t2avf5hbwv] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* ── Confirmación de borrado ─────────────────────────────────────────────── */

.seg__dlg-titulo[b-t2avf5hbwv] {
    display: inline-flex;
    align-items: center;
    gap: var(--nvx-space-sm);
}

.seg__dlg-texto[b-t2avf5hbwv] {
    margin: 0;
    font-size: var(--nvx-text-body);
    color: var(--nvx-gray-600);
    line-height: 1.6;
}

.seg__dlg-texto strong[b-t2avf5hbwv] {
    color: var(--nvx-gray-800);
}

/* ── Pantallas angostas ──────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .pagina[b-t2avf5hbwv] {
        padding: 12px var(--nvx-space-md) 32px;
    }

    .seg__th-nombre[b-t2avf5hbwv] {
        width: auto;
    }
}
/* /Components/Pages/CRM/SeguimientoCliente.razor.rz.scp.css */
/* Seguimiento por cliente — CRM.

   La página traía dos bloques <style> sueltos (un sistema de tokens propio y
   un keyframe de spinner). Los tokens salen ahora de nvx-theme.css y el
   spinner lo ponen NvxFilterBar y MudButton, así que aquí sólo queda lo que
   es propio de esta pantalla: la rejilla de gráficas y la columna de alerta
   del cuartil, que el SP no trae y la página agrega. */

.pagina[b-e41p6tm4av] {
    /* Únicos alias locales: la alerta del cuartil es un «pendiente», así que
       se apoya en el ámbar semántico del sistema en vez de inventar amarillos. */
    --sc-alerta-bg: var(--nvx-warning-bg);
    --sc-alerta-text: var(--nvx-warning-text);
    --sc-alerta-bd: var(--nvx-warning);

    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Dos gráficas, y una sola columna en cuanto no caben lado a lado. */
.sc-graficas[b-e41p6tm4av] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--nvx-space-md);
}

/* Chart.js corre con maintainAspectRatio:false: el alto lo fija el contenedor. */
.sc-grafica[b-e41p6tm4av] {
    position: relative;
    height: 260px;
}

/* La columna de alerta la escribe la página dentro de los fragmentos Head y
   Row de NvxTable, así que necesita ::deep. El selector arranca en .pagina
   para ganarle en especificidad al `thead th` del propio NvxTable. */
.pagina[b-e41p6tm4av]  th.sc-th-alerta {
    background: var(--sc-alerta-bg);
    color: var(--sc-alerta-text);
    border-left: 2px solid var(--sc-alerta-bd);
}

.pagina[b-e41p6tm4av]  td.sc-td-alerta {
    border-left: 2px solid var(--sc-alerta-bd);
    text-align: center;
}

/* MudIcon dentro de la píldora: el tamaño por defecto (24px) la deforma. */
.pagina[b-e41p6tm4av]  .sc-badge-icon {
    font-size: 14px;
    flex: none;
}

@media (max-width: 1023px) {
    .pagina[b-e41p6tm4av] {
        padding: 12px var(--nvx-space-md) 32px;
    }

    .sc-graficas[b-e41p6tm4av] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CRM/Vendedores.razor.rz.scp.css */
/* Ejecutivos comerciales (CRM).

   Sustituye al bloque <style> que la página llevaba dentro del .razor, con su
   propio bloque de variables y su paleta a mano. Aquí no hay ni un hex: cada valor del diseño
   viejo tenía ya su token equivalente en nvx-theme.css. */

.pagina[b-qoz7s57z65] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Formulario ──────────────────────────────────────────────────────────────
   Rejilla que se auto-ajusta: con dos columnas fijas, el diseño viejo se
   rompía por debajo de 900px y había que rescatarlo con una media query.
   ─────────────────────────────────────────────────────────────────────────── */

.vend__rejilla[b-qoz7s57z65] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
}

/* La dirección ocupa la fila entera. La clase cae sobre el contenedor que
   dibuja MudTextField —marcado ajeno a esta página—, así que hace falta
   ::deep para alcanzarla desde el CSS aislado. */
.vend__rejilla[b-qoz7s57z65]  .vend__ancho {
    grid-column: 1 / -1;
}

.vend__acciones[b-qoz7s57z65] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
    padding-top: var(--nvx-space-md);
    border-top: var(--nvx-border);
}

/* ── Tabla ───────────────────────────────────────────────────────────────────
   Estas filas y celdas se escriben en Vendedores.razor y se pasan a NvxTable
   como fragmento, así que llevan el ámbito de esta página: se estilizan
   directamente, sin ::deep.
   ─────────────────────────────────────────────────────────────────────────── */

/* La fila entera es clicable: sube el registro al formulario de arriba. */
.vend__fila[b-qoz7s57z65] {
    cursor: pointer;
}

/* El fondo va en las celdas y no en la fila: así gana sobre la zebra y el
   hover de NvxTable, que pintan el <tr>, sin pelear por especificidad. */
.vend__fila-activa td[b-qoz7s57z65] {
    background: var(--nvx-100);
}

.vend__fila-activa td:first-child[b-qoz7s57z65] {
    box-shadow: inset 3px 0 0 var(--nvx-500);
}

.vend__nombre[b-qoz7s57z65] {
    font-weight: 600;
    color: var(--nvx-800);
}

/* La columna del botón no crece: el resto del ancho es para los datos. */
.vend__th-accion[b-qoz7s57z65],
.vend__celda-accion[b-qoz7s57z65] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* ── Confirmación de borrado ─────────────────────────────────────────────── */

.vend__dlg-titulo[b-qoz7s57z65] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
}

.vend__dlg-texto[b-qoz7s57z65] {
    margin: 0;
    font-size: var(--nvx-text-body);
    color: var(--nvx-gray-600);
    line-height: 1.6;
}

.vend__dlg-texto strong[b-qoz7s57z65] {
    color: var(--nvx-gray-800);
}
/* /Components/Pages/Dashboard/DashboardControlOperaciones.razor.rz.scp.css */
.pagina[b-dv7y013hp6] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dash__cargando[b-dv7y013hp6] {
    display: flex;
    justify-content: center;
    padding: 40px;
}

/* ── Salto a la apertura del D.O. en el sistema anterior ─────────────────── */
.dash__link[b-dv7y013hp6] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    padding: 10px 16px;
    background: var(--nvx-50);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-md);
    color: var(--nvx-800);
}

.dash__link a[b-dv7y013hp6] {
    color: var(--nvx-700);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dash__link a:hover[b-dv7y013hp6] { text-decoration: underline; }

/* ── Indicadores ──────────────────────────────────────────────────────────
   Rejilla que se ajusta sola: son nueve tarjetas y un número fijo de columnas
   las parte mal en cuanto la ventana se estrecha. */
.dash__kpis[b-dv7y013hp6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-md);
}

.dash__kpi[b-dv7y013hp6] {
    background: #fff;
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-lg);
    box-shadow: var(--nvx-shadow-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 96px;
}

/* El total va en --nvx-800 y no en el turquesa de marca: lleva texto blanco
   encima, y --nvx-500 se queda en 2,93:1 contra blanco. */
.dash__kpi--total[b-dv7y013hp6] {
    background: var(--nvx-800);
    border-color: transparent;
    color: #fff;
}

.dash__kpi-top[b-dv7y013hp6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.dash__kpi-clave[b-dv7y013hp6] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .10em;
    color: var(--nvx-gray-600);
}

.dash__kpi--total .dash__kpi-clave[b-dv7y013hp6],
.dash__kpi--total .dash__kpi-pie[b-dv7y013hp6] {
    color: rgba(255, 255, 255, .85);
}

.dash__kpi-icono[b-dv7y013hp6] {
    background: var(--nvx-50);
    color: var(--nvx-700);
    width: 28px;
    height: 28px;
    border-radius: var(--nvx-r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dash__kpi--total .dash__kpi-icono[b-dv7y013hp6] {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.dash__kpi-valor[b-dv7y013hp6] {
    font-family: var(--nvx-font-mono);
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--nvx-800);
}

.dash__kpi--total .dash__kpi-valor[b-dv7y013hp6] { color: #fff; }

.dash__kpi-pie[b-dv7y013hp6] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

/* ── Gráficas ─────────────────────────────────────────────────────────────
   Dos por fila mientras quepan; a una sola por debajo de ~760px. */
.dash__graficos[b-dv7y013hp6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--nvx-space-md);
    align-items: start;
}

/* Chart.js dibuja con responsive y sin conservar proporción: necesita un
   contenedor de alto FIJO, no un min-height, o el lienzo crece en cada
   redibujado hasta desbordar la tarjeta. Los 330px son los del tablero
   anterior. */
.dash__lienzo[b-dv7y013hp6] {
    position: relative;
    height: 330px;
    padding: 4px 2px;
}

.dash__lienzo canvas[b-dv7y013hp6] {
    width: 100% !important;
    height: 100% !important;
}
/* /Components/Pages/Dev/UiGallery.razor.rz.scp.css */
.gal[b-risp24xu2y] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px var(--nvx-space-lg) 60px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gal-row[b-risp24xu2y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.gal-row--switch[b-risp24xu2y] {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--nvx-gray-100);
}

.gal-col[b-risp24xu2y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gal-sub[b-risp24xu2y] {
    margin: 16px 0 8px;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-gray-400);
}

.gal-nota[b-risp24xu2y] {
    margin: 16px 0 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    max-width: 76ch;
    line-height: 1.6;
}

.gal-nota b[b-risp24xu2y] {
    font-family: var(--nvx-font-mono);
    color: var(--nvx-800);
    font-weight: 600;
}

/* ── Rampa ──────────────────────────────────────────────────────────────── */
.gal-ramp[b-risp24xu2y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 2px;
}

.gal-chip[b-risp24xu2y] {
    min-height: 96px;
    padding: 12px 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
}

.gal-chip__tok[b-risp24xu2y] {
    font-family: var(--nvx-font-mono);
    font-size: 10px;
    font-weight: 700;
}

.gal-chip__hex[b-risp24xu2y] {
    font-family: var(--nvx-font-mono);
    font-size: 10.5px;
    opacity: .78;
}

.gal-chip__uso[b-risp24xu2y] {
    font-size: 10px;
    margin-top: 4px;
    opacity: .8;
    line-height: 1.35;
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */
.gal-type[b-risp24xu2y] {
    display: flex;
    flex-direction: column;
}

.gal-type > div[b-risp24xu2y] {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 18px;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid var(--nvx-gray-100);
}

.gal-type > div:last-child[b-risp24xu2y] { border-bottom: 0; }

.gal-type__spec[b-risp24xu2y] {
    font-family: var(--nvx-font-mono);
    font-size: 10.5px;
    color: var(--nvx-gray-400);
}

.gal-type p[b-risp24xu2y] { margin: 0; }

@media (max-width: 620px) {
    .gal-type > div[b-risp24xu2y] { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Especímenes de encabezado ──────────────────────────────────────────── */
.gal-spec + .gal-spec[b-risp24xu2y] { border-top: 1px solid var(--nvx-gray-200); }

.gal-spec__lbl[b-risp24xu2y] {
    display: block;
    padding: 10px 14px 8px;
    font-family: var(--nvx-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nvx-gray-400);
    background: var(--nvx-gray-50);
}

.gal-spec__lbl code[b-risp24xu2y] {
    font-size: inherit;
    color: var(--nvx-700);
    text-transform: none;
}
/* /Components/Pages/Do/Apertura.razor.rz.scp.css */
.apert[b-oc3poaeb7j] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 48px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.apert__centro[b-oc3poaeb7j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 0;
    color: var(--nvx-gray-400);
}

/* Rejillas que se reacomodan solas: la apertura tiene filas de tres y de
   cuatro campos, y a menos de 1100px no caben en una sola línea. */
.apert__rejilla[b-oc3poaeb7j] {
    display: grid;
    gap: 12px;
    align-items: start;
}

.apert__rejilla + .apert__rejilla[b-oc3poaeb7j] { margin-top: 12px; }

.apert__rejilla--4[b-oc3poaeb7j] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.apert__rejilla--3[b-oc3poaeb7j] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .apert__rejilla--4[b-oc3poaeb7j] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .apert__rejilla--3[b-oc3poaeb7j] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .apert__rejilla--4[b-oc3poaeb7j],
    .apert__rejilla--3[b-oc3poaeb7j] { grid-template-columns: 1fr; }
}

/* ── Estado y seguro ───────────────────────────────────────────────────── */

.apert__estado[b-oc3poaeb7j] {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--nvx-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.apert__rotulo[b-oc3poaeb7j] {
    display: block;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-700);
    margin-bottom: 2px;
}

.apert__ayuda[b-oc3poaeb7j] {
    margin: 2px 0 8px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.5;
}

.apert__meta[b-oc3poaeb7j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 12px;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

/* ── Tipos de servicio ─────────────────────────────────────────────────── */

.apert__servicios[b-oc3poaeb7j] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px;
}

@media (max-width: 1100px) {
    .apert__servicios[b-oc3poaeb7j] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .apert__servicios[b-oc3poaeb7j] { grid-template-columns: 1fr; }
}

.apert__servicio[b-oc3poaeb7j] {
    padding: 8px 10px;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}

/* El servicio marcado se distingue del resto: es lo que decide la sigla del
   número del D.O., así que conviene verlo de un vistazo. */
.apert__servicio--activo[b-oc3poaeb7j] {
    border-color: var(--nvx-300);
    background: var(--nvx-50);
}

/* El proveedor sólo aparece cuando el servicio está marcado; sangrarlo deja
   claro que pertenece a esa casilla y no a la siguiente. */
.apert__proveedor[b-oc3poaeb7j] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 6px 0 2px 30px;
}

/* ::deep porque los hijos son componentes de MudBlazor: su marcado no lleva el
   atributo de ámbito, así que una regla sin ::deep no los alcanzaría. */
.apert__proveedor[b-oc3poaeb7j]  .apert__campo { flex: 1 1 auto; min-width: 0; }
.apert__proveedor[b-oc3poaeb7j]  .apert__lupa  { flex: 0 0 auto; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .apert__servicio[b-oc3poaeb7j] { transition: none; }
}

.apert__separa[b-oc3poaeb7j] { margin-top: 12px; }

/* ── Acciones ──────────────────────────────────────────────────────────── */

.apert__acciones[b-oc3poaeb7j] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

/* Las pestañas del contenedor. El panel no lleva padding lateral: cada
   pestaña trae sus propias tarjetas, que ya lo tienen. */
[b-oc3poaeb7j] .apert__tab { padding-top: 14px; }

/* Los botones que acompañan al estado. Van debajo y no al lado del grupo de
   opciones: en pantallas medianas el radio ya ocupa todo el ancho. */
.apert__botones-estado[b-oc3poaeb7j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
/* /Components/Pages/Do/CabeceraDo.razor.rz.scp.css */
/* Encabezado de las pantallas del D.O. */

.cabdo[b-xaxkmxzyns] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: var(--nvx-r-md);
    background: linear-gradient(103deg, var(--nvx-900) 0%, var(--nvx-800) 62%, #00726a 100%);
    color: #fff;
    /* Filo turquesa abajo: el mismo remate del topbar. */
    border-bottom: 3px solid var(--nvx-500);
}

.cabdo__icono-caja[b-xaxkmxzyns] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--nvx-r-md);
    background: rgba(255, 255, 255, .12);
    flex: none;
}

.cabdo__icono[b-xaxkmxzyns] {
    font-size: 24px;
    color: var(--nvx-500);
}

.cabdo__texto[b-xaxkmxzyns] {
    min-width: 0;
    flex: 1 1 auto;
}

.cabdo__eyebrow[b-xaxkmxzyns] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}

.cabdo__titulo[b-xaxkmxzyns] {
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: 650;
    letter-spacing: var(--nvx-tracking-tight);
    color: #fff;
    line-height: 1.2;
}

.cabdo__nro[b-xaxkmxzyns] {
    font-family: var(--nvx-font-mono);
    color: var(--nvx-500);
    font-weight: 700;
}

.cabdo__sub[b-xaxkmxzyns] {
    margin: 4px 0 0;
    font-size: var(--nvx-text-sm);
    color: rgba(255, 255, 255, .74);
    overflow-wrap: anywhere;
}

.cabdo__punto[b-xaxkmxzyns] {
    margin: 0 7px;
    opacity: .5;
}

.cabdo__estado[b-xaxkmxzyns] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.cabdo__tipo[b-xaxkmxzyns] {
    padding: 2px 9px;
    border-radius: var(--nvx-r-sm);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
}

@media (max-width: 700px) {
    .cabdo[b-xaxkmxzyns] { flex-wrap: wrap; padding: 14px 16px; }
    .cabdo__estado[b-xaxkmxzyns] { width: 100%; }
}
/* /Components/Pages/Do/CausacionesDo.razor.rz.scp.css */
.cau[b-qhddk4x0vm] { display: flex; flex-direction: column; gap: 14px; }

.cau__ayuda[b-qhddk4x0vm] {
    margin: 0 0 10px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}

.cau__th-accion[b-qhddk4x0vm] { width: 52px; }

/* La causación abierta se marca para no perderla de vista mientras se leen sus
   conceptos, que aparecen debajo. */
.cau__fila--activa[b-qhddk4x0vm] { background: var(--nvx-50) !important; }

.cau__texto[b-qhddk4x0vm] {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 380px;
}
/* /Components/Pages/Do/DetallesDo.razor.rz.scp.css */
[b-kysy1qmxyb] .det__panel { padding-top: 12px; }

.det__acciones[b-kysy1qmxyb] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.det__aviso[b-kysy1qmxyb] { margin-bottom: 10px; }

.det__th-acciones[b-kysy1qmxyb] { width: 96px; }
.det__th-fecha[b-kysy1qmxyb]    { width: 140px; }

.det__celda-acciones[b-kysy1qmxyb] {
    text-align: right;
    white-space: nowrap;
}

/* Los comentarios pueden ser largos: se dejan envolver en vez de estirar la
   tabla y sacar el scroll horizontal a la página. */
.det__texto[b-kysy1qmxyb] {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 520px;
}

.det__ayuda[b-kysy1qmxyb] {
    margin: 0 0 10px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.5;
}

/* ── Comentario nuevo ──────────────────────────────────────────────────── */

.det__comentario[b-kysy1qmxyb] {
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--nvx-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.det__comentario-pie[b-kysy1qmxyb] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.det__comentario-pie[b-kysy1qmxyb]  .det__tipo { width: 160px; flex: 0 0 auto; }

/* ── Alerta ────────────────────────────────────────────────────────────── */

/* La alerta cierra la pestaña de comentarios: se marca junto con el comentario
   que explica por qué, así que no merecía pestaña propia. */
.det__alerta[b-kysy1qmxyb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 14px;
    background: var(--nvx-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.det__alerta-texto[b-kysy1qmxyb] { flex: 1 1 220px; }

.det__alerta-texto .det__ayuda[b-kysy1qmxyb] { margin: 2px 0 0; }

.det__alerta[b-kysy1qmxyb]  .det__prioridad { width: 140px; }
/* /Components/Pages/Do/DlgArancel.razor.rz.scp.css */
.dlgdet[b-1g5e4u07zk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
/* /Components/Pages/Do/DlgAutorizarLiberacion.razor.rz.scp.css */
.dlgdet[b-711pivbejw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dlgdet__ayuda[b-711pivbejw] {
    margin: 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}
/* /Components/Pages/Do/DlgBuscarTercero.razor.rz.scp.css */
.bter[b-8p6dohyawd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: min(720px, 78vw);
}

.bter__contexto[b-8p6dohyawd] {
    margin: 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

/* El campo crece y el botón conserva su ancho: buscar es la acción principal
   del diálogo y no debe encogerse al reducir la ventana. */
.bter__filtro[b-8p6dohyawd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* ::deep porque el campo y el botón son componentes de MudBlazor: su marcado no
   lleva el atributo de ámbito de este componente. */
.bter__filtro[b-8p6dohyawd]  .bter__campo { flex: 1 1 auto; min-width: 0; }
.bter__filtro[b-8p6dohyawd]  .bter__boton { flex: 0 0 auto; margin-top: 3px; }

.bter__th-nit[b-8p6dohyawd]    { width: 150px; }
.bter__th-accion[b-8p6dohyawd] { width: 120px; }

.bter__accion[b-8p6dohyawd] { text-align: right; }

.bter__nota[b-8p6dohyawd] {
    margin: 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}

@media (max-width: 600px) {
    .bter[b-8p6dohyawd] { min-width: 0; }
    .bter__filtro[b-8p6dohyawd] { flex-direction: column; align-items: stretch; }
}
/* /Components/Pages/Do/DlgContenedor.razor.rz.scp.css */
.dlgdet[b-jhiy1kqgf6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dlgdet__fila[b-jhiy1kqgf6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .dlgdet__fila[b-jhiy1kqgf6] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Do/DlgMovimientosEstado.razor.rz.scp.css */
.dlgmov[b-3s5qnwbgl8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: min(680px, 76vw);
}

.dlgmov__contexto[b-3s5qnwbgl8] {
    margin: 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

.dlgmov__th-fecha[b-3s5qnwbgl8] { width: 170px; }

@media (max-width: 600px) {
    .dlgmov[b-3s5qnwbgl8] { min-width: 0; }
}
/* /Components/Pages/Do/DlgResponsable.razor.rz.scp.css */
.dlgdet[b-czqjai8axp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dlgdet__fila[b-czqjai8axp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .dlgdet__fila[b-czqjai8axp] { grid-template-columns: 1fr; }
}

.dlgdet__ayuda[b-czqjai8axp] {
    margin: 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}
/* /Components/Pages/Do/DocumentosDo.razor.rz.scp.css */
.pagina[b-7kn8dagi27] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Sección de documentos ──────────────────────────────────────────────── */
.sec[b-7kn8dagi27] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: var(--nvx-800);
    color: #fff;
}

.sec__icono[b-7kn8dagi27] {
    font-size: 19px;
    color: var(--nvx-500);
    flex: none;
}

.sec__titulo[b-7kn8dagi27] {
    font-size: var(--nvx-text-h3);
    font-weight: 650;
    flex: 1 1 auto;
}

.sec__conteo[b-7kn8dagi27] {
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--nvx-500);
    color: var(--nvx-900);
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    text-align: center;
}

/* La forma de cada tabla la decide el procedimiento, así que se estiliza de
   forma genérica. El scroll ocurre en su contenedor, no en la página. */
.sec__tabla table[b-7kn8dagi27] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--nvx-text-sm);
}

.sec__tabla th[b-7kn8dagi27] {
    background: var(--nvx-gray-50);
    color: var(--nvx-800);
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    text-align: left;
    padding: 9px 14px;
    white-space: nowrap;
    border-bottom: 1px solid var(--nvx-gray-200);
}

.sec__tabla td[b-7kn8dagi27] {
    padding: 8px 14px;
    border-bottom: 1px solid var(--nvx-gray-100);
    color: var(--nvx-gray-800);
    white-space: nowrap;
}

.sec__tabla tbody tr:nth-child(even)[b-7kn8dagi27] { background: var(--nvx-gray-50); }
.sec__tabla tbody tr:hover[b-7kn8dagi27] { background: var(--nvx-100); }
.sec__tabla tbody tr:last-child td[b-7kn8dagi27] { border-bottom: 0; }

/* ── Estados ────────────────────────────────────────────────────────────── */
.pagina__estado[b-7kn8dagi27] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 4px;
    font-size: var(--nvx-text-body);
    color: var(--nvx-gray-600);
}

.pagina__estado--vacio[b-7kn8dagi27] {
    justify-content: center;
    padding: 30px 20px;
    align-items: flex-start;
}

.pagina__estado-icono[b-7kn8dagi27] {
    font-size: 26px;
    color: var(--nvx-300);
    flex: none;
}

.pagina__vacio-titulo[b-7kn8dagi27] {
    margin: 0;
    font-size: var(--nvx-text-h3);
    font-weight: 650;
    color: var(--nvx-gray-800);
}

.pagina__vacio-msg[b-7kn8dagi27] {
    margin: 3px 0 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}
/* /Components/Pages/Do/DoTransaccional.razor.rz.scp.css */
.dotr[b-lmjeb0r0w2] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    max-width: 1100px;
}

/* Empresa, cliente, sucursal y el número que saldrá. El minmax(0, 1fr) y el
   min-width de los hijos son los dos necesarios: sin ellos el ancho mínimo del
   Label manda sobre el track y la rejilla colapsa a una columna. */
.dotr__rejilla[b-lmjeb0r0w2] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
}

.dotr__rejilla[b-lmjeb0r0w2]  > * { min-width: 0; }

@media (max-width: 1100px) {
    .dotr__rejilla[b-lmjeb0r0w2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .dotr__rejilla[b-lmjeb0r0w2] { grid-template-columns: 1fr; }
}

.dotr__aviso[b-lmjeb0r0w2] { margin-bottom: var(--nvx-space-md); }

.dotr__texto[b-lmjeb0r0w2] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-800);
    margin: 0 0 var(--nvx-space-md);
    line-height: 1.6;
}

.dotr__accion[b-lmjeb0r0w2] {
    display: flex;
    justify-content: center;
    padding-top: var(--nvx-space-sm);
}

/* Los <th> y <td> llegan por RenderFragment: sin ::deep no los alcanzaría. */
.dotr[b-lmjeb0r0w2]  .dotr__acciones {
    width: 56px;
    text-align: right;
}
/* /Components/Pages/Do/LiberacionDo.razor.rz.scp.css */
.lib[b-603yym7fnx] { display: flex; flex-direction: column; gap: 14px; }

.lib__centro[b-603yym7fnx] { display: flex; justify-content: center; padding: 28px 0; }

.lib__estados[b-603yym7fnx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 720px) {
    .lib__estados[b-603yym7fnx] { grid-template-columns: 1fr; }
}

.lib__estado[b-603yym7fnx] {
    padding: 12px 14px;
    background: var(--nvx-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.lib__rotulo[b-603yym7fnx] {
    display: block;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-700);
    margin-bottom: 6px;
}

.lib__detalle[b-603yym7fnx] {
    margin: 6px 0 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

.lib__obs[b-603yym7fnx] {
    margin: 6px 0 0;
    padding: 6px 8px;
    font-size: var(--nvx-text-sm);
    background: #fff;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-sm);
    white-space: pre-wrap;
    word-break: break-word;
}

.lib__acciones[b-603yym7fnx] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.lib__ayuda[b-603yym7fnx] {
    margin: 8px 0 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.5;
}

.lib__th-fecha[b-603yym7fnx] { width: 150px; }

.lib__texto[b-603yym7fnx] {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 420px;
}
/* /Components/Pages/Do/ListaChequeoDo.razor.rz.scp.css */
.lch[b-n17tgbq33j] { display: flex; flex-direction: column; gap: 14px; }

.lch__centro[b-n17tgbq33j] { display: flex; justify-content: center; padding: 28px 0; }

.lch__datos[b-n17tgbq33j] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 900px) { .lch__datos[b-n17tgbq33j] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lch__datos[b-n17tgbq33j] { grid-template-columns: 1fr; } }

.lch__dato[b-n17tgbq33j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--nvx-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.lch__rotulo[b-n17tgbq33j] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-700);
}

.lch__campos[b-n17tgbq33j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 620px;
}

@media (max-width: 520px) { .lch__campos[b-n17tgbq33j] { grid-template-columns: 1fr; } }

/* ── Tabla del chequeo ─────────────────────────────────────────────────── */

.lch__tabla[b-n17tgbq33j] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nvx-text-sm);
}

.lch__tabla th[b-n17tgbq33j] {
    background: var(--nvx-800);
    color: #fff;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    text-align: left;
    padding: 8px 10px;
}

.lch__tabla td[b-n17tgbq33j] {
    padding: 6px 10px;
    border-bottom: var(--nvx-border);
    vertical-align: middle;
}

.lch__tabla tbody tr:last-child td[b-n17tgbq33j] { border-bottom: none; }

.lch__th-sino[b-n17tgbq33j] { width: 170px; }
.lch__th-obs[b-n17tgbq33j]  { width: 320px; }

.lch__sino[b-n17tgbq33j] {
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lch__eventos[b-n17tgbq33j] {
    text-decoration: underline dotted;
    cursor: help;
}

.lch__aviso[b-n17tgbq33j] { margin-bottom: 10px; }

.lch__ayuda[b-n17tgbq33j] {
    margin: 0 0 12px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.5;
}

.lch__acciones[b-n17tgbq33j] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}
/* /Components/Pages/Do/ReemplazarDo.razor.rz.scp.css */
.pagina[b-9tiwus0r75] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rdo__rejilla[b-9tiwus0r75] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

.rdo__acciones[b-9tiwus0r75] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
}

/* Lo que se movería, en cifras grandes: es la última mirada antes de tocar. */
.rdo__resumen[b-9tiwus0r75] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
}

.rdo__dato[b-9tiwus0r75] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
    background: var(--nvx-gray-50);
}

.rdo__rot[b-9tiwus0r75] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.rdo__cifra[b-9tiwus0r75] {
    color: var(--nvx-800);
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-h3);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
/* /Components/Pages/Do/SinDo.razor.rz.scp.css */
.sindo[b-c4o3zrnvko] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 60px 24px;
    max-width: 520px;
    margin: 0 auto;
}

.sindo__icono[b-c4o3zrnvko] {
    font-size: 46px;
    color: var(--nvx-300);
    margin-bottom: 6px;
}

.sindo__titulo[b-c4o3zrnvko] {
    margin: 0;
    font-size: var(--nvx-text-h1);
    font-weight: 700;
    color: var(--nvx-800);
}

.sindo__msg[b-c4o3zrnvko] {
    margin: 0;
    font-size: var(--nvx-text-body);
    color: var(--nvx-gray-600);
    line-height: 1.6;
}
/* /Components/Pages/Embarque/ControlImpresionBl.razor.rz.scp.css */
/* Impresion del Bill of Lading.

   La pantalla tiene tres bloques: buscar el documento de transporte, escribir
   los textos que van en las casillas del B/L, y la lista de conceptos de flete.
   Todos caben en un ancho de formulario; la tabla de resultados es la unica que
   necesita aire horizontal. */

.pagina[b-opax752dtz] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* La fila del documento que se esta editando, para no perderla de vista al
   volver a la tabla despues de escribir. */
.fila-activa[b-opax752dtz] {
    background: var(--nvx-100) !important;
}

.col-accion[b-opax752dtz] {
    width: 1%;
    white-space: nowrap;
}

/* ── Resumen del documento seleccionado ─────────────────────────────────── */

.resumen[b-opax752dtz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
    padding-bottom: var(--nvx-space-sm);
    border-bottom: 1px solid var(--nvx-gray-200);
}

.resumen > div[b-opax752dtz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.et[b-opax752dtz] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-gray-600);
}

/* ── Los tres grupos de opciones ────────────────────────────────────────── */

.opciones[b-opax752dtz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
    padding: var(--nvx-space-md) 0 var(--nvx-space-sm);
}

.grupo[b-opax752dtz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* ── Los seis textos de las casillas ────────────────────────────────────── */

.campos[b-opax752dtz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--nvx-space-md);
    padding-top: var(--nvx-space-sm);
}

/* ── Conceptos de flete ─────────────────────────────────────────────────── */

/* El concepto es texto libre y el valor un numero: el boton queda al final y
   la rejilla se pliega en una columna cuando no cabe. */
.alta-concepto[b-opax752dtz] {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) auto;
    gap: var(--nvx-space-sm);
    align-items: center;
}

@media (max-width: 720px) {
    .alta-concepto[b-opax752dtz] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.conceptos[b-opax752dtz] {
    width: 100%;
    margin-top: var(--nvx-space-md);
    border-collapse: collapse;
    font-size: var(--nvx-text-body);
}

.conceptos th[b-opax752dtz],
.conceptos td[b-opax752dtz] {
    padding: 6px var(--nvx-space-sm);
    border-bottom: 1px solid var(--nvx-gray-200);
    text-align: left;
}

.conceptos thead th[b-opax752dtz] {
    background: var(--nvx-800);
    color: var(--nvx-white);
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
}

.conceptos tfoot td[b-opax752dtz] {
    background: var(--nvx-gray-50);
    font-weight: 700;
    border-bottom: none;
    border-top: 2px solid var(--nvx-300);
}

.vacio[b-opax752dtz] {
    margin: var(--nvx-space-md) 0 0;
    padding: var(--nvx-space-md);
    border: 1px dashed var(--nvx-gray-200);
    border-radius: var(--nvx-r-md);
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    text-align: center;
}

/* ── Acciones ───────────────────────────────────────────────────────────── */

.acciones[b-opax752dtz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    justify-content: flex-end;
}
/* /Components/Pages/Embarque/ControlImpresionGuia.razor.rz.scp.css */
/* Impresion de la guia aerea.

   La pantalla tiene dos mitades: arriba se busca el documento de transporte
   aereo, abajo se revisa la guia capturada antes de mandarla a la impresora.
   Todo lo de abajo es de lectura, asi que se agrupa en rejillas de rotulo y
   valor; los textos largos —shipper, consignee, descripcion de la mercancia—
   necesitan su propio bloque porque llevan saltos de linea. */

.pagina[b-3mvweqqv1w] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* La fila de la guia abierta, para no perderla de vista al volver a la tabla. */
.fila-activa[b-3mvweqqv1w] {
    background: var(--nvx-100) !important;
}

.col-accion[b-3mvweqqv1w] {
    width: 1%;
    white-space: nowrap;
}

/* Las marcas de que hay datos capturados van juntas y no parten renglon. */
.col-marcas[b-3mvweqqv1w] {
    white-space: nowrap;
}

/* ── Resumen del embarque ───────────────────────────────────────────────── */

.resumen[b-3mvweqqv1w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
    padding-bottom: var(--nvx-space-sm);
    border-bottom: 1px solid var(--nvx-gray-200);
}

.resumen > div[b-3mvweqqv1w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.et[b-3mvweqqv1w] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-gray-600);
}

/* ── Guia madre o hija ──────────────────────────────────────────────────── */

.opciones[b-3mvweqqv1w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
    padding: var(--nvx-space-md) 0 var(--nvx-space-sm);
}

.grupo[b-3mvweqqv1w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* ── Rejilla de rotulo y valor ──────────────────────────────────────────── */

.datos[b-3mvweqqv1w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--nvx-space-sm) var(--nvx-space-md);
}

.datos > div[b-3mvweqqv1w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Textos largos de las casillas ──────────────────────────────────────── */

.bloques[b-3mvweqqv1w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--nvx-space-md);
}

.bloque[b-3mvweqqv1w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Los saltos de linea del textarea original se conservan: son parte de como
   queda escrito el shipper y el consignee en el papel. */
.texto[b-3mvweqqv1w] {
    margin: 0;
    padding: var(--nvx-space-sm);
    border: 1px solid var(--nvx-gray-200);
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-gray-50);
    font-size: var(--nvx-text-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── Conceptos adicionales ──────────────────────────────────────────────── */

.conceptos[b-3mvweqqv1w] {
    width: 100%;
    margin-top: var(--nvx-space-md);
    border-collapse: collapse;
    font-size: var(--nvx-text-body);
}

.conceptos th[b-3mvweqqv1w],
.conceptos td[b-3mvweqqv1w] {
    padding: 6px var(--nvx-space-sm);
    border-bottom: 1px solid var(--nvx-gray-200);
    text-align: left;
}

.conceptos thead th[b-3mvweqqv1w] {
    background: var(--nvx-800);
    color: var(--nvx-white);
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
}

.conceptos tfoot td[b-3mvweqqv1w] {
    background: var(--nvx-gray-50);
    font-weight: 700;
    border-bottom: none;
    border-top: 2px solid var(--nvx-300);
}

.vacio[b-3mvweqqv1w] {
    margin: var(--nvx-space-md) 0 0;
    padding: var(--nvx-space-md);
    border: 1px dashed var(--nvx-gray-200);
    border-radius: var(--nvx-r-md);
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    text-align: center;
}

/* ── Acciones ───────────────────────────────────────────────────────────── */

.acciones[b-3mvweqqv1w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    justify-content: flex-end;
}
/* /Components/Pages/Facturacion/ConexionMekano.razor.rz.scp.css */
/* Conexión con Mekano */

.cmk[b-5nq66gitry] {
    max-width: 900px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Rejilla con campos de MudBlazor: sin el min-width colapsa a una columna (ver NvxFilterBar.razor.css). */
.cmk__campos[b-5nq66gitry] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--nvx-space-sm);
    align-items: start;
}

.cmk__campos[b-5nq66gitry]  > * {
    min-width: 0;
}

.cmk__acciones[b-5nq66gitry] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
}
/* /Components/Pages/Facturacion/ConfiguracionFacturacionElectronica.razor.rz.scp.css */
/* Configuración de facturación electrónica */

.cfe[b-hce727v0m7] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

[b-hce727v0m7] .cfe__bloque {
    padding: var(--nvx-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-sm);
}

.cfe__fila[b-hce727v0m7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--nvx-space-sm);
    align-items: start;
}

[b-hce727v0m7] .cfe__ayuda {
    opacity: .8;
}

/* NIT + DV en una sola fila: el DV es un dígito. */
.cfe__nit[b-hce727v0m7] {
    display: grid;
    grid-template-columns: 1fr 72px;
    gap: var(--nvx-space-sm);
    align-items: start;
}

/* Un juego de URL y token por ambiente; el que está en uso se resalta. */
.cfe__ambiente[b-hce727v0m7] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    border-left: 3px solid transparent;
    opacity: .75;
}

.cfe__ambiente--uso[b-hce727v0m7] {
    border-left-color: var(--mud-palette-primary);
    opacity: 1;
}

.cfe__acciones[b-hce727v0m7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-sm);
}

.cfe__vista[b-hce727v0m7] {
    width: 100%;
    min-height: 14rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: #fff;
}
/* /Components/Pages/Facturacion/DlgNota.razor.rz.scp.css */
.dlgnota[b-7ldvx0k0y0] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: 0;
}

.dlgnota__fila2[b-7ldvx0k0y0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--nvx-space-md);
}

.dlgnota__fila3[b-7ldvx0k0y0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--nvx-space-md);
}

/* ── Paso 1: la factura ───────────────────────────────────────────────────
   El diálogo abre pidiendo una sola cosa. El formulario anterior enseñaba de
   entrada los quince campos, casi todos inertes hasta que hubiera factura. */
.dlgnota__buscar[b-7ldvx0k0y0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-xl) var(--nvx-space-md);
    text-align: center;
}

.dlgnota__buscar-icono[b-7ldvx0k0y0] {
    font-size: 2.5rem;
    color: var(--nvx-500);
}

.dlgnota__buscar-titulo[b-7ldvx0k0y0] {
    margin: 0;
    font-size: var(--nvx-text-h3);
    font-weight: 700;
    color: var(--nvx-800);
}

.dlgnota__buscar-ayuda[b-7ldvx0k0y0] {
    margin: 0;
    max-width: 42ch;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

.dlgnota__buscar-campo[b-7ldvx0k0y0] {
    display: flex;
    align-items: flex-start;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-sm);
    width: min(100%, 420px);
}

.dlgnota__buscar-campo > :first-child[b-7ldvx0k0y0] {
    flex: 1 1 auto;
    min-width: 0;
}

.dlgnota__cargando[b-7ldvx0k0y0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-xl);
    color: var(--nvx-gray-600);
}

/* ── Lo que la factura trae consigo ───────────────────────────────────── */
.dlgnota__resumen[b-7ldvx0k0y0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--nvx-space-md);
    padding: var(--nvx-space-md);
    background: var(--nvx-gray-50);
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.dlgnota__dato[b-7ldvx0k0y0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dlgnota__dato > span[b-7ldvx0k0y0] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dlgnota__dato > b[b-7ldvx0k0y0] {
    color: var(--nvx-800);
    overflow-wrap: anywhere;
}

.dlgnota__dato > small[b-7ldvx0k0y0] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
}

/* ── Acciones sobre los renglones ─────────────────────────────────────────
   «Toda la factura» reemplaza a teclear el valor renglón por renglón, que era
   la única forma de hacer una nota por el total. */
.dlgnota__acciones[b-7ldvx0k0y0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvx-space-sm);
    flex-wrap: wrap;
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    border-bottom: 1px solid var(--nvx-border);
    background: var(--nvx-gray-50);
}

.dlgnota__acciones-izq[b-7ldvx0k0y0] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    flex-wrap: wrap;
}

.dlgnota__cuenta[b-7ldvx0k0y0] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    font-variant-numeric: tabular-nums;
}

/* La columna del valor no se estrecha: es donde se escribe. */
.dlgnota[b-7ldvx0k0y0]  .dlgnota__col-nota {
    width: 170px;
    min-width: 150px;
}

.dlgnota[b-7ldvx0k0y0]  .dlgnota__col-btn {
    width: 44px;
}

/* Un renglón con valor entra en la nota: se distingue de los que no. */
.dlgnota[b-7ldvx0k0y0]  .dlgnota__fila--activa {
    background: var(--nvx-100);
}

/* ── Totales ──────────────────────────────────────────────────────────────
   El desglose se comprueba contra la factura; el neto es la cifra que se
   firma, y va aparte. Antes los siete iban en la misma fila, del mismo
   tamaño, y el neto se perdía entre ellos. */
.dlgnota__totales[b-7ldvx0k0y0] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(200px, 1fr);
    gap: var(--nvx-space-md);
    align-items: stretch;
}

.dlgnota__desglose[b-7ldvx0k0y0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-md);
    background: var(--nvx-gray-50);
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.dlgnota__desglose > div[b-7ldvx0k0y0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dlgnota__desglose span[b-7ldvx0k0y0] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nvx-gray-600);
}

.dlgnota__desglose b[b-7ldvx0k0y0] {
    font-size: var(--nvx-text-body);
    color: var(--nvx-gray-800);
}

.dlgnota__neto[b-7ldvx0k0y0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: var(--nvx-space-md);
    background: var(--nvx-50);
    border: 1px solid var(--nvx-300);
    border-radius: var(--nvx-r-md);
}

.dlgnota__neto > span[b-7ldvx0k0y0] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nvx-800);
}

.dlgnota__neto > b[b-7ldvx0k0y0] {
    color: var(--nvx-800);
    font-size: var(--nvx-text-h2);
    font-weight: 800;
    line-height: 1.1;
}

.dlgnota__neto > small[b-7ldvx0k0y0] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
}

/* ── Las dos casillas que cambian lo que pasa después ─────────────────── */
.dlgnota__banderas[b-7ldvx0k0y0] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-lg);
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .dlgnota__totales[b-7ldvx0k0y0] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Facturacion/DlgResolucion.razor.rz.scp.css */
.dlgres[b-y79a0rau2v] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: 0;
}

/* Rejillas que se ajustan solas: el diálogo se abre también en pantallas
   angostas y un número fijo de columnas lo desborda. */
.dlgres__fila2[b-y79a0rau2v],
.dlgres__fila3[b-y79a0rau2v] {
    display: grid;
    gap: var(--nvx-space-md);
}

.dlgres__fila2[b-y79a0rau2v] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dlgres__fila3[b-y79a0rau2v] { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* /Components/Pages/Facturacion/DlgResolucionDetalle.razor.rz.scp.css */
.dlgdet[b-xg24cfanop] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: 0;
}

.dlgdet__fila2[b-xg24cfanop],
.dlgdet__fila3[b-xg24cfanop] {
    display: grid;
    gap: var(--nvx-space-md);
}

.dlgdet__fila2[b-xg24cfanop] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dlgdet__fila3[b-xg24cfanop] { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* /Components/Pages/Facturacion/DlgResultadoEnvioFE.razor.rz.scp.css */
.dlgres[b-r1heqvw759] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-sm);
}

.dlgres__codigo[b-r1heqvw759] {
    word-break: break-all;
}

.dlgres__lista[b-r1heqvw759] {
    margin: 0;
    padding-left: 20px;
}

.dlgres__xml-acciones[b-r1heqvw759] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--nvx-space-xs);
}

/* El XML tal cual, con su propio desplazamiento: un documento de cientos de líneas no debe alargar el diálogo. */
.dlgres__xml[b-r1heqvw759] {
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: var(--nvx-space-sm);
    background: var(--nvx-gray-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-sm);
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-xs);
    white-space: pre-wrap;
    word-break: break-all;
    user-select: text;
}
/* /Components/Pages/Facturacion/DlgTransmitirNota.razor.rz.scp.css */
.dlgtx[b-bc3wu563wk] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: 0;
}

.dlgtx__que[b-bc3wu563wk] {
    margin: 0;
    color: var(--nvx-gray-800);
}

.dlgtx__que b[b-bc3wu563wk] {
    color: var(--nvx-800);
}

.dlgtx__ayuda[b-bc3wu563wk] {
    min-height: 0;
}

.dlgtx__nota[b-bc3wu563wk] {
    margin: 0;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}
/* /Components/Pages/Facturacion/Facturacion.razor.rz.scp.css */
.pagina[b-v0z195zkns] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Datos del D.O. ──────────────────────────────────────────────────────── */
.fac__do[b-v0z195zkns] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-lg);
    padding: var(--nvx-space-md) var(--nvx-space-lg);
    background: var(--nvx-50);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-md);
}

.fac__do > div[b-v0z195zkns] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fac__lbl[b-v0z195zkns] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nvx-gray-600);
}

.fac__val[b-v0z195zkns] {
    font-size: var(--nvx-text-body);
    font-weight: 600;
    color: var(--nvx-800);
}

/* El botón de crear va con los datos del D.O., que es sobre lo que actúa. */
.fac__do-accion[b-v0z195zkns] {
    margin-left: auto;
    align-self: center;
}

/* Los <th> y <td> llegan por RenderFragment: sin ::deep no los alcanzaría. */
.pagina[b-v0z195zkns]  .fac__fila { cursor: pointer; }

/* La factura escogida manda sobre lo que se ve debajo: tiene que notarse. */
.pagina[b-v0z195zkns]  .fac__fila--sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}

/* Una factura anulada sigue a la vista, atenuada y con el número tachado. */
.pagina[b-v0z195zkns]  .fac__anulada > td {
    color: var(--nvx-gray-400);
}

.pagina[b-v0z195zkns]  .fac__anulada > td:first-child {
    text-decoration: line-through;
}

/* ── El sello de la DIAN ──────────────────────────────────────────────────
   Sólo aparece cuando la factura está transmitida, y por eso puede permitirse
   el verde de «conforme»: es el aviso de que el documento ya es definitivo. */
.fac__dian[b-v0z195zkns] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-md);
    padding: 10px var(--nvx-space-md);
    background: var(--nvx-success-bg);
    border: 1px solid var(--nvx-success-bd);
    border-radius: var(--nvx-r-md);
}

.fac__dian-icono[b-v0z195zkns] {
    color: var(--nvx-success-text);
    flex: none;
}

.fac__dian-datos[b-v0z195zkns] {
    min-width: 0;
    flex: 1;
}

.fac__dian-rotulo[b-v0z195zkns] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nvx-success-text);
}

.fac__dian-fecha[b-v0z195zkns] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--nvx-gray-600);
}

/* El CUFE son 96 caracteres: parte donde toque en vez de desbordar la fila. */
.fac__dian-cufe[b-v0z195zkns] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-800);
    word-break: break-all;
    line-height: 1.35;
}

.fac__dian-acciones[b-v0z195zkns] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

@media (max-width: 760px) {
    .fac__dian[b-v0z195zkns] {
        flex-wrap: wrap;
    }
}

/* ── El formulario del encabezado ─────────────────────────────────────────
   Doce columnas, que es lo que deja poner seis campos cortos en una fila y
   partirla limpio al encoger. Las clases de tramo van en el <div> que envuelve
   cada control, no en el control: MudBlazor pone lo suyo en el suyo. */
.fac__campos[b-v0z195zkns] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

.fac__campos > .sp2[b-v0z195zkns]  { grid-column: span 2; }
.fac__campos > .sp3[b-v0z195zkns]  { grid-column: span 3; }
.fac__campos > .sp4[b-v0z195zkns]  { grid-column: span 4; }
.fac__campos > .sp6[b-v0z195zkns]  { grid-column: span 6; }
.fac__campos > .sp12[b-v0z195zkns] { grid-column: span 12; }

/* Por debajo de 1280 px seis campos en una fila dejan de caber: van de a tres,
   y los de media fila pasan a fila completa. */
@media (max-width: 1280px) {
    .fac__campos > .sp2[b-v0z195zkns] { grid-column: span 4; }
    .fac__campos > .sp3[b-v0z195zkns] { grid-column: span 4; }
    .fac__campos > .sp4[b-v0z195zkns] { grid-column: span 6; }
    .fac__campos > .sp6[b-v0z195zkns] { grid-column: span 12; }
}

@media (max-width: 860px) {
    .fac__campos > .sp2[b-v0z195zkns],
    .fac__campos > .sp3[b-v0z195zkns],
    .fac__campos > .sp4[b-v0z195zkns] { grid-column: span 6; }
}

@media (max-width: 620px) {
    .fac__campos > *[b-v0z195zkns] { grid-column: span 12; }
}

/* Número de D.O., de factura y guía: monoespaciados, que es como se comparan. */
.fac__mono[b-v0z195zkns]  input {
    font-family: var(--nvx-font-mono);
    letter-spacing: -.01em;
}

/* Rótulo de un grupo de casillas, al mismo tamaño que la etiqueta de un campo. */
.fac__rotulo[b-v0z195zkns] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nvx-gray-600);
    margin-bottom: 4px;
}

/* Los distintivos de estado, en la esquina del encabezado de la tarjeta. */
.fac__chapa[b-v0z195zkns] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

/* Las diez casillas del tipo de servicio, en rejilla para que quepan. */
.fac__servicios[b-v0z195zkns] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 2px 8px;
}

.fac__nota[b-v0z195zkns] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    font-style: italic;
}

/* ── Barra de acciones ───────────────────────────────────────────────────── */
.fac__acciones[b-v0z195zkns] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    flex-wrap: wrap;
    padding: 10px var(--nvx-space-md);
    background: var(--nvx-50);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-md);
}

.fac__acciones-nota[b-v0z195zkns] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

/* ── Totales ─────────────────────────────────────────────────────────────
   Una fila por concepto y una columna por moneda, como la rejilla del sistema
   anterior. Se arrima a la derecha: es lo que se lee al final. */
.fac__totales[b-v0z195zkns] {
    max-width: 560px;
    margin-left: auto;
}

.fac__tot[b-v0z195zkns] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nvx-text-sm);
}

.fac__tot th[b-v0z195zkns] {
    padding: 4px 8px;
    font-weight: 600;
    color: var(--nvx-800);
    border-bottom: 1px solid var(--nvx-200);
    white-space: nowrap;
}

.fac__tot td[b-v0z195zkns] {
    padding: 3px 8px;
    border-bottom: 1px solid var(--nvx-gray-100);
}

.fac__tot-sub td[b-v0z195zkns] {
    font-weight: 600;
    background: var(--nvx-gray-50);
}

.fac__tot-neto td[b-v0z195zkns] {
    font-weight: 700;
    color: var(--nvx-800);
    border-top: 1px solid var(--nvx-500);
    border-bottom: none;
    padding-top: 6px;
}

.fac__nota-inline[b-v0z195zkns] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    margin-left: 6px;
}

/* ── Alta y edición de un renglón ────────────────────────────────────────── */
.fac__form[b-v0z195zkns] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-sm);
    min-width: 0;
}

.fac__form-fila[b-v0z195zkns] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nvx-space-sm);
}

.fac__form-calculo[b-v0z195zkns] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px var(--nvx-space-md);
    background: var(--nvx-gray-50);
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.fac__form-calculo > div[b-v0z195zkns] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--nvx-space-sm);
}

.fac__form-calculo span[b-v0z195zkns] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

/* ── Columnas de las tablas ──────────────────────────────────────────────── */
.fac__th-acc[b-v0z195zkns] { width: 88px; }

.fac__acc[b-v0z195zkns] {
    white-space: nowrap;
    text-align: right;
}

/* La casilla de escoger un anticipo */
.fac__th-chk[b-v0z195zkns],
.fac__td-chk[b-v0z195zkns] { width: 38px; text-align: center; }
/* /Components/Pages/Facturacion/NotasCreditoDebito.razor.rz.scp.css */
.pagina[b-y6uzyytd3d] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Los <th> y <td> llegan por RenderFragment: sin ::deep no los alcanzaría. */
.pagina[b-y6uzyytd3d]  .ncd__acciones {
    width: 150px;
    text-align: right;
    white-space: nowrap;
}

/* Vigente o anulada, más lo que decide qué se le puede hacer: si ya está en la
   DIAN o en Siesa, si anula su factura y si está excluida. */
.pagina[b-y6uzyytd3d]  .ncd__estados {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.pagina[b-y6uzyytd3d]  .ncd__fila { cursor: pointer; }

/* El cliente escogido manda sobre la tabla de abajo: tiene que verse cuál es. */
.pagina[b-y6uzyytd3d]  .ncd__fila--sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}

/* Una nota anulada sigue contando para la auditoría, así que no se esconde: se
   atenúa y se tacha el número. */
.pagina[b-y6uzyytd3d]  .ncd__anulada > td {
    color: var(--nvx-gray-400);
}

.pagina[b-y6uzyytd3d]  .ncd__anulada > td:first-child {
    text-decoration: line-through;
}

.pagina[b-y6uzyytd3d]  .ncd__obs {
    color: var(--nvx-gray-400);
    vertical-align: middle;
}

.ncd__anuladas[b-y6uzyytd3d] {
    color: var(--nvx-danger);
    margin-left: 6px;
}

/* El aviso de los renglones heredados, dentro de la tarjeta sin relleno. */
.ncd__heredado[b-y6uzyytd3d] {
    padding: var(--nvx-space-md) var(--nvx-space-md) 0;
}
/* /Components/Pages/Facturacion/RadicarXml.razor.rz.scp.css */
/* Radicar XML */

.rx[b-6iywjwte2v] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Rejilla con campos de MudBlazor: sin el min-width colapsa a una columna (ver NvxFilterBar.razor.css). */
.rx__buscar[b-6iywjwte2v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--nvx-space-sm);
    align-items: center;
}

.rx__buscar[b-6iywjwte2v]  > * {
    min-width: 0;
}

.rx__acciones[b-6iywjwte2v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-sm);
    margin: var(--nvx-space-xs) 0;
}

/* El XML en letra de máquina: se lee y se corrige campo por campo. */
[b-6iywjwte2v] .rx__xml textarea {
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-xs);
    line-height: 1.45;
    white-space: pre;
}

.rx__codigo[b-6iywjwte2v] {
    word-break: break-all;
}

.rx__lista[b-6iywjwte2v] {
    margin: 0;
    padding-left: 20px;
}
/* /Components/Pages/Facturacion/ResolucionesFacturacion.razor.rz.scp.css */
.pagina[b-eucy96kisd] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Los <th> y <td> llegan por RenderFragment: sin ::deep estas reglas no los
   alcanzarían. */
.pagina[b-eucy96kisd]  .res__acciones {
    width: 92px;
    text-align: right;
    white-space: nowrap;
}

/* La fila entera abre sus rangos, asi que tiene que anunciarse pulsable. */
.pagina[b-eucy96kisd]  .res__fila { cursor: pointer; }

/* La fila escogida es la que manda sobre la tabla de rangos de abajo, así que
   tiene que verse cuál es sin volver a buscarla. */
.pagina[b-eucy96kisd]  .res__fila--sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}

/* Ámbar y no rojo: que la próxima factura se salga del rango es algo que hay que
   mirar, no un error de esta pantalla. */
.pagina[b-eucy96kisd]  .res__aviso {
    color: var(--nvx-warning);
    vertical-align: middle;
    margin-left: 4px;
}

/* Una resolución sin empresa no la usa nadie al numerar: se dice, no se deja
   en blanco como si el dato faltara por descuido. */
.pagina[b-eucy96kisd]  .res__sin-empresa {
    color: var(--nvx-gray-400);
    font-style: italic;
}
/* /Components/Pages/Importaciones/CuentasPorPagar.razor.rz.scp.css */
    /* Cuentas por pagar.

   Esto estaba en un <style> dentro del .razor, con su propio :root y la
   rampa VIEJA de la marca —var(--nvx-800) a var(--nvx-600)—, que la guía de diseño da por
   derogada porque no es el color del logo. Ahora es CSS aislado y todo sale
   de los tokens de nvx-theme.css.

   Los nombres --cpp-* se conservan para no reescribir las reglas; van sobre
   .cpp y no sobre :root porque el CSS aislado no alcanza la raíz. */
.cpp[b-xwkr4qdfgz] {
    --cpp-bg:          var(--nvx-50);
    --cpp-surface:     var(--nvx-white);
    --cpp-surface2:    var(--nvx-100);
    --cpp-border:      var(--nvx-200);
    --cpp-border-dark: var(--nvx-300);
    --cpp-teal:        var(--nvx-800);
    --cpp-teal-mid:    var(--nvx-600);
    --cpp-teal-dark:   var(--nvx-900);
    --cpp-teal-light:  var(--nvx-100);
    --cpp-text:        var(--nvx-gray-800);
    --cpp-text-mid:    var(--nvx-gray-600);
    --cpp-muted:       var(--nvx-gray-400);
    --cpp-accent:      var(--nvx-700);
    --cpp-orange:      var(--nvx-warning);
    --cpp-red:         var(--nvx-danger);
    --cpp-green:       var(--nvx-success);

    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    color: var(--cpp-text);
}
/* TITLE BAND */
    .cpp-title-band[b-xwkr4qdfgz] {
        background: linear-gradient(90deg, var(--cpp-teal) 0%, var(--cpp-teal-mid) 100%);
        padding: 18px 28px;
        color: var(--nvx-white);
    }
    .cpp-title-band h1[b-xwkr4qdfgz] {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.3px;
    }

    /* MAIN */
    .cpp-main[b-xwkr4qdfgz] {
        padding: 20px 24px;
        max-width: 1600px;
        margin: 0 auto;
    }

    /* BANNER INFORMATIVO */
    .cpp-banner-info[b-xwkr4qdfgz] {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        background: linear-gradient(90deg, var(--nvx-100) 0%, var(--nvx-50) 100%);
        border: 1.5px solid var(--cpp-border);
        border-left: 5px solid var(--cpp-teal-mid);
        border-radius: 10px;
        padding: 14px 18px;
        margin-bottom: 20px;
        font-size: 13px;
        color: var(--cpp-text-mid);
        line-height: 1.6;
    }
    .cpp-banner-icon[b-xwkr4qdfgz] {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        background: var(--cpp-teal);
        color: var(--nvx-white);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 14px;
        margin-top: 2px;
    }
    .cpp-banner-footnote[b-xwkr4qdfgz] {
        font-size: 11px;
        color: var(--cpp-muted);
        font-style: italic;
    }

    /* FILTROS */
    .cpp-filters-card[b-xwkr4qdfgz] {
        background: var(--cpp-surface);
        border: 1.5px solid var(--cpp-border);
        border-radius: 12px;
        padding: 18px 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(10,96,96,.06);
    }
    .cpp-filters-grid[b-xwkr4qdfgz] {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: flex-end;
    }
    .cpp-fg[b-xwkr4qdfgz] {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 180px;
    }
    .cpp-fg label[b-xwkr4qdfgz] {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--cpp-accent);
    }
    .cpp-input[b-xwkr4qdfgz],
    .cpp-select[b-xwkr4qdfgz] {
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        color: var(--cpp-text);
        background: var(--cpp-bg);
        border: 1.5px solid var(--cpp-border);
        border-radius: 8px;
        padding: 8px 10px;
        outline: none;
        transition: border-color .2s;
        height: 36px;
    }
    .cpp-input:focus[b-xwkr4qdfgz],
    .cpp-select:focus[b-xwkr4qdfgz] {
        border-color: var(--cpp-teal-mid);
        box-shadow: 0 0 0 3px rgba(14,144,144,.12);
    }
    .cpp-select[b-xwkr4qdfgz] {
        width: 100%;
        cursor: pointer;
    }

    /* BOTONES */
    .cpp-btns-row[b-xwkr4qdfgz] {
        display: flex;
        gap: 8px;
        align-items: flex-end;
        flex-wrap: wrap;
    }
    .cpp-btn-buscar[b-xwkr4qdfgz],
    .cpp-btn-limpiar[b-xwkr4qdfgz],
    .cpp-btn-excel[b-xwkr4qdfgz] {
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        font-weight: 600;
        border: none;
        border-radius: 8px;
        padding: 9px 22px;
        cursor: pointer;
        transition: background .18s, transform .12s;
        white-space: nowrap;
        height: 36px;
    }
    .cpp-btn-buscar[b-xwkr4qdfgz] {
        background: linear-gradient(90deg, var(--cpp-teal) 0%, var(--cpp-teal-mid) 100%);
        color: var(--nvx-white);
        box-shadow: 0 2px 8px rgba(10,96,96,.18);
    }
    .cpp-btn-buscar:hover:not(:disabled)[b-xwkr4qdfgz] { filter: brightness(1.08); transform: translateY(-1px); }
    .cpp-btn-buscar:disabled[b-xwkr4qdfgz] { opacity: .6; cursor: not-allowed; }

    .cpp-btn-limpiar[b-xwkr4qdfgz] {
        background: var(--cpp-surface2);
        color: var(--cpp-accent);
        border: 1.5px solid var(--cpp-border);
    }
    .cpp-btn-limpiar:hover:not(:disabled)[b-xwkr4qdfgz] { background: var(--cpp-teal-light); }
    .cpp-btn-limpiar:disabled[b-xwkr4qdfgz] { opacity: .6; cursor: not-allowed; }

    .cpp-btn-excel[b-xwkr4qdfgz] {
        background: var(--nvx-success-text);
        color: var(--nvx-white);
        box-shadow: 0 2px 8px rgba(26,122,60,.18);
    }
    .cpp-btn-excel:hover:not(:disabled)[b-xwkr4qdfgz] { background: var(--nvx-success-text); transform: translateY(-1px); }
    .cpp-btn-excel:disabled[b-xwkr4qdfgz] { opacity: .6; cursor: not-allowed; }

    /* ERROR */
    .cpp-error-box[b-xwkr4qdfgz] {
        background: var(--nvx-danger-bg);
        border: 1.5px solid var(--nvx-danger-bd);
        border-radius: 8px;
        padding: 12px 16px;
        color: var(--cpp-red);
        font-size: 13px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .cpp-error-close[b-xwkr4qdfgz] {
        cursor: pointer;
        font-weight: 700;
        font-size: 15px;
        color: var(--cpp-red);
        padding: 0 4px;
    }

    /* LOADING */
    .cpp-loading-wrap[b-xwkr4qdfgz] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px;
        gap: 14px;
        color: var(--cpp-muted);
        font-size: 13px;
    }
    .cpp-spinner[b-xwkr4qdfgz] {
        width: 36px;
        height: 36px;
        border: 3.5px solid var(--cpp-teal-light);
        border-top-color: var(--cpp-teal-mid);
        border-radius: 50%;
        animation: cpp-spin .7s linear infinite;
    }
    .cpp-loading-text[b-xwkr4qdfgz] { color: var(--cpp-muted); font-size: 13px; }

    @@keyframes cpp-spin {
        to[b-xwkr4qdfgz] { transform: rotate(360deg); }
    }

    /* EMPTY */
    .cpp-empty[b-xwkr4qdfgz] {
        text-align: center;
        padding: 40px;
        color: var(--cpp-muted);
        font-size: 13px;
        background: var(--cpp-surface);
        border-radius: 12px;
        border: 1.5px dashed var(--cpp-border);
    }

    /* TABLE CARD */
    .cpp-table-card[b-xwkr4qdfgz] {
        background: var(--cpp-surface);
        border: 1.5px solid var(--cpp-border);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(10,96,96,.07);
        margin-bottom: 24px;
    }
    .cpp-table-top[b-xwkr4qdfgz] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 14px 18px;
        background: linear-gradient(90deg, var(--cpp-teal-dark) 0%, var(--cpp-teal) 100%);
        color: var(--nvx-white);
    }
    .cpp-table-title[b-xwkr4qdfgz] {
        font-size: 15px;
        font-weight: 700;
    }
    .cpp-table-meta[b-xwkr4qdfgz] {
        font-size: 11px;
        opacity: .85;
        margin-top: 3px;
        font-family: 'JetBrains Mono', monospace;
    }
    .cpp-table-wrap[b-xwkr4qdfgz] {
        overflow-x: auto;
        max-height: 540px;
        overflow-y: auto;
    }
    .cpp-table[b-xwkr4qdfgz] {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        font-family: 'JetBrains Mono', monospace;
    }
    .cpp-table thead th[b-xwkr4qdfgz] {
        position: sticky;
        top: 0;
        background: var(--cpp-surface2);
        color: var(--cpp-accent);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        padding: 9px 10px;
        border-bottom: 2px solid var(--cpp-border);
        white-space: nowrap;
    }
    .cpp-table thead th.num[b-xwkr4qdfgz] { text-align: right; }
    .cpp-table tbody td[b-xwkr4qdfgz] {
        padding: 7px 10px;
        border-bottom: 1px solid var(--nvx-50);
        color: var(--cpp-text);
        white-space: nowrap;
    }
    .cpp-table tbody td.num[b-xwkr4qdfgz] { text-align: right; }
    .cpp-table tbody tr:hover[b-xwkr4qdfgz] { background: var(--nvx-50); }
    .cpp-tr-even[b-xwkr4qdfgz] { background: var(--nvx-50); }
    .cpp-total-row td[b-xwkr4qdfgz] {
        background: var(--cpp-surface2);
        border-top: 2px solid var(--cpp-border);
        padding: 8px 10px;
        font-size: 12px;
        color: var(--cpp-teal-dark);
    }
    .cpp-total-row td.num[b-xwkr4qdfgz] { text-align: right; }
    .cpp-table-footer[b-xwkr4qdfgz] {
        padding: 10px 18px;
        font-size: 11px;
        color: var(--cpp-muted);
        border-top: 1px solid var(--cpp-border);
        text-align: right;
        font-family: 'JetBrains Mono', monospace;
    }

    /* AGING SECTION */
    .cpp-aging-section[b-xwkr4qdfgz] {
        margin-bottom: 22px;
    }
    .cpp-section-label[b-xwkr4qdfgz] {
        font-size: 13px;
        font-weight: 700;
        color: var(--cpp-accent);
        letter-spacing: .8px;
        margin-bottom: 14px;
        text-transform: uppercase;
    }
    .cpp-aging-grid[b-xwkr4qdfgz] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 14px;
    }
    .cpp-aging-card[b-xwkr4qdfgz] {
        background: var(--cpp-surface);
        border: 1.5px solid var(--cpp-border);
        border-radius: 12px;
        padding: 18px 16px 14px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(10,96,96,.05);
        transition: transform .15s, box-shadow .15s;
    }
    .cpp-aging-card:hover[b-xwkr4qdfgz] {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(10,96,96,.10);
    }
    .cpp-aging-badge[b-xwkr4qdfgz] {
        display: inline-block;
        font-size: 11px;
        font-weight: 600;
        padding: 3px 12px;
        border-radius: 20px;
        margin-bottom: 10px;
        letter-spacing: .3px;
    }
    .cpp-aging-count[b-xwkr4qdfgz] {
        font-size: 42px;
        font-weight: 800;
        line-height: 1;
        margin-bottom: 2px;
        font-family: 'Outfit', sans-serif;
    }
    .cpp-aging-docs[b-xwkr4qdfgz] {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: var(--cpp-muted);
        text-transform: uppercase;
        margin-bottom: 8px;
    }
    .cpp-aging-monto[b-xwkr4qdfgz] {
        font-size: 13px;
        font-weight: 600;
        color: var(--cpp-text-mid);
        font-family: 'JetBrains Mono', monospace;
        margin-bottom: 4px;
    }
    .cpp-aging-pct[b-xwkr4qdfgz] {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 8px;
    }
    .cpp-aging-bar-wrap[b-xwkr4qdfgz] {
        height: 5px;
        background: var(--nvx-gray-100);
        border-radius: 3px;
        overflow: hidden;
    }
    .cpp-aging-bar-fill[b-xwkr4qdfgz] {
        height: 100%;
        border-radius: 3px;
        transition: width .5s ease;
    }

    /* FOOTER */
    .cpp-footer[b-xwkr4qdfgz] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 24px;
        background: var(--cpp-teal-dark);
        color: rgba(255,255,255,.7);
        font-size: 11px;
        font-family: 'JetBrains Mono', monospace;
    }
    .cpp-foot-col[b-xwkr4qdfgz] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        opacity: .7;
    }
    .cpp-foot-col span[b-xwkr4qdfgz] {
        font-size: 12px;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        opacity: 1;
        color: var(--nvx-white);
    }

/* ── Lo que estaba como estilo en línea ───────────────────────────────── */

.cpp-t-md[b-xwkr4qdfgz]        { font-size: 1rem; }
.cpp-t-sm[b-xwkr4qdfgz]        { font-size: var(--nvx-text-sm); }
.cpp-t-sm-fuerte[b-xwkr4qdfgz] { font-size: var(--nvx-text-sm); font-weight: 700; letter-spacing: .05em; }
.cpp-mb[b-xwkr4qdfgz]          { margin-bottom: 18px; }

.cpp-fila[b-xwkr4qdfgz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cpp-cab[b-xwkr4qdfgz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
}

.cpp-fondo[b-xwkr4qdfgz] {
    min-height: 100vh;
    background: var(--nvx-50);
}

.cpp-tarjeta[b-xwkr4qdfgz] {
    background: var(--nvx-white);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-lg);
    box-shadow: var(--nvx-shadow-sm);
}

.cpp-icono[b-xwkr4qdfgz] {
    background: var(--nvx-50);
    color: var(--nvx-800);
    width: 30px;
    height: 30px;
    border-radius: var(--nvx-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cpp-rotulo[b-xwkr4qdfgz] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--nvx-900);
}

.cpp-pill[b-xwkr4qdfgz] {
    background: var(--nvx-50);
    color: var(--nvx-800);
    padding: 3px 12px;
    border-radius: 999px;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .06em;
}

.cpp-centro[b-xwkr4qdfgz] { text-align: center; }
/* /Components/Pages/Importaciones/DlgBuscarDocumentoTransporte.razor.rz.scp.css */
.dlgbdt[b-2tux1stk2g] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.dlgbdt__filtros[b-2tux1stk2g] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    gap: 12px;
    align-items: center;
}

@media (max-width: 640px) {
    .dlgbdt__filtros[b-2tux1stk2g] { grid-template-columns: 1fr; }
}

.dlgbdt__accion[b-2tux1stk2g] {
    white-space: nowrap;
    text-align: right;
}
/* /Components/Pages/Importaciones/DlgContenedorDt.razor.rz.scp.css */
.dlgcdt[b-9ihwnyzi6z] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dlgcdt__fila[b-9ihwnyzi6z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Sigla, serie y dígito verificador, con los anchos del número real. */
.dlgcdt__partes[b-9ihwnyzi6z] {
    display: grid;
    grid-template-columns: 5rem 7rem 4rem;
    gap: 8px;
}

.dlgcdt__rotulo[b-9ihwnyzi6z] {
    display: block;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-700);
    margin-bottom: 4px;
}

@media (max-width: 560px) {
    .dlgcdt__fila[b-9ihwnyzi6z] { grid-template-columns: 1fr; }
    .dlgcdt__partes[b-9ihwnyzi6z] { grid-template-columns: 1fr 1fr 1fr; }
}
/* /Components/Pages/Importaciones/DlgEnviarDocumento.razor.rz.scp.css */
.dlgenv[b-pg8g0iel0x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: min(560px, 78vw);
}

/* El adjunto se muestra antes que los campos: es lo que el usuario quiere
   confirmar antes de escribir una dirección. */
.dlgenv__adjunto[b-pg8g0iel0x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--nvx-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.dlgenv__archivo[b-pg8g0iel0x] {
    display: block;
    font-weight: 600;
    font-size: var(--nvx-text-sm);
    word-break: break-word;
}

.dlgenv__peso[b-pg8g0iel0x] {
    display: block;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    font-variant-numeric: tabular-nums;
}

.dlgenv__spin[b-pg8g0iel0x] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

@media (max-width: 600px) {
    .dlgenv[b-pg8g0iel0x] { min-width: 0; }
}
/* /Components/Pages/Importaciones/DlgMercanciaDt.razor.rz.scp.css */
.dlgmdt[b-xdfzs7x5ee] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dlgmdt__fila[b-xdfzs7x5ee] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Aviso del vínculo con la factura: es un dato, no un campo. */
.dlgmdt__vinculo[b-xdfzs7x5ee] {
    padding: 8px 12px;
    background: var(--nvx-info-bg);
    border: 1px solid var(--nvx-info-bd);
    border-radius: var(--nvx-r-sm);
    font-size: var(--nvx-text-xs);
    color: var(--nvx-info-text);
}

@media (max-width: 560px) {
    .dlgmdt__fila[b-xdfzs7x5ee] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Importaciones/DlgShippingInstructions.razor.rz.scp.css */
.dlgsi[b-mpluxkoetb] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: 0;
}

.dlgsi__centro[b-mpluxkoetb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-xl) 0;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-body);
}

/* Fecha y D.O., que en el legado eran dos etiquetas sueltas. */
.dlgsi__encabezado[b-mpluxkoetb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-lg);
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    background: var(--nvx-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

/* MBL a la izquierda y HBL a la derecha, como las dos tablas del legado. */
.dlgsi__par[b-mpluxkoetb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nvx-space-lg);
}

.dlgsi__bloque[b-mpluxkoetb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.dlgsi__marca[b-mpluxkoetb] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-800);
    padding-bottom: var(--nvx-space-xs);
    border-bottom: 2px solid var(--nvx-300);
}

.dlgsi__fila[b-mpluxkoetb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dlgsi__rejilla[b-mpluxkoetb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.dlgsi__notas[b-mpluxkoetb] {
    margin-top: 10px;
}

.dlgsi__spin[b-mpluxkoetb] {
    margin-right: var(--nvx-space-sm);
}

@media (max-width: 900px) {
    .dlgsi__par[b-mpluxkoetb] { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .dlgsi__fila[b-mpluxkoetb] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Importaciones/DocumentoDeTransporte.razor.rz.scp.css */
.dt[b-mc6k8gy7o7] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 48px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dt__centro[b-mc6k8gy7o7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 0;
    color: var(--nvx-gray-400);
}

/* Rejillas que se reacomodan solas. El encabezado tiene filas de dos y de
   cuatro campos, y por debajo de 1100px no caben en una línea. */
.dt__rejilla[b-mc6k8gy7o7] {
    display: grid;
    gap: 12px;
    align-items: start;
}

.dt__rejilla--4[b-mc6k8gy7o7] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dt__rejilla--2[b-mc6k8gy7o7] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dt__rejilla + .dt__rejilla[b-mc6k8gy7o7] { margin-top: 12px; }

.dt__separado[b-mc6k8gy7o7] { margin-top: 18px; }

@media (max-width: 1100px) {
    .dt__rejilla--4[b-mc6k8gy7o7] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .dt__rejilla--4[b-mc6k8gy7o7],
    .dt__rejilla--2[b-mc6k8gy7o7] { grid-template-columns: 1fr; }
}

/* ── Rótulos de los grupos de radios ─────────────────────────────────────── */

.dt__rotulo[b-mc6k8gy7o7] {
    display: block;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-700);
    margin-bottom: 2px;
}

.dt__tipo[b-mc6k8gy7o7] {
    padding-bottom: 6px;
    border-bottom: var(--nvx-border);
    margin-bottom: 14px;
}

/* La marca de emisión que el D.O. trae: informativa, y en rojo porque avisa
   que el documento ya salió. */
.dt__emitido[b-mc6k8gy7o7] {
    display: block;
    margin-top: 4px;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    color: var(--nvx-danger-text);
}

/* ── Tablas de detalle ───────────────────────────────────────────────────── */

.dt__aviso[b-mc6k8gy7o7] {
    padding: 28px var(--nvx-space-md);
    text-align: center;
    color: var(--nvx-gray-400);
    font-size: var(--nvx-text-body);
}

.dt__acciones[b-mc6k8gy7o7] {
    white-space: nowrap;
    text-align: right;
}

/* Carga de la planilla de contenedores. El <InputFile> nativo no se puede
   estilar, así que se esconde y el label hace de botón. */
.dt__adjuntar[b-mc6k8gy7o7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: var(--nvx-border-input);
    border-radius: var(--nvx-r-sm);
    font-size: var(--nvx-text-sm);
    font-weight: 700;
    color: var(--nvx-700);
    cursor: pointer;
    background: var(--nvx-white);
}

.dt__adjuntar:hover[b-mc6k8gy7o7] {
    background: var(--nvx-50);
    border-color: var(--nvx-300);
}

/* El <input> lo dibuja InputFile, así que no lleva el atributo de ámbito:
   hace falta ::deep para alcanzarlo. */
.dt__adjuntar[b-mc6k8gy7o7]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* /Components/Pages/Maestros/ConfiguracionCorreo.razor.rz.scp.css */
/* Maestro de cuentas de correo */

.cor[b-94amuyp9i2] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cor__acc[b-94amuyp9i2] {
    white-space: nowrap;
    text-align: right;
    width: 96px;
}

.cor__form[b-94amuyp9i2] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-sm);
}

.cor__fila[b-94amuyp9i2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-sm);
    align-items: center;
}
/* /Components/Pages/Maestros/DlgEmpresa.razor.rz.scp.css */
.dlgemp[b-bo148q56w1] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.dlgemp__fila[b-bo148q56w1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .dlgemp__fila[b-bo148q56w1] { grid-template-columns: 1fr; }
}

/* El idioma se destaca: es el campo que no existe en el legacy y el que decide
   cómo se comporta la apertura de esta empresa. */
.dlgemp__idioma[b-bo148q56w1] {
    padding: 12px 14px;
    background: var(--nvx-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.dlgemp__rotulo[b-bo148q56w1] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-700);
}

.dlgemp__ayuda[b-bo148q56w1] {
    margin: 3px 0 6px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.5;
}

.dlgemp__falta[b-bo148q56w1] { margin-top: 6px; }

.dlgemp__spin[b-bo148q56w1] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

/* Los interruptores dentro del bloque de configuración: sin el margen quedan
   pegados al campo de arriba y parecen parte de él. */
.dlgemp__idioma[b-bo148q56w1]  .dlgemp__interruptor { margin-top: 6px; }
/* /Components/Pages/Maestros/DlgNotificacionCorreo.razor.rz.scp.css */
.dlgnc[b-y944e3ks7c] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.dlgnc__fila[b-y944e3ks7c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .dlgnc__fila[b-y944e3ks7c] { grid-template-columns: 1fr; }
}

/* El destinatario se destaca: es el campo que cambia de forma según el origen,
   y el que decide si la fila resuelve a alguien o no. */
.dlgnc__destino[b-y944e3ks7c] {
    padding: 12px 14px;
    background: var(--nvx-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.dlgnc__ayuda[b-y944e3ks7c] {
    margin: 8px 0 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.55;
}

.dlgnc__spin[b-y944e3ks7c] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
/* /Components/Pages/Maestros/DlgPlantillaDocumento.razor.rz.scp.css */
.dlgplt[b-95wqpbcivv] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.dlgplt__cargando[b-95wqpbcivv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    color: var(--nvx-gray-600);
}

.dlgplt__panel[b-95wqpbcivv] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: var(--nvx-space-md);
}

.dlgplt__fila2[b-95wqpbcivv],
.dlgplt__fila3[b-95wqpbcivv] {
    display: grid;
    gap: 12px;
    align-items: center;
}

.dlgplt__fila2[b-95wqpbcivv] { grid-template-columns: 1fr 1fr; }
.dlgplt__fila3[b-95wqpbcivv] { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 720px) {
    .dlgplt__fila2[b-95wqpbcivv],
    .dlgplt__fila3[b-95wqpbcivv] { grid-template-columns: 1fr; }
}

/* ── Imagen y su vista previa ─────────────────────────────────────────────── */

.dlgplt__imagen[b-95wqpbcivv] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 720px) {
    .dlgplt__imagen[b-95wqpbcivv] { grid-template-columns: 1fr; }
}

/* El tablero de cuadros deja ver la transparencia del PNG: un logo con fondo
   blanco opaco se distingue a simple vista de uno recortado. */
.dlgplt__vista[b-95wqpbcivv] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 8px;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    background-color: var(--nvx-gray-50);
    background-image:
        linear-gradient(45deg, var(--nvx-gray-100) 25%, transparent 25%),
        linear-gradient(-45deg, var(--nvx-gray-100) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--nvx-gray-100) 75%),
        linear-gradient(-45deg, transparent 75%, var(--nvx-gray-100) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

.dlgplt__vista img[b-95wqpbcivv] {
    max-width: 100%;
    max-height: 76px;
    object-fit: contain;
}

.dlgplt__falta[b-95wqpbcivv] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    text-align: center;
    line-height: 1.4;
}

.dlgplt__controles[b-95wqpbcivv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* InputFile no lleva el atributo de ámbito del CSS aislado, así que el <input>
   se estiliza desde la etiqueta que lo envuelve y no con ::deep. */
.dlgplt__subir[b-95wqpbcivv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 14px;
    border: 1px solid var(--nvx-500);
    border-radius: var(--nvx-r-sm);
    color: var(--nvx-700);
    font-size: var(--nvx-text-sm);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color .15s ease;
}

.dlgplt__subir:hover[b-95wqpbcivv] {
    background: var(--nvx-50);
}

.dlgplt__subir[b-95wqpbcivv]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ── Secciones ────────────────────────────────────────────────────────────── */

.dlgplt__agregar[b-95wqpbcivv] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.dlgplt__tabla[b-95wqpbcivv] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nvx-text-sm);
}

.dlgplt__tabla thead th[b-95wqpbcivv] {
    text-align: left;
    padding: 8px 10px;
    background: var(--nvx-800);
    color: #fff;
    font-weight: 600;
    font-size: var(--nvx-text-xs);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.dlgplt__tabla thead th:first-child[b-95wqpbcivv] { border-radius: var(--nvx-r-sm) 0 0 0; }
.dlgplt__tabla thead th:last-child[b-95wqpbcivv]  { border-radius: 0 var(--nvx-r-sm) 0 0; }

.dlgplt__tabla tbody td[b-95wqpbcivv] {
    padding: 6px 10px;
    border-bottom: var(--nvx-border);
    vertical-align: middle;
}

.dlgplt__tabla tbody tr:nth-child(even)[b-95wqpbcivv] {
    background: var(--nvx-gray-50);
}

/* Una sección apagada sigue estando: se atenúa, no se esconde. */
.dlgplt__fila-oculta[b-95wqpbcivv] {
    opacity: .5;
}

.dlgplt__col-orden[b-95wqpbcivv] {
    width: 36px;
    text-align: center;
    font-family: var(--nvx-font-mono);
    color: var(--nvx-gray-600);
}

.dlgplt__col-vis[b-95wqpbcivv] { width: 70px; text-align: center; }
.dlgplt__col-acc[b-95wqpbcivv] { width: 160px; white-space: nowrap; text-align: right; }

.dlgplt__nombre[b-95wqpbcivv] {
    display: block;
    font-weight: 600;
}

.dlgplt__ayuda[b-95wqpbcivv] {
    display: block;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    line-height: 1.3;
}

.dlgplt__titulo[b-95wqpbcivv] {
    display: block;
    font-weight: 500;
}

.dlgplt__lineas[b-95wqpbcivv] {
    display: block;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

.dlgplt__spin[b-95wqpbcivv] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

/* Los datos de la empresa: dos columnas que se apilan en pantalla angosta */
.dlgplt__datos[b-95wqpbcivv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--nvx-space-sm);
    margin-bottom: var(--nvx-space-sm);
}

/* Los marcadores que admiten las instrucciones de pago del anticipo. Se enseñan
   porque escribirlos de memoria es la forma más fácil de que no reemplacen nada. */
.dlgplt__marcadores[b-95wqpbcivv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-xs);
    margin-top: var(--nvx-space-sm);
}

.dlgplt__marcadorestitulo[b-95wqpbcivv] {
    font-size: .78rem;
    color: var(--nvx-gray-600);
}

.dlgplt__marcador[b-95wqpbcivv] {
    font-family: var(--nvx-font-mono);
    font-size: .74rem;
    padding: 1px 6px;
    border: 1px solid var(--nvx-100);
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-50);
    color: var(--nvx-700);
    cursor: help;
}
/* /Components/Pages/Maestros/DlgPlantillaGastos.razor.rz.scp.css */
.dlgpg[b-vjp1hexv0i] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: 520px;
}

@media (max-width: 620px) {
    .dlgpg[b-vjp1hexv0i] { min-width: 0; }
}

.dlgpg__tipo[b-vjp1hexv0i]  .mud-input-control-boolean-input {
    margin-right: var(--nvx-space-lg);
}

.dlgpg__ayuda[b-vjp1hexv0i] {
    margin: 0 0 var(--nvx-space-md);
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

.dlgpg__botones[b-vjp1hexv0i] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
}

/* El selector de archivo del navegador, con el borde del sistema. */
.dlgpg__archivo[b-vjp1hexv0i] {
    border: 1px dashed var(--nvx-border-input);
    border-radius: var(--nvx-r-md);
    padding: var(--nvx-space-md);
    background: var(--nvx-gray-50);
}

.dlgpg__avance[b-vjp1hexv0i] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
    color: var(--nvx-800);
    font-size: var(--nvx-text-sm);
}

.dlgpg__avisos[b-vjp1hexv0i] {
    margin: 0;
    padding: var(--nvx-space-md) var(--nvx-space-md) var(--nvx-space-md) 32px;
    max-height: 220px;
    overflow-y: auto;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-800);
}

.dlgpg__avisos li + li[b-vjp1hexv0i] { margin-top: 4px; }

.dlgpg__mas[b-vjp1hexv0i] {
    margin: 0;
    padding: 0 var(--nvx-space-md) var(--nvx-space-md);
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
}
/* /Components/Pages/Maestros/DlgPlantillaGastosTerceros.razor.rz.scp.css */
.dlgpt[b-2e2voxwii3] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: 520px;
}

@media (max-width: 620px) {
    .dlgpt[b-2e2voxwii3] { min-width: 0; }
}

.dlgpt__ayuda[b-2e2voxwii3] {
    margin: 0 0 var(--nvx-space-md);
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

.dlgpt__botones[b-2e2voxwii3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
}

/* El selector de archivo del navegador, con el borde del sistema. */
.dlgpt__archivo[b-2e2voxwii3] {
    border: 1px dashed var(--nvx-border-input);
    border-radius: var(--nvx-r-md);
    padding: var(--nvx-space-md);
    background: var(--nvx-gray-50);
}

.dlgpt__avance[b-2e2voxwii3] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
    color: var(--nvx-800);
    font-size: var(--nvx-text-sm);
}

.dlgpt__avisos[b-2e2voxwii3] {
    margin: 0;
    padding: var(--nvx-space-md) var(--nvx-space-md) var(--nvx-space-md) 32px;
    max-height: 220px;
    overflow-y: auto;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-800);
}

.dlgpt__avisos li + li[b-2e2voxwii3] { margin-top: 4px; }

.dlgpt__mas[b-2e2voxwii3] {
    margin: 0;
    padding: 0 var(--nvx-space-md) var(--nvx-space-md);
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
}
/* /Components/Pages/Maestros/DlgSeccionPlantilla.razor.rz.scp.css */
.dlgsec[b-yxafkxgzhk] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* El área de texto es donde de verdad se trabaja: monoespaciada para que las
   líneas se cuenten de un vistazo y no se confunda una sangría con un espacio. */
.dlgsec[b-yxafkxgzhk]  .mud-input-slot textarea {
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-sm);
    line-height: 1.5;
}

.dlgsec__titulo[b-yxafkxgzhk] {
    display: block;
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nvx-gray-600);
    margin-bottom: 6px;
}

.dlgsec__formato[b-yxafkxgzhk] {
    padding: 10px 12px;
    border: var(--nvx-border);
    border-left: 3px solid var(--nvx-500);
    border-radius: var(--nvx-r-sm);
    background: var(--nvx-gray-50);
}

.dlgsec__formato ul[b-yxafkxgzhk] {
    margin: 0;
    padding-left: 18px;
    font-size: var(--nvx-text-sm);
    line-height: 1.6;
}

.dlgsec__formato code[b-yxafkxgzhk],
.dlgsec__chip[b-yxafkxgzhk] {
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-xs);
    background: #fff;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-sm);
    padding: 1px 5px;
}

.dlgsec__chips[b-yxafkxgzhk] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dlgsec__chip[b-yxafkxgzhk] {
    cursor: help;
}

/* ── Ficha de campos (RUTA y MERCANCIA) ─────────────────────────────────────
   La lista es el objeto de trabajo: se lee de arriba abajo en el mismo orden en
   que sale impresa, y cada fila lleva sus controles a la derecha. */

.dlgsec__campos[b-yxafkxgzhk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dlgsec__lista[b-yxafkxgzhk] {
    border: var(--nvx-border);
    border-radius: var(--nvx-r-sm);
    background: #fff;
    max-height: 320px;
    overflow-y: auto;
    padding: 0;
}

.dlgsec[b-yxafkxgzhk]  .dlgsec__campo {
    padding: 2px 8px;
    border-bottom: 1px solid var(--nvx-gray-100);
}

.dlgsec[b-yxafkxgzhk]  .dlgsec__campo:last-child {
    border-bottom: none;
}

.dlgsec__fila[b-yxafkxgzhk] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* El numero de orden es la referencia rapida contra el documento impreso. */
.dlgsec__orden[b-yxafkxgzhk] {
    flex: 0 0 22px;
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-500);
    text-align: right;
}

.dlgsec__nombre[b-yxafkxgzhk] {
    font-size: var(--nvx-text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dlgsec__agregar[b-yxafkxgzhk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dlgsec__agregar[b-yxafkxgzhk]  .mud-input-control {
    flex: 1 1 240px;
    min-width: 200px;
}
/* /Components/Pages/Maestros/DlgVistaPreviaPlantilla.razor.rz.scp.css */
.dlgvp[b-kxm4hw2no5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dlgvp__cargando[b-kxm4hw2no5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px 0;
    color: var(--nvx-gray-600);
}

/* El visor del navegador pinta su propio fondo gris; el borde y el radio son para
   que el marco se lea como una hoja dentro del diálogo y no como un agujero. */
.dlgvp__marco[b-kxm4hw2no5] {
    width: 100%;
    height: 68vh;
    min-height: 380px;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    background: var(--nvx-gray-100);
}

/* En pantalla baja el diálogo ya trae su propio scroll: el marco se encoge antes
   que empujar los botones fuera de la vista. */
@media (max-height: 760px) {
    .dlgvp__marco[b-kxm4hw2no5] {
        height: 56vh;
        min-height: 300px;
    }
}

.dlgvp__nota[b-kxm4hw2no5] {
    margin: 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}
/* /Components/Pages/Maestros/Empresas.razor.rz.scp.css */
.pagina[b-wamivl5mt9] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.emp__nombre[b-wamivl5mt9] { font-weight: 600; }

.pagina__nota[b-wamivl5mt9] {
    margin: 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-400);
}
/* /Components/Pages/Maestros/EtiquetasMinimas.razor.rz.scp.css */
.pagina[b-kahhk6cr5a] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eti__rejilla[b-kahhk6cr5a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

.eti__acciones[b-kahhk6cr5a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-lg);
}

.pagina[b-kahhk6cr5a]  .eti__fila { cursor: pointer; }

.pagina[b-kahhk6cr5a]  .eti__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Maestros/EtiquetasPorSubpartida.razor.rz.scp.css */
.pagina[b-eyuhsp1d43] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.reg__rejilla[b-eyuhsp1d43] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

.reg__ancho3[b-eyuhsp1d43] { grid-column: span 3; }

@media (max-width: 900px) {
    .reg__ancho3[b-eyuhsp1d43] { grid-column: span 1; }
}

.reg__casillas[b-eyuhsp1d43] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--nvx-space-md);
}

.reg__acciones[b-eyuhsp1d43] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-lg);
}

.reg__pie[b-eyuhsp1d43] {
    margin: var(--nvx-space-md) 0 0;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

.pagina[b-eyuhsp1d43]  .reg__fila { cursor: pointer; }

.pagina[b-eyuhsp1d43]  .reg__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Maestros/GastosNaviera.razor.rz.scp.css */
.gas[b-251wh6o35s] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    padding-top: var(--nvx-space-md);
}

/* Once campos: se aprietan en una rejilla que se parte sola en vez de una fila
   de la que hay que salir con scroll horizontal, como en el formulario viejo. */
.gas__campos[b-251wh6o35s] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

/* El concepto y el comentario son los largos. */
.gas__ancho[b-251wh6o35s] { grid-column: span 2; }

@media (max-width: 760px) {
    .gas__ancho[b-251wh6o35s] { grid-column: span 1; }
}

.gas__acciones[b-251wh6o35s] {
    display: flex;
    gap: var(--nvx-space-sm);
}

.gas__th-acc[b-251wh6o35s] { width: 88px; }

.gas__acc[b-251wh6o35s] {
    white-space: nowrap;
    text-align: right;
}

/* El renglón que está arriba en el formulario. */
.gas[b-251wh6o35s]  .gas__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Maestros/IngresosPropios.razor.rz.scp.css */
.pagina[b-z0icpz7gu9] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ing__rejilla[b-z0icpz7gu9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

/* La descripción es el campo largo. */
.ing__ancho[b-z0icpz7gu9] { grid-column: span 2; }

@media (max-width: 760px) {
    .ing__ancho[b-z0icpz7gu9] { grid-column: span 1; }
}

.ing__casillas[b-z0icpz7gu9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ing__seccion[b-z0icpz7gu9] {
    margin-top: var(--nvx-space-lg);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--nvx-border);
    color: var(--nvx-800);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ing__sub[b-z0icpz7gu9] {
    margin-top: var(--nvx-space-md);
    margin-bottom: 2px;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
}

/* Los nueve tipos. Se escoge uno: allá también, aunque después se guarde
   repartido en nueve columnas. */
.ing__tipos[b-z0icpz7gu9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2px var(--nvx-space-md);
    margin-top: var(--nvx-space-sm);
}

.ing__acciones[b-z0icpz7gu9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-lg);
}

/* El ítem de causaciones emparejado. Sólo se muestra: lo escribe otro proceso. */
.ing__vinculo[b-z0icpz7gu9] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

.ing__vinculo b[b-z0icpz7gu9] { color: var(--nvx-800); }

/* Se abre el ingreso pinchando su fila. */
.pagina[b-z0icpz7gu9]  .ing__fila { cursor: pointer; }

.pagina[b-z0icpz7gu9]  .ing__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Maestros/ItemsCausaciones.razor.rz.scp.css */
.pagina[b-hr31j6gaiq] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Los campos del ítem, en una rejilla que se parte sola. El formulario
   anterior los reparte en cinco tablas anidadas de ancho fijo. */
.itm__rejilla[b-hr31j6gaiq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

/* La descripción y el ítem asociado son los campos largos. */
.itm__ancho[b-hr31j6gaiq] { grid-column: span 2; }

@media (max-width: 760px) {
    .itm__ancho[b-hr31j6gaiq] { grid-column: span 1; }
}

.itm__casillas[b-hr31j6gaiq] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Encabezado de bloque: «Cuenta de», «Parámetros contables». */
.itm__seccion[b-hr31j6gaiq] {
    margin-top: var(--nvx-space-lg);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--nvx-border);
    color: var(--nvx-800);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Subtítulo dentro de un bloque: «Clientes nacionales», «Retención». */
.itm__sub[b-hr31j6gaiq] {
    margin-top: var(--nvx-space-md);
    margin-bottom: 2px;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
}

/* Las cinco casillas de «Cuenta de», en línea. */
.itm__aplica[b-hr31j6gaiq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-xs) var(--nvx-space-lg);
    margin-top: var(--nvx-space-sm);
}

.itm__acciones[b-hr31j6gaiq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-lg);
}

/* Los dos consecutivos, en la esquina de la tarjeta. Allá van en rojo y en
   negrita sobre el formulario, y salen siempre vacíos. */
.itm__consec[b-hr31j6gaiq] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

.itm__consec b[b-hr31j6gaiq] {
    color: var(--nvx-800);
    font-family: var(--nvx-font-mono);
}

/* Se abre el ítem pinchando su fila. */
.pagina[b-hr31j6gaiq]  .itm__fila { cursor: pointer; }

.pagina[b-hr31j6gaiq]  .itm__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Maestros/MaestroCatalogo.razor.rz.scp.css */
.pagina[b-8vo3rxjtfq] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Los campos del catálogo: entre dos y cuatro cajas cortas, que caben en una
   fila y se parten solas al encoger. */
.cat__campos[b-8vo3rxjtfq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

/* Una casilla no lleva la caja de un campo: se centra con las que sí. */
.cat__casilla[b-8vo3rxjtfq] {
    display: flex;
    align-items: center;
    min-height: 42px;
}

.cat__acciones[b-8vo3rxjtfq] {
    display: flex;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
}

.cat__th-acc[b-8vo3rxjtfq] { width: 88px; }

.cat__acc[b-8vo3rxjtfq] {
    white-space: nowrap;
    text-align: right;
}

/* La fila que se está editando, para no perderla de vista al bajar por la
   rejilla. Llega por RenderFragment: sin ::deep no la alcanzaría. */
.pagina[b-8vo3rxjtfq]  .cat__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Maestros/MenuPorEmpresa.razor.rz.scp.css */
.pagina[b-vvf58hz6td] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.men__empresa[b-vvf58hz6td] {
    max-width: 420px;
}

.men__aviso[b-vvf58hz6td] {
    margin: var(--nvx-space-sm) 0 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    line-height: 1.5;
}

.men__vacio[b-vvf58hz6td] {
    margin: var(--nvx-space-lg) 0;
    text-align: center;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

/* ── Los dos modos ──────────────────────────────────────────────────────────
   Esconder es de UNA empresa; ordenar es de todas. Se eligen arriba del todo y
   no dentro de la lista, para que no se confunda el alcance de lo que se toca. */
.men__modos[b-vvf58hz6td] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    flex-wrap: wrap;
}

/* ── Buscador y plegado ─────────────────────────────────────────────────── */
.men__barra[b-vvf58hz6td] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    flex-wrap: wrap;
}

/* El campo es de MudBlazor: sin ::deep no lo alcanza el CSS aislado, y sin
   min-width se estira hasta empujar a los botones fuera de la fila. */
.men__barra[b-vvf58hz6td]  .men__buscador {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 360px;
}

/* ── El árbol ───────────────────────────────────────────────────────────────
   Una fila por entrada, con la sangría diciendo de qué sección cuelga. Es un
   árbol y no una lista plana a propósito: con las 116 entradas abiertas de una
   vez no se encuentra nada, que era la queja. */
.men__lista[b-vvf58hz6td] {
    margin-top: var(--nvx-space-md);
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--nvx-gray-100);
}

.men__fila[b-vvf58hz6td] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    padding: 2px var(--nvx-space-sm);
    border-bottom: 1px solid var(--nvx-gray-100);
    min-height: 38px;
}

.men__fila:hover[b-vvf58hz6td] {
    background: var(--nvx-50);
}

.men__fila--n1[b-vvf58hz6td] { padding-left: 28px; }
.men__fila--n2[b-vvf58hz6td] { padding-left: 52px; }

/* Una sección se lee como cabecera de lo que lleva debajo. */
.men__fila--grupo[b-vvf58hz6td] {
    background: var(--nvx-gray-50);
}

.men__fila--grupo .men__rotulo[b-vvf58hz6td] {
    font-weight: 600;
    color: var(--nvx-800);
}

/* El hueco del chevron en las filas que no lo tienen, para que las columnas de
   todas queden a la misma altura. */
.men__sangria[b-vvf58hz6td] {
    flex: 0 0 30px;
}

.men__icono[b-vvf58hz6td] {
    flex: 0 0 auto;
    color: var(--nvx-gray-400);
}

.men__fila--grupo .men__icono[b-vvf58hz6td] {
    color: var(--nvx-600);
}

/* Ni el rótulo ni el inglés crecen: con columnas de ancho fijo, lo que sobra se
   junta al final de la fila y las tres columnas de texto se leen en línea. */
.men__rotulo[b-vvf58hz6td] {
    flex: 0 1 300px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El inglés al lado, para revisar la traducción sin cambiar de pantalla. */
.men__ingles[b-vvf58hz6td] {
    flex: 0 1 200px;
    min-width: 0;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No encoge: si la chapa del rol le robara ancho, la columna de claves dejaría
   de estar en línea justo en las filas que la llevan. */
.men__clave[b-vvf58hz6td] {
    flex: 0 0 240px;
    min-width: 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Qué rol hace falta para verla, propio o heredado de su sección: mover una
   entrada a Configuración la restringe, y eso hay que verlo antes de moverla. */
.men__rol[b-vvf58hz6td] {
    flex: 0 0 auto;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-info-text);
    background: var(--nvx-info-bg);
    border: 1px solid var(--nvx-info-bd);
    border-radius: var(--nvx-r-sm);
    padding: 1px 6px;
    white-space: nowrap;
}

.men__tapada[b-vvf58hz6td] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-warning-text);
    background: var(--nvx-warning-bg);
    border: 1px solid var(--nvx-warning-bd);
    border-radius: var(--nvx-r-sm);
    padding: 1px 6px;
    white-space: nowrap;
}

/* Cuántas entradas de la sección se ven. Sin esto hay que desplegarla para
   saber si alguien le apagó algo. */
.men__conteo[b-vvf58hz6td] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    font-family: var(--nvx-font-mono);
    white-space: nowrap;
}

/* Ancho fijo para que los interruptores —y las flechas— queden en columna y no
   bailando según lo largo que sea el rótulo. */
.men__controles[b-vvf58hz6td] {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 190px;
}

/* MudBlazor le deja margen propio a sus controles; dentro de una fila de 38px
   eso la desalinea. */
.men__controles[b-vvf58hz6td]  .mud-switch {
    margin: 0;
}

.men__controles[b-vvf58hz6td]  .mud-button-root {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .men__ingles[b-vvf58hz6td] {
        display: none;
    }
}

@media (max-width: 900px) {
    .men__clave[b-vvf58hz6td],
    .men__conteo[b-vvf58hz6td] {
        display: none;
    }

    .men__controles[b-vvf58hz6td] {
        min-width: 0;
    }
}
/* /Components/Pages/Maestros/MinimasDeSubpartida.razor.rz.scp.css */
.pagina[b-ah85ked7mz] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.min__desc[b-ah85ked7mz] {
    margin: 0;
    color: var(--nvx-gray-800);
}

.min__seccion[b-ah85ked7mz] {
    margin-top: var(--nvx-space-lg);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--nvx-border);
    color: var(--nvx-800);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.min__aviso[b-ah85ked7mz] {
    margin: var(--nvx-space-sm) 0 0;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

.min__marcas[b-ah85ked7mz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-xs) var(--nvx-space-lg);
    margin-top: var(--nvx-space-sm);
}

.min__acciones[b-ah85ked7mz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
}

.min__acc[b-ah85ked7mz] { white-space: nowrap; }
/* /Components/Pages/Maestros/Navieras.razor.rz.scp.css */
.pagina[b-4bd9gvekip] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Los siete campos de la naviera, en una fila que se parte sola. */
.nav__campos[b-4bd9gvekip] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

/* El nombre es el campo largo. */
.nav__ancho[b-4bd9gvekip] { grid-column: span 2; }

@media (max-width: 760px) {
    .nav__ancho[b-4bd9gvekip] { grid-column: span 1; }
}

.nav__casillas[b-4bd9gvekip] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nav__acciones[b-4bd9gvekip] {
    display: flex;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
}

/* Se escoge la naviera pinchando la fila, que es lo que trae sus gastos. */
.pagina[b-4bd9gvekip]  .nav__fila { cursor: pointer; }

.pagina[b-4bd9gvekip]  .nav__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}

.nav__tabs[b-4bd9gvekip]  .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--nvx-border);
}
/* /Components/Pages/Maestros/NotificacionesCorreo.razor.rz.scp.css */
.pagina[b-4h92447sbs] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pagina__nota[b-4h92447sbs] {
    margin: 4px 2px 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.6;
}

/* La clave técnica del aviso, junto al botón de agregar. Se muestra porque es
   lo que hay que buscar en el código cuando algo no llega. */
.nc__clave[b-4h92447sbs] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    margin-right: var(--nvx-space-sm);
}

/* Qué hace el aviso, encima de su tabla. La tabla va a ras del borde
   (SinPadding), así que el margen lo pone este párrafo. */
.nc__detalle[b-4h92447sbs] {
    margin: 0;
    padding: 10px var(--nvx-space-md);
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
    line-height: 1.6;
    background: var(--nvx-gray-50);
    border-bottom: var(--nvx-border);
}

/* Todo lo de abajo se escribe en este .razor —dentro de los fragmentos Head y
   Row que recibe NvxTable—, así que lleva el atributo de ámbito y no hace falta
   ::deep. Sí haría falta al revés: si NvxTable quisiera estilizar lo que le
   pasa la página. */
.nc__correo[b-4h92447sbs],
.nc__rol[b-4h92447sbs] {
    font-size: var(--nvx-text-body);
}

.nc__rol[b-4h92447sbs] {
    font-weight: 600;
    color: var(--nvx-800);
}

.nc__icono-rol[b-4h92447sbs] {
    vertical-align: -3px;
    margin-right: 5px;
    color: var(--nvx-500);
}

/* La observación explica para qué está la fila. Va debajo, en pequeño: se lee
   cuando hace falta y no estorba cuando no. */
.nc__obs[b-4h92447sbs] {
    display: block;
    margin-top: 2px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
    line-height: 1.5;
}

.nc__acciones[b-4h92447sbs] {
    white-space: nowrap;
    text-align: right;
}

/* Un destinatario apagado sigue a la vista, pero atenuado: la fila existe,
   sólo que hoy no recibe. */
.nc__fila--apagada .nc__correo[b-4h92447sbs],
.nc__fila--apagada .nc__rol[b-4h92447sbs] {
    color: var(--nvx-gray-400);
    text-decoration: line-through;
}

.nc__col-tipo[b-4h92447sbs] { width: 110px; }
.nc__col-emp[b-4h92447sbs]  { width: 200px; }
.nc__col-est[b-4h92447sbs]  { width: 100px; }
.nc__col-acc[b-4h92447sbs]  { width: 96px; }

@media (max-width: 900px) {
    .nc__col-emp[b-4h92447sbs],
    .nc__col-tipo[b-4h92447sbs],
    .nc__col-est[b-4h92447sbs] { width: auto; }
}
/* /Components/Pages/Maestros/NumeracionEmpresa.razor.rz.scp.css */
.num[b-901b3qnjrv] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-sm);
}

.num__doc[b-901b3qnjrv] {
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    background: var(--nvx-white);
}

.num__cabeza[b-901b3qnjrv] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nvx-space-sm);
    margin-bottom: var(--nvx-space-xs);
}

.num__nombre[b-901b3qnjrv] {
    font-size: var(--nvx-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--nvx-tracking-label);
    color: var(--nvx-800);
}

.num__proximo[b-901b3qnjrv] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

/* Los campos de MudBlazor necesitan min-width: 0 o la fila no se encoge. */
.num__campos[b-901b3qnjrv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--nvx-space-sm);
}

.num__campos[b-901b3qnjrv]  .mud-input-control {
    min-width: 0;
    flex: 1 1 140px;
    max-width: 200px;
}

.num__campos[b-901b3qnjrv]  .mud-button-root {
    margin-top: 6px;
}

.num__nota[b-901b3qnjrv] {
    margin: var(--nvx-space-xs) 0 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}
/* /Components/Pages/Maestros/PlantillasDocumento.razor.rz.scp.css */
.pagina[b-gdleqmk57q] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.plt__empresa[b-gdleqmk57q] {
    font-weight: 600;
}

/* Los dos botones de la fila, uno al lado del otro y sin que la columna crezca. */
.plt__acciones[b-gdleqmk57q] {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.pagina__nota[b-gdleqmk57q] {
    margin: 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-400);
}

.pagina__nota code[b-gdleqmk57q] {
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-xs);
    background: var(--nvx-gray-50);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-sm);
    padding: 1px 5px;
}

/* Un guion discreto donde el dato no aplica */
.plt__vacio[b-gdleqmk57q] { color: var(--nvx-gray-400); }
/* /Components/Pages/Maestros/Productos.razor.rz.scp.css */
.pagina[b-xxa0iw115v] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pro__rejilla[b-xxa0iw115v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

.pro__ancho2[b-xxa0iw115v] { grid-column: span 2; }

@media (max-width: 760px) {
    .pro__ancho2[b-xxa0iw115v] { grid-column: span 1; }
}

.pro__casillas[b-xxa0iw115v] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pro__seccion[b-xxa0iw115v] {
    margin-top: var(--nvx-space-lg);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--nvx-border);
    color: var(--nvx-800);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pro__aviso[b-xxa0iw115v] {
    margin: var(--nvx-space-sm) 0;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

.pro__acciones[b-xxa0iw115v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-lg);
}

/* La celda donde se escribe el valor de una descripción mínima. */
.pagina[b-xxa0iw115v]  .pro__valor { min-width: 260px; }

.pro__acc[b-xxa0iw115v] { white-space: nowrap; }

.pagina[b-xxa0iw115v]  .pro__fila { cursor: pointer; }

.pagina[b-xxa0iw115v]  .pro__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Maestros/ProveedoresExterior.razor.rz.scp.css */
.pagina[b-pq9tr02hgo] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.prv__rejilla[b-pq9tr02hgo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

.prv__ancho2[b-pq9tr02hgo] { grid-column: span 2; }

@media (max-width: 760px) {
    .prv__ancho2[b-pq9tr02hgo] { grid-column: span 1; }
}

.prv__casillas[b-pq9tr02hgo] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.prv__acciones[b-pq9tr02hgo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-lg);
}

.pagina[b-pq9tr02hgo]  .prv__fila { cursor: pointer; }

.pagina[b-pq9tr02hgo]  .prv__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Maestros/Subpartidas.razor.rz.scp.css */
.pagina[b-bcaoblxgw8] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sub__rejilla[b-bcaoblxgw8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

.sub__ancho3[b-bcaoblxgw8] { grid-column: span 3; }

@media (max-width: 900px) {
    .sub__ancho3[b-bcaoblxgw8] { grid-column: span 1; }
}

.sub__casillas[b-bcaoblxgw8] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sub__acciones[b-bcaoblxgw8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-lg);
}

/* Se abre la subpartida pinchando su fila. */
.pagina[b-bcaoblxgw8]  .sub__fila { cursor: pointer; }

.pagina[b-bcaoblxgw8]  .sub__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Maestros/Terceros.razor.rz.scp.css */
.pagina[b-2p9oqrg56o] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Se abre el tercero pinchando la fila. */
.pagina[b-2p9oqrg56o]  .ter__fila { cursor: pointer; }

.pagina[b-2p9oqrg56o]  .ter__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}

/* La barra con el tercero abierto y sus botones. */
.ter__barra[b-2p9oqrg56o] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    background: var(--nvx-gray-50);
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.ter__abierto[b-2p9oqrg56o] {
    display: flex;
    align-items: baseline;
    gap: var(--nvx-space-sm);
    font-size: var(--nvx-text-sm);
}

.ter__tabs[b-2p9oqrg56o]  .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--nvx-border);
}

.ter__panel[b-2p9oqrg56o] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    padding-top: var(--nvx-space-md);
}

/* Rejilla de doce columnas: los campos declaran cuántas ocupan. */
.ter__campos[b-2p9oqrg56o] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

.ter__campos > .sp1[b-2p9oqrg56o]  { grid-column: span 1; }
.ter__campos > .sp2[b-2p9oqrg56o]  { grid-column: span 2; }
.ter__campos > .sp3[b-2p9oqrg56o]  { grid-column: span 3; }
.ter__campos > .sp4[b-2p9oqrg56o]  { grid-column: span 4; }
.ter__campos > .sp5[b-2p9oqrg56o]  { grid-column: span 5; }
.ter__campos > .sp6[b-2p9oqrg56o]  { grid-column: span 6; }
.ter__campos > .sp12[b-2p9oqrg56o] { grid-column: span 12; }

@media (max-width: 1100px) {
    .ter__campos > .sp1[b-2p9oqrg56o],
    .ter__campos > .sp2[b-2p9oqrg56o],
    .ter__campos > .sp3[b-2p9oqrg56o] { grid-column: span 4; }
    .ter__campos > .sp4[b-2p9oqrg56o],
    .ter__campos > .sp5[b-2p9oqrg56o],
    .ter__campos > .sp6[b-2p9oqrg56o] { grid-column: span 6; }
}

@media (max-width: 640px) {
    .ter__campos > *[b-2p9oqrg56o] { grid-column: span 12 !important; }
}

.ter__aparte[b-2p9oqrg56o] { margin-top: var(--nvx-space-md); }

.ter__casilla[b-2p9oqrg56o] {
    display: flex;
    align-items: center;
}

/* La descripción de la actividad económica, que no se digita. */
.ter__lectura[b-2p9oqrg56o] {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--nvx-space-sm);
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

/* Los ocho parámetros tributarios. */
.ter__tributos[b-2p9oqrg56o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2px var(--nvx-space-md);
}

/* El formulario que va encima de cada rejilla hija. */
.ter__hijo[b-2p9oqrg56o] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    padding: var(--nvx-space-md);
    border-bottom: 1px solid var(--nvx-border);
}

.ter__acciones[b-2p9oqrg56o] {
    display: flex;
    gap: var(--nvx-space-sm);
}

.ter__th-acc[b-2p9oqrg56o] { width: 88px; }

.ter__acc[b-2p9oqrg56o] {
    white-space: nowrap;
    text-align: right;
}

/* ── Cumplimiento ────────────────────────────────────────────────────── */

.ter__cumple[b-2p9oqrg56o] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-md);
    padding: var(--nvx-space-md);
    border-bottom: 1px solid var(--nvx-border);
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

.ter__barrita[b-2p9oqrg56o] {
    flex: 1;
    min-width: 120px;
}

.ter__cumple b[b-2p9oqrg56o] {
    color: var(--nvx-800);
    font-size: var(--nvx-text-body);
}

.ter__docs[b-2p9oqrg56o] {
    width: 100%;
    border-collapse: collapse;
}

.ter__docs th[b-2p9oqrg56o] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--nvx-800);
    color: #fff;
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    padding: 8px var(--nvx-space-sm);
}

.ter__docs td[b-2p9oqrg56o] {
    padding: 2px var(--nvx-space-sm);
    border-bottom: 1px solid var(--nvx-gray-100);
    vertical-align: middle;
}

.ter__docs tbody tr:hover td[b-2p9oqrg56o] { background: var(--nvx-gray-50); }

.ter__doc[b-2p9oqrg56o] {
    min-width: 260px;
    font-size: var(--nvx-text-sm);
}

.ter__centro[b-2p9oqrg56o] { text-align: center; }

.ter__vacio[b-2p9oqrg56o] { color: var(--nvx-gray-400); }

.ter__campo-doc[b-2p9oqrg56o] { min-width: 150px; }
/* /Components/Pages/Maestros/Usuarios.razor.rz.scp.css */
.pagina[b-fh7596hcuv] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── El formulario ──────────────────────────────────────────────────────────
   Tres columnas fijas, no auto-fit: son once campos agrupados de tres en tres
   y así cada grupo llena su fila. Con auto-fit quedaban seis columnas flacas
   en una pantalla ancha y el formulario se leía como una lista de cosas
   sueltas. */
.usr__rejilla[b-fh7596hcuv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--nvx-space-md);
    margin-top: var(--nvx-space-sm);
}

/* ── LA REGLA QUE NO PUEDE FALTAR ───────────────────────────────────────────
   Sin esto la rejilla se ve de UNA columna, que es como quedó la primera vez.
   Un campo de MudBlazor trae su ancho mínimo intrínseco —lo fija el texto del
   Label y del Placeholder—, y en una rejilla ese mínimo manda sobre la columna:
   cada campo pide más de lo que cabe y las columnas se apilan.

   Va con ::deep porque los campos son componentes HIJOS y el CSS aislado no los
   alcanza. Es la misma pareja de reglas que trae NvxFilterBar, que es la rejilla
   que funciona en las demás pantallas. */
.usr__rejilla[b-fh7596hcuv]  > * { min-width: 0; }
.usr__rejilla[b-fh7596hcuv]  .mud-input-control { margin-top: 0; }

/* Rótulo de grupo: divide los once campos en «con qué entra», «quién es» y
   «dónde trabaja», que es el orden en que se llena. */
.usr__grupo[b-fh7596hcuv] {
    margin-top: var(--nvx-space-lg);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--nvx-gray-100);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    color: var(--nvx-800);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* El primero no necesita separarse del borde de la tarjeta. */
.usr__grupo:first-child[b-fh7596hcuv] {
    margin-top: 0;
}

.usr__ayuda[b-fh7596hcuv] {
    margin: var(--nvx-space-sm) 0 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}

.usr__error[b-fh7596hcuv] {
    margin: 4px 0 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-danger-text);
}

/* Los radios del perfil, en línea y con aire. */
.usr__perfil[b-fh7596hcuv] {
    margin-top: var(--nvx-space-sm);
}

.usr__perfil[b-fh7596hcuv]  .mud-input-control-boolean-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-md);
}

.usr__idioma-elige[b-fh7596hcuv] {
    max-width: 300px;
    margin-top: var(--nvx-space-md);
}

.usr__marcas[b-fh7596hcuv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvx-space-lg);
    margin-top: var(--nvx-space-sm);
}

/* El combo y el botón de agregar, en una línea que se parte en pantalla angosta. */
.usr__empresa-agregar[b-fh7596hcuv] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    margin: var(--nvx-space-sm) 0 var(--nvx-space-md);
}

.usr__empresa-agregar > :first-child[b-fh7596hcuv] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
}

/* La empresa que decide el idioma, destacada sin gritar. */
.usr__fila--manda[b-fh7596hcuv] {
    background: var(--nvx-50);
}

.usr__th-manda[b-fh7596hcuv] {
    width: 64px;
    text-align: center;
}

/* La frase que dice, sin que haya que deducirlo, en qué idioma va a ver la
   aplicación este usuario. */
.usr__idioma[b-fh7596hcuv] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--nvx-space-md) 0 0;
    padding: 8px 12px;
    background: var(--nvx-50);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-sm);
    font-size: var(--nvx-text-sm);
    color: var(--nvx-800);
}

.usr__acciones[b-fh7596hcuv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-lg);
    padding-top: var(--nvx-space-md);
    border-top: 1px solid var(--nvx-gray-100);
}

/* ── El listado ─────────────────────────────────────────────────────────── */

/* La fila del usuario que está abierto en el formulario, para no perderla de
   vista al desplazarse por el listado. */
.usr__fila--activa[b-fh7596hcuv] {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-500);
}

.usr__nombre[b-fh7596hcuv] {
    font-weight: 600;
    margin-right: 6px;
}

.usr__rango[b-fh7596hcuv] {
    color: var(--nvx-gray-600);
}

.usr__acc[b-fh7596hcuv] {
    text-align: right;
    white-space: nowrap;
}

.usr__pager[b-fh7596hcuv] {
    display: flex;
    justify-content: center;
    padding: var(--nvx-space-sm) 0;
}

/* Dos columnas en tableta, una en teléfono: tres campos de 230 px no caben por
   debajo de 900. */
@media (max-width: 900px) {
    .usr__rejilla[b-fh7596hcuv] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .usr__rejilla[b-fh7596hcuv] { grid-template-columns: 1fr; }

    .usr__empresa-agregar[b-fh7596hcuv] {
        flex-direction: column;
        align-items: stretch;
    }

    .usr__empresa-agregar > :first-child[b-fh7596hcuv] { max-width: none; }
}
/* /Components/Pages/Reportes/AlertaCoordinador.razor.rz.scp.css */
/* Los colores de esta pantalla salen del tema, no de hex escritos aqui. Se
   conservan los nombres --al-* porque las reglas de abajo ya los usan; lo que
   cambia es de donde sacan el valor.

   Van sobre .alerta y no sobre :root: un componente no define tokens globales,
   los hereda. */
.alerta[b-fg3dzehsbu] {
    --al-bg:          var(--nvx-50);
    --al-surface:     var(--nvx-white);
    --al-surface2:    var(--nvx-100);
    --al-border:      var(--nvx-200);
    --al-border-dark: var(--nvx-300);
    --al-teal:        var(--nvx-500);
    --al-teal-dark:   var(--nvx-700);
    --al-teal-deep:   var(--nvx-800);
    --al-teal-light:  var(--nvx-100);
    --al-text:        var(--nvx-gray-800);
    --al-text-mid:    var(--nvx-gray-600);
    --al-muted:       var(--nvx-gray-400);
    --al-green:       var(--nvx-success);
    --al-red:         var(--nvx-danger);
    --al-amber:       var(--nvx-warning);
    --al-info:        var(--nvx-info);
    --al-purple:      var(--nvx-accent);
    --al-ok-bg:       var(--nvx-success-bg);
    --al-ok-text:     var(--nvx-success-text);
    --al-ok-border:   var(--nvx-success-bd);
    --al-err-bg:      var(--nvx-danger-bg);
    --al-err-text:    var(--nvx-danger-text);
    --al-err-border:  var(--nvx-danger-bd);

    background: var(--al-bg);
}-success-text);
    --al-ok-border:   var(--nvx-success-bd);
    --al-err-bg:      var(--nvx-danger-bg);
    --al-err-text:    var(--nvx-danger-text);
    --al-err-border:  var(--nvx-danger-bd);

    background: var(--al-bg);[b-fg3dzehsbu]
}

/* ── TITLE BAND ─────────────────────────────────────────────────────── */
.al-titleband[b-fg3dzehsbu] {
    background: var(--al-teal);
    border-bottom: 3px solid var(--al-teal-dark);
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.al-titleband h1[b-fg3dzehsbu] {
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 2px;
    color: var(--al-surface);
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

/* ── TABS ───────────────────────────────────────────────────────────── */
.al-tabs[b-fg3dzehsbu] {
    background: var(--al-surface);
    border-bottom: 2px solid var(--al-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--al-teal) 8%, transparent);
}
.al-tab-btn[b-fg3dzehsbu] {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 14px 22px;
    border: none;
    background: transparent;
    color: var(--al-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.al-tab-btn:hover[b-fg3dzehsbu] { color: var(--al-teal-dark); }
.al-tab-active-dash[b-fg3dzehsbu]  { color: var(--al-teal-dark) !important; border-bottom: 3px solid var(--al-teal) !important; }
.al-tab-active-det[b-fg3dzehsbu]   { color: var(--al-teal-dark) !important; border-bottom: 3px solid var(--al-teal-dark) !important; }

/* ── MAIN WRAPPER ───────────────────────────────────────────────────── */
.al-main[b-fg3dzehsbu]        { padding: 20px 24px; max-width: 2200px; margin: 0 auto; background: var(--al-bg); min-height: 100vh; }
.al-main-charts[b-fg3dzehsbu] { padding: 20px 24px; max-width: 1400px; margin: 0 auto; background: var(--al-bg); min-height: 100vh; }

/* ── KPI CARDS ──────────────────────────────────────────────────────── */
.al-kpi-grid[b-fg3dzehsbu] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.al-kpi[b-fg3dzehsbu] {
    background: var(--al-surface);
    border-radius: 14px;
    border: 1.5px solid var(--al-border);
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.al-kpi:hover[b-fg3dzehsbu]          { transform: translateY(-3px); box-shadow: 0 8px 24px color-mix(in srgb, var(--al-teal) 15%, transparent); }
.al-kpi.al-kpi-active[b-fg3dzehsbu]  { box-shadow: 0 0 0 2.5px var(--al-teal); }
.al-kpi[b-fg3dzehsbu]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 14px 14px 0 0;
}
.al-kpi-red[b-fg3dzehsbu]::before    { background: var(--al-red); }
.al-kpi-yellow[b-fg3dzehsbu]::before { background: var(--al-amber); }
.al-kpi-green[b-fg3dzehsbu]::before  { background: var(--al-green); }
.al-kpi-purple[b-fg3dzehsbu]::before { background: var(--al-purple); }
.al-kpi-info[b-fg3dzehsbu]::before   { background: var(--al-info); }
.al-kpi-teal[b-fg3dzehsbu]::before   { background: var(--al-teal); }

.al-kpi-ico[b-fg3dzehsbu]   { font-size: 18px; margin-bottom: 6px; }
.al-kpi-val[b-fg3dzehsbu]   { font-weight: 800; font-size: 28px; color: var(--al-teal-deep); line-height: 1; }
.al-kpi-label[b-fg3dzehsbu] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--al-muted); margin-top: 4px; }
.al-kpi-sub[b-fg3dzehsbu]   { font-size: 10px; color: var(--al-text-mid); margin-top: 2px; }

/* ── CHARTS ─────────────────────────────────────────────────────────── */
.al-charts-grid[b-fg3dzehsbu] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
.al-charts-grid-full[b-fg3dzehsbu] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
.al-chart-card[b-fg3dzehsbu] {
    background: var(--al-surface);
    border-radius: 14px;
    border: 1.5px solid var(--al-border);
    padding: 18px 20px;
    overflow: hidden;
}
.al-chart-title[b-fg3dzehsbu]    { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--al-teal-dark); margin-bottom: 3px; }
.al-chart-subtitle[b-fg3dzehsbu] { font-size: 10.5px; color: var(--al-muted); margin-bottom: 14px; }
.al-chart-wrap[b-fg3dzehsbu]     { position: relative; }
.al-chart-wrap.h300[b-fg3dzehsbu] { height: 300px; }
.al-chart-wrap.h280[b-fg3dzehsbu] { height: 280px; }

/* ── LEYENDA ────────────────────────────────────────────────────────── */
.al-leyenda[b-fg3dzehsbu] {
    background: var(--al-surface);
    border-radius: 10px;
    border: 1.5px solid var(--al-border);
    padding: 10px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.al-ley-title[b-fg3dzehsbu] { font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--al-teal-dark); }
.al-ley-item[b-fg3dzehsbu]  { font-size: 11px; color: var(--al-text-mid); }
.al-ley-sep[b-fg3dzehsbu]   { width: 1px; height: 16px; background: var(--al-border); }
.al-ley-ok[b-fg3dzehsbu]    { background: var(--al-ok-bg); color: var(--al-ok-text); border: 1px solid var(--al-ok-border); border-radius: 5px; padding: 2px 7px; font-size: 10px; font-weight: 700; }
.al-ley-err[b-fg3dzehsbu]   { background: var(--al-err-bg); color: var(--al-err-text); border: 1px solid var(--al-err-border); border-radius: 5px; padding: 2px 7px; font-size: 10px; font-weight: 700; }

/* ── RESUMEN POR OPERATIVO ──────────────────────────────────────────── */
.al-resumen-card[b-fg3dzehsbu] { background: var(--al-surface); border-radius: 12px; border: 1.5px solid var(--al-border); margin-bottom: 14px; overflow: hidden; }
.al-resumen-top[b-fg3dzehsbu]  {
    background: var(--al-teal-deep);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.al-resumen-top span[b-fg3dzehsbu] { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--al-surface); }
.al-resumen-body[b-fg3dzehsbu] { padding: 14px 18px; }
.al-op-grid[b-fg3dzehsbu]      { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.al-op-card[b-fg3dzehsbu] {
    background: var(--al-bg);
    border-radius: 10px;
    border: 1.5px solid var(--al-border);
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all .15s;
}
.al-op-card:hover[b-fg3dzehsbu]        { border-color: var(--al-teal); background: var(--al-teal-light); }
.al-op-card.al-op-active[b-fg3dzehsbu] { border-color: var(--al-teal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--al-teal) 25%, transparent); }
.al-op-av[b-fg3dzehsbu] {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 10px; color: var(--al-surface); flex-shrink: 0;
}
.al-op-name[b-fg3dzehsbu] { font-size: 11px; font-weight: 700; color: var(--al-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-op-badges[b-fg3dzehsbu] { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.al-ob[b-fg3dzehsbu] { font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 10px; white-space: nowrap; }
.al-ob-r[b-fg3dzehsbu]  { background: color-mix(in srgb, var(--al-red) 12%, transparent);  color: var(--al-red); border: 1px solid color-mix(in srgb, var(--al-red) 25%, transparent); }
.al-ob-y[b-fg3dzehsbu]  { background: color-mix(in srgb, var(--al-amber) 10%, transparent);  color: var(--nvx-warning-text); border: 1px solid color-mix(in srgb, var(--al-amber) 25%, transparent); }
.al-ob-g[b-fg3dzehsbu]  { background: color-mix(in srgb, var(--al-green) 12%, transparent); color: var(--nvx-success-text); border: 1px solid color-mix(in srgb, var(--al-green) 25%, transparent); }
.al-ob-al[b-fg3dzehsbu] { background: color-mix(in srgb, var(--al-purple) 8%, transparent); color: var(--nvx-accent-text); border: 1px solid color-mix(in srgb, var(--al-purple) 20%, transparent); }

/* ── FILTERS ────────────────────────────────────────────────────────── */
.al-filter-card[b-fg3dzehsbu] {
    background: var(--al-surface);
    border-radius: 12px;
    border: 1.5px solid var(--al-border);
    padding: 14px 18px;
    margin-bottom: 14px;
}
.al-filter-title[b-fg3dzehsbu] { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--al-teal-dark); margin-bottom: 12px; }
.al-filters-row[b-fg3dzehsbu]  { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr auto auto; gap: 12px; align-items: end; }
.al-f-label[b-fg3dzehsbu]      { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--al-muted); margin-bottom: 5px; }
.al-f-input[b-fg3dzehsbu] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    background: var(--al-bg);
    border: 1.5px solid var(--al-border);
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--al-text);
    width: 100%;
    outline: none;
    transition: border .2s, box-shadow .2s;
    cursor: pointer;
}
.al-f-input:focus[b-fg3dzehsbu] { border-color: var(--al-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-teal) 12%, transparent); }
.al-btn-p[b-fg3dzehsbu] {
    background: var(--al-teal);
    border: none;
    border-radius: 8px;
    color: var(--al-surface);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 8px 16px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--al-teal) 30%, transparent);
    transition: all .2s;
}
.al-btn-p:hover[b-fg3dzehsbu] { transform: translateY(-1px); }
.al-btn-s[b-fg3dzehsbu] {
    background: transparent;
    border: 1.5px solid var(--al-border);
    border-radius: 8px;
    color: var(--al-muted);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
}
.al-btn-s:hover[b-fg3dzehsbu] { color: var(--al-red); border-color: var(--al-red); }

/* ── TABLE ──────────────────────────────────────────────────────────── */
.al-table-card[b-fg3dzehsbu] { background: var(--al-surface); border-radius: 12px; border: 1.5px solid var(--al-border); overflow: hidden; margin-top: 14px; }
.al-table-header[b-fg3dzehsbu] {
    background: var(--al-teal);
    padding: 11px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.al-table-title[b-fg3dzehsbu] { font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--al-surface); }
.al-table-count[b-fg3dzehsbu] { font-size: 11px; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.15); border-radius: 20px; padding: 3px 11px; }
.al-table-wrap[b-fg3dzehsbu]  { overflow-x: auto; }

/* Truco para que la barra de scroll horizontal quede arriba en vez de abajo:
   se voltea verticalmente el contenedor y la tabla, así el navegador dibuja
   la barra (que siempre pinta en el borde "inferior" del contenedor) en la
   parte superior visible, sin invertir el contenido. */
.al-scroll-top[b-fg3dzehsbu] { transform: scaleY(-1); }
.al-scroll-top table[b-fg3dzehsbu] { transform: scaleY(-1); }

.al-table[b-fg3dzehsbu] { width: 100%; border-collapse: collapse; font-size: 11px; }
.al-table thead tr.al-group-row th[b-fg3dzehsbu] {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 6px 10px 4px;
    text-align: center;
    color: var(--al-surface);
}
.al-th-base[b-fg3dzehsbu]  { background: var(--al-teal-deep); }
.al-th-alert[b-fg3dzehsbu] { background: var(--nvx-danger-text); }
.al-th-count[b-fg3dzehsbu] { background: var(--nvx-accent-text); }

.al-table thead tr.al-col-row th[b-fg3dzehsbu] {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--al-teal-dark);
    padding: 7px 10px;
    border-bottom: 2px solid var(--al-border-dark);
    white-space: nowrap;
    text-align: left;
    background: var(--al-surface2);
    cursor: pointer;
    user-select: none;
}
.al-table thead tr.al-col-row th:hover[b-fg3dzehsbu]  { color: var(--al-teal); }
.al-th-a[b-fg3dzehsbu]    { color: var(--nvx-danger-text) !important; background: var(--nvx-danger-bg) !important; }
.al-th-cnt[b-fg3dzehsbu]  { color: var(--nvx-accent-text) !important; background: var(--nvx-accent-bg) !important; }

.al-table td[b-fg3dzehsbu] {
    font-size: 11px;
    color: var(--al-text);
    padding: 8px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--al-border) 40%, transparent);
    vertical-align: middle;
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
}
.al-table tr:last-child td[b-fg3dzehsbu] { border-bottom: none; }
.al-row-red    td[b-fg3dzehsbu] { background: color-mix(in srgb, var(--al-red) 3.5%, transparent); }
.al-row-red:hover td[b-fg3dzehsbu] { background: color-mix(in srgb, var(--al-red) 8%, transparent); }
.al-row-yellow    td[b-fg3dzehsbu] { background: color-mix(in srgb, var(--al-amber) 2.5%, transparent); }
.al-row-yellow:hover td[b-fg3dzehsbu] { background: color-mix(in srgb, var(--al-amber) 7.0%, transparent); }
.al-row-green    td[b-fg3dzehsbu] { background: color-mix(in srgb, var(--al-green) 3%, transparent); }
.al-row-green:hover td[b-fg3dzehsbu] { background: color-mix(in srgb, var(--al-green) 7.0%, transparent); }

.al-cell-ok[b-fg3dzehsbu]  { background: var(--al-ok-bg) !important; color: var(--al-ok-text); font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-align: center; border-left: 2px solid var(--al-ok-border); }
.al-cell-err[b-fg3dzehsbu] { background: var(--al-err-bg) !important; color: var(--al-err-text); font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-align: center; border-left: 2px solid var(--al-err-border); }

.al-empty-row td[b-fg3dzehsbu] { text-align: center; padding: 28px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--al-muted); }

/* ── BADGES ─────────────────────────────────────────────────────────── */
.al-badge[b-fg3dzehsbu]      { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 9.5px; letter-spacing: .4px; padding: 3px 9px; border-radius: 20px; display: inline-block; white-space: nowrap; }
.al-b-fact[b-fg3dzehsbu]     { background: color-mix(in srgb, var(--al-amber) 10%, transparent); color: var(--nvx-warning-text); border: 1px solid color-mix(in srgb, var(--al-amber) 28.0%, transparent); }
.al-b-tram[b-fg3dzehsbu]     { background: color-mix(in srgb, var(--al-info) 10%, transparent); color: var(--nvx-info-text); border: 1px solid color-mix(in srgb, var(--al-info) 28.0%, transparent); }
.al-b-cerrar[b-fg3dzehsbu]   { background: color-mix(in srgb, var(--al-green) 12%, transparent); color: var(--nvx-success-text); border: 1px solid color-mix(in srgb, var(--al-green) 30%, transparent); }
.al-b-alerta[b-fg3dzehsbu]   { background: color-mix(in srgb, var(--al-red) 10%, transparent); color: var(--al-red); border: 1px solid color-mix(in srgb, var(--al-red) 28.0%, transparent); }
.al-b-tipo[b-fg3dzehsbu]     { background: var(--al-surface2); color: var(--al-teal-dark); border: 1px solid var(--al-border-dark); font-size: 9px; }
.al-b-poliza[b-fg3dzehsbu]   { background: color-mix(in srgb, var(--al-purple) 8%, transparent); color: var(--nvx-accent-text); border: 1px solid color-mix(in srgb, var(--al-purple) 20%, transparent); font-size: 9px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }

/* ── OPERATIVO CELL ─────────────────────────────────────────────────── */
.al-av[b-fg3dzehsbu]     { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 8.5px; color: var(--al-surface); flex-shrink: 0; }
.al-op-cell[b-fg3dzehsbu] { display: flex; align-items: center; gap: 6px; }
.al-op-name[b-fg3dzehsbu] { font-family: 'Inter', sans-serif; font-size: 10.5px; color: var(--al-text-mid); }
/* D.O. sin customer asignado: el guión se atenúa para que no compita con los nombres. */
.al-op-name--vacio[b-fg3dzehsbu] { opacity: .45; }
.al-do-code[b-fg3dzehsbu] { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; color: var(--al-teal-dark); background: var(--al-surface2); border: 1px solid var(--al-border); border-radius: 5px; padding: 2px 7px; }
.al-sem-dot[b-fg3dzehsbu] { font-size: 14px; display: block; text-align: center; }
.al-act-text[b-fg3dzehsbu] { font-family: 'Inter', sans-serif; font-size: 10.5px; color: var(--al-text-mid); max-width: 170px; overflow: hidden; text-overflow: ellipsis; display: block; }
.al-eta-val[b-fg3dzehsbu]  { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--al-text-mid); }
.al-dias-c[b-fg3dzehsbu]   { text-align: center; font-weight: 500; }
.al-nd[b-fg3dzehsbu]       { color: var(--al-muted); font-size: 13px; }
.al-emp-tag[b-fg3dzehsbu]  { font-family: 'Inter', sans-serif; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: var(--al-surface2); color: var(--al-teal-dark); border: 1px solid var(--al-border); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.al-row-num[b-fg3dzehsbu]  { font-size: 10px; color: var(--al-muted); font-family: 'JetBrains Mono', monospace; }

/* ── BARRA PROGRESO ─────────────────────────────────────────────────── */
.al-prog-wrap[b-fg3dzehsbu]  { display: flex; align-items: center; gap: 6px; min-width: 90px; }
.al-prog-bar[b-fg3dzehsbu]   { flex: 1; height: 7px; background: rgba(0,0,0,0.07); border-radius: 4px; overflow: hidden; }
.al-prog-fill[b-fg3dzehsbu]  { height: 100%; border-radius: 4px; }
.al-p0[b-fg3dzehsbu] { background: var(--al-green); width: 0%; }
.al-p1[b-fg3dzehsbu] { background: var(--al-green); width: 20%; }
.al-p2[b-fg3dzehsbu] { background: var(--al-green); width: 40%; }
.al-p3[b-fg3dzehsbu] { background: var(--al-amber); width: 60%; }
.al-p4[b-fg3dzehsbu] { background: var(--al-amber); width: 80%; }
.al-p5[b-fg3dzehsbu] { background: var(--al-red); width: 100%; }
.al-prog-label[b-fg3dzehsbu] { font-weight: 800; font-size: 11px; min-width: 22px; text-align: right; }
.al-pl0[b-fg3dzehsbu] { color: var(--nvx-success-text); } .al-pl1[b-fg3dzehsbu] { color: var(--al-green); } .al-pl2[b-fg3dzehsbu] { color: var(--al-green); }
.al-pl3[b-fg3dzehsbu] { color: var(--nvx-warning-text); } .al-pl4[b-fg3dzehsbu] { color: var(--al-amber); } .al-pl5[b-fg3dzehsbu] { color: var(--al-red); }

/* ── FOOTER ─────────────────────────────────────────────────────────── */
.al-footer[b-fg3dzehsbu] {
    margin-top: 20px;
    padding: 12px 0 6px;
    border-top: 2px solid var(--al-border);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--al-muted);
}
.al-footer span:nth-child(2)[b-fg3dzehsbu] { text-align: center; }
.al-footer span:nth-child(3)[b-fg3dzehsbu] { text-align: right; }

/* ── NO DATA ────────────────────────────────────────────────────────── */
.al-nodata[b-fg3dzehsbu] { text-align: center; padding: 40px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--al-muted); }

/* ══════════════════════════════════════════════════════════════════════
   COORDINADOR — NAVEGACIÓN 3 NIVELES
   ══════════════════════════════════════════════════════════════════════ */

/* ── BREADCRUMB ─────────────────────────────────────────────────────── */
.al-breadcrumb[b-fg3dzehsbu] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--al-muted);
    margin-bottom: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.al-bc-link[b-fg3dzehsbu] { cursor: pointer; transition: color .15s; }
.al-bc-link:hover[b-fg3dzehsbu] { color: var(--al-teal); }
.al-bc-active[b-fg3dzehsbu] { color: var(--al-teal-dark); }
.al-bc-sep[b-fg3dzehsbu] { color: var(--al-border-dark); }

/* ── PRIORITY CARDS (Nivel 1) ───────────────────────────────────────── */
.al-prio-grid[b-fg3dzehsbu] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.al-prio-card[b-fg3dzehsbu] {
    background: var(--al-surface);
    border-radius: 16px;
    border: 1.5px solid var(--al-border);
    padding: 22px 20px 18px;
    cursor: pointer;
    transition: box-shadow .18s, transform .18s;
    position: relative;
    overflow: hidden;
}
.al-prio-card[b-fg3dzehsbu]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    border-radius: 16px 16px 0 0;
}
.al-pc-red[b-fg3dzehsbu]::before   { background: var(--al-red); }
.al-pc-amber[b-fg3dzehsbu]::before { background: var(--al-amber); }
.al-pc-green[b-fg3dzehsbu]::before { background: var(--al-green); }
.al-prio-card:hover[b-fg3dzehsbu]  { box-shadow: 0 6px 20px rgba(0,0,0,0.09); transform: translateY(-2px); }

.al-pc-header[b-fg3dzehsbu] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.al-pc-sem[b-fg3dzehsbu] { font-size: 26px; line-height: 1; }
.al-pc-badge[b-fg3dzehsbu] {
    font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    padding: 2px 9px; border-radius: 20px;
}
.al-pc-red   .al-pc-badge[b-fg3dzehsbu] { background: var(--nvx-danger-bg); color: var(--al-red); border: 1px solid var(--nvx-danger-bd); }
.al-pc-amber .al-pc-badge[b-fg3dzehsbu] { background: var(--nvx-warning-bg); color: var(--nvx-warning-text); border: 1px solid var(--nvx-warning-bd); }
.al-pc-green .al-pc-badge[b-fg3dzehsbu] { background: var(--nvx-success-bg); color: var(--nvx-success-text); border: 1px solid var(--nvx-success-bd); }

.al-pc-count[b-fg3dzehsbu] { font-weight: 800; font-size: 48px; line-height: 1; margin-bottom: 6px; }
.al-pc-red   .al-pc-count[b-fg3dzehsbu] { color: var(--al-red); }
.al-pc-amber .al-pc-count[b-fg3dzehsbu] { color: var(--al-amber); }
.al-pc-green .al-pc-count[b-fg3dzehsbu] { color: var(--al-green); }

.al-pc-label[b-fg3dzehsbu] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--al-muted); margin-bottom: 12px; }
.al-pc-teal[b-fg3dzehsbu]::before  { background: var(--al-teal); }
.al-pc-teal .al-pc-badge[b-fg3dzehsbu]  { background: var(--al-surface2); color: var(--al-teal-dark); border: 1px solid var(--al-border-dark); }
.al-pc-teal .al-pc-count[b-fg3dzehsbu]  { color: var(--al-teal-deep); }

.al-pc-gray[b-fg3dzehsbu]::before  { background: var(--nvx-gray-400); }
.al-pc-gray .al-pc-badge[b-fg3dzehsbu] { background: var(--nvx-gray-100); color: var(--nvx-gray-600); border: 1px solid var(--nvx-gray-200); }
.al-pc-gray .al-pc-count[b-fg3dzehsbu] { color: var(--nvx-gray-600); }

.al-pc-footer[b-fg3dzehsbu] {
    border-top: 1px solid var(--al-border);
    padding-top: 10px;
    font-size: 10px; color: var(--al-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px;
    display: flex; align-items: center; justify-content: space-between;
}

/* ── UMBRAL TABLE (Nivel 1) ─────────────────────────────────────────── */
.al-umbral-card[b-fg3dzehsbu] {
    background: var(--al-surface);
    border-radius: 14px;
    border: 1.5px solid var(--al-border);
    overflow: hidden;
    margin-bottom: 20px;
}
.al-umbral-header[b-fg3dzehsbu] {
    background: var(--al-teal-deep);
    padding: 13px 20px;
}
.al-umbral-header-title[b-fg3dzehsbu] { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--al-surface); }
.al-umbral-header-sub[b-fg3dzehsbu]   { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: rgba(255,255,255,0.5); margin-top: 3px; }

.al-umbral-table[b-fg3dzehsbu] { width: 100%; border-collapse: collapse; }
.al-umbral-table th[b-fg3dzehsbu] {
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 9.5px;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 13px 14px; border-bottom: 2px solid var(--al-border-dark);
    text-align: center; vertical-align: middle;
}
.al-uth-tipo[b-fg3dzehsbu]  { background: var(--al-surface2); color: var(--al-teal-dark); text-align: left; min-width: 210px; }
.al-uth-alert[b-fg3dzehsbu] { background: var(--nvx-danger-bg); min-width: 130px; }
.al-uth-name[b-fg3dzehsbu]  { font-size: 10.5px; font-weight: 800; color: var(--nvx-danger-text); margin-bottom: 4px; }
.al-uth-cond[b-fg3dzehsbu]  {
    font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700;
    color: var(--nvx-danger-text); background: color-mix(in srgb, var(--al-red) 8%, transparent); border-radius: 20px;
    padding: 2px 8px; display: inline-block;
}
.al-umbral-table tbody tr:hover td[b-fg3dzehsbu] { background: var(--nvx-gray-50); }
.al-umbral-table td[b-fg3dzehsbu] { padding: 14px; border-bottom: 1px solid var(--al-border); vertical-align: middle; }
.al-umbral-table tr:last-child td[b-fg3dzehsbu] { border-bottom: none; }

.al-td-tipo-wrap[b-fg3dzehsbu] { display: flex; align-items: center; gap: 10px; }
.al-td-tipo-icon[b-fg3dzehsbu] { font-size: 18px; flex-shrink: 0; }
.al-td-tipo-name[b-fg3dzehsbu] { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; }
.al-td-tipo-sub[b-fg3dzehsbu]  { font-size: 9.5px; font-weight: 600; color: var(--al-muted); margin-top: 2px; }

.al-uc[b-fg3dzehsbu] { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.al-uc-num[b-fg3dzehsbu] { font-weight: 800; font-size: 26px; line-height: 1; }
.al-uc-line[b-fg3dzehsbu] { width: 44px; height: 2px; border-radius: 1px; margin: 2px 0; }
.al-uc-pct[b-fg3dzehsbu]  { font-size: 10.5px; font-weight: 800; }
.al-uc-total[b-fg3dzehsbu] { font-size: 9px; font-weight: 600; color: var(--al-muted); }

/* ── DOS LIST (Nivel 2) ─────────────────────────────────────────────── */
.al-f-group[b-fg3dzehsbu] { display: flex; flex-direction: column; }

.al-n2-filters[b-fg3dzehsbu] {
    background: var(--al-surface);
    border-radius: 12px;
    border: 1.5px solid var(--al-border);
    padding: 13px 17px;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.al-dos-list[b-fg3dzehsbu] { display: flex; flex-direction: column; gap: 8px; }
.al-do-row[b-fg3dzehsbu] {
    background: var(--al-surface);
    border-radius: 10px;
    border: 1.5px solid var(--al-border);
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 26px 120px 1fr 140px 140px 110px 20px;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.al-do-row:hover[b-fg3dzehsbu]     { border-color: var(--al-teal); box-shadow: 0 2px 12px color-mix(in srgb, var(--al-teal) 10%, transparent); }
.al-do-row.crit[b-fg3dzehsbu]      { border-left: 3px solid var(--al-red); }
.al-do-row.warn[b-fg3dzehsbu]      { border-left: 3px solid var(--al-amber); }
.al-do-row.ok[b-fg3dzehsbu]        { border-left: 3px solid var(--al-green); }
.al-do-sem[b-fg3dzehsbu]           { font-size: 16px; text-align: center; }
.al-do-code-pill[b-fg3dzehsbu]     {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
    color: var(--al-teal-dark); background: var(--al-teal-light);
    border: 1px solid var(--al-border-dark); border-radius: 5px; padding: 3px 7px; white-space: nowrap;
}
.al-do-cliente-main[b-fg3dzehsbu] { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: var(--al-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-do-cliente-sub[b-fg3dzehsbu]  { font-size: 9.5px; color: var(--al-muted); margin-top: 2px; }
.al-do-act-text[b-fg3dzehsbu]     { font-size: 10px; color: var(--al-text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.al-do-op-cell[b-fg3dzehsbu]      { display: flex; align-items: center; gap: 6px; }
.al-do-arrow[b-fg3dzehsbu]        { color: var(--al-muted); font-size: 16px; text-align: center; }

.al-am-badge[b-fg3dzehsbu] { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; font-family: 'Inter', sans-serif; }
.al-am-ok[b-fg3dzehsbu]   { background: color-mix(in srgb, var(--al-green) 10%, transparent); color: var(--nvx-success-text); border: 1px solid color-mix(in srgb, var(--al-green) 25%, transparent); }
.al-am-warn[b-fg3dzehsbu] { background: var(--nvx-warning-bg); color: var(--nvx-warning-text); border: 1px solid var(--nvx-warning-bd); }
.al-am-crit[b-fg3dzehsbu] { background: color-mix(in srgb, var(--al-red) 10%, transparent); color: var(--al-red); border: 1px solid color-mix(in srgb, var(--al-red) 25%, transparent); }

.al-empty-dos[b-fg3dzehsbu] { text-align: center; padding: 32px; color: var(--al-muted); font-size: 13px; background: var(--al-surface); border-radius: 12px; border: 1.5px solid var(--al-border); font-family: 'Inter', sans-serif; }

/* ── DETALLE HERO (Nivel 3) ─────────────────────────────────────────── */
.al-detalle-hero[b-fg3dzehsbu] {
    background: var(--al-surface);
    border-radius: 12px;
    border: 1.5px solid var(--al-border);
    padding: 20px 22px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
}
.al-dh-do-code[b-fg3dzehsbu] { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: var(--al-teal-dark); }
.al-dh-cliente[b-fg3dzehsbu] { font-size: 15px; font-weight: 800; color: var(--al-text); margin: 5px 0; }
.al-dh-chips[b-fg3dzehsbu]   { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.al-chip[b-fg3dzehsbu]       { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: var(--al-surface2); color: var(--al-teal-dark); border: 1px solid var(--al-border-dark); border-radius: 5px; padding: 2px 8px; }
.al-chip-red[b-fg3dzehsbu]   { background: color-mix(in srgb, var(--al-red) 10%, transparent); color: var(--al-red); border-color: color-mix(in srgb, var(--al-red) 25%, transparent); }
.al-chip-pol[b-fg3dzehsbu]   { background: var(--nvx-accent-bg); color: var(--nvx-accent-text); border-color: var(--nvx-accent-bd); }
.al-dh-right[b-fg3dzehsbu]   { text-align: center; min-width: 100px; }
.al-dh-sem-big[b-fg3dzehsbu] { font-size: 38px; line-height: 1; }
.al-dh-prio-lbl[b-fg3dzehsbu] { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; margin-top: 6px; }
.al-dh-crit-lbl[b-fg3dzehsbu] { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--al-muted); margin-top: 4px; }

/* ── ALERT GRID (Nivel 3) ───────────────────────────────────────────── */
.al-alertas-section-title[b-fg3dzehsbu] { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--al-teal-dark); margin-bottom: 12px; }
.al-alertas-grid[b-fg3dzehsbu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.al-alerta-card[b-fg3dzehsbu] { border-radius: 10px; padding: 15px; border: 1.5px solid; }
.al-ac-err[b-fg3dzehsbu] { background: color-mix(in srgb, var(--al-red) 7.0%, transparent); border-color: color-mix(in srgb, var(--al-red) 25%, transparent); }
.al-ac-ok[b-fg3dzehsbu]  { background: color-mix(in srgb, var(--al-green) 7.0%, transparent); border-color: color-mix(in srgb, var(--al-green) 25%, transparent); }
.al-ac-icon[b-fg3dzehsbu]  { font-size: 18px; margin-bottom: 6px; }
.al-ac-title[b-fg3dzehsbu] { font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .9px; margin-bottom: 3px; font-family: 'Inter', sans-serif; }
.al-ac-err .al-ac-title[b-fg3dzehsbu] { color: var(--al-red); }
.al-ac-ok  .al-ac-title[b-fg3dzehsbu] { color: var(--nvx-success-text); }
.al-ac-desc[b-fg3dzehsbu] { font-family: 'Inter', sans-serif; font-size: 10.5px; line-height: 1.5; }
.al-ac-err .al-ac-desc[b-fg3dzehsbu] { color: var(--nvx-danger-text); }
.al-ac-ok  .al-ac-desc[b-fg3dzehsbu] { color: var(--nvx-success-text); }
.al-ac-dias[b-fg3dzehsbu] { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 17px; margin-top: 6px; }
.al-ac-err .al-ac-dias[b-fg3dzehsbu] { color: var(--al-red); }
.al-ac-ok  .al-ac-dias[b-fg3dzehsbu] { color: var(--nvx-success-text); }

/* ── INFO / ACCION CARDS (Nivel 3) ──────────────────────────────────── */
.al-info-card[b-fg3dzehsbu] { background: var(--al-surface); border-radius: 12px; border: 1.5px solid var(--al-border); padding: 17px 20px; margin-bottom: 14px; }
.al-info-card-title[b-fg3dzehsbu] { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--al-teal-dark); margin-bottom: 11px; padding-bottom: 8px; border-bottom: 1.5px solid var(--al-border); }
.al-info-grid[b-fg3dzehsbu] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.al-info-label[b-fg3dzehsbu] { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--al-muted); margin-bottom: 3px; }
.al-info-val[b-fg3dzehsbu]   { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--al-text); }

.al-accion-card[b-fg3dzehsbu] { background: color-mix(in srgb, var(--al-red) 7.0%, transparent); border: 1.5px solid color-mix(in srgb, var(--al-red) 25%, transparent); border-radius: 12px; padding: 17px 20px; }
.al-accion-title[b-fg3dzehsbu] { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--al-red); margin-bottom: 11px; }
.al-accion-list[b-fg3dzehsbu] { display: flex; flex-direction: column; gap: 8px; }
.al-accion-item[b-fg3dzehsbu] { display: flex; align-items: flex-start; gap: 9px; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--nvx-danger-text); line-height: 1.5; }
.al-accion-num[b-fg3dzehsbu] {
    font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 10px;
    color: var(--al-surface); background: var(--al-red); border-radius: 50%;
    width: 19px; height: 19px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
}
.al-accion-ok[b-fg3dzehsbu] { color: var(--nvx-success-text); font-weight: 700; font-size: 13px; }

/* ── PROGRESS BAR — 6 alertas ───────────────────────────────────────── */
.al-p6[b-fg3dzehsbu] { background: var(--nvx-danger-text); width: 100%; }
.al-pl6[b-fg3dzehsbu] { color: var(--nvx-danger-text); }

/* ── EXPORT BUTTON ──────────────────────────────────────────────────── */
.al-btn-export[b-fg3dzehsbu] {
    background: var(--al-teal);
    border: 1.5px solid var(--al-teal-dark);
    border-radius: 8px;
    color: var(--al-surface);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 7px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .2s;
    margin-right: 4px;
}
.al-btn-export:hover[b-fg3dzehsbu]    { background: var(--al-teal-dark); }
.al-btn-export:disabled[b-fg3dzehsbu] { opacity: 0.45; cursor: not-allowed; }

@keyframes al-fadeUp-b-fg3dzehsbu {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.al-fadein[b-fg3dzehsbu] { animation: al-fadeUp-b-fg3dzehsbu .35s ease both; }

/* ── Estados de la pagina ────────────────────────────────────────────────── */

/* Antes iban como style= en el marcado, con su propio hex.

   ::deep porque la clase va sobre un MudAlert: el marcado lo genera MudBlazor y
   no lleva el atributo de ambito del componente, asi que sin ::deep la regla no
   lo alcanzaria. */
.alerta[b-fg3dzehsbu]  .al-aviso {
    margin: var(--nvx-space-sm) var(--nvx-space-md);
}

.al-cargando[b-fg3dzehsbu] {
    text-align: center;
    padding: 60px;
    background: var(--al-bg);
}

.al-cargando__texto[b-fg3dzehsbu] {
    margin-top: 14px;
    color: var(--al-muted);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
}

/* La barra de pestanas ya no lleva el boton de exportar —se fue al encabezado
   de la pagina, que es donde viven las acciones—, asi que el separador elastico
   que lo empujaba a la derecha tampoco hace falta. */

/* ── Tonos semánticos ────────────────────────────────────────────────────────
   Reemplazan a los style="color:#…" que el marcado calculaba en C#: ahora lo
   que se calcula es cuál de estas clases toca. */
.al-t-danger[b-fg3dzehsbu]  { color: var(--al-red); }
.al-t-warning[b-fg3dzehsbu] { color: var(--nvx-warning-text); }
.al-t-success[b-fg3dzehsbu] { color: var(--nvx-success-text); }
.al-t-muted[b-fg3dzehsbu]   { color: var(--al-muted); }
.al-t-brand[b-fg3dzehsbu]   { color: var(--al-teal); }

.al-critico[b-fg3dzehsbu] {
    color: var(--al-red);
    font-weight: 700;
}

/* Celda de conteo: el fondo dice si hay algo pendiente antes de leer el número. */
.al-uc-td[b-fg3dzehsbu] { text-align: center; }
.al-uc-td--alerta[b-fg3dzehsbu] { background: color-mix(in srgb, var(--al-red) 4%, transparent); }
.al-uc-td--ok[b-fg3dzehsbu]     { background: color-mix(in srgb, var(--al-green) 4%, transparent); }
.al-uc-td--total[b-fg3dzehsbu]  { background: color-mix(in srgb, var(--al-teal) 6%, transparent); }

/* La barra bajo el conteo toma el color del tono que lleve encima. */
.al-uc-line.al-t-danger[b-fg3dzehsbu]  { background: var(--al-red); opacity: .3; }
.al-uc-line.al-t-success[b-fg3dzehsbu] { background: var(--nvx-success-text); opacity: .3; }

.al-sin-datos[b-fg3dzehsbu] {
    text-align: center;
    padding: 20px;
    color: var(--al-muted);
}

/* ── Avatares por analista ───────────────────────────────────────────────────
   Ocho tonos y ninguna lista de nombres: OpTono() reparte por el nombre. Todos
   aguantan texto blanco encima. */
.al-av--1[b-fg3dzehsbu] { background: var(--al-teal-dark); }
.al-av--2[b-fg3dzehsbu] { background: var(--al-info); }
.al-av--3[b-fg3dzehsbu] { background: var(--nvx-accent); }
.al-av--4[b-fg3dzehsbu] { background: var(--nvx-success-text); }
.al-av--5[b-fg3dzehsbu] { background: var(--al-teal-deep); }
.al-av--6[b-fg3dzehsbu] { background: var(--nvx-warning-text); }
.al-av--7[b-fg3dzehsbu] { background: var(--al-red); }
.al-av--8[b-fg3dzehsbu] { background: var(--nvx-gray-600); }

/* ── Utilitarias de esta pantalla ────────────────────────────────────────────
   Estaban como style= repetido en el marcado. */
.al-sep[b-fg3dzehsbu]           { margin-top: var(--nvx-space-md); }
.al-centro[b-fg3dzehsbu]        { text-align: center; }
.al-celda-comoda[b-fg3dzehsbu]  { padding: 6px 10px; }
.al-nowrap[b-fg3dzehsbu]        { white-space: nowrap; }
.al-fila-click[b-fg3dzehsbu]    { cursor: pointer; }
.al-sin-click[b-fg3dzehsbu]     { cursor: default; }
.al-col-estrecha[b-fg3dzehsbu]  { width: 44px; text-align: center; }
.al-col-ancha[b-fg3dzehsbu]     { min-width: 120px; }
.al-btn-derecha[b-fg3dzehsbu]   { margin-left: auto; }

.al-filtros-grid[b-fg3dzehsbu] {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr auto auto;
    gap: 12px;
    align-items: end;
}

.al-filtros-grid--6[b-fg3dzehsbu] {
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr auto auto;
}

.al-filtros-grid--7[b-fg3dzehsbu] {
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1fr auto auto;
}

/* Bajo 1024 px las columnas fijas no caben y empujaban la pantalla a lo ancho. */
@media (max-width: 1024px) {
    .al-filtros-grid[b-fg3dzehsbu],
    .al-filtros-grid--6[b-fg3dzehsbu],
    .al-filtros-grid--7[b-fg3dzehsbu] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Enlace al D.O. en la cabecera del detalle. */
.al-ir-do[b-fg3dzehsbu] {
    margin-left: 10px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--al-teal-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.al-ir-do:hover[b-fg3dzehsbu] { text-decoration: underline; }
/* /Components/Pages/Reportes/CarteraVencimiento.razor.rz.scp.css */
/* El contenedor de la página. La banda de título que había aquí —un
   degradado con la rampa vieja de la marca escrita a mano— la reemplazó
   NvxPageHeader. */
.car[b-gq7jv2rjux] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
}

    /* Paleta del Dashboard Control Operaciones. Solo va a CSS lo que se repite
       en cientos de celdas o no se puede expresar inline. */

    /* ── PESTANAS ── */
    .cv-tabs[b-gq7jv2rjux] {
        display: flex; gap: 6px; margin-bottom: 18px;
        background: var(--nvx-white); border: 1px solid var(--nvx-200); border-radius: 14px; padding: 6px;
        box-shadow: 0 2px 8px rgba(10,96,96,.08);
    }
    .cv-tab[b-gq7jv2rjux] {
        flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 10px 14px; border: none; background: transparent; cursor: pointer;
        border-radius: 10px; color: var(--nvx-gray-600); font-family: inherit;
        font-size: .78rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap;
        transition: background .2s, color .2s, box-shadow .2s;
    }
    .cv-tab:hover[b-gq7jv2rjux] { background: var(--nvx-100); color: var(--nvx-900); }
    .cv-tab.active[b-gq7jv2rjux] {
        background: linear-gradient(135deg,var(--nvx-800) 0%,var(--nvx-600) 100%);
        color: var(--nvx-white); box-shadow: 0 2px 8px rgba(10,96,96,.25);
    }

    /* ── SUBDIVISIONES ── */
    .cv-sub[b-gq7jv2rjux] {
        display: flex; align-items: center; gap: 10px; margin: 4px 0 12px;
    }
    .cv-sub-icon[b-gq7jv2rjux] {
        background: var(--nvx-100); color: var(--nvx-800); width: 30px; height: 30px; border-radius: 8px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .cv-sub-title[b-gq7jv2rjux] {
        font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--nvx-900);
    }
    .cv-sub-line[b-gq7jv2rjux] { flex: 1; height: 1px; background: var(--nvx-200); }

    /* ── CARDS ── */
    .cv-cards[b-gq7jv2rjux] {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 14px; margin-bottom: 18px;
    }
    .cv-card[b-gq7jv2rjux] {
        background: var(--nvx-white); color: var(--nvx-900); border: 1px solid var(--nvx-200); border-radius: 14px;
        padding: 14px 16px; box-shadow: 0 2px 8px rgba(10,96,96,.08);
        display: flex; flex-direction: column; gap: 6px; min-height: 96px;
    }
    .cv-card.total[b-gq7jv2rjux] {
        background: linear-gradient(135deg,var(--nvx-800) 0%,var(--nvx-600) 100%);
        color: var(--nvx-white); border-color: transparent;
    }
    .cv-card-top[b-gq7jv2rjux] { display: flex; align-items: flex-start; justify-content: space-between; }
    .cv-card-key[b-gq7jv2rjux] {
        font-size: .65rem; font-weight: 700; letter-spacing: .10em; opacity: .85; color: var(--nvx-gray-600);
    }
    .cv-card.total .cv-card-key[b-gq7jv2rjux] { color: rgba(255,255,255,.85); }
    .cv-card-icon[b-gq7jv2rjux] {
        background: var(--nvx-100); color: var(--nvx-800); padding: 5px; border-radius: 8px;
        width: 28px; height: 28px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .cv-card.total .cv-card-icon[b-gq7jv2rjux] { background: rgba(255,255,255,.18); color: var(--nvx-white); }
    .cv-card-val[b-gq7jv2rjux] {
        font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
        color: var(--nvx-800); overflow-wrap: anywhere;
    }
    .cv-card.total .cv-card-val[b-gq7jv2rjux] { color: var(--nvx-white); }
    .cv-card-sub[b-gq7jv2rjux] { font-size: .7rem; font-weight: 500; color: var(--nvx-gray-400); }
    .cv-card.total .cv-card-sub[b-gq7jv2rjux] { color: rgba(255,255,255,.85); }

    /* ── PANELES (grids y graficas) ── */
    .cv-panel[b-gq7jv2rjux] {
        background: var(--nvx-white); border: 1px solid var(--nvx-200); border-radius: 14px;
        box-shadow: 0 2px 8px rgba(10,96,96,.08); overflow: hidden; margin-bottom: 18px;
    }
    .cv-panel-head[b-gq7jv2rjux] {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 18px 10px; border-bottom: 1px solid var(--nvx-100);
        flex-wrap: wrap; gap: 10px;
    }
    .cv-panel-icon[b-gq7jv2rjux] {
        background: var(--nvx-100); color: var(--nvx-800); width: 30px; height: 30px; border-radius: 8px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .cv-panel-title[b-gq7jv2rjux] {
        font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--nvx-900);
    }
    .cv-panel-meta[b-gq7jv2rjux] { font-size: .68rem; color: var(--nvx-gray-400); margin-top: 2px; }
    .cv-pill[b-gq7jv2rjux] {
        background: var(--nvx-100); color: var(--nvx-800); padding: 3px 12px; border-radius: 999px;
        font-size: .65rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
    }
    .cv-empty[b-gq7jv2rjux] { padding: 28px; text-align: center; color: var(--nvx-gray-400); font-size: .82rem; }
    .cv-chart-body[b-gq7jv2rjux] { padding: 14px 16px; height: 330px; }

    /* ── TABLAS ── */
    .cv-table[b-gq7jv2rjux] { width: 100%; border-collapse: collapse; }
    .cv-table thead th[b-gq7jv2rjux] {
        position: sticky; top: 0; z-index: 1;
        background: var(--nvx-100); color: var(--nvx-800);
        font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
        text-align: left; white-space: nowrap;
        padding: 10px; border-bottom: 2px solid var(--nvx-200);
    }
    .cv-table thead th.num[b-gq7jv2rjux] { text-align: right; }
    .cv-table tbody td[b-gq7jv2rjux] {
        font-size: .74rem; color: var(--nvx-900); white-space: nowrap; vertical-align: middle;
        padding: 8px 10px; border-bottom: 1px solid var(--nvx-100);
    }
    .cv-table tbody td.num[b-gq7jv2rjux] { text-align: right; font-variant-numeric: tabular-nums; }
    .cv-table tbody tr:hover td[b-gq7jv2rjux] { background: var(--nvx-50); }
    .cv-table .cv-idx[b-gq7jv2rjux]   { color: var(--nvx-gray-400); font-weight: 600; }
    .cv-table .cv-neg[b-gq7jv2rjux]   { color: var(--nvx-danger); font-weight: 600; }
    .cv-table .cv-saldo[b-gq7jv2rjux] { color: var(--nvx-800); font-weight: 700; }
    .cv-table tfoot .cv-total td[b-gq7jv2rjux] {
        background: var(--nvx-100); color: var(--nvx-900);
        font-size: .74rem; font-weight: 800; letter-spacing: .03em;
        padding: 10px; border-top: 2px solid var(--nvx-200);
    }
    .cv-table tfoot .cv-total td.num[b-gq7jv2rjux] { text-align: right; font-variant-numeric: tabular-nums; }
    .cv-chip[b-gq7jv2rjux] {
        background: var(--nvx-100); color: var(--nvx-800); border: 1px solid var(--nvx-200);
        border-radius: 6px; padding: 2px 7px; font-size: .68rem; font-weight: 600;
        display: inline-block;
    }
    .cv-chip-mon[b-gq7jv2rjux] {
        background: var(--nvx-100); color: var(--nvx-800); border-radius: 999px;
        padding: 2px 9px; font-size: .65rem; font-weight: 700; letter-spacing: .05em;
        display: inline-block;
    }

    @@media print {
        .cv-tabs[b-gq7jv2rjux] { display: none !important; }
        .mud-paper[b-gq7jv2rjux] { display: none !important; }
        .cv-table thead th[b-gq7jv2rjux] { position: static; }
        .cv-table tbody td[b-gq7jv2rjux], .cv-table thead th[b-gq7jv2rjux] { padding: 3px 5px; font-size: .6rem; }
    }

/* ── Lo que estaba como estilo en línea ───────────────────────────────── */

.car-t-md[b-gq7jv2rjux]        { font-size: 1rem; }
.car-t-sm[b-gq7jv2rjux]        { font-size: var(--nvx-text-sm); }
.car-t-sm-fuerte[b-gq7jv2rjux] { font-size: var(--nvx-text-sm); font-weight: 700; letter-spacing: .05em; }
.car-mb[b-gq7jv2rjux]          { margin-bottom: 18px; }

.car-fila[b-gq7jv2rjux] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.car-cab[b-gq7jv2rjux] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
}

.car-fondo[b-gq7jv2rjux] {
    min-height: 100vh;
    background: var(--nvx-50);
}

.car-tarjeta[b-gq7jv2rjux] {
    background: var(--nvx-white);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-lg);
    box-shadow: var(--nvx-shadow-sm);
}

.car-icono[b-gq7jv2rjux] {
    background: var(--nvx-50);
    color: var(--nvx-800);
    width: 30px;
    height: 30px;
    border-radius: var(--nvx-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.car-rotulo[b-gq7jv2rjux] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--nvx-900);
}

.car-pill[b-gq7jv2rjux] {
    background: var(--nvx-50);
    color: var(--nvx-800);
    padding: 3px 12px;
    border-radius: 999px;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .06em;
}

.car-vacio[b-gq7jv2rjux]  { text-align: center; padding: 30px; color: var(--nvx-gray-600); }
.car-pad[b-gq7jv2rjux]    { padding: 16px 20px; }
.car-mb-sm[b-gq7jv2rjux]  { margin-bottom: 12px; }
.car-w40[b-gq7jv2rjux]    { width: 40px; }
.car-scroll[b-gq7jv2rjux] { max-height: 420px; overflow-y: auto; }

.car-nota[b-gq7jv2rjux] {
    margin-top: 12px;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
}

.car-aviso[b-gq7jv2rjux] {
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--nvx-100);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-md);
    display: flex;
    align-items: center;
    gap: 8px;
}

.car-tarjeta[b-gq7jv2rjux] {
    border-radius: var(--nvx-r-lg);
    overflow: hidden;
    margin-bottom: var(--nvx-space-md);
}

.car-cabecera[b-gq7jv2rjux] {
    background: var(--nvx-800);
    color: var(--nvx-white);
    padding: 11px 20px;
    font-weight: 600;
    font-size: var(--nvx-text-sm);
    letter-spacing: .07em;
    display: flex;
    align-items: center;
}

.car-tarjeta-plana[b-gq7jv2rjux] {
    background: var(--nvx-white);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-lg);
    box-shadow: var(--nvx-shadow-sm);
}

.car-cab-plana[b-gq7jv2rjux] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
}

.car-cab-arriba[b-gq7jv2rjux] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.car-rejilla[b-gq7jv2rjux] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-sm);
}

.car-acciones[b-gq7jv2rjux] {
    display: flex;
    gap: 12px;
    margin-top: var(--nvx-space-md);
    flex-wrap: wrap;
}

.car-t-lg[b-gq7jv2rjux]        { font-size: 1.1rem; }
.car-acento[b-gq7jv2rjux]      { color: var(--nvx-700); }
.car-sin-mb[b-gq7jv2rjux]      { margin-bottom: 0; }
.car-icono-vacio[b-gq7jv2rjux] { font-size: 2.6rem; color: var(--nvx-gray-400); }

.car-rotulo-osc[b-gq7jv2rjux] {
    color: var(--nvx-900);
    font-weight: 600;
    font-size: var(--nvx-text-sm);
}

.car-mini-rotulo[b-gq7jv2rjux] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .10em;
    opacity: .85;
}
/* /Components/Pages/Reportes/ConceptosTarifas.razor.rz.scp.css */
/* Reporte de conceptos del tarifario.

   Reemplaza el bloque <style> que vivía dentro del .razor. Aquí no hay tokens
   propios ni un solo hex: la banda de título, los botones, la tabla y sus tres
   estados los ponen NvxPageHeader, NvxFilterBar y NvxTable.

   El ancho es el de un reporte, no el de un formulario: sp_conceptos_tarifas
   devuelve las columnas que quiera y la tabla tiene que poder estirarse. */

.pagina[b-fpypvwxwfu] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Consecutivo de la fila. No es un dato del reporte —no viene de la consulta—,
   sólo sirve para no perder el renglón en una tabla ancha: va angosto y en el
   tono apagado, para que no compita con las cifras de verdad.

   Va con ::deep porque las filas llegan a NvxTable como RenderFragment. */
.pagina[b-fpypvwxwfu]  .ct__nro {
    width: 44px;
    color: var(--nvx-gray-400);
}

@media (max-width: 1023px) {
    .pagina[b-fpypvwxwfu] {
        padding: 12px var(--nvx-space-md) 32px;
    }
}
/* /Components/Pages/Reportes/DoPendientesCerrar.razor.rz.scp.css */
/* D.O. pendientes por facturar.

   Este CSS estaba en wwwroot/css/dopendientes.css, cargado con un <link> en App.razor:
   un sistema de estilos paralelo, global, con los colores escritos a mano. Ahora
   es CSS aislado de la página y todo el color sale de los tokens de
   nvx-theme.css.

   Las clases conservan el prefijo nc- para no tocar el marcado: con CSS aislado
   ya no pueden chocar con las de otra página. */

/* ══════════════════════════════════════════
   DO'S PENDIENTES — Custom styles
   Palette: teal var(--nvx-500) / var(--nvx-700) / var(--nvx-800)
   ══════════════════════════════════════════ */

/* ── HEADER ── */
.do-header[b-pawuis28ft] {
  background: linear-gradient(135deg, var(--nvx-800), var(--nvx-700), var(--nvx-500));
  box-shadow: 0 4px 20px color-mix(in srgb, var(--nvx-500) 35%, transparent);
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.do-header-left[b-pawuis28ft]  { display: flex; align-items: center; gap: 14px; }
.do-brand[b-pawuis28ft]        { font-size: 20px; font-weight: 800; color: var(--nvx-white); letter-spacing: 1px; }
.do-header-tag[b-pawuis28ft]   {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2);
}
.do-header-date[b-pawuis28ft]  { color: rgba(255,255,255,0.8); font-size: 12px; font-family: 'JetBrains Mono', monospace; }

/* ── TITLE BAND ── */
.do-titleband[b-pawuis28ft] {
  background: var(--nvx-500);
  border-bottom: 3px solid var(--nvx-700);
  padding: 13px 32px;
  text-align: center;
}
.do-titleband h1[b-pawuis28ft] {
  font-size: 15px; font-weight: 700; color: var(--nvx-white);
  text-transform: uppercase; letter-spacing: 2px;
  margin: 0;
}

/* ── MAIN WRAP ── */
/* El contenedor de la pagina. La cabecera y la banda de titulo que habia
   aqui las reemplazo NvxPageHeader. */
.do-main[b-pawuis28ft] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
}

/* ── FILTER CARD (MudPaper override) ── */
.do-filter-card[b-pawuis28ft] {
  background: var(--nvx-white) !important;
  border: 1.5px solid var(--nvx-200) !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--nvx-500) 7%, transparent) !important;
}
.do-filter-label[b-pawuis28ft] {
  display: block;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--nvx-gray-400); margin-bottom: 4px;
}

/* ── TAB BUTTONS ── */
.do-tabs[b-pawuis28ft] { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.do-tab-btn[b-pawuis28ft] {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 30px;
  border: 2px solid var(--nvx-200);
  background: var(--nvx-white);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer; color: var(--nvx-800);
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.do-tab-btn:hover[b-pawuis28ft] { border-color: var(--nvx-300); color: var(--nvx-700); }
.do-tab-active-p[b-pawuis28ft]  {
  background: linear-gradient(135deg, var(--nvx-800), var(--nvx-500));
  border-color: transparent; color: var(--nvx-white);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--nvx-500) 35%, transparent);
}
.do-tab-active-f[b-pawuis28ft]  {
  background: linear-gradient(135deg, var(--nvx-success-text), var(--nvx-success));
  border-color: transparent; color: var(--nvx-white);
  box-shadow: 0 4px 14px rgba(42,157,110,0.35);
}
.do-tab-active-d[b-pawuis28ft]  {
  background: linear-gradient(135deg, var(--nvx-warning-text), var(--nvx-warning));
  border-color: transparent; color: var(--nvx-white);
  box-shadow: 0 4px 14px rgba(217,119,6,0.35);
}

/* ── KPI GRID ── */
.do-kpi-grid[b-pawuis28ft] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 20px;
}
.do-kpi-grid-wide[b-pawuis28ft] { grid-template-columns: repeat(7, 1fr); }

.do-kpi-card[b-pawuis28ft] {
  background: var(--nvx-white);
  border: 1.5px solid var(--nvx-200);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.do-kpi-card:hover[b-pawuis28ft] { transform: translateY(-3px); box-shadow: 0 8px 24px color-mix(in srgb, var(--nvx-500) 15%, transparent); }
.do-kpi-card[b-pawuis28ft]::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  border-radius: 14px 14px 0 0;
}
.do-kpi-teal[b-pawuis28ft]::before   { background: linear-gradient(90deg, var(--nvx-800), var(--nvx-500)); }
.do-kpi-green[b-pawuis28ft]::before  { background: linear-gradient(90deg, var(--nvx-success-text), var(--nvx-success)); }
.do-kpi-red[b-pawuis28ft]::before    { background: linear-gradient(90deg, var(--nvx-danger-text), var(--nvx-danger)); }
.do-kpi-amber[b-pawuis28ft]::before  { background: linear-gradient(90deg, var(--nvx-warning-text), var(--nvx-warning)); }

.do-kpi-icon[b-pawuis28ft]  { font-size: 22px; margin-bottom: 6px; line-height: 1; }
.do-kpi-val[b-pawuis28ft]   { font-size: 32px; font-weight: 800; color: var(--nvx-800); line-height: 1; margin-bottom: 4px; }
.do-kpi-label[b-pawuis28ft] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--nvx-gray-400); }
.do-kpi-sub[b-pawuis28ft]   { font-size: 11px; color: var(--nvx-800); margin-top: 3px; font-weight: 500; }

/* ── TABLE CARD ── */
.do-table-card[b-pawuis28ft] {
  background: var(--nvx-white);
  border: 1.5px solid var(--nvx-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--nvx-500) 5%, transparent);
  margin-bottom: 8px;
}
.do-table-header[b-pawuis28ft] {
  padding: 11px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.do-table-header-p[b-pawuis28ft] { background: var(--nvx-500); }
.do-table-header-f[b-pawuis28ft] { background: var(--nvx-success); }
.do-table-header-d[b-pawuis28ft] { background: var(--nvx-warning); }
.do-table-title[b-pawuis28ft] { font-size: 12px; font-weight: 700; color: var(--nvx-white); text-transform: uppercase; letter-spacing: 1px; }
.do-table-count[b-pawuis28ft] { font-size: 11px; color: rgba(255,255,255,0.85); font-family: 'JetBrains Mono', monospace; }
.do-table-wrap[b-pawuis28ft]  { overflow-x: auto; }

.do-table[b-pawuis28ft] { width: 100%; border-collapse: collapse; }
.do-table thead tr[b-pawuis28ft] { background: var(--nvx-100); }
.do-table th[b-pawuis28ft] {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--nvx-700); padding: 10px 13px;
  white-space: nowrap;
  border-bottom: 2px solid var(--nvx-300); text-align: left;
}
.do-table td[b-pawuis28ft] {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--nvx-900);
  padding: 8px 13px;
  border-bottom: 1px solid rgba(194,232,230,0.5);
  white-space: nowrap;
}
.do-table tr:hover td[b-pawuis28ft] { background: var(--nvx-100); }
.do-table tr:last-child td[b-pawuis28ft] { border-bottom: none; }
.do-row-num[b-pawuis28ft] { color: var(--nvx-gray-400); font-size: 10px; }

/* ── DO CODE CHIP ── */
.do-code[b-pawuis28ft] {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; color: var(--nvx-700);
  background: var(--nvx-100); border: 1px solid var(--nvx-200);
  border-radius: 5px; padding: 2px 8px;
  display: inline-block;
}

/* ── BADGES ── */
.do-badge[b-pawuis28ft] {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 9px; border-radius: 20px;
}
.do-badge-cumple[b-pawuis28ft]   { background: rgba(42,157,110,0.12); color: var(--nvx-success-text); border: 1px solid rgba(42,157,110,0.3); }
.do-badge-incumple[b-pawuis28ft] { background: rgba(192,57,43,0.10);  color: var(--nvx-danger); border: 1px solid rgba(192,57,43,0.25); }
.do-badge-tramite[b-pawuis28ft]  { background: rgba(8,145,178,0.10);  color: var(--nvx-info); border: 1px solid rgba(8,145,178,0.25); }
.do-badge-facturado[b-pawuis28ft]{ background: rgba(42,157,110,0.10); color: var(--nvx-success); border: 1px solid rgba(42,157,110,0.25); }

/* ── VAR PILLS ── */
.do-var-pill[b-pawuis28ft] { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.do-var-eta[b-pawuis28ft]    { background: color-mix(in srgb, var(--nvx-500) 10%, transparent);  color: var(--nvx-700); border: 1px solid color-mix(in srgb, var(--nvx-500) 20%, transparent); }
.do-var-etd[b-pawuis28ft]    { background: rgba(109,40,217,0.08); color: var(--nvx-accent-text); border: 1px solid rgba(109,40,217,0.15); }
.do-var-retiro[b-pawuis28ft] { background: rgba(217,119,6,0.08); color: var(--nvx-warning-text); border: 1px solid rgba(217,119,6,0.2); }

/* ── CHART GRID ── */
.do-charts-grid[b-pawuis28ft] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.do-chart-card[b-pawuis28ft] {
  background: var(--nvx-white);
  border: 1.5px solid var(--nvx-200);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--nvx-500) 5%, transparent);
}
.do-chart-card-wide[b-pawuis28ft] { grid-column: 1 / -1; }
.do-chart-title[b-pawuis28ft] {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--nvx-700); margin-bottom: 12px;
}
.do-chart-wrap[b-pawuis28ft] { height: 200px; position: relative; }

/* ── SEMÁFORO ── */
.do-sem-dot[b-pawuis28ft] {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.do-sem-dot.do-sem-verde[b-pawuis28ft]    { background: var(--nvx-success); box-shadow: 0 0 0 3px rgba(42,157,110,0.18); }
.do-sem-dot.do-sem-amarillo[b-pawuis28ft] { background: var(--nvx-warning); box-shadow: 0 0 0 3px rgba(217,119,6,0.18); }
.do-sem-dot.do-sem-rojo[b-pawuis28ft]     { background: var(--nvx-danger); box-shadow: 0 0 0 3px rgba(192,57,43,0.18); }
.do-sem-txt[b-pawuis28ft] { font-size: 11px; font-weight: 600; vertical-align: middle; }
.do-sem-txt.do-sem-verde[b-pawuis28ft]    { color: var(--nvx-success-text); }
.do-sem-txt.do-sem-amarillo[b-pawuis28ft] { color: var(--nvx-warning-text); }
.do-sem-txt.do-sem-rojo[b-pawuis28ft]     { color: var(--nvx-danger); }

/* ── NO DATA ── */
.do-nodata[b-pawuis28ft] { text-align: center; padding: 40px; color: var(--nvx-gray-400); font-size: 13px; }

/* ── FOOTER ── */
.do-footer[b-pawuis28ft] {
  border-top: 2px solid var(--nvx-200);
  margin-top: 24px; padding: 14px 0;
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--nvx-gray-400);
}

/* ── MudBlazor overrides dentro del contexto do-filter-card ── */
.do-filter-card .mud-input-root[b-pawuis28ft] { font-size: 13px !important; }
.do-filter-card .mud-select-input[b-pawuis28ft] { font-size: 13px !important; }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
  .do-kpi-grid-wide[b-pawuis28ft] { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .do-kpi-grid[b-pawuis28ft], .do-kpi-grid-wide[b-pawuis28ft] { grid-template-columns: 1fr 1fr; }
  .do-main[b-pawuis28ft] { padding: 16px; }
}
@media (max-width: 600px) {
  .do-tabs[b-pawuis28ft] { flex-direction: column; }
}

/* Los botones de la barra de filtros y el estado de carga. Estaban como
   estilos en línea con los colores a mano. */
.do-btn[b-pawuis28ft] {
    font-size: var(--nvx-text-sm);
    font-weight: 700;
    text-transform: uppercase;
}

.do-btn--consultar[b-pawuis28ft] {
    background: var(--nvx-700);
    color: var(--nvx-white);
}

.do-btn--excel[b-pawuis28ft] {
    background: var(--nvx-success-text);
    color: var(--nvx-white);
}

.do-btn--limpiar[b-pawuis28ft] {
    color: var(--nvx-gray-600);
    border-color: var(--nvx-200);
    text-transform: none;
}

.do-spinner[b-pawuis28ft] { color: var(--nvx-500); }

.do-cargando[b-pawuis28ft] {
    margin-top: 16px;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
}

.do-prom[b-pawuis28ft] {
    color: var(--nvx-800);
    font-size: var(--nvx-text-sm);
}

/* Lo que estaba como estilo en linea. Los de ancho y alto calculados se
   quedan en el marcado: dependen de un valor de C# y no caben en una hoja. */
.do-dato[b-pawuis28ft]          { font-weight: 700; color: var(--nvx-700); }
.do-dato--fuerte[b-pawuis28ft]  { font-weight: 800; }
.do-fuerte[b-pawuis28ft]        { font-weight: 700; }
.do-mb[b-pawuis28ft]            { margin-bottom: var(--nvx-space-md); }
.do-mt[b-pawuis28ft]            { margin-top: var(--nvx-space-md); }
.do-mt-lg[b-pawuis28ft]         { margin-top: var(--nvx-space-xl); }
.do-mt-xs[b-pawuis28ft]         { margin-top: 4px; }
.do-pad[b-pawuis28ft]           { padding: 12px 20px; }
.do-vacio[b-pawuis28ft]         { text-align: center; padding: 60px; color: var(--nvx-gray-600); }

.do-chips[b-pawuis28ft] { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
/* /Components/Pages/Reportes/FlujoCaja.razor.rz.scp.css */
/* El contenedor de la página. La banda de título que había aquí —un
   degradado con la rampa vieja de la marca escrita a mano— la reemplazó
   NvxPageHeader. */
.flu[b-ibtb1qox5g] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
}

    /* ── Selector de vista (segmented control) ── */
    .fc-seg[b-ibtb1qox5g] {
        display: inline-flex;
        gap: 4px;
        background: var(--nvx-white);
        border: 1px solid var(--nvx-200);
        border-radius: 12px;
        padding: 5px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(10, 96, 96, .08);
        flex-wrap: wrap;
    }
    .fc-seg-btn[b-ibtb1qox5g] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: none;
        background: transparent;
        color: var(--nvx-gray-600);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .07em;
        padding: 8px 16px;
        border-radius: 9px;
        cursor: pointer;
        transition: background .15s, color .15s, box-shadow .15s;
    }
    .fc-seg-btn:hover[b-ibtb1qox5g] { background: var(--nvx-100); color: var(--nvx-800); }
    .fc-seg-on[b-ibtb1qox5g] {
        background: linear-gradient(135deg, var(--nvx-800) 0%, var(--nvx-600) 100%);
        color: var(--nvx-white);
        box-shadow: 0 2px 6px rgba(10, 96, 96, .25);
    }
    .fc-seg-on:hover[b-ibtb1qox5g] { background: linear-gradient(135deg, var(--nvx-800) 0%, var(--nvx-600) 100%); color: var(--nvx-white); }
    .fc-seg-count[b-ibtb1qox5g] {
        background: var(--nvx-100);
        color: var(--nvx-800);
        border-radius: 999px;
        padding: 2px 8px;
        font-size: .62rem;
        font-weight: 700;
        min-width: 24px;
        text-align: center;
    }
    .fc-seg-on .fc-seg-count[b-ibtb1qox5g] { background: rgba(255,255,255,.20); color: var(--nvx-white); }

    /* ── Tabla ── */
    .fc-tbl-wrap[b-ibtb1qox5g] { overflow: auto; max-height: 62vh; }
    .fc-tbl[b-ibtb1qox5g] { width: 100%; border-collapse: separate; border-spacing: 0; }
    .fc-tbl thead th[b-ibtb1qox5g] {
        position: sticky; top: 0; z-index: 2;
        background: var(--nvx-800); color: var(--nvx-white);
        font-size: .64rem; font-weight: 700;
        letter-spacing: .06em; text-transform: uppercase;
        text-align: left; white-space: nowrap;
        padding: 10px 12px;
    }
    .fc-tbl tbody td[b-ibtb1qox5g] {
        font-size: .76rem; color: var(--nvx-gray-600);
        padding: 7px 12px; white-space: nowrap;
        border-bottom: 1px solid var(--nvx-100);
    }
    .fc-tbl tbody tr:nth-child(even)[b-ibtb1qox5g] { background: var(--nvx-50); }
    .fc-tbl tbody tr:hover[b-ibtb1qox5g] { background: var(--nvx-100); }
    .fc-idx[b-ibtb1qox5g] {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 22px; height: 22px; border-radius: 6px;
        background: var(--nvx-100); color: var(--nvx-800);
        font-size: .65rem; font-weight: 700;
    }

    /* ── Vacio ── */
    .fc-empty[b-ibtb1qox5g] {
        padding: 56px 24px; text-align: center;
        color: var(--nvx-gray-400); font-size: .85rem; font-weight: 500;
    }

    /* ── Resumen (filas etiqueta / valor) ── */
    .fc-res-row[b-ibtb1qox5g] {
        display: flex; align-items: center; justify-content: space-between;
        padding: 11px 18px; border-bottom: 1px solid var(--nvx-100);
    }
    .fc-res-row:last-child[b-ibtb1qox5g] { border-bottom: none; }
    .fc-res-lbl[b-ibtb1qox5g] {
        font-size: .68rem; font-weight: 700;
        letter-spacing: .08em; color: var(--nvx-gray-600);
    }
    .fc-res-val[b-ibtb1qox5g] { font-size: .95rem; font-weight: 800; color: var(--nvx-800); }

/* ── Lo que estaba como estilo en línea ───────────────────────────────── */

.flu-t-md[b-ibtb1qox5g]        { font-size: 1rem; }
.flu-t-sm[b-ibtb1qox5g]        { font-size: var(--nvx-text-sm); }
.flu-t-sm-fuerte[b-ibtb1qox5g] { font-size: var(--nvx-text-sm); font-weight: 700; letter-spacing: .05em; }
.flu-mb[b-ibtb1qox5g]          { margin-bottom: 18px; }

.flu-fila[b-ibtb1qox5g] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flu-cab[b-ibtb1qox5g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
}

.flu-fondo[b-ibtb1qox5g] {
    min-height: 100vh;
    background: var(--nvx-50);
}

.flu-tarjeta[b-ibtb1qox5g] {
    background: var(--nvx-white);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-lg);
    box-shadow: var(--nvx-shadow-sm);
}

.flu-icono[b-ibtb1qox5g] {
    background: var(--nvx-50);
    color: var(--nvx-800);
    width: 30px;
    height: 30px;
    border-radius: var(--nvx-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.flu-rotulo[b-ibtb1qox5g] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--nvx-900);
}

.flu-pill[b-ibtb1qox5g] {
    background: var(--nvx-50);
    color: var(--nvx-800);
    padding: 3px 12px;
    border-radius: 999px;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .06em;
}

.flu-vacio[b-ibtb1qox5g]  { text-align: center; padding: 30px; color: var(--nvx-gray-600); }
.flu-pad[b-ibtb1qox5g]    { padding: 16px 20px; }
.flu-mb-sm[b-ibtb1qox5g]  { margin-bottom: 12px; }
.flu-w40[b-ibtb1qox5g]    { width: 40px; }
.flu-scroll[b-ibtb1qox5g] { max-height: 420px; overflow-y: auto; }

.flu-nota[b-ibtb1qox5g] {
    margin-top: 12px;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
}

.flu-aviso[b-ibtb1qox5g] {
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--nvx-100);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-md);
}

.flu-tarjeta[b-ibtb1qox5g] {
    border-radius: var(--nvx-r-lg);
    overflow: hidden;
    margin-bottom: var(--nvx-space-md);
}

.flu-cabecera[b-ibtb1qox5g] {
    background: var(--nvx-800);
    color: var(--nvx-white);
    padding: 11px 20px;
    font-weight: 600;
    font-size: var(--nvx-text-sm);
    letter-spacing: .07em;
    display: flex;
    align-items: center;
}

.flu-tarjeta-plana[b-ibtb1qox5g] {
    background: var(--nvx-white);
    border: 1px solid var(--nvx-200);
    border-radius: var(--nvx-r-lg);
    box-shadow: var(--nvx-shadow-sm);
}

.flu-cab-plana[b-ibtb1qox5g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
}

.flu-cab-arriba[b-ibtb1qox5g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.flu-rejilla[b-ibtb1qox5g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-sm);
}

.flu-acciones[b-ibtb1qox5g] {
    display: flex;
    gap: 12px;
    margin-top: var(--nvx-space-md);
    flex-wrap: wrap;
}

.flu-t-lg[b-ibtb1qox5g]        { font-size: 1.1rem; }
.flu-acento[b-ibtb1qox5g]      { color: var(--nvx-700); }
.flu-sin-mb[b-ibtb1qox5g]      { margin-bottom: 0; }
.flu-icono-vacio[b-ibtb1qox5g] { font-size: 2.6rem; color: var(--nvx-gray-400); }

.flu-rotulo-osc[b-ibtb1qox5g] {
    color: var(--nvx-900);
    font-weight: 600;
    font-size: var(--nvx-text-sm);
}

.flu-mini-rotulo[b-ibtb1qox5g] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .10em;
    opacity: .85;
}

.flu-cab-borde[b-ibtb1qox5g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--nvx-200);
}

/* ── Flujo semanal ── */
.fc-neg[b-ibtb1qox5g] { color: var(--nvx-danger-text) !important; }
.fc-fuerte[b-ibtb1qox5g] { font-weight: 700; }
.fc-nota[b-ibtb1qox5g] {
    width: 100%;
    min-width: 220px;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-sm);
    padding: 4px 8px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-800);
    background: transparent;
}
.fc-nota:focus[b-ibtb1qox5g] { outline: none; border-color: var(--nvx-500); background: var(--nvx-white); box-shadow: var(--nvx-focus-ring); }
.fc-flujo-pie[b-ibtb1qox5g] {
    padding: 10px 18px;
    border-top: 1px solid var(--nvx-100);
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}
/* /Components/Pages/Reportes/Indicadores.razor.rz.scp.css */
.pagina[b-yvaxixh4lv] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

[b-yvaxixh4lv] .ind__panel {
    padding-top: var(--nvx-space-md);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pagina[b-yvaxixh4lv]  .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--nvx-border);
}

/* La fila de totales que el resumen agrega al final de cada indicador. */
.pagina[b-yvaxixh4lv]  .ind__total > td {
    background: var(--nvx-50);
    border-top: 2px solid var(--nvx-300);
    font-weight: 600;
}
/* /Components/Pages/Reportes/RendimientoOperativo.razor.rz.scp.css */
/* Rendimiento operativo por analista.

   Este CSS estaba en wwwroot/css/rendimiento.css, cargado con un <link> en App.razor:
   un sistema de estilos paralelo, global, con los colores escritos a mano. Ahora
   es CSS aislado de la página y todo el color sale de los tokens de
   nvx-theme.css.

   Las clases conservan el prefijo nc- para no tocar el marcado: con CSS aislado
   ya no pueden chocar con las de otra página. */

/* ══════════════════════════════════════════
   NOVACOMEX DESIGN SYSTEM — Rendimiento
══════════════════════════════════════════ */
/* Las variables de esta página, derivadas de los tokens de nvx-theme.css.

   Antes eran un :root propio con veintitantos colores a mano —un sistema
   paralelo completo, con su rampa, sus semánticos, sus sombras y sus radios—.
   Los nombres se conservan para no reescribir 300 líneas de reglas; lo que
   cambia es que ahora TODOS salen del sistema.

   Van sobre .rop y no sobre :root porque el CSS aislado de Blazor no puede
   marcar :root: el atributo de ámbito no llega a la raíz del documento. */
.rop[b-tqd5bf97bv] {
  --nc-teal:        var(--nvx-500);
  --nc-teal-light:  var(--nvx-300);
  --nc-teal-dark:   var(--nvx-700);
  --nc-teal-deep:   var(--nvx-800);
  --nc-teal-ghost:  var(--nvx-50);
  --nc-teal-mist:   var(--nvx-gray-50);
  --bg-surface:     var(--nvx-white);
  --bg-surface2:    var(--nvx-50);
  --bg-surface3:    var(--nvx-100);
  --border-base:    var(--nvx-200);
  --border-light:   var(--nvx-100);
  --border-strong:  var(--nvx-300);
  --text-primary:   var(--nvx-gray-800);
  --text-secondary: var(--nvx-gray-600);
  --text-muted:     var(--nvx-gray-600);
  --text-faint:     var(--nvx-gray-400);
  --s-green:        var(--nvx-success);
  --s-green-bg:     var(--nvx-success-bg);
  --s-green-border: var(--nvx-success-bd);
  --s-amber:        var(--nvx-warning);
  --s-amber-bg:     var(--nvx-warning-bg);
  --s-amber-border: var(--nvx-warning-bd);
  --s-red:          var(--nvx-danger);
  --s-red-bg:       var(--nvx-danger-bg);
  --s-red-border:   var(--nvx-danger-bd);
  --shadow-sm:      var(--nvx-shadow-sm);
  --shadow-teal:    var(--nvx-shadow-md);
  --font-ui:        var(--nvx-font);
  --font-mono:      var(--nvx-font-mono);
  --r-sm:   var(--nvx-r-sm);
  --r-md:   var(--nvx-r-md);
  --r-lg:   var(--nvx-r-lg);
  --r-pill: 999px;

  max-width: 1500px;
  margin: 0 auto;
  padding: 18px var(--nvx-space-lg) 40px;
}

@keyframes nc-fade-b-tqd5bf97bv {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-live-b-tqd5bf97bv {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nvx-500) 50%, transparent); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

/* ── TITLE BAND ── */
.nc-titleband[b-tqd5bf97bv] {
  background: var(--bg-surface);
  border-bottom: 2px solid var(--border-base);
  min-height: 48px;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.nc-titleband-left[b-tqd5bf97bv] { display: flex; align-items: center; gap: 12px; }
.nc-titleband-accent[b-tqd5bf97bv] {
  width: 4px; height: 28px;
  background: linear-gradient(180deg, var(--nc-teal) 0%, var(--nc-teal-dark) 100%);
  border-radius: var(--r-pill); flex-shrink: 0;
}
.nc-titleband h1[b-tqd5bf97bv] {
  font-weight: 700; font-size: 15px;
  color: var(--text-primary); letter-spacing: 0.2px; margin: 0;
}
.nc-titleband-meta[b-tqd5bf97bv] {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-muted);
}
.nc-live-dot[b-tqd5bf97bv] {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nc-teal);
  animation: pulse-live-b-tqd5bf97bv 2s infinite; flex-shrink: 0;
}

/* ── FILTROS Y AVISOS ──
   Los filtros, los botones y la alerta se dibujaban a mano con <select> e
   <input> nativos. Ahora son NvxFilterBar y MudAlert, que traen su estilo. */
.rop[b-tqd5bf97bv]  .rop-aviso { margin-top: 14px; }

/* ── KPI STRIP ── */
.nc-kpis[b-tqd5bf97bv] {
  margin-top: 14px;
  display: grid; grid-template-columns: repeat(6,1fr);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-base);
}
@media(max-width:1100px){ .nc-kpis[b-tqd5bf97bv] { grid-template-columns: repeat(3,1fr); } }
@media(max-width:650px)  { .nc-kpis[b-tqd5bf97bv] { grid-template-columns: repeat(2,1fr); } }
.nc-kpi[b-tqd5bf97bv] {
  padding: 18px 22px; border-right: 1px solid var(--border-light);
  position: relative; transition: background 0.18s; cursor: default;
}
.nc-kpi:last-child[b-tqd5bf97bv] { border-right: none; }
.nc-kpi:hover[b-tqd5bf97bv] { background: var(--nc-teal-mist); }
.nc-kpi[b-tqd5bf97bv]::after {
  content: ''; position: absolute; bottom: 0; left: 22px; right: 22px;
  height: 2px; background: var(--nc-teal); border-radius: var(--r-pill);
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.nc-kpi:hover[b-tqd5bf97bv]::after { transform: scaleX(1); }
.nc-kpi-label[b-tqd5bf97bv] {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--text-muted); margin-bottom: 8px;
}
.nc-kpi-val[b-tqd5bf97bv] {
  font-weight: 800; font-size: 28px;
  color: var(--nc-teal-dark); line-height: 1; letter-spacing: -0.5px;
}
.nc-kpi-val.warn[b-tqd5bf97bv]   { color: var(--s-amber); }
.nc-kpi-val.danger[b-tqd5bf97bv] { color: var(--s-red); }
.nc-kpi-val.sm[b-tqd5bf97bv]     { font-size: 15px; margin-top: 4px; }
.nc-kpi-sub[b-tqd5bf97bv] { font-size: 10px; color: var(--text-faint); margin-top: 5px; line-height: 1.3; }

/* ── LAYOUT ── */
.nc-body[b-tqd5bf97bv] { padding: 24px 32px; display: flex; flex-direction: column; gap: 20px; }
.nc-row[b-tqd5bf97bv]  { display: grid; gap: 20px; }
.nc-row-2[b-tqd5bf97bv]   { grid-template-columns: 1fr 1fr; }
.nc-row-1-2[b-tqd5bf97bv] { grid-template-columns: 1fr 2fr; }
@media(max-width:960px) {
  .nc-row-2[b-tqd5bf97bv], .nc-row-1-2[b-tqd5bf97bv] { grid-template-columns: 1fr; }
}

/* ── CARDS ── */
.nc-card[b-tqd5bf97bv] {
  background: var(--bg-surface); border: 1px solid var(--border-base);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); animation: nc-fade-b-tqd5bf97bv 0.35s ease both;
}
.nc-card-head[b-tqd5bf97bv] {
  background: var(--bg-surface2); border-bottom: 1px solid var(--border-light);
  padding: 13px 20px; display: flex; align-items: center; justify-content: space-between;
}
.nc-card-title[b-tqd5bf97bv] {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-secondary);
}
.nc-card-dot[b-tqd5bf97bv] { width: 8px; height: 8px; border-radius: 50%; background: var(--nc-teal); flex-shrink: 0; }
.nc-card-tag[b-tqd5bf97bv] { font-size: 9px; color: var(--text-faint); letter-spacing: 1px; text-transform: uppercase; }
.nc-card-body[b-tqd5bf97bv] { padding: 20px; }
.nc-card-body.flush[b-tqd5bf97bv] { padding: 0; }
.nc-chart-box[b-tqd5bf97bv] { position: relative; height: 280px; }
.nc-chart-box.tall[b-tqd5bf97bv] { height: 340px; }

/* ── TABLE ── */
.nc-tbl-wrap[b-tqd5bf97bv] { overflow-x: auto; }
.nc-tbl[b-tqd5bf97bv] { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.nc-tbl thead tr[b-tqd5bf97bv] { background: var(--bg-surface2); }
.nc-tbl th[b-tqd5bf97bv] {
  font-weight: 700; font-size: 9px;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--nc-teal-dark); padding: 11px 12px;
  border-bottom: 2px solid var(--border-base);
  white-space: nowrap; text-align: center;
}
.nc-tbl th:nth-child(2)[b-tqd5bf97bv] { text-align: left; }
.nc-tbl td[b-tqd5bf97bv] {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-primary);
  padding: 9px 12px; border-bottom: 1px solid var(--border-light);
  text-align: center; transition: background 0.12s;
}
.nc-tbl td:nth-child(2)[b-tqd5bf97bv] { text-align: left; }
.nc-tbl tbody tr:hover td[b-tqd5bf97bv] { background: var(--nc-teal-ghost); }
.nc-tbl tfoot td[b-tqd5bf97bv] {
  background: var(--bg-surface3); border-top: 2px solid var(--nc-teal);
  font-weight: 700; font-size: 11px; color: var(--text-secondary);
}
.nc-tbl tfoot td:nth-child(2)[b-tqd5bf97bv] { font-weight: 800; color: var(--nc-teal-dark); }

/* ── RANK BADGE ── */
.nc-rank[b-tqd5bf97bv] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-weight: 800; font-size: 10px; flex-shrink: 0;
}
.r1[b-tqd5bf97bv] { background: var(--nvx-warning); color: var(--nvx-warning-text); }
.r2[b-tqd5bf97bv] { background: var(--nvx-gray-200); color: var(--nvx-gray-800); }
.r3[b-tqd5bf97bv] { background: var(--nvx-warning); color: var(--nvx-danger-text); }
.rn[b-tqd5bf97bv] { background: var(--bg-surface3); color: var(--text-faint); }

/* ── BADGES ── */
.nc-badge[b-tqd5bf97bv] {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-pill);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
}
.nc-badge-sr[b-tqd5bf97bv] { background: var(--nc-teal-ghost); color: var(--nc-teal-dark); border: 1px solid var(--border-strong); }
.nc-badge-jr[b-tqd5bf97bv] { background: rgba(13,38,38,0.06); color: var(--text-secondary); border: 1px solid var(--border-base); }

.nc-pct[b-tqd5bf97bv] {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 10px;
}
.pct-h[b-tqd5bf97bv] { background: var(--s-green-bg);  color: var(--s-green);  border: 1px solid var(--s-green-border); }
.pct-m[b-tqd5bf97bv] { background: var(--s-amber-bg);  color: var(--s-amber);  border: 1px solid var(--s-amber-border); }
.pct-l[b-tqd5bf97bv] { background: var(--s-red-bg);    color: var(--s-red);    border: 1px solid var(--s-red-border);   }

/* ── PROGRESS ── */
.nc-track[b-tqd5bf97bv] {
  background: var(--bg-surface3); border-radius: var(--r-pill);
  height: 14px; overflow: hidden; min-width: 90px;
}
.nc-track.slim[b-tqd5bf97bv] { height: 8px; }
.nc-fill[b-tqd5bf97bv] {
  height: 100%; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 5px; font-size: 8px; font-weight: 700; color: white;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1); min-width: 0;
}
.nc-fill.high[b-tqd5bf97bv]   { background: linear-gradient(90deg, var(--nc-teal-dark), var(--nc-teal)); }
.nc-fill.medium[b-tqd5bf97bv] { background: linear-gradient(90deg, var(--nvx-warning), var(--nvx-warning)); }
.nc-fill.low[b-tqd5bf97bv]    { background: linear-gradient(90deg, var(--nvx-danger), var(--nvx-danger)); }

/* ── OP CHIPS ── */
.nc-op[b-tqd5bf97bv] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 4px; border-radius: var(--r-sm);
  font-size: 10px; font-weight: 700;
}
.nc-op.on[b-tqd5bf97bv]  { background: var(--nc-teal-ghost); color: var(--nc-teal-dark); border: 1px solid var(--border-strong); }
.nc-op.off[b-tqd5bf97bv] { background: transparent; color: var(--text-faint); }

/* ── PERSONA CELL ── */
.nc-person-name[b-tqd5bf97bv] { font-weight: 600; font-size: 12px; color: var(--text-primary); }

/* ── RANKING ── */
.nc-ranking-row[b-tqd5bf97bv] {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-light);
}
.nc-ranking-row:last-child[b-tqd5bf97bv] { border-bottom: none; }
.nc-ranking-info[b-tqd5bf97bv] { flex: 1; min-width: 0; }
.nc-ranking-name[b-tqd5bf97bv] {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nc-ranking-pct[b-tqd5bf97bv] { font-weight: 800; font-size: 13px; min-width: 52px; text-align: right; }

/* Lo que estaba como estilo en linea. Los de ancho y alto calculados se
   quedan en el marcado: dependen de un valor de C# y no caben en una hoja. */
.rop-dato[b-tqd5bf97bv]          { font-weight: 700; color: var(--nvx-700); }
.rop-dato--fuerte[b-tqd5bf97bv]  { font-weight: 800; }
.rop-fuerte[b-tqd5bf97bv]        { font-weight: 700; }
.rop-mb[b-tqd5bf97bv]            { margin-bottom: var(--nvx-space-md); }
.rop-mt[b-tqd5bf97bv]            { margin-top: var(--nvx-space-md); }
.rop-mt-lg[b-tqd5bf97bv]         { margin-top: var(--nvx-space-xl); }
.rop-mt-xs[b-tqd5bf97bv]         { margin-top: 4px; }
.rop-pad[b-tqd5bf97bv]           { padding: 12px 20px; }
.rop-vacio[b-tqd5bf97bv]         { text-align: center; padding: 60px; color: var(--nvx-gray-600); }

.rop-w36[b-tqd5bf97bv]     { width: 36px; }
.rop-minw100[b-tqd5bf97bv] { min-width: 100px; }
.rop-semi[b-tqd5bf97bv]    { font-weight: 600; }
/* /Components/Pages/Reportes/ReporteAdjuntos.razor.rz.scp.css */
/* Reporte de adjuntos faltantes. */

.pagina[b-nc354y00g6] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* /Components/Pages/Reportes/ReporteCumplimientoSeguimiento.razor.rz.scp.css */
/* Reporte de cumplimiento del seguimiento del D.O.

   Quince columnas en la vista por D.O., así que la página es ancha; el detalle
   de cada D.O. se abre debajo de su fila. */

.pagina[b-9ab3n6h10t] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Tarjetas: resumen y filtro por grupo ───────────────────────────────── */
.tarjetas[b-9ab3n6h10t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.tarjeta[b-9ab3n6h10t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    text-align: left;
    font: inherit;
    background: var(--nvx-white);
    border: var(--nvx-border);
    border-left-width: 4px;
    border-radius: var(--nvx-r-md);
    box-shadow: var(--nvx-shadow-sm);
    cursor: pointer;
    transition: box-shadow var(--nvx-transition), border-color var(--nvx-transition);
}

.tarjeta:hover[b-9ab3n6h10t] { box-shadow: var(--nvx-shadow); }
.tarjeta:focus-visible[b-9ab3n6h10t] { outline: none; box-shadow: var(--nvx-focus-ring); }

.tarjeta--todas[b-9ab3n6h10t]  { border-left-color: var(--nvx-700); }
.tarjeta--bien[b-9ab3n6h10t]   { border-left-color: var(--nvx-success); }
.tarjeta--atraso[b-9ab3n6h10t] { border-left-color: var(--nvx-danger); }
.tarjeta--falta[b-9ab3n6h10t]  { border-left-color: var(--nvx-warning); }

/* La activa se nota por el fondo, no sólo por el color del borde. */
.tarjeta--activa[b-9ab3n6h10t] { background: var(--nvx-50); border-color: var(--nvx-500); }
.tarjeta--activa.tarjeta--bien[b-9ab3n6h10t]   { background: var(--nvx-success-bg); }
.tarjeta--activa.tarjeta--atraso[b-9ab3n6h10t] { background: var(--nvx-danger-bg); }
.tarjeta--activa.tarjeta--falta[b-9ab3n6h10t]  { background: var(--nvx-warning-bg); }

.tarjeta__titulo[b-9ab3n6h10t] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nvx-gray-600);
}

.tarjeta__valor[b-9ab3n6h10t] {
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-h2);
    font-weight: 700;
    color: var(--nvx-gray-800);
    font-variant-numeric: tabular-nums;
}

.tarjeta__sub[b-9ab3n6h10t] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

/* ── Filas ──────────────────────────────────────────────────────────────── */
.fila[b-9ab3n6h10t] { cursor: pointer; }

.sub[b-9ab3n6h10t] {
    display: block;
    margin-top: 2px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

.responsables[b-9ab3n6h10t] { white-space: nowrap; }

.vacio[b-9ab3n6h10t],
.num--cero[b-9ab3n6h10t] { color: var(--nvx-gray-400); }

.num--ok[b-9ab3n6h10t]     { color: var(--nvx-success-text); font-weight: 700; }
.num--mal[b-9ab3n6h10t]    { color: var(--nvx-danger-text); font-weight: 700; }
.num--alerta[b-9ab3n6h10t] { color: var(--nvx-warning-text); font-weight: 700; }

/* % de cumplimiento: la barra acompaña a la cifra, nunca la sustituye. */
.pct[b-9ab3n6h10t] { white-space: nowrap; }

.barra[b-9ab3n6h10t] {
    display: inline-block;
    width: 60px;
    height: 7px;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 4px;
    background: var(--nvx-gray-200);
    overflow: hidden;
}

.barra__avance[b-9ab3n6h10t] { display: block; height: 100%; border-radius: 4px; }
.barra__avance--alto[b-9ab3n6h10t]  { background: var(--nvx-success); }
.barra__avance--medio[b-9ab3n6h10t] { background: var(--nvx-warning); }
.barra__avance--bajo[b-9ab3n6h10t]  { background: var(--nvx-danger); }

/* ── Detalle desplegado ─────────────────────────────────────────────────── */
.detalle > td[b-9ab3n6h10t] {
    padding: 8px 12px 14px 46px;
    background: var(--nvx-gray-50);
}

.det[b-9ab3n6h10t] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nvx-text-sm);
    background: var(--nvx-white);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-sm);
}

.det th[b-9ab3n6h10t] {
    padding: 6px 8px;
    text-align: left;
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    color: var(--nvx-gray-600);
    background: var(--nvx-gray-100);
    border-bottom: var(--nvx-border);
}

.det td[b-9ab3n6h10t] {
    padding: 5px 8px;
    border-bottom: 1px solid var(--nvx-gray-100);
    vertical-align: top;
}
/* /Components/Pages/Reportes/ReporteDoTransaccional.razor.rz.scp.css */
/* Reporte de D.O. transaccionales: el padre se abre debajo de su fila. */

.pagina[b-rg5jf518wz] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.indicacion[b-rg5jf518wz] {
    margin: 0;
    padding: 26px 0;
    text-align: center;
    color: var(--nvx-gray-600);
}

.fila[b-rg5jf518wz] { cursor: pointer; }

.sin-corte[b-rg5jf518wz] { white-space: nowrap; }

.sub[b-rg5jf518wz] {
    display: block;
    margin-top: 2px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

/* ── Detalle desplegado: el D.O. padre ──────────────────────────────────── */
.detalle > td[b-rg5jf518wz] {
    padding: 8px 12px 14px 46px;
    background: var(--nvx-gray-50);
}

.det[b-rg5jf518wz] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nvx-text-sm);
    background: var(--nvx-white);
    border: var(--nvx-border);
    border-radius: var(--nvx-r-sm);
}

.det th[b-rg5jf518wz] {
    padding: 6px 8px;
    text-align: left;
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    color: var(--nvx-gray-600);
    background: var(--nvx-gray-100);
    border-bottom: var(--nvx-border);
}

.det td[b-rg5jf518wz] {
    padding: 5px 8px;
    border-bottom: 1px solid var(--nvx-gray-100);
    vertical-align: top;
}
/* /Components/Pages/Reportes/ReporteEstadosDo.razor.rz.scp.css */
/* Reporte de estados del D.O.

   La tabla puede traer muchas columnas —son las que tenga la vista—, asi que el
   ancho maximo es mayor que el de una pagina de formulario. */

.pagina[b-n2ancxk8j3] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* /Components/Pages/Reportes/ReporteListaChequeoFacturacion.razor.rz.scp.css */
/* Reporte de solicitudes de facturacion.

   Catorce columnas y varias con dos lineas, asi que la pagina es mas ancha que
   una de formulario y el detalle secundario va en un tamano menor. */

.pagina[b-rbrputujpo] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Segunda linea de una celda: la fecha bajo el nombre, el conteo bajo la
   factura. Nunca es el dato principal. */
.sub[b-rbrputujpo] {
    display: block;
    margin-top: 2px;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

/* La observacion es texto libre del usuario: puede venir larga y con saltos.
   Se respeta el salto y se corta la palabra antes que estirar la tabla. */
.obs[b-rbrputujpo] {
    display: inline-block;
    max-width: 260px;
    white-space: pre-wrap;
    word-break: break-word;
}

.vacio[b-rbrputujpo] {
    color: var(--nvx-gray-400);
}
/* /Components/Pages/Reportes/ReportePorFechas.razor.rz.scp.css */
.pagina[b-13nxnwoeqg] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* /Components/Pages/Reportes/ReporteProductos.razor.rz.scp.css */
.pagina[b-j5iar5ikat] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Indicadores ──────────────────────────────────────────────────────────
   La rejilla se ajusta sola. Nada de un número fijo de columnas: con cuatro
   tarjetas duras, la pantalla se rompe en un portátil angosto. */
.rp__kpis[b-j5iar5ikat] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nvx-space-md);
}

.rp__kpi[b-j5iar5ikat] {
    background: #fff;
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-lg);
    box-shadow: var(--nvx-shadow-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 96px;
}

/* El total va en --nvx-800, no en el turquesa de marca: lleva texto blanco
   encima y --nvx-500 no da el contraste que eso exige. */
.rp__kpi--total[b-j5iar5ikat] {
    background: var(--nvx-800);
    border-color: transparent;
    color: #fff;
}

.rp__kpi-top[b-j5iar5ikat] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.rp__kpi-clave[b-j5iar5ikat] {
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--nvx-gray-600);
}

.rp__kpi--total .rp__kpi-clave[b-j5iar5ikat],
.rp__kpi--total .rp__kpi-pie[b-j5iar5ikat] {
    color: rgba(255, 255, 255, .85);
}

.rp__kpi-icono[b-j5iar5ikat] {
    background: var(--nvx-50);
    color: var(--nvx-700);
    width: 28px;
    height: 28px;
    border-radius: var(--nvx-r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp__kpi--total .rp__kpi-icono[b-j5iar5ikat] {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.rp__kpi-valor[b-j5iar5ikat] {
    font-family: var(--nvx-font-mono);
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--nvx-800);
}

.rp__kpi--total .rp__kpi-valor[b-j5iar5ikat] { color: #fff; }

.rp__kpi-pie[b-j5iar5ikat] {
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-600);
}

/* ── Tabla ────────────────────────────────────────────────────────────────
   Los <th> y <td> llegan por RenderFragment, así que no llevan el atributo de
   ámbito del componente: sin ::deep estas reglas no los alcanzarían. */
.pagina[b-j5iar5ikat]  .rp__th-fila,
.pagina[b-j5iar5ikat]  .rp__fila {
    width: 44px;
    text-align: center;
    color: var(--nvx-gray-600);
    font-variant-numeric: tabular-nums;
}

.pagina[b-j5iar5ikat]  .rp__th-unidad,
.pagina[b-j5iar5ikat]  .rp__unidad {
    text-align: center;
    white-space: nowrap;
}
/* /Components/Pages/Reportes/SeguimientoOperacion.razor.rz.scp.css */
.pagina[b-cj8ly9g9pr] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* /Components/Pages/Tesoreria/AutorizacionPagos.razor.rz.scp.css */
.pagina[b-iwvr5tdo8f] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Los <th> y <td> llegan por RenderFragment: sin ::deep no los alcanzaría. */
.pagina[b-iwvr5tdo8f]  .aut__fila { cursor: pointer; }

/* El proveedor escogido manda sobre la tabla de abajo: tiene que verse cuál es. */
.pagina[b-iwvr5tdo8f]  .aut__fila--sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}

.pagina[b-iwvr5tdo8f]  .aut__col-chk {
    width: 44px;
    text-align: center;
}

.pagina[b-iwvr5tdo8f]  .aut__col-acc {
    width: 88px;
    text-align: right;
    white-space: nowrap;
}

/* Una causación ya autorizada sigue a la vista —hay que poder quitarle la
   autorización—, pero no compite con las que están por decidir. */
.pagina[b-iwvr5tdo8f]  .aut__autorizada > td {
    background: var(--nvx-gray-50);
}

/* Quién autorizó y cuándo. El sistema anterior no lo guardaba en ninguna parte. */
.pagina[b-iwvr5tdo8f]  .aut__quien {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
    margin-top: 2px;
    white-space: nowrap;
}

.aut__sel[b-iwvr5tdo8f] {
    color: var(--nvx-800);
}
/* /Components/Pages/Tesoreria/Causaciones.razor.rz.scp.css */
.pagina[b-9a1ddk2hjq] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Los campos del encabezado y los del renglón, en una rejilla que se parte
   sola. El formulario anterior los reparte en tablas de ancho fijo. */
.cau__rejilla[b-9a1ddk2hjq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--nvx-space-md) var(--nvx-space-sm);
    align-items: start;
}

.cau__ancho[b-9a1ddk2hjq]  { grid-column: span 2; }
.cau__ancho3[b-9a1ddk2hjq] { grid-column: span 3; }

@media (max-width: 900px) {
    .cau__ancho[b-9a1ddk2hjq], .cau__ancho3[b-9a1ddk2hjq] { grid-column: span 1; }
}

/* Encabezado de bloque. */
.cau__seccion[b-9a1ddk2hjq] {
    margin-top: var(--nvx-space-lg);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--nvx-border);
    color: var(--nvx-800);
    font-size: var(--nvx-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Los totales. No se escriben: los calcula el procedimiento a partir de los
   renglones, y por eso se muestran como cifras y no como campos. */
.cau__totales[b-9a1ddk2hjq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-sm);
}

.cau__total[b-9a1ddk2hjq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
    background: var(--nvx-gray-50);
}

.cau__total--neto[b-9a1ddk2hjq] {
    border-color: var(--nvx-300);
    background: var(--nvx-50);
}

.cau__rot[b-9a1ddk2hjq] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.cau__cifra[b-9a1ddk2hjq] {
    color: var(--nvx-800);
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-body);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* El neto del renglón, junto a sus campos. */
.cau__neto[b-9a1ddk2hjq] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.cau__marcas[b-9a1ddk2hjq],
.cau__siglas[b-9a1ddk2hjq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-xs) var(--nvx-space-lg);
    margin-top: var(--nvx-space-sm);
}

.cau__estados[b-9a1ddk2hjq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cau__acciones[b-9a1ddk2hjq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-lg);
}

.cau__acc[b-9a1ddk2hjq] { white-space: nowrap; }

/* Se abre la causación pinchando su fila. */
.pagina[b-9a1ddk2hjq]  .cau__fila { cursor: pointer; }

.pagina[b-9a1ddk2hjq]  .cau__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Tesoreria/CausacionesSinConfirmar.razor.rz.scp.css */
.pagina[b-9jfo013bl6] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* /Components/Pages/Tesoreria/DlgAnularRecibo.razor.rz.scp.css */
.anular[b-4lwb9npedm] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: 0;
}

.anular__que[b-4lwb9npedm] {
    margin: 0;
    color: var(--nvx-gray-800);
}

.anular__que b[b-4lwb9npedm] { color: var(--nvx-800); }

.anular__nota[b-4lwb9npedm] {
    margin: 0;
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}
/* /Components/Pages/Tesoreria/DlgAsentarPago.razor.rz.scp.css */
.asentar[b-gc40hfzyzj] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: 0;
}

.asentar__fila2[b-gc40hfzyzj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--nvx-space-md);
}

.asentar__resumen[b-gc40hfzyzj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--nvx-space-md);
    padding: var(--nvx-space-md);
    background: var(--nvx-gray-50);
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.asentar__dato[b-gc40hfzyzj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.asentar__dato > span[b-gc40hfzyzj] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.asentar__dato > b[b-gc40hfzyzj] {
    color: var(--nvx-800);
    overflow-wrap: anywhere;
}

.asentar__dato--neto > b[b-gc40hfzyzj] {
    font-size: var(--nvx-text-h3);
    font-weight: 800;
}

/* Lo que de verdad se asienta, después del descuento. */
.asentar__total[b-gc40hfzyzj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--nvx-space-md);
    background: var(--nvx-50);
    border: 1px solid var(--nvx-300);
    border-radius: var(--nvx-r-md);
}

.asentar__total > span[b-gc40hfzyzj] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nvx-800);
}

.asentar__total > b[b-gc40hfzyzj] {
    color: var(--nvx-800);
    font-size: var(--nvx-text-h2);
    font-weight: 800;
    line-height: 1.1;
}

.asentar__total > small[b-gc40hfzyzj] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
}
/* /Components/Pages/Tesoreria/DlgDescuentoCausacion.razor.rz.scp.css */
.dscto[b-wl7q35krpe] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
    min-width: 0;
}

.dscto__factura[b-wl7q35krpe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dscto__factura > span[b-wl7q35krpe] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dscto__factura > b[b-wl7q35krpe] {
    color: var(--nvx-800);
}

.dscto__cuentas[b-wl7q35krpe] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-xs);
    padding: var(--nvx-space-md);
    background: var(--nvx-gray-50);
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.dscto__cuentas > div[b-wl7q35krpe] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nvx-space-md);
}

.dscto__cuentas span[b-wl7q35krpe] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

.dscto__cuentas b[b-wl7q35krpe] {
    color: var(--nvx-gray-800);
}

/* Lo que de verdad se va a pagar. */
.dscto__resultado[b-wl7q35krpe] {
    padding-top: var(--nvx-space-xs);
    border-top: 1px solid var(--nvx-border);
}

.dscto__resultado span[b-wl7q35krpe] {
    color: var(--nvx-800);
    font-weight: 600;
}

.dscto__resultado b[b-wl7q35krpe] {
    color: var(--nvx-800);
    font-size: var(--nvx-text-h3);
    font-weight: 800;
}
/* /Components/Pages/Tesoreria/IntegracionMekano.razor.rz.scp.css */
.pagina[b-asf20v3new] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.itg__acciones[b-asf20v3new] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nvx-space-sm);
    margin-top: var(--nvx-space-md);
}
/* /Components/Pages/Tesoreria/LogMekano.razor.rz.scp.css */
.pagina[b-9hz79li1z3] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.log__aviso[b-9hz79li1z3] {
    margin: 0 0 var(--nvx-space-sm);
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
}

/* Los JSON. Se leen, no se editan: monoespaciados y con su propio scroll, para
   que la página nunca se desplace de lado. */
.log__json[b-9hz79li1z3] {
    max-height: 46vh;
    margin: 0;
    padding: var(--nvx-space-md);
    overflow: auto;
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
    background: var(--nvx-gray-50);
    color: var(--nvx-gray-800);
    font-family: var(--nvx-font-mono);
    font-size: var(--nvx-text-xs);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

[b-9hz79li1z3] .log__panel { padding-top: var(--nvx-space-md); }

.pagina[b-9hz79li1z3]  .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--nvx-border);
}

/* Se abre el detalle pinchando la fila. */
.pagina[b-9hz79li1z3]  .log__fila { cursor: pointer; }

.pagina[b-9hz79li1z3]  .log__sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}
/* /Components/Pages/Tesoreria/PagosTerceros.razor.rz.scp.css */
.pagina[b-kkuzvlz97j] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Las dos modalidades del formulario anterior, que allá eran una casilla que
   encendía y apagaba nueve controles desde cuatro manejadores. */
.pagina[b-kkuzvlz97j]  .pag__panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: var(--nvx-space-md);
}

.pagina[b-kkuzvlz97j]  .pag__fila { cursor: pointer; }

.pagina[b-kkuzvlz97j]  .pag__fila--sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}

.pagina[b-kkuzvlz97j]  .pag__fila--activa > td {
    background: var(--nvx-100);
}

.pagina[b-kkuzvlz97j]  .pag__col-chk {
    width: 44px;
    text-align: center;
}

.pagina[b-kkuzvlz97j]  .pag__col-parcial {
    width: 150px;
    min-width: 130px;
}

.pagina[b-kkuzvlz97j]  .pag__col-acc {
    width: 78px;
    text-align: right;
    white-space: nowrap;
}

/* Un pago anulado se conserva a la vista: la traza es lo que hace falta para
   auditarlo. */
.pagina[b-kkuzvlz97j]  .pag__anulada > td {
    color: var(--nvx-gray-400);
}

.pagina[b-kkuzvlz97j]  .pag__anulada > td:first-child {
    text-decoration: line-through;
}

.pagina[b-kkuzvlz97j]  .pag__estados {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.pagina[b-kkuzvlz97j]  .pag__quien {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
    margin-top: 2px;
    white-space: nowrap;
}

.pagina[b-kkuzvlz97j]  .pag__concepto {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Barra de filtros de las causaciones. */
.pag__acciones[b-kkuzvlz97j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvx-space-sm);
    flex-wrap: wrap;
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    border-bottom: 1px solid var(--nvx-border);
    background: var(--nvx-gray-50);
}

.pag__acciones-izq[b-kkuzvlz97j] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    flex-wrap: wrap;
}

.pag__suc[b-kkuzvlz97j] { width: 150px; }

.pag__cuenta[b-kkuzvlz97j] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-sm);
    font-variant-numeric: tabular-nums;
}

/* ── El desglose del neto ─────────────────────────────────────────────────
   Se enseña entero a propósito: el sistema anterior sólo mostraba el
   resultado, y con él escondía que el descuento se restaba dos veces. */
.pag__neto[b-kkuzvlz97j] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(190px, 1fr) minmax(190px, auto);
    gap: var(--nvx-space-md);
    align-items: stretch;
}

.pag__desglose[b-kkuzvlz97j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-md);
    background: var(--nvx-gray-50);
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.pag__desglose > div[b-kkuzvlz97j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pag__desglose span[b-kkuzvlz97j] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nvx-gray-600);
}

.pag__desglose b[b-kkuzvlz97j] { color: var(--nvx-gray-800); }

.pag__total[b-kkuzvlz97j] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: var(--nvx-space-md);
    background: var(--nvx-50);
    border: 1px solid var(--nvx-300);
    border-radius: var(--nvx-r-md);
}

.pag__total > span[b-kkuzvlz97j] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nvx-800);
}

.pag__total > b[b-kkuzvlz97j] {
    color: var(--nvx-800);
    font-size: var(--nvx-text-h2);
    font-weight: 800;
    line-height: 1.1;
}

.pag__total > small[b-kkuzvlz97j] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
}

.pag__ir[b-kkuzvlz97j] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--nvx-space-xs);
}

.pag__aviso[b-kkuzvlz97j] {
    color: var(--nvx-warning-text);
    font-size: var(--nvx-text-xs);
    max-width: 24ch;
}

.pag__anulados[b-kkuzvlz97j] {
    color: var(--nvx-danger);
    margin-left: 6px;
}

@media (max-width: 1100px) {
    .pag__neto[b-kkuzvlz97j] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Tesoreria/RadicacionMekano.razor.rz.scp.css */
.pagina[b-7wvcdkt6uk] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rad__estados[b-7wvcdkt6uk] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rad__msg[b-7wvcdkt6uk] {
    margin: 0 0 var(--nvx-space-md);
    color: var(--nvx-gray-800);
}
/* /Components/Pages/Tesoreria/RecibosCaja.razor.rz.scp.css */
.pagina[b-0od17ur20h] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px var(--nvx-space-lg) 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pagina[b-0od17ur20h]  .rec__fila { cursor: pointer; }

.pagina[b-0od17ur20h]  .rec__fila--sel > td {
    background: var(--nvx-50);
    box-shadow: inset 3px 0 0 var(--nvx-700);
}

.pagina[b-0od17ur20h]  .rec__col-acc {
    width: 92px;
    text-align: right;
    white-space: nowrap;
}

/* Las celdas donde se escribe no se estrechan. */
.pagina[b-0od17ur20h]  .rec__col-valor {
    width: 160px;
    min-width: 140px;
}

.pagina[b-0od17ur20h]  .rec__col-ret {
    width: 130px;
    min-width: 110px;
}

/* ── El encabezado del recibo ───────────────────────────────────────────── */
.rec__form[b-0od17ur20h] {
    display: flex;
    flex-direction: column;
    gap: var(--nvx-space-md);
}

.rec__fila3[b-0od17ur20h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--nvx-space-md);
}

.rec__acciones[b-0od17ur20h] {
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    flex-wrap: wrap;
}

.rec__tipo[b-0od17ur20h] { max-width: 220px; }

/* ── Totales ─────────────────────────────────────────────────────────────
   El valor no se digita: lo calcula el sistema sumando el detalle. Se dice
   en la pantalla porque en el formulario anterior el campo salía
   deshabilitado sin ninguna explicación. */
.rec__totales[b-0od17ur20h] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr);
    gap: var(--nvx-space-md);
}

.rec__desglose[b-0od17ur20h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--nvx-space-sm);
    padding: var(--nvx-space-md);
    background: var(--nvx-gray-50);
    border: 1px solid var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

.rec__desglose > div[b-0od17ur20h] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rec__desglose span[b-0od17ur20h] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nvx-gray-600);
}

.rec__desglose b[b-0od17ur20h] { color: var(--nvx-gray-800); }

.rec__valor[b-0od17ur20h] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: var(--nvx-space-md);
    background: var(--nvx-50);
    border: 1px solid var(--nvx-300);
    border-radius: var(--nvx-r-md);
}

.rec__valor > span[b-0od17ur20h] {
    font-size: var(--nvx-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nvx-800);
}

.rec__valor > b[b-0od17ur20h] {
    color: var(--nvx-800);
    font-size: var(--nvx-text-h2);
    font-weight: 800;
    line-height: 1.1;
}

.rec__valor > small[b-0od17ur20h] {
    color: var(--nvx-gray-600);
    font-size: var(--nvx-text-xs);
}

/* ── Buscador del detalle ───────────────────────────────────────────────── */
.rec__buscador[b-0od17ur20h] {
    display: flex;
    align-items: flex-start;
    gap: var(--nvx-space-sm);
    flex-wrap: wrap;
    padding: var(--nvx-space-sm) var(--nvx-space-md);
    border-bottom: 1px solid var(--nvx-border);
    background: var(--nvx-gray-50);
}

.rec__busca[b-0od17ur20h] { width: 260px; }
.rec__trm[b-0od17ur20h]   { width: 180px; }

@media (max-width: 900px) {
    .rec__totales[b-0od17ur20h] { grid-template-columns: 1fr; }
}
/* /Components/UI/NvxBadge.razor.rz.scp.css */
.nvx-badge[b-wizfigcwvz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: var(--nvx-r-sm);
    border: 1px solid;
    font-size: var(--nvx-text-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.7;
    white-space: nowrap;
    vertical-align: middle;
}

.nvx-badge--neutral[b-wizfigcwvz] {
    background: var(--nvx-archivada-bg);
    color: var(--nvx-archivada-text);
    border-color: var(--nvx-archivada-bd);
}

.nvx-badge--brand[b-wizfigcwvz] {
    background: var(--nvx-100);
    color: var(--nvx-900);
    border-color: var(--nvx-300);
}

.nvx-badge--success[b-wizfigcwvz] {
    background: var(--nvx-success-bg);
    color: var(--nvx-success-text);
    border-color: var(--nvx-success-bd);
}

.nvx-badge--warning[b-wizfigcwvz] {
    background: var(--nvx-warning-bg);
    color: var(--nvx-warning-text);
    border-color: var(--nvx-warning-bd);
}

.nvx-badge--danger[b-wizfigcwvz] {
    background: var(--nvx-danger-bg);
    color: var(--nvx-danger-text);
    border-color: var(--nvx-danger-bd);
}

.nvx-badge--info[b-wizfigcwvz] {
    background: var(--nvx-info-bg);
    color: var(--nvx-info-text);
    border-color: var(--nvx-info-bd);
}
/* /Components/UI/NvxCard.razor.rz.scp.css */
.nvx-card[b-0tc83cy5vp] {
    background: #fff;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    box-shadow: var(--nvx-shadow-sm);
    overflow: hidden;
}

.nvx-card__head[b-0tc83cy5vp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--nvx-gray-50);
    border-bottom: 1px solid var(--nvx-gray-200);
}

.nvx-card__icon[b-0tc83cy5vp] {
    color: var(--nvx-700);
    font-size: 17px;
    flex: none;
}

.nvx-card__title[b-0tc83cy5vp] {
    margin: 0;
    font-size: var(--nvx-text-sm);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-800);
    line-height: 1.6;
}

.nvx-card__actions[b-0tc83cy5vp] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
}

.nvx-card__body[b-0tc83cy5vp] { padding: 16px 18px; }

.nvx-card__body--flush[b-0tc83cy5vp] { padding: 0; }
/* /Components/UI/NvxFilterBar.razor.rz.scp.css */
.nvx-filters[b-31ucbpvew2] {
    background: #fff;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    box-shadow: var(--nvx-shadow-sm);
    overflow: hidden;
}

/* ── Encabezado colapsable ──────────────────────────────────────────────── */
.nvx-filters__head[b-31ucbpvew2] {
    border-bottom: 1px solid var(--nvx-gray-200);
    background: var(--nvx-gray-50);
}

.nvx-filters__toggle[b-31ucbpvew2] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--nvx-text-sm);
    font-weight: 700;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    color: var(--nvx-800);
    text-align: left;
}

.nvx-filters__toggle:hover[b-31ucbpvew2] { background: var(--nvx-100); }

.nvx-filters__caret[b-31ucbpvew2],
.nvx-filters__icon[b-31ucbpvew2] {
    font-size: 17px;
    color: var(--nvx-700);
    flex: none;
}

/* ── Cuerpo ─────────────────────────────────────────────────────────────── */
.nvx-filters__body[b-31ucbpvew2] { padding: 14px; }

/* Rejilla auto-ajustable: las columnas salen del ancho disponible, no de un
   número fijo. Es lo que evita que el panel se rompa bajo 1024px. */
.nvx-filters__grid[b-31ucbpvew2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--nvx-filter-min, 220px), 1fr));
    gap: 12px 14px;
    align-items: start;
}

/* Los campos llegan como contenido hijo, así que necesitan ::deep para que
   el CSS aislado los alcance. */
.nvx-filters__grid[b-31ucbpvew2]  > * { min-width: 0; }

.nvx-filters__grid[b-31ucbpvew2]  .mud-input-control { margin-top: 0; }

/* ── Acciones ───────────────────────────────────────────────────────────── */
.nvx-filters__actions[b-31ucbpvew2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--nvx-gray-100);
}

.nvx-filters__extra[b-31ucbpvew2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.nvx-filters__spin[b-31ucbpvew2] {
    width: 15px;
    height: 15px;
    margin-right: 7px;
}
/* /Components/UI/NvxPageHeader.razor.rz.scp.css */
/* ── Común a las dos variantes ──────────────────────────────────────────── */
.nvx-head__text[b-xjv46gr14l]  { min-width: 0; }

.nvx-head__title[b-xjv46gr14l] {
    margin: 0;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: var(--nvx-tracking-tight);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.nvx-head__sub[b-xjv46gr14l] {
    margin: 2px 0 0;
    font-size: var(--nvx-text-sm);
    font-weight: 400;
    line-height: 1.4;
}

.nvx-head__actions[b-xjv46gr14l] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--nvx-space-sm);
    flex: none;
}

/* ══ BANNER — páginas en iframe, sin topbar que aporte la marca ═══════════ */
.nvx-head--banner[b-xjv46gr14l] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px var(--nvx-space-lg);
    background: var(--nvx-900);
    border-bottom: 3px solid var(--nvx-500);
    color: #fff;
}

.nvx-head--banner .nvx-head__title[b-xjv46gr14l] { color: #fff; }

/* rgba y no un token: es blanco atenuado sobre teal, no un gris de la rampa */
.nvx-head--banner .nvx-head__sub[b-xjv46gr14l] { color: rgba(255, 255, 255, .72); }

/* Superficie bajo el logo: le da el fondo que necesita para leerse sobre la
   banda oscura sin alterarle los colores. Mismo blanco que la cabecera del menú. */
.nvx-head__chip[b-xjv46gr14l] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    background: #ffffff;
    border-radius: var(--nvx-r-sm);
}

.nvx-head__logo[b-xjv46gr14l] {
    height: 27px;
    width: auto;
    display: block;
}

.nvx-head__sep[b-xjv46gr14l] {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .22);
    flex: none;
}

.nvx-head--banner .nvx-head__icon[b-xjv46gr14l] {
    color: var(--nvx-500);
    font-size: 22px;
    flex: none;
}

/* ══ INLINE — páginas dentro del shell ═══════════════════════════════════ */
.nvx-head--inline[b-xjv46gr14l] {
    background: #fff;
    border-bottom: 1px solid var(--nvx-gray-200);
}

.nvx-head__crumb[b-xjv46gr14l] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px var(--nvx-space-lg) 0;
    font-size: var(--nvx-text-xs);
    color: var(--nvx-gray-400);
}

.nvx-head__crumb b[b-xjv46gr14l] {
    color: var(--nvx-gray-800);
    font-weight: 600;
}

.nvx-head__crumb-sep[b-xjv46gr14l] { opacity: .5; }

.nvx-head__row[b-xjv46gr14l] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px var(--nvx-space-lg) 14px;
}

.nvx-head__chip[b-xjv46gr14l] {
    width: 34px;
    height: 34px;
    border-radius: var(--nvx-r-md);
    background: var(--nvx-100);
    display: grid;
    place-items: center;
    flex: none;
}

.nvx-head--inline .nvx-head__icon[b-xjv46gr14l] {
    color: var(--nvx-700);
    font-size: 19px;
}

.nvx-head--inline .nvx-head__title[b-xjv46gr14l] { color: var(--nvx-800); }
.nvx-head--inline .nvx-head__sub[b-xjv46gr14l]   { color: var(--nvx-gray-600); }

/* ── Angosto ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .nvx-head--banner[b-xjv46gr14l] { padding: 12px var(--nvx-space-md); flex-wrap: wrap; }
    .nvx-head__row[b-xjv46gr14l]    { padding: 12px var(--nvx-space-md); flex-wrap: wrap; }
    .nvx-head__crumb[b-xjv46gr14l]  { padding: 8px var(--nvx-space-md) 0; }
    .nvx-head__logo[b-xjv46gr14l], .nvx-head__sep[b-xjv46gr14l] { display: none; }
    .nvx-head__actions[b-xjv46gr14l] { margin-left: 0; width: 100%; }
}
/* /Components/UI/NvxProcesando.razor.rz.scp.css */
.nvx-procesando[b-lhwjy4noc8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nvx-space-md);
    min-width: 280px;
    max-width: 420px;
    padding: var(--nvx-space-xl) var(--nvx-space-lg);
    background: var(--nvx-white);
    border-top: 4px solid var(--nvx-500);
    border-radius: var(--nvx-r-lg);
    box-shadow: var(--nvx-shadow-lg);
    text-align: center;
}

.nvx-procesando__texto[b-lhwjy4noc8] {
    font-size: var(--nvx-text-h3);
    font-weight: 600;
    color: var(--nvx-800);
}

.nvx-procesando__detalle[b-lhwjy4noc8] {
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
}
/* /Components/UI/NvxTable.razor.rz.scp.css */
.nvx-table[b-95zapv2xd8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* El scroll horizontal ocurre AQUÍ, nunca en el body de la página. */
.nvx-table__scroll[b-95zapv2xd8] {
    overflow: auto;
    background: #fff;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
    -webkit-overflow-scrolling: touch;
}

/* Si hay toolbar encima, la tabla pierde el radio superior para quedar a ras.
   Se resuelve con una clase y no con el selector de hermano adyacente: el
   toolbar llega como contenido hijo y no lleva el atributo de ámbito de este
   componente, así que un selector estructural no lo alcanzaría. */
.nvx-table__scroll--con-toolbar[b-95zapv2xd8] {
    border-radius: 0 0 var(--nvx-r-md) var(--nvx-r-md);
}

.nvx-table__el[b-95zapv2xd8] {
    width: 100%;
    border-collapse: separate;   /* separate y no collapse: con collapse el */
    border-spacing: 0;           /* borde del thead fijo desaparece al hacer scroll */
    font-size: var(--nvx-text-body);
}

/* ── Encabezado ─────────────────────────────────────────────────────────────
   Head y Row llegan como contenido hijo, así que todo lo que los alcance
   necesita ::deep. Sin eso, el CSS aislado no los toca.
   ────────────────────────────────────────────────────────────────────────── */
.nvx-table__el[b-95zapv2xd8]  thead th {
    background: var(--nvx-800);
    color: #fff;
    font-size: var(--nvx-text-xs);
    font-weight: 650;
    letter-spacing: var(--nvx-tracking-label);
    text-transform: uppercase;
    text-align: left;
    padding: 9px 12px;
    white-space: nowrap;
    border-bottom: 1px solid var(--nvx-900);
}

.nvx-table__el[b-95zapv2xd8]  thead th.nvx-th-num { text-align: right; }

.nvx-table__scroll--sticky .nvx-table__el[b-95zapv2xd8]  thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ── Celdas ─────────────────────────────────────────────────────────────── */
.nvx-table__el[b-95zapv2xd8]  tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--nvx-gray-100);
    vertical-align: middle;
    color: var(--nvx-gray-800);
}

.nvx-table__el--compacta[b-95zapv2xd8]  tbody td { padding: 5px 10px; }

.nvx-table__el[b-95zapv2xd8]  tbody tr:nth-child(even) { background: var(--nvx-gray-50); }

.nvx-table__el[b-95zapv2xd8]  tbody tr:hover { background: var(--nvx-100); }

.nvx-table__el[b-95zapv2xd8]  tbody tr:last-child td { border-bottom: 0; }

/* Fila marcada por la página como destacada o en alerta. */
.nvx-table__el[b-95zapv2xd8]  tbody tr.nvx-row-alerta { background: var(--nvx-danger-bg); }
.nvx-table__el[b-95zapv2xd8]  tbody tr.nvx-row-alerta:hover { background: var(--nvx-danger-bg); }

/* ── Pie de totales ─────────────────────────────────────────────────────── */
.nvx-table__el[b-95zapv2xd8]  tfoot td,
.nvx-table__el[b-95zapv2xd8]  tfoot th {
    position: sticky;
    bottom: 0;
    background: var(--nvx-100);
    border-top: 1.5px solid var(--nvx-300);
    padding: 9px 12px;
    font-weight: 700;
    color: var(--nvx-900);
}

/* ── Estados: cargando, vacío, error ────────────────────────────────────── */
.nvx-table__skel-row:hover[b-95zapv2xd8] { background: transparent !important; }

.nvx-table__skel-row td[b-95zapv2xd8] { padding: 11px 12px !important; }

.nvx-table__skel[b-95zapv2xd8] {
    display: block;
    height: 9px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        var(--nvx-gray-100) 0%,
        var(--nvx-gray-50)  50%,
        var(--nvx-gray-100) 100%);
    background-size: 200% 100%;
    animation: nvx-shimmer 1.4s linear infinite;
}

.nvx-table__estado[b-95zapv2xd8] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 34px 20px;
    text-align: left;
}

.nvx-table__estado-icon[b-95zapv2xd8] {
    font-size: 26px;
    color: var(--nvx-300);
    flex: none;
}

.nvx-table__estado--error .nvx-table__estado-icon[b-95zapv2xd8] { color: var(--nvx-danger); }

.nvx-table__estado-titulo[b-95zapv2xd8] {
    margin: 0;
    font-size: var(--nvx-text-h3);
    font-weight: 650;
    color: var(--nvx-gray-800);
}

.nvx-table__estado-msg[b-95zapv2xd8] {
    margin: 3px 0 0;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    max-width: 52ch;
}

.nvx-table__estado--error .nvx-table__estado-msg[b-95zapv2xd8] { color: var(--nvx-danger-text); }

/* Fila de estado sin zebra ni hover: no es un dato. */
.nvx-table__estado-row[b-95zapv2xd8],
.nvx-table__estado-row:hover[b-95zapv2xd8] { background: transparent !important; }

.nvx-table__estado-row td[b-95zapv2xd8] { border-bottom: 0 !important; }
/* /Components/UI/NvxToolbar.razor.rz.scp.css */
.nvx-toolbar[b-ga8a71io89] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
    background: #fff;
    border: var(--nvx-border);
    border-radius: var(--nvx-r-md);
}

/* Pegada: se funde con la tabla que va justo debajo. */
.nvx-toolbar--pegada[b-ga8a71io89] {
    border-bottom: 0;
    border-radius: var(--nvx-r-md) var(--nvx-r-md) 0 0;
}

.nvx-toolbar__info[b-ga8a71io89] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: var(--nvx-text-sm);
    color: var(--nvx-gray-600);
    min-width: 0;
}

.nvx-toolbar__count b[b-ga8a71io89] { color: var(--nvx-gray-800); }

.nvx-toolbar__sep[b-ga8a71io89] { color: var(--nvx-gray-400); }

.nvx-toolbar__resumen[b-ga8a71io89] {
    color: var(--nvx-gray-600);
}

/* Los totales llegan como contenido hijo: ::deep para alcanzarlos. */
.nvx-toolbar__resumen[b-ga8a71io89]  b,
.nvx-toolbar__resumen[b-ga8a71io89]  strong {
    color: var(--nvx-800);
    font-family: var(--nvx-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.nvx-toolbar__actions[b-ga8a71io89] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    flex-wrap: wrap;
}