/* MODO ERP COMPACTO TIPO SAP */

html {
    font-size: 13px;
}

body.erp-compact {
    background-color: #f5f6f8;
    color: #1f2937;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.app-menu {
    padding-top: .75rem;
}
/* SIDEBAR */

/*.app-sidebar {
    transition: all .18s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}*/

.app-sidebar {
    position: sticky;
    top: 42px;
    height: calc(100vh - 42px);
    overflow-y: auto;
    overflow-x: hidden;
    align-self: flex-start;
    transition: width .22s ease, flex-basis .22s ease, max-width .22s ease;
}

    .app-sidebar:not(.app-sidebar-collapsed) [data-bs-toggle="tooltip"] {
        pointer-events: auto;
    }

.erp-compact .sidebar,
.erp-compact .app-sidebar {
    font-size: 1.3rem;
}

    .erp-compact .sidebar .nav-link,
    .erp-compact .app-sidebar .nav-link {
        padding: .45rem .75rem;
        border-radius: .35rem;
    }

        .erp-compact .sidebar .nav-link.active,
        .erp-compact .app-sidebar .nav-link.active {
            font-weight: 600;
        }

/* CABECERA DEL SIDEBAR */

.app-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    padding: .65rem .75rem .85rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid #e5e7eb;
}

.app-sidebar-brand {
    min-width: 0;
}

.app-sidebar-brand-title {
    font-weight: 700;
    line-height: 1.05;
    color: #1f2937;
}

.app-sidebar-brand-subtitle {
    font-size: .72rem;
    color: #6b7280;
    line-height: 1.05;
}

/* BOTÓN EXPANDIR / CONTRAER SIDEBAR */

/*.app-sidebar-floating-toggle {
    position: absolute;
    top: 15px;
    right: 20px;
    left: auto !important;
    z-index: 1050;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: .75rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
    transition: left .18s ease, background .18s ease, color .18s ease;
}

.app-sidebar-floating-toggle i {
    font-size: .75rem;
    line-height: 1;
}*/

.app-sidebar-chatgpt-toggle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border: 0;
    background: transparent;
    color: #64748b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: all .18s ease;
    overflow: hidden;
}

    .app-sidebar-chatgpt-toggle:hover {
        background: #eef3f8;
        color: #0f5f9f;
    }

.sidebar-toggle-icon {
    display: block;
    line-height: 1;
}

.sidebar-toggle-logo-img {
    display: none;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* SIDEBAR COLAPSADO */

.app-sidebar-collapsed {
    width: 72px !important;
    flex: 0 0 72px !important;
    max-width: 72px !important;
}

    .app-sidebar-collapsed .app-sidebar-header {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: .35rem;
        padding: .65rem .25rem .75rem;
    }

    .app-sidebar-collapsed .app-sidebar-chatgpt-toggle {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .app-sidebar-collapsed .sidebar-toggle-icon {
        display: none;
    }

    .app-sidebar-collapsed .sidebar-toggle-logo-img {
        display: block;
    }

    .app-sidebar-collapsed .app-sidebar-brand {
        display: none;
    }

    /* MENÚ COLAPSADO */

    .app-sidebar-collapsed .app-menu {
        display: block;
        padding: 0 .25rem;
    }

    .app-sidebar-collapsed .app-menu-group {
        margin-bottom: .35rem;
    }

    .app-sidebar-collapsed .app-menu-title {
        justify-content: center;
        gap: .15rem;
        padding: .45rem .2rem;
        margin-bottom: .15rem;
        border-bottom: 0;
    }

    .app-sidebar-collapsed .app-menu-title-text {
        justify-content: center;
        gap: 0;
    }

        .app-sidebar-collapsed .app-menu-title-text > span {
            display: none;
        }

        .app-sidebar-collapsed .app-menu-title-text i {
            font-size: 1.1rem;
        }

    .app-sidebar-collapsed .app-menu-icon {
        width: 12px;
        font-size: .75rem;
    }

    .app-sidebar-collapsed .app-menu-link {
        justify-content: center;
        gap: 0;
        padding: .5rem .25rem;
    }

        .app-sidebar-collapsed .app-menu-link span {
            display: none;
        }

    .app-sidebar-collapsed .app-menu-link-icon {
        width: 100%;
        min-width: 0;
        font-size: 1.05rem;
    }

/* CONTENEDORES */

.erp-compact .container,
.erp-compact .container-fluid {
    padding-top: 0;
    padding-bottom: .75rem;
}

/* CARDS */

.erp-compact .card {
    border: 1px solid #d9dee7;
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.erp-compact .card-header {
    padding: .6rem .85rem;
    font-size: .95rem;
    font-weight: 600;
    background-color: #f8f9fb;
}

.erp-compact .card-body {
    padding: .85rem;
}

/* TÍTULOS */

.erp-compact h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: .75rem;
    color: #334155;
}

.erp-compact h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .65rem;
    color: #71808F;
    text-transform: uppercase;
}

.erp-compact h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .5rem;
    color: #64748b;
}

