/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-f78evnz9oc] {
    height: 100%;
    min-height: 0;
}

.login-page[b-f78evnz9oc] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.login-topbar[b-f78evnz9oc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    padding: 0 2rem;
    z-index: 10;
}

.topbar-logo[b-f78evnz9oc] {
    height: 58px;
}

.login-bg-slide[b-f78evnz9oc] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.login-bg-slide.active[b-f78evnz9oc] {
    opacity: 1;
}

.login-overlay[b-f78evnz9oc] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.login-card-wrapper[b-f78evnz9oc] {
    position: relative;
    z-index: 2;
    margin-top: 64px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.cargando-nodos[b-f78evnz9oc] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 1.2rem;
    color: #666;
}

/* ══════════════════════════════════════════════════════════════════════
   APP LAYOUT — skin de marca Morphi (Docs/mockup-rediseno-rubros.html)
   ══════════════════════════════════════════════════════════════════════ */
.app-layout[b-f78evnz9oc] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
}

/* ── topbar ────────────────────────────────────────────────────────── */
.app-topbar[b-f78evnz9oc] {
    height: 54px;
    flex-shrink: 0;
    background: var(--morphi-chrome-bg);
    border-bottom: 1px solid var(--morphi-chrome-border);
    display: flex;
    align-items: center;
    padding: 0 16px 0 0;
    box-shadow: var(--morphi-shadow-sm);
    position: relative;
    z-index: 100;
}

.topbar-menu-btn[b-f78evnz9oc] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-left: 6px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--morphi-chrome-text-dim);
    cursor: pointer;
}

.topbar-menu-btn:hover[b-f78evnz9oc] {
    background: var(--morphi-chrome-hover-bg);
    color: var(--morphi-chrome-text);
}

.topbar-menu-btn svg.ic[b-f78evnz9oc] {
    width: 20px;
    height: 20px;
}

.brand[b-f78evnz9oc] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 8px 22px 8px 14px;
    margin-right: 18px;
    cursor: pointer;
}

.brand .topbar-logo[b-f78evnz9oc] {
    height: 100%;
    width: auto;
    display: block;
}

/* Sello "Beta" al lado del logo — solo versión de escritorio (se oculta en
   el breakpoint mobile de acá abajo, @media max-width:768px, donde .brand
   ya se achica y no hay lugar de sobra). */
.brand-beta[b-f78evnz9oc] {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 7px;
    border: 1px solid var(--morphi-chrome-pill-border);
    border-radius: 999px;
    background: var(--morphi-chrome-pill-bg);
    color: var(--morphi-azul);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}

.topbar-center[b-f78evnz9oc] {
    position: relative;
    display: flex;
    align-items: center;
}

.nodo-selector[b-f78evnz9oc] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--morphi-chrome-pill-bg);
    border: 1px solid var(--morphi-chrome-pill-border);
    color: var(--morphi-chrome-text);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.nodo-selector:hover[b-f78evnz9oc] {
    background: var(--morphi-chrome-hover-bg);
}

.nodo-dot[b-f78evnz9oc] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.nodo-dot-ok[b-f78evnz9oc]       { background: var(--morphi-success); box-shadow: 0 0 0 3px var(--morphi-success-bg); }
.nodo-dot-servidor[b-f78evnz9oc] { background: var(--morphi-azul); box-shadow: 0 0 0 3px var(--morphi-azul-tint-strong); }
.nodo-dot-error[b-f78evnz9oc]    { background: var(--morphi-danger); box-shadow: 0 0 0 3px var(--morphi-danger-bg); }

.nodo-selector .tipo[b-f78evnz9oc] {
    color: var(--morphi-chrome-text-dim);
    font-weight: 500;
}

.nodo-selector .arrow[b-f78evnz9oc] {
    color: var(--morphi-chrome-text-dim);
    display: flex;
}

.nodo-dropdown[b-f78evnz9oc] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: 10px;
    box-shadow: var(--morphi-shadow-md);
    min-width: 320px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 200;
}

.nodo-dropdown-item[b-f78evnz9oc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--morphi-border);
}

.nodo-dropdown-item:last-child[b-f78evnz9oc] {
    border-bottom: none;
}

.nodo-dropdown-item:hover:not(.disabled)[b-f78evnz9oc] {
    background: var(--morphi-azul-tint);
}

.nodo-dropdown-item.disabled[b-f78evnz9oc] {
    opacity: 0.5;
    cursor: not-allowed;
}

.nodo-dd-nombre[b-f78evnz9oc] {
    flex: 1;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--morphi-text);
}

.nodo-dd-tipo[b-f78evnz9oc] {
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--morphi-azul-tint-strong);
    color: var(--morphi-azul-oscuro);
}

.nodo-dd-tiempo[b-f78evnz9oc] {
    font-size: 0.7rem;
    color: var(--morphi-text-secondary);
}

.topbar-right[b-f78evnz9oc] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Chip de tema. Colores fijos a propósito (no ligados a --morphi-*): al pasar
   a oscuro el resto de los tokens del topbar se invierten, y este chip tiene
   que seguir leyéndose igual en los dos estados (ver mockup, mismo comentario). */
.theme-toggle[b-f78evnz9oc] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--morphi-navy);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.9);
    padding: 5px 12px 5px 6px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.theme-toggle.chip-claro[b-f78evnz9oc] {
    background: #FFFFFF;
    border: 1px solid #DCE4E9;
    color: #1B242C;
}

.theme-toggle img[b-f78evnz9oc] {
    height: 20px;
    width: 20px;
    object-fit: contain;
    border-radius: 5px;
}

.usuario-chip[b-f78evnz9oc] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--morphi-chrome-text);
    font-size: 12.5px;
    font-weight: 600;
}

/* Mismo tamaño que .theme-toggle img — misma familia de "chip circular chico"
   en el topbar, uno al lado del otro. */
.avatar[b-f78evnz9oc] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--morphi-azul), var(--morphi-mist));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .01em;
}

.topbar-btn[b-f78evnz9oc],
.btn-salir[b-f78evnz9oc] {
    background: transparent;
    border: 1px solid var(--morphi-chrome-border);
    color: var(--morphi-chrome-text-dim);
    padding: 6px 13px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.topbar-btn:hover[b-f78evnz9oc],
.btn-salir:hover[b-f78evnz9oc] {
    background: var(--morphi-chrome-hover-bg);
    color: var(--morphi-chrome-text);
}

/* ── body: sidebar + contenido ───────────────────────────────────── */
.app-body[b-f78evnz9oc] {
    flex: 1;
    display: flex;
    min-height: 0;
}

.nav[b-f78evnz9oc] {
    width: 224px;
    flex-shrink: 0;
    background: var(--morphi-chrome-bg-2);
    border-right: 1px solid var(--morphi-chrome-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 14px 10px;
    transition: width .18s;
}

.nav.collapsed[b-f78evnz9oc] {
    width: 56px;
}

.nav.collapsed .nav-search[b-f78evnz9oc],
.nav.collapsed .nav-scroll[b-f78evnz9oc] {
    display: none;
}

.nav-toggle-row[b-f78evnz9oc] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.nav-toggle[b-f78evnz9oc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--morphi-chrome-text-dim);
    cursor: pointer;
}

.nav-toggle:hover[b-f78evnz9oc] {
    color: var(--morphi-chrome-text);
    background: var(--morphi-chrome-hover-bg);
}

.nav-search[b-f78evnz9oc] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--morphi-chrome-pill-bg);
    border: 1px solid var(--morphi-chrome-pill-border);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 0 2px 12px;
    color: var(--morphi-chrome-text-dim);
    flex-shrink: 0;
}

.nav-search svg.ic[b-f78evnz9oc] {
    color: var(--morphi-chrome-text-dim);
}

.nav-search input[b-f78evnz9oc] {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    color: var(--morphi-chrome-text);
    font: inherit;
    font-size: 12.5px;
}

.nav-search input[b-f78evnz9oc]::placeholder {
    color: var(--morphi-chrome-text-dim);
}

.nav-scroll[b-f78evnz9oc] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* NavMenuItem.razor (los items dentro de cada sección) es un componente hijo:
   sin ::deep, el CSS scoping de Blazor no llega a su markup (mismo problema
   que encontramos con Rubros.razor.css en la Fase 1 del ABM). */
[b-f78evnz9oc] .nav-group {
    margin-bottom: 4px;
}

[b-f78evnz9oc] .nav-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--morphi-chrome-item);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

[b-f78evnz9oc] .nav-label:hover {
    background: var(--morphi-chrome-hover-bg);
    color: var(--morphi-chrome-item-strong);
}

[b-f78evnz9oc] .nav-group.open > .nav-label {
    color: var(--morphi-chrome-item-strong);
}

[b-f78evnz9oc] .nav-label-link {
    text-decoration: none;
}

[b-f78evnz9oc] .nav-label-link.active {
    background: var(--morphi-chrome-active-bg);
    color: var(--morphi-chrome-active-text);
}

[b-f78evnz9oc] .nav-label-soporte {
    justify-content: flex-start;
    gap: 8px;
}

[b-f78evnz9oc] .nav-label-soporte svg.ic {
    width: 14px;
    height: 14px;
    color: var(--morphi-azul);
    flex-shrink: 0;
}

[b-f78evnz9oc] .nav-label-soporte.active svg.ic {
    color: var(--morphi-chrome-active-text);
}

[b-f78evnz9oc] .nav-caret {
    color: var(--morphi-slate);
    transition: transform .15s;
    display: flex;
}

[b-f78evnz9oc] .nav-group.open > .nav-label .nav-caret {
    transform: rotate(90deg);
    color: var(--morphi-azul);
}

[b-f78evnz9oc] .nav-items {
    display: none;
    flex-direction: column;
    padding: 2px 2px 6px 8px;
    gap: 1px;
}

[b-f78evnz9oc] .nav-group.open > .nav-items {
    display: flex;
}

[b-f78evnz9oc] .nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 7px;
    color: var(--morphi-chrome-item);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}

[b-f78evnz9oc] .nav-item:hover {
    background: var(--morphi-chrome-hover-bg);
    color: var(--morphi-chrome-item-strong);
}

[b-f78evnz9oc] .nav-item.active {
    background: var(--morphi-chrome-active-bg);
    color: var(--morphi-chrome-active-text);
    font-weight: 700;
}

[b-f78evnz9oc] .nav-item.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--morphi-azul);
    border-radius: 2px;
}

.nav-scroll > .nav-item[b-f78evnz9oc] {
    margin: 0 2px 4px;
}

[b-f78evnz9oc] .nav-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    flex-shrink: 0;
}

[b-f78evnz9oc] .nav-lock {
    width: 12px;
    height: 12px;
    margin-left: auto;
    color: var(--morphi-slate);
    opacity: .7;
    flex-shrink: 0;
}

/* Sub-grupo anidado (ej. Productos dentro de Ventas, y niveles más profundos) */
[b-f78evnz9oc] .nav-label.sub-label {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    padding: 7px 10px;
    font-size: 12.5px;
    color: var(--morphi-chrome-item);
}

[b-f78evnz9oc] .nav-label.sub-label:hover {
    color: var(--morphi-chrome-item-strong);
}

[b-f78evnz9oc] .nav-group.nested.open > .nav-label.sub-label {
    color: var(--morphi-chrome-item-strong);
}

[b-f78evnz9oc] .nav-items.nested-items {
    padding-left: 14px;
}

/* ── contenido principal ───────────────────────────────────────────── */
.main[b-f78evnz9oc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--morphi-bg);
    overflow: hidden;
}

.crumbs[b-f78evnz9oc] {
    padding: 10px 20px 0;
    font-size: 12px;
    color: var(--morphi-text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.crumbs b[b-f78evnz9oc] {
    color: var(--morphi-text);
    font-weight: 700;
}

.crumbs .sep[b-f78evnz9oc] {
    opacity: .4;
}

.app-content[b-f78evnz9oc] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 10px 16px 16px;
    min-height: 0;
}

/* Footer genérico de toda la app logueada (antes vivía solo en Inicio) —
   hermano de .app-content dentro de .main, así queda fijo al pie del área de
   contenido en todas las pantallas en vez de scrollear con cada página. */
.app-footer[b-f78evnz9oc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    padding: 0.75rem 16px;
    border-top: 1px solid var(--morphi-border);
    flex-shrink: 0;
}

.footer-link[b-f78evnz9oc] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--morphi-text-secondary);
    text-decoration: none;
}

.footer-link:hover[b-f78evnz9oc] { color: var(--morphi-azul-oscuro); }
.footer-link svg.ic[b-f78evnz9oc] { width: 15px; height: 15px; }

/* ── Responsive: pantallas angostas (celulares/tablets chicas) ── */
@media (max-width: 768px) {
    .app-topbar[b-f78evnz9oc] {
        padding: 0 0.5rem 0 0.25rem;
        gap: 0.4rem;
    }

    /* En mobile, el botón de abrir/cerrar menú pasa a vivir en el topbar
       (siempre visible) en vez de adentro del propio panel — si viviera
       adentro, al colapsar el panel a width:0 el botón quedaba inaccesible
       y no había forma de volver a abrirlo. */
    .topbar-menu-btn[b-f78evnz9oc] {
        display: flex;
    }

    .nav-toggle-row[b-f78evnz9oc] {
        display: none;
    }

    .brand[b-f78evnz9oc] {
        padding: 8px 10px;
        margin-right: 4px;
    }

    .brand .topbar-logo[b-f78evnz9oc] {
        height: 30px;
    }

    .brand-beta[b-f78evnz9oc] {
        display: none;
    }

    .nodo-selector .tipo[b-f78evnz9oc] {
        display: none;
    }

    .nodo-selector[b-f78evnz9oc] {
        max-width: 34vw;
    }

    .nodo-selector-nombre[b-f78evnz9oc] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .theme-toggle span[b-f78evnz9oc] {
        display: none;
    }

    .theme-toggle[b-f78evnz9oc] {
        padding: 5px;
    }

    /* Mismo tratamiento que .theme-toggle: "Cambiar grupo" (solo visible para
       usuarios de soporte) es texto largo que en mobile no deja lugar para
       "Salir" al lado — se cae a solo el ícono ⇄. */
    .topbar-btn span[b-f78evnz9oc] {
        display: none;
    }

    .topbar-btn[b-f78evnz9oc] {
        padding: 6px 9px;
    }

    /* Antes se ocultaba el chip entero en mobile — perdía de vista con qué
       usuario estabas logueado. Ahora se colapsa solo el nombre y queda el
       avatar con iniciales, que sigue identificando la sesión sin pesar
       en el ancho del topbar (el nombre completo queda como tooltip nativo,
       ver el atributo title en MainLayout.razor). */
    .usuario-chip[b-f78evnz9oc] {
        gap: 0;
    }

    .usuario-nombre[b-f78evnz9oc] {
        display: none;
    }

    /* Mismo diámetro que .theme-toggle acá arriba (padding:5px + img 20px =
       círculo de 30px) — los dos chips circulares del topbar quedan parejos. */
    .avatar[b-f78evnz9oc] {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .nodo-dropdown[b-f78evnz9oc] {
        min-width: min(320px, calc(100vw - 1.5rem));
        max-width: calc(100vw - 1.5rem);
    }

    /* El sidebar pasa a flotar por encima del contenido en vez de empujarlo */
    .app-body[b-f78evnz9oc] {
        position: relative;
    }

    .nav[b-f78evnz9oc] {
        position: fixed;
        top: 54px;
        bottom: 0;
        left: 0;
        z-index: 150;
        box-shadow: 4px 0 16px rgba(0,0,0,0.3);
    }

    .nav.collapsed[b-f78evnz9oc] {
        width: 0;
        padding: 0;
    }

    .nav:not(.collapsed)[b-f78evnz9oc] {
        width: 240px;
    }

    .app-content[b-f78evnz9oc] {
        margin: 10px;
    }

    .app-footer[b-f78evnz9oc] {
        gap: 1.125rem;
        flex-wrap: wrap;
        padding: 0.625rem 10px;
    }
}

@media (max-width: 480px) {
    .nodo-selector[b-f78evnz9oc] {
        padding: 6px 9px;
        max-width: 30vw;
    }

    .btn-salir[b-f78evnz9oc] {
        padding: 6px 9px;
        font-size: 11px;
    }

    /* Ya es solo ícono (⇄) desde los 768px — no necesita el mismo padding
       horizontal que .btn-salir, que todavía tiene que alojar la palabra
       "Salir". Apretarlo acá recupera el ancho que "Cambiar grupo" le sacó
       al presupuesto ya afinado de este breakpoint (ver comentario de
       .avatar más abajo). */
    .topbar-btn[b-f78evnz9oc] {
        padding: 6px 7px;
        font-size: 11px;
    }

    .topbar-right[b-f78evnz9oc] {
        gap: 4px;
    }

    .brand[b-f78evnz9oc] {
        padding: 8px 8px;
        margin-right: 2px;
    }

    .brand .topbar-logo[b-f78evnz9oc] {
        height: 26px;
    }

    /* El avatar creció a 30px para igualar a .theme-toggle (ver regla de
       768px más arriba), pero ese tamaño no entraba en varios celulares reales
       de ~390-414px (iPhone 12 Pro/XR, Pixel 7, Galaxy S20 Ultra/A51/A71) —
       "Salir" quedaba empujado afuera. Acá los dos círculos se achican juntos
       (siguen del mismo tamaño entre sí) para recuperar ese ancho. */
    .avatar[b-f78evnz9oc] {
        width: 24px;
        height: 24px;
        font-size: 9px;
    }

    .theme-toggle[b-f78evnz9oc] {
        padding: 4px;
    }

    .theme-toggle img[b-f78evnz9oc] {
        height: 16px;
        width: 16px;
    }
}

/* Celulares angostos (iPhone SE ~375px, iPhone 12 Pro ~390px, Galaxy Z Fold
   cerrado ~344px) — a 480px ya alcanza para los celulares "anchos" (Pixel 7,
   XR, S20 Ultra, ~412-414px), pero en este rango el total todavía no entraba
   y "Salir" quedaba cortado/empujado fuera del viewport. Se aprieta un
   escalón más. Umbral en 400px (no 380px) a propósito: 390px (12 Pro) tiene
   que caer adentro de este bloque. */
@media (max-width: 400px) {
    .app-topbar[b-f78evnz9oc] {
        padding: 0 0.35rem 0 0.15rem;
        gap: 0.25rem;
    }

    .topbar-menu-btn[b-f78evnz9oc] {
        width: 30px;
        height: 30px;
        margin-left: 2px;
    }

    .brand[b-f78evnz9oc] {
        padding: 8px 6px;
        margin-right: 0;
    }

    .brand .topbar-logo[b-f78evnz9oc] {
        height: 24px;
    }

    .nodo-selector[b-f78evnz9oc] {
        padding: 5px 7px;
        max-width: 24vw;
        gap: 5px;
    }

    .topbar-right[b-f78evnz9oc] {
        gap: 4px;
    }

    /* Avatar y theme-toggle ya quedan en 24px desde la regla de 480px de
       arriba (@media max-width:480px) — no hace falta repetirlo acá. */

    .btn-salir[b-f78evnz9oc] {
        padding: 5px 7px;
        font-size: 10.5px;
    }

    .topbar-btn[b-f78evnz9oc] {
        padding: 5px 6px;
        font-size: 10.5px;
    }
}

/* ── Splash inicial (mientras se restaura sesión) ── */
.splash-loading[b-f78evnz9oc] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #1a1a2e;
}

.splash-logo[b-f78evnz9oc] {
    height: 70px;
    opacity: 0.85;
    animation: splash-pulse-b-f78evnz9oc 1.5s ease-in-out infinite;
}

@keyframes splash-pulse-b-f78evnz9oc {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1;   }
}
/* /Components/Pages/Asistente/Chat.razor.rz.scp.css */
.chat-page[b-1y7t3qeaju] {
    /* En claro, el header queda con este navy fijo (contraste fuerte contra
       el cuerpo blanco del chat, es lo que ya se aprobó). En oscuro, ese
       mismo navy coincidía casi exactamente con --morphi-surface-2 (fondo
       del área de mensajes) y todo el chat se veía "de un solo color" — se
       pisa a --morphi-surface (el mismo tono que usa .chat-composer, la caja
       que rodea el input de texto) para que el header se distinga como una
       franja más oscura y separada del resto. */
    --chat-header-bg: var(--morphi-navy);

    display: flex;
    justify-content: center;
    height: 100%;
    min-height: 0;
    padding: 1rem;
}

:root[data-theme="dark"] .chat-page[b-1y7t3qeaju] {
    --chat-header-bg: var(--morphi-surface);
}
:root[data-theme="light"] .chat-page[b-1y7t3qeaju] {
    --chat-header-bg: var(--morphi-navy);
}

.chat-layout[b-1y7t3qeaju] {
    width: 100%;
    max-width: 1080px;
    min-height: 0;
    display: flex;
    gap: 14px;
}

.chat-shell[b-1y7t3qeaju] {
    width: 100%;
    max-width: 820px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--morphi-surface);
    border-radius: 16px;
    border: 1px solid var(--morphi-border);
    box-shadow: var(--morphi-shadow-md);
    overflow: hidden;
}

/* ---------- Sidebar (chats anteriores) ---------- */
.chat-sidebar[b-1y7t3qeaju] {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--morphi-surface);
    border-radius: 16px;
    border: 1px solid var(--morphi-border);
    box-shadow: var(--morphi-shadow-md);
    padding: 12px;
    overflow: hidden;
}

.sidebar-nuevo-chat[b-1y7t3qeaju] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--morphi-border);
    border-radius: 10px;
    background: var(--morphi-surface-2);
    color: var(--morphi-text);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease;
}
.sidebar-nuevo-chat:hover[b-1y7t3qeaju] { border-color: var(--morphi-azul); }
.sidebar-nuevo-chat-icon[b-1y7t3qeaju] {
    font-size: 15px;
    line-height: 1;
    color: var(--morphi-azul);
    font-weight: 800;
}

