/* /Components/Layout/BusquedaGlobal.razor.rz.scp.css */

/* ============================================
   NEXOPOS - BÚSQUEDA GLOBAL
   ============================================ */

/* CONTENEDOR */

.global-search[b-nd9qmr7ao5] {
    position: relative;
    width: 100%;
    max-width: 460px;
    min-width: 0;
}

/* CAMPO DE BÚSQUEDA */

.global-search-field[b-nd9qmr7ao5] {
    display: flex;
    align-items: center;
    gap: 11px;

    width: 100%;
    min-width: 0;
    min-height: 45px;
    padding: 0 14px;

    border: 1px solid transparent;
    border-radius: 13px;

    background: #f7f7fb;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

.global-search-field:focus-within[b-nd9qmr7ao5] {
    border-color: #c9bbff;
    background: #fff;
    box-shadow: 0 0 0 3px #7656ff12;
}

/* ICONO DE LUPA */

.global-search-field > svg[b-nd9qmr7ao5] {
    width: 19px;
    height: 19px;
    flex-shrink: 0;

    fill: none;
    stroke: #948da7;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* INPUT */

.global-search-field input[b-nd9qmr7ao5] {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 12px 0;

    border: 0;
    outline: none;
    background: transparent;

    color: #211c35;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.global-search-field input[b-nd9qmr7ao5]::placeholder {
    color: #948da7;
    font-size: inherit;
    opacity: 1;
}

.global-search-field input[b-nd9qmr7ao5]::-webkit-search-cancel-button {
    display: none;
}

/* BOTÓN LIMPIAR */

.global-search-clear[b-nd9qmr7ao5] {
    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;
    flex-shrink: 0;
    padding: 0;

    border: 0;
    border-radius: 7px;

    background: #ece8f6;
    color: #817992;

    font-size: 19px;
    cursor: pointer;
}

.global-search-clear:hover[b-nd9qmr7ao5] {
    background: #e2d9ff;
    color: #7656ff;
}

.global-search-clear:focus-visible[b-nd9qmr7ao5] {
    outline: 2px solid #7656ff;
    outline-offset: 2px;
}

/* ============================================
   PANEL DE RESULTADOS
   ============================================ */

.global-search-results[b-nd9qmr7ao5] {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 200;

    width: 100%;
    min-width: 340px;
    max-height: 440px;
    padding: 7px;

    overflow-y: auto;
    overscroll-behavior: contain;

    background: #fff;
    border: 1px solid #ebe6f4;
    border-radius: 15px;
    box-shadow: 0 18px 50px #211c3520;

    animation: global-search-enter-b-nd9qmr7ao5 .15s ease both;
}

@keyframes global-search-enter-b-nd9qmr7ao5 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* GRUPOS */

.global-search-group + .global-search-group[b-nd9qmr7ao5] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0edf6;
}

.global-search-group-title[b-nd9qmr7ao5] {
    padding: 11px 10px 7px;

    color: #938aa9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* RESULTADOS INDIVIDUALES */

.global-search-result[b-nd9qmr7ao5] {
    display: flex;
    align-items: center;
    gap: 11px;

    width: 100%;
    min-height: 54px;
    padding: 10px;

    border: 0;
    border-radius: 10px;

    background: transparent;
    text-align: left;
    font-family: inherit;

    cursor: pointer;
    transition: background-color .15s ease;
}

.global-search-result:hover[b-nd9qmr7ao5],
.global-search-result:focus-visible[b-nd9qmr7ao5] {
    background: #f6f3ff;
    outline: none;
}

/* ICONO DEL RESULTADO */

.global-search-result-icon[b-nd9qmr7ao5] {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;
    flex-shrink: 0;

    border-radius: 10px;
    background: #eeeaff;
    color: #7656ff;
}

.global-search-result-icon svg[b-nd9qmr7ao5] {
    display: block;
}

/* INFORMACIÓN DEL RESULTADO */

.global-search-result-info[b-nd9qmr7ao5] {
    display: flex;
    flex-direction: column;
    gap: 5px;

    flex: 1;
    min-width: 0;
}

.global-search-result-info strong[b-nd9qmr7ao5] {
    color: #302a43;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.global-search-result-info small[b-nd9qmr7ao5] {
    color: #938aa9;
    font-size: 12px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-arrow[b-nd9qmr7ao5] {
    margin-left: auto;
    color: #aaa3bc;
    font-size: 15px;
}

/* MENSAJES */

.global-search-message[b-nd9qmr7ao5] {
    padding: 19px 14px;

    color: #817992;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.global-search-message strong[b-nd9qmr7ao5] {
    color: #302a43;
}

/* ============================================
   PANTALLAS MEDIANAS
   ============================================ */

@media (min-width: 901px) and (max-width: 1100px) {
    .global-search[b-nd9qmr7ao5] {
        max-width: 360px;
    }
}

/* ============================================
   TABLET Y CELULAR
   ============================================ */

@media (max-width: 900px) {

    .global-search[b-nd9qmr7ao5] {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .global-search-field[b-nd9qmr7ao5] {
        gap: 8px;

        min-height: 42px;
        padding: 0 10px;

        border: 1px solid #eceaf3;
        border-radius: 11px;
        background: #f8f9fc;
    }

    .global-search-field > svg[b-nd9qmr7ao5] {
        width: 18px;
        height: 18px;
    }

    /* Texto más grande en celular */

    .global-search-field input[b-nd9qmr7ao5] {
        min-width: 0;
        padding: 10px 0;

        font-size: 16px;
        font-weight: 400;
        line-height: 1.25;
    }

    .global-search-field input[b-nd9qmr7ao5]::placeholder {
        font-size: inherit;
    }

    /* Resultados adaptados al móvil */

    .global-search-results[b-nd9qmr7ao5] {
        width: min(330px, calc(100vw - 24px));
        min-width: 0;
        max-height: min(60vh, 430px);
    }

    .global-search-result[b-nd9qmr7ao5] {
        min-height: 60px;
    }

    .global-search-result-info strong[b-nd9qmr7ao5] {
        font-size: 13px;
    }

    .global-search-result-info small[b-nd9qmr7ao5] {
        font-size: 12px;
    }
}

/* ============================================
   CELULARES MUY PEQUEÑOS
   ============================================ */

@media (max-width: 360px) {

    .global-search-field[b-nd9qmr7ao5] {
        gap: 6px;
        padding: 0 8px;
    }

    .global-search-field > svg[b-nd9qmr7ao5] {
        width: 16px;
        height: 16px;
    }

    /* Mantener 16 px para legibilidad */

    .global-search-field input[b-nd9qmr7ao5] {
        font-size: 16px;
    }

    .global-search-clear[b-nd9qmr7ao5] {
        width: 23px;
        height: 23px;
    }
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .global-search-results[b-nd9qmr7ao5] {
        animation: none;
    }

    .global-search-field[b-nd9qmr7ao5],
    .global-search-result[b-nd9qmr7ao5] {
        transition: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */

/* ============================================
   NEXOPOS - LAYOUT PRINCIPAL
   ============================================ */

.nexo-shell[b-chn4zsnsbr] {
    --nexo-sidebar-width: 252px;
    --nexo-sidebar-compact: 78px;
    --nexo-primary: #16a34a;
    --nexo-primary-light: color-mix(in srgb, var(--nexo-primary) 10%, white);
    --nexo-primary-border: color-mix(in srgb, var(--nexo-primary) 25%, white);
    min-height: 100vh;
    background: #f7f7fc;
    color: #211c35;
}

/* SIDEBAR */

.nexo-sidebar[b-chn4zsnsbr] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: var(--nexo-sidebar-width);
    overflow: hidden;
    background: #19152b;
    transition: width .25s ease, transform .25s ease;
}

.nexo-workspace[b-chn4zsnsbr] {
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--nexo-sidebar-width);
    transition: margin-left .25s ease;
}

/* BARRA SUPERIOR */

.nexo-topbar[b-chn4zsnsbr] {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 82px;
    padding: 0 34px;
    background: #fff;
    border-bottom: 1px solid #efedf5;
}

.nexo-top-left[b-chn4zsnsbr] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 16px;
    min-width: 0;
}

.nexo-top-actions[b-chn4zsnsbr] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 18px;
}

/* BÚSQUEDA GLOBAL */

.nexo-top-search[b-chn4zsnsbr] {
    width: min(460px, 100%);
    min-width: 0;
}

.nexo-top-search[b-chn4zsnsbr]  .global-search {
    max-width: none;
}

/* BOTONES DEL MENÚ */

.nexo-desktop-menu-toggle[b-chn4zsnsbr],
.nexo-mobile-menu-toggle[b-chn4zsnsbr] {
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #eceaf3;
    border-radius: 11px;
    background: #fff;
    color: #51476e;
    cursor: pointer;
    transition: background .2s ease,
                border-color .2s ease,
                color .2s ease;
}

.nexo-desktop-menu-toggle[b-chn4zsnsbr] {
    display: inline-flex;
}

.nexo-mobile-menu-toggle[b-chn4zsnsbr] {
    display: none;
}

.nexo-desktop-menu-toggle:hover[b-chn4zsnsbr],
.nexo-mobile-menu-toggle:hover[b-chn4zsnsbr] {
    background: var(--nexo-primary-light);
    border-color: var(--nexo-primary-border);
    color: var(--nexo-primary);
}

.nexo-desktop-menu-toggle:focus-visible[b-chn4zsnsbr],
.nexo-mobile-menu-toggle:focus-visible[b-chn4zsnsbr] {
    outline: 2px solid var(--nexo-primary);
    outline-offset: 2px;
}

.nexo-desktop-menu-toggle svg[b-chn4zsnsbr],
.nexo-mobile-menu-toggle svg[b-chn4zsnsbr] {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ESTADO DEL SISTEMA */

.nexo-status[b-chn4zsnsbr] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7b7591;
    font-size: 11px;
    white-space: nowrap;
}

.nexo-status-dot[b-chn4zsnsbr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #17bf99;
}

/* PERFIL GENERAL */

.nexo-profile[b-chn4zsnsbr] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left: 18px;
    border-left: 1px solid #eceaf2;
}

.nexo-profile-avatar[b-chn4zsnsbr] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--nexo-primary) 75%, white),
        var(--nexo-primary)
    );
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.nexo-profile-name strong[b-chn4zsnsbr],
.nexo-profile-name small[b-chn4zsnsbr] {
    display: block;
}

.nexo-profile-name strong[b-chn4zsnsbr] {
    color: #211c35;
    font-size: 12px;
}

.nexo-profile-name small[b-chn4zsnsbr] {
    margin-top: 3px;
    color: #9690a5;
    font-size: 10px;
}

/* CONTENIDO PRINCIPAL */

.nexo-main[b-chn4zsnsbr] {
    max-width: 1700px;
    margin: auto;
    padding: 34px;
}

.nexo-overlay[b-chn4zsnsbr],
.nexo-mobile-nav[b-chn4zsnsbr] {
    display: none;
}

/* ============================================
   SIDEBAR CONTRAÍDO
   ============================================ */

@media (min-width: 901px) {
    .nexo-shell.sidebar-collapsed .nexo-sidebar[b-chn4zsnsbr] {
        width: var(--nexo-sidebar-compact);
    }

    .nexo-shell.sidebar-collapsed .nexo-workspace[b-chn4zsnsbr] {
        margin-left: var(--nexo-sidebar-compact);
    }

    .nexo-shell.sidebar-collapsed .nexo-sidebar[b-chn4zsnsbr]  .nexo-brand {
        justify-content: center;
        padding: 30px 0 38px;
    }

    .nexo-shell.sidebar-collapsed .nexo-sidebar[b-chn4zsnsbr]  .nexo-brand-text,
    .nexo-shell.sidebar-collapsed .nexo-sidebar[b-chn4zsnsbr]  .nexo-menu-label,
    .nexo-shell.sidebar-collapsed .nexo-sidebar[b-chn4zsnsbr]  .nexo-user-info {
        display: none;
    }

    .nexo-shell.sidebar-collapsed .nexo-sidebar[b-chn4zsnsbr]  .nexo-menu {
        padding: 0 10px 24px;
    }

    .nexo-shell.sidebar-collapsed .nexo-sidebar[b-chn4zsnsbr]  .nexo-link {
        justify-content: center;
        gap: 0;
        padding: 14px 0;
    }

    .nexo-shell.sidebar-collapsed .nexo-sidebar[b-chn4zsnsbr]  .nexo-link > span:last-child {
        display: none;
    }

    .nexo-shell.sidebar-collapsed .nexo-sidebar[b-chn4zsnsbr]  .nexo-sidebar-footer {
        justify-content: center;
        margin: 10px;
        padding: 14px 0;
    }
}

/* ============================================
   TABLET Y CELULAR
   ============================================ */

@media (max-width: 900px) {
    .nexo-sidebar[b-chn4zsnsbr] {
        width: 265px;
        transform: translateX(-100%);
    }

    .nexo-sidebar.open[b-chn4zsnsbr] {
        transform: translateX(0);
    }

    .nexo-overlay[b-chn4zsnsbr] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: #13102188;
    }

    .nexo-workspace[b-chn4zsnsbr] {
        margin-left: 0;
    }

    .nexo-topbar[b-chn4zsnsbr] {
        height: 64px;
        padding: 0 12px;
        gap: 10px;
    }

    .nexo-top-left[b-chn4zsnsbr] {
        gap: 8px;
    }

    .nexo-desktop-menu-toggle[b-chn4zsnsbr] {
        display: none;
    }

    .nexo-mobile-menu-toggle[b-chn4zsnsbr] {
        display: inline-flex;
        width: 37px;
        height: 37px;
    }

    .nexo-top-search[b-chn4zsnsbr] {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .nexo-top-search[b-chn4zsnsbr]  .global-search {
        width: 100%;
    }

    .nexo-top-search[b-chn4zsnsbr]  .global-search-field {
        min-height: 38px;
        padding: 0 10px;
        gap: 7px;
        border: 1px solid #eceaf3;
        background: #f8f9fc;
    }

    .nexo-top-search[b-chn4zsnsbr]  .global-search-field input,
    .nexo-top-search[b-chn4zsnsbr]  .global-search-field input::placeholder {
        font-size: 14px;
    }

    .nexo-top-search[b-chn4zsnsbr]  .global-search-field input {
        min-width: 0;
        padding: 9px 0;
    }

    .nexo-top-search[b-chn4zsnsbr]  .global-search-field > svg {
        width: 18px;
        height: 18px;
    }

    .nexo-top-search[b-chn4zsnsbr]  .global-search-results {
        min-width: 0;
        width: min(330px, calc(100vw - 24px));
        max-height: 60vh;
    }

    .nexo-status[b-chn4zsnsbr],
    .nexo-profile-name[b-chn4zsnsbr] {
        display: none;
    }

    .nexo-profile[b-chn4zsnsbr] {
        gap: 0;
        padding-left: 0;
        border-left: 0;
    }

    .nexo-profile-avatar[b-chn4zsnsbr] {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .nexo-main[b-chn4zsnsbr] {
        padding: 22px 15px 105px;
    }

    .nexo-mobile-nav[b-chn4zsnsbr] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 80;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        padding: 7px 5px calc(7px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid #efedf5;
        box-shadow: 0 -8px 30px #211c3509;
    }

    .nexo-mobile-nav[b-chn4zsnsbr]  a,
    .nexo-mobile-nav button[b-chn4zsnsbr] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        min-height: 52px;
        padding: 5px 2px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #9992aa;
        text-decoration: none;
        font: inherit;
        cursor: pointer;
        transition: color .2s ease, background .2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .nexo-mobile-nav[b-chn4zsnsbr]  a.active,
    .nexo-mobile-nav button.menu-active[b-chn4zsnsbr] {
        color: var(--nexo-primary);
        background: var(--nexo-primary-light);
    }

    .nexo-mobile-nav[b-chn4zsnsbr]  a:focus-visible,
    .nexo-mobile-nav button:focus-visible[b-chn4zsnsbr] {
        outline: 2px solid var(--nexo-primary);
        outline-offset: 2px;
    }

    .nexo-mobile-icon[b-chn4zsnsbr] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }

    .nexo-mobile-icon svg[b-chn4zsnsbr] {
        display: block;
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .nexo-mobile-nav small[b-chn4zsnsbr] {
        font-size: 10px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
    }
}

/* CELULARES PEQUEÑOS */

@media (max-width: 360px) {
    .nexo-topbar[b-chn4zsnsbr] {
        padding: 0 8px;
        gap: 7px;
    }

    .nexo-top-left[b-chn4zsnsbr] {
        gap: 6px;
    }

    .nexo-mobile-menu-toggle[b-chn4zsnsbr] {
        width: 34px;
        height: 36px;
    }

    .nexo-profile-avatar[b-chn4zsnsbr] {
        width: 33px;
        height: 35px;
    }

    .nexo-mobile-nav small[b-chn4zsnsbr] {
        font-size: 9px;
    }

    .nexo-mobile-icon svg[b-chn4zsnsbr] {
        width: 20px;
        height: 20px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
    .nexo-sidebar[b-chn4zsnsbr],
    .nexo-workspace[b-chn4zsnsbr] {
        transition: none;
    }
}

/* ============================================
   IMPRESIÓN LIMPIA DE COMPROBANTES
   ============================================ */

@media print {
    @page {
        margin: 0;
    }

    .nexo-shell.nexo-print-layout[b-chn4zsnsbr] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        color: black !important;
        overflow: visible !important;
    }

    .nexo-print-layout .nexo-sidebar[b-chn4zsnsbr],
    .nexo-print-layout .nexo-topbar[b-chn4zsnsbr],
    .nexo-print-layout .nexo-mobile-nav[b-chn4zsnsbr],
    .nexo-print-layout .nexo-overlay[b-chn4zsnsbr] {
        display: none !important;
    }

    .nexo-print-layout .nexo-workspace[b-chn4zsnsbr],
    .nexo-shell.sidebar-collapsed.nexo-print-layout .nexo-workspace[b-chn4zsnsbr] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        overflow: visible !important;
        transform: none !important;
    }

    .nexo-print-layout .nexo-main[b-chn4zsnsbr] {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        overflow: visible !important;
    }

    .nexo-print-layout .nexo-main[b-chn4zsnsbr]  .receipt-toolbar,
    .nexo-print-layout .nexo-main[b-chn4zsnsbr]  .ticket-toolbar {
        display: none !important;
    }

    .nexo-print-layout .nexo-main[b-chn4zsnsbr]  .receipt-page,
    .nexo-print-layout .nexo-main[b-chn4zsnsbr]  .ticket-page {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        overflow: visible !important;
    }

    .nexo-print-layout .nexo-main[b-chn4zsnsbr]  .receipt-paper,
    .nexo-print-layout .nexo-main[b-chn4zsnsbr]  .ticket-paper {
        box-sizing: border-box !important;
        margin: 0 auto !important;
        border: none !important;
        box-shadow: none !important;
        background: white !important;
        color: black !important;
    }

    .nexo-print-layout .nexo-main[b-chn4zsnsbr]  .receipt-paper.receipt-58,
    .nexo-print-layout .nexo-main[b-chn4zsnsbr]  .ticket-paper.ticket-58 {
        width: 58mm !important;
        max-width: 100% !important;
    }

    .nexo-print-layout .nexo-main[b-chn4zsnsbr]  .receipt-paper.receipt-80,
    .nexo-print-layout .nexo-main[b-chn4zsnsbr]  .ticket-paper.ticket-80 {
        width: 80mm !important;
        max-width: 100% !important;
    }
}

/* ============================================
   PERFIL Y CIERRE DE SESIÓN
   ============================================ */

.nexo-logout-form[b-chn4zsnsbr] {
    display: flex;
    align-items: center;
    margin: 0;
}

.nexo-logout-button[b-chn4zsnsbr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 37px;
    padding: 0 12px;
    border: 1px solid #eceaf3;
    border-radius: 11px;
    background: #fff;
    color: #756d89;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease,
                color .2s ease,
                border-color .2s ease;
}

.nexo-logout-button:hover[b-chn4zsnsbr] {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

.nexo-logout-button:focus-visible[b-chn4zsnsbr] {
    outline: 2px solid var(--nexo-primary);
    outline-offset: 2px;
}

.nexo-logout-button svg[b-chn4zsnsbr] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 900px) {
    .nexo-profile[b-chn4zsnsbr] {
        gap: 8px;
    }

    .nexo-logout-button[b-chn4zsnsbr] {
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
    }

    .nexo-logout-button span[b-chn4zsnsbr] {
        display: none;
    }
}

@media (max-width: 360px) {
    .nexo-profile[b-chn4zsnsbr] {
        gap: 5px;
    }

    .nexo-logout-button[b-chn4zsnsbr] {
        width: 33px;
        height: 35px;
        min-height: 35px;
    }
}

/* ============================================
   MENÚ DESPLEGABLE DE CUENTA
   ============================================ */

.nexo-account-container[b-chn4zsnsbr] {
    position: relative;
    flex-shrink: 0;
}

.nexo-account-trigger[b-chn4zsnsbr] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 6px 11px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: #f3f5fb;
    color: #211c35;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background .2s ease,
                border-color .2s ease;
}

.nexo-account-trigger:hover[b-chn4zsnsbr],
.nexo-account-trigger.active[b-chn4zsnsbr] {
    background: var(--nexo-primary-light);
    border-color: var(--nexo-primary-border);
}

.nexo-account-trigger:focus-visible[b-chn4zsnsbr] {
    outline: 2px solid var(--nexo-primary);
    outline-offset: 2px;
}

.nexo-account-trigger .nexo-profile-avatar[b-chn4zsnsbr] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--nexo-primary) 75%, white),
        var(--nexo-primary)
    );
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.nexo-account-trigger .nexo-profile-name strong[b-chn4zsnsbr] {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexo-account-chevron[b-chn4zsnsbr] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: 8px;
    fill: none;
    stroke: #9992aa;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.nexo-account-chevron.rotated[b-chn4zsnsbr] {
    transform: rotate(180deg);
}

.nexo-account-dismiss[b-chn4zsnsbr] {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

.nexo-account-dropdown[b-chn4zsnsbr] {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 151;
    width: 310px;
    max-width: calc(100vw - 24px);
    padding: 20px;
    border: 1px solid #efedf5;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 48px #211c3522;
    animation: nexo-account-appear-b-chn4zsnsbr .16s ease-out;
}

@keyframes nexo-account-appear-b-chn4zsnsbr {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nexo-account-header[b-chn4zsnsbr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nexo-account-large-avatar[b-chn4zsnsbr] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--nexo-primary) 75%, white),
        var(--nexo-primary)
    );
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.nexo-account-identity[b-chn4zsnsbr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.nexo-account-identity strong[b-chn4zsnsbr] {
    color: #211c35;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.nexo-account-identity span[b-chn4zsnsbr] {
    color: #8c869e;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.nexo-account-status[b-chn4zsnsbr] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 17px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e7f8f2;
    color: #07966f;
    font-size: 11px;
    font-weight: 800;
}

.nexo-account-status-dot[b-chn4zsnsbr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
}

.nexo-account-divider[b-chn4zsnsbr] {
    height: 1px;
    margin: 16px 0;
    background: #f0eef5;
}

.nexo-account-option[b-chn4zsnsbr] {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 7px 0;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #211c35;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease;
}

.nexo-account-option:hover[b-chn4zsnsbr] {
    background: #f8f7fc;
}

.nexo-account-option-icon[b-chn4zsnsbr] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
    border-radius: 12px;
}

.nexo-account-option-icon.profile[b-chn4zsnsbr] {
    background: #eff8ff;
    color: #0ea5e9;
}

.nexo-account-option-icon.logout[b-chn4zsnsbr] {
    background: #fff0f2;
    color: #f43f5e;
}

.nexo-account-option-icon svg[b-chn4zsnsbr] {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nexo-account-option-text[b-chn4zsnsbr] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.nexo-account-option-text strong[b-chn4zsnsbr] {
    font-size: 13px;
    font-weight: 750;
}

.nexo-account-option-text small[b-chn4zsnsbr] {
    color: #9a94aa;
    font-size: 11px;
}

.nexo-account-arrow[b-chn4zsnsbr] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: none;
    stroke: #aaa4b8;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nexo-account-logout-form[b-chn4zsnsbr] {
    width: 100%;
    margin: 0;
}

.nexo-account-option.logout[b-chn4zsnsbr] {
    color: #e11d48;
}

.nexo-account-option.logout:hover[b-chn4zsnsbr] {
    background: #fff5f6;
}

/* PERFIL EN CELULARES */

@media (max-width: 900px) {
    .nexo-account-trigger[b-chn4zsnsbr] {
        min-height: 40px;
        padding: 3px;
        gap: 0;
        background: transparent;
    }

    .nexo-account-trigger .nexo-profile-avatar[b-chn4zsnsbr] {
        width: 36px;
        height: 36px;
    }

    .nexo-account-trigger .nexo-profile-name[b-chn4zsnsbr],
    .nexo-account-chevron[b-chn4zsnsbr] {
        display: none;
    }

    .nexo-account-dropdown[b-chn4zsnsbr] {
        position: fixed;
        top: 70px;
        right: 12px;
        width: min(310px, calc(100vw - 24px));
    }
}

@media (max-width: 360px) {
    .nexo-account-trigger .nexo-profile-avatar[b-chn4zsnsbr] {
        width: 33px;
        height: 35px;
    }
}

@media print {
    .nexo-account-dropdown[b-chn4zsnsbr],
    .nexo-account-dismiss[b-chn4zsnsbr] {
        display: none !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */

.nexo-navigation[b-02dyelkpgw] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.nexo-brand[b-02dyelkpgw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 30px 22px 38px;
}

.nexo-brand-icon[b-02dyelkpgw] {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--nexo-primary) 75%, white),
        var(--nexo-primary)
    );
    color: white;
    font-size: 25px;
    font-weight: 850;
    box-shadow: 0 8px 24px
        color-mix(in srgb, var(--nexo-primary) 35%, transparent);
}

.nexo-brand-text strong[b-02dyelkpgw] {
    display: block;
    color: #fff;
    font-size: 23px;
    letter-spacing: -1px;
}

.nexo-brand-text strong span[b-02dyelkpgw] {
    color: color-mix(
        in srgb,
        var(--nexo-primary) 60%,
        white
    );
}

.nexo-brand-text small[b-02dyelkpgw] {
    color: #827b9e;
    font-size: 10px;
}

.nexo-menu[b-02dyelkpgw] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 14px 24px;
    scrollbar-width: thin;
    scrollbar-color: #403757 transparent;
}

.nexo-menu-label[b-02dyelkpgw] {
    color: #77718f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 0 15px 14px;
}

.nexo-menu-label.second[b-02dyelkpgw] {
    padding-top: 27px;
}

/* ENLACES DEL MENÚ */

[b-02dyelkpgw] .nexo-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    margin-bottom: 5px;
    border-radius: 12px;
    color: #a9a3c0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 550;
    transition: all .22s ease;
}

[b-02dyelkpgw] .nexo-link:hover {
    color: #fff;
    background: #ffffff10;
    transform: translateX(3px);
    text-decoration: none;
}

[b-02dyelkpgw] .nexo-link.active {
    color: #fff;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--nexo-primary) 27%, transparent),
        color-mix(in srgb, var(--nexo-primary) 7%, transparent)
    );
    box-shadow: inset 3px 0 var(--nexo-primary);
    text-decoration: none;
}

/* ICONOS SVG */

[b-02dyelkpgw] .nexo-link-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    flex-shrink: 0;
    font-size: 21px;
    font-weight: 500;
}

[b-02dyelkpgw] .nexo-link-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    transition: transform .2s ease;
}

[b-02dyelkpgw] .nexo-link:hover .nexo-link-icon svg {
    transform: scale(1.08);
}

/* PERFIL DINÁMICO */

.nexo-sidebar-footer[b-02dyelkpgw] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 12px;
    padding: 14px 10px;
    border-top: 1px solid #ffffff16;
    min-width: 0;
}

.nexo-avatar[b-02dyelkpgw] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--nexo-primary);
    color: white;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 4px 14px #00000020;
    transition: background-color .2s ease;
}

.nexo-user-info[b-02dyelkpgw] {
    min-width: 0;
    flex: 1;
}