.erp-compact h4,
.erp-compact h5 {
    margin-bottom: .5rem;
    color: #64748b;
}

/* FORMULARIOS */

.erp-compact .form-label {
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.erp-compact .form-control,
.erp-compact .form-select {
    min-height: 34px;
    padding: .32rem .6rem;
    font-size: .9rem;
    border-radius: .35rem;
}

.erp-compact textarea.form-control {
    min-height: 70px;
}

.erp-compact .form-check-label {
    font-size: .88rem;
}

.erp-compact .row {
    --bs-gutter-x: 0.9rem;
    --bs-gutter-y: 0.6rem;
}

/* BOTONES */

.erp-compact .btn {
    font-size: .88rem;
    padding: .35rem .7rem;
    border-radius: .35rem;
    font-weight: 600;
}

.erp-compact .btn-sm {
    font-size: .8rem;
    padding: .22rem .5rem;
}

/* TABLAS */

.erp-compact .table {
    font-size: .88rem;
    margin-bottom: 0;
    vertical-align: middle;
}

    .erp-compact .table th,
    .erp-compact .table td {
        padding: .45rem .55rem;
    }

    .erp-compact .table thead th {
        font-size: .82rem;
        text-transform: uppercase;
        letter-spacing: .02em;
        white-space: nowrap;
        background-color: #eef2f7;
        border-bottom: 1px solid #d7dde7;
    }

.erp-compact .table-responsive {
    border-radius: .45rem;
}

.erp-compact .table .btn {
    margin-right: .15rem;
}

/* BADGES / ALERTAS / MODALES */

.erp-compact .badge {
    font-size: .75rem;
    padding: .35em .55em;
}

.erp-compact .alert {
    padding: .6rem .8rem;
    font-size: .88rem;
    border-radius: .4rem;
}

.erp-compact .modal-header {
    padding: .65rem .85rem;
}

.erp-compact .modal-body {
    padding: .85rem;
}

.erp-compact .modal-footer {
    padding: .65rem .85rem;
}

/* PAGINACIÓN */

.erp-compact .pagination .page-link {
    padding: .3rem .55rem;
    font-size: .86rem;
}

/* UTILIDADES COMPACTAS */

.erp-compact .compact-section {
    margin-bottom: .75rem;
}

.erp-compact .compact-toolbar {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

/* NAVBAR / LAYOUT */

header {
    position: sticky;
    top: 0;
    z-index: 1200;
}

.erp-compact .navbar {
    min-height: 40px;
    padding-top: .25rem;
    padding-bottom: .25rem;
    background: #ffffff !important;
    border-bottom: 1px solid #d7dce3 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.erp-compact .navbar-brand {
    font-size: .95rem;
    font-weight: 700;
    /*    color: #1f2937;
*/
}

.erp-compact .nav-link {
    font-size: 0.80rem; /*tamaño de las letras en las opciones de cada grupo*/
    padding: .45rem .7rem;
}

.erp-compact aside {
    background: #ffffff;
    border-right: 1px solid #d7dce3;
    min-height: calc(100vh - 42px);
    padding-top: 0;
}

.app-main-content {
    padding-top: 1.5rem;
    height: calc(100vh - 42px);
    overflow-y: auto;
}

body.erp-compact {
    overflow: hidden;
}

.app-navbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
}

    .app-navbar-center .navbar-brand {
        margin: 0;
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: .03em;
        /*        color: #0f5f9f !important;
*/ pointer-events: auto;
    }

/* MENÚ LATERAL */

.app-menu {
    padding: 0 .35rem;
}

.app-menu-group {
    margin-bottom: .85rem;
}

.app-menu-title {
    font-size: .90rem; /*letras de los grupos en el navbar*/
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .35rem .65rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid #e5e7eb;
    text-shadow: 0 1px 1px rgba(255,255,255,.75);
}

.app-menu-list {
    gap: .12rem;
}

.app-menu-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #243447;
    padding: .42rem .65rem;
    border-radius: .35rem;
    font-weight: 400;
}

    .app-menu-link:hover {
        background: #eef3f8;
        color: #0f5f9f;
    }