.sidebar-lista[b-1y7t3qeaju] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-info-msg[b-1y7t3qeaju] {
    margin: 8px 4px;
    color: var(--morphi-text-secondary);
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
}

.sidebar-item[b-1y7t3qeaju] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background .15s ease;
}
.sidebar-item:hover[b-1y7t3qeaju] { background: var(--morphi-surface-2); }
.sidebar-item.activo[b-1y7t3qeaju] { background: var(--morphi-azul-tint-strong); }

.sidebar-item-preview[b-1y7t3qeaju] {
    width: 100%;
    color: var(--morphi-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-item-fecha[b-1y7t3qeaju] {
    color: var(--morphi-text-secondary);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
}

.chat-sidebar-toggle[b-1y7t3qeaju] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.chat-sidebar-toggle span[b-1y7t3qeaju] {
    display: block;
    height: 2px;
    background: white;
    border-radius: 1px;
}

.sidebar-overlay[b-1y7t3qeaju] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 20;
}

/* ---------- Header ---------- */
.chat-header[b-1y7t3qeaju] {
    flex-shrink: 0;
    background: var(--chat-header-bg);
    color: white;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-header-mono[b-1y7t3qeaju] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

.chat-header-titles[b-1y7t3qeaju] { min-width: 0; }
.chat-header-titles h1[b-1y7t3qeaju] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
}
.chat-header-titles p[b-1y7t3qeaju] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #A9BAC4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-spacer[b-1y7t3qeaju] { flex: 1; }

.chat-quota-chip[b-1y7t3qeaju] {
    background: rgba(173,219,227,.16);
    color: #CFEFF6;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.quota-dot[b-1y7t3qeaju] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
}

.chat-avatar[b-1y7t3qeaju] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 2px;
    object-fit: contain;
    display: block;
}

.empty-mono[b-1y7t3qeaju] {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    object-fit: contain;
    display: block;
}

/* ---------- Mensajes ---------- */
.chat-messages[b-1y7t3qeaju] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--morphi-surface-2);
}

.chat-info-msg[b-1y7t3qeaju] {
    margin: auto;
    text-align: center;
    color: var(--morphi-text-secondary);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}

.chat-empty-state[b-1y7t3qeaju] {
    margin: auto;
    text-align: center;
    max-width: 380px;
    padding: 12px;
}
.chat-empty-state h2[b-1y7t3qeaju] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 21px;
    margin: 0 0 8px;
    color: var(--morphi-text);
}
.chat-empty-state p[b-1y7t3qeaju] {
    margin: 0 0 20px;
    color: var(--morphi-text-secondary);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.chat-chips[b-1y7t3qeaju] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.chat-chip[b-1y7t3qeaju] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--morphi-text);
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    padding: 9px 14px;
    border-radius: 0 12px 12px 12px;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.chat-chip:hover[b-1y7t3qeaju] { border-color: var(--morphi-azul); transform: translateY(-1px); }
.chat-chip:focus-visible[b-1y7t3qeaju] { outline: 2px solid var(--morphi-azul); outline-offset: 2px; }

.chat-bubble-row[b-1y7t3qeaju] {
    display: flex;
    width: 100%;
    gap: 8px;
}
.row-usuario[b-1y7t3qeaju] { justify-content: flex-end; }
.row-asistente[b-1y7t3qeaju] { justify-content: flex-start; }

.chat-bubble[b-1y7t3qeaju] {
    max-width: 74%;
    padding: 10px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    box-shadow: var(--morphi-shadow-sm);
}
.bubble-usuario[b-1y7t3qeaju] {
    background: var(--morphi-azul-oscuro);
    color: white;
    border-radius: 14px 14px 3px 14px;
}
.bubble-asistente[b-1y7t3qeaju] {
    background: var(--morphi-surface);
    color: var(--morphi-text);
    border: 1px solid var(--morphi-border);
    border-radius: 3px 14px 14px 14px;
}

.bubble-texto p[b-1y7t3qeaju] { margin: 0 0 8px; }
.bubble-texto p:last-child[b-1y7t3qeaju] { margin-bottom: 0; }
.bubble-texto ul[b-1y7t3qeaju], .bubble-texto ol[b-1y7t3qeaju] { margin: 0 0 8px; padding-left: 19px; }
.bubble-texto ul:last-child[b-1y7t3qeaju], .bubble-texto ol:last-child[b-1y7t3qeaju] { margin-bottom: 0; }
.bubble-texto li[b-1y7t3qeaju] { margin-bottom: 3px; }
.bubble-texto strong[b-1y7t3qeaju] { font-weight: 700; }
.bubble-texto em[b-1y7t3qeaju] { font-style: italic; }

.bubble-typing[b-1y7t3qeaju] {
    display: flex;
    gap: 4px;
    padding: 13px 16px;
    align-items: center;
}
.bubble-typing span[b-1y7t3qeaju] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--morphi-slate);
    animation: chat-blink-b-1y7t3qeaju 1.2s infinite ease-in-out;
}
.bubble-typing span:nth-child(2)[b-1y7t3qeaju] { animation-delay: .2s; }
.bubble-typing span:nth-child(3)[b-1y7t3qeaju] { animation-delay: .4s; }
@keyframes chat-blink-b-1y7t3qeaju { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.chat-error[b-1y7t3qeaju] {
    margin: 0 20px;
    padding: 0.6rem 1rem;
    background: var(--morphi-danger-bg);
    color: var(--morphi-danger);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
}

/* ---------- Composer ---------- */
.chat-composer[b-1y7t3qeaju] {
    flex-shrink: 0;
    border-top: 1px solid var(--morphi-border);
    background: var(--morphi-surface);
    padding: 14px 18px 16px;
}
.chat-input-bar[b-1y7t3qeaju] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.chat-input[b-1y7t3qeaju] {
    flex: 1;
    resize: none;
    height: 48px;
    max-height: 120px;
    padding: 12px 14px;
    border: 1px solid var(--morphi-border);
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: var(--morphi-surface-2);
    color: var(--morphi-text);
}
.chat-input[b-1y7t3qeaju]::placeholder { color: var(--morphi-text-secondary); }
.chat-input:focus[b-1y7t3qeaju] {
    outline: none;
    border-color: var(--morphi-azul);
    box-shadow: 0 0 0 3px var(--morphi-azul-tint-strong);
}

.chat-send-btn[b-1y7t3qeaju] {
    flex-shrink: 0;
    height: 48px;
    padding: 0 20px;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: white;
    background: var(--morphi-azul);
    display: flex;
    align-items: center;
    transform: skewX(-8deg);
    border-radius: 0 12px 12px 0;
    margin-left: 4px;
    transition: filter .15s ease, opacity .15s ease;
}
.chat-send-btn span[b-1y7t3qeaju] { display: inline-block; transform: skewX(8deg); }
.chat-send-btn:hover:not(:disabled)[b-1y7t3qeaju] { filter: brightness(1.08); }
.chat-send-btn:disabled[b-1y7t3qeaju] { opacity: .45; cursor: not-allowed; }
.chat-send-btn:focus-visible[b-1y7t3qeaju] { outline: 2px solid var(--morphi-azul); outline-offset: 3px; }

.chat-input-footer[b-1y7t3qeaju] {
    text-align: right;
    margin-top: 6px;
}
.chat-char-count[b-1y7t3qeaju] {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: var(--morphi-text-secondary);
    font-variant-numeric: tabular-nums;
}
.char-count-warn[b-1y7t3qeaju] {
    color: var(--morphi-danger);
    font-weight: 700;
}

/* ---------- Responsive ---------- */

/* Tablet / laptop chico: el card ya no necesita tanto aire alrededor */
@media (max-width: 900px) {
    .chat-page[b-1y7t3qeaju] { padding: 0.5rem; }
    .chat-shell[b-1y7t3qeaju] { max-width: 100%; }

    .chat-layout[b-1y7t3qeaju] { gap: 0; }
    .chat-sidebar-toggle[b-1y7t3qeaju] { display: flex; }

    .chat-sidebar[b-1y7t3qeaju] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 80vw;
        z-index: 30;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }
    .chat-sidebar.abierto[b-1y7t3qeaju] { transform: translateX(0); }

    .sidebar-overlay[b-1y7t3qeaju] { display: block; }
}

/* Celular: pantalla completa, sin card flotante */
@media (max-width: 620px) {
    .chat-page[b-1y7t3qeaju] { padding: 0; }
    .chat-shell[b-1y7t3qeaju] { border-radius: 0; border: none; max-width: 100%; }

    .chat-header[b-1y7t3qeaju] { padding: 12px 14px; gap: 10px; }
    .chat-header-titles h1[b-1y7t3qeaju] { font-size: 14px; }
    .chat-header-titles p[b-1y7t3qeaju] { font-size: 11px; }
    .chat-quota-chip[b-1y7t3qeaju] { font-size: 10.5px; padding: 5px 10px; }

    .chat-messages[b-1y7t3qeaju] { padding: 14px; gap: 10px; }
    .chat-bubble[b-1y7t3qeaju] { max-width: 86%; font-size: 14px; }

    .chat-empty-state[b-1y7t3qeaju] { max-width: 100%; }
    .empty-mono[b-1y7t3qeaju] { width: 46px; height: 46px; }
    .chat-empty-state h2[b-1y7t3qeaju] { font-size: 18px; }
    .chat-empty-state p[b-1y7t3qeaju] { font-size: 13px; }
    .chat-chip[b-1y7t3qeaju] { font-size: 12px; padding: 8px 12px; }

    .chat-composer[b-1y7t3qeaju] { padding: 10px 12px 12px; }
    .chat-send-btn[b-1y7t3qeaju] { padding: 0 14px; }
    .chat-error[b-1y7t3qeaju] { margin: 0 14px; }
}

/* Celular muy chico: la cuota mensual se prioriza afuera si no entra */
@media (max-width: 360px) {
    .chat-header-titles p[b-1y7t3qeaju] { display: none; }
    .chat-quota-chip[b-1y7t3qeaju] { font-size: 10px; padding: 4px 8px; }
    .chat-bubble[b-1y7t3qeaju] { max-width: 92%; }
}

/* Pantallas bajas (celular en horizontal, notebooks chicas): achicar los "aires" verticales */
@media (max-height: 480px) {
    .chat-empty-state[b-1y7t3qeaju] { padding: 4px; }
    .empty-mono[b-1y7t3qeaju] { width: 36px; height: 36px; margin-bottom: 8px; }
    .chat-empty-state h2[b-1y7t3qeaju] { font-size: 16px; margin-bottom: 4px; }
    .chat-empty-state p[b-1y7t3qeaju] { margin-bottom: 10px; }
    .chat-messages[b-1y7t3qeaju] { padding-top: 10px; padding-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-chip:hover[b-1y7t3qeaju] { transform: none; }
    .bubble-typing span[b-1y7t3qeaju] { animation: none; opacity: 0.6; }
}
/* /Components/Pages/Index/Index.razor.rz.scp.css */
/* .inicio-page es hijo directo de .app-content (display:flex; flex-direction:column
   en MainLayout.razor.css). Un flex item con margin:auto en el eje transversal
   (izq/der, acá) ignora el stretch y se dimensiona por su propio contenido hasta
   max-width — por eso el centrado con max-width+margin:auto NO puede vivir en este
   nivel, o el item nunca se achica con la pantalla (queda siempre en 1180px). Ese
   centrado se mueve a .inicio-page-inner, que es un bloque normal (no flex item) y
   sí respeta las reglas clásicas de centrado por margin:auto. */
.inicio-page[b-hxjgeeaxzj] {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.inicio-page-inner[b-hxjgeeaxzj] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
}

.page-head[b-hxjgeeaxzj] {
    margin: 0.375rem 0 1.25rem;
}

.page-head h1[b-hxjgeeaxzj] {
    margin: 0 0 0.25rem;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--morphi-text);
}

.page-head p[b-hxjgeeaxzj] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--morphi-text-secondary);
}

[b-hxjgeeaxzj] .card {
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    box-shadow: var(--morphi-shadow-sm);
}

/* ── Dashboard card ──────────────────────────────────────────────── */
.dash-card[b-hxjgeeaxzj] {
    padding: 1.125rem 1.25rem 1.375rem;
    margin-bottom: 1.125rem;
}

.dash-toolbar[b-hxjgeeaxzj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.125rem;
}

.dash-tabs[b-hxjgeeaxzj] {
    display: flex;
    gap: 0.25rem;
    background: var(--morphi-surface-2);
    border: 1px solid var(--morphi-border);
    border-radius: 9px;
    padding: 3px;
    flex-shrink: 0;
}

.dash-tab[b-hxjgeeaxzj] {
    border: none;
    background: transparent;
    padding: 0.4375rem 1rem;
    border-radius: 7px;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--morphi-text-secondary);
    cursor: pointer;
}

.dash-tab.active[b-hxjgeeaxzj] {
    background: var(--morphi-azul);
    color: #fff;
    box-shadow: var(--morphi-shadow-sm);
}

.dash-tab:not(.active):hover[b-hxjgeeaxzj] {
    color: var(--morphi-text);
    background: var(--morphi-azul-tint);
}

.dash-period[b-hxjgeeaxzj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dx-datefield[b-hxjgeeaxzj] {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    background: var(--morphi-surface-2);
    border: 1px solid var(--morphi-border);
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
}

.dx-datefield svg.ic[b-hxjgeeaxzj] {
    color: var(--morphi-azul);
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.dx-datefield select[b-hxjgeeaxzj] {
    border: none;
    background: transparent;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--morphi-text);
    cursor: pointer;
    outline: none;
    font-family: inherit;
    /* El <select> nativo abre su lista con el chrome del SO/navegador, no con nuestro CSS
       de la caja cerrada — sin esto, el texto queda con el color de --morphi-text (claro en
       modo oscuro) sobre el fondo blanco por defecto de la lista, invisible. */
    color-scheme: light dark;
}

.dx-datefield select option[b-hxjgeeaxzj] {
    background-color: var(--morphi-surface);
    color: var(--morphi-text);
}

.dx-rangefield .range-sep[b-hxjgeeaxzj] {
    color: var(--morphi-text-secondary);
    font-weight: 700;
}

[b-hxjgeeaxzj] .dx-inline-edit {
    width: 8.5rem;
}

[b-hxjgeeaxzj] .dx-inline-edit .dxbl-edit-input {
    font-size: 0.78125rem;
    font-weight: 700;
    padding: 0;
    color: var(--morphi-text);
}

[b-hxjgeeaxzj] .dx-inline-edit.dxbl-text-edit {
    border: none;
    background: transparent;
    box-shadow: none;
}

.week-nav[b-hxjgeeaxzj] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--morphi-surface-2);
    border: 1px solid var(--morphi-border);
    border-radius: 8px;
    padding: 4px;
}

.week-nav span[b-hxjgeeaxzj] {
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--morphi-text);
    padding: 0 0.5rem;
    white-space: nowrap;
}

.week-arrow[b-hxjgeeaxzj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--morphi-text-secondary);
    cursor: pointer;
}

.week-arrow:hover[b-hxjgeeaxzj] {
    background: var(--morphi-azul-tint);
    color: var(--morphi-azul-oscuro);
}

/* ── Detalle de barra tocada/clickeada (necesario en touch, no hay hover) ─ */
.chart-detail[b-hxjgeeaxzj] {
    margin-bottom: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.chart-detail-main[b-hxjgeeaxzj] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.125rem;
}

.chart-detail-main span:first-child[b-hxjgeeaxzj] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--morphi-text-secondary);
}

.chart-detail-main span:last-child[b-hxjgeeaxzj] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--morphi-text);
}

.chart-detail-sub[b-hxjgeeaxzj] {
    font-size: 0.75rem;
    color: var(--morphi-text-secondary);
}

.chart-detail-sub b[b-hxjgeeaxzj] {
    color: var(--morphi-text);
    font-weight: 700;
}

/* ── Gráfico de barras ───────────────────────────────────────────── */
/* El scroll horizontal (mobile) vive en el wrapper, que es un bloque normal;
   .dash-chart adentro sigue siendo el flex row. Separar las dos responsabilidades
   evita un bug conocido de WebKit/iOS donde un flex container con overflow-x:auto
   no vuelve a calcular su ancho correctamente después de que Blazor actualiza su
   contenido en el mismo nodo (ej. al cambiar de fecha y recargar datos). */
.dash-chart-wrap[b-hxjgeeaxzj] {
    padding: 0.5rem 0.25rem 0;
    border-bottom: 1px solid var(--morphi-border);
    margin-bottom: 0.625rem;
    /* Aísla el layout interno de este bloque: pase lo que pase adentro (barras,
       scroll, popups del date picker abriéndose/cerrándose), nunca se lo puede
       transmitir hacia afuera para ensanchar .inicio-page. */
    contain: layout;
}

.dash-chart[b-hxjgeeaxzj] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.bar-col[b-hxjgeeaxzj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    cursor: pointer;
}

.bar-track[b-hxjgeeaxzj] {
    height: 170px;
    width: 100%;
    position: relative;
}

.bar-value[b-hxjgeeaxzj] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65625rem;
    font-weight: 700;
    color: var(--morphi-text-secondary);
    white-space: nowrap;
}

.bar[b-hxjgeeaxzj] {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60%;
    max-width: 34px;
    background: linear-gradient(180deg, var(--morphi-azul), var(--morphi-azul-oscuro));
    border-radius: 4px 4px 0 0;
    transition: height .25s;
}

.bar-col.peak .bar[b-hxjgeeaxzj] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--morphi-success) 45%, white), var(--morphi-success));
    box-shadow: 0 0 0 2px var(--morphi-success-bg);
}

.bar-col.peak .bar-value[b-hxjgeeaxzj] {
    color: var(--morphi-success);
}

.bar-col.low .bar[b-hxjgeeaxzj] {
    background: linear-gradient(180deg, var(--morphi-slate), var(--morphi-text-secondary));
}

.bar-col.low .bar-value[b-hxjgeeaxzj] {
    color: var(--morphi-text-secondary);
}

.bar-col.selected .bar[b-hxjgeeaxzj] {
    box-shadow: 0 0 0 2px var(--morphi-azul-oscuro);
}

.bar-label[b-hxjgeeaxzj] {
    font-size: 0.625rem;
    color: var(--morphi-text-secondary);
    margin-top: 0.375rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Estado vacío / carga ────────────────────────────────────────── */
.dash-empty[b-hxjgeeaxzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    height: 220px;
    border-bottom: 1px solid var(--morphi-border);
    margin-bottom: 0.625rem;
    color: var(--morphi-text-secondary);
}

.dash-empty svg.ic[b-hxjgeeaxzj] {
    width: 28px;
    height: 28px;
    color: var(--morphi-slate);
}

.dash-empty p[b-hxjgeeaxzj] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ── KPIs ────────────────────────────────────────────────────────── */
.dash-kpis[b-hxjgeeaxzj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
    margin-top: 0.875rem;
}

.kpi[b-hxjgeeaxzj] {
    background: var(--morphi-surface-2);
    border: 1px solid var(--morphi-border);
    border-radius: 9px;
    padding: 0.75rem 0.875rem;
}

.kpi-label[b-hxjgeeaxzj] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--morphi-text-secondary);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 0.375rem;
}

.kpi-value[b-hxjgeeaxzj] {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--morphi-text);
    letter-spacing: -.01em;
}

[b-hxjgeeaxzj] .kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.71875rem;
    font-weight: 700;
    margin-top: 0.375rem;
}

[b-hxjgeeaxzj] .kpi-delta.up { color: var(--morphi-success); }
[b-hxjgeeaxzj] .kpi-delta.down { color: var(--morphi-danger); }
[b-hxjgeeaxzj] .kpi-delta svg.ic { width: 12px; height: 12px; }

/* ── KPI destacado (pico) ────────────────────────────────────────── */
.peak-kpi[b-hxjgeeaxzj] {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    margin-top: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--morphi-azul-tint);
    border: 1px solid var(--morphi-azul-tint-strong);
    border-radius: 9px;
}

.peak-kpi-icon[b-hxjgeeaxzj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--morphi-surface);
    color: var(--morphi-azul-oscuro);
}

.peak-kpi-body[b-hxjgeeaxzj] {
    min-width: 0;
}

.peak-kpi-head[b-hxjgeeaxzj] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.125rem;
}

.peak-kpi-label[b-hxjgeeaxzj] {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--morphi-azul-oscuro);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.peak-kpi-tag[b-hxjgeeaxzj] {
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--morphi-text);
}

.peak-kpi-value[b-hxjgeeaxzj] {
    display: block;
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--morphi-text);
    letter-spacing: -.01em;
    margin-bottom: 0.5rem;
}

.peak-kpi-stats[b-hxjgeeaxzj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.peak-kpi-stats-secondary[b-hxjgeeaxzj] {
    margin-top: 0.5rem;
}

.peak-chip[b-hxjgeeaxzj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: 20px;
    padding: 4px 11px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--morphi-text);
    white-space: nowrap;
}

.peak-chip b[b-hxjgeeaxzj] { font-weight: 800; }

.peak-chip-desc[b-hxjgeeaxzj] {
    font-size: 0.75rem;
    color: var(--morphi-text-secondary);
}

.peak-chip-desc b[b-hxjgeeaxzj] {
    color: var(--morphi-text);
    font-weight: 700;
}

.peak-chip-delta[b-hxjgeeaxzj] {
    font-size: 0.875rem;
    font-weight: 800;
    border: none;
    padding: 5px 12px;
}

.peak-chip-delta svg.ic[b-hxjgeeaxzj] { width: 14px; height: 14px; }
.peak-chip-delta.up[b-hxjgeeaxzj] { background: var(--morphi-success-bg); color: var(--morphi-success); }
.peak-chip-delta.down[b-hxjgeeaxzj] { background: var(--morphi-danger-bg); color: var(--morphi-danger); }