.nexo-user-info strong[b-02dyelkpgw] {
    display: block;
    color: white;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexo-user-info small[b-02dyelkpgw] {
    display: block;
    color: #89829f;
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .nexo-brand[b-02dyelkpgw] {
        padding: 18px 20px 24px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-q724frcpcq],
.components-reconnect-repeated-attempt-visible[b-q724frcpcq],
.components-reconnect-failed-visible[b-q724frcpcq],
.components-pause-visible[b-q724frcpcq],
.components-resume-failed-visible[b-q724frcpcq],
.components-rejoining-animation[b-q724frcpcq] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-q724frcpcq],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-q724frcpcq],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-q724frcpcq],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-q724frcpcq],
#components-reconnect-modal.components-reconnect-retrying[b-q724frcpcq],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-q724frcpcq],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-q724frcpcq],
#components-reconnect-modal.components-reconnect-failed[b-q724frcpcq],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-q724frcpcq] {
    display: block;
}


#components-reconnect-modal[b-q724frcpcq] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-q724frcpcq 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-q724frcpcq 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-q724frcpcq 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-q724frcpcq]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-q724frcpcq 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-q724frcpcq {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-q724frcpcq {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-q724frcpcq {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-q724frcpcq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-q724frcpcq] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-q724frcpcq] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-q724frcpcq] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-q724frcpcq] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-q724frcpcq] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-q724frcpcq] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-q724frcpcq 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-q724frcpcq] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-q724frcpcq {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Caja.razor.rz.scp.css */

/* ============================================
   NEXOPOS - CONTROL DE CAJA
   TEMA DINÁMICO
   ============================================ */

.caja-page[b-l6rns49pcz] {
    --caja-primary: var(--nexo-primary);
    --caja-primary-dark: var(--nexo-primary-hover);
    --caja-text: #211c35;
    --caja-muted: #928ca3;
    --caja-border: #ebe8f3;
    --caja-surface: #ffffff;

    max-width: 1600px;
    margin: 0 auto;
    padding: 28px;
    color: var(--caja-text);
    animation: caja-enter-b-l6rns49pcz .4s ease both;
}