/* TOGGLE DE GRUPOS DEL MENÚ */

.app-menu-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

    .app-menu-toggle:hover {
        color: #0f5f9f;
    }

.app-menu-icon {
    font-size: .9rem;
    font-weight: 700;
    color: #9ca3af;
    width: 18px;
    text-align: center;
}

.app-menu-list.collapsed {
    display: none;
}

/* FOOTER */

.erp-compact footer,
.app-footer {
    height: 30px;
    background: #ffffff;
    border-top: 1px solid #d7dce3;
    color: #6b7280;
    font-size: .78rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .9rem;
}


.app-auto-alert {
    animation: appAlertFadeIn .25s ease;
}

@keyframes appAlertFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

@media (max-width: 767.98px) {
    .erp-compact aside {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid #d7dce3;
        margin-bottom: .75rem;
    }

    .erp-compact .navbar .container-fluid {
        gap: .5rem;
    }

    .erp-compact .navbar-brand {
        white-space: normal;
    }
}


body {
    opacity: 0;
    transition: opacity 0.18s ease-in-out;
}

    body.page-loaded {
        opacity: 1;
    }

.page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease-in-out;
}

    .page-transition-overlay.is-active {
        opacity: 1;
        pointer-events: all;
    }

.page-transition-box {
    min-width: 145px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 600;
}

.page-transition-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: pageTransitionSpin 0.75s linear infinite;
}

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


html,
body {
    min-height: 100%;
}

    body.erp-compact {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

        body.erp-compact > .container-fluid {
            flex: 1 0 auto;
        }

.app-footer {
    flex-shrink: 0;
}




.app-menu-title-text {
    display: flex;
    align-items: center;
    gap: .45rem;
}

    .app-menu-title-text i {
        font-size: .85rem;
    }

.app-menu-link-icon {
    width: 18px;
    min-width: 18px;
    text-align: center;
    font-size: .95rem;
    opacity: .9;
}

/* EFECTO PERSIANA ABRIÉNDOSE */
.persiana-transition {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    pointer-events: none;
}

.persiana-riel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(180deg, #c0ccd8 0%, #8fa4bc 40%, #6a8aaa 100%);
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

    .persiana-riel::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: rgba(255,255,255,0.45);
        border-radius: 1px;
    }

.persiana-lamas {
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .persiana-lamas span {
        flex: 1;
        position: relative;
        transform-origin: top center;
        will-change: transform, opacity;
        background: linear-gradient( 180deg, #c8cdd4 0%, #a8aeb7 8%, #7e848f 18%, #5c6370 30%, #4a5058 45%, #5c6370 60%, #7e848f 75%, #9aa0a9 88%, #b8bec6 100% );
        animation: abrirLama3D 1.1s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

        /* REFLEJO SUPERIOR */
        .persiana-lamas span::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 15%, rgba(255,255,255,0.40) 40%, rgba(255,255,255,0.50) 50%, rgba(255,255,255,0.40) 60%, rgba(255,255,255,0.08) 85%, transparent 100% );
        }

        /* SOMBRA INFERIOR ENTRE LAMAS */
        .persiana-lamas span::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%);
        }

@keyframes abrirLama3D {
    0% {
        transform: scaleY(1) perspective(400px) rotateX(0deg);
        opacity: 1;
    }

    20% {
        transform: scaleY(0.9) perspective(400px) rotateX(-10deg);
        opacity: 1;
    }

    55% {
        transform: scaleY(0.18) perspective(400px) rotateX(-32deg);
        opacity: 0.7;
    }

    80% {
        transform: scaleY(0.04) perspective(400px) rotateX(-48deg);
        opacity: 0.25;
    }

    100% {
        transform: scaleY(0) perspective(400px) rotateX(-60deg);
        opacity: 0;
    }
}

/* DELAYS EN CASCADA — LAS DE ABAJO PRIMERO */
.persiana-lamas span:nth-child(16) {
    animation-delay: 0.00s;
}

.persiana-lamas span:nth-child(15) {
    animation-delay: 0.15s;
}

.persiana-lamas span:nth-child(14) {
    animation-delay: 0.30s;
}

.persiana-lamas span:nth-child(13) {
    animation-delay: 0.45s;
}

.persiana-lamas span:nth-child(12) {
    animation-delay: 0.60s;
}

.persiana-lamas span:nth-child(11) {
    animation-delay: 0.75s;
}

.persiana-lamas span:nth-child(10) {
    animation-delay: 0.90s;
}