/* ── Fila inferior: Novedades / Alertas / Sabías que ────────────────── */
.lower-grid[b-hxjgeeaxzj] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.125rem;
    align-items: start;
}

.side-stack[b-hxjgeeaxzj] {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.card-inner[b-hxjgeeaxzj] {
    padding: 1rem 1.125rem 1.125rem;
}

.card-inner h2[b-hxjgeeaxzj] {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--morphi-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-inner h2 svg.ic[b-hxjgeeaxzj] {
    color: var(--morphi-azul);
    width: 16px;
    height: 16px;
}

.novedades-list[b-hxjgeeaxzj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.novedades-list li[b-hxjgeeaxzj] {
    display: flex;
    gap: 0.75rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--morphi-border);
}

.novedades-list li:last-child[b-hxjgeeaxzj] {
    border-bottom: none;
    padding-bottom: 0;
}

.nov-dot[b-hxjgeeaxzj] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--morphi-azul);
    margin-top: 0.375rem;
    flex-shrink: 0;
}

.nov-body strong[b-hxjgeeaxzj] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--morphi-text);
    margin-bottom: 0.125rem;
}

.nov-body p[b-hxjgeeaxzj] {
    margin: 0 0 0.25rem;
    font-size: 0.78125rem;
    color: var(--morphi-text-secondary);
    line-height: 1.4;
}

.nov-body time[b-hxjgeeaxzj] {
    font-size: 0.6875rem;
    color: var(--morphi-slate);
    font-weight: 600;
}

.badge-new[b-hxjgeeaxzj] {
    display: inline-block;
    font-size: 0.59375rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--morphi-azul-oscuro);
    background: var(--morphi-azul-tint-strong);
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.empty-state[b-hxjgeeaxzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.625rem;
    padding: 1rem 0.5rem 0.375rem;
    color: var(--morphi-text-secondary);
}

.empty-state p[b-hxjgeeaxzj] {
    margin: 0;
    font-size: 0.78125rem;
}

.alertas-card[b-hxjgeeaxzj] {
    border-top: 3px solid var(--morphi-danger);
}

.alertas-card h2 svg.ic[b-hxjgeeaxzj] {
    color: var(--morphi-danger);
}

.alertas-icon-wrap[b-hxjgeeaxzj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--morphi-danger-bg);
}

.alertas-icon-wrap svg.ic[b-hxjgeeaxzj] {
    width: 19px;
    height: 19px;
    color: var(--morphi-danger);
}

.alertas-list[b-hxjgeeaxzj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.alerta-item[b-hxjgeeaxzj] {
    display: flex;
    gap: 0.625rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--morphi-border);
}

.alerta-item:last-child[b-hxjgeeaxzj] { border-bottom: none; padding-bottom: 0; }

.alerta-dot[b-hxjgeeaxzj] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 0.375rem;
    flex-shrink: 0;
    background: var(--morphi-azul);
}

.alerta-tipo-warning .alerta-dot[b-hxjgeeaxzj] { background: var(--morphi-warning); }
.alerta-tipo-danger .alerta-dot[b-hxjgeeaxzj] { background: var(--morphi-danger); }

.alerta-body strong[b-hxjgeeaxzj] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--morphi-text);
    margin-bottom: 0.125rem;
}

.alerta-body p[b-hxjgeeaxzj] {
    margin: 0;
    font-size: 0.78125rem;
    color: var(--morphi-text-secondary);
    line-height: 1.4;
}

.contenido-cargando[b-hxjgeeaxzj] {
    margin: 0;
    font-size: 0.78125rem;
    color: var(--morphi-text-secondary);
    padding: 0.5rem 0;
}

.tip-body[b-hxjgeeaxzj] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tip-body p[b-hxjgeeaxzj] {
    margin: 0;
    font-size: 0.78125rem;
    color: var(--morphi-text-secondary);
    line-height: 1.5;
    flex: 1;
}

.tip-arrow[b-hxjgeeaxzj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    padding: 0;
    color: var(--morphi-slate);
    cursor: pointer;
    margin-top: 1px;
}

.tip-arrow:hover[b-hxjgeeaxzj] { color: var(--morphi-azul-oscuro); }

.tip-dots[b-hxjgeeaxzj] {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.tip-dots span[b-hxjgeeaxzj] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--morphi-border);
}

.tip-dots span.active[b-hxjgeeaxzj] { background: var(--morphi-azul); }

/* ── Footer ──────────────────────────────────────────────────────── */
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .inicio-page-inner[b-hxjgeeaxzj] {
        padding: 1.25rem 1rem 2.5rem;
    }

    .dash-toolbar[b-hxjgeeaxzj] {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-tabs[b-hxjgeeaxzj] { width: 100%; }
    .dash-tab[b-hxjgeeaxzj] { flex: 1; }
    .dash-period[b-hxjgeeaxzj] { width: 100%; }
    .dash-kpis[b-hxjgeeaxzj] { grid-template-columns: repeat(2, 1fr); }
    .lower-grid[b-hxjgeeaxzj] { grid-template-columns: 1fr; }

    /* El gráfico deja de repartir las columnas a la fuerza (flex:1) y pasa a tener
       un ancho mínimo por barra + scroll horizontal propio, contenido dentro de la
       card — así nunca empuja el ancho de .inicio-page (que .app-content recortaría
       por overflow:hidden) ni superpone las etiquetas de hora. Con pocas barras
       (Semana/Mes) el contenido entra entero y no aparece scroll. */
    .dash-chart-wrap[b-hxjgeeaxzj] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bar-col[b-hxjgeeaxzj] {
        flex: 0 0 auto;
        min-width: 38px;
    }

    /* Igual que en desktop cuando hay más de 18 barras: solo se etiquetan con el
       monto la barra pico y la mínima, el resto no muestra número para no pisarse. */
    .bar-col:not(.peak):not(.low) .bar-value[b-hxjgeeaxzj] {
        display: none;
    }
}

@media (max-width: 480px) {
    .dash-kpis[b-hxjgeeaxzj] { grid-template-columns: 1fr 1fr; gap: 0.625rem; }
    .kpi-value[b-hxjgeeaxzj] { font-size: 1.0625rem; }
    .bar-track[b-hxjgeeaxzj] { height: 130px; }
    .bar-col[b-hxjgeeaxzj] { min-width: 34px; }
    .dash-chart[b-hxjgeeaxzj] { gap: 6px; }
}
/* /Components/Pages/Reportes/RegistroCajas/RegistroCajas.razor.rz.scp.css */
/* Registro de Cajas — página bespoke (no ABM: no hay alta/baja/modificación,
   es un visor de datos con acciones puntuales). Grilla siguiendo exactamente
   la estructura de EjecutarReporteModal.razor.css (paginado real + auto-fit +
   sin resize manual), agrupada por Sucursal como StockActual.razor. */

.rc-page[b-skt7v8b61g] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0 2px;
    font-size: 13px;
    color: var(--morphi-text);
}

.rc-page-head[b-skt7v8b61g],
.rc-toolbar[b-skt7v8b61g],
.rc-filters[b-skt7v8b61g],
.rc-error[b-skt7v8b61g] {
    flex-shrink: 0;
}

.rc-page-head[b-skt7v8b61g] {
    margin: 4px 0 14px;
}
.rc-page-head h1[b-skt7v8b61g] {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--morphi-text);
}
.rc-page-head p[b-skt7v8b61g] {
    margin: 0;
    font-size: 13px;
    color: var(--morphi-text-secondary);
}

/* ── Toolbar de acciones ──────────────────────────────────────────── */
.rc-toolbar[b-skt7v8b61g] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    box-shadow: var(--morphi-shadow-sm);
    margin-bottom: 14px;
}

.rc-btn[b-skt7v8b61g] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--morphi-border);
    background: var(--morphi-surface);
    color: var(--morphi-text);
    font-family: 'Montserrat', 'Segoe UI', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rc-btn .ic[b-skt7v8b61g] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rc-btn:hover:not(:disabled)[b-skt7v8b61g] {
    border-color: var(--morphi-azul);
    color: var(--morphi-azul-oscuro);
    background: var(--morphi-azul-tint);
}
.rc-btn:disabled[b-skt7v8b61g] {
    opacity: .45;
    cursor: not-allowed;
}

.rc-btn.primary[b-skt7v8b61g] {
    background: var(--morphi-azul-oscuro);
    border-color: var(--morphi-azul-oscuro);
    color: #fff;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}
.rc-btn.primary:hover:not(:disabled)[b-skt7v8b61g] {
    background: var(--morphi-azul);
    border-color: var(--morphi-azul);
    color: #fff;
}
.rc-btn.primary:disabled[b-skt7v8b61g] {
    background: var(--morphi-surface-2);
    border-color: var(--morphi-border);
    color: var(--morphi-text-secondary);
    clip-path: none;
}

.rc-btn.soporte[b-skt7v8b61g] {
    border-style: dashed;
    border-color: var(--morphi-warning);
    color: var(--morphi-warning);
    background: var(--morphi-warning-bg);
}
.rc-btn.soporte:disabled[b-skt7v8b61g] {
    opacity: .7;
}

.rc-toolbar-sep[b-skt7v8b61g] {
    width: 1px;
    align-self: stretch;
    background: var(--morphi-border);
    margin: 0 2px;
}

/* ── Filtros de fecha ─────────────────────────────────────────────── */
.rc-filters[b-skt7v8b61g] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    background: var(--morphi-surface-2);
}
.fld[b-skt7v8b61g] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}
.fld.narrow[b-skt7v8b61g] { min-width: 150px; }
.fld label[b-skt7v8b61g] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--morphi-text-secondary);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.rc-apply[b-skt7v8b61g] { margin-left: auto; }

.rc-error[b-skt7v8b61g] {
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: var(--morphi-danger-bg);
    color: var(--morphi-danger);
    font-size: 12.5px;
    font-weight: 600;
}

.rc-info-msg[b-skt7v8b61g] {
    text-align: center;
    padding: 40px 20px;
    color: var(--morphi-text-secondary);
}

/* ── Estado (badge Abierta/Cerrada) ───────────────────────────────── */
.rc-estado[b-skt7v8b61g] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.rc-estado.abierta[b-skt7v8b61g] { background: var(--morphi-success-bg); color: var(--morphi-success); }
.rc-estado.cerrada[b-skt7v8b61g] { background: var(--morphi-surface-2); color: var(--morphi-text-secondary); }
.rc-estado .dot[b-skt7v8b61g] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ── Fila que ubica el botón de columnas a la izquierda de la grilla,
   mismo patrón que .er-grid-row / .er-col-toggle en EjecutarReporteModal. ── */
.rc-grid-row[b-skt7v8b61g] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 240px;
}

.rc-col-toggle[b-skt7v8b61g] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    background: var(--morphi-surface-2);
    color: var(--morphi-text-secondary);
    cursor: pointer;
    padding: 0;
}
.rc-col-toggle:hover[b-skt7v8b61g] {
    background: var(--morphi-azul-tint);
    color: var(--morphi-azul-oscuro);
    border-color: var(--morphi-azul);
}
.rc-col-toggle .ic[b-skt7v8b61g] {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rc-grid-wrap[b-skt7v8b61g] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    overflow: hidden;
    background: var(--morphi-surface);
}

/* Mismos overrides que EjecutarReporteModal.razor.css — ver los comentarios
   largos ahí (altura dura para el scroll interno del grid, width:auto para
   que el auto-fit realmente exceda el viewport y dispare scroll horizontal). */
.rc-grid-wrap[b-skt7v8b61g]  dxbl-grid {
    height: 100%;
    --dxbl-grid-border-radius: 0 !important;
}
.rc-grid-wrap[b-skt7v8b61g]  .dxbl-grid-table {
    width: auto !important;
    min-width: 100% !important;
}
.rc-grid-wrap[b-skt7v8b61g]  .dxbl-scroll-viewer-vert-scroll-bar,
.rc-grid-wrap[b-skt7v8b61g]  .dxbl-scroll-viewer-hor-scroll-bar {
    --dxbl-ribbon-scrollbar-margin-x: 1px !important;
    --dxbl-ribbon-scrollbar-margin-y: 1px !important;
}

/* ── Modal Preview/Imprime Caja ───────────────────────────────────── */
[b-skt7v8b61g] .rc-modal-popup .dxbl-popup-body {
    padding: 0;
}
.rc-modal-body[b-skt7v8b61g] {
    display: flex;
    flex-direction: column;
    height: calc(88dvh - 130px);
    padding: 16px 20px 0;
}
.rc-modal-sub[b-skt7v8b61g] {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--morphi-text-secondary);
    flex-shrink: 0;
}
.rc-modal-layout[b-skt7v8b61g] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    overflow: hidden;
}
.rc-caja-list[b-skt7v8b61g] {
    width: 280px;
    flex-shrink: 0;
    overflow: auto;
    padding: 8px;
    border-right: 1px solid var(--morphi-border);
    background: var(--morphi-surface-2);
}
.rc-caja-item[b-skt7v8b61g] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.rc-caja-item:hover[b-skt7v8b61g] { background: var(--morphi-surface); }
.rc-caja-item.selected[b-skt7v8b61g] { background: var(--morphi-azul-tint-strong); }
.rc-caja-item input[b-skt7v8b61g] { accent-color: var(--morphi-azul-oscuro); flex-shrink: 0; }
.rc-caja-item > div[b-skt7v8b61g] { flex: 1; min-width: 0; }
.rc-caja-item .titulo[b-skt7v8b61g] { font-size: 12.5px; font-weight: 700; color: var(--morphi-text); }
.rc-caja-item .sub[b-skt7v8b61g] { font-size: 11px; color: var(--morphi-text-secondary); margin-top: 1px; }

.rc-doc-wrap[b-skt7v8b61g] {
    flex: 1 1 auto;
    overflow: auto;
    padding: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--morphi-surface);
}

.doc-sheet[b-skt7v8b61g] {
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--morphi-border);
    border-radius: 8px;
    padding: 22px;
}
.doc-head[b-skt7v8b61g] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 2px solid var(--morphi-navy);
    padding-bottom: 10px;
    margin-bottom: 16px;
}
.doc-brand[b-skt7v8b61g] { font-size: 15px; font-weight: 800; color: var(--morphi-azul-oscuro); letter-spacing: .02em; }
.doc-title[b-skt7v8b61g] { font-size: 12px; font-weight: 700; color: var(--morphi-text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.doc-grid[b-skt7v8b61g] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 18px; }
.doc-grid > div[b-skt7v8b61g] { display: flex; flex-direction: column; gap: 2px; }
.doc-grid span[b-skt7v8b61g] { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--morphi-text-secondary); }
.doc-grid b[b-skt7v8b61g] { font-size: 12.5px; color: var(--morphi-text); }

table.doc-totales[b-skt7v8b61g] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.doc-totales td[b-skt7v8b61g] { padding: 7px 0; border-bottom: 1px solid var(--morphi-border); color: var(--morphi-text); }
table.doc-totales td.num[b-skt7v8b61g] { text-align: right; font-variant-numeric: tabular-nums; }
table.doc-totales tr.doc-total-final td[b-skt7v8b61g] { border-top: 2px solid var(--morphi-navy); border-bottom: none; padding-top: 10px; font-weight: 800; font-size: 14px; color: var(--morphi-azul-oscuro); }

.doc-nota[b-skt7v8b61g] {
    margin: 16px 0 0;
    font-size: 10.5px;
    color: var(--morphi-text-secondary);
    font-style: italic;
}

.rc-modal-foot[b-skt7v8b61g] {
    padding: 14px 20px;
    border-top: 1px solid var(--morphi-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .rc-filters[b-skt7v8b61g] { flex-direction: column; align-items: stretch; }
    .rc-apply[b-skt7v8b61g] { margin-left: 0; }
    .rc-modal-layout[b-skt7v8b61g] { flex-direction: column; }
    .rc-caja-list[b-skt7v8b61g] { width: 100%; max-height: 160px; border-right: none; border-bottom: 1px solid var(--morphi-border); }
}
/* /Components/Pages/Reportes/ReportesBase/ListadoDeReportes/ListadoDeReportes.razor.rz.scp.css */
/* Listado de Reportes — página bespoke, no usa AbmLayout (ver Docs/mockup-rediseno-listado-reportes.html:
   navegador de categorías, no un ABM). */

.lr-page[b-5c7e2phgr2] {
    height: 100%;
    overflow-y: auto;
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
    padding: 4px 4px 32px;
    font-size: 13px;
    color: var(--morphi-text);
}

.lr-head[b-5c7e2phgr2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 8px 0 20px;
    flex-wrap: wrap;
}

.lr-head h1[b-5c7e2phgr2] {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--morphi-text);
}

.lr-head p[b-5c7e2phgr2] {
    margin: 0;
    font-size: 13px;
    color: var(--morphi-text-secondary);
}

.lr-search[b-5c7e2phgr2] {
    position: relative;
    width: 300px;
    max-width: 100%;
}

.lr-search svg.ic[b-5c7e2phgr2] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--morphi-text-secondary);
}

.lr-search input[b-5c7e2phgr2] {
    width: 100%;
    padding: 9px 14px 9px 34px;
    border-radius: 999px;
    border: 1px solid var(--morphi-border);
    background: var(--morphi-surface);
    color: var(--morphi-text);
    font: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.lr-search input[b-5c7e2phgr2]::placeholder { color: var(--morphi-text-secondary); }
.lr-search input:focus[b-5c7e2phgr2] { border-color: var(--morphi-azul); box-shadow: 0 0 0 3px var(--morphi-azul-tint-strong); }

.lr-categorias[b-5c7e2phgr2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lr-cat[b-5c7e2phgr2] {
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    box-shadow: var(--morphi-shadow-sm);
    overflow: hidden;
}
.lr-cat.disabled[b-5c7e2phgr2] { opacity: .55; }

.lr-cat-head[b-5c7e2phgr2] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
}
.lr-cat.disabled .lr-cat-head[b-5c7e2phgr2] { cursor: default; }

.lr-cat-icon[b-5c7e2phgr2] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--morphi-azul-tint);
    flex: 0 0 auto;
}
.lr-cat-icon svg[b-5c7e2phgr2] {
    width: 18px;
    height: 18px;
    stroke: var(--morphi-azul-oscuro);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lr-cat-titles[b-5c7e2phgr2] { flex: 1 1 auto; min-width: 0; }
.lr-cat-titles .t[b-5c7e2phgr2] { font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--morphi-text); }

.lr-cat-count[b-5c7e2phgr2] {
    font-size: 11px;
    font-weight: 700;
    color: var(--morphi-azul-oscuro);
    background: var(--morphi-azul-tint);
    border-radius: 999px;
    padding: 3px 10px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.lr-cat.disabled .lr-cat-count[b-5c7e2phgr2] { color: var(--morphi-text-secondary); background: var(--morphi-surface-2); }

.lr-cat-chevron[b-5c7e2phgr2] {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--morphi-text-secondary);
    transition: transform .18s ease;
}
.lr-cat-chevron svg[b-5c7e2phgr2] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lr-cat.open .lr-cat-chevron[b-5c7e2phgr2] { transform: rotate(180deg); color: var(--morphi-azul-oscuro); }

.lr-cat-body[b-5c7e2phgr2] {
    border-top: 1px solid var(--morphi-border);
    background: var(--morphi-surface-2);
    padding: 12px 18px 16px;
}

.lr-reportes-grid[b-5c7e2phgr2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
@media (max-width: 860px) { .lr-reportes-grid[b-5c7e2phgr2] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lr-reportes-grid[b-5c7e2phgr2] { grid-template-columns: 1fr; } }

.lr-rep-item[b-5c7e2phgr2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--morphi-surface);
    cursor: pointer;
    transition: border-color .12s, background .12s, transform .08s;
}
.lr-rep-item:hover[b-5c7e2phgr2] { border-color: var(--morphi-azul); background: var(--morphi-azul-tint); }
.lr-rep-item:active[b-5c7e2phgr2] { transform: scale(.99); }
.lr-rep-item.hidden[b-5c7e2phgr2] { display: none; }

.lr-rep-item svg[b-5c7e2phgr2] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    stroke: var(--morphi-text-secondary);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lr-rep-item:hover svg[b-5c7e2phgr2] { stroke: var(--morphi-azul-oscuro); }

.lr-rep-item .txt[b-5c7e2phgr2] { font-size: 12.6px; font-weight: 500; line-height: 1.25; color: var(--morphi-text); }
.lr-rep-item .badge-new[b-5c7e2phgr2] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--morphi-success);
    background: var(--morphi-success-bg);
    border-radius: 5px;
    padding: 1px 5px;
    margin-left: auto;
    flex: 0 0 auto;
    letter-spacing: .02em;
}

.lr-info-msg[b-5c7e2phgr2] {
    text-align: center;
    padding: 44px 20px;
    color: var(--morphi-text-secondary);
    font-size: 13px;
}
.lr-info-msg.lr-error[b-5c7e2phgr2] {
    color: var(--morphi-danger);
}

.lr-no-results[b-5c7e2phgr2] {
    text-align: center;
    padding: 44px 20px;
    color: var(--morphi-text-secondary);
    font-size: 13px;
}
/* /Components/Pages/Sesion/Clientes/Clientes.razor.rz.scp.css */
/* Pantalla previa al layout logueado (MainLayout la renderiza fuera de
   .app-layout, todavía no hay sidebar/topbar de la app) — necesita su
   propio alto de viewport y su propia topbar, ver Nodos.razor.css (mismo
   criterio, comparten familia visual pero no tienen wrapper en común). */
.sel-page[b-0e8rk3m5zt] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background: var(--morphi-bg);
    color: var(--morphi-text);
}