@keyframes caja-enter-b-l6rns49pcz {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ENCABEZADO */

.caja-header[b-l6rns49pcz],
.caja-header-actions[b-l6rns49pcz],
.caja-statusbar[b-l6rns49pcz],
.caja-panel-header[b-l6rns49pcz],
.caja-breakdown-row[b-l6rns49pcz],
.caja-modal-header[b-l6rns49pcz],
.caja-modal-actions[b-l6rns49pcz],
.caja-close-summary[b-l6rns49pcz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.caja-header[b-l6rns49pcz] {
    align-items: flex-start;
    margin-bottom: 26px;
}

.caja-eyebrow[b-l6rns49pcz] {
    margin-bottom: 9px;
    color: var(--nexo-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.8px;
}

.caja-header h1[b-l6rns49pcz] {
    margin: 0 0 8px;
    color: #211c35;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 850;
    letter-spacing: -1px;
}

.caja-header p[b-l6rns49pcz],
.caja-panel-header p[b-l6rns49pcz] {
    margin: 0;
    color: #928ca3;
    font-size: 13px;
    line-height: 1.6;
}

.caja-header-actions[b-l6rns49pcz] {
    flex-shrink: 0;
}

/* BOTONES */

.caja-btn[b-l6rns49pcz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 19px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
    cursor: pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.caja-btn:hover:not(:disabled)[b-l6rns49pcz] {
    transform: translateY(-2px);
}

.caja-btn:focus-visible[b-l6rns49pcz] {
    outline: 3px solid var(--nexo-primary-border);
    outline-offset: 2px;
}

.caja-btn:disabled[b-l6rns49pcz] {
    opacity: .55;
    cursor: not-allowed;
}

.caja-btn-primary[b-l6rns49pcz] {
    background: var(--nexo-primary-gradient);
    color: #fff;
    box-shadow: 0 8px 20px var(--nexo-primary-shadow);
}

.caja-btn-primary:hover:not(:disabled)[b-l6rns49pcz] {
    filter: brightness(.95);
    box-shadow: 0 12px 25px var(--nexo-primary-shadow);
}

.caja-btn-outline[b-l6rns49pcz] {
    background: #fff;
    color: #514b65;
    border-color: #e8e5f0;
}

.caja-btn-outline:hover:not(:disabled)[b-l6rns49pcz] {
    background: var(--nexo-primary-soft);
    border-color: var(--nexo-primary-border);
}

.caja-btn-danger[b-l6rns49pcz] {
    background: #dc5062;
    color: #fff;
}

.caja-btn-danger:hover:not(:disabled)[b-l6rns49pcz] {
    background: #c83d50;
}

.caja-btn-wide[b-l6rns49pcz] {
    width: 100%;
    margin-top: 18px;
}

/* ALERTAS */

.caja-alert[b-l6rns49pcz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.caja-alert button[b-l6rns49pcz] {
    flex-shrink: 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 21px;
    cursor: pointer;
}

.caja-alert-error[b-l6rns49pcz] {
    background: #fff0f1;
    color: #a82f42;
}

.caja-alert-success[b-l6rns49pcz] {
    background: #eaf9f0;
    color: #23794b;
}

/* CARGA */

.caja-loading[b-l6rns49pcz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 220px;
    color: #928ca3;
}

.caja-spinner[b-l6rns49pcz] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--nexo-primary-light);
    border-top-color: var(--nexo-primary);
    border-radius: 50%;
    animation: caja-spin-b-l6rns49pcz .8s linear infinite;
}

@keyframes caja-spin-b-l6rns49pcz {
    to {
        transform: rotate(360deg);
    }
}

/* CAJA SIN TURNO ABIERTO */

.caja-empty[b-l6rns49pcz] {
    max-width: 580px;
    margin: 24px auto 38px;
    padding: 38px;
    background: #fff;
    border: 1px solid #ebe8f3;
    border-radius: 22px;
    box-shadow: 0 12px 40px #211c3508;
    text-align: center;
}

.caja-empty-icon[b-l6rns49pcz] {
    display: grid;
    place-items: center;
    width: 65px;
    height: 65px;
    margin: 0 auto 15px;
    border-radius: 19px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 32px;
}

.caja-empty h2[b-l6rns49pcz] {
    margin: 16px 0 8px;
    color: #211c35;
    font-size: 23px;
    font-weight: 800;
}

.caja-empty p[b-l6rns49pcz] {
    margin-bottom: 23px;
    color: #928ca3;
    font-size: 14px;
    line-height: 1.7;
}

.caja-empty .caja-form-grid[b-l6rns49pcz] {
    text-align: left;
}

/* ESTADOS DE CAJA */

.caja-pill[b-l6rns49pcz] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.caja-pill-open[b-l6rns49pcz] {
    background: #e6f8ee;
    color: #168356;
}

.caja-pill-closed[b-l6rns49pcz] {
    background: #f0f1f6;
    color: #73778a;
}

.caja-status-dot[b-l6rns49pcz] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.caja-statusbar[b-l6rns49pcz] {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 18px;
    color: #928ca3;
    font-size: 12px;
}

/* ESTADÍSTICAS */

.caja-stats[b-l6rns49pcz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.caja-stat[b-l6rns49pcz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    padding: 21px;
    background: #fff;
    border: 1px solid #ebe8f3;
    border-radius: 17px;
    box-shadow: 0 5px 24px #211c3505;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.caja-stat:hover[b-l6rns49pcz] {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px #211c350c;
}

.caja-stat-icon[b-l6rns49pcz] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 21px;
    font-weight: 700;
}

.caja-stat > span[b-l6rns49pcz] {
    color: #928ca3;
    font-size: 12px;
}

.caja-stat > strong[b-l6rns49pcz] {
    color: #211c35;
    font-size: clamp(19px, 2.3vw, 27px);
    font-weight: 850;
    letter-spacing: -.8px;
    overflow-wrap: anywhere;
}

.caja-stat > small[b-l6rns49pcz] {
    color: #928ca3;
    font-size: 11px;
    line-height: 1.5;
}

.caja-stat-primary[b-l6rns49pcz] {
    background: var(--nexo-primary-gradient);
    border-color: transparent;
    color: #fff;
}

.caja-stat-primary > span[b-l6rns49pcz],
.caja-stat-primary > small[b-l6rns49pcz] {
    color: rgba(255, 255, 255, .86);
}

.caja-stat-primary > strong[b-l6rns49pcz] {
    color: #fff;
}

.caja-stat-primary .caja-stat-icon[b-l6rns49pcz] {
    background: #ffffff2b;
    color: #fff;
}

/* PANELES */

.caja-main-grid[b-l6rns49pcz] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.caja-panel[b-l6rns49pcz] {
    min-width: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid #ebe8f3;
    border-radius: 18px;
    box-shadow: 0 5px 24px #211c3505;
}

.caja-panel-header[b-l6rns49pcz] {
    align-items: flex-start;
    margin-bottom: 23px;
}

.caja-panel-header h2[b-l6rns49pcz] {
    margin: 0 0 6px;
    color: #211c35;
    font-size: 17px;
    font-weight: 800;
}

/* FORMULARIOS */

.caja-form-grid[b-l6rns49pcz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.caja-field[b-l6rns49pcz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.caja-field-full[b-l6rns49pcz] {
    grid-column: 1 / -1;
}

.caja-field label[b-l6rns49pcz] {
    color: #514c65;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
}

/* CAMPOS DE FORMULARIO */

.caja-page .caja-field input.caja-input[b-l6rns49pcz],
.caja-page .caja-field select.caja-input[b-l6rns49pcz],
.caja-page .caja-field textarea.caja-input[b-l6rns49pcz],
.caja-modal .caja-field input.caja-input[b-l6rns49pcz],
.caja-modal .caja-field select.caja-input[b-l6rns49pcz],
.caja-modal .caja-field textarea.caja-input[b-l6rns49pcz] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #e5e0f0;
    border-radius: 12px;
    outline: none;
    background-color: #f8f7fc;
    color: #211c35;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

.caja-page .caja-field .caja-input[b-l6rns49pcz]::placeholder,
.caja-modal .caja-field .caja-input[b-l6rns49pcz]::placeholder {
    color: #aaa3ba;
    opacity: 1;
}

.caja-page .caja-field .caja-input:hover[b-l6rns49pcz],
.caja-modal .caja-field .caja-input:hover[b-l6rns49pcz] {
    border-color: var(--nexo-primary-border);
}

.caja-page .caja-field .caja-input:focus[b-l6rns49pcz],
.caja-modal .caja-field .caja-input:focus[b-l6rns49pcz] {
    border-color: var(--nexo-primary);
    background-color: #fff;
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.caja-page .caja-field select.caja-input[b-l6rns49pcz],
.caja-modal .caja-field select.caja-input[b-l6rns49pcz] {
    padding-right: 38px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 16px;
    cursor: pointer;
}

.caja-page .caja-field textarea.caja-input[b-l6rns49pcz],
.caja-modal .caja-field textarea.caja-input[b-l6rns49pcz] {
    min-height: 100px;
    resize: vertical;
    line-height: 1.6;
}

.caja-page .caja-field .caja-input:disabled[b-l6rns49pcz],
.caja-modal .caja-field .caja-input:disabled[b-l6rns49pcz] {
    background-color: #f0f0f5;
    color: #aaa5b6;
    cursor: not-allowed;
}

/* RESUMEN DEL TURNO */

.caja-breakdown[b-l6rns49pcz] {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.caja-breakdown-row[b-l6rns49pcz] {
    font-size: 13px;
}

.caja-breakdown-row span[b-l6rns49pcz] {
    color: #928ca3;
}

.caja-breakdown-row strong[b-l6rns49pcz] {
    color: #302a43;
    font-weight: 800;
    text-align: right;
    overflow-wrap: anywhere;
}

.caja-breakdown-total[b-l6rns49pcz] {
    padding: 17px;
    border-radius: 12px;
    background: var(--nexo-primary-light);
}

.caja-breakdown-total span[b-l6rns49pcz],
.caja-breakdown-total strong[b-l6rns49pcz] {
    color: var(--nexo-primary-hover);
    font-weight: 800;
}

.caja-breakdown-total strong[b-l6rns49pcz] {
    font-size: 19px;
}

.caja-breakdown-separator[b-l6rns49pcz] {
    height: 1px;
    background: #ebe8f3;
}

.caja-positive[b-l6rns49pcz] {
    color: #159365 !important;
}

.caja-negative[b-l6rns49pcz] {
    color: #d24a59 !important;
}

.caja-info[b-l6rns49pcz] {
    margin-top: 22px;
    padding: 15px;
    border-radius: 11px;
    background: #f5f5fb;
    color: #777d91;
    font-size: 12px;
    line-height: 1.6;
}

/* MOVIMIENTOS E HISTORIAL */

.caja-movements[b-l6rns49pcz] {
    margin-bottom: 20px;
}

.caja-table-wrap[b-l6rns49pcz] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.caja-table[b-l6rns49pcz] {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 12px;
}

.caja-table th[b-l6rns49pcz] {
    padding: 13px 12px;
    background: var(--nexo-primary-soft);
    color: #938da5;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
}

.caja-table td[b-l6rns49pcz] {
    padding: 16px 12px;
    border-bottom: 1px solid #f0edf5;
    color: #514c65;
}

.caja-table tbody tr:hover[b-l6rns49pcz] {
    background: var(--nexo-primary-soft);
}

.caja-table tbody tr:last-child td[b-l6rns49pcz] {
    border-bottom: none;
}

.caja-align-right[b-l6rns49pcz] {
    text-align: right !important;
}

.caja-type[b-l6rns49pcz] {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
}

.caja-type-in[b-l6rns49pcz] {
    background: #e9f8f0;
    color: #168a58;
}

.caja-type-out[b-l6rns49pcz] {
    background: #fff0f1;
    color: #d34c5c;
}

.caja-table-empty[b-l6rns49pcz] {
    padding: 38px 16px;
    color: #928ca3;
    font-size: 13px;
    text-align: center;
}

/* MODAL DE CIERRE */

.caja-modal-backdrop[b-l6rns49pcz] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: #15162f8f;
    backdrop-filter: blur(4px);
}

.caja-modal[b-l6rns49pcz] {
    box-sizing: border-box;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    padding: 26px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ebe8f3;
    border-radius: 21px;
    box-shadow: 0 24px 90px #00000033;
    animation: caja-modal-enter-b-l6rns49pcz .2s ease both;
}

@keyframes caja-modal-enter-b-l6rns49pcz {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.caja-modal-header h2[b-l6rns49pcz] {
    margin: 0;
    color: #211c35;
    font-size: 20px;
    font-weight: 800;
}

.caja-close[b-l6rns49pcz] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 0;
    border-radius: 9px;
    background: #f3f2f8;
    color: #777087;
    font-size: 22px;
    cursor: pointer;
}

.caja-close:hover:not(:disabled)[b-l6rns49pcz] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

.caja-modal-description[b-l6rns49pcz] {
    margin: 15px 0 20px;
    color: #928ca3;
    font-size: 13px;
    line-height: 1.7;
}

.caja-close-summary[b-l6rns49pcz] {
    margin-bottom: 19px;
    padding: 15px;
    border-radius: 11px;
    background: var(--nexo-primary-soft);
    color: #514c65;
    font-size: 13px;
}

.caja-close-summary strong[b-l6rns49pcz] {
    color: var(--nexo-primary-hover);
    font-size: 17px;
    font-weight: 800;
}

.caja-modal .caja-field[b-l6rns49pcz] {
    margin-bottom: 18px;
}

.caja-modal-actions[b-l6rns49pcz] {
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* RESPONSIVE - TABLETS */

@media (max-width: 1150px) {
    .caja-stats[b-l6rns49pcz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .caja-main-grid[b-l6rns49pcz] {
        grid-template-columns: 1fr;
    }
}

/* RESPONSIVE - CELULARES */

@media (max-width: 600px) {
    .caja-page[b-l6rns49pcz] {
        padding: 15px;
    }

    .caja-header[b-l6rns49pcz] {
        flex-direction: column;
        gap: 18px;
    }

    .caja-header-actions[b-l6rns49pcz] {
        width: 100%;
        gap: 10px;
    }

    .caja-header-actions .caja-btn[b-l6rns49pcz] {
        flex: 1;
        min-width: 0;
    }

    .caja-stats[b-l6rns49pcz] {
        gap: 10px;
    }

    .caja-stat[b-l6rns49pcz] {
        padding: 15px;
        border-radius: 15px;
    }

    .caja-stat > strong[b-l6rns49pcz] {
        font-size: 19px;
    }

    .caja-stat-icon[b-l6rns49pcz] {
        width: 36px;
        height: 36px;
    }

    .caja-panel[b-l6rns49pcz] {
        padding: 17px;
        border-radius: 15px;
    }

    .caja-panel-header h2[b-l6rns49pcz] {
        font-size: 16px;
    }

    .caja-form-grid[b-l6rns49pcz] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .caja-field-full[b-l6rns49pcz] {
        grid-column: auto;
    }

    .caja-empty[b-l6rns49pcz] {
        padding: 22px;
    }

    .caja-modal[b-l6rns49pcz] {
        padding: 20px;
        border-radius: 17px;
    }

    .caja-breakdown-total[b-l6rns49pcz] {
        gap: 10px;
    }

    .caja-breakdown-total strong[b-l6rns49pcz] {
        font-size: 17px;
    }

    .caja-table[b-l6rns49pcz] {
        font-size: 12px;
    }

    .caja-table th[b-l6rns49pcz],
    .caja-table td[b-l6rns49pcz] {
        padding: 12px 10px;
    }
}

/* PANTALLAS PEQUEÑAS */

@media (max-width: 360px) {
    .caja-page[b-l6rns49pcz] {
        padding: 10px;
    }

    .caja-stat[b-l6rns49pcz] {
        padding: 12px;
    }

    .caja-stat > strong[b-l6rns49pcz] {
        font-size: 17px;
    }

    .caja-panel[b-l6rns49pcz] {
        padding: 14px;
    }

    .caja-modal-actions .caja-btn[b-l6rns49pcz] {
        flex: 1;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
    .caja-page[b-l6rns49pcz],
    .caja-spinner[b-l6rns49pcz],
    .caja-modal[b-l6rns49pcz] {
        animation: none;
    }

    .caja-btn[b-l6rns49pcz],
    .caja-stat[b-l6rns49pcz],
    .caja-input[b-l6rns49pcz] {
        transition: none;
    }
}

/* CONTROLES BLAZOR - CSS ISOLATION */

[b-l6rns49pcz] input.caja-input,
[b-l6rns49pcz] select.caja-input,
[b-l6rns49pcz] textarea.caja-input {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--nexo-primary-border) !important;
    border-radius: 12px !important;
    background: #f8f7fc !important;
    color: #211c35 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    outline: none !important;
}

[b-l6rns49pcz] input.caja-input:focus,
[b-l6rns49pcz] select.caja-input:focus,
[b-l6rns49pcz] textarea.caja-input:focus {
    background: #fff !important;
    border-color: var(--nexo-primary) !important;
    box-shadow: 0 0 0 3px var(--nexo-primary-focus) !important;
}

[b-l6rns49pcz] textarea.caja-input {
    min-height: 100px !important;
    resize: vertical;
}

@media (max-width: 600px) {
    [b-l6rns49pcz] input.caja-input,
    [b-l6rns49pcz] select.caja-input,
    [b-l6rns49pcz] textarea.caja-input {
        font-size: 16px !important;
    }
}
/* /Components/Pages/Clientes.razor.rz.scp.css */

/* ==========================================
   NEXOPOS - CLIENTES
   TEMA DINÁMICO
   ========================================== */

.clientes-page[b-ixwm07a651] {
    animation: clientes-entrada-b-ixwm07a651 .45s ease both;
    color: #211c35;
}

@keyframes clientes-entrada-b-ixwm07a651 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ENCABEZADO */

.clientes-header[b-ixwm07a651] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 26px;
}

.clientes-eyebrow[b-ixwm07a651] {
    color: var(--nexo-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.8px;
    margin-bottom: 9px;
}

.clientes-header h1[b-ixwm07a651] {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
}

.clientes-header p[b-ixwm07a651] {
    color: #9690a5;
    margin: 8px 0 0;
    font-size: 13px;
}

/* BOTONES PRINCIPALES */

.clientes-primary[b-ixwm07a651] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    background: var(--nexo-primary-gradient);
    border: none;
    border-radius: 12px;
    padding: 13px 19px;
    color: white;
    font-size: 12px;
    font-weight: 750;
    box-shadow: 0 9px 23px var(--nexo-primary-shadow);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.clientes-primary:hover:not(:disabled)[b-ixwm07a651] {
    transform: translateY(-2px);
    filter: brightness(.96);
    box-shadow: 0 13px 27px var(--nexo-primary-shadow);
}

.clientes-primary:disabled[b-ixwm07a651] {
    opacity: .6;
    cursor: wait;
}

.clientes-primary span[b-ixwm07a651] {
    font-size: 20px;
}

/* ==========================================
   TARJETAS DE ESTADÍSTICAS
   ========================================== */

.clientes-stats[b-ixwm07a651] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.clientes-stat[b-ixwm07a651] {
    background: #fff;
    border: 1px solid #efedf5;
    border-radius: 19px;
    padding: 23px;
    box-shadow: 0 5px 24px #24203c06;
    transition: transform .25s;
}

.clientes-stat:hover[b-ixwm07a651] {
    transform: translateY(-4px);
}

.stat-symbol[b-ixwm07a651] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 19px;
}

/* TOTAL DE CLIENTES: COLOR DINÁMICO */

.stat-symbol.purple[b-ixwm07a651] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

/* ACTIVOS: COLOR FUNCIONAL */

.stat-symbol.mint[b-ixwm07a651] {
    background: #e6faf5;
    color: #16b99a;
}

/* DESCUENTOS: COLOR FUNCIONAL */

.stat-symbol.coral[b-ixwm07a651] {
    background: #fff0ec;
    color: #ff876a;
}

.clientes-stat > span[b-ixwm07a651],
.clientes-stat > strong[b-ixwm07a651],
.clientes-stat > small[b-ixwm07a651] {
    display: block;
}

.clientes-stat > span[b-ixwm07a651] {
    color: #9690a5;
    font-size: 12px;
}

.clientes-stat > strong[b-ixwm07a651] {
    font-size: 29px;
    margin: 7px 0;
    letter-spacing: -1px;
}

.clientes-stat > small[b-ixwm07a651] {
    color: #aaa5b6;
    font-size: 10px;
}

/* ==========================================
   DIRECTORIO DE CLIENTES
   ========================================== */

.clientes-panel[b-ixwm07a651] {
    background: white;
    border: 1px solid #efedf5;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 24px #24203c06;
}

.clientes-toolbar[b-ixwm07a651] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 24px;
}

.clientes-toolbar h2[b-ixwm07a651] {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
}

.clientes-toolbar p[b-ixwm07a651] {
    color: #a09aae;
    font-size: 11px;
    margin: 6px 0 0;
}

/* BUSCADOR */

.clientes-search[b-ixwm07a651] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 290px;
    max-width: 100%;
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: #f7f6fb;
    color: #9189a6;
    transition: border-color .2s, box-shadow .2s;
}

.clientes-search:focus-within[b-ixwm07a651] {
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.clientes-search span[b-ixwm07a651] {
    font-size: 22px;
}

.clientes-search input[b-ixwm07a651] {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #211c35;
    font-size: 12px;
}

/* ==========================================
   TABLA DE CLIENTES
   ========================================== */

.clientes-table-scroll[b-ixwm07a651] {
    overflow-x: auto;
}

.clientes-table[b-ixwm07a651] {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.clientes-table th[b-ixwm07a651] {
    text-align: left;
    padding: 16px 20px;
    background: var(--nexo-primary-soft);
    color: #9992aa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
}

.clientes-table td[b-ixwm07a651] {
    padding: 17px 20px;
    border-bottom: 1px solid #f3f1f7;
    font-size: 12px;
    color: #625b73;
}

.clientes-table tbody tr[b-ixwm07a651] {
    transition: background .2s;
}

.clientes-table tbody tr:hover[b-ixwm07a651] {
    background: var(--nexo-primary-soft);
}

/* IDENTIDAD DEL CLIENTE */

.cliente-identidad[b-ixwm07a651] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cliente-avatar[b-ixwm07a651] {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 12px;
    font-weight: 800;
}

.cliente-identidad strong[b-ixwm07a651],
.cliente-identidad small[b-ixwm07a651] {
    display: block;
}

.cliente-identidad strong[b-ixwm07a651] {
    color: #302a43;
    font-size: 12px;
}

.cliente-identidad small[b-ixwm07a651] {
    margin-top: 4px;
    color: #aaa4b6;
    font-size: 10px;
}

/* DESCUENTOS */

.cliente-discount[b-ixwm07a651] {
    display: inline-block;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 800;
}

.cliente-muted[b-ixwm07a651] {
    color: #aaa4b6;
    font-size: 11px;
}

/* ESTADOS */

.cliente-status[b-ixwm07a651] {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}

.cliente-status.activo[b-ixwm07a651] {
    background: #e5faf2;
    color: #159f7b;
}

.cliente-status.inactivo[b-ixwm07a651] {
    background: #fff0ed;
    color: #e46e5a;
}

/* ==========================================
   ACCIONES DE CLIENTES
   ========================================== */

.cliente-actions[b-ixwm07a651] {
    display: flex;
    gap: 8px;
}

.cliente-actions button[b-ixwm07a651] {
    border: 0;
    border-radius: 8px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    padding: 8px 11px;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.cliente-actions button:hover:not(:disabled)[b-ixwm07a651] {
    background: var(--nexo-primary-muted);
    color: var(--nexo-primary-hover);
}

.cliente-actions button.danger[b-ixwm07a651] {
    background: #fff0ed;
    color: #e46e5a;
}

.cliente-actions button.danger:hover:not(:disabled)[b-ixwm07a651] {
    background: #ffe1dc;
    color: #c94f43;
}

.cliente-actions button.activate[b-ixwm07a651] {
    background: #e5faf2;
    color: #159f7b;
}

.cliente-actions button.activate:hover:not(:disabled)[b-ixwm07a651] {
    background: #d4f5e9;
    color: #128665;
}

.cliente-actions button:disabled[b-ixwm07a651] {
    opacity: .5;
    cursor: not-allowed;
}

/* PIE DE TABLA */

.clientes-footer[b-ixwm07a651] {
    padding: 17px 24px;
    color: #aaa4b6;
    font-size: 11px;
}

/* ==========================================
   ESTADOS VACÍOS Y CARGA
   ========================================== */

.clientes-empty[b-ixwm07a651] {
    padding: 60px 20px;
    text-align: center;
    color: #9690a5;
}

.clientes-empty h3[b-ixwm07a651] {
    color: #302a43;
    font-size: 17px;
}

.clientes-empty p[b-ixwm07a651] {
    font-size: 12px;
}

.empty-icon[b-ixwm07a651] {
    font-size: 38px;
    color: var(--nexo-primary);
}

/* ALERTAS */

.clientes-alert[b-ixwm07a651] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 13px 17px;
    margin-bottom: 20px;
    border-radius: 12px;
    font-size: 12px;
}

.clientes-alert.success[b-ixwm07a651] {
    background: #e6faf2;
    color: #128665;
}

.clientes-alert.error[b-ixwm07a651] {
    background: #fff0ed;
    color: #c94f43;
}

.clientes-alert button[b-ixwm07a651] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
}

/* INDICADOR DE CARGA */

.loading-circle[b-ixwm07a651] {
    width: 28px;
    height: 28px;
    margin: auto;
    border: 3px solid var(--nexo-primary-light);
    border-top-color: var(--nexo-primary);
    border-radius: 50%;
    animation: girar-b-ixwm07a651 .7s linear infinite;
}

@keyframes girar-b-ixwm07a651 {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================
   MODAL DE CLIENTES
   ========================================== */

.cliente-modal-backdrop[b-ixwm07a651] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #15102599;
    display: grid;
    place-items: center;
    padding: 16px;
    animation: aparecer-b-ixwm07a651 .2s ease;
}

@keyframes aparecer-b-ixwm07a651 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cliente-modal[b-ixwm07a651] {
    width: 100%;
    max-width: 590px;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 25px 80px #15102540;
}

/* ENCABEZADO DEL MODAL */

.modal-heading[b-ixwm07a651] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.modal-heading h2[b-ixwm07a651] {
    font-size: 23px;
    font-weight: 800;
    margin: 0;
}

.modal-heading p[b-ixwm07a651] {
    color: #9690a5;
    font-size: 12px;
    margin: 8px 0 0;
}

.modal-close[b-ixwm07a651] {
    border: 0;
    background: #f4f2f8;
    color: #817992;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    font-size: 23px;
    cursor: pointer;
}

.modal-close:hover[b-ixwm07a651] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

/* ==========================================
   FORMULARIO
   ========================================== */

.cliente-form-grid[b-ixwm07a651] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
}

.cliente-field[b-ixwm07a651] {
    min-width: 0;
}

.cliente-field.full[b-ixwm07a651] {
    grid-column: 1 / -1;
}

.cliente-field label[b-ixwm07a651] {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 750;
    color: #40394f;
}

.cliente-field input:not([type="checkbox"])[b-ixwm07a651] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid #e8e4f0;
    border-radius: 11px;
    outline: none;
    font-size: 13px;
    background: #fff;
    color: #211c35;
    transition: border-color .2s, box-shadow .2s;
}

.cliente-field input:not([type="checkbox"]):focus[b-ixwm07a651] {
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

/* DESCUENTO ESPECIAL */

.discount-toggle[b-ixwm07a651] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: var(--nexo-primary-soft);
    padding: 17px;
    border-radius: 13px;
}

.discount-toggle strong[b-ixwm07a651],
.discount-toggle small[b-ixwm07a651] {
    display: block;
}

.discount-toggle strong[b-ixwm07a651] {
    font-size: 12px;
}

.discount-toggle small[b-ixwm07a651] {
    color: #9690a5;
    font-size: 11px;
    margin-top: 5px;
}

.discount-toggle input[b-ixwm07a651] {
    width: 20px;
    height: 20px;
    accent-color: var(--nexo-primary);
    cursor: pointer;
}

/* ==========================================
   PIE DEL MODAL
   ========================================== */

.modal-footer[b-ixwm07a651] {
    display: flex;
    justify-content: flex-end;
    gap: 11px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #f0edf6;
}

.btn-cancel[b-ixwm07a651] {
    border: 0;
    background: #f4f2f8;
    color: #746d86;
    padding: 12px 18px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.btn-cancel:hover[b-ixwm07a651] {
    background: #eae7f0;
}

/* ERRORES DE FORMULARIO */

.form-error[b-ixwm07a651] {
    background: #fff0ed;
    color: #c94f43;
    padding: 12px;
    border-radius: 10px;
    font-size: 12px;
    margin-top: 16px;
}

/* ==========================================
   ACCESIBILIDAD
   ========================================== */

.clientes-primary:focus-visible[b-ixwm07a651],
.cliente-actions button:focus-visible[b-ixwm07a651],
.modal-close:focus-visible[b-ixwm07a651],
.btn-cancel:focus-visible[b-ixwm07a651] {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 3px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 750px) {
    .clientes-header[b-ixwm07a651] {
        align-items: stretch;
        flex-direction: column;
    }

    .clientes-stats[b-ixwm07a651] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .clientes-stat[b-ixwm07a651] {
        padding: 16px;
    }

    .clientes-stat > strong[b-ixwm07a651] {
        font-size: 25px;
    }

    .clientes-toolbar[b-ixwm07a651] {
        flex-direction: column;
        align-items: stretch;
        padding: 18px;
    }

    .clientes-search[b-ixwm07a651] {
        width: 100%;
    }

    .cliente-modal[b-ixwm07a651] {
        padding: 20px;
        border-radius: 18px;
    }

    .cliente-form-grid[b-ixwm07a651] {
        grid-template-columns: 1fr;
    }

    .cliente-field.full[b-ixwm07a651] {
        grid-column: auto;
    }
}

/* MOVIMIENTO REDUCIDO */

@media (prefers-reduced-motion: reduce) {
    .clientes-page[b-ixwm07a651],
    .cliente-modal-backdrop[b-ixwm07a651],
    .loading-circle[b-ixwm07a651] {
        animation: none;
    }

    .clientes-stat[b-ixwm07a651] {
        transition: none;
    }

    .clientes-stat:hover[b-ixwm07a651] {
        transform: none;
    }
}
/* /Components/Pages/Comprobante.razor.rz.scp.css */

.receipt-page[b-fge3dmgijf] {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.receipt-toolbar[b-fge3dmgijf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.receipt-toolbar a[b-fge3dmgijf] {
    color: #7656ff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
}

.receipt-toolbar-actions[b-fge3dmgijf] {
    display: flex;
    gap: 8px;
}

.receipt-toolbar button[b-fge3dmgijf] {
    border: 1px solid #e9e5f1;
    border-radius: 9px;
    background: white;
    padding: 10px 13px;
    color: #514a61;
    font-size: 12px;
    font-weight: 750;
}

.receipt-toolbar button.receipt-print[b-fge3dmgijf] {
    background: #7656ff;
    color: white;
    border-color: #7656ff;
}

.receipt-paper[b-fge3dmgijf] {
    box-sizing: border-box;
    margin: 0 auto;
    background: white;
    color: #111;
    padding: 12px 8px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.5;
    box-shadow: 0 8px 35px #24203c16;
    overflow-wrap: anywhere;
}

.receipt-80[b-fge3dmgijf] {
    width: 80mm;
}

.receipt-58[b-fge3dmgijf] {
    width: 58mm;
}

.receipt-brand[b-fge3dmgijf] {
    text-align: center;
}

.receipt-logo[b-fge3dmgijf] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #111;
    color: white;
    font-size: 22px;
    font-weight: 850;
    margin: 0 auto 10px;
}

.receipt-brand h1[b-fge3dmgijf] {
    font-size: 14px;
    font-weight: 850;
    margin: 0;
}

.receipt-brand p[b-fge3dmgijf] {
    font-size: 10px;
    margin: 5px 0;
}

.receipt-separator[b-fge3dmgijf] {
    border-top: 1px dashed #555;
    margin: 14px 0;
}

.receipt-pair[b-fge3dmgijf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 7px;
    margin: 6px 0;
}

.receipt-pair strong[b-fge3dmgijf] {
    text-align: right;
}

.receipt-label[b-fge3dmgijf] {
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 6px;
}

.receipt-small[b-fge3dmgijf] {
    margin: 5px 0;
}

.receipt-work[b-fge3dmgijf] {
    margin: 12px 0;
}

.receipt-work > strong[b-fge3dmgijf] {
    display: block;
}

.receipt-balance[b-fge3dmgijf] {
    font-size: 13px;
    font-weight: 850;
    margin-top: 12px;
}

.receipt-qr[b-fge3dmgijf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.receipt-qr img[b-fge3dmgijf] {
    width: 34mm;
    height: 34mm;
    max-width: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.receipt-qr strong[b-fge3dmgijf],
.receipt-qr small[b-fge3dmgijf] {
    font-size: 10px;
}

.receipt-footer[b-fge3dmgijf] {
    text-align: center;
    margin-top: 18px;
    font-size: 10px;
}

@media print {
    /* Este archivo pertenece a Comprobante.razor;
       ocultamos los elementos de navegación propios
       y dejamos visible solamente el ticket. */

    .receipt-page[b-fge3dmgijf] {
        margin: 0;
        padding: 0;
        max-width: none;
    }

    .receipt-toolbar[b-fge3dmgijf] {
        display: none !important;
    }

    .receipt-paper[b-fge3dmgijf] {
        margin: 0;
        box-shadow: none;
        border: none;
        padding: 2mm;
    }
}

@media (max-width: 650px) {
    .receipt-page[b-fge3dmgijf] {
        padding: 10px;
    }

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

    .receipt-toolbar-actions[b-fge3dmgijf] {
        flex-wrap: wrap;
    }
}

/* CONDICIONES DEL COMPROBANTE */

.receipt-conditions[b-fge3dmgijf] {
    margin-top: 12px;
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.receipt-conditions p[b-fge3dmgijf] {
    margin: 6px 0;
    white-space: pre-line;
}

.receipt-footer strong[b-fge3dmgijf] {
    display: block;
    margin-top: 8px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ==========================================
   BOTÓN IMPRIMIR COMPROBANTE
   ========================================== */

a.receipt-print[b-fge3dmgijf],
a.receipt-print:visited[b-fge3dmgijf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 11px 20px;
    min-height: 42px;

    background: #7657f8;
    color: #ffffff;

    border: 1px solid #7657f8;
    border-radius: 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    cursor: pointer;
    transition: background 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
}

a.receipt-print:hover[b-fge3dmgijf] {
    background: #6040e8;
    border-color: #6040e8;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(118, 87, 248, 0.22);
}

a.receipt-print:focus-visible[b-fge3dmgijf] {
    outline: 3px solid rgba(118, 87, 248, 0.35);
    outline-offset: 3px;
}

@media print {
    .receipt-toolbar[b-fge3dmgijf] {
        display: none !important;
    }
}
/* /Components/Pages/ComprobanteVenta.razor.rz.scp.css */

.ticket-page[b-ztrvrlkicl] {
    color: #29233a;
    padding-bottom: 40px;
}

.ticket-toolbar[b-ztrvrlkicl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.ticket-eyebrow[b-ztrvrlkicl] {
    color: #7656ff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.5px;
    margin-bottom: 9px;
}

.ticket-toolbar h1[b-ztrvrlkicl] {
    font-size: 27px;
    font-weight: 850;
    margin: 0;
}

.ticket-toolbar p[b-ztrvrlkicl] {
    color: #9992aa;
    font-size: 12px;
    margin-top: 8px;
}

.ticket-actions[b-ztrvrlkicl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ticket-actions select[b-ztrvrlkicl],
.ticket-back[b-ztrvrlkicl] {
    border: 1px solid #e8e3f2;
    border-radius: 11px;
    background: white;
    color: #625a74;
    padding: 12px 15px;
    font-size: 12px;
    text-decoration: none;
}

.ticket-print[b-ztrvrlkicl] {
    border: 0;
    border-radius: 11px;
    background: #7656ff;
    color: white;
    padding: 13px 18px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.ticket-print:disabled[b-ztrvrlkicl] {
    opacity: .5;
}

.ticket-paper[b-ztrvrlkicl] {
    box-sizing: border-box;
    background: #fff;
    color: #111;
    margin: 0 auto;
    padding: 15px 10px;
    border: 1px solid #e8e3f2;
    box-shadow: 0 12px 35px #211a390f;
    font-family: Arial, sans-serif;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.ticket-58[b-ztrvrlkicl] {
    width: 58mm;
}

.ticket-80[b-ztrvrlkicl] {
    width: 80mm;
}

.ticket-brand[b-ztrvrlkicl] {
    text-align: center;
}

.ticket-brand-mark[b-ztrvrlkicl] {
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    width: 34px;
    height: 34px;
    border: 2px solid #111;
    border-radius: 8px;
    font-size: 22px;
    font-weight: 900;
}

.ticket-brand h2[b-ztrvrlkicl] {
    font-size: 14px;
    margin: 0 0 7px;
    font-weight: 900;
}

.ticket-brand p[b-ztrvrlkicl],
.ticket-brand small[b-ztrvrlkicl] {
    display: block;
    margin: 5px 0;
}

.ticket-divider[b-ztrvrlkicl] {
    border-top: 1px dashed #555;
    margin: 15px 0;
}

.ticket-info > div[b-ztrvrlkicl],
.ticket-totals > div[b-ztrvrlkicl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin: 9px 0;
}

.ticket-info strong[b-ztrvrlkicl],
.ticket-totals strong[b-ztrvrlkicl] {
    text-align: right;
}

.ticket-items[b-ztrvrlkicl] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ticket-items th[b-ztrvrlkicl] {
    text-align: left;
    font-size: 9px;
    border-bottom: 1px solid #555;
    padding: 8px 2px;
}

.ticket-items th:first-child[b-ztrvrlkicl] {
    width: 53%;
}

.ticket-items th:nth-child(2)[b-ztrvrlkicl] {
    width: 15%;
    text-align: center;
}

.ticket-items th:last-child[b-ztrvrlkicl] {
    width: 32%;
    text-align: right;
}

.ticket-items td[b-ztrvrlkicl] {
    vertical-align: top;
    padding: 10px 2px;
    font-size: 10px;
}

.ticket-items td:nth-child(2)[b-ztrvrlkicl] {
    text-align: center;
}

.ticket-items td:last-child[b-ztrvrlkicl] {
    text-align: right;
}

.ticket-items td strong[b-ztrvrlkicl],
.ticket-items td small[b-ztrvrlkicl] {
    display: block;
}

.ticket-items td small[b-ztrvrlkicl] {
    margin-top: 5px;
    font-size: 9px;
    color: #555;
}

.ticket-grand-total[b-ztrvrlkicl] {
    font-size: 14px;
    font-weight: 900;
    border-top: 1px solid #111;
    padding-top: 12px;
}

.ticket-footer[b-ztrvrlkicl] {
    text-align: center;
    padding: 10px 0;
}

.ticket-footer strong[b-ztrvrlkicl] {
    font-size: 12px;
}

.ticket-footer p[b-ztrvrlkicl] {
    font-size: 10px;
}

.ticket-footer small[b-ztrvrlkicl] {
    font-size: 9px;
    color: #555;
}

.ticket-message[b-ztrvrlkicl] {
    text-align: center;
    background: white;
    border-radius: 15px;
    padding: 40px 20px;
}

@media (max-width: 700px) {
    .ticket-toolbar[b-ztrvrlkicl] {
        flex-direction: column;
        align-items: stretch;
    }

    .ticket-toolbar h1[b-ztrvrlkicl] {
        font-size: 23px;
    }
}


@media print {
    .ticket-page[b-ztrvrlkicl] {
        padding: 0 !important;
        margin: 0 !important;
    }

    .ticket-toolbar[b-ztrvrlkicl],
    .ticket-message[b-ztrvrlkicl] {
        display: none !important;
    }

    .ticket-paper[b-ztrvrlkicl] {
        max-width: 100% !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 2mm !important;
        font-size: 10px;
    }

    .ticket-paper.ticket-58[b-ztrvrlkicl] {
        width: 58mm !important;
    }

    .ticket-paper.ticket-80[b-ztrvrlkicl] {
        width: 80mm !important;
    }

    .ticket-qr img[b-ztrvrlkicl] {
        width: 28mm;
        height: 28mm;
    }
}


.ticket-qr[b-ztrvrlkicl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin: 18px 0;
    text-align: center;
}

.ticket-qr img[b-ztrvrlkicl] {
    display: block;
    width: 110px;
    height: 110px;
    max-width: 100%;
    image-rendering: pixelated;
}

.ticket-qr small[b-ztrvrlkicl] {
    font-size: 9px;
    color: #444;
}

@media print {
    .ticket-qr img[b-ztrvrlkicl] {
        width: 28mm;
        height: 28mm;
    }
}

/* DATOS COMERCIALES DEL TICKET */

.ticket-brand p[b-ztrvrlkicl] {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* MENSAJE PERSONALIZADO */

.ticket-footer strong[b-ztrvrlkicl] {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* AJUSTES PARA IMPRESIÓN TÉRMICA */

@media print {
    .ticket-brand[b-ztrvrlkicl],
    .ticket-footer[b-ztrvrlkicl] {
        break-inside: avoid;
    }

    .ticket-items tr[b-ztrvrlkicl] {
        break-inside: avoid;
    }
}

/* ==========================================
   BOTÓN IMPRIMIR COMPROBANTE
   ========================================== */

a.receipt-print[b-ztrvrlkicl],
a.receipt-print:visited[b-ztrvrlkicl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 11px 20px;
    min-height: 42px;

    background: #7657f8;
    color: #ffffff;

    border: 1px solid #7657f8;
    border-radius: 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    cursor: pointer;
    transition: background 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
}

a.receipt-print:hover[b-ztrvrlkicl] {
    background: #6040e8;
    border-color: #6040e8;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(118, 87, 248, 0.22);
}

a.receipt-print:focus-visible[b-ztrvrlkicl] {
    outline: 3px solid rgba(118, 87, 248, 0.35);
    outline-offset: 3px;
}

@media print {
    .receipt-toolbar[b-ztrvrlkicl] {
        display: none !important;
    }
}
/* /Components/Pages/Configuracion.razor.rz.scp.css */

/* ============================================
   NEXOPOS - CONFIGURACIÓN
   TEMA DINÁMICO GLOBAL
   ============================================ */

.config-page[b-7yhxn35fme] {
    --config-primary: var(--nexo-primary);
    --config-primary-hover: var(--nexo-primary-hover);
    --config-primary-light: var(--nexo-primary-light);
    --config-primary-border: var(--nexo-primary-border);

    max-width: 1450px;
    margin: 0 auto;
    color: #211c35;
    animation: config-enter-b-7yhxn35fme .4s ease both;
}

@keyframes config-enter-b-7yhxn35fme {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   ENCABEZADO
   ============================================ */

.config-header[b-7yhxn35fme] {
    margin-bottom: 27px;
}

.config-eyebrow[b-7yhxn35fme] {
    margin-bottom: 9px;
    color: var(--config-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.8px;
}

.config-header h1[b-7yhxn35fme] {
    margin: 0;
    font-size: clamp(25px, 3vw, 33px);
    font-weight: 850;
    letter-spacing: -.8px;
}

.config-header p[b-7yhxn35fme] {
    margin: 9px 0 0;
    color: #948da5;
    font-size: 13px;
}

/* ============================================
   DISTRIBUCIÓN
   ============================================ */

.config-grid[b-7yhxn35fme] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* ============================================
   TARJETAS
   ============================================ */

.config-card[b-7yhxn35fme] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 25px;
    border: 1px solid #eeeaf5;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 5px 24px #24203c06;
    transition: box-shadow .2s ease;
}

.config-card:hover[b-7yhxn35fme] {
    box-shadow: 0 12px 30px #24203c0d;
}

.config-card-heading[b-7yhxn35fme] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
}

/* ============================================
   ICONOS DE LAS TARJETAS
   ============================================ */

.config-icon[b-7yhxn35fme] {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--config-primary-light);
    color: var(--config-primary);
    transition:
        background .2s ease,
        color .2s ease;
}

.config-icon svg[b-7yhxn35fme] {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.config-card-heading h2[b-7yhxn35fme] {
    margin: 0;
    color: #302a43;
    font-size: 16px;
    font-weight: 800;
}

.config-card-heading p[b-7yhxn35fme] {
    margin: 5px 0 0;
    color: #a19aaf;
    font-size: 11px;
}

/* ============================================
   CAMPOS
   ============================================ */

.config-fields[b-7yhxn35fme] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.config-field[b-7yhxn35fme] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.config-fields label[b-7yhxn35fme],
.config-field label[b-7yhxn35fme] {
    color: #625b73;
    font-size: 12px;
    font-weight: 750;
}

/* ============================================
   INPUTS, SELECTS Y TEXTAREAS
   ============================================ */

.config-field input[b-7yhxn35fme],
.config-field select[b-7yhxn35fme],
.config-field textarea[b-7yhxn35fme] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid #e2dbfa;
    border-radius: 12px;
    outline: none;
    background: #f8f7fc;
    color: #302a43;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.config-field input:hover:not(:disabled)[b-7yhxn35fme],
.config-field select:hover:not(:disabled)[b-7yhxn35fme],
.config-field textarea:hover:not(:disabled)[b-7yhxn35fme] {
    border-color: var(--config-primary-border);
}

.config-field input:focus[b-7yhxn35fme],
.config-field select:focus[b-7yhxn35fme],
.config-field textarea:focus[b-7yhxn35fme] {
    border-color: var(--config-primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.config-field textarea[b-7yhxn35fme] {
    min-height: 95px;
    resize: vertical;
}

.config-field input[b-7yhxn35fme]::placeholder,
.config-field textarea[b-7yhxn35fme]::placeholder {
    color: #aaa3b7;
    opacity: 1;
}

/* ============================================
   CAMPOS BLOQUEADOS O DE SOLO LECTURA
   ============================================ */

.config-field input[readonly][b-7yhxn35fme],
.config-field textarea[readonly][b-7yhxn35fme],
.config-field select:disabled[b-7yhxn35fme] {
    cursor: default;
    opacity: 1;
}

.config-field input:disabled[b-7yhxn35fme],
.config-field textarea:disabled[b-7yhxn35fme] {
    cursor: not-allowed;
    opacity: .65;
}

/* ============================================
   SELECTOR DE COLORES
   ============================================ */

.config-colors[b-7yhxn35fme] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
    padding: 6px 0 10px;
}

.config-color[b-7yhxn35fme] {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #e7e3ef;
    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.config-color:hover:not(:disabled)[b-7yhxn35fme] {
    transform: scale(1.12);
}

/*
   El círculo seleccionado conserva su propio
   color de fondo, pero el contorno utiliza
   el tema global del sistema.
*/

.config-color.selected[b-7yhxn35fme] {
    box-shadow:
        0 0 0 2px var(--config-primary),
        0 0 0 5px var(--config-primary-light);
}

.config-color:focus-visible[b-7yhxn35fme] {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 6px;
}

.config-color:disabled[b-7yhxn35fme] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* ============================================
   PIE DE LAS TARJETAS
   ============================================ */

.config-card-footer[b-7yhxn35fme] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
    padding-top: 16px;
    border-top: 1px solid #f0edf6;
}

.config-card-footer span[b-7yhxn35fme] {
    color: #aaa3b7;
    font-size: 11px;
    overflow-wrap: anywhere;
}

/* ============================================
   BOTÓN GUARDAR CONFIGURACIÓN
   ============================================ */

.config-save-button[b-7yhxn35fme] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid var(--config-primary);
    border-radius: 10px;
    background: var(--nexo-primary-gradient);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: 0 5px 14px var(--nexo-primary-shadow);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.config-save-button:hover:not(:disabled)[b-7yhxn35fme] {
    filter: brightness(.94);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px var(--nexo-primary-shadow);
}

.config-save-button:focus-visible[b-7yhxn35fme] {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 3px;
}

.config-save-button:disabled[b-7yhxn35fme] {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================
   TABLET
   ============================================ */

@media (max-width: 1050px) {
    .config-grid[b-7yhxn35fme] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   CELULAR
   ============================================ */

@media (max-width: 600px) {
    .config-header[b-7yhxn35fme] {
        margin-bottom: 22px;
    }

    .config-grid[b-7yhxn35fme] {
        gap: 14px;
    }

    .config-card[b-7yhxn35fme] {
        padding: 19px;
        border-radius: 16px;
    }

    .config-card-heading[b-7yhxn35fme] {
        gap: 12px;
        margin-bottom: 22px;
    }

    .config-icon[b-7yhxn35fme] {
        width: 43px;
        height: 43px;
    }

    .config-field input[b-7yhxn35fme],
    .config-field select[b-7yhxn35fme],
    .config-field textarea[b-7yhxn35fme] {
        font-size: 16px;
    }

    .config-colors[b-7yhxn35fme] {
        gap: 12px;
    }

    .config-card-footer[b-7yhxn35fme] {
        align-items: flex-start;
        gap: 14px;
    }
}

/* ============================================
   PANTALLAS MUY PEQUEÑAS
   ============================================ */

@media (max-width: 390px) {
    .config-card[b-7yhxn35fme] {
        padding: 15px;
    }

    .config-card-footer[b-7yhxn35fme] {
        flex-direction: column;
        align-items: stretch;
    }

    .config-save-button[b-7yhxn35fme] {
        width: 100%;
    }
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .config-page[b-7yhxn35fme] {
        animation: none;
    }

    .config-card[b-7yhxn35fme],
    .config-color[b-7yhxn35fme],
    .config-icon[b-7yhxn35fme],
    .config-save-button[b-7yhxn35fme],
    .config-field input[b-7yhxn35fme],
    .config-field select[b-7yhxn35fme],
    .config-field textarea[b-7yhxn35fme] {
        transition: none;
    }
}
/* /Components/Pages/Empleados.razor.rz.scp.css */

/* ==========================================
   NEXOPOS - MÓDULO DE EMPLEADOS
   TEMA DINÁMICO
   ========================================== */

.empleados-page[b-5yu9buvuzz] {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px;
    color: #202238;
    font-family: inherit;
}

/* ENCABEZADO */

.empleados-header[b-5yu9buvuzz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.empleados-eyebrow[b-5yu9buvuzz] {
    color: var(--nexo-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.empleados-header h1[b-5yu9buvuzz] {
    margin: 0;
    color: #202238;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
}

.empleados-header p[b-5yu9buvuzz] {
    margin: 8px 0 0;
    color: #83879a;
    font-size: 13px;
    line-height: 1.6;
}

/* BOTONES */

.empleados-btn-primary[b-5yu9buvuzz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 11px 19px;
    border: none;
    border-radius: 12px;
    background: var(--nexo-primary-gradient);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 7px 18px var(--nexo-primary-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.empleados-btn-primary:hover:not(:disabled)[b-5yu9buvuzz] {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px var(--nexo-primary-shadow);
}

.empleados-btn-primary:disabled[b-5yu9buvuzz] {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
}

.empleados-btn-secondary[b-5yu9buvuzz] {
    min-height: 43px;
    padding: 11px 19px;
    border: 1px solid #e4e5ef;
    border-radius: 12px;
    background: #fff;
    color: #555b70;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease;
}

.empleados-btn-secondary:hover:not(:disabled)[b-5yu9buvuzz] {
    background: #f5f4fb;
}

.empleados-btn-secondary:disabled[b-5yu9buvuzz] {
    opacity: .6;
    cursor: not-allowed;
}

/* ALERTAS */

.empleados-alert[b-5yu9buvuzz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 16px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.5;
}

.empleados-alert-error[b-5yu9buvuzz] {
    color: #a73545;
    background: #fff1f2;
    border-color: #ffd7dd;
}

.empleados-alert-success[b-5yu9buvuzz] {
    color: #167b59;
    background: #edfcf5;
    border-color: #c9f1df;
}

.empleados-alert button[b-5yu9buvuzz] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 21px;
    cursor: pointer;
}

/* TARJETAS DE ESTADÍSTICAS */

.empleados-stats[b-5yu9buvuzz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 26px;
}

.empleados-stat[b-5yu9buvuzz] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 23px;
    border: 1px solid #ebecf3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 24px rgba(31, 34, 65, .035);
    transition: transform .2s ease, box-shadow .2s ease;
}

.empleados-stat:hover[b-5yu9buvuzz] {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(31, 34, 65, .075);
}

.empleados-stat > span[b-5yu9buvuzz] {
    color: #85899c;
    font-size: 12px;
    font-weight: 600;
}

.empleados-stat > strong[b-5yu9buvuzz] {
    color: #25243d;
    font-size: clamp(20px, 2vw, 29px);
    font-weight: 800;
    letter-spacing: -.7px;
    overflow-wrap: anywhere;
}

.empleados-stat > small[b-5yu9buvuzz] {
    color: #a0a3b2;
    font-size: 11px;
    line-height: 1.5;
}

/* Activos: verde funcional */

.empleados-stat:nth-child(2) > strong[b-5yu9buvuzz] {
    color: #16a477;
}

/* Nómina: color del negocio */

.empleados-stat:nth-child(3) > strong[b-5yu9buvuzz] {
    color: var(--nexo-primary);
}

/* PANEL PRINCIPAL */

.empleados-panel[b-5yu9buvuzz] {
    overflow: hidden;
    border: 1px solid #e9eaf2;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 5px 28px rgba(31, 34, 65, .035);
}

.empleados-panel-header[b-5yu9buvuzz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: 23px 24px;
    border-bottom: 1px solid #eff0f5;
}

.empleados-panel-header h2[b-5yu9buvuzz] {
    margin: 0;
    color: #27283d;
    font-size: 18px;
    font-weight: 800;
}

.empleados-panel-header p[b-5yu9buvuzz] {
    margin: 7px 0 0;
    color: #9699a8;
    font-size: 12px;
}

/* BÚSQUEDA Y FILTROS */

.empleados-filtros[b-5yu9buvuzz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.empleados-filtros input[b-5yu9buvuzz],
.empleados-filtros select[b-5yu9buvuzz] {
    min-height: 41px;
    padding: 10px 13px;
    border: 1px solid #e4e5ed;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #37394c;
    font-family: inherit;
    font-size: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.empleados-filtros input[b-5yu9buvuzz] {
    width: 230px;
}

.empleados-filtros select[b-5yu9buvuzz] {
    min-width: 120px;
    cursor: pointer;
}

.empleados-filtros input:focus[b-5yu9buvuzz],
.empleados-filtros select:focus[b-5yu9buvuzz] {
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

/* TABLA */

.empleados-table-wrapper[b-5yu9buvuzz] {
    width: 100%;
    overflow-x: auto;
}

.empleados-table[b-5yu9buvuzz] {
    width: 100%;
    min-width: 950px;
    border-collapse: collapse;
    text-align: left;
}

.empleados-table thead[b-5yu9buvuzz] {
    background: var(--nexo-primary-soft);
}

.empleados-table th[b-5yu9buvuzz] {
    padding: 15px 19px;
    color: #9295a5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    white-space: nowrap;
}

.empleados-table td[b-5yu9buvuzz] {
    padding: 17px 19px;
    border-top: 1px solid #f0f1f5;
    color: #555a6d;
    font-size: 12px;
    vertical-align: middle;
}

.empleados-table tbody tr[b-5yu9buvuzz] {
    transition: background .18s ease;
}

.empleados-table tbody tr:hover[b-5yu9buvuzz] {
    background: var(--nexo-primary-soft);
}

.empleados-table td > strong[b-5yu9buvuzz] {
    color: #2c2b44;
    font-weight: 750;
}

/* IDENTIDAD DEL EMPLEADO */

.empleados-persona[b-5yu9buvuzz] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 170px;
}

.empleados-avatar[b-5yu9buvuzz] {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 12px;
    font-weight: 800;
}

.empleados-persona strong[b-5yu9buvuzz] {
    display: block;
    color: #303046;
    font-size: 12px;
    font-weight: 750;
}

.empleados-persona small[b-5yu9buvuzz] {
    display: block;
    margin-top: 5px;
    color: #999cac;
    font-size: 11px;
}

/* ESTADOS */

.empleados-status[b-5yu9buvuzz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.empleados-status[b-5yu9buvuzz]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.empleados-status.activo[b-5yu9buvuzz] {
    background: #eafaf3;
    color: #169a6c;
}

.empleados-status.inactivo[b-5yu9buvuzz] {
    background: #f2f3f7;
    color: #8b8e9d;
}

/* ACCIONES */

.empleados-actions[b-5yu9buvuzz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.empleados-actions button[b-5yu9buvuzz] {
    padding: 8px 11px;
    border: 1px solid var(--nexo-primary-border);
    border-radius: 9px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease;
}

.empleados-actions button:hover:not(:disabled)[b-5yu9buvuzz] {
    background: var(--nexo-primary-muted);
}

.empleados-actions button.empleados-action-danger[b-5yu9buvuzz] {
    border-color: #ffe2e6;
    background: #fff2f3;
    color: #d34c60;
}

.empleados-actions button.empleados-action-danger:hover:not(:disabled)[b-5yu9buvuzz] {
    background: #ffe5e9;
}

.empleados-actions button.empleados-action-success[b-5yu9buvuzz] {
    border-color: #c9f1df;
    background: #ecfbf4;
    color: #169a6c;
}

.empleados-actions button.empleados-action-success:hover:not(:disabled)[b-5yu9buvuzz] {
    background: #daf6e9;
}

.empleados-actions button:disabled[b-5yu9buvuzz] {
    opacity: .5;
    cursor: not-allowed;
}

/* ESTADO VACÍO */

.empleados-empty[b-5yu9buvuzz] {
    padding: 65px 24px;
    text-align: center;
    color: #9295a5;
    font-size: 13px;
}

.empleados-empty-icon[b-5yu9buvuzz] {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 20px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 35px;
}

.empleados-empty h3[b-5yu9buvuzz] {
    margin: 0 0 9px;
    color: #36364e;
    font-size: 16px;
    font-weight: 800;
}

.empleados-empty p[b-5yu9buvuzz] {
    max-width: 350px;
    margin: 0 auto;
    color: #989bab;
    font-size: 12px;
    line-height: 1.7;
}

/* MODAL */

.empleados-modal-overlay[b-5yu9buvuzz] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 19, 42, .62);
    backdrop-filter: blur(5px);
}

.empleados-modal[b-5yu9buvuzz] {
    width: 100%;
    max-width: 590px;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    border: 1px solid #eae8f4;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 25px 90px rgba(15, 12, 40, .22);
}

.empleados-modal-header[b-5yu9buvuzz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 27px 20px;
    border-bottom: 1px solid #eff0f5;
}

.empleados-modal-header h2[b-5yu9buvuzz] {
    margin: 0;
    color: #292940;
    font-size: 21px;
    font-weight: 800;
}

.empleados-modal-header p[b-5yu9buvuzz] {
    margin: 7px 0 0;
    color: #9699a8;
    font-size: 12px;
}

.empleados-close[b-5yu9buvuzz] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 9px;
    background: #f4f4f8;
    color: #73778b;
    font-size: 23px;
    cursor: pointer;
}

.empleados-close:hover[b-5yu9buvuzz] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

/* FORMULARIO */

.empleados-form-grid[b-5yu9buvuzz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 25px 27px;
}

.empleados-field[b-5yu9buvuzz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.empleados-field.full[b-5yu9buvuzz] {
    grid-column: 1 / -1;
}

.empleados-field > label[b-5yu9buvuzz] {
    color: #4e5065;
    font-size: 12px;
    font-weight: 750;
}

/* INPUTS DE BLAZOR */

.empleados-modal[b-5yu9buvuzz]  .empleados-field input:not([type="checkbox"]),
.empleados-modal[b-5yu9buvuzz]  .empleados-field select,
.empleados-modal[b-5yu9buvuzz]  .empleados-field textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid #e4e1ef;
    border-radius: 11px;
    outline: none;
    background: #f8f9fc;
    color: #292b42;
    font-family: inherit;
    font-size: 14px;
    font-weight: 450;
    line-height: 1.4;
    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

.empleados-modal[b-5yu9buvuzz]  .empleados-field input:not([type="checkbox"]):hover,
.empleados-modal[b-5yu9buvuzz]  .empleados-field select:hover,
.empleados-modal[b-5yu9buvuzz]  .empleados-field textarea:hover {
    border-color: var(--nexo-primary-border);
}

.empleados-modal[b-5yu9buvuzz]  .empleados-field input:not([type="checkbox"]):focus,
.empleados-modal[b-5yu9buvuzz]  .empleados-field select:focus,
.empleados-modal[b-5yu9buvuzz]  .empleados-field textarea:focus {
    border-color: var(--nexo-primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.empleados-modal[b-5yu9buvuzz]  .empleados-field input::placeholder,
.empleados-modal[b-5yu9buvuzz]  .empleados-field textarea::placeholder {
    color: #a6a1b5;
    opacity: 1;
}

.empleados-modal[b-5yu9buvuzz]  .empleados-field input:disabled,
.empleados-modal[b-5yu9buvuzz]  .empleados-field select:disabled,
.empleados-modal[b-5yu9buvuzz]  .empleados-field textarea:disabled {
    background: #f0f0f5;
    color: #a09bab;
    cursor: not-allowed;
}

.empleados-modal[b-5yu9buvuzz]  .empleados-field input.invalid,
.empleados-modal[b-5yu9buvuzz]  .empleados-field select.invalid {
    border-color: #e87888;
}

/* CHECKBOX */

.empleados-checkbox[b-5yu9buvuzz] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.empleados-modal[b-5yu9buvuzz]  .empleados-checkbox input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--nexo-primary);
    cursor: pointer;
}

/* VISTA PREVIA DEL COSTO */

.empleados-cost-preview[b-5yu9buvuzz] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 19px;
    border: 1px solid var(--nexo-primary-border);
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        var(--nexo-primary-soft),
        var(--nexo-primary-light)
    );
}

.empleados-cost-preview span[b-5yu9buvuzz] {
    color: #746b9e;
    font-size: 12px;
    font-weight: 700;
}

.empleados-cost-preview strong[b-5yu9buvuzz] {
    color: var(--nexo-primary);
    font-size: 28px;
    font-weight: 850;
    letter-spacing: -.8px;
}

.empleados-cost-preview small[b-5yu9buvuzz] {
    color: #938bac;
    font-size: 11px;
    line-height: 1.5;
}

/* PIE DEL FORMULARIO */

.empleados-modal-footer[b-5yu9buvuzz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    padding: 19px 27px 24px;
    border-top: 1px solid #eff0f5;
}

/* ACCESIBILIDAD */

.empleados-page button:focus-visible[b-5yu9buvuzz],
.empleados-page input:focus-visible[b-5yu9buvuzz],
.empleados-page select:focus-visible[b-5yu9buvuzz] {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 2px;
}

/* RESPONSIVE - TABLET */

@media (max-width: 1200px) {
    .empleados-stats[b-5yu9buvuzz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .empleados-page[b-5yu9buvuzz] {
        padding: 20px;
    }

    .empleados-header h1[b-5yu9buvuzz] {
        font-size: 26px;
    }

    .empleados-panel-header[b-5yu9buvuzz] {
        align-items: stretch;
    }

    .empleados-filtros[b-5yu9buvuzz] {
        width: 100%;
    }

    .empleados-filtros input[b-5yu9buvuzz] {
        flex: 1;
        min-width: 0;
    }
}

/* RESPONSIVE - MÓVIL */

@media (max-width: 600px) {
    .empleados-page[b-5yu9buvuzz] {
        padding: 14px;
    }

    .empleados-header[b-5yu9buvuzz] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .empleados-header h1[b-5yu9buvuzz] {
        font-size: 25px;
    }

    .empleados-header .empleados-btn-primary[b-5yu9buvuzz] {
        width: 100%;
    }

    .empleados-stats[b-5yu9buvuzz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .empleados-stat[b-5yu9buvuzz] {
        padding: 16px 13px;
        border-radius: 14px;
        gap: 8px;
    }

    .empleados-stat > span[b-5yu9buvuzz] {
        font-size: 11px;
    }

    .empleados-stat > strong[b-5yu9buvuzz] {
        font-size: 19px;
    }

    .empleados-stat > small[b-5yu9buvuzz] {
        font-size: 10px;
    }

    .empleados-panel[b-5yu9buvuzz] {
        border-radius: 15px;
    }

    .empleados-panel-header[b-5yu9buvuzz] {
        padding: 18px 15px;
    }

    .empleados-filtros[b-5yu9buvuzz] {
        flex-direction: column;
        align-items: stretch;
    }

    .empleados-filtros input[b-5yu9buvuzz],
    .empleados-filtros select[b-5yu9buvuzz] {
        width: 100%;
    }

    .empleados-modal-overlay[b-5yu9buvuzz] {
        padding: 10px;
    }

    .empleados-modal[b-5yu9buvuzz] {
        max-height: calc(100dvh - 20px);
        border-radius: 15px;
    }

    .empleados-modal-header[b-5yu9buvuzz] {
        padding: 20px 18px;
    }

    .empleados-form-grid[b-5yu9buvuzz] {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 18px;
    }

    .empleados-field.full[b-5yu9buvuzz] {
        grid-column: auto;
    }

    .empleados-modal[b-5yu9buvuzz]  .empleados-field input:not([type="checkbox"]),
    .empleados-modal[b-5yu9buvuzz]  .empleados-field select,
    .empleados-modal[b-5yu9buvuzz]  .empleados-field textarea {
        min-height: 48px;
        font-size: 16px;
    }

    .empleados-modal-footer[b-5yu9buvuzz] {
        padding: 16px 18px 20px;
    }

    .empleados-modal-footer button[b-5yu9buvuzz] {
        flex: 1;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 380px) {
    .empleados-stats[b-5yu9buvuzz] {
        grid-template-columns: 1fr;
    }

    .empleados-modal-footer[b-5yu9buvuzz] {
        flex-direction: column-reverse;
    }

    .empleados-modal-footer button[b-5yu9buvuzz] {
        width: 100%;
    }
}

/* MOVIMIENTO REDUCIDO */

@media (prefers-reduced-motion: reduce) {
    .empleados-page *[b-5yu9buvuzz],
    .empleados-page *[b-5yu9buvuzz]::before,
    .empleados-page *[b-5yu9buvuzz]::after {
        transition: none !important;
        animation: none !important;
    }
}
/* /Components/Pages/Encargos.razor.rz.scp.css */

/* ==========================================
   NEXOPOS - GESTIÓN DE ENCARGOS
   ========================================== */

.enc-page[b-ubqv8ys3j9] {
    color: #211c35;
    animation: enc-enter-b-ubqv8ys3j9 .35s ease both;
}

@keyframes enc-enter-b-ubqv8ys3j9 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.enc-header[b-ubqv8ys3j9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 25px;
}

.enc-eyebrow[b-ubqv8ys3j9] {
    color: var(--nexo-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.5px;
    margin-bottom: 9px;
}

.enc-header h1[b-ubqv8ys3j9] {
    font-size: 29px;
    font-weight: 850;
    letter-spacing: -1px;
    margin: 0;
}

.enc-header p[b-ubqv8ys3j9] {
    color: #9690a5;
    font-size: 13px;
    margin: 9px 0 0;
}

/* BOTONES PRINCIPALES */

.enc-primary[b-ubqv8ys3j9] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border: none;
    border-radius: 12px;
    background: var(--nexo-primary-gradient);
    color: white;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px var(--nexo-primary-shadow);
    transition: filter .2s ease, transform .2s ease;
}

.enc-primary:hover[b-ubqv8ys3j9] {
    color: white;
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.enc-primary:disabled[b-ubqv8ys3j9] {
    opacity: .55;
    cursor: wait;
    transform: none;
}

.enc-full[b-ubqv8ys3j9] {
    width: 100%;
}

/* TARJETAS DE ESTADÍSTICAS */

.enc-stats[b-ubqv8ys3j9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 23px;
}

.enc-stat[b-ubqv8ys3j9] {
    background: white;
    border: 1px solid #efedf5;
    border-radius: 18px;
    padding: 21px;
    box-shadow: 0 5px 24px #24203c06;
}

.enc-stat span[b-ubqv8ys3j9],
.enc-stat strong[b-ubqv8ys3j9],
.enc-stat small[b-ubqv8ys3j9] {
    display: block;
}

.enc-stat span[b-ubqv8ys3j9] {
    font-size: 12px;
    color: #918ba2;
}

.enc-stat strong[b-ubqv8ys3j9] {
    font-size: 30px;
    font-weight: 850;
    margin: 10px 0 7px;
}

.enc-stat small[b-ubqv8ys3j9] {
    color: #aaa4b6;
    font-size: 10px;
}

/* PANEL DE ÓRDENES */

.enc-panel[b-ubqv8ys3j9] {
    background: white;
    border: 1px solid #efedf5;
    border-radius: 19px;
    overflow: hidden;
}

.enc-toolbar[b-ubqv8ys3j9] {
    padding: 23px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.enc-toolbar h2[b-ubqv8ys3j9] {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
}

.enc-toolbar p[b-ubqv8ys3j9] {
    font-size: 11px;
    color: #a09aae;
    margin: 6px 0 0;
}

/* FILTROS */

.enc-filters[b-ubqv8ys3j9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.enc-filters input[b-ubqv8ys3j9],
.enc-filters select[b-ubqv8ys3j9] {
    background: #f7f6fb;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 11px 12px;
    outline: none;
    color: #514a61;
    font-size: 11px;
    max-width: 100%;
    transition: border-color .2s, box-shadow .2s;
}

.enc-filters input[b-ubqv8ys3j9] {
    width: 230px;
}

.enc-filters input:focus[b-ubqv8ys3j9],
.enc-filters select:focus[b-ubqv8ys3j9] {
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.enc-refresh[b-ubqv8ys3j9] {
    border: none;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 20px;
    cursor: pointer;
}

.enc-refresh:hover[b-ubqv8ys3j9] {
    background: var(--nexo-primary-muted);
}

/* TABLA */

.enc-table-wrap[b-ubqv8ys3j9] {
    width: 100%;
    overflow-x: auto;
}

.enc-table[b-ubqv8ys3j9] {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.enc-table th[b-ubqv8ys3j9] {
    text-align: left;
    background: var(--nexo-primary-soft);
    color: #9992aa;
    padding: 16px 18px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .4px;
}

.enc-table td[b-ubqv8ys3j9] {
    border-bottom: 1px solid #f3f1f7;
    padding: 17px 18px;
    font-size: 12px;
    color: #625b73;
    vertical-align: middle;
}

.enc-table tbody tr:hover[b-ubqv8ys3j9] {
    background: var(--nexo-primary-soft);
}

.enc-number[b-ubqv8ys3j9] {
    display: block;
    color: var(--nexo-primary);
    font-size: 12px;
    margin-bottom: 6px;
}

.enc-secondary[b-ubqv8ys3j9] {
    display: block;
    color: #9992aa;
    font-size: 11px;
    margin-top: 4px;
}

.enc-work-name[b-ubqv8ys3j9] {
    display: block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* FECHAS DE ENTREGA */

.enc-overdue[b-ubqv8ys3j9],
.enc-today[b-ubqv8ys3j9] {
    display: block;
    width: fit-content;
    margin-top: 7px;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
}

.enc-overdue[b-ubqv8ys3j9] {
    color: #e15d52;
    background: #fff0ed;
}

.enc-today[b-ubqv8ys3j9] {
    color: #a66d00;
    background: #fff5de;
}

/* ESTADOS DE TRABAJO */

.enc-status[b-ubqv8ys3j9] {
    display: inline-block;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.enc-status.pendiente[b-ubqv8ys3j9] {
    background: #fff5de;
    color: #b77b08;
}

.enc-status.enproceso[b-ubqv8ys3j9] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

.enc-status.terminado[b-ubqv8ys3j9] {
    background: #e2f8f1;
    color: #089e80;
}

.enc-status.despachado[b-ubqv8ys3j9] {
    background: #eef1f6;
    color: #52627a;
}

.enc-status.cancelado[b-ubqv8ys3j9] {
    background: #fff0ed;
    color: #d9564c;
}

/* BOTONES DE DETALLE Y COMPROBANTE */

.enc-detail-btn[b-ubqv8ys3j9] {
    display: inline-block;
    border: 0;
    border-radius: 9px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 11px;
    font-weight: 800;
    padding: 10px 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease;
}

.enc-detail-btn:hover[b-ubqv8ys3j9] {
    background: var(--nexo-primary-muted);
    color: var(--nexo-primary-hover);
}

.enc-table-footer[b-ubqv8ys3j9] {
    padding: 17px 23px;
    font-size: 11px;
    color: #aaa4b6;
}

.enc-empty[b-ubqv8ys3j9] {
    padding: 60px 20px;
    text-align: center;
    color: #9690a5;
    font-size: 12px;
}

.enc-empty h3[b-ubqv8ys3j9] {
    font-size: 17px;
    color: #302a43;
}

/* ALERTAS */

.enc-alert[b-ubqv8ys3j9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 17px;
    margin-bottom: 18px;
    border-radius: 11px;
    font-size: 12px;
}

.enc-alert.success[b-ubqv8ys3j9] {
    color: #128665;
    background: #e6faf2;
}

.enc-alert.error[b-ubqv8ys3j9] {
    color: #c94f43;
    background: #fff0ed;
}

.enc-alert button[b-ubqv8ys3j9] {
    background: none;
    border: none;
    color: inherit;
    font-size: 20px;
}

/* ==========================================
   PANEL LATERAL DE DETALLE
   ========================================== */

.enc-backdrop[b-ubqv8ys3j9] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #15102599;
    display: flex;
    justify-content: flex-end;
}

.enc-drawer[b-ubqv8ys3j9] {
    display: flex;
    flex-direction: column;
    width: min(100%, 550px);
    height: 100%;
    background: #fff;
    box-shadow: -15px 0 60px #15102525;
}

.enc-drawer-header[b-ubqv8ys3j9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 25px;
    border-bottom: 1px solid #efedf5;
}

.enc-drawer-header h2[b-ubqv8ys3j9] {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.enc-close[b-ubqv8ys3j9] {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    background: #f4f2f8;
    color: #817992;
    border: 0;
    border-radius: 10px;
    font-size: 23px;
}

.enc-drawer-body[b-ubqv8ys3j9] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.enc-drawer-body h3[b-ubqv8ys3j9] {
    font-size: 15px;
    font-weight: 850;
    margin: 27px 0 15px;
}

/* INFORMACIÓN DEL CLIENTE */

.enc-client-box[b-ubqv8ys3j9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: var(--nexo-primary-soft);
    border-radius: 14px;
    padding: 18px;
}

.enc-client-box strong[b-ubqv8ys3j9] {
    font-size: 17px;
}

.enc-client-box > span:not(.enc-status)[b-ubqv8ys3j9] {
    font-size: 12px;
    color: #8f89a0;
}

.enc-label[b-ubqv8ys3j9] {
    display: block;
    font-size: 10px !important;
    color: #9690a5 !important;
    font-weight: 850;
    letter-spacing: .7px;
    margin-bottom: 7px;
}

.enc-info-grid[b-ubqv8ys3j9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.enc-info-grid > div[b-ubqv8ys3j9] {
    border: 1px solid #efedf5;
    padding: 14px;
    border-radius: 12px;
}

.enc-info-grid strong[b-ubqv8ys3j9] {
    font-size: 12px;
}

/* TRABAJOS E HISTORIAL */

.enc-line-item[b-ubqv8ys3j9],
.enc-history-line[b-ubqv8ys3j9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid #f1eef6;
    font-size: 12px;
}

.enc-line-item strong[b-ubqv8ys3j9],
.enc-history-line strong[b-ubqv8ys3j9] {
    color: #302a43;
}

.enc-line-item small[b-ubqv8ys3j9],
.enc-history-line small[b-ubqv8ys3j9] {
    display: block;
    color: #9690a5;
    margin-top: 7px;
    line-height: 1.5;
}

/* OBSERVACIONES */

.enc-note[b-ubqv8ys3j9] {
    background: var(--nexo-primary-soft);
    padding: 15px;
    border-radius: 12px;
    font-size: 12px;
    margin-top: 17px;
}

.enc-note p[b-ubqv8ys3j9] {
    color: #817992;
    margin: 8px 0 0;
    line-height: 1.6;
}

/* RESUMEN DE PAGOS */

.enc-money-box[b-ubqv8ys3j9] {
    background: var(--nexo-primary-soft);
    padding: 18px;
    border-radius: 13px;
    margin-top: 23px;
}

.enc-money-box > div[b-ubqv8ys3j9] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    padding: 9px 0;
}

.enc-money-box span[b-ubqv8ys3j9] {
    color: #817992;
}

.enc-money-balance[b-ubqv8ys3j9] {
    border-top: 1px solid var(--nexo-primary-border);
    margin-top: 10px;
    padding-top: 17px !important;
}

.enc-money-balance strong[b-ubqv8ys3j9] {
    color: var(--nexo-primary);
    font-size: 18px;
}

/* ACCIONES DEL ENCARGO */

.enc-action-box[b-ubqv8ys3j9] {
    border: 1px solid #efedf5;
    padding: 18px;
    border-radius: 14px;
    margin-top: 20px;
}

.enc-action-box h3[b-ubqv8ys3j9] {
    margin: 0 0 17px;
}

.enc-form-grid[b-ubqv8ys3j9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.enc-field[b-ubqv8ys3j9] {
    margin-bottom: 15px;
    min-width: 0;
}

.enc-field label[b-ubqv8ys3j9] {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 750;
    color: #50495f;
}

.enc-field input[b-ubqv8ys3j9],
.enc-field select[b-ubqv8ys3j9] {
    width: 100%;
    min-width: 0;
    border: 1px solid #e8e4f0;
    border-radius: 10px;
    padding: 12px;
    font-size: 12px;
    color: #302a43;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.enc-field input:focus[b-ubqv8ys3j9],
.enc-field select:focus[b-ubqv8ys3j9] {
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.enc-hint[b-ubqv8ys3j9] {
    font-size: 12px;
    color: #9690a5;
    line-height: 1.6;
}

/* VERIFICACIÓN */

.enc-verification[b-ubqv8ys3j9] {
    margin-top: 28px;
    padding: 15px;
    background: var(--nexo-primary-soft);
    border-radius: 11px;
    font-size: 10px;
    color: #9690a5;
}

.enc-verification strong[b-ubqv8ys3j9] {
    display: block;
    color: var(--nexo-primary);
    overflow-wrap: anywhere;
    margin-top: 7px;
}

/* ==========================================
   CONTROL DE COSTOS DE MATERIALES
   ========================================== */

.enc-materiales[b-ubqv8ys3j9] {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid var(--nexo-primary-border);
    border-radius: 18px;
    background: linear-gradient(
        180deg,
        var(--nexo-primary-soft) 0%,
        #ffffff 100%
    );
}

.enc-materiales-header[b-ubqv8ys3j9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.enc-materiales-header h3[b-ubqv8ys3j9] {
    margin: 6px 0;
    font-size: 18px;
    font-weight: 750;
    color: #292344;
}

.enc-materiales-header p[b-ubqv8ys3j9] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #77718c;
}

/* MATERIALES Y MANO DE OBRA REGISTRADOS */

.enc-material-item[b-ubqv8ys3j9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #eeeaf6;
}

.enc-material-item > div:first-child[b-ubqv8ys3j9] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.enc-material-item strong[b-ubqv8ys3j9] {
    font-size: 14px;
    color: #30284c;
    overflow-wrap: anywhere;
}

.enc-material-item small[b-ubqv8ys3j9] {
    display: block;
    font-size: 12px;
    color: #817b92;
    overflow-wrap: anywhere;
}

.enc-material-actions[b-ubqv8ys3j9] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    flex-shrink: 0;
}

.enc-material-actions > strong[b-ubqv8ys3j9] {
    font-size: 14px;
    font-weight: 800;
    color: var(--nexo-primary);
    white-space: nowrap;
}

.enc-material-actions button[b-ubqv8ys3j9] {
    padding: 6px 10px;
    border: 1px solid var(--nexo-primary-border);
    border-radius: 8px;
    background: #fff;
    color: var(--nexo-primary);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: background .2s ease;
}

.enc-material-actions button:hover:not(:disabled)[b-ubqv8ys3j9] {
    background: var(--nexo-primary-light);
}

.enc-material-actions button:disabled[b-ubqv8ys3j9] {
    opacity: .55;
    cursor: not-allowed;
}

/* RESUMEN FINANCIERO */

.enc-material-resumen[b-ubqv8ys3j9] {
    margin: 20px 0 12px;
    padding: 16px;
    border: 1px solid var(--nexo-primary-border);
    border-radius: 14px;
    background: #fff;
}

.enc-material-resumen > div[b-ubqv8ys3j9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 13px;
}

.enc-material-resumen span[b-ubqv8ys3j9] {
    color: #756d88;
}

.enc-material-resumen strong[b-ubqv8ys3j9] {
    color: #30284c;
    font-size: 14px;
    font-weight: 750;
    text-align: right;
    white-space: nowrap;
}

.enc-material-margen[b-ubqv8ys3j9] {
    margin-top: 8px;
    padding-top: 15px !important;
    border-top: 1px dashed var(--nexo-primary-border);
}

.enc-material-margen span[b-ubqv8ys3j9] {
    font-weight: 750;
    color: #30284c;
}

.enc-material-margen strong[b-ubqv8ys3j9] {
    color: #168778;
    font-size: 18px;
    font-weight: 850;
}

/* FORMULARIO DE MATERIALES Y MANO DE OBRA */

.enc-materiales .enc-action-box[b-ubqv8ys3j9] {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--nexo-primary-border);
    border-radius: 14px;
    background: #ffffff;
}

.enc-materiales .enc-action-box h3[b-ubqv8ys3j9] {
    margin: 0 0 16px;
    color: #30284c;
    font-size: 16px;
}

.enc-materiales .enc-field input[b-ubqv8ys3j9] {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.enc-materiales .enc-field input:focus[b-ubqv8ys3j9] {
    outline: none;
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.enc-materiales .enc-hint[b-ubqv8ys3j9] {
    font-size: 12px;
    line-height: 1.6;
    color: #817b92;
}

/* ==========================================
   DISEÑO RESPONSIVE
   ========================================== */

@media (max-width: 1100px) {
    .enc-stats[b-ubqv8ys3j9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .enc-header[b-ubqv8ys3j9] {
        flex-direction: column;
        align-items: stretch;
    }

    .enc-header h1[b-ubqv8ys3j9] {
        font-size: 24px;
    }

    .enc-stats[b-ubqv8ys3j9] {
        gap: 10px;
    }

    .enc-stat[b-ubqv8ys3j9] {
        padding: 16px;
    }

    .enc-stat strong[b-ubqv8ys3j9] {
        font-size: 25px;
    }

    .enc-toolbar[b-ubqv8ys3j9] {
        padding: 17px;
    }

    .enc-filters[b-ubqv8ys3j9],
    .enc-filters input[b-ubqv8ys3j9],
    .enc-filters select[b-ubqv8ys3j9] {
        width: 100%;
    }

    .enc-drawer-header[b-ubqv8ys3j9],
    .enc-drawer-body[b-ubqv8ys3j9] {
        padding: 17px;
    }

    .enc-form-grid[b-ubqv8ys3j9] {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 640px) {
    .enc-materiales[b-ubqv8ys3j9] {
        padding: 14px;
        border-radius: 14px;
    }

    .enc-materiales-header h3[b-ubqv8ys3j9] {
        font-size: 16px;
    }

    .enc-material-item[b-ubqv8ys3j9] {
        gap: 8px;
    }

    .enc-material-resumen[b-ubqv8ys3j9] {
        padding: 12px;
    }

    .enc-material-resumen > div[b-ubqv8ys3j9] {
        align-items: flex-start;
    }

    .enc-material-resumen span[b-ubqv8ys3j9] {
        max-width: 55%;
    }

    .enc-material-resumen strong[b-ubqv8ys3j9] {
        white-space: normal;
    }

    .enc-material-margen strong[b-ubqv8ys3j9] {
        font-size: 16px;
    }

    .enc-materiales .enc-action-box[b-ubqv8ys3j9] {
        padding: 12px;
    }
}

/* ACCESIBILIDAD */

.enc-primary:focus-visible[b-ubqv8ys3j9],
.enc-detail-btn:focus-visible[b-ubqv8ys3j9],
.enc-refresh:focus-visible[b-ubqv8ys3j9],
.enc-material-actions button:focus-visible[b-ubqv8ys3j9] {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .enc-page[b-ubqv8ys3j9] {
        animation: none;
    }

    .enc-primary[b-ubqv8ys3j9],
    .enc-detail-btn[b-ubqv8ys3j9] {
        transition: none;
    }
}
/* /Components/Pages/Facturacion.razor.rz.scp.css */

.fact-page[b-8u4p1gqga7] {
    color: #211c35;
    animation: fact-enter-b-8u4p1gqga7 .4s ease both;
}

@keyframes fact-enter-b-8u4p1gqga7 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fact-header[b-8u4p1gqga7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 25px;
}

.fact-eyebrow[b-8u4p1gqga7] {
    color: var(--nexo-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.5px;
    margin-bottom: 9px;
}

.fact-header h1[b-8u4p1gqga7] {
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -1px;
    margin: 0;
}

.fact-header p[b-8u4p1gqga7] {
    color: #9690a5;
    font-size: 13px;
    margin: 9px 0 0;
}

.fact-header-tag[b-8u4p1gqga7] {
    color: var(--nexo-primary);
    background: var(--nexo-primary-light);
    border-radius: 10px;
    padding: 11px 15px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.fact-layout[b-8u4p1gqga7] {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
    align-items: start;
    gap: 22px;
}

.fact-main[b-8u4p1gqga7] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.fact-card[b-8u4p1gqga7] {
    background: #fff;
    border: 1px solid #efedf5;
    border-radius: 19px;
    padding: 24px;
    box-shadow: 0 5px 24px #24203c06;
}

.fact-card-heading[b-8u4p1gqga7] {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
}

.fact-section-icon[b-8u4p1gqga7] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 850;
}

.fact-section-heading[b-8u4p1gqga7] {
    flex: 1;
}

.fact-card-heading h2[b-8u4p1gqga7] {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.fact-card-heading p[b-8u4p1gqga7] {
    color: #a09aae;
    font-size: 11px;
    margin: 6px 0 0;
}

.fact-field[b-8u4p1gqga7] {
    margin-bottom: 17px;
    min-width: 0;
}

.fact-field label[b-8u4p1gqga7] {
    display: block;
    margin-bottom: 9px;
    color: #50495f;
    font-size: 12px;
    font-weight: 750;
}

.fact-field input[b-8u4p1gqga7],
.fact-field select[b-8u4p1gqga7],
.fact-field textarea[b-8u4p1gqga7] {
    width: 100%;
    min-width: 0;
    border: 1px solid #e8e4f0;
    background: #fff;
    border-radius: 11px;
    padding: 12px 13px;
    color: #302a43;
    font-size: 13px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.fact-field input:focus[b-8u4p1gqga7],
.fact-field select:focus[b-8u4p1gqga7],
.fact-field textarea:focus[b-8u4p1gqga7] {
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.fact-field textarea[b-8u4p1gqga7] {
    resize: vertical;
}

.fact-two-cols[b-8u4p1gqga7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.fact-help[b-8u4p1gqga7] {
    font-size: 11px;
    color: #9690a5;
}

.fact-help a[b-8u4p1gqga7] {
    color: var(--nexo-primary);
    font-weight: 750;
    text-decoration: none;
}

.fact-muted[b-8u4p1gqga7] {
    color: #9690a5;
    font-size: 12px;
}

.fact-add[b-8u4p1gqga7] {
    margin-left: auto;
    border: 0;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.fact-work[b-8u4p1gqga7] {
    background: var(--nexo-primary-soft);
    border: 1px solid var(--nexo-primary-border);
    border-radius: 14px;
    padding: 19px;
    margin-bottom: 15px;
}

.fact-work-title[b-8u4p1gqga7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 19px;
}

.fact-work-title strong[b-8u4p1gqga7] {
    font-size: 12px;
    color: var(--nexo-primary);
}

.fact-work-title button[b-8u4p1gqga7] {
    border: 0;
    background: #fff0ed;
    color: #dc6658;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 11px;
    font-weight: 750;
}

.fact-work-subtotal[b-8u4p1gqga7] {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eae5f5;
    padding-top: 14px;
    color: #9690a5;
    font-size: 12px;
}

.fact-work-subtotal strong[b-8u4p1gqga7] {
    color: #302a43;
}

.fact-sidebar[b-8u4p1gqga7] {
    min-width: 0;
}

.fact-summary[b-8u4p1gqga7] {
    position: sticky;
    top: 20px;
}

.fact-summary-row[b-8u4p1gqga7] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    margin: 16px 0;
}

.fact-summary-row span[b-8u4p1gqga7] {
    color: #9690a5;
}

.fact-summary-row strong[b-8u4p1gqga7] {
    color: #302a43;
}

.fact-divider[b-8u4p1gqga7] {
    height: 1px;
    background: #f0edf6;
    margin: 22px 0;
}

.fact-total-label[b-8u4p1gqga7] {
    color: #9690a5;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
}

.fact-total[b-8u4p1gqga7] {
    font-size: 32px;
    font-weight: 850;
    letter-spacing: -1.3px;
    margin: 9px 0 24px;
}

.fact-payment-options[b-8u4p1gqga7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.fact-payment-options button[b-8u4p1gqga7] {
    border: 1px solid #e8e4f0;
    background: white;
    color: #746d86;
    padding: 12px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 750;
    transition: all .2s;
}

.fact-payment-options button:hover[b-8u4p1gqga7] {
    border-color: var(--nexo-primary);
}

.fact-payment-options button.selected[b-8u4p1gqga7] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    border-color: var(--nexo-primary);
}

.fact-balance[b-8u4p1gqga7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 19px;
    background: var(--nexo-primary-light);
    border-radius: 13px;
    margin: 20px 0;
}

.fact-balance span[b-8u4p1gqga7] {
    font-size: 11px;
    color: var(--nexo-primary-hover);
    font-weight: 750;
}

.fact-balance strong[b-8u4p1gqga7] {
    font-size: 25px;
    color: var(--nexo-primary);
    font-weight: 850;
}

.fact-primary[b-8u4p1gqga7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--nexo-primary-gradient);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 9px 23px var(--nexo-primary-shadow);
    transition: transform .2s, box-shadow .2s;
}

.fact-primary:hover:not(:disabled)[b-8u4p1gqga7] {
    transform: translateY(-2px);
    box-shadow: 0 13px 27px var(--nexo-primary-shadow);
    color: #fff;
}

.fact-primary:disabled[b-8u4p1gqga7] {
    opacity: .6;
    cursor: wait;
}

.fact-submit[b-8u4p1gqga7] {
    width: 100%;
}

.fact-footnote[b-8u4p1gqga7] {
    text-align: center;
    color: #aaa4b6;
    font-size: 10px;
    line-height: 1.6;
    margin: 14px 0 0;
}

.fact-alert[b-8u4p1gqga7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 12px;
}

.fact-alert.error[b-8u4p1gqga7] {
    background: #fff0ed;
    color: #c94f43;
}

.fact-alert button[b-8u4p1gqga7] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
}

.fact-success[b-8u4p1gqga7] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: white;
    border: 1px solid #e5f5ef;
    border-radius: 20px;
    padding: 30px;
}

.fact-success-icon[b-8u4p1gqga7] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    background: #e5faf2;
    color: #159f7b;
    border-radius: 16px;
    font-size: 28px;
    font-weight: 800;
}

.fact-success h2[b-8u4p1gqga7] {
    font-size: 26px;
    font-weight: 850;
    margin: 0 0 10px;
}

.fact-success p[b-8u4p1gqga7] {
    color: #9690a5;
    font-size: 13px;
    line-height: 1.6;
}

.fact-success-details[b-8u4p1gqga7] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 22px 0;
    font-size: 12px;
    color: #817992;
}

.fact-success-details strong[b-8u4p1gqga7] {
    color: #302a43;
}

.fact-success-actions[b-8u4p1gqga7] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fact-secondary[b-8u4p1gqga7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    border-radius: 12px;
    padding: 13px 18px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.fact-secondary:hover[b-8u4p1gqga7] {
    color: var(--nexo-primary-hover);
}

@media (max-width: 1100px) {
    .fact-layout[b-8u4p1gqga7] {
        grid-template-columns: 1fr;
    }

    .fact-summary[b-8u4p1gqga7] {
        position: static;
    }
}

@media (max-width: 650px) {
    .fact-header[b-8u4p1gqga7] {
        flex-direction: column;
        align-items: flex-start;
    }

    .fact-header h1[b-8u4p1gqga7] {
        font-size: 24px;
    }

    .fact-card[b-8u4p1gqga7] {
        padding: 17px;
    }

    .fact-card-heading[b-8u4p1gqga7] {
        gap: 10px;
    }

    .fact-card-heading h2[b-8u4p1gqga7] {
        font-size: 14px;
    }

    .fact-work[b-8u4p1gqga7] {
        padding: 13px;
    }

    .fact-two-cols[b-8u4p1gqga7] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .fact-success[b-8u4p1gqga7] {
        flex-direction: column;
        padding: 20px;
    }

    .fact-total[b-8u4p1gqga7] {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fact-page[b-8u4p1gqga7] {
        animation: none;
    }
}

/* ==========================================
   BUSCADOR INTELIGENTE DE CLIENTES
   ========================================== */

.fact-client-search-wrapper[b-8u4p1gqga7] {
    position: relative;
    width: 100%;
}

.fact-client-search-box[b-8u4p1gqga7] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 0 13px;
    background: #fff;
    border: 1px solid #e8e4f0;
    border-radius: 12px;
    transition: border-color .2s, box-shadow .2s;
}

.fact-client-search-box:focus-within[b-8u4p1gqga7] {
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.fact-client-search-box svg[b-8u4p1gqga7] {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    color: #938aa9;
}

.fact-field .fact-client-search-box input[b-8u4p1gqga7] {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    box-shadow: none;
    outline: none;
    padding: 14px 0;
    background: transparent;
    font-size: 13px;
}

.fact-field .fact-client-search-box input:focus[b-8u4p1gqga7] {
    border: none;
    box-shadow: none;
}

.fact-client-results[b-8u4p1gqga7] {
    margin-top: 7px;
    background: #fff;
    border: 1px solid #eae5f5;
    border-radius: 13px;
    box-shadow: 0 12px 30px #211c3512;
    overflow: hidden;
}

.fact-client-result[b-8u4p1gqga7] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 13px;
    border: none;
    border-bottom: 1px solid #f2eff8;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}

.fact-client-result:last-child[b-8u4p1gqga7] {
    border-bottom: none;
}

.fact-client-result:hover[b-8u4p1gqga7],
.fact-client-result:focus-visible[b-8u4p1gqga7] {
    background: var(--nexo-primary-soft);
    outline: none;
}

.fact-client-result > svg[b-8u4p1gqga7] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-left: auto;
    color: #a39bb7;
}

.fact-client-avatar[b-8u4p1gqga7] {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    min-width: 39px;
    border-radius: 12px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 12px;
    font-weight: 850;
}

.fact-client-info[b-8u4p1gqga7] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.fact-client-info strong[b-8u4p1gqga7] {
    color: #302a43;
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.fact-client-info span[b-8u4p1gqga7] {
    color: #938aa9;
    font-size: 11px;
}

.fact-client-selected[b-8u4p1gqga7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--nexo-primary-border);
    border-radius: 12px;
    background: var(--nexo-primary-soft);
}

.fact-client-change[b-8u4p1gqga7] {
    flex-shrink: 0;
    margin-left: auto;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.fact-client-change:hover[b-8u4p1gqga7] {
    background: var(--nexo-primary-muted);
}

.fact-client-hint[b-8u4p1gqga7] {
    margin-top: 9px;
    color: #a09aae;
    font-size: 11px;
}

.fact-client-empty[b-8u4p1gqga7] {
    padding: 17px;
    color: #817992;
    font-size: 12px;
    line-height: 1.7;
}

.fact-client-empty a[b-8u4p1gqga7] {
    display: block;
    margin-top: 5px;
    color: var(--nexo-primary);
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 650px) {
    .fact-client-search-box[b-8u4p1gqga7] {
        min-height: 48px;
    }

    .fact-client-result[b-8u4p1gqga7] {
        min-height: 61px;
    }

    .fact-client-selected[b-8u4p1gqga7] {
        flex-wrap: wrap;
    }

    .fact-client-info[b-8u4p1gqga7] {
        min-width: 100px;
    }
}

/* ==========================================
   ACCESIBILIDAD Y ESTADOS INTERACTIVOS
   ========================================== */

.fact-add:hover[b-8u4p1gqga7],
.fact-client-change:hover[b-8u4p1gqga7] {
    background: var(--nexo-primary-muted);
    color: var(--nexo-primary-hover);
}

.fact-primary:hover:not(:disabled)[b-8u4p1gqga7] {
    background: var(--nexo-primary-hover);
}

.fact-payment-options button:focus-visible[b-8u4p1gqga7],
.fact-add:focus-visible[b-8u4p1gqga7],
.fact-primary:focus-visible[b-8u4p1gqga7],
.fact-secondary:focus-visible[b-8u4p1gqga7],
.fact-client-change:focus-visible[b-8u4p1gqga7] {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 3px;
}

.fact-client-result:focus-visible[b-8u4p1gqga7] {
    outline: 2px solid var(--nexo-primary);
    outline-offset: -2px;
}
/* /Components/Pages/Gastos.razor.rz.scp.css */

/* ============================================
   NEXOPOS - GESTIÓN DE GASTOS
   TEMA DINÁMICO
   ============================================ */

.gastos-page[b-95fqneva2k] {
    --gastos-primary: var(--nexo-primary);
    --gastos-primary-dark: var(--nexo-primary-hover);
    --gastos-border: #e9e6f2;
    --gastos-muted: #918ba3;
    --gastos-text: #242039;

    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 26px;
    color: var(--gastos-text);
    box-sizing: border-box;
}

.gastos-page *[b-95fqneva2k],
.gastos-page *[b-95fqneva2k]::before,
.gastos-page *[b-95fqneva2k]::after {
    box-sizing: border-box;
}

/* ============================================
   ENCABEZADO
   ============================================ */

.gastos-header[b-95fqneva2k],
.gastos-panel-header[b-95fqneva2k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.gastos-header[b-95fqneva2k] {
    margin-bottom: 26px;
}

.gastos-eyebrow[b-95fqneva2k] {
    display: block;
    margin-bottom: 9px;
    color: var(--gastos-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.8px;
}

.gastos-header h1[b-95fqneva2k] {
    margin: 0 0 9px;
    color: #211c35;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.7px;
}

.gastos-header p[b-95fqneva2k],
.gastos-panel-header p[b-95fqneva2k] {
    margin: 0;
    color: var(--gastos-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* ============================================
   BOTONES
   ============================================ */

.gastos-btn-primary[b-95fqneva2k],
.gastos-btn-secondary[b-95fqneva2k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
    cursor: pointer;
    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.gastos-btn-primary[b-95fqneva2k] {
    border: 1px solid var(--gastos-primary);
    background: var(--nexo-primary-gradient);
    color: #fff;
    box-shadow: 0 8px 20px var(--nexo-primary-shadow);
}

.gastos-btn-primary:hover:not(:disabled)[b-95fqneva2k] {
    background: var(--nexo-primary-gradient);
    filter: brightness(.94);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 11px 25px var(--nexo-primary-shadow);
}

.gastos-btn-secondary[b-95fqneva2k] {
    border: 1px solid var(--gastos-border);
    background: #fff;
    color: #514b66;
}

.gastos-btn-secondary:hover:not(:disabled)[b-95fqneva2k] {
    background: var(--nexo-primary-soft);
    border-color: var(--nexo-primary-border);
}

.gastos-btn-primary:disabled[b-95fqneva2k],
.gastos-btn-secondary:disabled[b-95fqneva2k] {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.gastos-btn-primary:focus-visible[b-95fqneva2k],
.gastos-btn-secondary:focus-visible[b-95fqneva2k],
.gastos-close:focus-visible[b-95fqneva2k] {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 2px;
}

/* ============================================
   TARJETAS DE RESUMEN
   ============================================ */

.gastos-resumen[b-95fqneva2k] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.gastos-kpi[b-95fqneva2k] {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--gastos-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(38, 30, 91, .035);
    transition: transform .2s ease, box-shadow .2s ease;
}

.gastos-kpi:hover[b-95fqneva2k] {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(38, 30, 91, .07);
}

.gastos-kpi > span[b-95fqneva2k] {
    color: #89839a;
    font-size: 12px;
    font-weight: 600;
}

.gastos-kpi strong[b-95fqneva2k] {
    color: #211c35;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 850;
    letter-spacing: -.6px;
    overflow-wrap: anywhere;
}

.gastos-kpi small[b-95fqneva2k] {
    color: #a29caf;
    font-size: 11px;
    line-height: 1.5;
}

/* Resaltado del indicador de Caja */

.gastos-kpi:nth-child(2) strong[b-95fqneva2k] {
    color: var(--nexo-primary);
}

/* ============================================
   PANELES
   ============================================ */

.gastos-panel[b-95fqneva2k] {
    min-width: 0;
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid var(--gastos-border);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(38, 30, 91, .025);
}

.gastos-panel-header[b-95fqneva2k] {
    margin-bottom: 23px;
}

.gastos-panel-header h2[b-95fqneva2k] {
    margin: 0 0 7px;
    color: #28233e;
    font-size: 18px;
    font-weight: 800;
}

/* ============================================
   CAMPOS Y FORMULARIOS
   ============================================ */

.gastos-field[b-95fqneva2k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.gastos-field label[b-95fqneva2k] {
    display: block;
    margin: 0;
    color: #5c5670;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
}

/*
   Compatible con controles HTML y Blazor:
   InputText, InputSelect, InputNumber,
   InputDate e InputTextArea.
*/

.gastos-page input.gastos-input[b-95fqneva2k],
.gastos-page select.gastos-input[b-95fqneva2k],
.gastos-page textarea.gastos-input[b-95fqneva2k],
.gastos-page[b-95fqneva2k]  input.gastos-input,
.gastos-page[b-95fqneva2k]  select.gastos-input,
.gastos-page[b-95fqneva2k]  textarea.gastos-input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #e2e0eb;
    border-radius: 12px;
    background: #f8f7fc;
    color: #302a43;
    font-family: inherit;
    font-size: 13px;
    font-weight: 450;
    line-height: 1.5;
    outline: none;
    box-shadow: none;
    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.gastos-page input.gastos-input[b-95fqneva2k]::placeholder,
.gastos-page textarea.gastos-input[b-95fqneva2k]::placeholder,
.gastos-page[b-95fqneva2k]  input.gastos-input::placeholder,
.gastos-page[b-95fqneva2k]  textarea.gastos-input::placeholder {
    color: #a19bad;
    opacity: 1;
}

.gastos-page input.gastos-input:hover[b-95fqneva2k],
.gastos-page select.gastos-input:hover[b-95fqneva2k],
.gastos-page textarea.gastos-input:hover[b-95fqneva2k],
.gastos-page[b-95fqneva2k]  input.gastos-input:hover,
.gastos-page[b-95fqneva2k]  select.gastos-input:hover,
.gastos-page[b-95fqneva2k]  textarea.gastos-input:hover {
    border-color: var(--nexo-primary-border);
}

.gastos-page input.gastos-input:focus[b-95fqneva2k],
.gastos-page select.gastos-input:focus[b-95fqneva2k],
.gastos-page textarea.gastos-input:focus[b-95fqneva2k],
.gastos-page[b-95fqneva2k]  input.gastos-input:focus,
.gastos-page[b-95fqneva2k]  select.gastos-input:focus,
.gastos-page[b-95fqneva2k]  textarea.gastos-input:focus {
    border-color: var(--gastos-primary);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

/* SELECTORES */

.gastos-page select.gastos-input[b-95fqneva2k],
.gastos-page[b-95fqneva2k]  select.gastos-input {
    padding-right: 34px;
    cursor: pointer;
}

/* CAMPOS DE FECHA */

.gastos-page input[type="date"].gastos-input[b-95fqneva2k],
.gastos-page[b-95fqneva2k]  input[type="date"].gastos-input {
    min-width: 0;
    color-scheme: light;
    cursor: pointer;
}

.gastos-page input[type="date"].gastos-input[b-95fqneva2k]::-webkit-calendar-picker-indicator,
.gastos-page[b-95fqneva2k]  input[type="date"].gastos-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .65;
}

/* CAMPOS NUMÉRICOS */

.gastos-page input[type="number"].gastos-input[b-95fqneva2k],
.gastos-page[b-95fqneva2k]  input[type="number"].gastos-input {
    font-variant-numeric: tabular-nums;
}

/* ÁREAS DE TEXTO */

.gastos-page textarea.gastos-input[b-95fqneva2k],
.gastos-page textarea.gastos-textarea[b-95fqneva2k],
.gastos-page[b-95fqneva2k]  textarea.gastos-input,
.gastos-page[b-95fqneva2k]  textarea.gastos-textarea {
    min-height: 100px;
    padding: 13px 14px;
    resize: vertical;
    line-height: 1.6;
}

/* VALIDACIONES DE BLAZOR */

.gastos-page input.gastos-input.invalid[b-95fqneva2k],
.gastos-page select.gastos-input.invalid[b-95fqneva2k],
.gastos-page textarea.gastos-input.invalid[b-95fqneva2k],
.gastos-page[b-95fqneva2k]  input.gastos-input.invalid,
.gastos-page[b-95fqneva2k]  select.gastos-input.invalid,
.gastos-page[b-95fqneva2k]  textarea.gastos-input.invalid {
    border-color: #e76d77;
    background: #fffafa;
}

.gastos-page .validation-message[b-95fqneva2k],
.gastos-page[b-95fqneva2k]  .validation-message {
    margin-top: 4px;
    color: #d34755;
    font-size: 11px;
}

/* ============================================
   FILTROS DEL HISTORIAL
   ============================================ */

.gastos-filtros[b-95fqneva2k] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 13px;
    margin-bottom: 23px;
}

.gastos-filtros .gastos-field[b-95fqneva2k] {
    flex: 1 1 160px;
}

.gastos-filtros .gastos-btn-secondary[b-95fqneva2k] {
    flex-shrink: 0;
    min-height: 46px;
}

/* ============================================
   TABLA DE GASTOS
   ============================================ */

.gastos-table-wrap[b-95fqneva2k] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gastos-table[b-95fqneva2k] {
    width: 100%;
    min-width: 730px;
    border-collapse: collapse;
}

.gastos-table th[b-95fqneva2k] {
    padding: 15px 12px;
    background: var(--nexo-primary-soft);
    color: #89829b;
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.gastos-table td[b-95fqneva2k] {
    padding: 17px 12px;
    border-bottom: 1px solid #f1eef7;
    color: #5f596e;
    font-size: 12px;
    vertical-align: middle;
}

.gastos-table td strong[b-95fqneva2k] {
    display: block;
    color: #302a43;
    font-weight: 750;
}

.gastos-table td small[b-95fqneva2k] {
    display: block;
    margin-top: 5px;
    color: #9b95aa;
    font-size: 10px;
}

.gastos-table tbody tr[b-95fqneva2k] {
    transition: background .2s ease;
}

.gastos-table tbody tr:hover[b-95fqneva2k] {
    background: var(--nexo-primary-soft);
}

.gastos-right[b-95fqneva2k] {
    text-align: right !important;
}

.gastos-amount[b-95fqneva2k] {
    color: #302a43 !important;
    font-weight: 800;
    white-space: nowrap;
}

/* ============================================
   ETIQUETAS DE ORIGEN
   ============================================ */

.gastos-chip[b-95fqneva2k] {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

/* Caja: color principal del negocio */

.gastos-chip.caja[b-95fqneva2k] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

/* Externo: verde funcional */

.gastos-chip.externo[b-95fqneva2k] {
    background: #e7f8f0;
    color: #15936c;
}

/* ============================================
   ESTADOS VACÍOS
   ============================================ */

.gastos-empty[b-95fqneva2k] {
    padding: 52px 18px;
    color: #918ba3;
    font-size: 13px;
    text-align: center;
}

.gastos-empty-icon[b-95fqneva2k] {
    display: block;
    margin-bottom: 12px;
    font-size: 34px;
}

.gastos-empty h3[b-95fqneva2k] {
    margin: 8px 0;
    color: #302a43;
    font-size: 17px;
}

/* ============================================
   CATEGORÍAS DE GASTOS
   ============================================ */

.gastos-categoria-form[b-95fqneva2k] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
}

.gastos-categoria-form .gastos-input[b-95fqneva2k] {
    flex: 1;
    min-width: 0;
}

.gastos-categorias[b-95fqneva2k] {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.gastos-category-chip[b-95fqneva2k] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 13px;
    border: 1px solid var(--nexo-primary-border);
    border-radius: 20px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 11px;
    font-weight: 750;
}

.gastos-category-chip small[b-95fqneva2k] {
    opacity: .7;
}

/* ============================================
   ALERTAS Y MENSAJES
   ============================================ */

.gastos-alert[b-95fqneva2k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.6;
}

/* ÉXITO */

.gastos-alert.success[b-95fqneva2k] {
    border: 1px solid #c5e9d5;
    background: #eaf8f0;
    color: #146b45;
}

/* ERROR */

.gastos-alert.error[b-95fqneva2k] {
    border: 1px solid #ffd2d2;
    background: #fff0f0;
    color: #ae3030;
}

.gastos-alert button[b-95fqneva2k] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
}

/* MENSAJES INFORMATIVOS */

.gastos-info[b-95fqneva2k] {
    padding: 13px 15px;
    border: 1px solid var(--nexo-primary-border);
    border-radius: 11px;
    background: var(--nexo-primary-soft);
    color: var(--nexo-primary-hover);
    font-size: 12px;
    line-height: 1.7;
}

/* ============================================
   MODAL DE NUEVO GASTO
   ============================================ */

.gastos-modal-backdrop[b-95fqneva2k] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 18, 42, .62);
    backdrop-filter: blur(4px);
}

.gastos-modal[b-95fqneva2k] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    max-height: min(92vh, 850px);
    max-height: min(92dvh, 850px);
    overflow: hidden;
    border: 1px solid #eeebf5;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 25px 85px rgba(15, 12, 40, .24);
}

/* ENCABEZADO FIJO DEL MODAL */

.gastos-modal-header[b-95fqneva2k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-shrink: 0;
    padding: 23px 25px;
    border-bottom: 1px solid #f0edf6;
    background: #fff;
}

.gastos-modal-header h2[b-95fqneva2k] {
    margin: 0 0 7px;
    color: #252039;
    font-size: 21px;
    font-weight: 800;
}

.gastos-modal-header p[b-95fqneva2k] {
    margin: 0;
    color: #9690a6;
    font-size: 12px;
    line-height: 1.5;
}

.gastos-close[b-95fqneva2k] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #f4f3f8;
    color: #726b83;
    font-family: inherit;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.gastos-close:hover[b-95fqneva2k] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

/*
   EditForm genera un elemento <form>.
   Se convierte en contenedor flexible para
   permitir desplazamiento interno del modal.
*/

.gastos-modal[b-95fqneva2k]  form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* CUERPO DESPLAZABLE */

.gastos-modal-body[b-95fqneva2k] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 25px;
    background: #fff;
}

/* DISTRIBUCIÓN DE CAMPOS */

.gastos-form-grid[b-95fqneva2k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

/* PIE FIJO DEL MODAL */

.gastos-modal-footer[b-95fqneva2k] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
    padding: 18px 25px;
    border-top: 1px solid #f0edf6;
    background: #fff;
}

.gastos-modal-footer .gastos-btn-primary[b-95fqneva2k] {
    min-width: 140px;
}

/* ============================================
   PANTALLAS MEDIANAS
   ============================================ */

@media (max-width: 1050px) {
    .gastos-resumen[b-95fqneva2k] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================
   CELULARES
   ============================================ */

@media (max-width: 600px) {
    .gastos-page[b-95fqneva2k] {
        padding: 14px 0;
    }

    .gastos-header[b-95fqneva2k] {
        align-items: stretch;
        gap: 16px;
        margin-bottom: 22px;
    }

    .gastos-header .gastos-btn-primary[b-95fqneva2k] {
        width: 100%;
    }

    .gastos-header h1[b-95fqneva2k] {
        font-size: 26px;
    }

    .gastos-resumen[b-95fqneva2k] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 18px;
    }

    .gastos-kpi[b-95fqneva2k] {
        gap: 9px;
        padding: 15px;
        border-radius: 15px;
    }

    .gastos-kpi strong[b-95fqneva2k] {
        font-size: 19px;
    }

    .gastos-kpi > span[b-95fqneva2k] {
        font-size: 11px;
    }

    .gastos-panel[b-95fqneva2k] {
        padding: 17px;
        border-radius: 16px;
    }

    .gastos-panel-header h2[b-95fqneva2k] {
        font-size: 16px;
    }

    .gastos-filtros[b-95fqneva2k] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .gastos-filtros .gastos-field:nth-child(3)[b-95fqneva2k],
    .gastos-filtros .gastos-btn-secondary[b-95fqneva2k] {
        grid-column: 1 / -1;
    }

    .gastos-filtros .gastos-btn-secondary[b-95fqneva2k] {
        width: 100%;
    }

    .gastos-categoria-form[b-95fqneva2k] {
        flex-direction: column;
    }

    .gastos-categoria-form .gastos-btn-secondary[b-95fqneva2k] {
        width: 100%;
    }

    .gastos-modal-backdrop[b-95fqneva2k] {
        align-items: center;
        padding: 10px;
    }

    .gastos-modal[b-95fqneva2k] {
        max-height: 94vh;
        max-height: 94dvh;
        border-radius: 17px;
    }

    .gastos-modal-header[b-95fqneva2k] {
        padding: 18px;
    }

    .gastos-modal-header h2[b-95fqneva2k] {
        font-size: 18px;
    }

    .gastos-modal-body[b-95fqneva2k] {
        gap: 16px;
        padding: 18px;
    }

    .gastos-modal-footer[b-95fqneva2k] {
        padding: 15px 18px;
    }

    .gastos-modal-footer button[b-95fqneva2k] {
        flex: 1;
        min-width: 0;
    }

    .gastos-form-grid[b-95fqneva2k] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gastos-page input.gastos-input[b-95fqneva2k],
    .gastos-page select.gastos-input[b-95fqneva2k],
    .gastos-page textarea.gastos-input[b-95fqneva2k],
    .gastos-page[b-95fqneva2k]  input.gastos-input,
    .gastos-page[b-95fqneva2k]  select.gastos-input,
    .gastos-page[b-95fqneva2k]  textarea.gastos-input {
        min-height: 47px;
        font-size: 16px;
    }
}

/* ============================================
   CELULARES MUY PEQUEÑOS
   ============================================ */

@media (max-width: 360px) {
    .gastos-page[b-95fqneva2k] {
        padding: 10px 0;
    }

    .gastos-kpi[b-95fqneva2k] {
        padding: 12px;
    }

    .gastos-kpi strong[b-95fqneva2k] {
        font-size: 17px;
    }

    .gastos-modal-backdrop[b-95fqneva2k] {
        padding: 6px;
    }

    .gastos-modal-header[b-95fqneva2k],
    .gastos-modal-body[b-95fqneva2k],
    .gastos-modal-footer[b-95fqneva2k] {
        padding-left: 13px;
        padding-right: 13px;
    }
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .gastos-btn-primary[b-95fqneva2k],
    .gastos-btn-secondary[b-95fqneva2k],
    .gastos-kpi[b-95fqneva2k],
    .gastos-page input.gastos-input[b-95fqneva2k],
    .gastos-page select.gastos-input[b-95fqneva2k],
    .gastos-page textarea.gastos-input[b-95fqneva2k] {
        transition: none;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */

/* ============================================
   NEXOPOS - DASHBOARD
   ============================================ */

/* ANIMACIÓN PRINCIPAL */

.dashboard[b-1tstu02dj3] {
    animation: dashboard-enter-b-1tstu02dj3 .5s ease both;
}

@keyframes dashboard-enter-b-1tstu02dj3 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   ENCABEZADO
   ============================================ */

.dash-heading[b-1tstu02dj3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.dash-heading-info[b-1tstu02dj3] {
    flex: 1;
    min-width: 0;
}

.dash-eyebrow[b-1tstu02dj3] {
    margin-bottom: 9px;
    color: #7656ff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 2px;
}

.dash-heading h1[b-1tstu02dj3] {
    margin: 0;
    color: #211c35;
    font-size: clamp(23px, 2.6vw, 31px);
    font-weight: 800;
    letter-spacing: -1px;
}

.dash-heading p[b-1tstu02dj3] {
    margin: 8px 0 0;
    color: #928ca3;
    font-size: 13px;
}

/* ============================================
   BOTONES PRINCIPALES
   ============================================ */

.dash-heading-actions[b-1tstu02dj3] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 205px;
    flex-shrink: 0;
}

.dash-primary-btn[b-1tstu02dj3],
.dash-client-btn[b-1tstu02dj3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    min-height: 48px;
    padding: 12px 18px;

    border: 1px solid transparent;
    border-radius: 13px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.dash-primary-btn svg[b-1tstu02dj3],
.dash-client-btn svg[b-1tstu02dj3] {
    width: 19px;
    height: 19px;
    flex-shrink: 0;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* NUEVA FACTURA */

.dash-primary-btn[b-1tstu02dj3] {
    background: linear-gradient(
        135deg,
        #896cff,
        #6846ef
    );

    color: #fff;
    box-shadow: 0 8px 22px #7656ff30;
}

.dash-primary-btn:hover[b-1tstu02dj3] {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px #7656ff45;
}

/* NUEVO CLIENTE */

.dash-client-btn[b-1tstu02dj3] {
    background: #ddf8ec;
    border-color: #b7ebd2;
    color: #087c58;
    box-shadow: 0 5px 16px #16a67612;
}

.dash-client-btn:hover[b-1tstu02dj3] {
    background: #c8f2df;
    color: #076b4d;
    transform: translateY(-2px);
    box-shadow: 0 9px 22px #16a67620;
}

.dash-primary-btn:focus-visible[b-1tstu02dj3],
.dash-client-btn:focus-visible[b-1tstu02dj3] {
    outline: 2px solid #7656ff;
    outline-offset: 3px;
}

/* ============================================
   MENSAJES DEL DASHBOARD
   ============================================ */

.dash-demo[b-1tstu02dj3] {
    padding: 11px 15px;
    margin-bottom: 22px;

    border-radius: 12px;
    background: #eeeaff;

    color: #6749c5;
    font-size: 11px;
}

/* ============================================
   TARJETAS DE ESTADÍSTICAS
   ============================================ */

.dash-stats[b-1tstu02dj3] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.dash-stat[b-1tstu02dj3],
.dash-panel[b-1tstu02dj3] {
    min-width: 0;
    background: #fff;
    border: 1px solid #f0edf6;
    border-radius: 19px;
    box-shadow: 0 5px 24px #24203c06;
}

.dash-stat[b-1tstu02dj3] {
    padding: 22px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.dash-stat:hover[b-1tstu02dj3] {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px #24203c0d;
}

/* PARTE SUPERIOR DE CADA TARJETA */

.stat-top[b-1tstu02dj3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 21px;
}

.stat-icon[b-1tstu02dj3],
.quick-icon[b-1tstu02dj3] {
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 24px;
    font-weight: 700;
}

.stat-icon[b-1tstu02dj3] {
    width: 47px;
    height: 47px;
    flex-shrink: 0;
}

/* COLORES DE ICONOS */

.purple[b-1tstu02dj3] {
    background: #eeeaff;
    color: #7656ff;
}

.coral[b-1tstu02dj3] {
    background: #fff0ec;
    color: #ff876a;
}

.mint[b-1tstu02dj3] {
    background: #e6faf5;
    color: #17b99a;
}

.amber[b-1tstu02dj3] {
    background: #fff5e6;
    color: #e7a13a;
}

/* ETIQUETAS */

.stat-tag[b-1tstu02dj3] {
    padding: 6px 9px;
    border-radius: 8px;

    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.stat-tag.positive[b-1tstu02dj3] {
    background: #e8faf1;
    color: #16a676;
}

.stat-tag.neutral[b-1tstu02dj3] {
    background: #f4f2f8;
    color: #8a849a;
}

/* DATOS */

.stat-label[b-1tstu02dj3] {
    color: #8f89a0;
    font-size: 12px;
}

.stat-value[b-1tstu02dj3] {
    margin: 8px 0;
    color: #211c35;
    font-size: clamp(23px, 2.5vw, 30px);
    font-weight: 850;
    letter-spacing: -1px;
    overflow-wrap: anywhere;
}

.stat-footer[b-1tstu02dj3] {
    color: #aaa5b6;
    font-size: 10px;
    line-height: 1.5;
}

/* ============================================
   CONTENIDO DEL DASHBOARD
   ============================================ */

.dash-content[b-1tstu02dj3] {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(280px, 1fr);

    gap: 20px;
    margin-bottom: 22px;
}

.dash-panel[b-1tstu02dj3] {
    padding: 24px;
}

/* ENCABEZADO DE PANELES */

.panel-heading[b-1tstu02dj3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.panel-heading h2[b-1tstu02dj3] {
    margin: 0;
    color: #211c35;
    font-size: 16px;
    font-weight: 800;
}

.panel-heading p[b-1tstu02dj3] {
    margin: 6px 0 0;
    color: #a09aae;
    font-size: 11px;
}

.panel-pill[b-1tstu02dj3] {
    padding: 9px 11px;
    border-radius: 9px;

    background: #f5f2ff;
    color: #7656ff;

    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* ============================================
   GRÁFICO DE INGRESOS
   ============================================ */

.chart-area[b-1tstu02dj3] {
    position: relative;
    height: 250px;
    margin-top: 10px;
    padding-left: 38px;
}

.chart-grid[b-1tstu02dj3] {
    position: absolute;
    inset: 0 0 26px 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chart-grid-line[b-1tstu02dj3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chart-grid-line span[b-1tstu02dj3] {
    width: 28px;
    color: #a49eb2;
    font-size: 10px;
}

.chart-grid-line div[b-1tstu02dj3] {
    flex: 1;
    border-top: 1px dashed #ebe8f2;
}

/* BARRAS */

.chart-bars[b-1tstu02dj3] {
    position: absolute;
    inset: 0 0 0 45px;

    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 10px;
}

.chart-bar-column[b-1tstu02dj3] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    height: 100%;
    max-width: 48px;
    min-width: 0;
}

.chart-bar-track[b-1tstu02dj3] {
    display: flex;
    flex: 1;
    align-items: flex-end;
    width: 100%;
    min-height: 0;
}

.chart-bar[b-1tstu02dj3] {
    width: 100%;
    min-height: 4px;

    border-radius: 9px 9px 4px 4px;
    background: linear-gradient(
        180deg,
        #9278ff,
        #7656ff
    );

    transform-origin: bottom;
    animation: bar-grow-b-1tstu02dj3 .7s ease both;

    transition:
        filter .2s ease,
        transform .2s ease;
}

.chart-bar:hover[b-1tstu02dj3] {
    filter: brightness(1.12);
    transform: scaleX(1.08);
}

@keyframes bar-grow-b-1tstu02dj3 {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

.chart-bar-column > span[b-1tstu02dj3] {
    color: #9d97ad;
    font-size: 10px;
}

/* ============================================
   ACCESOS RÁPIDOS
   ============================================ */

.quick-actions[b-1tstu02dj3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-action[b-1tstu02dj3] {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 12px;
    border: 1px solid #f1eef7;
    border-radius: 13px;

    text-decoration: none;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.quick-action:hover[b-1tstu02dj3] {
    background: #faf9ff;
    border-color: #ded6ff;
    transform: translateX(3px);
}

.quick-icon[b-1tstu02dj3] {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
}

.quick-action strong[b-1tstu02dj3],
.quick-action small[b-1tstu02dj3] {
    display: block;
}

.quick-action strong[b-1tstu02dj3] {
    color: #302a43;
    font-size: 12px;
}

.quick-action small[b-1tstu02dj3] {
    margin-top: 4px;
    color: #aaa4b6;
    font-size: 10px;
}

.quick-arrow[b-1tstu02dj3] {
    margin-left: auto;
    color: #aaa3c0;
    font-size: 17px;
}

.view-all[b-1tstu02dj3] {
    color: #7656ff;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}

.view-all:hover[b-1tstu02dj3] {
    color: #5938dd;
}

/* ============================================
   TABLA DE TRABAJOS RECIENTES
   ============================================ */

.table-scroll[b-1tstu02dj3] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.orders-table[b-1tstu02dj3] {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.orders-table th[b-1tstu02dj3] {
    padding: 14px;
    background: #faf9fd;

    color: #9791a6;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
}

.orders-table td[b-1tstu02dj3] {
    padding: 17px 14px;
    border-bottom: 1px solid #f3f1f7;

    color: #615b70;
    font-size: 12px;
}

.order-number[b-1tstu02dj3],
.order-total[b-1tstu02dj3] {
    color: #302a43 !important;
    font-weight: 800;
}

/* ESTADOS DE LOS TRABAJOS */

.order-status[b-1tstu02dj3] {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 8px;

    font-size: 10px;
    font-weight: 750;
}

.order-status.processing[b-1tstu02dj3] {
    color: #6b52d6;
    background: #f0ebff;
}

.order-status.pending[b-1tstu02dj3] {
    color: #d58c23;
    background: #fff5e6;
}

.order-status.completed[b-1tstu02dj3] {
    color: #159e80;
    background: #e4faf3;
}

.order-status.delivered[b-1tstu02dj3] {
    color: #6c768a;
    background: #edf0f5;
}

/* ============================================
   PANTALLAS MEDIANAS
   ============================================ */

@media (max-width: 1250px) {

    .dash-stats[b-1tstu02dj3] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dash-content[b-1tstu02dj3] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================
   TABLET
   ============================================ */

@media (max-width: 900px) {

    .dash-heading[b-1tstu02dj3] {
        gap: 18px;
    }

    .dash-heading-actions[b-1tstu02dj3] {
        width: 185px;
    }

    .dash-primary-btn[b-1tstu02dj3],
    .dash-client-btn[b-1tstu02dj3] {
        padding: 12px 14px;
    }
}

/* ============================================
   CELULARES
   ============================================ */

@media (max-width: 600px) {

    .dash-heading[b-1tstu02dj3] {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 20px;
    }

    .dash-heading-info[b-1tstu02dj3] {
        width: 100%;
    }

    .dash-heading h1[b-1tstu02dj3] {
        font-size: 23px;
        line-height: 1.25;
    }

    .dash-heading p[b-1tstu02dj3] {
        font-size: 12px;
        line-height: 1.5;
    }

    /* BOTONES A TODO EL ANCHO */

    .dash-heading-actions[b-1tstu02dj3] {
        width: 100%;
        gap: 10px;
    }

    .dash-primary-btn[b-1tstu02dj3],
    .dash-client-btn[b-1tstu02dj3] {
        width: 100%;
        min-height: 48px;
        padding: 13px 16px;
        font-size: 13px;
        border-radius: 12px;
    }

    /* ESTADÍSTICAS */

    .dash-stats[b-1tstu02dj3] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .dash-stat[b-1tstu02dj3] {
        padding: 15px;
        border-radius: 15px;
    }

    .stat-top[b-1tstu02dj3] {
        margin-bottom: 13px;
    }

    .stat-icon[b-1tstu02dj3] {
        width: 39px;
        height: 39px;
        font-size: 20px;
    }

    .stat-tag[b-1tstu02dj3] {
        padding: 5px;
        font-size: 9px;
    }

    .stat-value[b-1tstu02dj3] {
        font-size: 23px;
    }

    /* PANELES */

    .dash-content[b-1tstu02dj3] {
        gap: 14px;
        margin-bottom: 14px;
    }

    .dash-panel[b-1tstu02dj3] {
        padding: 17px;
        border-radius: 16px;
    }

    .panel-heading[b-1tstu02dj3] {
        gap: 8px;
        margin-bottom: 18px;
    }

    .panel-heading h2[b-1tstu02dj3] {
        font-size: 14px;
    }

    .panel-pill[b-1tstu02dj3] {
        padding: 8px;
        font-size: 9px;
    }

    /* GRÁFICO */

    .chart-area[b-1tstu02dj3] {
        height: 205px;
    }

    /* ACCESOS RÁPIDOS */

    .quick-action[b-1tstu02dj3] {
        padding: 11px;
    }

    .quick-icon[b-1tstu02dj3] {
        width: 40px;
        height: 40px;
    }
}

/* ============================================
   CELULARES PEQUEÑOS
   ============================================ */

@media (max-width: 360px) {

    .dash-heading h1[b-1tstu02dj3] {
        font-size: 21px;
    }

    .dash-stat[b-1tstu02dj3] {
        padding: 12px;
    }

    .stat-value[b-1tstu02dj3] {
        font-size: 21px;
    }

    .stat-tag[b-1tstu02dj3] {
        font-size: 8px;
    }

    .dash-panel[b-1tstu02dj3] {
        padding: 14px;
    }

    .chart-area[b-1tstu02dj3] {
        height: 190px;
    }
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    .dashboard[b-1tstu02dj3],
    .chart-bar[b-1tstu02dj3] {
        animation: none;
    }

    .dash-stat[b-1tstu02dj3],
    .dash-primary-btn[b-1tstu02dj3],
    .dash-client-btn[b-1tstu02dj3],
    .quick-action[b-1tstu02dj3] {
        transition: none;
    }

    .dash-stat:hover[b-1tstu02dj3],
    .dash-primary-btn:hover[b-1tstu02dj3],
    .dash-client-btn:hover[b-1tstu02dj3],
    .quick-action:hover[b-1tstu02dj3] {
        transform: none;
    }
}

/* ============================================
   NEXOPOS - TEMA DINÁMICO DEL DASHBOARD
   ============================================ */

/* ENCABEZADO */

.dash-eyebrow[b-1tstu02dj3] {
    color: var(--nexo-primary);
}

/* BOTÓN PRINCIPAL: NUEVA FACTURA */

.dash-primary-btn[b-1tstu02dj3] {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--nexo-primary) 82%, white),
        var(--nexo-primary)
    );

    color: #fff;

    box-shadow: 0 8px 22px
        color-mix(in srgb, var(--nexo-primary) 25%, transparent);
}

.dash-primary-btn:hover[b-1tstu02dj3] {
    color: #fff;

    box-shadow: 0 12px 26px
        color-mix(in srgb, var(--nexo-primary) 35%, transparent);
}

/* ACCESIBILIDAD */

.dash-primary-btn:focus-visible[b-1tstu02dj3],
.dash-client-btn:focus-visible[b-1tstu02dj3] {
    outline-color: var(--nexo-primary);
}

/* MENSAJES INFORMATIVOS */

.dash-demo[b-1tstu02dj3] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

/* ICONOS DE ESTADÍSTICAS */

/* El acento principal cambia con el tema */
.purple[b-1tstu02dj3] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

/* Los demás indicadores conservan sus
   colores semánticos para distinguir métricas */

/* ETIQUETA DE PERÍODO */

.panel-pill[b-1tstu02dj3] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

/* GRÁFICO DE INGRESOS */

.chart-bar[b-1tstu02dj3] {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--nexo-primary) 75%, white),
        var(--nexo-primary)
    );
}

/* ACCESOS RÁPIDOS */

.quick-action:hover[b-1tstu02dj3] {
    background: var(--nexo-primary-light);
    border-color: var(--nexo-primary-border);
}

/* Iconos de accesos rápidos con clase purple */
.quick-icon.purple[b-1tstu02dj3] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

/* FLECHAS DE ACCESO */

.quick-action:hover .quick-arrow[b-1tstu02dj3] {
    color: var(--nexo-primary);
}

/* ENLACES */

.view-all[b-1tstu02dj3] {
    color: var(--nexo-primary);
}

.view-all:hover[b-1tstu02dj3] {
    color: var(--nexo-primary-hover);
}

/* ESTADO: EN PROCESO */

.order-status.processing[b-1tstu02dj3] {
    color: var(--nexo-primary);
    background: var(--nexo-primary-light);
}

/* INTERACCIONES CON TECLADO */

.quick-action:focus-visible[b-1tstu02dj3],
.view-all:focus-visible[b-1tstu02dj3] {
    outline: 2px solid var(--nexo-primary);
    outline-offset: 3px;
}
/* /Components/Pages/Inventario.razor.rz.scp.css */

/* ==========================================
   NEXOPOS - INVENTARIO
   TEMA DINÁMICO
   ========================================== */

.inv-page[b-8ix99wp3gv] {
    color: #211c35;
    animation: inv-enter-b-8ix99wp3gv .4s ease both;
}

@keyframes inv-enter-b-8ix99wp3gv {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ENCABEZADO */

.inv-header[b-8ix99wp3gv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 25px;
}

.inv-eyebrow[b-8ix99wp3gv] {
    color: var(--nexo-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.5px;
    margin-bottom: 9px;
}

.inv-header h1[b-8ix99wp3gv] {
    font-size: 29px;
    font-weight: 850;
    letter-spacing: -1px;
    margin: 0;
}

.inv-header p[b-8ix99wp3gv] {
    color: #9690a5;
    font-size: 13px;
    margin: 9px 0 0;
}

/* BOTONES PRINCIPALES */

.inv-primary[b-8ix99wp3gv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    border: 0;
    border-radius: 12px;
    background: var(--nexo-primary-gradient);
    color: white;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 20px var(--nexo-primary-shadow);
    cursor: pointer;
    transition: filter .2s ease, transform .2s ease;
}

.inv-primary:hover:not(:disabled)[b-8ix99wp3gv] {
    color: white;
    filter: brightness(.95);
    transform: translateY(-1px);
}

.inv-primary:disabled[b-8ix99wp3gv] {
    opacity: .55;
    cursor: wait;
    transform: none;
}

/* TARJETAS DE ESTADÍSTICAS */

.inv-stats[b-8ix99wp3gv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 23px;
}

.inv-stat[b-8ix99wp3gv] {
    padding: 22px;
    border: 1px solid #efedf5;
    border-radius: 18px;
    background: white;
    box-shadow: 0 5px 24px #24203c06;
}

.inv-stat span[b-8ix99wp3gv],
.inv-stat strong[b-8ix99wp3gv],
.inv-stat small[b-8ix99wp3gv] {
    display: block;
}

.inv-stat span[b-8ix99wp3gv] {
    color: #918ba2;
    font-size: 12px;
}

.inv-stat strong[b-8ix99wp3gv] {
    font-size: 30px;
    font-weight: 850;
    margin: 10px 0 7px;
}

.inv-stat small[b-8ix99wp3gv] {
    color: #aaa4b6;
    font-size: 10px;
}

/* PANEL PRINCIPAL */

.inv-panel[b-8ix99wp3gv] {
    background: white;
    border: 1px solid #efedf5;
    border-radius: 19px;
    overflow: hidden;
}

.inv-toolbar[b-8ix99wp3gv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 23px;
}

.inv-toolbar h2[b-8ix99wp3gv] {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
}

.inv-toolbar p[b-8ix99wp3gv] {
    color: #a09aae;
    font-size: 11px;
    margin: 6px 0 0;
}

/* BUSCADOR */

.inv-toolbar input[b-8ix99wp3gv] {
    width: 290px;
    max-width: 100%;
    background: #f7f6fb;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 12px 15px;
    font-size: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.inv-toolbar input:focus[b-8ix99wp3gv] {
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

/* TABLA DE INVENTARIO */

.inv-table-scroll[b-8ix99wp3gv] {
    overflow-x: auto;
}

.inv-table[b-8ix99wp3gv] {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.inv-table th[b-8ix99wp3gv] {
    background: var(--nexo-primary-soft);
    color: #9992aa;
    text-align: left;
    padding: 16px 18px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .4px;
}

.inv-table td[b-8ix99wp3gv] {
    padding: 17px 18px;
    border-bottom: 1px solid #f3f1f7;
    font-size: 12px;
    color: #625b73;
}

.inv-table tbody tr:hover[b-8ix99wp3gv] {
    background: var(--nexo-primary-soft);
}

.inv-table td strong[b-8ix99wp3gv],
.inv-table td small[b-8ix99wp3gv] {
    display: block;
}

.inv-table td strong[b-8ix99wp3gv] {
    color: #302a43;
}

.inv-table td small[b-8ix99wp3gv] {
    margin-top: 6px;
    color: #9992aa;
    font-size: 10px;
}

/* INDICADORES DE EXISTENCIAS */

.inv-stock[b-8ix99wp3gv] {
    display: inline-block;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 10px;
    font-weight: 800;
}

.inv-stock.ok[b-8ix99wp3gv] {
    background: #e5faf2;
    color: #159f7b;
}

.inv-stock.low[b-8ix99wp3gv] {
    background: #fff0ed;
    color: #dc6658;
}

/* BOTONES DE ACCIÓN */

.inv-action[b-8ix99wp3gv] {
    border: 0;
    border-radius: 9px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 800;
    margin: 3px;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.inv-action:hover:not(:disabled)[b-8ix99wp3gv] {
    background: var(--nexo-primary-muted);
    color: var(--nexo-primary-hover);
}

.inv-action.secondary[b-8ix99wp3gv] {
    background: #f3f1f7;
    color: #817992;
}

.inv-action.secondary:hover[b-8ix99wp3gv] {
    background: #eae7f0;
    color: #50495f;
}

.inv-action:disabled[b-8ix99wp3gv] {
    opacity: .55;
    cursor: not-allowed;
}

/* ESTADOS VACÍOS */

.inv-empty[b-8ix99wp3gv] {
    padding: 60px 20px;
    text-align: center;
    color: #9690a5;
    font-size: 12px;
}

.inv-empty h3[b-8ix99wp3gv] {
    color: #302a43;
}

/* ALERTAS */

.inv-alert[b-8ix99wp3gv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 17px;
    margin-bottom: 20px;
    border-radius: 11px;
    font-size: 12px;
}

.inv-alert.success[b-8ix99wp3gv] {
    background: #e6faf2;
    color: #128665;
}

.inv-alert.error[b-8ix99wp3gv],
.inv-error[b-8ix99wp3gv] {
    background: #fff0ed;
    color: #c94f43;
}

.inv-alert button[b-8ix99wp3gv] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
}

/* ==========================================
   MODALES DE INVENTARIO
   ========================================== */

.inv-backdrop[b-8ix99wp3gv] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #15102599;
    display: grid;
    place-items: center;
    padding: 15px;
}

.inv-modal[b-8ix99wp3gv] {
    width: 100%;
    max-width: 660px;
    max-height: 92vh;
    overflow-y: auto;
    background: white;
    border-radius: 21px;
    padding: 27px;
    box-shadow: 0 25px 80px #15102540;
}

.inv-modal.small[b-8ix99wp3gv] {
    max-width: 490px;
}

/* ENCABEZADO DEL MODAL */

.inv-modal-header[b-8ix99wp3gv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.inv-modal-header h2[b-8ix99wp3gv] {
    margin: 0;
    font-size: 23px;
    font-weight: 850;
}

.inv-modal-header p[b-8ix99wp3gv] {
    color: #9690a5;
    font-size: 12px;
    margin: 8px 0 0;
}

.inv-close[b-8ix99wp3gv] {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background: #f4f2f8;
    color: #817992;
    font-size: 23px;
    cursor: pointer;
}

.inv-close:hover[b-8ix99wp3gv] {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
}

/* FORMULARIOS */

.inv-grid[b-8ix99wp3gv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.inv-field[b-8ix99wp3gv] {
    min-width: 0;
    margin-bottom: 15px;
}

.inv-field.full[b-8ix99wp3gv] {
    grid-column: 1 / -1;
}

.inv-field label[b-8ix99wp3gv] {
    display: block;
    margin-bottom: 8px;
    color: #50495f;
    font-size: 12px;
    font-weight: 750;
}

.inv-field input[b-8ix99wp3gv],
.inv-field select[b-8ix99wp3gv] {
    width: 100%;
    min-width: 0;
    border: 1px solid #e8e4f0;
    border-radius: 11px;
    padding: 12px 13px;
    color: #302a43;
    background: white;
    outline: none;
    font-size: 12px;
    transition: border-color .2s, box-shadow .2s;
}

.inv-field input:focus[b-8ix99wp3gv],
.inv-field select:focus[b-8ix99wp3gv] {
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

/* VARIANTES DE PRODUCTOS */

.inv-subheading[b-8ix99wp3gv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 20px 0 13px;
}

.inv-subheading h3[b-8ix99wp3gv] {
    font-size: 15px;
    font-weight: 850;
    margin: 0;
}

.inv-variant[b-8ix99wp3gv] {
    border: 1px solid var(--nexo-primary-border);
    background: var(--nexo-primary-soft);
    border-radius: 13px;
    padding: 17px;
    margin-bottom: 13px;
}

.inv-remove[b-8ix99wp3gv] {
    background: #fff0ed;
    color: #dc6658;
    border: 0;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.inv-remove:hover[b-8ix99wp3gv] {
    background: #ffe1dc;
}

/* PIE DEL MODAL */

.inv-modal-footer[b-8ix99wp3gv] {
    display: flex;
    justify-content: flex-end;
    gap: 11px;
    margin-top: 24px;
    padding-top: 19px;
    border-top: 1px solid #f0edf6;
}

.inv-cancel[b-8ix99wp3gv] {
    border: 0;
    background: #f4f2f8;
    color: #746d86;
    padding: 12px 18px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.inv-cancel:hover[b-8ix99wp3gv] {
    background: #eae7f0;
}

/* ERRORES DEL FORMULARIO */

.inv-error[b-8ix99wp3gv] {
    padding: 12px;
    border-radius: 9px;
    font-size: 12px;
}

/* ==========================================
   MOVIMIENTOS DE INVENTARIO
   ========================================== */

.inv-current[b-8ix99wp3gv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--nexo-primary-soft);
    padding: 17px;
    border-radius: 12px;
    color: #817992;
    font-size: 12px;
    margin-bottom: 20px;
}

.inv-current strong[b-8ix99wp3gv] {
    font-size: 23px;
    color: var(--nexo-primary);
}

/* HISTORIAL */

.inv-history[b-8ix99wp3gv] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid #efedf5;
}

.inv-history strong[b-8ix99wp3gv] {
    display: block;
    font-size: 12px;
}

.inv-history small[b-8ix99wp3gv] {
    display: block;
    color: #9690a5;
    font-size: 11px;
    margin-top: 6px;
}

.inv-history-numbers[b-8ix99wp3gv] {
    text-align: right;
    white-space: nowrap;
}

.inv-muted[b-8ix99wp3gv] {
    color: #9690a5;
    font-size: 12px;
}

/* ACCESIBILIDAD */

.inv-primary:focus-visible[b-8ix99wp3gv],
.inv-action:focus-visible[b-8ix99wp3gv],
.inv-close:focus-visible[b-8ix99wp3gv],
.inv-cancel:focus-visible[b-8ix99wp3gv],
.inv-remove:focus-visible[b-8ix99wp3gv] {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 3px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 800px) {
    .inv-header[b-8ix99wp3gv] {
        flex-direction: column;
        align-items: stretch;
    }

    .inv-toolbar[b-8ix99wp3gv] {
        flex-direction: column;
        align-items: stretch;
    }

    .inv-toolbar input[b-8ix99wp3gv] {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .inv-header h1[b-8ix99wp3gv] {
        font-size: 24px;
    }

    .inv-stats[b-8ix99wp3gv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .inv-stat[b-8ix99wp3gv] {
        padding: 16px;
    }

    .inv-stat strong[b-8ix99wp3gv] {
        font-size: 25px;
    }

    .inv-modal[b-8ix99wp3gv] {
        padding: 18px;
    }

    .inv-grid[b-8ix99wp3gv] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .inv-field.full[b-8ix99wp3gv] {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inv-page[b-8ix99wp3gv] {
        animation: none;
    }

    .inv-primary[b-8ix99wp3gv] {
        transition: none;
    }

    .inv-primary:hover[b-8ix99wp3gv] {
        transform: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */

.login-page[b-9yf9w5kxtr] {
    --factinet-primary: #7656ff;
    --login-text: #202538;
    --login-muted: #858d9e;

    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;

    background: #f1f3f7;
    font-family: Inter, system-ui, sans-serif;
}

.login-page *[b-9yf9w5kxtr],
.login-page *[b-9yf9w5kxtr]::before,
.login-page *[b-9yf9w5kxtr]::after {
    box-sizing: border-box;
}

.login-container[b-9yf9w5kxtr] {
    width: 100%;
    max-width: 1000px;

    background: #ffffff;
    border: 1px solid #e5e8ef;
    border-radius: 20px;
    overflow: hidden;

    box-shadow:
        0 24px 65px rgba(24, 32, 56, 0.055),
        0 2px 8px rgba(24, 32, 56, 0.025);
}

/* CABECERA */

.login-header[b-9yf9w5kxtr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    min-height: 88px;
    padding: 22px 36px;

    border-bottom: 1px solid #edf0f4;
}

.login-brand[b-9yf9w5kxtr] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.login-brand-symbol[b-9yf9w5kxtr] {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    border-radius: 11px;

    background: var(--factinet-primary);
    color: #ffffff;

    font-size: 23px;
    font-weight: 850;
}

.login-brand-name[b-9yf9w5kxtr] {
    color: #202538;
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -1px;
}

.login-brand-name span[b-9yf9w5kxtr] {
    color: var(--factinet-primary);
}

.login-header-label[b-9yf9w5kxtr] {
    color: #a0a6b4;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.2px;
}

/* CONTENIDO */

.login-content[b-9yf9w5kxtr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
}

/* ESPACIO DE TRABAJO */

.login-workspace[b-9yf9w5kxtr] {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 48px 55px;

    background: #f8f9fb;
    border-right: 1px solid #edf0f4;
}

.workspace-eyebrow[b-9yf9w5kxtr] {
    margin-bottom: 20px;

    color: var(--factinet-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.login-workspace h1[b-9yf9w5kxtr] {
    margin: 0 0 18px;

    color: #202538;
    font-size: clamp(31px, 3.2vw, 41px);
    font-weight: 850;
    letter-spacing: -1.7px;
    line-height: 1.17;
}

.workspace-description[b-9yf9w5kxtr] {
    max-width: 330px;
    margin: 0 0 34px;

    color: #7c8597;
    font-size: 13px;
    line-height: 1.9;
}

.workspace-business[b-9yf9w5kxtr] {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 15px;

    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 13px;
}

.workspace-business-icon[b-9yf9w5kxtr] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    border-radius: 11px;
    background: color-mix(
        in srgb,
        var(--factinet-primary) 10%,
        white
    );

    color: var(--factinet-primary);
}

.workspace-business-icon svg[b-9yf9w5kxtr] {
    width: 21px;
    height: 21px;
}

.workspace-business-info[b-9yf9w5kxtr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.workspace-business-info strong[b-9yf9w5kxtr] {
    color: #2c3243;
    font-size: 13px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.workspace-business-info span[b-9yf9w5kxtr] {
    color: #949bab;
    font-size: 11px;
}

.workspace-business-indicator[b-9yf9w5kxtr] {
    width: 8px;
    height: 8px;
    margin-left: auto;
    flex-shrink: 0;

    border-radius: 50%;
    background: var(--factinet-primary);
}

.workspace-caption[b-9yf9w5kxtr] {
    margin-top: 20px;
    color: #a1a7b5;
    font-size: 11px;
    line-height: 1.7;
}

/* FORMULARIO */

.login-access[b-9yf9w5kxtr] {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 48px 50px;
    background: #ffffff;
}

.login-access-inner[b-9yf9w5kxtr] {
    width: 100%;
    max-width: 350px;
}

.login-eyebrow[b-9yf9w5kxtr] {
    margin-bottom: 14px;

    color: var(--factinet-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.login-access h2[b-9yf9w5kxtr] {
    margin: 0 0 10px;

    color: var(--login-text);
    font-size: 29px;
    font-weight: 850;
    letter-spacing: -1px;
}

.login-description[b-9yf9w5kxtr] {
    margin: 0 0 33px;

    color: var(--login-muted);
    font-size: 13px;
    line-height: 1.7;
}

.login-field[b-9yf9w5kxtr] {
    margin-bottom: 21px;
}

.login-field label[b-9yf9w5kxtr] {
    display: block;
    margin-bottom: 9px;

    color: #34394a;
    font-size: 12px;
    font-weight: 750;
}

.login-input[b-9yf9w5kxtr] {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 50px;
    padding: 0 14px;

    border: 1px solid #e1e5ed;
    border-radius: 10px;
    background: #f9fafc;

    transition:
        border-color 0.2s,
        background 0.2s,
        box-shadow 0.2s;
}

.login-input > svg[b-9yf9w5kxtr] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #a1a8b8;
}

.login-input:focus-within[b-9yf9w5kxtr] {
    background: #ffffff;
    border-color: var(--factinet-primary);

    box-shadow: 0 0 0 4px
        color-mix(
            in srgb,
            var(--factinet-primary) 10%,
            transparent
        );
}

.login-input:focus-within > svg[b-9yf9w5kxtr] {
    color: var(--factinet-primary);
}

.login-input input[b-9yf9w5kxtr] {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 14px 0;

    border: 0;
    outline: 0;
    background: transparent;

    color: #252a3b;
    font-family: inherit;
    font-size: 13px;
}

.login-input input[b-9yf9w5kxtr]::placeholder {
    color: #a7aebc;
}

.login-button[b-9yf9w5kxtr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    width: 100%;
    min-height: 50px;
    margin-top: 7px;
    padding: 13px;

    border: none;
    border-radius: 10px;

    background: var(--factinet-primary);
    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;

    transition:
        background 0.2s,
        box-shadow 0.2s,
        transform 0.2s;
}

.login-button svg[b-9yf9w5kxtr] {
    width: 17px;
    height: 17px;
}

.login-button:hover[b-9yf9w5kxtr] {
    background: color-mix(
        in srgb,
        var(--factinet-primary) 85%,
        black
    );

    box-shadow: 0 7px 18px
        color-mix(
            in srgb,
            var(--factinet-primary) 20%,
            transparent
        );

    transform: translateY(-1px);
}

.login-button:active[b-9yf9w5kxtr] {
    transform: translateY(0);
}

.login-button:focus-visible[b-9yf9w5kxtr] {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--factinet-primary) 30%,
            white
        );
    outline-offset: 3px;
}

.login-error[b-9yf9w5kxtr] {
    margin-top: 17px;
    padding: 12px;

    border: 1px solid #ffd6d6;
    border-radius: 10px;
    background: #fff1f1;

    color: #a52d35;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.login-security[b-9yf9w5kxtr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 26px;

    color: #9aa2b0;
    font-size: 11px;
    text-align: center;
}

.login-security svg[b-9yf9w5kxtr] {
    width: 15px;
    height: 15px;
    color: var(--factinet-primary);
}

/* PIE DE PÁGINA */

.login-footer[b-9yf9w5kxtr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 19px 36px;

    border-top: 1px solid #edf0f4;

    color: #a1a8b5;
    font-size: 11px;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .login-page[b-9yf9w5kxtr] {
        padding: 16px;
    }

    .login-header[b-9yf9w5kxtr] {
        padding: 20px 24px;
    }

    .login-header-label[b-9yf9w5kxtr] {
        display: none;
    }

    .login-content[b-9yf9w5kxtr] {
        grid-template-columns: 1fr;
    }

    .login-workspace[b-9yf9w5kxtr] {
        padding: 28px 30px;
        border-right: none;
        border-bottom: 1px solid #edf0f4;
    }

    .login-workspace h1[b-9yf9w5kxtr] {
        font-size: 28px;
    }

    .workspace-description[b-9yf9w5kxtr],
    .workspace-caption[b-9yf9w5kxtr] {
        display: none;
    }

    .workspace-business[b-9yf9w5kxtr] {
        margin-top: 5px;
    }

    .login-access[b-9yf9w5kxtr] {
        padding: 35px 30px 40px;
    }

    .login-access-inner[b-9yf9w5kxtr] {
        max-width: none;
    }

    .login-footer[b-9yf9w5kxtr] {
        padding: 18px 24px;
    }
}

@media (max-width: 420px) {
    .login-page[b-9yf9w5kxtr] {
        padding: 10px;
    }

    .login-container[b-9yf9w5kxtr] {
        border-radius: 15px;
    }

    .login-workspace[b-9yf9w5kxtr] {
        padding: 25px 22px;
    }

    .login-access[b-9yf9w5kxtr] {
        padding: 30px 22px 35px;
    }

    .login-header[b-9yf9w5kxtr] {
        padding: 18px 22px;
    }

    .login-footer[b-9yf9w5kxtr] {
        padding: 16px 22px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-page *[b-9yf9w5kxtr],
    .login-page *[b-9yf9w5kxtr]::before,
    .login-page *[b-9yf9w5kxtr]::after {
        transition: none !important;
        animation: none !important;
    }
}

/* FACTINET - VISIBILIDAD DE CONTRASEÑA */

.login-password-toggle[b-9yf9w5kxtr] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 34px;
    height: 34px;
    padding: 0;

    border: none;
    border-radius: 8px;
    background: transparent;

    color: #9aa3b5;
    cursor: pointer;

    transition:
        color 0.2s,
        background 0.2s;
}

.login-password-toggle svg[b-9yf9w5kxtr] {
    width: 19px;
    height: 19px;
}

.login-password-toggle:hover[b-9yf9w5kxtr] {
    color: var(--factinet-primary);

    background: color-mix(
        in srgb,
        var(--factinet-primary) 8%,
        transparent
    );
}

.login-password-toggle:focus-visible[b-9yf9w5kxtr] {
    outline: 2px solid var(--factinet-primary);
    outline-offset: 2px;
}

.login-eye-closed[b-9yf9w5kxtr] {
    display: none;
}

.login-password-toggle.is-visible .login-eye-open[b-9yf9w5kxtr] {
    display: none;
}

.login-password-toggle.is-visible .login-eye-closed[b-9yf9w5kxtr] {
    display: block;
}
/* /Components/Pages/MiPerfil.razor.rz.scp.css */

.perfil-page[b-3nv0nfewh4] {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 8px 0 30px;
}

.perfil-heading[b-3nv0nfewh4] {
    margin-bottom: 25px;
}

.perfil-eyebrow[b-3nv0nfewh4] {
    display: block;
    margin-bottom: 8px;
    color: var(--nexo-primary, #6258e8);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.perfil-heading h1[b-3nv0nfewh4] {
    margin: 0 0 8px;
    color: #20243a;
    font-size: clamp(25px, 3vw, 32px);
    font-weight: 850;
}

.perfil-heading p[b-3nv0nfewh4] {
    margin: 0;
    color: #8a90a2;
    font-size: 13px;
}

.perfil-grid[b-3nv0nfewh4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.perfil-card[b-3nv0nfewh4] {
    min-width: 0;
    padding: 26px;
    border: 1px solid #eceef5;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(24, 32, 60, .035);
}

.perfil-card-title[b-3nv0nfewh4] {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 25px;
}

.perfil-icon[b-3nv0nfewh4] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border-radius: 14px;
    background: #f2f0ff;
    font-size: 21px;
}

.perfil-card-title h2[b-3nv0nfewh4] {
    margin: 0 0 5px;
    color: #22263a;
    font-size: 16px;
    font-weight: 800;
}

.perfil-card-title p[b-3nv0nfewh4] {
    margin: 0;
    color: #9599a8;
    font-size: 12px;
}

.perfil-identity[b-3nv0nfewh4] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid #eaeef7;
    border-radius: 15px;
    background: #f8faff;
}

.perfil-avatar[b-3nv0nfewh4] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    border-radius: 16px;
    background: #203e5e;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.perfil-identity strong[b-3nv0nfewh4],
.perfil-identity span[b-3nv0nfewh4] {
    display: block;
}

.perfil-identity strong[b-3nv0nfewh4] {
    margin-bottom: 5px;
    color: #22263a;
    font-size: 15px;
}

.perfil-identity span[b-3nv0nfewh4] {
    color: #8c91a4;
    font-size: 12px;
}

.perfil-info-item[b-3nv0nfewh4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f0f1f6;
}

.perfil-info-item:last-child[b-3nv0nfewh4] {
    border-bottom: none;
}

.perfil-info-item > span:first-child[b-3nv0nfewh4] {
    color: #9195a5;
    font-size: 12px;
}

.perfil-info-item strong[b-3nv0nfewh4] {
    color: #30354a;
    font-size: 12px;
    font-weight: 750;
    text-align: right;
    overflow-wrap: anywhere;
}

.perfil-status[b-3nv0nfewh4] {
    padding: 6px 10px;
    border-radius: 20px;
    background: #e9f8f1;
    color: #08956b;
    font-size: 11px;
    font-weight: 800;
}

.perfil-field[b-3nv0nfewh4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 19px;
}

.perfil-field label[b-3nv0nfewh4] {
    color: #41465a;
    font-size: 12px;
    font-weight: 750;
}

.perfil-field input[b-3nv0nfewh4] {
    width: 100%;
    min-height: 45px;
    padding: 0 14px;
    border: 1px solid #e2e5ef;
    border-radius: 11px;
    outline: none;
    background: #fff;
    color: #20243a;
    font: inherit;
    font-size: 13px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.perfil-field input:focus[b-3nv0nfewh4] {
    border-color: var(--nexo-primary, #6258e8);
    box-shadow: 0 0 0 3px rgba(98, 88, 232, .10);
}

.perfil-field small[b-3nv0nfewh4] {
    color: #9ba0af;
    font-size: 11px;
}

.perfil-save-button[b-3nv0nfewh4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    margin-top: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: 12px;
    background: var(--nexo-primary, #6258e8);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: filter .2s ease;
}

.perfil-save-button:hover:not(:disabled)[b-3nv0nfewh4] {
    filter: brightness(.92);
}

.perfil-save-button:disabled[b-3nv0nfewh4] {
    opacity: .6;
    cursor: not-allowed;
}

.perfil-alert[b-3nv0nfewh4] {
    margin-bottom: 20px;
    padding: 13px 15px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 650;
}

.perfil-alert.success[b-3nv0nfewh4] {
    background: #eaf9f0;
    color: #087b51;
}

.perfil-alert.error[b-3nv0nfewh4] {
    background: #fff0f1;
    color: #c32645;
}

@media (max-width: 950px) {
    .perfil-grid[b-3nv0nfewh4] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .perfil-card[b-3nv0nfewh4] {
        padding: 18px;
        border-radius: 16px;
    }

    .perfil-info-item[b-3nv0nfewh4] {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .perfil-info-item strong[b-3nv0nfewh4] {
        text-align: left;
    }
}
/* /Components/Pages/Reportes.razor.rz.scp.css */

/* ============================================
   NEXOPOS - REPORTES
   TEMA DINÁMICO GLOBAL
   ============================================ */

.reportes-page[b-p2ez426ows] {
    --rp-primary: var(--nexo-primary);
    --rp-primary-dark: var(--nexo-primary-hover);
    --rp-border: #e9e8f1;
    --rp-muted: #777b8c;

    color: #25243b;
    max-width: 1500px;
    margin: 0 auto;
    padding: 26px;
    box-sizing: border-box;
}

.reportes-page *[b-p2ez426ows],
.reportes-page *[b-p2ez426ows]::before,
.reportes-page *[b-p2ez426ows]::after {
    box-sizing: border-box;
}

/* ============================================
   ENCABEZADO
   ============================================ */

.reportes-header[b-p2ez426ows] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.reportes-eyebrow[b-p2ez426ows] {
    display: block;
    color: var(--rp-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.reportes-header h1[b-p2ez426ows] {
    margin: 0;
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.reportes-header p[b-p2ez426ows],
.reportes-filtros-titulo p[b-p2ez426ows],
.reportes-panel-header p[b-p2ez426ows] {
    color: var(--rp-muted);
    font-size: 13px;
    margin: 7px 0 0;
}

/* ============================================
   BOTONES PRINCIPALES
   ============================================ */

.reportes-btn-primary[b-p2ez426ows] {
    background: var(--nexo-primary-gradient);
    color: #fff;
    border: 1px solid var(--rp-primary);
    border-radius: 11px;
    padding: 12px 19px;
    min-height: 43px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 5px 15px var(--nexo-primary-shadow);

    transition:
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease,
        filter .2s ease;
}

.reportes-btn-primary:hover:not(:disabled)[b-p2ez426ows] {
    filter: brightness(.94);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px var(--nexo-primary-shadow);
}

.reportes-btn-primary:disabled[b-p2ez426ows] {
    opacity: .6;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

.reportes-btn-primary:focus-visible[b-p2ez426ows],
.reportes-atajo:focus-visible[b-p2ez426ows] {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 2px;
}

/* ============================================
   FILTROS Y PANELES
   ============================================ */

.reportes-filtros[b-p2ez426ows],
.reportes-panel[b-p2ez426ows] {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 17px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(30, 25, 80, .035);
}

.reportes-filtros-titulo h2[b-p2ez426ows],
.reportes-panel-header h2[b-p2ez426ows] {
    font-size: 17px;
    margin: 0;
    font-weight: 800;
}

/* ============================================
   ATAJOS DE PERÍODO
   ============================================ */

.reportes-atajos[b-p2ez426ows] {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 20px 0;
}

.reportes-atajo[b-p2ez426ows] {
    border: 1px solid var(--rp-border);
    background: #fff;
    color: #53546a;
    border-radius: 9px;
    padding: 9px 15px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 650;
    font-size: 12px;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.reportes-atajo:hover[b-p2ez426ows] {
    border-color: var(--rp-primary);
    background: var(--nexo-primary-soft);
}

.reportes-atajo.activo[b-p2ez426ows] {
    color: var(--rp-primary);
    background: var(--nexo-primary-light);
    border-color: var(--nexo-primary-border);
}

/* ============================================
   FECHAS
   ============================================ */

.reportes-fechas[b-p2ez426ows] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.reportes-fechas label[b-p2ez426ows] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #53546a;
    font-size: 12px;
    font-weight: 700;
}

.reportes-fechas input[b-p2ez426ows] {
    border: 1px solid var(--rp-border);
    border-radius: 10px;
    padding: 10px 12px;
    min-height: 42px;
    color: #25243b;
    background: #fff;
    font: inherit;
    outline: none;
    color-scheme: light;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.reportes-fechas input:hover[b-p2ez426ows] {
    border-color: var(--nexo-primary-border);
}

.reportes-fechas input:focus[b-p2ez426ows] {
    border-color: var(--rp-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.reportes-periodo[b-p2ez426ows] {
    font-size: 13px;
    color: var(--rp-muted);
    margin-bottom: 17px;
}

.reportes-periodo strong[b-p2ez426ows] {
    color: #343149;
}

/* ============================================
   TARJETAS KPI
   ============================================ */

.reportes-grid[b-p2ez426ows] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.reportes-kpi[b-p2ez426ows] {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 16px;
    padding: 19px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    box-shadow: 0 4px 18px rgba(30, 25, 80, .035);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.reportes-kpi:hover[b-p2ez426ows] {
    transform: translateY(-2px);
    box-shadow: 0 9px 24px rgba(30, 25, 80, .07);
}

.reportes-kpi-icon[b-p2ez426ows] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border-radius: 11px;
    background: var(--nexo-primary-light);
    font-size: 19px;
}

.reportes-kpi-label[b-p2ez426ows] {
    color: #66687b;
    font-size: 12px;
    font-weight: 650;
}

.reportes-kpi strong[b-p2ez426ows] {
    font-size: clamp(17px, 1.6vw, 25px);
    font-weight: 800;
    letter-spacing: -.6px;
    overflow-wrap: anywhere;
}

.reportes-kpi small[b-p2ez426ows] {
    color: var(--rp-muted);
    font-size: 11px;
}

/* ============================================
   KPI DESTACADO
   ============================================ */

.reportes-kpi-destacado[b-p2ez426ows] {
    background: var(--nexo-primary-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 22px var(--nexo-primary-shadow);
}

.reportes-kpi-destacado .reportes-kpi-label[b-p2ez426ows],
.reportes-kpi-destacado small[b-p2ez426ows] {
    color: rgba(255, 255, 255, .85);
}

.reportes-kpi-destacado .reportes-kpi-icon[b-p2ez426ows] {
    background: rgba(255, 255, 255, .17);
}

.reportes-kpi-destacado strong[b-p2ez426ows] {
    color: #fff;
}

/* ============================================
   ENCABEZADOS DE PANELES
   ============================================ */

.reportes-panel-header[b-p2ez426ows] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

/* ============================================
   LEYENDA DE GRÁFICOS
   ============================================ */

.reportes-leyenda[b-p2ez426ows] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #66687b;
}

.reportes-leyenda span[b-p2ez426ows] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.reportes-leyenda i[b-p2ez426ows] {
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

/* Ventas: color del negocio */

.leyenda-ventas[b-p2ez426ows] {
    background: var(--nexo-primary);
}

/* Taller: color funcional independiente */

.leyenda-taller[b-p2ez426ows] {
    background: #20a99b;
}

/* ============================================
   GRÁFICO DE EVOLUCIÓN
   ============================================ */

.reportes-grafico-scroll[b-p2ez426ows] {
    overflow-x: auto;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
}

.reportes-grafico[b-p2ez426ows] {
    display: flex;
    gap: 8px;
    min-width: max(100%, calc(var(--dias) * 48px));
    height: 255px;
    padding-top: 10px;
    border-bottom: 1px solid var(--rp-border);
}

.reportes-dia[b-p2ez426ows] {
    flex: 1 0 36px;
    min-width: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reportes-barras[b-p2ez426ows] {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    min-height: 0;

    background: repeating-linear-gradient(
        to top,
        transparent 0,
        transparent calc(25% - 1px),
        #f0eef6 calc(25% - 1px),
        #f0eef6 25%
    );
}

.reportes-barra[b-p2ez426ows] {
    width: 13px;
    border-radius: 5px 5px 0 0;
    min-height: 0;
    transition: height .3s ease, filter .2s ease;
}

/* Barras de ventas dinámicas */

.reportes-barra.ventas[b-p2ez426ows] {
    background: var(--nexo-primary);
}

/* Barras del taller */

.reportes-barra.taller[b-p2ez426ows] {
    background: #20a99b;
}

.reportes-barra:hover[b-p2ez426ows] {
    filter: brightness(1.15);
}

.reportes-dia-label[b-p2ez426ows] {
    padding-top: 10px;
    color: #818395;
    font-size: 10px;
    white-space: nowrap;
}

.reportes-nota[b-p2ez426ows] {
    margin: 17px 0 0;
    color: #818395;
    font-size: 12px;
    line-height: 1.7;
}

/* ============================================
   DISTRIBUCIÓN EN DOS COLUMNAS
   ============================================ */

.reportes-dos-columnas[b-p2ez426ows] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ============================================
   MÉTODOS DE PAGO
   ============================================ */

.reportes-metodo[b-p2ez426ows] {
    margin-bottom: 20px;
}

.reportes-metodo-info[b-p2ez426ows] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 9px;
}

.reportes-metodo-info strong[b-p2ez426ows] {
    font-weight: 750;
}

.reportes-progreso[b-p2ez426ows] {
    width: 100%;
    height: 9px;
    background: #f0eef6;
    border-radius: 20px;
    overflow: hidden;
}

.reportes-progreso > div[b-p2ez426ows] {
    height: 100%;
    border-radius: 20px;
    transition: width .3s ease;
}

.reportes-metodo small[b-p2ez426ows] {
    display: block;
    color: var(--rp-muted);
    margin-top: 6px;
    font-size: 11px;
}

/* ============================================
   RESÚMENES
   ============================================ */

.reportes-resumen-linea[b-p2ez426ows] {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--rp-border);
    font-size: 13px;
}

.reportes-resumen-linea span[b-p2ez426ows] {
    color: #66687b;
}

.reportes-resumen-linea strong[b-p2ez426ows] {
    text-align: right;
}

/* ============================================
   TABLAS
   ============================================ */

.reportes-tabla-scroll[b-p2ez426ows] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.reportes-tabla[b-p2ez426ows] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.reportes-tabla th[b-p2ez426ows] {
    padding: 14px;
    color: #777b8c;
    background: var(--nexo-primary-soft);
    font-weight: 750;
    white-space: nowrap;
}

.reportes-tabla td[b-p2ez426ows] {
    padding: 15px 14px;
    border-bottom: 1px solid var(--rp-border);
}

.reportes-tabla tbody tr[b-p2ez426ows] {
    transition: background .2s ease;
}

.reportes-tabla tbody tr:hover[b-p2ez426ows] {
    background: var(--nexo-primary-soft);
}

/* Posición en ranking */

.reportes-posicion[b-p2ez426ows] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-weight: 800;
}

/* ============================================
   ESTADOS VACÍOS Y CARGA
   ============================================ */

.reportes-vacio[b-p2ez426ows],
.reportes-estado[b-p2ez426ows] {
    padding: 45px 15px;
    text-align: center;
    color: var(--rp-muted);
    font-size: 13px;
}

/* Error: rojo funcional */

.reportes-error[b-p2ez426ows] {
    background: #fff0f1;
    color: #b42336;
    border: 1px solid #ffd1d6;
    padding: 15px;
    border-radius: 11px;
    margin-bottom: 18px;
    font-size: 13px;
}

/* Spinner con tema dinámico */

.reportes-spinner[b-p2ez426ows] {
    width: 29px;
    height: 29px;
    margin: 0 auto 14px;
    border: 3px solid var(--nexo-primary-light);
    border-top-color: var(--nexo-primary);
    border-radius: 50%;
    animation: reportes-girar-b-p2ez426ows .8s linear infinite;
}

@keyframes reportes-girar-b-p2ez426ows {
    to {
        transform: rotate(360deg);
    }
}

.reportes-aviso[b-p2ez426ows] {
    color: #818395;
    font-size: 12px;
    line-height: 1.7;
    margin-top: 8px;
}

/* ============================================
   RESULTADO FINANCIERO PRELIMINAR
   ============================================ */

.reportes-finanzas-grid[b-p2ez426ows] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reportes-finanzas-subtitulo[b-p2ez426ows] {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 800;
}

/* Barras de gastos por categoría */

.reportes-gastos-progreso[b-p2ez426ows] {
    background: var(--nexo-primary);
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1100px) {
    .reportes-grid[b-p2ez426ows] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .reportes-finanzas-grid[b-p2ez426ows] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   RESPONSIVE - CELULARES
   ============================================ */

@media (max-width: 700px) {
    .reportes-page[b-p2ez426ows] {
        padding: 14px;
    }

    .reportes-header[b-p2ez426ows] {
        align-items: flex-start;
        flex-direction: column;
    }

    .reportes-header h1[b-p2ez426ows] {
        font-size: 24px;
    }

    .reportes-grid[b-p2ez426ows] {
        gap: 10px;
    }

    .reportes-kpi[b-p2ez426ows] {
        padding: 13px;
    }

    .reportes-kpi strong[b-p2ez426ows] {
        font-size: 17px;
    }

    .reportes-filtros[b-p2ez426ows],
    .reportes-panel[b-p2ez426ows] {
        padding: 16px;
    }

    .reportes-dos-columnas[b-p2ez426ows] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .reportes-fechas label[b-p2ez426ows] {
        flex: 1 1 130px;
    }

    .reportes-panel-header[b-p2ez426ows] {
        flex-direction: column;
    }

    .reportes-finanzas-grid[b-p2ez426ows] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .reportes-grid[b-p2ez426ows] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .reportes-btn-primary[b-p2ez426ows],
    .reportes-atajo[b-p2ez426ows],
    .reportes-kpi[b-p2ez426ows],
    .reportes-barra[b-p2ez426ows],
    .reportes-progreso > div[b-p2ez426ows],
    .reportes-fechas input[b-p2ez426ows],
    .reportes-tabla tbody tr[b-p2ez426ows] {
        transition: none;
    }

    .reportes-spinner[b-p2ez426ows] {
        animation: none;
    }
}
/* /Components/Pages/Usuarios.razor.rz.scp.css */

.usuarios-page[b-hts37cluw5] {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 8px 0 35px;
}

.usuarios-heading[b-hts37cluw5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 25px;
}

.usuarios-eyebrow[b-hts37cluw5] {
    display: block;
    margin-bottom: 7px;
    color: #6258e8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.usuarios-heading h1[b-hts37cluw5] {
    margin: 0 0 7px;
    color: #20243a;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 850;
}

.usuarios-heading p[b-hts37cluw5],
.usuarios-section-heading p[b-hts37cluw5] {
    margin: 0;
    color: #9298a8;
    font-size: 13px;
}

.usuarios-primary[b-hts37cluw5] {
    min-height: 43px;
    padding: 10px 18px;
    border: none;
    border-radius: 11px;
    background: var(--nexo-primary, #6258e8);
    color: white;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.usuarios-primary:disabled[b-hts37cluw5] {
    opacity: .6;
    cursor: not-allowed;
}

.usuarios-secondary[b-hts37cluw5] {
    min-height: 43px;
    padding: 10px 18px;
    border: 1px solid #e5e7ef;
    border-radius: 11px;
    background: white;
    color: #555b70;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.usuarios-stats[b-hts37cluw5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 22px;
}

.usuarios-stat[b-hts37cluw5],
.usuarios-card[b-hts37cluw5] {
    border: 1px solid #eceef5;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(24, 32, 60, .035);
}

.usuarios-stat[b-hts37cluw5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.usuarios-stat span[b-hts37cluw5] {
    color: #9095a6;
    font-size: 12px;
}

.usuarios-stat strong[b-hts37cluw5] {
    color: #252a3f;
    font-size: 27px;
    font-weight: 850;
}

.usuarios-card[b-hts37cluw5] {
    margin-bottom: 22px;
    padding: 23px;
}

.usuarios-section-heading[b-hts37cluw5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 23px;
}

.usuarios-section-heading h2[b-hts37cluw5] {
    margin: 0 0 5px;
    color: #252a3f;
    font-size: 17px;
    font-weight: 800;
}

.usuarios-search[b-hts37cluw5],
.usuarios-field input[b-hts37cluw5],
.usuarios-field select[b-hts37cluw5] {
    min-height: 43px;
    padding: 0 13px;
    border: 1px solid #e3e6ef;
    border-radius: 10px;
    background: #fff;
    color: #2a3044;
    font: inherit;
    font-size: 13px;
    outline: none;
}

.usuarios-search[b-hts37cluw5] {
    width: min(100%, 280px);
}

.usuarios-search:focus[b-hts37cluw5],
.usuarios-field input:focus[b-hts37cluw5],
.usuarios-field select:focus[b-hts37cluw5] {
    border-color: #6258e8;
    box-shadow: 0 0 0 3px rgba(98, 88, 232, .10);
}

.usuarios-form-grid[b-hts37cluw5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.usuarios-field[b-hts37cluw5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usuarios-field label[b-hts37cluw5] {
    color: #41465a;
    font-size: 12px;
    font-weight: 750;
}

.usuarios-field small[b-hts37cluw5] {
    color: #9399a8;
    font-size: 11px;
}

.usuarios-form-actions[b-hts37cluw5] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.usuarios-close[b-hts37cluw5] {
    border: none;
    background: transparent;
    color: #9297a7;
    font-size: 20px;
    cursor: pointer;
}

.usuarios-table-wrap[b-hts37cluw5] {
    width: 100%;
    overflow-x: auto;
}

.usuarios-table[b-hts37cluw5] {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.usuarios-table th[b-hts37cluw5] {
    padding: 14px 12px;
    border-bottom: 1px solid #eceef4;
    color: #959aab;
    font-size: 11px;
    font-weight: 750;
    text-align: left;
}

.usuarios-table td[b-hts37cluw5] {
    padding: 16px 12px;
    border-bottom: 1px solid #f1f2f6;
    color: #555b70;
    font-size: 12px;
}

.usuarios-person[b-hts37cluw5] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.usuarios-person strong[b-hts37cluw5] {
    color: #30354a;
    font-weight: 750;
}

.usuarios-avatar[b-hts37cluw5] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 11px;
    background: #edf0ff;
    color: #6258e8;
    font-size: 12px;
    font-weight: 800;
}

.usuarios-role[b-hts37cluw5] {
    padding: 6px 10px;
    border-radius: 20px;
    background: #f0efff;
    color: #6258e8;
    font-size: 11px;
    font-weight: 750;
}

.usuarios-status[b-hts37cluw5] {
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 750;
}

.usuarios-status.active[b-hts37cluw5] {
    background: #e9f8f1;
    color: #0a9064;
}

.usuarios-status.inactive[b-hts37cluw5] {
    background: #f3f4f6;
    color: #777e8c;
}

.usuarios-empty[b-hts37cluw5] {
    padding: 25px;
    color: #9298a8;
    text-align: center;
    font-size: 13px;
}

.usuarios-alert[b-hts37cluw5] {
    margin-bottom: 18px;
    padding: 13px 16px;
    border-radius: 11px;
    font-size: 13px;
}

.usuarios-alert.success[b-hts37cluw5] {
    background: #eaf9f0;
    color: #087b51;
}

.usuarios-alert.error[b-hts37cluw5] {
    background: #fff0f1;
    color: #c32645;
}

@media (max-width: 750px) {
    .usuarios-stats[b-hts37cluw5] {
        grid-template-columns: 1fr;
    }

    .usuarios-form-grid[b-hts37cluw5] {
        grid-template-columns: 1fr;
    }

    .usuarios-card[b-hts37cluw5] {
        padding: 17px;
    }

    .usuarios-heading[b-hts37cluw5] {
        align-items: flex-start;
    }
}

/* Acciones administrativas */

.usuarios-actions[b-hts37cluw5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.usuarios-action-btn[b-hts37cluw5] {
    padding: 8px 11px;
    border: 1px solid #e4e6ef;
    border-radius: 9px;
    background: #fff;
    color: #555c70;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

.usuarios-action-btn:hover:not(:disabled)[b-hts37cluw5] {
    border-color: #6258e8;
    color: #6258e8;
    background: #f5f4ff;
}

.usuarios-action-btn:disabled[b-hts37cluw5] {
    opacity: .4;
    cursor: not-allowed;
}

/* Modal de confirmación */

.usuarios-modal-backdrop[b-hts37cluw5] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 22, 43, .55);
    backdrop-filter: blur(5px);
}

.usuarios-modal[b-hts37cluw5] {
    width: 100%;
    max-width: 440px;
    padding: 27px;
    border-radius: 19px;
    background: white;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .2);
}

.usuarios-modal h2[b-hts37cluw5] {
    margin: 0 0 16px;
    color: #252a3f;
    font-size: 20px;
    font-weight: 800;
}

.usuarios-modal p[b-hts37cluw5] {
    margin: 0 0 18px;
    color: #747b8d;
    font-size: 13px;
    line-height: 1.7;
}

.usuarios-modal p strong[b-hts37cluw5] {
    color: #252a3f;
}

.usuarios-modal .usuarios-field[b-hts37cluw5] {
    margin-top: 15px;
}

@media (max-width: 600px) {
    .usuarios-modal[b-hts37cluw5] {
        padding: 20px;
    }

    .usuarios-actions[b-hts37cluw5] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Ventas.razor.rz.scp.css */

/* ==========================================
   NEXOPOS - PUNTO DE VENTA
   TEMA DINÁMICO
   ========================================== */

.pos-page[b-t843ek7sdj] {
    color: #28223b;
    padding-bottom: 30px;
}

/* ENCABEZADO */

.pos-header[b-t843ek7sdj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.pos-eyebrow[b-t843ek7sdj] {
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.5px;
    color: var(--nexo-primary);
    margin-bottom: 8px;
}

.pos-header h1[b-t843ek7sdj] {
    font-size: 29px;
    font-weight: 850;
    letter-spacing: -1px;
    margin: 0;
}

.pos-header p[b-t843ek7sdj] {
    color: #9891a8;
    font-size: 13px;
    margin: 8px 0 0;
}

.pos-header-actions[b-t843ek7sdj] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pos-outline[b-t843ek7sdj] {
    border: 1px solid #e8e3f3;
    border-radius: 11px;
    background: white;
    color: #655a7d;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}

.pos-outline:hover[b-t843ek7sdj] {
    border-color: var(--nexo-primary);
    color: var(--nexo-primary);
    background: var(--nexo-primary-soft);
}

/* DISTRIBUCIÓN */

.pos-layout[b-t843ek7sdj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.pos-catalogo[b-t843ek7sdj],
.pos-cart[b-t843ek7sdj] {
    background: white;
    border: 1px solid #eeebf5;
    border-radius: 20px;
    box-shadow: 0 8px 30px #24203c06;
    min-width: 0;
}

.pos-catalogo[b-t843ek7sdj] {
    padding: 22px;
}

.pos-panel-heading[b-t843ek7sdj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pos-panel-heading h2[b-t843ek7sdj],
.pos-cart-header h2[b-t843ek7sdj] {
    font-size: 17px;
    font-weight: 850;
    margin: 0;
}

.pos-panel-heading p[b-t843ek7sdj] {
    font-size: 11px;
    color: #a19aae;
    margin: 7px 0 0;
}

.pos-counter[b-t843ek7sdj],
.pos-cart-count[b-t843ek7sdj] {
    font-size: 10px;
    font-weight: 800;
    color: var(--nexo-primary);
    background: var(--nexo-primary-light);
    padding: 8px 11px;
    border-radius: 9px;
    white-space: nowrap;
}

/* BÚSQUEDA */

.pos-search[b-t843ek7sdj] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f7f6fb;
    border: 1px solid #eeebf5;
    border-radius: 12px;
    margin: 20px 0;
    padding: 0 14px;
    transition: border-color .2s, box-shadow .2s;
}

.pos-search:focus-within[b-t843ek7sdj] {
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.pos-search span[b-t843ek7sdj] {
    font-size: 24px;
    color: #9187a7;
}

.pos-search input[b-t843ek7sdj] {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    padding: 14px 0;
    color: #28223b;
    font-size: 12px;
}

/* CATÁLOGO */

.pos-products[b-t843ek7sdj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.pos-product[b-t843ek7sdj] {
    display: flex;
    gap: 12px;
    position: relative;
    border: 1px solid #eeebf5;
    border-radius: 15px;
    padding: 16px;
    min-width: 0;
    transition: border-color .2s, transform .2s;
}

.pos-product:hover[b-t843ek7sdj] {
    border-color: var(--nexo-primary-border);
    transform: translateY(-2px);
}

.pos-product-icon[b-t843ek7sdj] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 25px;
}

.pos-product-info[b-t843ek7sdj] {
    min-width: 0;
    flex: 1;
    padding-right: 8px;
}

.pos-category[b-t843ek7sdj] {
    font-size: 9px;
    font-weight: 850;
    color: var(--nexo-primary);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.pos-product h3[b-t843ek7sdj] {
    font-size: 13px;
    font-weight: 850;
    margin: 6px 0;
    overflow-wrap: anywhere;
}

.pos-product p[b-t843ek7sdj],
.pos-product small[b-t843ek7sdj] {
    display: block;
    color: #9992aa;
    font-size: 10px;
    margin: 5px 0;
}

.pos-product-bottom[b-t843ek7sdj] {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-top: 13px;
}

.pos-product-bottom strong[b-t843ek7sdj] {
    font-size: 15px;
    font-weight: 850;
}

/* EXISTENCIAS */

.pos-stock[b-t843ek7sdj] {
    background: #e6faf2;
    color: #159f7b;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 750;
}

.pos-stock.low[b-t843ek7sdj] {
    background: #fff0ed;
    color: #d75d4e;
}

/* AGREGAR PRODUCTO */

.pos-add[b-t843ek7sdj] {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 29px;
    height: 29px;
    border: 0;
    border-radius: 9px;
    background: var(--nexo-primary);
    color: white;
    font-size: 21px;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.pos-add:hover:not(:disabled)[b-t843ek7sdj] {
    background: var(--nexo-primary-hover);
    transform: scale(1.07);
}

.pos-add:disabled[b-t843ek7sdj] {
    background: #d8d3e5;
    cursor: not-allowed;
}

/* ==========================================
   CARRITO DE VENTAS
   ========================================== */

.pos-cart[b-t843ek7sdj] {
    position: sticky;
    top: 18px;
    overflow: hidden;
}

.pos-cart-header[b-t843ek7sdj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px;
    border-bottom: 1px solid #f0edf6;
}

.pos-cart-empty[b-t843ek7sdj] {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 230px;
    padding: 25px;
}

.pos-cart-empty-icon[b-t843ek7sdj] {
    font-size: 39px;
    margin-bottom: 15px;
}

.pos-cart-empty strong[b-t843ek7sdj] {
    font-size: 13px;
}

.pos-cart-empty p[b-t843ek7sdj] {
    color: #a19aae;
    font-size: 11px;
    margin-top: 8px;
}

.pos-cart-items[b-t843ek7sdj] {
    max-height: 350px;
    overflow-y: auto;
    padding: 5px 22px;
}

.pos-cart-item[b-t843ek7sdj] {
    padding: 17px 0;
    border-bottom: 1px solid #f1eef7;
}

.pos-cart-item-top[b-t843ek7sdj],
.pos-cart-item-bottom[b-t843ek7sdj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pos-cart-item-top strong[b-t843ek7sdj] {
    display: block;
    font-size: 12px;
}

.pos-cart-item-top small[b-t843ek7sdj] {
    display: block;
    font-size: 10px;
    color: #9992aa;
    margin-top: 5px;
}

.pos-cart-item-bottom[b-t843ek7sdj] {
    margin-top: 15px;
}

.pos-cart-item-bottom > strong[b-t843ek7sdj] {
    font-size: 13px;
}

/* QUITAR PRODUCTO */

.pos-remove[b-t843ek7sdj] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    border: 0;
    border-radius: 8px;
    background: #fff0ed;
    color: #d75d4e;
    font-size: 20px;
    cursor: pointer;
}

.pos-remove:hover[b-t843ek7sdj] {
    background: #ffe0db;
}

/* CONTROL DE CANTIDAD */

.pos-quantity[b-t843ek7sdj] {
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #ece8f4;
    border-radius: 9px;
    padding: 4px;
}

.pos-quantity button[b-t843ek7sdj] {
    border: 0;
    border-radius: 6px;
    width: 25px;
    height: 25px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    font-size: 17px;
    cursor: pointer;
    transition: background .2s;
}

.pos-quantity button:hover:not(:disabled)[b-t843ek7sdj] {
    background: var(--nexo-primary-muted);
}

.pos-quantity button:disabled[b-t843ek7sdj] {
    opacity: .4;
    cursor: not-allowed;
}

.pos-quantity span[b-t843ek7sdj] {
    font-size: 12px;
    font-weight: 800;
}

/* RESUMEN DEL CARRITO */

.pos-cart-summary[b-t843ek7sdj] {
    padding: 22px;
    background: var(--nexo-primary-soft);
    border-top: 1px solid #f0edf6;
}

.pos-summary-row[b-t843ek7sdj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 17px;
}

.pos-summary-row span[b-t843ek7sdj] {
    color: #817992;
}

.pos-summary-row.total[b-t843ek7sdj] {
    border-top: 1px dashed var(--nexo-primary-border);
    padding-top: 18px;
    margin-top: 5px;
}

.pos-summary-row.total strong[b-t843ek7sdj] {
    color: var(--nexo-primary);
    font-size: 23px;
    font-weight: 850;
}

.pos-summary-row.change strong[b-t843ek7sdj] {
    color: #159f7b;
    font-size: 16px;
}

/* MÉTODO DE PAGO */

.pos-field[b-t843ek7sdj] {
    margin-bottom: 15px;
}

.pos-field label[b-t843ek7sdj] {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    color: #655a7d;
}

.pos-field input[b-t843ek7sdj],
.pos-field select[b-t843ek7sdj] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e7e2f0;
    border-radius: 11px;
    padding: 13px;
    background: white;
    color: #28223b;
    outline: none;
    font-size: 12px;
    transition: border-color .2s, box-shadow .2s;
}

.pos-field input:focus[b-t843ek7sdj],
.pos-field select:focus[b-t843ek7sdj] {
    border-color: var(--nexo-primary);
    box-shadow: 0 0 0 3px var(--nexo-primary-focus);
}

.pos-payment-note[b-t843ek7sdj] {
    color: #817992;
    font-size: 11px;
    line-height: 1.6;
    margin-bottom: 17px;
}

/* ==========================================
   BOTÓN CONFIRMAR VENTA
   ========================================== */

.pos-checkout[b-t843ek7sdj] {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 15px;
    background: var(--nexo-primary-gradient);
    color: white;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 8px 20px var(--nexo-primary-shadow);
    transition: transform .2s, filter .2s, box-shadow .2s;
}

.pos-checkout:hover:not(:disabled)[b-t843ek7sdj] {
    filter: brightness(.94);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px var(--nexo-primary-shadow);
}

.pos-checkout:disabled[b-t843ek7sdj] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.pos-clear[b-t843ek7sdj] {
    display: block;
    margin: 13px auto 0;
    border: 0;
    background: transparent;
    color: #9690a5;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.pos-clear:hover[b-t843ek7sdj] {
    color: #d75d4e;
}

/* ==========================================
   ALERTAS
   ========================================== */

.pos-alert[b-t843ek7sdj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 17px;
    margin-bottom: 20px;
    border-radius: 12px;
    font-size: 12px;
}

.pos-alert.success[b-t843ek7sdj] {
    background: #e6faf2;
    color: #128665;
}

.pos-alert.error[b-t843ek7sdj] {
    background: #fff0ed;
    color: #c94f43;
}

.pos-alert button[b-t843ek7sdj] {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
}

.pos-empty[b-t843ek7sdj] {
    padding: 60px 20px;
    text-align: center;
    color: #9690a5;
    font-size: 12px;
}

.pos-empty strong[b-t843ek7sdj] {
    display: block;
    color: #28223b;
    margin-bottom: 10px;
}

/* ==========================================
   MODALES
   ========================================== */

.pos-backdrop[b-t843ek7sdj] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 15px;
    background: #151025a8;
}

.pos-modal[b-t843ek7sdj] {
    width: 100%;
    max-width: 410px;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    background: white;
    border-radius: 22px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 25px 80px #15102540;
}

/* CONFIRMACIÓN DE VENTA */

.pos-success-icon[b-t843ek7sdj] {
    display: grid;
    place-items: center;
    width: 65px;
    height: 65px;
    margin: 0 auto 17px;
    border-radius: 50%;
    background: #e6faf2;
    color: #159f7b;
    font-size: 34px;
    font-weight: 850;
}

.pos-modal h2[b-t843ek7sdj] {
    font-size: 22px;
    margin: 0 0 10px;
}

.pos-modal > p[b-t843ek7sdj] {
    color: #9690a5;
    font-size: 12px;
    line-height: 1.6;
}

.pos-result[b-t843ek7sdj] {
    margin: 24px 0;
    padding: 17px;
    border-radius: 13px;
    background: var(--nexo-primary-soft);
}

.pos-result > div[b-t843ek7sdj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    text-align: left;
    font-size: 12px;
}

.pos-result span[b-t843ek7sdj] {
    color: #817992;
}

.pos-result strong[b-t843ek7sdj] {
    text-align: right;
    overflow-wrap: anywhere;
}

/* COMPROBANTE */

.pos-receipt-link[b-t843ek7sdj] {
    width: 100%;
    margin-bottom: 12px;
}

/* ==========================================
   HISTORIAL DE VENTAS
   ========================================== */

.pos-modal.history[b-t843ek7sdj] {
    max-width: 570px;
    text-align: left;
}

.pos-history-heading[b-t843ek7sdj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.pos-history-list[b-t843ek7sdj] {
    max-height: 450px;
    overflow-y: auto;
}

.pos-history-item[b-t843ek7sdj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding: 16px 0;
    border-bottom: 1px solid #f0edf6;
}

.pos-history-item strong[b-t843ek7sdj] {
    font-size: 12px;
}

.pos-history-item small[b-t843ek7sdj] {
    display: block;
    color: #9690a5;
    font-size: 11px;
    margin-top: 7px;
}

.pos-history-actions[b-t843ek7sdj] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.pos-history-receipt[b-t843ek7sdj] {
    display: inline-block;
    border-radius: 8px;
    background: var(--nexo-primary-light);
    color: var(--nexo-primary);
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.pos-history-receipt:hover[b-t843ek7sdj] {
    background: var(--nexo-primary-muted);
    color: var(--nexo-primary-hover);
}

/* ==========================================
   ACCESIBILIDAD
   ========================================== */

.pos-add:focus-visible[b-t843ek7sdj],
.pos-checkout:focus-visible[b-t843ek7sdj],
.pos-outline:focus-visible[b-t843ek7sdj],
.pos-history-receipt:focus-visible[b-t843ek7sdj],
.pos-quantity button:focus-visible[b-t843ek7sdj] {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 3px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1100px) {
    .pos-layout[b-t843ek7sdj] {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .pos-products[b-t843ek7sdj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .pos-header[b-t843ek7sdj] {
        flex-direction: column;
        align-items: stretch;
    }

    .pos-layout[b-t843ek7sdj] {
        grid-template-columns: 1fr;
    }

    .pos-cart[b-t843ek7sdj] {
        position: static;
    }

    .pos-products[b-t843ek7sdj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 550px) {
    .pos-header h1[b-t843ek7sdj] {
        font-size: 24px;
    }

    .pos-products[b-t843ek7sdj] {
        grid-template-columns: 1fr;
    }

    .pos-catalogo[b-t843ek7sdj] {
        padding: 15px;
    }

    .pos-cart-header[b-t843ek7sdj],
    .pos-cart-summary[b-t843ek7sdj] {
        padding: 17px;
    }

    .pos-modal[b-t843ek7sdj] {
        padding: 22px;
    }

    .pos-history-item[b-t843ek7sdj] {
        gap: 10px;
    }

    .pos-history-actions[b-t843ek7sdj] {
        min-width: 0;
    }
}

/* MOVIMIENTO REDUCIDO */

@media (prefers-reduced-motion: reduce) {
    .pos-product[b-t843ek7sdj],
    .pos-checkout[b-t843ek7sdj],
    .pos-add[b-t843ek7sdj] {
        transition: none;
    }

    .pos-product:hover[b-t843ek7sdj],
    .pos-checkout:hover[b-t843ek7sdj],
    .pos-add:hover[b-t843ek7sdj] {
        transform: none;
    }
}