.persiana-lamas span:nth-child(9) {
    animation-delay: 1.05s;
}

.persiana-lamas span:nth-child(8) {
    animation-delay: 1.20s;
}

.persiana-lamas span:nth-child(7) {
    animation-delay: 1.35s;
}

.persiana-lamas span:nth-child(6) {
    animation-delay: 1.50s;
}

.persiana-lamas span:nth-child(5) {
    animation-delay: 1.65s;
}

.persiana-lamas span:nth-child(4) {
    animation-delay: 1.80s;
}

.persiana-lamas span:nth-child(3) {
    animation-delay: 1.95s;
}

.persiana-lamas span:nth-child(2) {
    animation-delay: 2.10s;
}

.persiana-lamas span:nth-child(1) {
    animation-delay: 2.25s;
}

/* OCULTAR EL OVERLAY COMPLETO AL TERMINAR */
.persiana-transition {
    animation: ocultarPersiana 4.2s ease forwards;
}

@keyframes ocultarPersiana {
    0%, 80% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}




/* PERSIANA: EFECTO CIERRE */
.persiana-closing {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    pointer-events: all;
    animation: mostrarPersiana 0.3s ease forwards;
}

@keyframes mostrarPersiana {
    from {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}

.persiana-closing .persiana-riel {
    background: linear-gradient(180deg, #e2e6ea 0%, #b0b7c0 40%, #8a9199 100%);
}

.persiana-closing .persiana-lamas span {
    transform: scaleY(0) perspective(400px) rotateX(60deg);
    opacity: 0;
    animation: cerrarLama3D 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes cerrarLama3D {
    0% {
        transform: scaleY(0) perspective(400px) rotateX(60deg);
        opacity: 0;
    }

    20% {
        transform: scaleY(0.04) perspective(400px) rotateX(48deg);
        opacity: 0.25;
    }

    55% {
        transform: scaleY(0.18) perspective(400px) rotateX(32deg);
        opacity: 0.7;
    }

    80% {
        transform: scaleY(0.9) perspective(400px) rotateX(10deg);
        opacity: 1;
    }

    100% {
        transform: scaleY(1) perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

/* LAS DE ARRIBA BAJAN PRIMERO */
.persiana-closing .persiana-lamas span:nth-child(1) {
    animation-delay: 0.00s;
}

.persiana-closing .persiana-lamas span:nth-child(2) {
    animation-delay: 0.20s;
}

.persiana-closing .persiana-lamas span:nth-child(3) {
    animation-delay: 0.40s;
}

.persiana-closing .persiana-lamas span:nth-child(4) {
    animation-delay: 0.60s;
}

.persiana-closing .persiana-lamas span:nth-child(5) {
    animation-delay: 0.80s;
}

.persiana-closing .persiana-lamas span:nth-child(6) {
    animation-delay: 1.00s;
}

.persiana-closing .persiana-lamas span:nth-child(7) {
    animation-delay: 1.20s;
}

.persiana-closing .persiana-lamas span:nth-child(8) {
    animation-delay: 1.40s;
}

.persiana-closing .persiana-lamas span:nth-child(9) {
    animation-delay: 1.60s;
}

.persiana-closing .persiana-lamas span:nth-child(10) {
    animation-delay: 1.80s;
}

.persiana-closing .persiana-lamas span:nth-child(11) {
    animation-delay: 2.00s;
}

.persiana-closing .persiana-lamas span:nth-child(12) {
    animation-delay: 2.20s;
}

.persiana-closing .persiana-lamas span:nth-child(13) {
    animation-delay: 2.40s;
}

.persiana-closing .persiana-lamas span:nth-child(14) {
    animation-delay: 2.60s;
}

.persiana-closing .persiana-lamas span:nth-child(15) {
    animation-delay: 2.80s;
}

.persiana-closing .persiana-lamas span:nth-child(16) {
    animation-delay: 3.00s;
}





/* MODAL CONFIGURAR PRECIOS DE CLIENTE */
.modal-config-cliente {
    max-width: 620px;
    margin-top: -150px;
}

    .modal-config-cliente .modal-content {
        border-radius: .55rem;
    }

    .modal-config-cliente .modal-header {
        padding: .75rem 1rem;
    }

    .modal-config-cliente .modal-body {
        padding: 1rem;
    }

    .modal-config-cliente .modal-footer {
        padding: .75rem 1rem;
    }

    .modal-config-cliente .form-label {
        font-weight: 600;
        margin-bottom: .35rem;
    }

    .modal-config-cliente .form-select {
        min-height: 38px;
    }