/* ── Topbar ──────────────────────────────────────────────────────────── */
.sel-topbar[b-0e8rk3m5zt] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    height: 58px;
    flex-shrink: 0;
    background: var(--morphi-surface);
    border-bottom: 1px solid var(--morphi-border);
    box-shadow: var(--morphi-shadow-sm);
}

.brand img[b-0e8rk3m5zt] {
    height: 34px;
    width: auto;
    display: block;
}

.sel-topbar-right[b-0e8rk3m5zt] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Chip oscuro por defecto (ofrece pasar a Modo Oscuro). Cuando ya estás en
   oscuro (ofrece Modo Claro) se invierte a blanco con texto oscuro. Colores
   fijos a propósito, no tokens --morphi-* (se invierten en modo oscuro y
   arruinarían el contraste) — mismo patrón que MainLayout.razor.css. */
.theme-toggle[b-0e8rk3m5zt] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--morphi-navy);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.9);
    padding: 5px 12px 5px 6px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.theme-toggle.chip-claro[b-0e8rk3m5zt] {
    background: #FFFFFF;
    border: 1px solid #DCE4E9;
    color: #1B242C;
}

.theme-toggle img[b-0e8rk3m5zt] {
    height: 20px;
    width: 20px;
    object-fit: contain;
    border-radius: 5px;
}

.usuario-chip[b-0e8rk3m5zt] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--morphi-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
}

.avatar[b-0e8rk3m5zt] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--morphi-azul), var(--morphi-mist));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 800;
    flex-shrink: 0;
}

.btn-ghost[b-0e8rk3m5zt] {
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    color: var(--morphi-text-secondary);
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.btn-ghost:hover[b-0e8rk3m5zt] {
    border-color: var(--morphi-slate);
    color: var(--morphi-text);
}

/* ── Estados de carga/error ──────────────────────────────────────────── */
.sel-empty-msg[b-0e8rk3m5zt] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--morphi-text-secondary);
    font-style: italic;
}

.sel-error[b-0e8rk3m5zt] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin: 2rem auto;
    padding: 10px 16px;
    background: var(--morphi-danger-bg);
    color: var(--morphi-danger);
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
}

/* ── Cuerpo ──────────────────────────────────────────────────────────── */
.sel-body[b-0e8rk3m5zt] {
    padding: 2.25rem 1.5rem 3rem;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.sel-header[b-0e8rk3m5zt] {
    text-align: center;
    margin-bottom: 1.75rem;
}

.sel-header h2[b-0e8rk3m5zt] {
    margin: 0 0 .35rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--morphi-text);
}

.sel-header p[b-0e8rk3m5zt] {
    margin: 0;
    color: var(--morphi-text-secondary);
    font-size: .92rem;
}

.sel-buscador[b-0e8rk3m5zt] {
    max-width: 360px;
    margin: 0 auto 1.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: 8px;
    padding: 3px 12px;
}

.sel-buscador svg.ic[b-0e8rk3m5zt] {
    color: var(--morphi-text-secondary);
    flex-shrink: 0;
}

.sel-buscador[b-0e8rk3m5zt]  .dxbl-text-edit {
    --dxbl-text-edit-bg: transparent !important;
    --dxbl-text-edit-color: var(--morphi-text) !important;
    --dxbl-text-edit-placeholder-color: var(--morphi-text-secondary) !important;
    --dxbl-text-edit-border-color: transparent !important;
    --dxbl-text-edit-border-hovered-color: transparent !important;
    --dxbl-text-edit-border-active-color: transparent !important;
    --dxbl-text-edit-underline-color: transparent !important;
    --dxbl-text-edit-underline-hovered-color: transparent !important;
    --dxbl-text-edit-underline-focused-color: transparent !important;
    --dxbl-text-edit-underline-active-color: transparent !important;
    --dxbl-text-edit-font-family-m: 'Montserrat', 'Segoe UI', sans-serif !important;
    --dxbl-text-edit-font-size-m: 13px !important;
    box-shadow: none !important;
}

/* ── Grid de cards ───────────────────────────────────────────────────── */
.sel-grid[b-0e8rk3m5zt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.sel-card[b-0e8rk3m5zt] {
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    box-shadow: var(--morphi-shadow-sm);
    padding: 16px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, border-color .12s;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.sel-card:hover[b-0e8rk3m5zt] {
    transform: translateY(-2px);
    box-shadow: var(--morphi-shadow-md);
    border-color: var(--morphi-azul);
}

.sel-card.ultimo[b-0e8rk3m5zt] {
    border-color: var(--morphi-azul-oscuro);
    box-shadow: 0 0 0 3px var(--morphi-azul-tint-strong);
}

.sel-card.inactivo[b-0e8rk3m5zt] {
    opacity: .55;
}

.card-head[b-0e8rk3m5zt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.card-name-wrap[b-0e8rk3m5zt] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.card-name[b-0e8rk3m5zt] {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--morphi-text);
    line-height: 1.25;
    word-break: break-word;
}

.badges[b-0e8rk3m5zt] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.badge[b-0e8rk3m5zt] {
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
}

.badge-ultimo[b-0e8rk3m5zt]   { background: var(--morphi-azul-tint-strong); color: var(--morphi-azul-oscuro); }
.badge-activo[b-0e8rk3m5zt]   { background: var(--morphi-success-bg); color: var(--morphi-success); }
.badge-inactivo[b-0e8rk3m5zt] { background: var(--morphi-danger-bg); color: var(--morphi-danger); }

.card-datos[b-0e8rk3m5zt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--morphi-border);
}

.dato-row[b-0e8rk3m5zt] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.dato-label[b-0e8rk3m5zt] { color: var(--morphi-text-secondary); }

.dato-val[b-0e8rk3m5zt] {
    font-weight: 600;
    color: var(--morphi-text);
    text-align: right;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sel-topbar[b-0e8rk3m5zt] { padding: 0 14px; height: 54px; }
    .brand img[b-0e8rk3m5zt] { height: 28px; }
    .usuario-chip .nombre[b-0e8rk3m5zt] { display: none; }
    .sel-body[b-0e8rk3m5zt] { padding: 1.5rem 1rem 2.5rem; }
    .sel-grid[b-0e8rk3m5zt] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .sel-topbar-right[b-0e8rk3m5zt] { gap: 8px; }
    .btn-ghost[b-0e8rk3m5zt] { padding: 6px 10px; font-size: 11.5px; }
    .theme-toggle span[b-0e8rk3m5zt] { display: none; }
    .theme-toggle[b-0e8rk3m5zt] { padding: 4px; }
    .sel-header h2[b-0e8rk3m5zt] { font-size: 1.25rem; }
}
/* /Components/Pages/Sesion/Login/Login.razor.rz.scp.css */
.login-container[b-zg5v9ln6i1] {
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
}

.login-card[b-zg5v9ln6i1] {
    background: var(--morphi-surface);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--morphi-shadow-md);
    width: 100%;
    max-width: 550px;
}

.login-header[b-zg5v9ln6i1] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-header h2[b-zg5v9ln6i1] {
    margin: 0 0 0.25rem;
    font-size: 1.8rem;
    color: var(--morphi-text);
}

.login-header p[b-zg5v9ln6i1] {
    color: var(--morphi-text-secondary);
    margin: 0;
}

.btn-full-width[b-zg5v9ln6i1] {
    width: 100%;
}

.forgot-link[b-zg5v9ln6i1] {
    display: block;
    text-align: center;
    color: var(--morphi-text-secondary);
    font-size: 0.9rem;
    text-decoration: none;
}

.forgot-link:hover[b-zg5v9ln6i1] {
    color: var(--morphi-azul-oscuro);
    text-decoration: underline;
}

.login-error[b-zg5v9ln6i1] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--morphi-danger-bg);
    color: var(--morphi-danger);
    border-radius: 6px;
    font-size: 0.9rem;
}

/* Los captions de DxFormLayoutItem ("Usuario (usuario@grupo)", "Contraseña")
   y el label de DxCheckBox ("Recordarme") vienen con el color de texto fijo
   del tema Fluent en modo claro — no siguen el toggle de modo oscuro de
   Morphi (son tokens de diseño separados, `--dxds-*`, no `--morphi-*`).
   Sin esto quedan en negro sobre el fondo oscuro y no se leen. */
.login-container[b-zg5v9ln6i1]  .dxbl-form-layout-item-caption,
.login-container[b-zg5v9ln6i1]  label {
    color: var(--morphi-text) !important;
}

.login-container[b-zg5v9ln6i1]  .dxbl-checkbox {
    --dxbl-checkbox-color: var(--morphi-text) !important;
}

@media (max-width: 480px) {
    .login-card[b-zg5v9ln6i1] {
        padding: 1.75rem 1.25rem;
        border-radius: 10px;
    }

    .login-header h2[b-zg5v9ln6i1] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Sesion/Nodos/Nodos.razor.rz.scp.css */
/* Pantalla previa al layout logueado (MainLayout la renderiza fuera de
   .app-layout, todavía no hay sidebar/topbar de la app) — necesita su
   propio alto de viewport y su propia topbar. Comparte familia visual con
   Clientes.razor.css (mismos nombres de clase) pero no hay wrapper común
   entre los dos componentes, así que el bloque se repite acá. */
.sel-page[b-1heptr1dbj] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background: var(--morphi-bg);
    color: var(--morphi-text);
}

/* ── Topbar ──────────────────────────────────────────────────────────── */
.sel-topbar[b-1heptr1dbj] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    height: 58px;
    flex-shrink: 0;
    background: var(--morphi-surface);
    border-bottom: 1px solid var(--morphi-border);
    box-shadow: var(--morphi-shadow-sm);
}

.brand img[b-1heptr1dbj] {
    height: 34px;
    width: auto;
    display: block;
}

.topbar-volver[b-1heptr1dbj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--morphi-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
}

.topbar-volver:hover[b-1heptr1dbj] {
    color: var(--morphi-azul-oscuro);
    background: var(--morphi-azul-tint);
}

.sel-topbar-right[b-1heptr1dbj] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Chip oscuro por defecto (ofrece pasar a Modo Oscuro). Cuando ya estás en
   oscuro (ofrece Modo Claro) se invierte a blanco con texto oscuro. Colores
   fijos a propósito, no tokens --morphi-* (se invierten en modo oscuro y
   arruinarían el contraste) — mismo patrón que MainLayout.razor.css. */
.theme-toggle[b-1heptr1dbj] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--morphi-navy);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.9);
    padding: 5px 12px 5px 6px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.theme-toggle.chip-claro[b-1heptr1dbj] {
    background: #FFFFFF;
    border: 1px solid #DCE4E9;
    color: #1B242C;
}

.theme-toggle img[b-1heptr1dbj] {
    height: 20px;
    width: 20px;
    object-fit: contain;
    border-radius: 5px;
}

.usuario-chip[b-1heptr1dbj] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--morphi-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
}

.avatar[b-1heptr1dbj] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--morphi-azul), var(--morphi-mist));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 800;
    flex-shrink: 0;
}

.btn-ghost[b-1heptr1dbj] {
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    color: var(--morphi-text-secondary);
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.btn-ghost:hover[b-1heptr1dbj] {
    border-color: var(--morphi-slate);
    color: var(--morphi-text);
}

/* ── Cuerpo ──────────────────────────────────────────────────────────── */
.sel-body[b-1heptr1dbj] {
    padding: 2.25rem 1.5rem 3rem;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.sel-header[b-1heptr1dbj] {
    text-align: center;
    margin-bottom: 1.75rem;
}

.sel-header h2[b-1heptr1dbj] {
    margin: 0 0 .35rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--morphi-text);
}

.sel-header p[b-1heptr1dbj] {
    margin: 0;
    color: var(--morphi-text-secondary);
    font-size: .92rem;
}

.sel-buscador[b-1heptr1dbj] {
    max-width: 360px;
    margin: 0 auto 1.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: 8px;
    padding: 3px 12px;
}

.sel-buscador svg.ic[b-1heptr1dbj] {
    color: var(--morphi-text-secondary);
    flex-shrink: 0;
}

.sel-buscador[b-1heptr1dbj]  .dxbl-text-edit {
    --dxbl-text-edit-bg: transparent !important;
    --dxbl-text-edit-color: var(--morphi-text) !important;
    --dxbl-text-edit-placeholder-color: var(--morphi-text-secondary) !important;
    --dxbl-text-edit-border-color: transparent !important;
    --dxbl-text-edit-border-hovered-color: transparent !important;
    --dxbl-text-edit-border-active-color: transparent !important;
    --dxbl-text-edit-underline-color: transparent !important;
    --dxbl-text-edit-underline-hovered-color: transparent !important;
    --dxbl-text-edit-underline-focused-color: transparent !important;
    --dxbl-text-edit-underline-active-color: transparent !important;
    --dxbl-text-edit-font-family-m: 'Montserrat', 'Segoe UI', sans-serif !important;
    --dxbl-text-edit-font-size-m: 13px !important;
    box-shadow: none !important;
}

/* ── Grid de cards ───────────────────────────────────────────────────── */
.sel-grid[b-1heptr1dbj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.sel-card[b-1heptr1dbj] {
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    box-shadow: var(--morphi-shadow-sm);
    padding: 16px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, border-color .12s;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.sel-card:hover[b-1heptr1dbj] {
    transform: translateY(-2px);
    box-shadow: var(--morphi-shadow-md);
    border-color: var(--morphi-azul);
}

.sel-card.disabled[b-1heptr1dbj] {
    cursor: not-allowed;
    opacity: .55;
}

.card-head[b-1heptr1dbj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.card-name-wrap[b-1heptr1dbj] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.card-name[b-1heptr1dbj] {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--morphi-text);
    line-height: 1.25;
    word-break: break-word;
}

.badge[b-1heptr1dbj] {
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-servidor[b-1heptr1dbj] { background: var(--morphi-azul-tint-strong); color: var(--morphi-azul-oscuro); }
.badge-sucursal[b-1heptr1dbj] { background: var(--morphi-success-bg); color: var(--morphi-success); }

.estado-row[b-1heptr1dbj] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--morphi-text);
    padding-top: 10px;
    border-top: 1px solid var(--morphi-border);
}

.estado-dot[b-1heptr1dbj] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.estado-dot.ok[b-1heptr1dbj]       { background: var(--morphi-success); box-shadow: 0 0 0 3px var(--morphi-success-bg); }
.estado-dot.error[b-1heptr1dbj]    { background: var(--morphi-danger);  box-shadow: 0 0 0 3px var(--morphi-danger-bg); }
.estado-dot.servidor[b-1heptr1dbj] { background: var(--morphi-azul);    box-shadow: 0 0 0 3px var(--morphi-azul-tint-strong); }

.tiempo[b-1heptr1dbj] {
    margin-left: auto;
    color: var(--morphi-text-secondary);
    font-size: 11px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sel-topbar[b-1heptr1dbj] { padding: 0 14px; height: 54px; flex-wrap: wrap; row-gap: 6px; }
    .brand img[b-1heptr1dbj] { height: 28px; }
    .usuario-chip .nombre[b-1heptr1dbj] { display: none; }
    .topbar-volver span[b-1heptr1dbj] { display: inline; }
    .sel-body[b-1heptr1dbj] { padding: 1.5rem 1rem 2.5rem; }
    .sel-grid[b-1heptr1dbj] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .sel-topbar-right[b-1heptr1dbj] { gap: 8px; }
    .btn-ghost[b-1heptr1dbj] { padding: 6px 10px; font-size: 11.5px; }
    .theme-toggle span[b-1heptr1dbj] { display: none; }
    .theme-toggle[b-1heptr1dbj] { padding: 4px; }
    .topbar-volver[b-1heptr1dbj] { font-size: 11.5px; }
    .sel-header h2[b-1heptr1dbj] { font-size: 1.25rem; }
}
/* /Components/Pages/Soporte/PanelSoporte/PanelSoporte.razor.rz.scp.css */
/* .ps-page es hijo directo de .app-content (display:flex; flex-direction:column
   en MainLayout.razor.css) — un flex item con margin:auto en el eje transversal
   ignora el stretch y se dimensiona por su propio contenido en vez de por el
   ancho disponible (mismo bug ya resuelto en Index.razor.css/.inicio-page: ver
   memoria "Flex margin:auto pitfall"). Por eso el centrado vive en
   .ps-page-inner, no acá. */
.ps-page[b-ydq9hlnimx] {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.ps-page-inner[b-ydq9hlnimx] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
}

.ps-head[b-ydq9hlnimx] {
    margin: 0.375rem 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ps-head h1[b-ydq9hlnimx] {
    margin: 0 0 0.25rem;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--morphi-text);
}

.ps-head p[b-ydq9hlnimx] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--morphi-text-secondary);
}

.ps-head-badge[b-ydq9hlnimx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--morphi-danger-bg);
    color: var(--morphi-danger);
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 5px 12px;
    border-radius: 20px;
    flex-shrink: 0;
}

.ps-head-badge svg.ic[b-ydq9hlnimx] { width: 13px; height: 13px; }

.ps-shell[b-ydq9hlnimx] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

/* ── Rail de módulos: hoy solo hay uno, preparado para sumar más a futuro ── */
.ps-rail[b-ydq9hlnimx] {
    width: 220px;
    flex-shrink: 0;
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    box-shadow: var(--morphi-shadow-sm);
    padding: 0.875rem;
    position: sticky;
    top: 0;
}

.ps-rail-title[b-ydq9hlnimx] {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--morphi-text-secondary);
    margin: 0 0 0.625rem 4px;
}

.ps-rail-item[b-ydq9hlnimx] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    padding: 0.625rem 0.6875rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--morphi-text);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 2px;
}

.ps-rail-item svg.ic[b-ydq9hlnimx] { width: 16px; height: 16px; color: var(--morphi-text-secondary); flex-shrink: 0; }
.ps-rail-item.active[b-ydq9hlnimx] { background: var(--morphi-azul-tint-strong); color: var(--morphi-azul-oscuro); }
.ps-rail-item.active svg.ic[b-ydq9hlnimx] { color: var(--morphi-azul-oscuro); }
.ps-rail-item:not(.active):not(:disabled):hover[b-ydq9hlnimx] { background: var(--morphi-surface-2); }
.ps-rail-item:disabled[b-ydq9hlnimx] { color: var(--morphi-text-secondary); opacity: .55; cursor: default; }
.ps-rail-item-soon[b-ydq9hlnimx] { font-weight: 600; font-size: 0.75rem; }
.ps-rail-sep[b-ydq9hlnimx] { height: 1px; background: var(--morphi-border); margin: 8px 4px; }
.ps-rail-note[b-ydq9hlnimx] { font-size: 0.6875rem; color: var(--morphi-text-secondary); padding: 6px 4px 0; line-height: 1.4; }

.ps-module[b-ydq9hlnimx] {
    flex: 1;
    min-width: 0;
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    box-shadow: var(--morphi-shadow-sm);
    overflow: hidden;
}

.ps-tabs[b-ydq9hlnimx] { display: flex; gap: 2px; padding: 0.625rem 0.875rem 0; border-bottom: 1px solid var(--morphi-border); overflow-x: auto; }

.ps-tab[b-ydq9hlnimx] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--morphi-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ps-tab svg.ic[b-ydq9hlnimx] { width: 15px; height: 15px; }
.ps-tab:hover[b-ydq9hlnimx] { color: var(--morphi-text); background: var(--morphi-surface-2); }
.ps-tab.active[b-ydq9hlnimx] { color: var(--morphi-azul-oscuro); border-bottom-color: var(--morphi-azul); }

.ps-toolbar[b-ydq9hlnimx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem;
    flex-wrap: wrap;
}

[b-ydq9hlnimx] .ps-btn-nuevo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--morphi-azul);
    color: #fff;
    border: none;
    padding: 0.5625rem 1rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--morphi-shadow-sm);
}

[b-ydq9hlnimx] .ps-btn-nuevo:hover { background: var(--morphi-azul-oscuro); }
[b-ydq9hlnimx] .ps-btn-nuevo svg.ic { width: 15px; height: 15px; }

.ps-toggle-inactivas[b-ydq9hlnimx] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--morphi-text-secondary);
    cursor: pointer;
    user-select: none;
}

.ps-toggle-inactivas input[b-ydq9hlnimx] { accent-color: var(--morphi-azul); width: 15px; height: 15px; cursor: pointer; }

.ps-error-banner[b-ydq9hlnimx] {
    margin: 0 0.875rem 0.875rem;
    padding: 0.625rem 0.875rem;
    background: var(--morphi-danger-bg);
    color: var(--morphi-danger);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.ps-tab-content[b-ydq9hlnimx] { padding: 0 0.875rem 0.875rem; }

/* ── Módulo Asistente IA ── */
.ps-asistente-panel[b-ydq9hlnimx] { padding: 1.5rem; max-width: 560px; }
.ps-asistente-panel h3[b-ydq9hlnimx] { margin: 0 0 0.625rem; font-size: 1rem; font-weight: 800; color: var(--morphi-text); }
.ps-asistente-panel p[b-ydq9hlnimx] { margin: 0 0 1.125rem; font-size: 0.8125rem; line-height: 1.55; color: var(--morphi-text-secondary); }
.ps-asistente-panel .ps-error-banner[b-ydq9hlnimx] { margin: 0 0 1.125rem; }
.ps-banner-ok[b-ydq9hlnimx] { background: var(--morphi-success-bg); color: var(--morphi-success); }
.ps-modal-confirm[b-ydq9hlnimx] { max-width: 440px; }
.ps-modal-confirm .ps-modal-body p[b-ydq9hlnimx] { margin: 0; font-size: 0.84375rem; line-height: 1.55; color: var(--morphi-text); }

.ps-empty[b-ydq9hlnimx] {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--morphi-text-secondary);
    font-size: 0.8125rem;
}

/* ── Grilla ──────────────────────────────────────────────────────────────
   Tabla simple (no DxGrid): las 3 listas son contenido editorial acotado,
   sin paginado/columnas dinámicas que justifiquen el motor completo de
   EjecutarReporteModal — igual respeta el resto del sistema (tokens, scroll
   horizontal si no entra, sin resize manual de columnas). */
.ps-grid-wrap[b-ydq9hlnimx] { border: 1px solid var(--morphi-border); border-radius: 9px; overflow-x: auto; }
.ps-grid[b-ydq9hlnimx] { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }

.ps-grid th[b-ydq9hlnimx] {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--morphi-surface-2);
    color: var(--morphi-text-secondary);
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    border-bottom: 1px solid var(--morphi-border);
}

.ps-grid td[b-ydq9hlnimx] {
    padding: 0.9375rem 1rem;
    border-bottom: 1px solid var(--morphi-border);
    color: var(--morphi-text);
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
}

.ps-grid tbody tr:last-child td[b-ydq9hlnimx] { border-bottom: none; }
.ps-grid tbody tr:hover[b-ydq9hlnimx] { background: var(--morphi-surface-2); }
.ps-grid td.ps-desc[b-ydq9hlnimx] { white-space: normal; max-width: 420px; min-width: 260px; line-height: 1.55; color: var(--morphi-text-secondary); }
.ps-grid tr.inactiva td[b-ydq9hlnimx] { opacity: .5; }

.badge[b-ydq9hlnimx] { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 0.6875rem; font-weight: 800; }
.badge-activo[b-ydq9hlnimx] { background: var(--morphi-success-bg); color: var(--morphi-success); }
.badge-inactivo[b-ydq9hlnimx] { background: var(--morphi-surface-2); color: var(--morphi-text-secondary); }
.badge-si[b-ydq9hlnimx] { background: var(--morphi-azul-tint-strong); color: var(--morphi-azul-oscuro); }
.badge-tipo-info[b-ydq9hlnimx] { background: var(--morphi-azul-tint-strong); color: var(--morphi-azul-oscuro); }
.badge-tipo-warning[b-ydq9hlnimx] { background: var(--morphi-warning-bg); color: var(--morphi-warning); }
.badge-tipo-danger[b-ydq9hlnimx] { background: var(--morphi-danger-bg); color: var(--morphi-danger); }
.badge svg.ic[b-ydq9hlnimx] { width: 11px; height: 11px; }

.ps-scope[b-ydq9hlnimx] { font-size: 0.78125rem; color: var(--morphi-text-secondary); white-space: normal; }

.ps-row-actions[b-ydq9hlnimx] { display: flex; gap: 4px; cursor: default; }

.ps-row-actions button[b-ydq9hlnimx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--morphi-border);
    background: var(--morphi-surface);
    border-radius: 7px;
    color: var(--morphi-text-secondary);
    cursor: pointer;
}

.ps-row-actions button:hover[b-ydq9hlnimx] { background: var(--morphi-surface-2); color: var(--morphi-azul-oscuro); border-color: var(--morphi-azul); }
.ps-row-actions button.ps-action-baja:hover[b-ydq9hlnimx] { color: var(--morphi-danger); border-color: var(--morphi-danger); }
.ps-row-actions svg.ic[b-ydq9hlnimx] { width: 14px; height: 14px; }

.ps-footer[b-ydq9hlnimx] {
    display: flex;
    justify-content: center;
    margin-top: 1.625rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--morphi-border);
    color: var(--morphi-text-secondary);
    font-size: 0.78125rem;
}

/* ── Modal de alta/edición ── */
.ps-modal-backdrop[b-ydq9hlnimx] {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 25, .45);
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}

.ps-modal[b-ydq9hlnimx] {
    width: 100%;
    max-width: 560px;
    background: var(--morphi-surface);
    border-radius: 12px;
    box-shadow: var(--morphi-shadow-md);
    overflow: hidden;
}

.ps-modal-head[b-ydq9hlnimx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--morphi-border);
}

.ps-modal-head h3[b-ydq9hlnimx] { margin: 0; font-size: 0.9375rem; font-weight: 800; color: var(--morphi-text); }

.ps-modal-close[b-ydq9hlnimx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--morphi-text-secondary);
    cursor: pointer;
    border-radius: 6px;
}

.ps-modal-close:hover[b-ydq9hlnimx] { background: var(--morphi-surface-2); color: var(--morphi-text); }

.ps-modal-body[b-ydq9hlnimx] {
    padding: 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    max-height: 64vh;
    overflow-y: auto;
}

.ps-field[b-ydq9hlnimx] { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ps-field label[b-ydq9hlnimx] { font-size: 0.75rem; font-weight: 700; color: var(--morphi-text-secondary); }
.ps-field-row[b-ydq9hlnimx] { display: flex; gap: 0.875rem; }
.ps-field-check[b-ydq9hlnimx] { flex-direction: row; align-items: center; gap: 8px; }
.ps-field-check label[b-ydq9hlnimx] { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--morphi-text); cursor: pointer; }

/* Estilar los controles DevExpress para que se vean como el resto del form
   (mismo criterio que .dx-inline-edit en Index.razor.css). */
[b-ydq9hlnimx] .ps-field .dxbl-edit,
[b-ydq9hlnimx] .ps-field .dxbl-textbox,
[b-ydq9hlnimx] .ps-field .dxbl-memo,
[b-ydq9hlnimx] .ps-field .dxbl-combobox,
[b-ydq9hlnimx] .ps-field .dxbl-spinedit,
[b-ydq9hlnimx] .ps-field .dxbl-dateedit {
    background: var(--morphi-surface-2) !important;
    border: 1px solid var(--morphi-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

[b-ydq9hlnimx] .ps-field .dxbl-edit-input { font-size: 0.84375rem; color: var(--morphi-text); }

.ps-scope-toggle[b-ydq9hlnimx] {
    display: flex;
    gap: 6px;
    background: var(--morphi-surface-2);
    border: 1px solid var(--morphi-border);
    border-radius: 9px;
    padding: 3px;
}

.ps-scope-opt[b-ydq9hlnimx] {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0.625rem;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-family: inherit;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--morphi-text-secondary);
    cursor: pointer;
}

.ps-scope-opt.active[b-ydq9hlnimx] { background: var(--morphi-azul); color: #fff; box-shadow: var(--morphi-shadow-sm); }

.ps-modal-foot[b-ydq9hlnimx] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--morphi-border);
    background: var(--morphi-surface-2);
}

[b-ydq9hlnimx] .ps-btn-cancel {
    padding: 0.5625rem 1.125rem;
    border-radius: 8px;
    border: 1px solid var(--morphi-border);
    background: var(--morphi-surface);
    color: var(--morphi-text);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

[b-ydq9hlnimx] .ps-btn-guardar {
    padding: 0.5625rem 1.25rem;
    border-radius: 8px;
    border: none;
    background: var(--morphi-azul);
    color: #fff;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

[b-ydq9hlnimx] .ps-btn-guardar:hover:not(:disabled) { background: var(--morphi-azul-oscuro); }
[b-ydq9hlnimx] .ps-btn-cancel:disabled,
[b-ydq9hlnimx] .ps-btn-guardar:disabled { opacity: .6; cursor: default; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ps-page-inner[b-ydq9hlnimx] {
        padding: 1.25rem 1rem 2.5rem;
    }

    /* align-items:flex-start (desktop, alinea rail+módulo arriba en la fila)
       pasa a controlar el ANCHO cuando flex-direction se vuelve column acá —
       sin este override cada tarjeta se achica a su contenido en vez de
       estirarse (visible sobre todo con poco contenido, ej. estado vacío). */
    .ps-shell[b-ydq9hlnimx] { flex-direction: column; align-items: stretch; }

    .ps-rail[b-ydq9hlnimx] {
        width: 100%;
        position: static;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0.625rem;
        overflow-x: auto;
    }

    .ps-rail-title[b-ydq9hlnimx] { display: none; }
    .ps-rail-item[b-ydq9hlnimx] { width: auto; white-space: nowrap; margin-bottom: 0; }
    .ps-rail-note[b-ydq9hlnimx] { display: none; }
    .ps-rail-sep[b-ydq9hlnimx] { display: none; }

    .ps-tabs[b-ydq9hlnimx] { overflow-x: auto; }
}

@media (max-width: 480px) {
    .ps-field-row[b-ydq9hlnimx] { flex-direction: column; }
    .ps-modal-backdrop[b-ydq9hlnimx] { padding: 16px 10px; }

    .ps-head-badge[b-ydq9hlnimx] { font-size: 0.625rem; padding: 4px 9px; }
    .ps-head h1[b-ydq9hlnimx] { font-size: 1.1875rem; }

    .ps-rail-item[b-ydq9hlnimx] { padding: 0.5rem 0.5625rem; font-size: 0.75rem; }
    .ps-rail-item svg.ic[b-ydq9hlnimx] { width: 14px; height: 14px; }

    .ps-tabs[b-ydq9hlnimx] { padding: 0.5rem 0.625rem 0; gap: 0; }
    .ps-tab[b-ydq9hlnimx] { padding: 0.5rem 0.625rem; font-size: 0.75rem; gap: 5px; }
    .ps-tab svg.ic[b-ydq9hlnimx] { width: 13px; height: 13px; }

    .ps-toolbar[b-ydq9hlnimx] { padding: 0.625rem; gap: 0.625rem; }
    [b-ydq9hlnimx] .ps-btn-nuevo { padding: 0.5rem 0.75rem; font-size: 0.75rem; }
    .ps-toggle-inactivas[b-ydq9hlnimx] { font-size: 0.71875rem; }

    .ps-tab-content[b-ydq9hlnimx] { padding: 0 0.625rem 0.625rem; }

    .ps-grid[b-ydq9hlnimx] { font-size: 0.75rem; }
    .ps-grid th[b-ydq9hlnimx] { padding: 0.625rem 0.75rem; font-size: 0.625rem; }
    .ps-grid td[b-ydq9hlnimx] { padding: 0.75rem; }
    .ps-grid td.ps-desc[b-ydq9hlnimx] { max-width: 220px; min-width: 180px; }
    .badge[b-ydq9hlnimx] { font-size: 0.625rem; padding: 2px 8px; }
    .ps-row-actions button[b-ydq9hlnimx] { width: 26px; height: 26px; }
    .ps-row-actions svg.ic[b-ydq9hlnimx] { width: 12px; height: 12px; }
}
/* /Components/Pages/Stock/Movimientos/CargaMovimiento/CargaMovimiento.razor.rz.scp.css */
/* Carga Movimiento — página bespoke (ver Docs/mockup-carga-movimiento.html): formulario de
   comprobante + grilla de renglones, no un ABM de una entidad. */

.cm-page[b-46lftrnipu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    box-shadow: var(--morphi-shadow-sm);
    font-size: 13px;
    color: var(--morphi-text);
}

.fld[b-46lftrnipu] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fld label[b-46lftrnipu] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--morphi-text-secondary);
}

/* ── Encabezado del comprobante ──────────────────────────────────────── */
.cm-header[b-46lftrnipu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--morphi-border);
    background: var(--morphi-surface-2);
    flex-shrink: 0;
}

.cm-row[b-46lftrnipu] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.cm-row .fld[b-46lftrnipu] { min-width: 160px; }
.cm-fecha[b-46lftrnipu] { min-width: 150px; max-width: 150px; }
.cm-movimiento[b-46lftrnipu] { flex: 1.3; min-width: 220px; }
.cm-seccion[b-46lftrnipu] { flex: 1; min-width: 190px; }
.cm-observaciones[b-46lftrnipu] { flex: 1; min-width: 100%; }

/* ── Fila de alta de renglones ───────────────────────────────────────── */
.cm-add-row[b-46lftrnipu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--morphi-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cm-add-cod[b-46lftrnipu] {
    position: relative;
    width: 220px;
}

.cm-add-cod[b-46lftrnipu]  .cm-input-error input {
    border-color: var(--morphi-danger) !important;
    box-shadow: 0 0 0 3px var(--morphi-danger-bg) !important;
}

.cm-add-cod-error[b-46lftrnipu] {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--morphi-danger);
    white-space: nowrap;
}

.cm-buscar-desc[b-46lftrnipu] {
    width: 300px;
}

.cm-import-btn[b-46lftrnipu] {
    margin-left: auto;
}

.cm-error-importacion[b-46lftrnipu] {
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--morphi-danger);
    background: var(--morphi-danger-bg);
    border-bottom: 1px solid var(--morphi-border);
    flex-shrink: 0;
}

/* ── Grilla de renglones ─────────────────────────────────────────────── */
.cm-table-wrap[b-46lftrnipu] {
    flex: 1;
    overflow: hidden;
    display: flex;
}

.cm-table-wrap[b-46lftrnipu]  .dxbl-grid { height: 100%; }

.cm-empty[b-46lftrnipu] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--morphi-text-secondary);
    font-size: 12.5px;
}

.cm-cell-unidad[b-46lftrnipu], .cm-cell-cantidad[b-46lftrnipu] {
    width: 100%;
}

.cm-quitar[b-46lftrnipu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: 5px;
    color: var(--morphi-text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.cm-quitar:hover[b-46lftrnipu] {
    background: var(--morphi-danger-bg);
    color: var(--morphi-danger);
}

/* ── Pie con acciones ────────────────────────────────────────────────── */
.cm-footer[b-46lftrnipu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 9px 16px;
    border-top: 1px solid var(--morphi-border);
    background: var(--morphi-surface-2);
    flex-shrink: 0;
}

.cm-nota[b-46lftrnipu] {
    margin-right: auto;
    font-size: 11.5px;
    font-weight: 600;
}

.cm-nota.ok[b-46lftrnipu] { color: var(--morphi-success); }
.cm-nota.error[b-46lftrnipu] { color: var(--morphi-danger); }

/* ── Responsive (breakpoints estándar del proyecto) ─────────────────── */
@media (max-width: 768px) {
    .cm-row[b-46lftrnipu] { flex-direction: column; align-items: stretch; }
    .cm-fecha[b-46lftrnipu], .cm-movimiento[b-46lftrnipu], .cm-seccion[b-46lftrnipu] { max-width: 100%; }
    .cm-add-row[b-46lftrnipu] { flex-direction: column; align-items: stretch; }
    .cm-buscar-desc[b-46lftrnipu], .cm-add-cod[b-46lftrnipu] { width: 100%; }
    .cm-import-btn[b-46lftrnipu] { margin-left: 0; }

    /* Mismo fix de DevExpress/Fluent que AbmLayout y Stock Actual: sin esto la
       grilla nunca deja aparecer scroll horizontal real en mobile. */
    .cm-table-wrap[b-46lftrnipu]  .dxbl-grid-table { width: auto !important; min-width: 100% !important; }
}
/* /Components/Pages/Stock/Movimientos/StockActual/StockActual.razor.rz.scp.css */
/* Muestra Stock Actual — página bespoke, no usa AbmLayout (ver Docs/mockup-rediseno-stock-actual.html:
   navegador de existencias con dos grillas apiladas, no un ABM de un registro). */

.sa-page[b-szlgzji8hm] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    box-shadow: var(--morphi-shadow-sm);
    font-size: 13px;
    color: var(--morphi-text);
}

/* ── Toolbar: checkboxes + filtro + export ────────────────────────── */
.sa-toolbar[b-szlgzji8hm] {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid var(--morphi-border);
    background: var(--morphi-surface-2);
    flex-shrink: 0;
}

.fld[b-szlgzji8hm] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fld label[b-szlgzji8hm] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--morphi-text-secondary);
}

/* Mismo alto que .fld (label + gap + control) para que el checkbox quede a
   la altura del INPUT de "Filtra Productos", no del texto de su label. */
.sa-check-wrap[b-szlgzji8hm] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sa-check-wrap .fld-spacer[b-szlgzji8hm] {
    font-size: 11.5px;
    font-weight: 700;
    visibility: hidden;
    user-select: none;
}

.sa-check[b-szlgzji8hm] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--morphi-text);
    cursor: pointer;
    white-space: nowrap;
    padding: 7px 0;
}

.sa-check input[b-szlgzji8hm] {
    accent-color: var(--morphi-azul-oscuro);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.sa-filtro[b-szlgzji8hm] {
    min-width: 240px;
    flex: 1;
    max-width: 380px;
}

.sa-actions[b-szlgzji8hm] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ── Editores (mismo mecanismo que PreciosVenta.razor.css) ────────────── */
.sa-page[b-szlgzji8hm]  .dxbl-text-edit {
    --dxbl-text-edit-bg: var(--morphi-surface) !important;
    --dxbl-text-edit-color: var(--morphi-text) !important;
    --dxbl-text-edit-placeholder-color: var(--morphi-text-secondary) !important;
    --dxbl-text-edit-border-color: var(--morphi-border) !important;
    --dxbl-text-edit-border-hovered-color: var(--morphi-slate) !important;
    --dxbl-text-edit-border-active-color: var(--morphi-azul) !important;
    --dxbl-text-edit-focus-border-color: var(--morphi-azul) !important;
    --dxbl-text-edit-underline-color: var(--morphi-border) !important;
    --dxbl-text-edit-underline-hovered-color: var(--morphi-azul) !important;
    --dxbl-text-edit-underline-focused-color: var(--morphi-azul) !important;
    --dxbl-text-edit-underline-active-color: var(--morphi-azul) !important;
    --dxbl-text-edit-border-radius-m: 7px !important;
    --dxbl-text-edit-font-family-m: 'Montserrat', 'Segoe UI', sans-serif !important;
    --dxbl-text-edit-font-size-m: 13px !important;
    --dxbl-text-edit-font-weight-m: 500 !important;
    box-shadow: none !important;
}

.sa-page[b-szlgzji8hm]  .dxbl-text-edit.dxbl-focused {
    box-shadow: 0 0 0 3px var(--morphi-azul-tint-strong) !important;
}

[b-szlgzji8hm] .sa-btn-primary {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
    padding: 7px 16px 7px 20px !important;
    background: var(--morphi-azul-oscuro) !important;
    border-color: var(--morphi-azul-oscuro) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(0,122,184,.3) !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}

[b-szlgzji8hm] .sa-btn-primary:not(:disabled):hover {
    background: var(--morphi-azul) !important;
    border-color: var(--morphi-azul) !important;
}

.sa-error[b-szlgzji8hm] {
    background: var(--morphi-danger-bg);
    border-bottom: 1px solid var(--morphi-danger);
    color: var(--morphi-danger);
    font-size: 12px;
    padding: 7px 14px;
    flex-shrink: 0;
}

/* ── Dos grillas apiladas con divisor arrastrable ─────────────────────── */
.sa-split[b-szlgzji8hm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sa-panel[b-szlgzji8hm] {
    flex: 1 1 0;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sa-panel-top[b-szlgzji8hm] {
    border-bottom: 1px solid var(--morphi-border);
}

.sa-panel-head[b-szlgzji8hm] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--morphi-text-secondary);
    background: var(--morphi-surface-2);
    border-bottom: 1px solid var(--morphi-border);
    flex-shrink: 0;
}

.sa-panel-head .sub[b-szlgzji8hm] {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    font-size: 12px;
    color: var(--morphi-text-secondary);
    opacity: .9;
}

.sa-panel-head .sub b[b-szlgzji8hm] {
    color: var(--morphi-azul-oscuro);
    font-weight: 700;
}

.sa-panel-head .sub.empty[b-szlgzji8hm] {
    font-style: italic;
    opacity: .75;
}

.sa-resizer[b-szlgzji8hm] {
    height: 9px;
    flex-shrink: 0;
    background: var(--morphi-surface-2);
    border-bottom: 1px solid var(--morphi-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: row-resize;
    /* Sin esto, iOS/Android intentan scrollear o hacer zoom con el gesto de
       arrastre en vez de dejarlo llegar como touchmove al drag del divisor. */
    touch-action: none;
}

.sa-resizer .grip[b-szlgzji8hm] {
    display: flex;
    gap: 3px;
    pointer-events: none;
}

.sa-resizer .grip span[b-szlgzji8hm] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--morphi-slate);
}

.sa-resizer:hover .grip span[b-szlgzji8hm],
.sa-resizer.dragging .grip span[b-szlgzji8hm] {
    background: var(--morphi-azul);
}

/* overflow:hidden (no auto) — mismo motivo que .er-grid-wrap en
   EjecutarReporteModal.razor.css (la tabla modelo): con overflow:auto acá Y el
   scroll-viewer interno del propio DxGrid, quedaban DOS regiones de scroll
   compitiendo (una barra vertical que "desaparecía" al bajar era la de este
   wrapper, tapada por la del grid) y la horizontal del grid no llegaba a
   mostrarse. El único que tiene que scrollear es el scroll-viewer interno de
   DevExpress (ver "dxbl-grid { height:100% }" más abajo) — este wrapper solo
   le da la altura acotada que ese scroll-viewer necesita para activarse. */
.sa-table-wrap[b-szlgzji8hm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sa-empty-msg[b-szlgzji8hm] {
    color: var(--morphi-text-secondary);
    font-style: italic;
    padding: 20px;
    margin: 0;
}

/* El DxGrid necesita una altura explícita para activar su propio scroll interno
   (mismo patrón que .er-grid-wrap ::deep dxbl-grid en EjecutarReporteModal.razor.css)
   — sin esto crece a su alto natural (todas las filas, ShowAllRows="true") y es
   .sa-table-wrap el que termina scrolleando en su lugar, lo que rompe el scroll
   horizontal y duplica la barra vertical. */
[b-szlgzji8hm] dxbl-grid {
    height: 100%;
}

/* Los tokens de color/tema de .dxbl-grid ya se pisan globalmente en site.css (cubre toda la
   app) — acá solo quedan los ajustes de tamaño/espaciado propios de esta pantalla. */
[b-szlgzji8hm] .dxbl-grid {
    --dxbl-grid-font-size: 12.5px !important;
    --dxbl-grid-border-radius: 0px !important;
    --dxbl-grid-text-cell-padding-x: 14px !important;
    --dxbl-grid-text-cell-padding-y: 7px !important;
    --dxbl-grid-group-row-bg: var(--morphi-surface-2) !important;
}

[b-szlgzji8hm] .sa-grid-clickable .dxbl-grid-table tbody tr {
    cursor: pointer;
}

[b-szlgzji8hm] .dxbl-grid-table thead th {
    text-transform: uppercase !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
}

/* Tabla modelo del proyecto (ver EjecutarReporteModal.razor.css y
   .claude/skills/nueva-page/SKILL.md): el tema Fluent fuerza table-layout:fixed +
   width:100%, que reparte columnas proporcionalmente sin importar cuánto pidan —
   se pisa para que el ancho salga de la suma real de columnas ya auto-ajustadas
   (ver _autoFitPendienteStock/_autoFitPendienteFicha en el .razor) y el contenedor
   scrollee horizontal de verdad en vez de comprimir. Antes esto solo se aplicaba en
   el breakpoint mobile — ahora es siempre, igual que en el modal de reportes, porque
   ya no hay drag manual de columnas que proteger (se saca ColumnResizeMode). */
[b-szlgzji8hm] .dxbl-grid-table {
    width: auto !important;
    min-width: 100% !important;
}

/* ── Responsive: mismo criterio que AbmLayout/PreciosVenta — las grillas
   scrollean horizontal en vez de comprimir columnas. ──────────────────── */
@media (max-width: 768px) {
    .sa-toolbar[b-szlgzji8hm] {
        gap: 14px;
        padding: 12px 14px;
    }

    .sa-actions[b-szlgzji8hm] {
        margin-left: 0;
        width: 100%;
    }

    .sa-filtro[b-szlgzji8hm] {
        max-width: none;
    }

    /* Objetivo táctil más grande — 9px es cómodo con mouse pero difícil de
       agarrar con el dedo. */
    .sa-resizer[b-szlgzji8hm] {
        height: 20px;
    }

    .sa-resizer .grip span[b-szlgzji8hm] {
        width: 5px;
        height: 5px;
    }
}

@media (max-width: 480px) {
    .sa-toolbar[b-szlgzji8hm] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px 12px;
    }

    .sa-check-wrap .fld-spacer[b-szlgzji8hm] {
        display: none;
    }

    /* Checkboxes más chicos: acá no son la acción principal de la pantalla
       y compiten por espacio con el filtro y el botón de exportar. */
    .sa-check[b-szlgzji8hm] {
        font-size: 11px;
        gap: 5px;
        padding: 3px 0;
    }

    .sa-check input[b-szlgzji8hm] {
        width: 13px;
        height: 13px;
    }

    .sa-filtro[b-szlgzji8hm] {
        min-width: 0;
        max-width: none;
    }

    .sa-actions[b-szlgzji8hm] {
        width: 100%;
    }

    [b-szlgzji8hm] .sa-btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Más lugar para ver las tablas: se achica la cabecera de cada panel y
       el padding de las celdas, así entran más filas visibles sin scrollear
       (en vez de agrandar el contenido, que ya lee bien con zoom del OS). */
    .sa-panel-head[b-szlgzji8hm] {
        padding: 6px 10px;
        gap: 6px;
    }

    .sa-panel-head .sub[b-szlgzji8hm] {
        font-size: 11px;
    }

    [b-szlgzji8hm] .dxbl-grid {
        --dxbl-grid-font-size: 11.5px !important;
        --dxbl-grid-text-cell-padding-x: 10px !important;
        --dxbl-grid-text-cell-padding-y: 5px !important;
    }
}
/* /Components/Pages/Ventas/DatosFijos/Rubros/Rubros.razor.rz.scp.css */
/* Rubros.razor solo renderiza <AbmLayout>: toda la piel visual vive en
   Components/Shared/Abm/AbmLayout.razor.css (CSS scoping de Blazor no
   propaga estas reglas al markup interno del componente hijo). */
/* /Components/Pages/Ventas/Precios/PreciosVenta/PreciosVenta.razor.rz.scp.css */
/* Precios de Venta — página bespoke, no usa AbmLayout (ver Docs/mockup-rediseno-precios-venta.html:
   herramienta de edición masiva, no un ABM de un registro a la vez). */

.pv-page[b-d6n0qlultb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    box-shadow: var(--morphi-shadow-sm);
    font-size: 13px;
    color: var(--morphi-text);
}

/* ── Barra de 3 modos ─────────────────────────────────────────────── */
.pv-modes[b-d6n0qlultb] {
    display: flex;
    gap: 4px;
    padding: 10px 14px 0;
    border-bottom: 1px solid var(--morphi-border);
    flex-shrink: 0;
}

.pv-mode[b-d6n0qlultb] {
    padding: 9px 16px;
    border: none;
    background: transparent;
    border-radius: 8px 8px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--morphi-text-secondary);
    cursor: pointer;
}

.pv-mode:hover[b-d6n0qlultb] {
    color: var(--morphi-text);
    background: var(--morphi-azul-tint);
}

.pv-mode.active[b-d6n0qlultb] {
    color: var(--morphi-azul-oscuro);
    font-weight: 800;
    background: var(--morphi-azul-tint-strong);
}

/* ── Panel de acción del modo activo ──────────────────────────────── */
.pv-panel[b-d6n0qlultb] {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    flex-wrap: wrap;
    padding: 16px;
    border-bottom: 1px solid var(--morphi-border);
    background: var(--morphi-surface-2);
    flex-shrink: 0;
}

.fld[b-d6n0qlultb] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 160px;
}

.fld.narrow[b-d6n0qlultb] {
    min-width: 110px;
}

.fld label[b-d6n0qlultb] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--morphi-text-secondary);
}

.pv-actions[b-d6n0qlultb] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.pv-copy-arrow[b-d6n0qlultb] {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    color: var(--morphi-text-secondary);
    font-weight: 700;
}

/* ── Editores (DxTextBox/DxComboBox/DxSpinEdit comparten la clase raíz
   .dxbl-text-edit — se pisan sus custom properties, mismo mecanismo que
   .dxbl-grid en AbmLayout.razor.css) ─────────────────────────────────── */
/* IMPORTANTE: ::deep va PEGADO a la parte que hay que atravesar (.dxbl-text-edit,
   dentro del componente hijo DxTextBox/DxComboBox/DxSpinEdit), no al principio
   del selector — "::deep .pv-page .dxbl-text-edit" compila a "[scope] .pv-page
   .dxbl-text-edit", que exige un ANCESTRO de .pv-page con el atributo de scope
   (nunca existe, .pv-page ES la raíz del componente) y la regla nunca matchea. */
.pv-page[b-d6n0qlultb]  .dxbl-text-edit {
    --dxbl-text-edit-bg: var(--morphi-surface) !important;
    --dxbl-text-edit-color: var(--morphi-text) !important;
    --dxbl-text-edit-placeholder-color: var(--morphi-text-secondary) !important;
    --dxbl-text-edit-border-color: var(--morphi-border) !important;
    --dxbl-text-edit-border-hovered-color: var(--morphi-slate) !important;
    --dxbl-text-edit-border-active-color: var(--morphi-azul) !important;
    --dxbl-text-edit-focus-border-color: var(--morphi-azul) !important;
    --dxbl-text-edit-underline-color: var(--morphi-border) !important;
    --dxbl-text-edit-underline-hovered-color: var(--morphi-azul) !important;
    --dxbl-text-edit-underline-focused-color: var(--morphi-azul) !important;
    --dxbl-text-edit-underline-active-color: var(--morphi-azul) !important;
    --dxbl-text-edit-border-radius-m: 7px !important;
    --dxbl-text-edit-font-family-m: 'Montserrat', 'Segoe UI', sans-serif !important;
    --dxbl-text-edit-font-size-m: 13px !important;
    --dxbl-text-edit-font-weight-m: 500 !important;
    box-shadow: none !important;
}

.pv-page[b-d6n0qlultb]  .dxbl-text-edit.dxbl-focused {
    box-shadow: 0 0 0 3px var(--morphi-azul-tint-strong) !important;
}

/* ── Botones estilo "ghost" (Exporta/Importa) ─────────────────────────── */
[b-d6n0qlultb] .pv-btn-ghost {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    padding: 6px 14px !important;
    background: var(--morphi-surface) !important;
    border-color: var(--morphi-border) !important;
    color: var(--morphi-text-secondary) !important;
}

[b-d6n0qlultb] .pv-btn-ghost:not(:disabled):hover {
    border-color: var(--morphi-slate) !important;
    color: var(--morphi-text) !important;
}

[b-d6n0qlultb] .pv-btn-primary {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
    padding: 7px 16px 7px 20px !important;
    background: var(--morphi-azul-oscuro) !important;
    border-color: var(--morphi-azul-oscuro) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(0,122,184,.3) !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}

[b-d6n0qlultb] .pv-btn-primary:not(:disabled):hover {
    background: var(--morphi-azul) !important;
    border-color: var(--morphi-azul) !important;
}

/* ── Caja "Variación %" (input + sufijo, mismo patrón que el mockup) ──── */
.pv-pct-box[b-d6n0qlultb] {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--morphi-border);
    border-radius: 7px;
    background: var(--morphi-surface);
    padding-right: 10px;
    transition: border-color .12s, box-shadow .12s;
}

.pv-pct-box:focus-within[b-d6n0qlultb] {
    border-color: var(--morphi-azul);
    box-shadow: 0 0 0 3px var(--morphi-azul-tint-strong);
}

.pv-pct-box .suffix[b-d6n0qlultb] {
    font-size: 13px;
    color: var(--morphi-text);
    font-weight: 600;
}

.pv-pct-box[b-d6n0qlultb]  .dxbl-text-edit {
    --dxbl-text-edit-border-color: transparent !important;
    --dxbl-text-edit-border-hovered-color: transparent !important;
    --dxbl-text-edit-border-active-color: transparent !important;
    --dxbl-text-edit-underline-color: transparent !important;
    --dxbl-text-edit-underline-hovered-color: transparent !important;
}

.pv-pct-box[b-d6n0qlultb]  .dxbl-text-edit.dxbl-focused {
    box-shadow: none !important;
}

.pv-msg[b-d6n0qlultb] {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--morphi-border);
    flex-shrink: 0;
}

.pv-msg.ok[b-d6n0qlultb]    { background: var(--morphi-success-bg); color: var(--morphi-success); }
.pv-msg.error[b-d6n0qlultb] { background: var(--morphi-danger-bg); color: var(--morphi-danger); }

/* ── Grilla ────────────────────────────────────────────────────────── */
.pv-grid-wrap[b-d6n0qlultb] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pv-grid-wrap[b-d6n0qlultb]  dxbl-grid {
    height: 100%; /* Altura fija para activar scroll interno del grid (mismo criterio que AbmLayout.razor.css) */
}

.pv-empty-msg[b-d6n0qlultb] {
    color: var(--morphi-text-secondary);
    font-style: italic;
    padding: 20px;
}

.pv-error[b-d6n0qlultb] {
    background: var(--morphi-danger-bg);
    border-bottom: 1px solid var(--morphi-danger);
    color: var(--morphi-danger);
    font-size: 12px;
    padding: 7px 14px;
    flex-shrink: 0;
}

[b-d6n0qlultb] .pv-price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

[b-d6n0qlultb] .pv-price.zero {
    color: var(--morphi-text-secondary);
    font-weight: 500;
    opacity: .5;
}

/* Los tokens de color/tema de .dxbl-grid ya se pisan globalmente en site.css (cubre toda la
   app) — acá solo quedan los ajustes de tamaño/espaciado propios de esta pantalla. */
[b-d6n0qlultb] .dxbl-grid {
    --dxbl-grid-font-size: 12.5px !important;
    --dxbl-grid-border-radius: 0px !important;
    --dxbl-grid-text-cell-padding-x: 14px !important;
    --dxbl-grid-text-cell-padding-y: 7px !important;
}

[b-d6n0qlultb] .dxbl-grid-table thead th {
    text-transform: uppercase !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
}

/* ── La grilla mantiene sus columnas de precio a ancho fijo (una por lista)
   y scrollea horizontal en vez de achicarlas — mismo criterio que
   AbmLayout.razor.css. El tema Fluent fuerza table-layout:fixed + width:100%
   en la tabla del grid, que reparte las columnas proporcionalmente sin
   importar Width/MinWidth y nunca deja que aparezca overflow real; con
   muchas listas de precios (130px cada una) esto rompe el scroll horizontal
   también en desktop, no solo en mobile, por eso el fix va sin media query. */
.pv-grid-wrap[b-d6n0qlultb] {
    overflow: auto;
}

[b-d6n0qlultb] .dxbl-grid-table {
    width: auto !important;
    min-width: 100% !important;
}

@media (max-width: 768px) {
    .pv-modes[b-d6n0qlultb] {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 2px;
    }

    .pv-mode[b-d6n0qlultb] {
        flex-shrink: 0;
    }

    .pv-panel[b-d6n0qlultb] {
        gap: 14px;
        padding: 14px;
    }

    .pv-actions[b-d6n0qlultb] {
        margin-left: 0;
        width: 100%;
    }
}
/* /Components/Shared/Abm/AbmLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   ABM BASE — skin de marca Morphi (Docs/mockup-rediseno-rubros.html)
   Estas clases definen el layout estándar de todos los ABMs del sistema.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Layout raíz ───────────────────────────────────────────────────── */
.abm-page[b-h2mfweevbt] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--morphi-surface);
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    box-shadow: var(--morphi-shadow-sm);
    font-size: 13px;
    color: var(--morphi-text);
}

/* ══════════════════════════════════════════════════════════════════════
   TOOLBAR
   ══════════════════════════════════════════════════════════════════════ */
.abm-toolbar[b-h2mfweevbt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--morphi-surface);
    border-bottom: 1px solid var(--morphi-border);
    flex-shrink: 0;
}

.tb-group[b-h2mfweevbt] {
    display: flex;
    align-items: center;
    gap: 3px;
}

.tb-sep[b-h2mfweevbt] {
    width: 1px;
    height: 20px;
    background: var(--morphi-border);
    margin: 0 6px;
}

/* Botones de navegación */
.tb-nav[b-h2mfweevbt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--morphi-border);
    border-radius: 7px;
    background: var(--morphi-surface);
    color: var(--morphi-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}

.tb-nav:hover:not(:disabled)[b-h2mfweevbt] {
    background: var(--morphi-azul-tint);
    border-color: var(--morphi-azul);
    color: var(--morphi-azul-oscuro);
}

.tb-nav:active:not(:disabled)[b-h2mfweevbt] {
    background: var(--morphi-azul-tint-strong);
}

.tb-nav:disabled[b-h2mfweevbt] {
    opacity: 0.38;
    cursor: default;
}

.tb-nav-icon[b-h2mfweevbt] {
    font-size: 10px;
    opacity: 0.7;
}

/* Botones de acción (Graba/Cancela/Actualiza) — DxButton, estilo propio por encima del tema DevExpress */
[b-h2mfweevbt] .tb-btn-graba,
[b-h2mfweevbt] .tb-btn-cancela,
[b-h2mfweevbt] .tb-btn-actualiza {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
    padding: 7px 16px !important;
    box-shadow: none !important;
}

[b-h2mfweevbt] .tb-btn-graba {
    background: var(--morphi-azul-oscuro) !important;
    border-color: var(--morphi-azul-oscuro) !important;
    color: #fff !important;
    padding-right: 20px !important;
    box-shadow: 0 1px 2px rgba(0,122,184,.3) !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}

[b-h2mfweevbt] .tb-btn-graba:not(:disabled):hover {
    background: var(--morphi-azul) !important;
    border-color: var(--morphi-azul) !important;
}

[b-h2mfweevbt] .tb-btn-cancela {
    background: var(--morphi-surface) !important;
    border-color: var(--morphi-border) !important;
    color: var(--morphi-text-secondary) !important;
}

[b-h2mfweevbt] .tb-btn-cancela:not(:disabled):hover {
    background: var(--morphi-danger-bg) !important;
    border-color: var(--morphi-danger) !important;
    color: var(--morphi-danger) !important;
}

[b-h2mfweevbt] .tb-btn-actualiza {
    background: var(--morphi-surface) !important;
    border-color: var(--morphi-border) !important;
    color: var(--morphi-text-secondary) !important;
}

[b-h2mfweevbt] .tb-btn-actualiza:not(:disabled):hover {
    border-color: var(--morphi-slate) !important;
    color: var(--morphi-text) !important;
}

[b-h2mfweevbt] .tb-btn-graba:disabled,
[b-h2mfweevbt] .tb-btn-cancela:disabled,
[b-h2mfweevbt] .tb-btn-actualiza:disabled {
    opacity: 0.4 !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* Badge de estado */
.tb-estado[b-h2mfweevbt] {
    margin-left: auto;
}

.estado-chip[b-h2mfweevbt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.estado-chip[b-h2mfweevbt]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.estado-navegando[b-h2mfweevbt]   { background: var(--morphi-success-bg); color: var(--morphi-success); }
.estado-modificando[b-h2mfweevbt] { background: var(--morphi-warning-bg); color: var(--morphi-warning); }
.estado-insertando[b-h2mfweevbt]  { background: var(--morphi-azul-tint-strong); color: var(--morphi-azul-oscuro); }
.estado-cargando[b-h2mfweevbt]    { background: var(--morphi-surface-2); color: var(--morphi-text-secondary); }
.estado-guardando[b-h2mfweevbt]   { background: var(--morphi-warning-bg); color: var(--morphi-warning); }

/* ══════════════════════════════════════════════════════════════════════
   BODY (sidebar + main)
   ══════════════════════════════════════════════════════════════════════ */
.abm-body[b-h2mfweevbt] {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR ("rail" en el mockup)
   ══════════════════════════════════════════════════════════════════════ */
.abm-sidebar[b-h2mfweevbt] {
    width: 208px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--morphi-surface-2);
    border-right: 1px solid var(--morphi-border);
    overflow-y: auto;
}

/* Panel dentro del sidebar */
.abm-panel[b-h2mfweevbt] {
    border-bottom: 1px solid var(--morphi-border);
}

.abm-panel-title[b-h2mfweevbt] {
    padding: 9px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--morphi-text-secondary);
    user-select: none;
}

.abm-panel-content[b-h2mfweevbt] {
    padding: 4px 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Botones de acción del sidebar */
.abm-action[b-h2mfweevbt] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: none;
    background: transparent;
    color: var(--morphi-text);
    cursor: pointer;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    width: 100%;
    transition: background 0.12s;
}

.abm-action:hover:not(:disabled)[b-h2mfweevbt] {
    background: var(--morphi-azul-tint);
    color: var(--morphi-azul-oscuro);
}

.abm-action-danger:hover:not(:disabled)[b-h2mfweevbt] {
    background: var(--morphi-danger-bg);
    color: var(--morphi-danger);
}

.abm-action:disabled[b-h2mfweevbt] {
    opacity: 0.35;
    cursor: default;
}

.abm-action-sep[b-h2mfweevbt] {
    height: 1px;
    background: var(--morphi-border);
    margin: 5px 8px;
}

/* Iconos de acción */
.abm-action-icon[b-h2mfweevbt] {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    flex-shrink: 0;
}

.insert-icon[b-h2mfweevbt] { background: var(--morphi-success); }
.modify-icon[b-h2mfweevbt] { background: var(--morphi-azul); }
.table-icon[b-h2mfweevbt]  { background: var(--morphi-warning); }
.export-icon[b-h2mfweevbt] { background: #2aa8ab; }
.columns-icon[b-h2mfweevbt] { background: var(--morphi-azul-oscuro); }
.import-icon[b-h2mfweevbt] { background: var(--morphi-slate); }

/* Panel de información */
.abm-info[b-h2mfweevbt] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 8px;
    font-size: 11.5px;
    padding: 4px 2px;
}

.abm-info span:nth-child(odd)[b-h2mfweevbt]  { color: var(--morphi-text-secondary); }
.abm-info span:nth-child(even)[b-h2mfweevbt] { font-weight: 700; text-align: right; color: var(--morphi-text); }

.info-estado[b-h2mfweevbt] { color: var(--morphi-azul-oscuro) !important; }

/* ══════════════════════════════════════════════════════════════════════
   ÁREA PRINCIPAL
   ══════════════════════════════════════════════════════════════════════ */
.abm-main[b-h2mfweevbt] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Tabs ──────────────────────────────────────────────────────────── */
.abm-tabs[b-h2mfweevbt] {
    display: flex;
    padding: 0 14px;
    background: var(--morphi-surface);
    border-bottom: 1px solid var(--morphi-border);
    flex-shrink: 0;
    gap: 2px;
}

.abm-tab[b-h2mfweevbt] {
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    color: var(--morphi-text-secondary);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: -1px;
    transition: color 0.15s;
    font-family: inherit;
}

.abm-tab:hover[b-h2mfweevbt] {
    color: var(--morphi-text);
}

.abm-tab.active[b-h2mfweevbt] {
    border-bottom-color: var(--morphi-azul);
    color: var(--morphi-azul-oscuro);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

/* ── Contenido de tabs ─────────────────────────────────────────────── */
.abm-content[b-h2mfweevbt] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Tab: Tabla de Datos */
.abm-grid-wrap[b-h2mfweevbt] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.abm-grid-wrap[b-h2mfweevbt]  dxbl-grid {
    height: 100%; /* Altura fija para activar scroll interno del grid */
}

.abm-grid-empty[b-h2mfweevbt] {
    padding: 24px 16px;
    text-align: center;
    color: var(--morphi-text-secondary);
    font-weight: 600;
}

/* Reskin del DxGrid (DevExpress) con la piel del mockup. Se pisan las custom
   properties que expone el tema Fluent (ver devexpress.blazor.themes.fluent
   /staticwebassets/core.min.css, selector .dxbl-grid) — !important porque el
   propio tema redeclara estas variables ahí mismo, con el mismo peso de
   selector, y el orden de carga contra nuestro CSS no está garantizado. */
/* Los tokens de color/tema de .dxbl-grid ya se pisan globalmente en site.css (cubre toda la
   app, no solo esta pantalla) — acá solo quedan los ajustes de tamaño/espaciado propios de este
   motor, que no son parte del reskin global. */
[b-h2mfweevbt] .dxbl-grid {
    --dxbl-grid-font-size: 12.5px !important;
    --dxbl-grid-border-radius: 0px !important;
    --dxbl-grid-text-cell-padding-x: 14px !important;
    --dxbl-grid-text-cell-padding-y: 8px !important;
}

[b-h2mfweevbt] .dxbl-grid-table thead th {
    text-transform: uppercase !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
}

/* Selector de cantidad de filas por página (pie de la grilla) — el tema Fluent
   fija el input en 5em (staticwebassets/core.min.css, .dxbl-pager-page-size-selector
   > .dxbl-text-edit), que alcanza para "10"/"20" pero recorta valores de 3
   cifras (ej. "200") y la opción "Todos" (PageSizeSelectorAllRowsItemVisible).
   Se ensancha y se deja que el propio panel del pie scrollee horizontal en vez
   de recortar contenido si el ancho disponible es chico (mismo patrón que
   .abm-tabs en mobile, ver bloque @media más abajo). */
[b-h2mfweevbt] .dxbl-pager-page-size-selector > .dxbl-text-edit {
    width: 4.5rem !important;
    min-width: 4.5rem !important;
}

[b-h2mfweevbt] .dxbl-grid-bottom-panel {
    overflow-x: auto;
}

/* Editores (DxTextBox/DxComboBox/DxSpinEdit/DxDateEdit comparten la clase raíz
   .dxbl-text-edit) — filtro del sidebar, formulario y edición inline de grilla.
   Mismo mecanismo que .dxbl-grid arriba: se pisan las custom properties del
   tema DevExpress para que sigan los tokens --morphi-* (y por lo tanto el
   modo oscuro) en vez del tema Fluent por defecto. */
[b-h2mfweevbt] .dxbl-text-edit {
    --dxbl-text-edit-bg: var(--morphi-surface) !important;
    --dxbl-text-edit-color: var(--morphi-text) !important;
    --dxbl-text-edit-placeholder-color: var(--morphi-text-secondary) !important;
    --dxbl-text-edit-border-color: var(--morphi-border) !important;
    --dxbl-text-edit-border-hovered-color: var(--morphi-slate) !important;
    --dxbl-text-edit-border-active-color: var(--morphi-azul) !important;
    --dxbl-text-edit-focus-border-color: var(--morphi-azul) !important;
    /* El tema Fluent dibuja, además del borde, un "underline" propio con sus
       propios colores de estado — sin esto el hover queda gris/negro del tema
       DevExpress en vez de azul de marca (el foco sí usaba el azul del tema
       por casualidad, el hover no). */
    --dxbl-text-edit-underline-color: var(--morphi-border) !important;
    --dxbl-text-edit-underline-hovered-color: var(--morphi-azul) !important;
    --dxbl-text-edit-underline-focused-color: var(--morphi-azul) !important;
    --dxbl-text-edit-underline-active-color: var(--morphi-azul) !important;
    --dxbl-text-edit-border-radius-m: 7px !important;
    --dxbl-text-edit-font-family-m: 'Montserrat', 'Segoe UI', sans-serif !important;
    box-shadow: none !important;
}

[b-h2mfweevbt] .dxbl-text-edit.dxbl-focused {
    box-shadow: 0 0 0 3px var(--morphi-azul-tint-strong) !important;
}

/* Los editores del formulario (AbmDynamicField) no traían ancho propio — en
   columnas angostas (Span chico, ej. Código/Rubro compartiendo fila con otro
   campo) el control podía colapsar a su ancho de contenido en vez de llenar
   la columna que le da DxFormLayoutItem. Se fuerza a llenarla siempre. */
[b-h2mfweevbt] .abm-field-w100 {
    width: 100% !important;
}

/* Tab: Formulario */
.abm-form-wrap[b-h2mfweevbt] {
    padding: 28px 32px;
    max-width: 800px;
    overflow-y: auto;
}

.abm-form-layout[b-h2mfweevbt] {
    margin: 0;
}

/* Labels de los campos (Código/Descripción/Tipo...) — DxFormLayout no expone
   un CssClass por caption, se pisa la custom property del tema DevExpress
   (misma técnica que .dxbl-grid/.dxbl-text-edit arriba). Sin esto quedan con
   el color neutro por defecto del tema, que no se adapta al modo oscuro. */
[b-h2mfweevbt] .abm-form-layout {
    --dxbl-fl-caption-color: var(--morphi-text-secondary) !important;
}

/* Secciones del formulario (AbmFieldDef.Seccion) */
.abm-form-seccion[b-h2mfweevbt] {
    margin-bottom: 22px;
}

.abm-form-seccion-head[b-h2mfweevbt] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--morphi-text-secondary);
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--morphi-border);
}

.form-empty-msg[b-h2mfweevbt] {
    color: var(--morphi-text-secondary);
    opacity: .7;
    font-style: italic;
    padding: 20px;
}

/* Tabs extra (ej. Asignación de Sucursales) */
.abm-extra-wrap[b-h2mfweevbt] {
    flex: 1;
    overflow-y: auto;
}

/* ── Mensajes de error ─────────────────────────────────────────────── */
.abm-error-banner[b-h2mfweevbt] {
    background: var(--morphi-danger-bg);
    border-bottom: 1px solid var(--morphi-danger);
    color: var(--morphi-danger);
    font-size: 12px;
    padding: 7px 14px;
    flex-shrink: 0;
}

.abm-error-form[b-h2mfweevbt] {
    background: var(--morphi-danger-bg);
    border: 1px solid var(--morphi-danger);
    border-radius: 6px;
    color: var(--morphi-danger);
    font-size: 12px;
    padding: 8px 14px;
    margin-bottom: 14px;
}

/* ── Paginador ─────────────────────────────────────────────────────── */
.abm-pager[b-h2mfweevbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 0 2px;
    font-size: 12px;
    color: var(--morphi-text);
}

.pager-btn[b-h2mfweevbt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border: 1px solid var(--morphi-border);
    border-radius: 6px;
    background: var(--morphi-surface);
    cursor: pointer;
    font-size: 11px;
    color: var(--morphi-text-secondary);
}

.pager-btn:hover:not(:disabled)[b-h2mfweevbt] {
    border-color: var(--morphi-azul);
    color: var(--morphi-azul-oscuro);
}

.pager-btn:disabled[b-h2mfweevbt] {
    opacity: 0.38;
    cursor: default;
}

/* ── Toasts ──────────────────────────────────────────────────────── */
.abm-toast-container[b-h2mfweevbt] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.abm-toast[b-h2mfweevbt] {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    box-shadow: var(--morphi-shadow-md);
    animation: toast-in-b-h2mfweevbt 0.25s ease;
}

.toast-ok[b-h2mfweevbt]    { background: var(--morphi-success); }
.toast-error[b-h2mfweevbt] { background: var(--morphi-danger); }

@keyframes toast-in-b-h2mfweevbt {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet/celular (breakpoint estándar de la app, ver
   MainLayout.razor.css). El rail se apila arriba a ancho completo (decisión
   tomada: sin drawer nuevo) y la grilla se deja scrollear horizontalmente
   en vez de tocar los anchos de columna por campo (AnchoCol).
   ══════════════════════════════════════════════════════════════════════ */
.abm-grid-wrap[b-h2mfweevbt] {
    overflow: auto;
}

@media (max-width: 768px) {
    /* En mobile el rail apilado arriba se come buena parte del alto
       disponible, y a la grilla le queda muy poco espacio (dxbl-grid tiene
       height:100% — 100% de un contenedor ya achicado). Se deja que tome su
       alto natural (header + filas + paginador) y que sea .abm-grid-wrap
       (con overflow:auto de arriba) el que scrollee verticalmente para
       llegar a todo — si no, las filas de más quedaban recortadas sin forma
       de alcanzarlas. */
    .abm-grid-wrap[b-h2mfweevbt]  dxbl-grid {
        height: auto;
        min-height: 320px;
    }

    /* "Arrastrá un encabezado de columna acá para agrupar" (ShowGroupPanel)
       depende de drag & drop, que en touch no tiene forma confiable de
       revertirse (arrastrar la columna de vuelta a la grilla no funciona en
       mobile) — se oculta el panel en mobile para que no se pueda agrupar
       por accidente sin salida; en desktop sigue disponible normalmente. */
    .abm-grid-wrap[b-h2mfweevbt]  .dxbl-grid-group-panel-container {
        display: none;
    }

    .abm-toolbar[b-h2mfweevbt] {
        flex-wrap: wrap;
        row-gap: 5px;
        padding: 6px 10px;
        gap: 5px;
    }

    /* Sin esto, el grupo "Primero/Anterior/Siguiente/Ultimo" no entra en una
       sola línea en mobile y, como .tb-group no wrappea internamente, se
       corta contra el borde derecho de la página en vez de bajar a una
       segunda fila — mismo patrón de bug que la grilla y los tabs. */
    .tb-group[b-h2mfweevbt] {
        flex-wrap: wrap;
        row-gap: 5px;
        gap: 4px;
    }

    /* Botones Primero/Anterior/Siguiente/Ultimo — más compactos en mobile. */
    .tb-nav[b-h2mfweevbt] {
        padding: 4px 8px;
        font-size: 10.5px;
        gap: 3px;
    }

    /* Botones Graba/Cancela/Actualiza (DxButton, override por encima del tema
       DevExpress — ver el bloque ::deep .tb-btn-* de más arriba). */
    [b-h2mfweevbt] .tb-btn-graba,
    [b-h2mfweevbt] .tb-btn-cancela,
    [b-h2mfweevbt] .tb-btn-actualiza {
        font-size: 11px !important;
        padding: 5px 11px !important;
    }

    [b-h2mfweevbt] .tb-btn-graba {
        padding-right: 15px !important;
    }

    .tb-sep[b-h2mfweevbt] {
        display: none;
    }

    .tb-estado[b-h2mfweevbt] {
        margin-left: 0;
    }

    .estado-chip[b-h2mfweevbt] {
        padding: 3px 10px;
        font-size: 10px;
    }

    .abm-body[b-h2mfweevbt] {
        flex-direction: column;
    }

    .abm-sidebar[b-h2mfweevbt] {
        width: 100%;
        max-height: 30vh;
        border-right: none;
        border-bottom: 1px solid var(--morphi-border);
    }

    /* "Maneja Datos" es lo que más espacio vertical se come del rail (6
       botones apilados de a uno) — pasa a una grilla de 2 columnas para que
       ocupe la mitad de alto, dejándole más lugar a la grilla de datos. */
    .abm-panel-acciones .abm-panel-content[b-h2mfweevbt] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 6px;
    }

    .abm-panel-acciones .abm-action[b-h2mfweevbt] {
        padding: 6px 7px;
        font-size: 11.5px;
        gap: 6px;
    }

    .abm-panel-acciones .abm-action-icon[b-h2mfweevbt] {
        width: 12px;
        height: 12px;
    }

    .abm-panel-acciones .abm-action-sep[b-h2mfweevbt] {
        grid-column: 1 / -1;
        margin: 3px 4px;
    }

    /* Los stats de "Información" (Registros Leídos/Página/etc.) son de
       consulta ocasional — se ocultan en mobile para darle ese espacio a la
       grilla; el paginador (Anterior/Siguiente) y "Último código/desc." se
       mantienen, son los únicos realmente accionables desde acá. */
    .abm-info:not(.abm-info-last)[b-h2mfweevbt] {
        display: none;
    }

    .abm-tabs[b-h2mfweevbt] {
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Sin esto, los botones de tab se achican (flex-shrink:1 por defecto) para
       entrar todos en el ancho disponible, en vez de mantener su ancho natural
       y dejar que el contenedor de arriba scrollee — mismo bug que las
       columnas de la grilla, ver el override de .dxbl-grid-table más abajo. */
    .abm-tab[b-h2mfweevbt] {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .abm-form-wrap[b-h2mfweevbt] {
        max-width: 100%;
        padding: 18px 16px;
    }

    .abm-toast-container[b-h2mfweevbt] {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .abm-toast[b-h2mfweevbt] {
        width: 100%;
    }

    /* El tema Fluent de DevExpress fuerza table-layout:fixed + width:100% en
       la tabla interna del grid — con eso, las columnas SIEMPRE se reparten
       proporcionalmente dentro del 100% del contenedor, sin importar los
       píxeles pedidos en Width/MinWidth, y nunca se genera overflow real (por
       eso no aparecía scroll horizontal). Se pisa a "width:auto" para que el
       ancho total salga de la suma real de las columnas y sí exceda el
       viewport en mobile — ahí el contenedor interno de DevExpress
       (.dxbl-scroll-viewer-content, que ya trae overflow:auto de fábrica)
       pasa a scrollear de verdad. */
    [b-h2mfweevbt] .dxbl-grid-table {
        width: auto !important;
        min-width: 100% !important;
    }

    /* Pie de la grilla (paginador + selector de cantidad por página) — mismo
       criterio que .abm-tabs arriba: se deja su ancho natural y que el panel
       scrollee horizontal en vez de que DevExpress recorte los botones de
       página/el selector para forzarlos a entrar en el viewport angosto. */
    [b-h2mfweevbt] .dxbl-grid-bottom-panel {
        white-space: nowrap;
    }

    [b-h2mfweevbt] .dxbl-pager-page-size-selector > .dxbl-text-edit {
        width: 4rem !important;
        min-width: 4rem !important;
    }
}

@media (max-width: 480px) {
    .abm-toolbar[b-h2mfweevbt] {
        padding: 8px 10px;
    }

    .tb-nav[b-h2mfweevbt] {
        padding: 6px 9px;
        font-size: 11.5px;
    }

    .abm-form-wrap[b-h2mfweevbt] {
        padding: 14px 12px;
    }
}
/* /Components/Shared/Abm/AsignacionSucursales.razor.rz.scp.css */
.suc-wrap[b-iz7iht9db8] {
    padding: 28px 32px;
    max-width: 640px;
}

.suc-picker-label[b-iz7iht9db8] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--morphi-text-secondary);
    margin-bottom: 6px;
}

.suc-picker-box[b-iz7iht9db8] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--morphi-border);
    border-radius: 8px;
    padding: 9px 12px;
    background: var(--morphi-surface);
    max-width: 380px;
    margin-bottom: 20px;
}

.suc-picker-cod[b-iz7iht9db8] {
    font-weight: 700;
    color: var(--morphi-text);
}

.suc-picker-nombre[b-iz7iht9db8] {
    color: var(--morphi-text);
}

.suc-empty-msg[b-iz7iht9db8] {
    color: var(--morphi-text-secondary);
    font-style: italic;
}

.suc-error[b-iz7iht9db8] {
    background: var(--morphi-danger-bg);
    border: 1px solid var(--morphi-danger);
    border-radius: 6px;
    color: var(--morphi-danger);
    font-size: 12px;
    padding: 8px 14px;
    margin-bottom: 14px;
}

.suc-toolbar[b-iz7iht9db8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.suc-toolbar .count[b-iz7iht9db8] {
    font-size: 12px;
    color: var(--morphi-text-secondary);
}

.suc-toolbar .links a[b-iz7iht9db8] {
    font-size: 12px;
    font-weight: 700;
    color: var(--morphi-azul-oscuro);
    cursor: pointer;
    text-decoration: none;
    margin-left: 14px;
}

.suc-list[b-iz7iht9db8] {
    border: 1px solid var(--morphi-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--morphi-surface);
}

.suc-row[b-iz7iht9db8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--morphi-border);
}

.suc-row:last-child[b-iz7iht9db8] {
    border-bottom: none;
}

.suc-row .dot[b-iz7iht9db8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--morphi-azul-oscuro);
    flex-shrink: 0;
}

.suc-row .dot.off[b-iz7iht9db8] {
    background: var(--morphi-slate);
    opacity: .5;
}

.suc-row .name[b-iz7iht9db8] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--morphi-text);
}

/* Switch — mismo patrón que en el mockup de Listas de Precios
   (label es inline por default, hace falta display:inline-block para que
   el width/height del track no colapse) */
.switch[b-iz7iht9db8] {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    vertical-align: middle;
}

.switch input[b-iz7iht9db8] {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.switch .track[b-iz7iht9db8] {
    position: absolute;
    inset: 0;
    background: var(--morphi-slate);
    border-radius: 999px;
    transition: background .15s;
}

.switch .thumb[b-iz7iht9db8] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: transform .15s;
}

.switch input:checked + .track[b-iz7iht9db8] {
    background: var(--morphi-azul-oscuro);
}

.switch input:checked + .track + .thumb[b-iz7iht9db8] {
    transform: translateX(16px);
}

.switch input:focus-visible + .track[b-iz7iht9db8] {
    box-shadow: 0 0 0 3px var(--morphi-azul-tint-strong);
}

@media (max-width: 768px) {
    .suc-wrap[b-iz7iht9db8] {
        padding: 18px 16px;
        max-width: 100%;
    }

    .suc-picker-box[b-iz7iht9db8] {
        max-width: 100%;
    }

    .suc-toolbar[b-iz7iht9db8] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .suc-toolbar .links a[b-iz7iht9db8] {
        margin-left: 0;
        margin-right: 14px;
    }
}
/* /Components/Shared/Abm/CodigosAlternativos.razor.rz.scp.css */
.child-wrap[b-2i0uvd4z65] {
    padding: 28px 32px;
    max-width: 820px;
}

.suc-picker[b-2i0uvd4z65] {
    margin-bottom: 20px;
}

.suc-picker-label[b-2i0uvd4z65] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--morphi-text-secondary);
    margin-bottom: 6px;
}

.suc-picker-box[b-2i0uvd4z65] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--morphi-border);
    border-radius: 8px;
    padding: 9px 12px;
    background: var(--morphi-surface);
    max-width: 420px;
}

.suc-picker-cod[b-2i0uvd4z65] {
    font-weight: 700;
    color: var(--morphi-text);
}

.suc-picker-nombre[b-2i0uvd4z65] {
    color: var(--morphi-text);
}

.suc-empty-msg[b-2i0uvd4z65] {
    color: var(--morphi-text-secondary);
    font-style: italic;
}

.suc-error[b-2i0uvd4z65] {
    background: var(--morphi-danger-bg);
    border: 1px solid var(--morphi-danger);
    border-radius: 6px;
    color: var(--morphi-danger);
    font-size: 12px;
    padding: 8px 14px;
    margin-bottom: 14px;
}

.child-toolbar[b-2i0uvd4z65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.child-toolbar .count[b-2i0uvd4z65] {
    font-size: 12px;
    color: var(--morphi-text-secondary);
}

.child-empty[b-2i0uvd4z65] {
    padding: 32px 16px;
    text-align: center;
    color: var(--morphi-text-secondary);
    font-size: 12.5px;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    background: var(--morphi-surface);
}

.child-grid[b-2i0uvd4z65] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    overflow: hidden;
    background: var(--morphi-surface);
}

.child-grid thead th[b-2i0uvd4z65] {
    text-align: left;
    padding: 9px 14px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--morphi-text-secondary);
    background: var(--morphi-surface-2);
    border-bottom: 1px solid var(--morphi-border);
}

.child-grid tbody td[b-2i0uvd4z65] {
    padding: 4px 10px;
    border-bottom: 1px solid var(--morphi-border);
    color: var(--morphi-text);
}

.child-grid tbody tr:last-child td[b-2i0uvd4z65] {
    border-bottom: none;
}

.child-grid td.col-delete[b-2i0uvd4z65] {
    width: 40px;
    text-align: center;
}

.child-grid[b-2i0uvd4z65]  .cell-input {
    width: 100%;
}

.child-grid[b-2i0uvd4z65]  .cell-input .dxbl-input {
    border-color: transparent;
    background: transparent;
}

.child-grid[b-2i0uvd4z65]  .cell-input .dxbl-input:hover,
.child-grid[b-2i0uvd4z65]  .cell-input .dxbl-input:focus-within {
    border-color: var(--morphi-border);
    background: var(--morphi-surface);
}

.row-delete[b-2i0uvd4z65] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--morphi-text-secondary);
    opacity: .6;
    cursor: pointer;
}

.row-delete:hover[b-2i0uvd4z65] {
    opacity: 1;
    color: var(--morphi-danger);
    background: var(--morphi-danger-bg);
}

.row-delete svg.ic[b-2i0uvd4z65] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.child-add-row[b-2i0uvd4z65] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 14px;
    margin-top: 10px;
    border: 1px dashed var(--morphi-border);
    border-radius: var(--morphi-radius);
    color: var(--morphi-text-secondary);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.child-add-row:hover[b-2i0uvd4z65] {
    border-color: var(--morphi-azul);
    color: var(--morphi-azul-oscuro);
    background: var(--morphi-azul-tint);
}

.child-add-row svg.ic[b-2i0uvd4z65] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 768px) {
    .child-wrap[b-2i0uvd4z65] {
        padding: 18px 16px;
        max-width: 100%;
    }

    .suc-picker-box[b-2i0uvd4z65] {
        max-width: 100%;
    }

    .child-grid[b-2i0uvd4z65] {
        display: block;
        overflow-x: auto;
    }
}
/* /Components/Shared/Abm/ProductosPorProveedor.razor.rz.scp.css */
.child-wrap[b-qs3z4hrohy] {
    padding: 28px 32px;
    max-width: 900px;
}

.suc-picker[b-qs3z4hrohy] {
    margin-bottom: 20px;
}

.suc-picker-label[b-qs3z4hrohy] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--morphi-text-secondary);
    margin-bottom: 6px;
}

.suc-picker-box[b-qs3z4hrohy] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--morphi-border);
    border-radius: 8px;
    padding: 9px 12px;
    background: var(--morphi-surface);
    max-width: 420px;
}

.suc-picker-cod[b-qs3z4hrohy] {
    font-weight: 700;
    color: var(--morphi-text);
}

.suc-picker-nombre[b-qs3z4hrohy] {
    color: var(--morphi-text);
}

.suc-empty-msg[b-qs3z4hrohy] {
    color: var(--morphi-text-secondary);
    font-style: italic;
}

.suc-error[b-qs3z4hrohy] {
    background: var(--morphi-danger-bg);
    border: 1px solid var(--morphi-danger);
    border-radius: 6px;
    color: var(--morphi-danger);
    font-size: 12px;
    padding: 8px 14px;
    margin-bottom: 14px;
}

.child-toolbar[b-qs3z4hrohy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.child-toolbar .count[b-qs3z4hrohy] {
    font-size: 12px;
    color: var(--morphi-text-secondary);
}

.child-empty[b-qs3z4hrohy] {
    padding: 32px 16px;
    text-align: center;
    color: var(--morphi-text-secondary);
    font-size: 12.5px;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    background: var(--morphi-surface);
}

.child-grid[b-qs3z4hrohy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    overflow: hidden;
    background: var(--morphi-surface);
}

.child-grid thead th[b-qs3z4hrohy] {
    text-align: left;
    padding: 9px 14px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--morphi-text-secondary);
    background: var(--morphi-surface-2);
    border-bottom: 1px solid var(--morphi-border);
}

.child-grid tbody td[b-qs3z4hrohy] {
    padding: 4px 10px;
    border-bottom: 1px solid var(--morphi-border);
    color: var(--morphi-text);
}

.child-grid tbody tr:last-child td[b-qs3z4hrohy] {
    border-bottom: none;
}

.child-grid td.cod[b-qs3z4hrohy] {
    font-weight: 600;
    color: var(--morphi-text-secondary);
    padding: 8px 14px;
}

.child-grid td.col-delete[b-qs3z4hrohy] {
    width: 40px;
    text-align: center;
}

.child-grid[b-qs3z4hrohy]  .cell-input {
    width: 100%;
}

.child-grid[b-qs3z4hrohy]  .cell-input .dxbl-input {
    border-color: transparent;
    background: transparent;
}

.child-grid[b-qs3z4hrohy]  .cell-input .dxbl-input:hover,
.child-grid[b-qs3z4hrohy]  .cell-input .dxbl-input:focus-within {
    border-color: var(--morphi-border);
    background: var(--morphi-surface);
}

.row-delete[b-qs3z4hrohy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--morphi-text-secondary);
    opacity: .6;
    cursor: pointer;
}

.row-delete:hover[b-qs3z4hrohy] {
    opacity: 1;
    color: var(--morphi-danger);
    background: var(--morphi-danger-bg);
}

.row-delete svg.ic[b-qs3z4hrohy] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.child-add-row[b-qs3z4hrohy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 14px;
    margin-top: 10px;
    border: 1px dashed var(--morphi-border);
    border-radius: var(--morphi-radius);
    color: var(--morphi-text-secondary);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.child-add-row:hover[b-qs3z4hrohy] {
    border-color: var(--morphi-azul);
    color: var(--morphi-azul-oscuro);
    background: var(--morphi-azul-tint);
}

.child-add-row svg.ic[b-qs3z4hrohy] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.child-add-form[b-qs3z4hrohy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.child-add-form[b-qs3z4hrohy]  .add-proveedor-combo {
    flex: 1;
    max-width: 420px;
}

.btn-ghost-sm[b-qs3z4hrohy] {
    padding: 7px 14px;
    border: 1px solid var(--morphi-border);
    border-radius: 7px;
    background: var(--morphi-surface);
    color: var(--morphi-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.btn-ghost-sm:hover[b-qs3z4hrohy] {
    border-color: var(--morphi-slate);
    color: var(--morphi-text);
}

@media (max-width: 768px) {
    .child-wrap[b-qs3z4hrohy] {
        padding: 18px 16px;
        max-width: 100%;
    }

    .suc-picker-box[b-qs3z4hrohy] {
        max-width: 100%;
    }

    .child-grid[b-qs3z4hrohy] {
        display: block;
        overflow-x: auto;
    }

    .child-add-form[b-qs3z4hrohy] {
        flex-direction: column;
        align-items: stretch;
    }

    .child-add-form[b-qs3z4hrohy]  .add-proveedor-combo {
        max-width: 100%;
    }
}
/* /Components/Shared/Config/ConfiguracionLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   CONFIGURACIÓN — Layout genérico
   ═══════════════════════════════════════════════════════════════════════ */

.cfg-page[b-tg9bgaismn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #f5f6f8;
    font-size: 13px;
}

/* ── Toolbar ────────────────────────────────────────────────────────── */
.cfg-toolbar[b-tg9bgaismn] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #ffffff;
    border-bottom: 1px solid #dde1e7;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.cfg-estado[b-tg9bgaismn] { margin-left: auto; }

.cfg-chip[b-tg9bgaismn] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.cfg-guardando[b-tg9bgaismn] { background: #fffbeb; color: #b45309; }
.cfg-cargando[b-tg9bgaismn]  { background: #f3f4f6; color: #6b7280; }
.cfg-ok[b-tg9bgaismn]        { background: #e8f5e9; color: #2e7d32; }

/* ── Error banner ───────────────────────────────────────────────────── */
.cfg-error-banner[b-tg9bgaismn] {
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 12px;
    padding: 7px 14px;
    flex-shrink: 0;
}

/* ── Tabs ───────────────────────────────────────────────────────────── */
.cfg-tabs[b-tg9bgaismn] {
    display: flex;
    padding: 0 12px;
    background: #ffffff;
    border-bottom: 1px solid #dde1e7;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cfg-tab[b-tg9bgaismn] {
    padding: 9px 18px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    color: #667085;
    cursor: pointer;
    font-size: 13px;
    margin-bottom: -1px;
    transition: color 0.15s;
    font-family: inherit;
    white-space: nowrap;
}

.cfg-tab:hover[b-tg9bgaismn] { color: #344054; }

.cfg-tab.active[b-tg9bgaismn] {
    border-bottom-color: #3b6fe4;
    color: #3b6fe4;
    font-weight: 600;
}

/* ── Contenido ──────────────────────────────────────────────────────── */
.cfg-content[b-tg9bgaismn] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    max-width: 960px;
}

.cfg-form-layout[b-tg9bgaismn] { margin: 0; }

.cfg-loading[b-tg9bgaismn] {
    color: #98a2b3;
    font-style: italic;
    padding: 20px;
}
/* /Components/Shared/Reportes/EjecutarReporteModal.razor.rz.scp.css */
.er-body[b-kykd0ndrix] {
    display: flex;
    flex-direction: column;
    /* Mientras se están eligiendo parámetros (sin resultados todavía) el
       modal se ajusta a su contenido — DxPopup con MaxHeight="88vh" ya
       auto-achica el popup si el contenido es chico. max-height +
       overflow-y:auto acá es solo una red de seguridad por si hay muchísimos
       parámetros y no entran ni en el 88vh. Ver .er-body-resultados más
       abajo para el layout de altura DURA que se activa recién cuando hay
       datos y aparece la grilla. */
    max-height: calc(88dvh - 90px);
    overflow-y: auto;
    font-size: 13px;
    color: var(--morphi-text);
}

/* Se activa (ver EjecutarReporteModal.razor) solo cuando _datasets.Count > 0,
   es decir cuando ya hay grilla de resultados en pantalla. Mismo patrón que
   .abm-page en AbmLayout.razor.css (Rubros y el resto de los ABMs andan bien
   con esto): la página/modal en sí NO scrollea como bloque — se le da una
   altura DURA (no max-height) con overflow:hidden, las secciones de arriba
   (filtros, tabs, botón ejecutar) ocupan su alto natural porque no son
   flex:1, y es SOLO .er-grid-wrap (flex:1) el que absorbe el espacio
   sobrante y scrollea por dentro via el scroll-viewer propio del DxGrid
   (mismo mecanismo que .abm-grid-wrap). Con max-height + overflow-y:auto
   (el modo por default de arriba) .er-grid-wrap nunca queda con una altura
   realmente fija (un flex item dentro de un contenedor con overflow:auto no
   se ve forzado a encajar en el espacio disponible), y por eso el scroll
   interno del grid (horizontal Y vertical) no se comportaba bien: la barra
   inferior quedaba fuera de vista y la lateral "desaparecía" al bajar,
   porque en realidad se veía el scroll del MODAL, no el de la grilla. Por
   eso este modo solo se activa cuando hace falta (hay grilla) — si se
   aplicara siempre, el modal quedaba fijo en 88vh incluso con un solo
   parámetro para completar. */
.er-body.er-body-resultados[b-kykd0ndrix] {
    height: calc(88dvh - 90px);
    max-height: none;
    overflow: hidden;
}

/* Todo lo que va ANTES de .er-grid-wrap debe conservar su alto natural (no
   achicarse para "hacerle lugar" a la grilla) — mismo motivo que .abm-tab en
   AbmLayout.razor.css: sin flex-shrink:0 estas secciones se comprimen contra
   su propio contenido en vez de dejar que sea .er-grid-wrap (el único
   flex:1) el que absorba el espacio sobrante. */
.er-carpeta[b-kykd0ndrix],
.er-sin-parametros[b-kykd0ndrix],
.er-filtros[b-kykd0ndrix],
.er-btn-ejecutar[b-kykd0ndrix],
.er-error[b-kykd0ndrix],
.er-sin-datos[b-kykd0ndrix],
.er-tabs[b-kykd0ndrix],
.er-grid-actions[b-kykd0ndrix] {
    flex-shrink: 0;
}

.er-carpeta[b-kykd0ndrix] {
    margin: 4px 0 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--morphi-azul-oscuro);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.er-filtros[b-kykd0ndrix] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    background: var(--morphi-surface-2);
}

.fld[b-kykd0ndrix] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}
.fld.narrow[b-kykd0ndrix] { min-width: 120px; }
.fld label[b-kykd0ndrix] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--morphi-text-secondary);
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.er-hint[b-kykd0ndrix] {
    font-size: 10px;
    font-weight: 500;
    color: var(--morphi-warning);
    text-transform: none;
    letter-spacing: 0;
}

.er-sin-parametros[b-kykd0ndrix] {
    margin: 0 0 14px;
    color: var(--morphi-text-secondary);
    font-size: 12.5px;
}

.er-btn-ejecutar[b-kykd0ndrix] {
    margin-bottom: 14px;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.er-btn-ejecutar:not(:disabled)[b-kykd0ndrix],
.er-btn-ejecutar:not(:disabled) *[b-kykd0ndrix] {
    cursor: pointer !important;
}
.er-btn-ejecutar:hover:not(:disabled)[b-kykd0ndrix] {
    filter: brightness(1.08);
    box-shadow: var(--morphi-shadow-sm);
    transform: translateY(-1px);
}

.er-error[b-kykd0ndrix] {
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: var(--morphi-danger-bg);
    color: var(--morphi-danger);
    font-size: 12.5px;
    font-weight: 600;
}

.er-sin-datos[b-kykd0ndrix] {
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: var(--morphi-azul-tint);
    color: var(--morphi-azul-oscuro);
    font-size: 12.5px;
    font-weight: 600;
}

.er-info-msg[b-kykd0ndrix] {
    text-align: center;
    padding: 30px 20px;
    color: var(--morphi-text-secondary);
}

.er-tabs[b-kykd0ndrix] {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.er-tab[b-kykd0ndrix] {
    padding: 8px 14px;
    border: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--morphi-text-secondary);
    cursor: pointer;
}
.er-tab:hover[b-kykd0ndrix] { background: var(--morphi-azul-tint); color: var(--morphi-text); }
.er-tab.active[b-kykd0ndrix] { background: var(--morphi-azul-tint-strong); color: var(--morphi-azul-oscuro); font-weight: 800; }

/* margin-top le da aire respecto al botón "Ejecutar" de arriba — antes,
   cuando el reporte tenía un solo resultado (sin tabs de por medio), estos
   botones quedaban pegados justo debajo con apenas los 14px de margen del
   botón Ejecutar, sin separación visual propia. */
.er-grid-actions[b-kykd0ndrix] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Antes eran DxButton RenderStyle="Secondary" reskineados a fuerza de pisar
   las custom properties del tema Fluent (quedaba fijo en modo Light sin
   importar el tema de la página, y encima el resultado se veía pobre/gris,
   sin ícono). Se pasa a botones propios, mismo patrón que .er-col-toggle y
   .er-tab en este mismo archivo — más control, sin pelear contra el CSS de
   DevExpress, y consistente con el resto de la marca. */
.er-btn-export[b-kykd0ndrix] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    background: var(--morphi-surface-2);
    color: var(--morphi-text-secondary);
    font-family: 'Montserrat', 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.er-btn-export:hover[b-kykd0ndrix] {
    background: var(--morphi-azul-tint);
    color: var(--morphi-azul-oscuro);
    border-color: var(--morphi-azul);
}
.er-btn-export .ic[b-kykd0ndrix] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Fila que contiene el rail de "elegir columnas" (izquierda) + la grilla. El
   flex:1 que antes tenía .er-grid-wrap directamente pasa acá — sigue siendo
   el único elemento de .er-body que absorbe el espacio sobrante DESPUÉS de
   filtros/botón/tabs (ver .er-body-resultados arriba). */
.er-grid-row[b-kykd0ndrix] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 300px;
    margin: 12px 0;
}

/* Botón "elegir columnas visibles" — abre el column chooser NATIVO de
   DevExpress (DxGrid.ShowColumnChooser(), ver ShowColumnChooser="true" en el
   grid) en vez de armar un selector propio. ShowColumnChooser=true por sí
   solo no agrega ningún ícono visible en la grilla (solo lo deja disponible
   vía menú contextual del header), así que hace falta este disparador para
   que sea descubrible. */
.er-col-toggle[b-kykd0ndrix] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    background: var(--morphi-surface-2);
    color: var(--morphi-text-secondary);
    cursor: pointer;
    padding: 0;
}
.er-col-toggle:hover[b-kykd0ndrix] {
    background: var(--morphi-azul-tint);
    color: var(--morphi-azul-oscuro);
    border-color: var(--morphi-azul);
}
.er-col-toggle .ic[b-kykd0ndrix] {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.er-grid-wrap[b-kykd0ndrix] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--morphi-border);
    border-radius: var(--morphi-radius);
    overflow: hidden;
    background: var(--morphi-surface);
}

/* El DxGrid necesita una altura explícita para activar su propio scroll
   interno (VirtualScrollingMode) en vez de crecer más allá de la altura del
   wrapper. Mismo patrón que AbmLayout.razor.css (.abm-grid-wrap ::deep dxbl-grid). */
.er-grid-wrap[b-kykd0ndrix]  dxbl-grid {
    height: 100%;
    /* El grid trae su propio borde/radio cuadrado — dejamos que sea solo
       .er-grid-wrap el que dibuje el borde redondeado, si no, sus esquinas
       cuadradas asoman por dentro de las de .er-grid-wrap. */
    --dxbl-grid-border-radius: 0 !important;
}

/* El tema Fluent fuerza table-layout:fixed + width:100% en la tabla interna
   del grid — con eso, aunque AutoFitColumnWidths() (ver _autoFitPendiente y
   OnAfterRenderAsync en el .razor) calcule bien el ancho que necesita cada
   columna para mostrar su contenido completo, esta regla los vuelve a
   comprimir proporcionalmente para que sumen el 100% del contenedor, así
   que el auto-fit terminaba sin efecto visible (columnas angostas seguían
   truncando con "..."). Se pisa a "width:auto" para que el ancho total de
   la tabla salga de la suma real de las columnas ya auto-ajustadas y sí
   exceda el viewport cuando hace falta — ahí el contenedor interno de
   DevExpress (.dxbl-scroll-viewer-content, que ya trae overflow:auto de
   fábrica) pasa a scrollear horizontal de verdad, y el usuario ve todo el
   contenido sin truncar en vez de tener que agrandar/achicar columnas a
   mano.
   Antes NO se aplicaba este override porque rompía el drag manual de
   resize (confirmado arrastrando: cursor cambia pero no mueve nada) — pero
   ese gesto ya no es el mecanismo que usa esta pantalla en ningún
   dispositivo (confirmado con el usuario que en touchscreens el drag
   siempre pierde contra el scroll horizontal, ni con long-press), así que
   perder el resize manual acá ya no tiene costo real. */
.er-grid-wrap[b-kykd0ndrix]  .dxbl-grid-table {
    width: auto !important;
    min-width: 100% !important;
}

.er-grid-wrap[b-kykd0ndrix]  .dxbl-scroll-viewer-vert-scroll-bar,
.er-grid-wrap[b-kykd0ndrix]  .dxbl-scroll-viewer-hor-scroll-bar {
    --dxbl-ribbon-scrollbar-margin-x: 1px !important;
    --dxbl-ribbon-scrollbar-margin-y: 1px !important;
}

/* Pantallas chicas (iPhone SE, Galaxy S8+, o cualquier celular con zoom de
   accesibilidad alto): los bloques de arriba (fecha/filtros, botón Ejecutar,
   botones de exportar) achican paddings/fuentes para dejarle más alto real a
   .er-grid-wrap, que es el que necesita el espacio para que la grilla no
   quede recortada. También se agranda el offset restado en .er-body-resultados
   porque en estos anchos el HeaderText del DxPopup ("03. NOMBRE DEL REPORTE")
   suele partirse en dos líneas (ver captura del usuario) — con el offset fijo
   de 90px pensado para header de una sola línea, .er-grid-row terminaba con
   más alto del que entraba realmente en el popup y la parte inferior de la
   grilla (paginador incluido) quedaba tapada/cortada. */
@media (max-width: 480px) {
    .er-body.er-body-resultados[b-kykd0ndrix] {
        height: calc(88dvh - 120px);
    }

    .er-carpeta[b-kykd0ndrix] {
        margin: 2px 0 8px;
        font-size: 10.5px;
    }

    .er-filtros[b-kykd0ndrix] {
        padding: 8px 10px;
        gap: 10px;
        margin-bottom: 8px;
    }
    .fld[b-kykd0ndrix], .fld.narrow[b-kykd0ndrix] {
        min-width: 100px;
        gap: 3px;
    }
    .fld label[b-kykd0ndrix] {
        font-size: 10.5px;
    }

    .er-btn-ejecutar[b-kykd0ndrix] {
        margin-bottom: 8px;
    }

    .er-grid-actions[b-kykd0ndrix] {
        margin-top: 6px;
        margin-bottom: 6px;
        gap: 6px;
    }
    .er-btn-export[b-kykd0ndrix] {
        padding: 5px 10px;
        font-size: 11px;
        gap: 5px;
    }
    .er-btn-export .ic[b-kykd0ndrix] {
        width: 13px;
        height: 13px;
    }

    .er-tabs[b-kykd0ndrix] {
        margin-bottom: 4px;
    }
    .er-tab[b-kykd0ndrix] {
        padding: 6px 10px;
        font-size: 11px;
    }

    .er-grid-row[b-kykd0ndrix] {
        margin: 6px 0;
        min-height: 180px;
        gap: 5px;
    }
    .er-col-toggle[b-kykd0ndrix] {
        width: 28px;
    }
    .er-col-toggle .ic[b-kykd0ndrix] {
        width: 15px;
        height: 15px;
    }

    /* El header del popup (HeaderText="03. NOMBRE...") es lo que más fuerza a
       .er-body-resultados a partirse en 2 líneas y "robarle" alto a la
       grilla — se achica letra/padding para que entre en una sola línea con
       más frecuencia. Vive fuera del árbol que escriben las etiquetas de
       este archivo (lo arma el propio DxPopup), por eso ::deep desde
       .er-popup (clase que sí llega al contenedor raíz vía CssClass). */
    .er-popup[b-kykd0ndrix]  .dxbl-popup-header {
        --dxbl-popup-header-font-size: 14px !important;
        --dxbl-popup-header-padding-top: 8px !important;
        --dxbl-popup-header-padding-bottom: 8px !important;
        --dxbl-popup-header-content-padding-y: 4px !important;
    }

    /* Fecha (DxDateEdit) y demás inputs de .er-filtros con menos padding/letra
       más chica — el input en sí tenía la altura por defecto de DevExpress
       (pensada para desktop) sin achicarse junto con el resto del bloque. */
    .fld[b-kykd0ndrix]  .dxbl-text-edit {
        --dxbl-text-edit-padding-y: 5px !important;
        --dxbl-text-edit-font-size: 12.5px !important;
    }

    /* Densidad de la grilla en sí: menos padding por celda y letra más chica
       para que entren más filas en el mismo alto — es la palanca principal
       para "ver más datos" en pantallas bajas, más que estirar el contenedor. */
    .er-grid-wrap[b-kykd0ndrix]  dxbl-grid {
        --dxbl-grid-font-size: 11.5px !important;
        --dxbl-grid-line-height: 1.2 !important;
        --dxbl-grid-text-cell-padding-y: 4px !important;
        --dxbl-grid-toolbar-container-padding-y: 3px !important;
        --dxbl-grid-toolbar-container-min-height: 26px !important;
        --dxbl-grid-group-panel-container-padding-y: 3px !important;
    }

    /* La barra "Drag a column header here to group by that column" no se usa
       casi nunca en celular y ocupa una fila entera de alto — se oculta para
       recuperar ese espacio para filas de datos reales. Agrupar sigue
       disponible desde el menú contextual del header de columna. */
    .er-grid-wrap[b-kykd0ndrix]  .dxbl-grid-group-panel-container {
        display: none !important;
    }
}