/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =========================================================
   ESTRUCTURA PRINCIPAL
   ========================================================= */

.page[b-uc3i9cqspo] {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}


/* =========================================================
   CONTENEDOR DEL SIDEBAR
   ========================================================= */

.sidebar[b-uc3i9cqspo] {
    flex: 0 0 auto;
    width: fit-content;
    height: 100vh;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

main[b-uc3i9cqspo] {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}


/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

.top-row[b-uc3i9cqspo] {
    height: 58px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    position: relative;
    z-index: 100;
}


/* =========================================================
   IZQUIERDA - UBICACIÓN
   ========================================================= */

.topbar-left[b-uc3i9cqspo] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: 13px;
    white-space: nowrap;
}

.breadcrumb-icon[b-uc3i9cqspo] {
    font-size: 15px;
    color: #64748b;
}

.breadcrumb-separator[b-uc3i9cqspo] {
    color: #cbd5e1;
}


/* =========================================================
   DERECHA
   ========================================================= */

.topbar-right[b-uc3i9cqspo] {
    display: flex;
    align-items: center;
    gap: 18px;
}


/* =========================================================
   BOTÓN NOTIFICACIONES
   ========================================================= */

.topbar-button[b-uc3i9cqspo] {
    position: relative;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
    transition: background .2s ease, color .2s ease;
}

    .topbar-button:hover[b-uc3i9cqspo] {
        background: #f1f5f9;
        color: #1e40af;
    }

.topbar-icon[b-uc3i9cqspo] {
    font-size: 20px;
}

.notification-badge[b-uc3i9cqspo] {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 20px;
    background: #dc2626;
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}


/* =========================================================
   EMPRESA
   ========================================================= */

.topbar-company[b-uc3i9cqspo] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-right: 18px;
    border-right: 1px solid #e5e7eb;
}

.company-icon[b-uc3i9cqspo] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #1e3a8a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
}

.company-info[b-uc3i9cqspo] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.company-name[b-uc3i9cqspo] {
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
}

.company-label[b-uc3i9cqspo] {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 10px;
}


/* =========================================================
   USUARIO
   ========================================================= */

.topbar-user[b-uc3i9cqspo] {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    background: transparent;
    padding: 4px 0;
    cursor: pointer;
    text-align: left;
}

.user-avatar[b-uc3i9cqspo] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eff6ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid #dbeafe;
}

.user-info[b-uc3i9cqspo] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.user-name[b-uc3i9cqspo] {
    max-width: 180px;
    color: #1e293b;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role[b-uc3i9cqspo] {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 10px;
}

.user-arrow[b-uc3i9cqspo] {
    margin-left: 3px;
    color: #64748b;
    font-size: 15px;
}


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

@media (max-width: 900px) {

    .company-info[b-uc3i9cqspo] {
        display: none;
    }

    .topbar-company[b-uc3i9cqspo] {
        border-right: 0;
        padding-right: 0;
    }

    .user-info[b-uc3i9cqspo] {
        display: none;
    }

    .topbar-left[b-uc3i9cqspo] {
        font-size: 12px;
    }
}

/* =========================================================
   CONTENIDO
   ========================================================= */

.content[b-uc3i9cqspo] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 24px;
}


/* =========================================================
   BOTÓN MENÚ MÓVIL
   ========================================================= */

.mobile-menu-button[b-uc3i9cqspo] {
    display: none;
    position: fixed;
    top: 10px;
    left: 14px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 9px;
    background: #071a41;
    color: #ffffff;
    font-size: 21px;
    cursor: pointer;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

    .mobile-menu-button:hover[b-uc3i9cqspo] {
        background: #102858;
    }


/* =========================================================
   ERROR DE BLAZOR
   ========================================================= */

#blazor-error-ui[b-uc3i9cqspo] {
    background: #ffffff;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0,0,0,.15);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 3000;
}

    #blazor-error-ui .dismiss[b-uc3i9cqspo] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


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

@media (max-width: 900px) {

    .page[b-uc3i9cqspo] {
        display: block;
        width: 100%;
        min-height: 100vh;
    }


    .sidebar[b-uc3i9cqspo] {
        width: 0;
        height: 0;
        position: static;
    }


    main[b-uc3i9cqspo] {
        width: 100%;
        min-width: 0;
    }


    /* Mostrar botón móvil */

    .mobile-menu-button[b-uc3i9cqspo] {
        display: flex;
    }


    .top-row[b-uc3i9cqspo] {
        height: 56px;
        padding-left: 68px;
        padding-right: 16px;
    }


    .content[b-uc3i9cqspo] {
        padding: 20px;
    }
}


/* =========================================================
   CELULAR PEQUEÑO
   ========================================================= */

@media (max-width: 600px) {

    .content[b-uc3i9cqspo] {
        padding: 16px;
    }

    .top-row[b-uc3i9cqspo] {
        padding-left: 68px;
        padding-right: 16px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.sercom-sidebar[b-hcf1vr9miq] {
    width: 250px;
    height: 100vh;
    background: linear-gradient( 180deg, #071a41 0%, #101b4d 55%, #24134d 100% );
    color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    transition: width .25s ease, transform .25s ease;
}


/* =========================================================
   MARCA
   ========================================================= */

.sidebar-brand[b-hcf1vr9miq] {
    height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.brand-logo[b-hcf1vr9miq] {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ffffff;
    color: #0b1d45;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
}

.brand-info[b-hcf1vr9miq] {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.brand-name[b-hcf1vr9miq] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .5px;
}

.brand-subtitle[b-hcf1vr9miq] {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    letter-spacing: 2px;
}


/* =========================================================
   BOTÓN CONTRAER
   ========================================================= */

.sidebar-toggle[b-hcf1vr9miq] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}

    .sidebar-toggle:hover[b-hcf1vr9miq] {
        background: rgba(255,255,255,.16);
        color: #ffffff;
    }


/* =========================================================
   MENÚ
   ========================================================= */

.sidebar-menu[b-hcf1vr9miq] {
    padding: 18px 12px;
    flex: 1;
    overflow-y: auto;
}


/* =========================================================
   ITEM PRINCIPAL
   ========================================================= */

[b-hcf1vr9miq] .menu-item {
    width: 100%;
    min-height: 46px;
    margin: 2px 0;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-radius: 8px;
    box-sizing: border-box;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

    [b-hcf1vr9miq] .menu-item:hover {
        background: rgba(255,255,255,.07);
        color: #ffffff;
    }

    [b-hcf1vr9miq] .menu-item.active {
        background: rgba(255,255,255,.13);
        color: #ffffff;
    }


/* =========================================================
   BOTONES
   ========================================================= */

[b-hcf1vr9miq] .menu-button {
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    cursor: pointer;
    text-align: left;
}


/* =========================================================
   ICONOS
   ========================================================= */

.menu-icon[b-hcf1vr9miq] {
    width: 22px;
    min-width: 22px;
    text-align: center;
    font-size: 16px;
    opacity: .75;
}


/* =========================================================
   TEXTO
   ========================================================= */

.menu-text[b-hcf1vr9miq] {
    flex: 1;
    font-size: 14px;
    white-space: nowrap;
}


/* =========================================================
   FLECHA
   ========================================================= */

.menu-arrow[b-hcf1vr9miq] {
    font-size: 18px;
    color: rgba(255,255,255,.4);
    transition: transform .2s ease, color .2s ease;
}

    .menu-arrow.open[b-hcf1vr9miq] {
        transform: rotate(90deg);
        color: rgba(255,255,255,.75);
    }


/* =========================================================
   GRUPO
   ========================================================= */

.menu-group[b-hcf1vr9miq] {
    margin: 2px 0;
}


/* =========================================================
   SUBMENÚ
   ========================================================= */

.submenu[b-hcf1vr9miq] {
    padding: 2px 0 6px 49px;
}

[b-hcf1vr9miq] .submenu-item {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: rgba(255,255,255,.52);
    font-size: 13px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

    [b-hcf1vr9miq] .submenu-item:hover {
        background: rgba(255,255,255,.06);
        color: #ffffff;
    }

    [b-hcf1vr9miq] .submenu-item.active {
        color: #ffffff;
        background: rgba(255,255,255,.08);
    }


/* =========================================================
   PIE
   ========================================================= */

.sidebar-footer[b-hcf1vr9miq] {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.system-version[b-hcf1vr9miq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255,255,255,.45);
    font-size: 11px;
}

    .system-version span:last-child[b-hcf1vr9miq] {
        color: rgba(255,255,255,.28);
    }


/* =========================================================
   SIDEBAR CONTRAÍDO - PC
   ========================================================= */

.sercom-sidebar.collapsed[b-hcf1vr9miq] {
    width: 76px;
}

    .sercom-sidebar.collapsed .sidebar-brand[b-hcf1vr9miq] {
        padding: 0;
        justify-content: center;
        gap: 0;
    }

    .sercom-sidebar.collapsed .brand-info[b-hcf1vr9miq] {
        display: none;
    }

    .sercom-sidebar.collapsed .sidebar-toggle[b-hcf1vr9miq] {
        position: absolute;
        top: 82px;
        left: 58px;
        width: 24px;
        height: 24px;
        background: #172554;
        z-index: 10;
    }

        .sercom-sidebar.collapsed .sidebar-toggle span[b-hcf1vr9miq] {
            transform: rotate(180deg);
        }

    .sercom-sidebar.collapsed .sidebar-menu[b-hcf1vr9miq] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sercom-sidebar.collapsed .menu-item[b-hcf1vr9miq] {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

    .sercom-sidebar.collapsed .menu-text[b-hcf1vr9miq] {
        display: none;
    }

    .sercom-sidebar.collapsed .menu-arrow[b-hcf1vr9miq] {
        display: none;
    }

    .sercom-sidebar.collapsed .menu-icon[b-hcf1vr9miq] {
        width: 30px;
        min-width: 30px;
        font-size: 18px;
    }

    .sercom-sidebar.collapsed .sidebar-footer[b-hcf1vr9miq] {
        padding: 16px 10px;
    }

    .sercom-sidebar.collapsed .system-version[b-hcf1vr9miq] {
        justify-content: center;
    }

    .sercom-sidebar.collapsed .footer-text[b-hcf1vr9miq] {
        display: none;
    }


/* =========================================================
   RESPONSIVE - CELULAR / TABLET
   ========================================================= */

@media (max-width: 900px) {

    .sercom-sidebar[b-hcf1vr9miq] {
        position: fixed;
        left: 0;
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: 1500;
        transform: translateX(-100%);
        box-shadow: 0 20px 60px rgba(0,0,0,.35);
    }

        .sercom-sidebar.mobile-open[b-hcf1vr9miq] {
            transform: translateX(0);
        }


        /* En móvil ignoramos el estado contraído */

        .sercom-sidebar.collapsed[b-hcf1vr9miq] {
            width: 280px;
            transform: translateX(-100%);
        }

            .sercom-sidebar.collapsed.mobile-open[b-hcf1vr9miq] {
                transform: translateX(0);
            }


            .sercom-sidebar.collapsed .brand-info[b-hcf1vr9miq],
            .sercom-sidebar.collapsed .menu-text[b-hcf1vr9miq],
            .sercom-sidebar.collapsed .menu-arrow[b-hcf1vr9miq] {
                display: block;
            }

            .sercom-sidebar.collapsed .sidebar-brand[b-hcf1vr9miq] {
                padding: 0 16px 0 22px;
                justify-content: flex-start;
                gap: 12px;
            }

            .sercom-sidebar.collapsed .menu-item[b-hcf1vr9miq] {
                justify-content: flex-start;
                padding-left: 14px;
                padding-right: 14px;
                gap: 13px;
            }

            .sercom-sidebar.collapsed .sidebar-footer[b-hcf1vr9miq] {
                padding: 16px 20px;
            }

            .sercom-sidebar.collapsed .footer-text[b-hcf1vr9miq] {
                display: inline;
            }

            .sercom-sidebar.collapsed .sidebar-toggle[b-hcf1vr9miq] {
                position: static;
                width: 30px;
                height: 30px;
            }
}


/* =========================================================
   CELULAR PEQUEÑO
   ========================================================= */

@media (max-width: 600px) {

    .sercom-sidebar[b-hcf1vr9miq] {
        width: 280px;
    }

        .sercom-sidebar.collapsed[b-hcf1vr9miq] {
            width: 280px;
        }
}
.mobile-menu-button[b-hcf1vr9miq] {
    display: none;
}

@media (max-width: 900px) {
    .mobile-menu-button[b-hcf1vr9miq] {
        display: flex;
        position: fixed;
        top: 10px;
        left: 14px;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 9px;
        background: #071a41;
        color: #fff;
        font-size: 21px;
        cursor: pointer;
        z-index: 2000;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,.18);
    }
}
/* Cerrar sesión */
.logout-item[b-hcf1vr9miq] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.logout-link[b-hcf1vr9miq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px !important;
    border-radius: 8px;
    color: #ffffff !important;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

    .logout-link:hover[b-hcf1vr9miq] {
        background-color: rgba(255, 255, 255, 0.10);
    }

    .logout-link span:first-child[b-hcf1vr9miq] {
        font-size: 15px;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-2dcqc8oc9s],
.components-reconnect-repeated-attempt-visible[b-2dcqc8oc9s],
.components-reconnect-failed-visible[b-2dcqc8oc9s],
.components-pause-visible[b-2dcqc8oc9s],
.components-resume-failed-visible[b-2dcqc8oc9s],
.components-rejoining-animation[b-2dcqc8oc9s] {
    display: none;
}

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


#components-reconnect-modal[b-2dcqc8oc9s] {
    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-2dcqc8oc9s 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-2dcqc8oc9s {
    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/Administracion/Empresas.razor.rz.scp.css */
/* =========================================================
   PÁGINA EMPRESAS
   ========================================================= */

.empresas-page[b-aor9mqh704] {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 32px;
    box-sizing: border-box;
}


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

.page-header[b-aor9mqh704] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

    .page-header h1[b-aor9mqh704] {
        margin: 0;
        color: #111827;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -.5px;
    }

    .page-header p[b-aor9mqh704] {
        margin: 7px 0 0;
        color: #6b7280;
        font-size: 14px;
    }


/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary[b-aor9mqh704] {
    border: none;
    border-radius: 8px;
    padding: 10px 17px;
    background: #0b2a63;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}

    .btn-primary:hover[b-aor9mqh704] {
        background: #123b82;
    }

    .btn-primary:active[b-aor9mqh704] {
        transform: translateY(1px);
    }

    .btn-primary span[b-aor9mqh704] {
        font-size: 17px;
        margin-right: 5px;
    }

.btn-secondary[b-aor9mqh704] {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 17px;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease;
}

    .btn-secondary:hover[b-aor9mqh704] {
        background: #f9fafb;
    }


/* =========================================================
   RESUMEN
   ========================================================= */

.summary-card[b-aor9mqh704] {
    width: 270px;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
    padding: 17px 20px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.summary-icon[b-aor9mqh704] {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef4ff;
    color: #0b2a63;
    font-size: 21px;
}

.summary-label[b-aor9mqh704] {
    color: #6b7280;
    font-size: 12px;
    margin-bottom: 3px;
}

.summary-value[b-aor9mqh704] {
    color: #111827;
    font-size: 25px;
    font-weight: 700;
}


/* =========================================================
   TABLA
   ========================================================= */

.table-card[b-aor9mqh704] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

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

table[b-aor9mqh704] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

thead[b-aor9mqh704] {
    background: #f8fafc;
}

th[b-aor9mqh704] {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

td[b-aor9mqh704] {
    padding: 15px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
    font-size: 13px;
    vertical-align: middle;
}

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

tbody tr:hover[b-aor9mqh704] {
    background: #fafcff;
}

td strong[b-aor9mqh704] {
    color: #111827;
    font-weight: 600;
}

.actions-column[b-aor9mqh704] {
    width: 110px;
    text-align: center;
}

.actions[b-aor9mqh704] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-action[b-aor9mqh704] {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #ffffff;
    cursor: pointer;
    font-size: 14px;
    transition: background .2s ease, border-color .2s ease;
}

    .btn-action.edit[b-aor9mqh704] {
        color: #1d4ed8;
    }

        .btn-action.edit:hover[b-aor9mqh704] {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

    .btn-action.deactivate[b-aor9mqh704] {
        color: #dc2626;
    }

        .btn-action.deactivate:hover[b-aor9mqh704] {
            background: #fef2f2;
            border-color: #fecaca;
        }

    .btn-action.activate[b-aor9mqh704] {
        color: #15803d;
    }

        .btn-action.activate:hover[b-aor9mqh704] {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }


/* =========================================================
   ESTADOS
   ========================================================= */

.status[b-aor9mqh704] {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
}

    .status.active[b-aor9mqh704] {
        background: #ecfdf3;
        color: #15803d;
    }

    .status.inactive[b-aor9mqh704] {
        background: #fef2f2;
        color: #b91c1c;
    }


/* =========================================================
   CARGANDO
   ========================================================= */

.loading[b-aor9mqh704] {
    padding: 55px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.empty-state[b-aor9mqh704] {
    padding: 65px 25px;
    text-align: center;
}

.empty-icon[b-aor9mqh704] {
    width: 58px;
    height: 58px;
    margin: 0 auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef4ff;
    font-size: 25px;
}

.empty-state h3[b-aor9mqh704] {
    margin: 0;
    color: #1f2937;
    font-size: 18px;
    font-weight: 600;
}

.empty-state p[b-aor9mqh704] {
    max-width: 430px;
    margin: 8px auto 20px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================================
   MODAL EMPRESA
   ========================================================= */

.empresa-modal-overlay[b-aor9mqh704] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, .58);
}


.empresa-modal[b-aor9mqh704] {
    width: min(900px, calc(100vw - 48px));
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    overflow: hidden;
    animation: empresaModalEntrada-b-aor9mqh704 .18s ease-out;
}


@keyframes empresaModalEntrada-b-aor9mqh704 {

    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

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


/* =========================================================
   CABECERA
   ========================================================= */

.empresa-modal .modal-header[b-aor9mqh704] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.empresa-modal .modal-title-area[b-aor9mqh704] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.empresa-modal .modal-header h2[b-aor9mqh704] {
    margin: 0;
    color: #111827;
    font-size: 20px;
    font-weight: 700;
}

.empresa-modal .modal-header p[b-aor9mqh704] {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 12px;
}

.empresa-modal .modal-close[b-aor9mqh704] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 22px;
    cursor: pointer;
}

    .empresa-modal .modal-close:hover[b-aor9mqh704] {
        background: #f3f4f6;
        color: #111827;
    }


/* =========================================================
   CUERPO
   ========================================================= */

.empresa-modal .modal-body[b-aor9mqh704] {
    padding: 20px 24px;
}


/* =========================================================
   GRID
   ========================================================= */

.empresa-modal .form-grid[b-aor9mqh704] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px 18px;
}


/* CAMPOS DE 3 COLUMNAS */

.empresa-modal .form-group[b-aor9mqh704] {
    min-width: 0;
    grid-column: span 3;
}


/* CAMPO COMPLETO */

.empresa-modal .form-group-wide[b-aor9mqh704] {
    grid-column: span 6;
}


/* CAMPOS DE 2 COLUMNAS */

.empresa-modal .form-group-third[b-aor9mqh704] {
    grid-column: span 2;
}


/* DIRECCIÓN 4 COLUMNAS */

.empresa-modal .form-group-address[b-aor9mqh704] {
    grid-column: span 4;
}


/* DISTRITO 2 COLUMNAS */

.empresa-modal .form-group-district[b-aor9mqh704] {
    grid-column: span 2;
}


/* =========================================================
   ETIQUETAS
   ========================================================= */

.empresa-modal .form-group label[b-aor9mqh704] {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

    .empresa-modal .form-group label span[b-aor9mqh704] {
        color: #dc2626;
    }


/* =========================================================
   INPUTS
   ========================================================= */

.empresa-modal .form-control[b-aor9mqh704] {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    background: #ffffff;
    color: #111827;
    font-family: inherit;
    font-size: 13px;
}

    .empresa-modal .form-control:hover[b-aor9mqh704] {
        border-color: #b8c0cc;
    }

    .empresa-modal .form-control:focus[b-aor9mqh704] {
        border-color: #315a9f;
        box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
    }

    .empresa-modal .form-control[b-aor9mqh704]::placeholder {
        color: #9ca3af;
    }


/* =========================================================
   ALERTA
   ========================================================= */

.empresa-modal .alert-error[b-aor9mqh704] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
}


/* =========================================================
   PIE
   ========================================================= */

.empresa-modal .modal-footer[b-aor9mqh704] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

    .empresa-modal .modal-footer .btn-primary[b-aor9mqh704],
    .empresa-modal .modal-footer .btn-secondary[b-aor9mqh704] {
        min-width: 130px;
    }


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

@media (max-width: 650px) {

    .empresa-modal-overlay[b-aor9mqh704] {
        padding: 8px;
    }

    .empresa-modal[b-aor9mqh704] {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 12px;
    }

        .empresa-modal .modal-header[b-aor9mqh704] {
            padding: 17px;
        }

        .empresa-modal .modal-body[b-aor9mqh704] {
            padding: 17px;
        }

        .empresa-modal .form-grid[b-aor9mqh704] {
            grid-template-columns: 1fr;
        }

        .empresa-modal .form-group[b-aor9mqh704],
        .empresa-modal .form-group-wide[b-aor9mqh704],
        .empresa-modal .form-group-third[b-aor9mqh704],
        .empresa-modal .form-group-address[b-aor9mqh704],
        .empresa-modal .form-group-district[b-aor9mqh704] {
            grid-column: span 1;
        }

        .empresa-modal .modal-footer[b-aor9mqh704] {
            padding: 14px 17px;
            flex-direction: column-reverse;
        }

            .empresa-modal .modal-footer .btn-primary[b-aor9mqh704],
            .empresa-modal .modal-footer .btn-secondary[b-aor9mqh704] {
                width: 100%;
            }
}
.logo-preview[b-aor9mqh704] {
    margin-top: 12px;
    width: 100%;
    height: 160px;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-preview-image[b-aor9mqh704] {
    display: block;
    max-width: 220px;
    max-height: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* =========================================================
   LOGO Y COLORES
   ========================================================= */

.logo-config-row[b-aor9mqh704] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 150px;
    gap: 18px;
    align-items: end;
}

.logo-upload-area[b-aor9mqh704],
.color-config-area[b-aor9mqh704] {
    min-width: 0;
}

    .logo-upload-area label[b-aor9mqh704],
    .color-config-area label[b-aor9mqh704] {
        display: block;
        margin-bottom: 6px;
        color: #374151;
        font-size: 12px;
        font-weight: 600;
    }

.color-selector[b-aor9mqh704] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
}

    .color-selector input[type="color"][b-aor9mqh704] {
        width: 40px;
        height: 40px;
        padding: 2px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        cursor: pointer;
    }

    .color-selector span[b-aor9mqh704] {
        color: #6b7280;
        font-size: 12px;
        font-family: monospace;
    }
/* /Components/Pages/Administracion/Numeracion.razor.rz.scp.css */
.numeracion-page[b-lrqr9gatfd] {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 32px;
    box-sizing: border-box;
}


/* =====================================================
   CABECERA
   ===================================================== */

.page-header[b-lrqr9gatfd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
}

    .page-header h1[b-lrqr9gatfd] {
        margin: 0;
        color: #111827;
        font-size: 30px;
        font-weight: 700;
    }

    .page-header p[b-lrqr9gatfd] {
        margin: 7px 0 0;
        color: #6b7280;
        font-size: 14px;
    }


/* =====================================================
   BOTONES
   ===================================================== */

.btn-primary[b-lrqr9gatfd] {
    border: none;
    border-radius: 8px;
    padding: 10px 17px;
    background: #0b2a63;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-primary:hover[b-lrqr9gatfd] {
        background: #123b82;
    }

    .btn-primary span[b-lrqr9gatfd] {
        font-size: 17px;
        margin-right: 5px;
    }

.btn-secondary[b-lrqr9gatfd] {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 17px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

    .btn-secondary:hover[b-lrqr9gatfd] {
        background: #f9fafb;
    }


/* =====================================================
   TABLA
   ===================================================== */

.table-card[b-lrqr9gatfd] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

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

.table-card table[b-lrqr9gatfd] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.table-card thead[b-lrqr9gatfd] {
    background: #f8fafc;
}

.table-card th[b-lrqr9gatfd] {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.table-card td[b-lrqr9gatfd] {
    padding: 15px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
    font-size: 13px;
}

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

.table-card tbody tr:hover[b-lrqr9gatfd] {
    background: #fafcff;
}

.table-card td strong[b-lrqr9gatfd] {
    color: #111827;
}


/* =====================================================
   ESTADOS
   ===================================================== */

.status[b-lrqr9gatfd] {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
}

    .status.active[b-lrqr9gatfd] {
        background: #ecfdf3;
        color: #15803d;
    }

    .status.inactive[b-lrqr9gatfd] {
        background: #fef2f2;
        color: #b91c1c;
    }


/* =====================================================
   CARGANDO
   ===================================================== */

.loading[b-lrqr9gatfd] {
    padding: 55px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}


/* =====================================================
   ESTADO VACÍO
   ===================================================== */

.empty-state[b-lrqr9gatfd] {
    padding: 65px 25px;
    text-align: center;
}

.empty-icon[b-lrqr9gatfd] {
    width: 58px;
    height: 58px;
    margin: 0 auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef4ff;
    font-size: 25px;
}

.empty-state h3[b-lrqr9gatfd] {
    margin: 0;
    color: #1f2937;
    font-size: 18px;
    font-weight: 600;
}

.empty-state p[b-lrqr9gatfd] {
    max-width: 430px;
    margin: 8px auto 20px;
    color: #6b7280;
    font-size: 13px;
}


/* =====================================================
   MODAL
   ===================================================== */

.numeracion-modal-overlay[b-lrqr9gatfd] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, .58);
}

.numeracion-modal[b-lrqr9gatfd] {
    width: min(700px, calc(100vw - 48px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    overflow: hidden;
    animation: numeracionModalEntrada-b-lrqr9gatfd .18s ease-out;
}

@keyframes numeracionModalEntrada-b-lrqr9gatfd {

    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

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


/* =====================================================
   CABECERA DEL MODAL
   ===================================================== */

.numeracion-modal .modal-header[b-lrqr9gatfd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

    .numeracion-modal .modal-header h2[b-lrqr9gatfd] {
        margin: 0;
        color: #111827;
        font-size: 20px;
        font-weight: 700;
    }

    .numeracion-modal .modal-header p[b-lrqr9gatfd] {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 12px;
    }

.numeracion-modal .modal-close[b-lrqr9gatfd] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 22px;
    cursor: pointer;
}

    .numeracion-modal .modal-close:hover[b-lrqr9gatfd] {
        background: #f3f4f6;
        color: #111827;
    }


/* =====================================================
   CUERPO
   ===================================================== */

.numeracion-modal .modal-body[b-lrqr9gatfd] {
    padding: 20px 24px;
}


/* =====================================================
   GRID
   ===================================================== */

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

.numeracion-modal .form-group[b-lrqr9gatfd] {
    min-width: 0;
}

.numeracion-modal .form-group-wide[b-lrqr9gatfd] {
    grid-column: span 2;
}


/* =====================================================
   ETIQUETAS
   ===================================================== */

.numeracion-modal .form-group label[b-lrqr9gatfd] {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

    .numeracion-modal .form-group label span[b-lrqr9gatfd] {
        color: #dc2626;
    }


/* =====================================================
   INPUTS
   ===================================================== */

.numeracion-modal .form-control[b-lrqr9gatfd] {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #111827;
    font-family: inherit;
    font-size: 13px;
}

    .numeracion-modal .form-control:hover[b-lrqr9gatfd] {
        border-color: #b8c0cc;
    }

    .numeracion-modal .form-control:focus[b-lrqr9gatfd] {
        border-color: #315a9f;
        box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
    }

    .numeracion-modal .form-control:read-only[b-lrqr9gatfd] {
        background: #f9fafb;
        color: #6b7280;
    }


/* =====================================================
   ERROR
   ===================================================== */

.numeracion-modal .alert-error[b-lrqr9gatfd] {
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
}


/* =====================================================
   FOOTER
   ===================================================== */

.numeracion-modal .modal-footer[b-lrqr9gatfd] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

    .numeracion-modal .modal-footer .btn-primary[b-lrqr9gatfd],
    .numeracion-modal .modal-footer .btn-secondary[b-lrqr9gatfd] {
        min-width: 130px;
    }


/* =====================================================
   ACCIONES
   ===================================================== */

.actions[b-lrqr9gatfd] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-action[b-lrqr9gatfd] {
    width: 34px;
    height: 34px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s ease;
}

    .btn-action.edit[b-lrqr9gatfd] {
        color: #0b2a63;
    }

        .btn-action.edit:hover[b-lrqr9gatfd] {
            background: #eef4ff;
            border-color: #0b2a63;
            transform: translateY(-1px);
        }

    .btn-action.deactivate[b-lrqr9gatfd] {
        color: #b45309;
    }

        .btn-action.deactivate:hover[b-lrqr9gatfd] {
            background: #fff7ed;
            border-color: #f59e0b;
            transform: translateY(-1px);
        }

    .btn-action.activate[b-lrqr9gatfd] {
        color: #15803d;
    }

        .btn-action.activate:hover[b-lrqr9gatfd] {
            background: #f0fdf4;
            border-color: #22c55e;
            transform: translateY(-1px);
        }


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

@media (max-width: 650px) {

    .numeracion-modal-overlay[b-lrqr9gatfd] {
        padding: 8px;
    }

    .numeracion-modal[b-lrqr9gatfd] {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 12px;
    }

        .numeracion-modal .form-grid[b-lrqr9gatfd] {
            grid-template-columns: 1fr;
        }

        .numeracion-modal .form-group-wide[b-lrqr9gatfd] {
            grid-column: span 1;
        }

        .numeracion-modal .modal-footer[b-lrqr9gatfd] {
            flex-direction: column-reverse;
        }

            .numeracion-modal .modal-footer .btn-primary[b-lrqr9gatfd],
            .numeracion-modal .modal-footer .btn-secondary[b-lrqr9gatfd] {
                width: 100%;
            }
}
/* /Components/Pages/Administracion/Parametros.razor.rz.scp.css */
.parametros-page[b-jv9sccgxui] {
    padding: 28px 24px;
    max-width: 1500px;
    margin: 0 auto;
}

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

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

    .page-header h1[b-jv9sccgxui] {
        margin: 0;
        font-size: 30px;
        font-weight: 700;
        color: #172554;
    }

    .page-header p[b-jv9sccgxui] {
        margin: 6px 0 0;
        color: #64748b;
        font-size: 14px;
    }

/* =====================================================
   BOTONES
   ===================================================== */

.btn-primary[b-jv9sccgxui] {
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: white;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .btn-primary:hover[b-jv9sccgxui] {
        background: #1d4ed8;
    }

.btn-secondary[b-jv9sccgxui] {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    color: #334155;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-secondary:hover[b-jv9sccgxui] {
        background: #f8fafc;
    }

.btn-edit[b-jv9sccgxui],
.btn-status[b-jv9sccgxui] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: white;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.btn-edit[b-jv9sccgxui] {
    color: #2563eb;
}

    .btn-edit:hover[b-jv9sccgxui] {
        background: #eff6ff;
    }

.btn-status[b-jv9sccgxui] {
    color: #64748b;
}

    .btn-status:hover[b-jv9sccgxui] {
        background: #f8fafc;
    }

/* =====================================================
   ALERTAS
   ===================================================== */

.alert-success[b-jv9sccgxui],
.alert-error[b-jv9sccgxui] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-success[b-jv9sccgxui] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.alert-error[b-jv9sccgxui] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* =====================================================
   CARGANDO / VACÍO
   ===================================================== */

.loading[b-jv9sccgxui] {
    padding: 50px 20px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

.empty-state[b-jv9sccgxui] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 50px 30px;
    text-align: center;
}

    .empty-state h3[b-jv9sccgxui] {
        margin: 0 0 8px;
        color: #1e293b;
        font-size: 20px;
    }

    .empty-state p[b-jv9sccgxui] {
        margin: 0 0 22px;
        color: #64748b;
        font-size: 14px;
    }

/* =====================================================
   CATEGORÍAS
   ===================================================== */

.categoria-card[b-jv9sccgxui] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 22px;
    overflow: hidden;
}

.categoria-header[b-jv9sccgxui] {
    padding: 18px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

    .categoria-header h2[b-jv9sccgxui] {
        margin: 0;
        color: #1e293b;
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .categoria-header span[b-jv9sccgxui] {
        display: block;
        margin-top: 4px;
        color: #64748b;
        font-size: 12px;
    }

/* =====================================================
   TABLA
   ===================================================== */

.table-container[b-jv9sccgxui] {
    width: 100%;
    overflow-x: auto;
}

table[b-jv9sccgxui] {
    width: 100%;
    border-collapse: collapse;
}

thead[b-jv9sccgxui] {
    background: white;
}

th[b-jv9sccgxui] {
    padding: 13px 16px;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

td[b-jv9sccgxui] {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 13px;
    vertical-align: middle;
}

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

tbody tr:hover[b-jv9sccgxui] {
    background: #f8fafc;
}

td strong[b-jv9sccgxui] {
    color: #1e293b;
    font-weight: 600;
}

.text-center[b-jv9sccgxui] {
    text-align: center;
}

/* =====================================================
   ESTADO
   ===================================================== */

.estado[b-jv9sccgxui] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

    .estado.activo[b-jv9sccgxui] {
        background: #dcfce7;
        color: #166534;
    }

    .estado.inactivo[b-jv9sccgxui] {
        background: #f1f5f9;
        color: #64748b;
    }

/* =====================================================
   ACCIONES
   ===================================================== */

.acciones[b-jv9sccgxui] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

/* =====================================================
   MODAL
   ===================================================== */
/* =====================================================
   MODAL
   ===================================================== */

.parametro-modal-overlay[b-jv9sccgxui] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.58);
}

.parametro-modal[b-jv9sccgxui] {
    width: min(700px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    animation: parametroModalEntrada-b-jv9sccgxui 0.18s ease-out;
}

@keyframes parametroModalEntrada-b-jv9sccgxui {

    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

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

.parametro-modal .modal-header[b-jv9sccgxui] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

    .parametro-modal .modal-header h2[b-jv9sccgxui] {
        margin: 0;
        color: #111827;
        font-size: 20px;
        font-weight: 700;
    }

    .parametro-modal .modal-header p[b-jv9sccgxui] {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 12px;
    }

.parametro-modal .modal-close[b-jv9sccgxui] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 22px;
    cursor: pointer;
}

    .parametro-modal .modal-close:hover[b-jv9sccgxui] {
        background: #f3f4f6;
        color: #111827;
    }

.parametro-modal .modal-body[b-jv9sccgxui] {
    padding: 20px 24px;
    overflow-y: auto;
}

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

.parametro-modal .form-group[b-jv9sccgxui] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .parametro-modal .form-group.full[b-jv9sccgxui] {
        grid-column: span 2;
    }

    .parametro-modal .form-group label[b-jv9sccgxui] {
        color: #374151;
        font-size: 12px;
        font-weight: 600;
    }

    .parametro-modal .form-group input[b-jv9sccgxui],
    .parametro-modal .form-group select[b-jv9sccgxui],
    .parametro-modal .form-group textarea[b-jv9sccgxui] {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        outline: none;
        background: #ffffff;
        color: #111827;
        font-family: inherit;
        font-size: 13px;
    }

        .parametro-modal .form-group input:focus[b-jv9sccgxui],
        .parametro-modal .form-group select:focus[b-jv9sccgxui],
        .parametro-modal .form-group textarea:focus[b-jv9sccgxui] {
            border-color: #315a9f;
            box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
        }

    .parametro-modal .form-group textarea[b-jv9sccgxui] {
        resize: vertical;
        min-height: 90px;
    }

.parametro-modal .modal-footer[b-jv9sccgxui] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

    .parametro-modal .modal-footer .btn-primary[b-jv9sccgxui],
    .parametro-modal .modal-footer .btn-secondary[b-jv9sccgxui] {
        min-width: 130px;
    }

@media (max-width: 650px) {

    .parametro-modal-overlay[b-jv9sccgxui] {
        padding: 8px;
    }

    .parametro-modal[b-jv9sccgxui] {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 12px;
    }

        .parametro-modal .form-grid[b-jv9sccgxui] {
            grid-template-columns: 1fr;
        }

        .parametro-modal .form-group.full[b-jv9sccgxui] {
            grid-column: span 1;
        }

        .parametro-modal .modal-footer[b-jv9sccgxui] {
            flex-direction: column-reverse;
        }

            .parametro-modal .modal-footer .btn-primary[b-jv9sccgxui],
            .parametro-modal .modal-footer .btn-secondary[b-jv9sccgxui] {
                width: 100%;
            }
}

.modal-header[b-jv9sccgxui] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #e2e8f0;
}

    .modal-header h2[b-jv9sccgxui] {
        margin: 0;
        color: #1e293b;
        font-size: 20px;
        font-weight: 700;
    }

    .modal-header p[b-jv9sccgxui] {
        margin: 5px 0 0;
        color: #64748b;
        font-size: 13px;
    }

.modal-close[b-jv9sccgxui] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

    .modal-close:hover[b-jv9sccgxui] {
        background: #f1f5f9;
        color: #1e293b;
    }

.modal-body[b-jv9sccgxui] {
    padding: 24px;
}

.form-grid[b-jv9sccgxui] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group[b-jv9sccgxui] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .form-group.full[b-jv9sccgxui] {
        grid-column: 1 / -1;
    }

    .form-group label[b-jv9sccgxui] {
        color: #334155;
        font-size: 13px;
        font-weight: 600;
    }

    .form-group input[b-jv9sccgxui],
    .form-group select[b-jv9sccgxui],
    .form-group textarea[b-jv9sccgxui] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #cbd5e1;
        border-radius: 7px;
        background: white;
        color: #1e293b;
        padding: 10px 12px;
        font-family: inherit;
        font-size: 13px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-group textarea[b-jv9sccgxui] {
        resize: vertical;
        min-height: 90px;
    }

        .form-group input:focus[b-jv9sccgxui],
        .form-group select:focus[b-jv9sccgxui],
        .form-group textarea:focus[b-jv9sccgxui] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
        }

.modal-footer[b-jv9sccgxui] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

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

@media (max-width: 800px) {

    .parametros-page[b-jv9sccgxui] {
        padding: 20px 16px;
    }

    .page-header[b-jv9sccgxui] {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .form-group.full[b-jv9sccgxui] {
        grid-column: auto;
    }

    .acciones[b-jv9sccgxui] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/Administracion/RolesPermisos.razor.rz.scp.css */
.roles-permisos-page[b-3zau1lnp7b] {
    padding: 32px;
}

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

.page-header[b-3zau1lnp7b] {
    margin-bottom: 24px;
}

    .page-header h1[b-3zau1lnp7b] {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        color: #0f172a;
    }

    .page-header p[b-3zau1lnp7b] {
        margin: 6px 0 0;
        color: #64748b;
        font-size: 14px;
    }


/* ================================
   TARJETA PRINCIPAL
================================ */

.roles-card[b-3zau1lnp7b] {
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}


/* ================================
   SELECTOR DE ROL
================================ */

.selector-rol[b-3zau1lnp7b] {
    padding: 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

    .selector-rol label[b-3zau1lnp7b],
    .selector-modulo label[b-3zau1lnp7b] {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #334155;
    }

.form-control[b-3zau1lnp7b] {
    width: 100%;
    max-width: 420px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-control:focus[b-3zau1lnp7b] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }


/* ================================
   CABECERA DEL ROL
================================ */

.permisos-header[b-3zau1lnp7b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #e2e8f0;
}

    .permisos-header h2[b-3zau1lnp7b] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #0f172a;
    }

    .permisos-header p[b-3zau1lnp7b] {
        margin: 5px 0 0;
        color: #64748b;
        font-size: 13px;
    }


/* ================================
   BOTONES
================================ */

.permisos-actions[b-3zau1lnp7b] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-primary[b-3zau1lnp7b],
.btn-secondary[b-3zau1lnp7b] {
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-3zau1lnp7b] {
    border: 1px solid #0f3278;
    background: #0f3278;
    color: #ffffff;
}

    .btn-primary:hover[b-3zau1lnp7b] {
        background: #0b285f;
    }

.btn-secondary[b-3zau1lnp7b] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
}

    .btn-secondary:hover[b-3zau1lnp7b] {
        background: #f8fafc;
        border-color: #94a3b8;
    }


/* ================================
   SELECTOR DE MÓDULO
================================ */

.selector-modulo[b-3zau1lnp7b] {
    padding: 22px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

    .selector-modulo .form-control[b-3zau1lnp7b] {
        max-width: 420px;
    }


/* ================================
   CABECERA DEL MÓDULO
================================ */

.modulo-titulo[b-3zau1lnp7b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

    .modulo-titulo h3[b-3zau1lnp7b] {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
    }

    .modulo-titulo span[b-3zau1lnp7b] {
        display: block;
        margin-top: 4px;
        color: #64748b;
        font-size: 13px;
    }


/* ================================
   CHECKBOX DEL MÓDULO
================================ */

.check-modulo[b-3zau1lnp7b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .check-modulo input[b-3zau1lnp7b] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }


/* ================================
   TABLA
================================ */

.table-wrapper[b-3zau1lnp7b] {
    width: 100%;
    overflow-x: auto;
}

    .table-wrapper table[b-3zau1lnp7b] {
        width: 100%;
        min-width: 900px;
        border-collapse: collapse;
        table-layout: fixed;
    }

    .table-wrapper thead[b-3zau1lnp7b] {
        background: #f8fafc;
    }

    .table-wrapper th[b-3zau1lnp7b] {
        height: 48px;
        padding: 0 10px;
        border-bottom: 1px solid #dbe3ef;
        color: #475569;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: center;
        white-space: nowrap;
    }

        .table-wrapper th:first-child[b-3zau1lnp7b] {
            width: 28%;
            text-align: left;
            padding-left: 24px;
        }

        .table-wrapper th:nth-child(2)[b-3zau1lnp7b] {
            width: 8%;
        }

    .table-wrapper td[b-3zau1lnp7b] {
        height: 52px;
        padding: 0 10px;
        border-bottom: 1px solid #edf2f7;
        color: #334155;
        font-size: 13px;
        text-align: center;
    }

    .table-wrapper tbody tr:hover[b-3zau1lnp7b] {
        background: #f8fafc;
    }

    .table-wrapper td:first-child[b-3zau1lnp7b] {
        text-align: left;
        padding-left: 24px;
    }


/* ================================
   NOMBRE DE OPCIÓN
================================ */

.opcion-name[b-3zau1lnp7b] {
    font-weight: 500;
    color: #0f172a !important;
}


/* ================================
   CHECKBOXES
================================ */

.table-wrapper input[type="checkbox"][b-3zau1lnp7b] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #0f3278;
    cursor: pointer;
}

.checkbox-todos[b-3zau1lnp7b] {
    width: 18px !important;
    height: 18px !important;
}


/* ================================
   PIE / GUARDAR
================================ */

.form-footer[b-3zau1lnp7b] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 18px 24px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}


/* ================================
   CARGANDO
================================ */

.loading[b-3zau1lnp7b] {
    padding: 40px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}


/* ================================
   CONFIRMACIÓN
================================ */

.confirmacion-overlay[b-3zau1lnp7b] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
}

.confirmacion-modal[b-3zau1lnp7b] {
    width: 420px;
    max-width: calc(100vw - 32px);
    padding: 28px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    text-align: center;
}

.confirmacion-icono[b-3zau1lnp7b] {
    font-size: 34px;
    margin-bottom: 12px;
}

.confirmacion-modal h3[b-3zau1lnp7b] {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
}

.confirmacion-modal p[b-3zau1lnp7b] {
    margin: 10px 0 22px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.confirmacion-actions[b-3zau1lnp7b] {
    display: flex;
    justify-content: center;
    gap: 10px;
}


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

@media (max-width: 900px) {

    .roles-permisos-page[b-3zau1lnp7b] {
        padding: 20px;
    }

    .permisos-header[b-3zau1lnp7b] {
        flex-direction: column;
        align-items: flex-start;
    }

    .permisos-actions[b-3zau1lnp7b] {
        width: 100%;
    }

    .selector-rol[b-3zau1lnp7b],
    .selector-modulo[b-3zau1lnp7b] {
        padding: 18px;
    }

    .modulo-titulo[b-3zau1lnp7b] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-footer[b-3zau1lnp7b] {
        padding: 16px 18px;
    }
}


@media (max-width: 600px) {

    .roles-permisos-page[b-3zau1lnp7b] {
        padding: 12px;
    }

    .page-header h1[b-3zau1lnp7b] {
        font-size: 24px;
    }

    .permisos-actions[b-3zau1lnp7b] {
        flex-direction: column;
        width: 100%;
    }

        .permisos-actions button[b-3zau1lnp7b] {
            width: 100%;
        }

    .form-control[b-3zau1lnp7b] {
        max-width: none;
    }

    .form-footer .btn-primary[b-3zau1lnp7b] {
        width: 100%;
    }
}
/* /Components/Pages/Administracion/Suscripciones.razor.rz.scp.css */
.suscripciones-page[b-w2hajg5xtf] {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 32px;
    box-sizing: border-box;
}

.page-header[b-w2hajg5xtf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
}

    .page-header h1[b-w2hajg5xtf] {
        margin: 0;
        color: #111827;
        font-size: 30px;
        font-weight: 700;
    }

    .page-header p[b-w2hajg5xtf] {
        margin: 7px 0 0;
        color: #6b7280;
        font-size: 14px;
    }

/* BOTONES */

.btn-primary[b-w2hajg5xtf] {
    border: none;
    border-radius: 8px;
    padding: 10px 17px;
    background: #0b2a63;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-primary:hover[b-w2hajg5xtf] {
        background: #123b82;
    }

    .btn-primary span[b-w2hajg5xtf] {
        font-size: 17px;
        margin-right: 5px;
    }

.btn-secondary[b-w2hajg5xtf] {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 17px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

    .btn-secondary:hover[b-w2hajg5xtf] {
        background: #f9fafb;
    }

/* TABLA */

.table-card[b-w2hajg5xtf] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

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

.table-card table[b-w2hajg5xtf] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.table-card thead[b-w2hajg5xtf] {
    background: #f8fafc;
}

.table-card th[b-w2hajg5xtf] {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.table-card td[b-w2hajg5xtf] {
    padding: 15px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
    font-size: 13px;
}

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

.table-card tbody tr:hover[b-w2hajg5xtf] {
    background: #fafcff;
}

.table-card td strong[b-w2hajg5xtf] {
    color: #111827;
}

/* ESTADOS */

.status[b-w2hajg5xtf] {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
}

    .status.active[b-w2hajg5xtf] {
        background: #ecfdf3;
        color: #15803d;
    }

    .status.inactive[b-w2hajg5xtf] {
        background: #fef2f2;
        color: #b91c1c;
    }

/* CARGANDO */

.loading[b-w2hajg5xtf] {
    padding: 55px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

/* ESTADO VACÍO */

.empty-state[b-w2hajg5xtf] {
    padding: 65px 25px;
    text-align: center;
}

.empty-icon[b-w2hajg5xtf] {
    width: 58px;
    height: 58px;
    margin: 0 auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef4ff;
    font-size: 25px;
}

.empty-state h3[b-w2hajg5xtf] {
    margin: 0;
    color: #1f2937;
    font-size: 18px;
    font-weight: 600;
}

.empty-state p[b-w2hajg5xtf] {
    max-width: 430px;
    margin: 8px auto 20px;
    color: #6b7280;
    font-size: 13px;
}

/* MODAL */

.suscripcion-modal-overlay[b-w2hajg5xtf] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, .58);
}

.suscripcion-modal[b-w2hajg5xtf] {
    width: min(700px, calc(100vw - 48px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    overflow: hidden;
    animation: suscripcionModalEntrada-b-w2hajg5xtf .18s ease-out;
}

@keyframes suscripcionModalEntrada-b-w2hajg5xtf {

    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

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

/* CABECERA */

.suscripcion-modal .modal-header[b-w2hajg5xtf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

    .suscripcion-modal .modal-header h2[b-w2hajg5xtf] {
        margin: 0;
        color: #111827;
        font-size: 20px;
        font-weight: 700;
    }

    .suscripcion-modal .modal-header p[b-w2hajg5xtf] {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 12px;
    }

.suscripcion-modal .modal-close[b-w2hajg5xtf] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 22px;
    cursor: pointer;
}

    .suscripcion-modal .modal-close:hover[b-w2hajg5xtf] {
        background: #f3f4f6;
        color: #111827;
    }

/* CUERPO */

.suscripcion-modal .modal-body[b-w2hajg5xtf] {
    padding: 20px 24px;
}

/* GRID */

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

.suscripcion-modal .form-group[b-w2hajg5xtf] {
    min-width: 0;
}

.suscripcion-modal .form-group-wide[b-w2hajg5xtf] {
    grid-column: span 2;
}

/* ETIQUETAS */

.suscripcion-modal .form-group label[b-w2hajg5xtf] {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

    .suscripcion-modal .form-group label span[b-w2hajg5xtf] {
        color: #dc2626;
    }

/* INPUTS */

.suscripcion-modal .form-control[b-w2hajg5xtf] {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #111827;
    font-family: inherit;
    font-size: 13px;
}

    .suscripcion-modal .form-control:hover[b-w2hajg5xtf] {
        border-color: #b8c0cc;
    }

    .suscripcion-modal .form-control:focus[b-w2hajg5xtf] {
        border-color: #315a9f;
        box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
    }

    .suscripcion-modal .form-control:read-only[b-w2hajg5xtf] {
        background: #f9fafb;
        color: #6b7280;
    }

/* ERROR */

.suscripcion-modal .alert-error[b-w2hajg5xtf] {
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
}

/* FOOTER */

.suscripcion-modal .modal-footer[b-w2hajg5xtf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

    .suscripcion-modal .modal-footer .btn-primary[b-w2hajg5xtf],
    .suscripcion-modal .modal-footer .btn-secondary[b-w2hajg5xtf] {
        min-width: 130px;
    }

/* RESPONSIVE */

@media (max-width: 650px) {

    .suscripcion-modal-overlay[b-w2hajg5xtf] {
        padding: 8px;
    }

    .suscripcion-modal[b-w2hajg5xtf] {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 12px;
    }

        .suscripcion-modal .form-grid[b-w2hajg5xtf] {
            grid-template-columns: 1fr;
        }

        .suscripcion-modal .form-group-wide[b-w2hajg5xtf] {
            grid-column: span 1;
        }

        .suscripcion-modal .modal-footer[b-w2hajg5xtf] {
            flex-direction: column-reverse;
        }

            .suscripcion-modal .modal-footer .btn-primary[b-w2hajg5xtf],
            .suscripcion-modal .modal-footer .btn-secondary[b-w2hajg5xtf] {
                width: 100%;
            }
}
.actions[b-w2hajg5xtf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-action[b-w2hajg5xtf] {
    width: 34px;
    height: 34px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s ease;
}

    .btn-action.edit[b-w2hajg5xtf] {
        color: #0b2a63;
    }

        .btn-action.edit:hover[b-w2hajg5xtf] {
            background: #eef4ff;
            border-color: #0b2a63;
            transform: translateY(-1px);
        }

    .btn-action.deactivate[b-w2hajg5xtf] {
        color: #b45309;
    }

        .btn-action.deactivate:hover[b-w2hajg5xtf] {
            background: #fff7ed;
            border-color: #f59e0b;
            transform: translateY(-1px);
        }

    .btn-action.activate[b-w2hajg5xtf] {
        color: #15803d;
    }

        .btn-action.activate:hover[b-w2hajg5xtf] {
            background: #f0fdf4;
            border-color: #22c55e;
            transform: translateY(-1px);
        }
/* /Components/Pages/Administracion/Usuarios.razor.rz.scp.css */
/* =========================================================
   PÁGINA USUARIOS
   ========================================================= */

.usuarios-page[b-pxdtd7itb5] {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 32px;
    box-sizing: border-box;
}


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

.page-header[b-pxdtd7itb5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

    .page-header h1[b-pxdtd7itb5] {
        margin: 0;
        color: #111827;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -.5px;
    }

    .page-header p[b-pxdtd7itb5] {
        margin: 6px 0 0;
        color: #6b7280;
        font-size: 14px;
    }


/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary[b-pxdtd7itb5] {
    border: none;
    border-radius: 8px;
    padding: 10px 17px;
    background: #0b2a63;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}

    .btn-primary:hover[b-pxdtd7itb5] {
        background: #123b82;
    }

    .btn-primary:active[b-pxdtd7itb5] {
        transform: translateY(1px);
    }

    .btn-primary span[b-pxdtd7itb5] {
        font-size: 17px;
        margin-right: 5px;
    }

.btn-secondary[b-pxdtd7itb5] {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 17px;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease;
}

    .btn-secondary:hover[b-pxdtd7itb5] {
        background: #f9fafb;
    }


/* =========================================================
   SELECTOR DE EMPRESA
   ========================================================= */

.selector-rol[b-pxdtd7itb5] {
    margin-bottom: 20px;
}

    .selector-rol label[b-pxdtd7itb5] {
        display: block;
        margin-bottom: 6px;
        color: #334155;
        font-size: 13px;
        font-weight: 600;
    }

    .selector-rol .form-control[b-pxdtd7itb5] {
        width: 100%;
        max-width: 620px;
    }


/* =========================================================
   CONTROLES
   ========================================================= */

.form-control[b-pxdtd7itb5] {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #1e293b;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .form-control:hover[b-pxdtd7itb5] {
        border-color: #94a3b8;
    }

    .form-control:focus[b-pxdtd7itb5] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    }


/* =========================================================
   RESUMEN
   ========================================================= */

.summary-card[b-pxdtd7itb5] {
    width: 270px;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
    padding: 17px 20px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.summary-icon[b-pxdtd7itb5] {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef4ff;
    color: #0b2a63;
    font-size: 21px;
}

.summary-label[b-pxdtd7itb5] {
    margin-bottom: 3px;
    color: #6b7280;
    font-size: 12px;
}

.summary-value[b-pxdtd7itb5] {
    color: #111827;
    font-size: 25px;
    font-weight: 700;
}


/* =========================================================
   TABLA
   ========================================================= */

.table-card[b-pxdtd7itb5] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

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

table[b-pxdtd7itb5] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

thead[b-pxdtd7itb5] {
    background: #f8fafc;
}

th[b-pxdtd7itb5] {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

td[b-pxdtd7itb5] {
    padding: 15px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
    font-size: 13px;
    vertical-align: middle;
}

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

tbody tr:hover[b-pxdtd7itb5] {
    background: #fafcff;
}

td strong[b-pxdtd7itb5] {
    color: #111827;
    font-weight: 600;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.actions-column[b-pxdtd7itb5] {
    width: 110px;
    text-align: center;
}

.actions[b-pxdtd7itb5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-action[b-pxdtd7itb5] {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #ffffff;
    cursor: pointer;
    font-size: 14px;
    transition: background .2s ease, border-color .2s ease;
}

    .btn-action.edit[b-pxdtd7itb5] {
        color: #1d4ed8;
    }

        .btn-action.edit:hover[b-pxdtd7itb5] {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

    .btn-action.deactivate[b-pxdtd7itb5] {
        color: #dc2626;
    }

        .btn-action.deactivate:hover[b-pxdtd7itb5] {
            background: #fef2f2;
            border-color: #fecaca;
        }

    .btn-action.activate[b-pxdtd7itb5] {
        color: #15803d;
    }

        .btn-action.activate:hover[b-pxdtd7itb5] {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }


/* =========================================================
   ESTADOS
   ========================================================= */

.status[b-pxdtd7itb5] {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
}

    .status.active[b-pxdtd7itb5] {
        background: #ecfdf3;
        color: #15803d;
    }

    .status.inactive[b-pxdtd7itb5] {
        background: #fef2f2;
        color: #b91c1c;
    }


/* =========================================================
   CARGANDO
   ========================================================= */

.loading[b-pxdtd7itb5] {
    padding: 55px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.empty-state[b-pxdtd7itb5] {
    min-height: 315px;
    padding: 55px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
}

.empty-icon[b-pxdtd7itb5] {
    width: 58px;
    height: 58px;
    margin-bottom: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef4ff;
    font-size: 25px;
}

.empty-state h3[b-pxdtd7itb5] {
    margin: 0;
    color: #1f2937;
    font-size: 18px;
    font-weight: 600;
}

.empty-state p[b-pxdtd7itb5] {
    max-width: 430px;
    margin: 8px auto 20px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   MODAL
   ========================================================= */

.usuario-modal-overlay[b-pxdtd7itb5] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, .58);
}

.usuario-modal[b-pxdtd7itb5] {
    width: min(760px, calc(100vw - 48px));
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    overflow: hidden;
    animation: usuarioModalEntrada-b-pxdtd7itb5 .18s ease-out;
}

@keyframes usuarioModalEntrada-b-pxdtd7itb5 {

    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

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


/* =========================================================
   CABECERA MODAL
   ========================================================= */

.usuario-modal .modal-header[b-pxdtd7itb5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

    .usuario-modal .modal-header h2[b-pxdtd7itb5] {
        margin: 0;
        color: #111827;
        font-size: 20px;
        font-weight: 700;
    }

    .usuario-modal .modal-header p[b-pxdtd7itb5] {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 12px;
    }

.usuario-modal .modal-close[b-pxdtd7itb5] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 22px;
    cursor: pointer;
}

    .usuario-modal .modal-close:hover[b-pxdtd7itb5] {
        background: #f3f4f6;
        color: #111827;
    }


/* =========================================================
   CUERPO MODAL
   ========================================================= */

.usuario-modal .modal-body[b-pxdtd7itb5] {
    padding: 24px;
    overflow-y: auto;
}

.usuario-modal .form-grid[b-pxdtd7itb5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.usuario-modal .form-group[b-pxdtd7itb5] {
    min-width: 0;
}

    .usuario-modal .form-group label[b-pxdtd7itb5] {
        display: block;
        margin-bottom: 6px;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

        .usuario-modal .form-group label span[b-pxdtd7itb5] {
            color: #dc2626;
        }

.password-help[b-pxdtd7itb5] {
    display: block;
    margin-top: 6px;
    color: #9ca3af;
    font-size: 11px;
}


/* =========================================================
   ALERTA
   ========================================================= */

.usuario-modal .alert-error[b-pxdtd7itb5] {
    margin-bottom: 18px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
}


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

.usuario-modal .modal-footer[b-pxdtd7itb5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}


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

@media (max-width: 700px) {

    .usuarios-page[b-pxdtd7itb5] {
        padding: 20px 16px;
    }

    .page-header[b-pxdtd7itb5] {
        flex-direction: column;
        align-items: flex-start;
    }

        .page-header .btn-primary[b-pxdtd7itb5] {
            width: 100%;
        }

    .selector-rol .form-control[b-pxdtd7itb5] {
        max-width: none;
    }

    .usuario-modal[b-pxdtd7itb5] {
        width: calc(100vw - 24px);
    }

        .usuario-modal .form-grid[b-pxdtd7itb5] {
            grid-template-columns: 1fr;
        }

        .usuario-modal .modal-body[b-pxdtd7itb5] {
            padding: 18px;
        }

        .usuario-modal .modal-footer[b-pxdtd7itb5] {
            padding: 14px 18px;
            flex-direction: column-reverse;
        }

            .usuario-modal .modal-footer button[b-pxdtd7itb5] {
                width: 100%;
            }
}
/* /Components/Pages/Dashboards.razor.rz.scp.css */
.dashboard-page[b-75hovrhtvu] {
    padding: 28px;
    max-width: 1600px;
    margin: 0 auto;
}


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

.dashboard-header[b-75hovrhtvu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

    .dashboard-header h1[b-75hovrhtvu] {
        margin: 0;
        font-size: 30px;
        font-weight: 700;
        color: #1f2937;
    }

    .dashboard-header p[b-75hovrhtvu] {
        margin: 6px 0 0;
        color: #6b7280;
        font-size: 14px;
    }

.dashboard-period[b-75hovrhtvu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

    .dashboard-period span[b-75hovrhtvu] {
        font-size: 12px;
        color: #6b7280;
    }

    .dashboard-period strong[b-75hovrhtvu] {
        font-size: 14px;
        color: #374151;
    }


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

.dashboard-cards[b-75hovrhtvu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}

.dashboard-card[b-75hovrhtvu] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.card-icon[b-75hovrhtvu] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f1f5f9;
    color: #334155;
    font-size: 17px;
    font-weight: 700;
}

.card-content[b-75hovrhtvu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-label[b-75hovrhtvu] {
    font-size: 13px;
    color: #6b7280;
}

.card-value[b-75hovrhtvu] {
    font-size: 21px;
    font-weight: 700;
    color: #111827;
}

.card-detail[b-75hovrhtvu] {
    font-size: 12px;
    color: #9ca3af;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.dashboard-section[b-75hovrhtvu] {
    margin-bottom: 28px;
}

.section-header[b-75hovrhtvu] {
    margin-bottom: 16px;
}

    .section-header h2[b-75hovrhtvu],
    .panel-header h2[b-75hovrhtvu] {
        margin: 0;
        font-size: 18px;
        font-weight: 650;
        color: #1f2937;
    }

    .section-header p[b-75hovrhtvu],
    .panel-header p[b-75hovrhtvu] {
        margin: 5px 0 0;
        font-size: 13px;
        color: #6b7280;
    }


/* =========================================================
   OPERACIONES
   ========================================================= */

.operation-grid[b-75hovrhtvu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.operation-card[b-75hovrhtvu] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.operation-header[b-75hovrhtvu] {
    margin-bottom: 20px;
}

    .operation-header > div[b-75hovrhtvu] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

.operation-icon[b-75hovrhtvu] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f1f5f9;
    color: #334155;
    font-size: 17px;
}

.operation-header h3[b-75hovrhtvu] {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    color: #1f2937;
}

.operation-header span[b-75hovrhtvu] {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #9ca3af;
}

.operation-values[b-75hovrhtvu] {
    display: flex;
    flex-direction: column;
}

.currency-row[b-75hovrhtvu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid #f1f5f9;
}

    .currency-row:first-child[b-75hovrhtvu] {
        border-top: none;
    }

    .currency-row > div[b-75hovrhtvu] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

.currency-label[b-75hovrhtvu] {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
}

.currency-row strong[b-75hovrhtvu] {
    font-size: 18px;
    color: #111827;
}

.operation-count[b-75hovrhtvu] {
    font-size: 12px;
    color: #9ca3af;
}


/* =========================================================
   PARTE INFERIOR
   ========================================================= */

.dashboard-bottom[b-75hovrhtvu] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
}

.dashboard-panel[b-75hovrhtvu] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.panel-header[b-75hovrhtvu] {
    margin-bottom: 18px;
}


/* =========================================================
   ACTIVIDAD
   ========================================================= */

.activity-list[b-75hovrhtvu] {
    display: flex;
    flex-direction: column;
}

.activity-item[b-75hovrhtvu] {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid #f1f5f9;
}

    .activity-item:first-child[b-75hovrhtvu] {
        border-top: none;
    }

.activity-icon[b-75hovrhtvu] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.activity-info[b-75hovrhtvu] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .activity-info strong[b-75hovrhtvu] {
        font-size: 13px;
        color: #374151;
    }

    .activity-info span[b-75hovrhtvu] {
        font-size: 12px;
        color: #9ca3af;
    }

.activity-amount[b-75hovrhtvu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

    .activity-amount strong[b-75hovrhtvu] {
        font-size: 13px;
        color: #374151;
    }

    .activity-amount span[b-75hovrhtvu] {
        font-size: 11px;
        color: #9ca3af;
    }


/* =========================================================
   INDICADORES
   ========================================================= */

.indicator-list[b-75hovrhtvu] {
    display: flex;
    flex-direction: column;
}

.indicator-item[b-75hovrhtvu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-top: 1px solid #f1f5f9;
}

    .indicator-item:first-child[b-75hovrhtvu] {
        border-top: none;
    }

    .indicator-item > div[b-75hovrhtvu] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .indicator-item span[b-75hovrhtvu] {
        font-size: 12px;
        color: #6b7280;
    }

    .indicator-item strong[b-75hovrhtvu] {
        font-size: 20px;
        color: #1f2937;
    }

.indicator-badge[b-75hovrhtvu] {
    padding: 5px 9px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569 !important;
    font-size: 10px !important;
    font-weight: 600;
}


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

@media (max-width: 1100px) {

    .dashboard-cards[b-75hovrhtvu] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-bottom[b-75hovrhtvu] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 750px) {

    .dashboard-page[b-75hovrhtvu] {
        padding: 18px;
    }

    .dashboard-header[b-75hovrhtvu] {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .dashboard-period[b-75hovrhtvu] {
        align-items: flex-start;
    }

    .dashboard-cards[b-75hovrhtvu] {
        grid-template-columns: 1fr;
    }

    .operation-grid[b-75hovrhtvu] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 500px) {

    .dashboard-header h1[b-75hovrhtvu] {
        font-size: 25px;
    }

    .dashboard-card[b-75hovrhtvu] {
        padding: 18px;
    }

    .dashboard-panel[b-75hovrhtvu],
    .operation-card[b-75hovrhtvu] {
        padding: 18px;
    }

    .activity-item[b-75hovrhtvu] {
        grid-template-columns: 38px 1fr;
    }

    .activity-amount[b-75hovrhtvu] {
        grid-column: 2;
        align-items: flex-start;
    }
}
/* /Components/Pages/Logistica/Almacenes.razor.rz.scp.css */
.page-container[b-vfpul8zpwl] {
    padding: 24px;
}

.page-header[b-vfpul8zpwl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

    .page-header h1[b-vfpul8zpwl] {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
    }

    .page-header p[b-vfpul8zpwl] {
        margin: 5px 0 0;
        color: #64748b;
    }

.card[b-vfpul8zpwl] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.card-header[b-vfpul8zpwl] {
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
}

.record-count[b-vfpul8zpwl] {
    margin-left: 10px;
    color: #64748b;
    font-size: 13px;
}

.table-container[b-vfpul8zpwl] {
    overflow-x: auto;
}

.table[b-vfpul8zpwl] {
    width: 100%;
    border-collapse: collapse;
}

    .table th[b-vfpul8zpwl] {
        background: #f8fafc;
        color: #475569;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        padding: 13px 16px;
        border-bottom: 1px solid #e2e8f0;
    }

    .table td[b-vfpul8zpwl] {
        padding: 13px 16px;
        border-bottom: 1px solid #f1f5f9;
        font-size: 14px;
    }

.text-center[b-vfpul8zpwl] {
    text-align: center !important;
}

.actions[b-vfpul8zpwl] {
    text-align: center;
    white-space: nowrap;
}

.action-btn[b-vfpul8zpwl] {
    width: 34px;
    height: 34px;
    margin: 0 2px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: white;
    cursor: pointer;
}

    .action-btn:hover[b-vfpul8zpwl] {
        background: #f8fafc;
    }

.action-danger:hover[b-vfpul8zpwl] {
    background: #fef2f2;
    border-color: #fca5a5;
}

.badge[b-vfpul8zpwl] {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-active[b-vfpul8zpwl] {
    background: #dcfce7;
    color: #166534;
}

.badge-inactive[b-vfpul8zpwl] {
    background: #f1f5f9;
    color: #64748b;
}

.empty-state[b-vfpul8zpwl] {
    text-align: center;
    padding: 40px !important;
    color: #64748b;
}

.loading-container[b-vfpul8zpwl] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 50px;
    color: #64748b;
}

.spinner[b-vfpul8zpwl] {
    width: 18px;
    height: 18px;
    border: 3px solid #e2e8f0;
    border-top-color: #475569;
    border-radius: 50%;
    animation: spin-b-vfpul8zpwl 0.8s linear infinite;
}

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

/* =========================================================
   MODAL ALMACÉN
   ========================================================= */

.almacen-modal-backdrop[b-vfpul8zpwl] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.almacen-modal[b-vfpul8zpwl] {
    width: 600px;
    max-width: 95%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
    position: relative;
    z-index: 10000;
}

.almacen-modal-header[b-vfpul8zpwl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid #e2e8f0;
}

    .almacen-modal-header h2[b-vfpul8zpwl] {
        margin: 0;
        font-size: 19px;
    }

.almacen-modal-close[b-vfpul8zpwl] {
    border: none;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    color: #64748b;
}

    .almacen-modal-close:hover[b-vfpul8zpwl] {
        color: #1e293b;
    }

.almacen-modal-body[b-vfpul8zpwl] {
    padding: 22px;
}

.almacen-modal-footer[b-vfpul8zpwl] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e2e8f0;
}

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

.form-grid[b-vfpul8zpwl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group[b-vfpul8zpwl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.full-width[b-vfpul8zpwl] {
    grid-column: 1 / -1;
}

.form-group label[b-vfpul8zpwl] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.form-control[b-vfpul8zpwl] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    box-sizing: border-box;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
}

    .form-control:focus[b-vfpul8zpwl] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    }

select.form-control[b-vfpul8zpwl] {
    cursor: pointer;
}

/* =========================================================
   BOTONES
   ========================================================= */

.btn[b-vfpul8zpwl] {
    border: none;
    border-radius: 7px;
    padding: 9px 15px;
    cursor: pointer;
    font-weight: 600;
}

.btn-primary[b-vfpul8zpwl] {
    background: #2563eb;
    color: white;
}

    .btn-primary:hover[b-vfpul8zpwl] {
        background: #1d4ed8;
    }

.btn-secondary[b-vfpul8zpwl] {
    background: #e2e8f0;
    color: #334155;
}

    .btn-secondary:hover[b-vfpul8zpwl] {
        background: #cbd5e1;
    }

.btn:disabled[b-vfpul8zpwl] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* =========================================================
   ALERTAS
   ========================================================= */

.alert[b-vfpul8zpwl] {
    padding: 12px 15px;
    border-radius: 7px;
    margin-bottom: 18px;
}

.alert-success[b-vfpul8zpwl] {
    background: #dcfce7;
    color: #166534;
}

.alert-danger[b-vfpul8zpwl] {
    background: #fee2e2;
    color: #991b1b;
}

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

@media (max-width: 700px) {

    .page-container[b-vfpul8zpwl] {
        padding: 16px;
    }

    .page-header[b-vfpul8zpwl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

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

    .full-width[b-vfpul8zpwl] {
        grid-column: auto;
    }

    .almacen-modal[b-vfpul8zpwl] {
        width: 95%;
    }
}
/* /Components/Pages/Logistica/Categorias.razor.rz.scp.css */
/* =========================================================
   CATEGORÍAS - SERCOM ERP
   ========================================================= */

.clientes-page[b-aevtc6uwj8] {
    padding: 24px;
    max-width: 1500px;
    margin: 0 auto;
}


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

.page-header[b-aevtc6uwj8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-title[b-aevtc6uwj8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title h1[b-aevtc6uwj8] {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        color: #111827;
    }

.title-icon[b-aevtc6uwj8] {
    font-size: 28px;
}

.page-subtitle[b-aevtc6uwj8] {
    margin: 5px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary[b-aevtc6uwj8] {
    background: #1769d2;
    color: white;
    border: 1px solid #1769d2;
    border-radius: 6px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

    .btn-primary:hover[b-aevtc6uwj8] {
        background: #1258b5;
        border-color: #1258b5;
    }

.btn-secondary[b-aevtc6uwj8] {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
}

    .btn-secondary:hover[b-aevtc6uwj8] {
        background: #f3f4f6;
    }


/* =========================================================
   TARJETA PRINCIPAL
   ========================================================= */

.list-card[b-aevtc6uwj8] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    overflow: hidden;
}


/* =========================================================
   FILTROS
   ========================================================= */

.filters[b-aevtc6uwj8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa;
}

.search-box[b-aevtc6uwj8] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

    .search-box input[b-aevtc6uwj8] {
        width: 100%;
        height: 38px;
        padding: 0 12px 0 38px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        outline: none;
        font-size: 14px;
        background: white;
        box-sizing: border-box;
    }

        .search-box input:focus[b-aevtc6uwj8] {
            border-color: #1769d2;
            box-shadow: 0 0 0 2px rgba(23, 105, 210, .12);
        }

.search-icon[b-aevtc6uwj8] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 15px;
    pointer-events: none;
}

.status-filter[b-aevtc6uwj8] {
    height: 38px;
    min-width: 130px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
    outline: none;
    font-size: 14px;
}

    .status-filter:focus[b-aevtc6uwj8] {
        border-color: #1769d2;
    }


/* =========================================================
   CONTADOR
   ========================================================= */

.list-summary[b-aevtc6uwj8] {
    padding: 14px 18px;
    color: #6b7280;
    font-size: 13px;
    border-bottom: 1px solid #e5e7eb;
}


/* =========================================================
   TABLA
   ========================================================= */

.clients-table[b-aevtc6uwj8] {
    width: 100%;
    border-collapse: collapse;
}

    .clients-table thead[b-aevtc6uwj8] {
        background: #f8fafc;
    }

    .clients-table th[b-aevtc6uwj8] {
        padding: 13px 18px;
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        color: #4b5563;
        text-transform: uppercase;
        letter-spacing: .03em;
        border-bottom: 1px solid #e5e7eb;
    }

    .clients-table td[b-aevtc6uwj8] {
        padding: 14px 18px;
        font-size: 14px;
        color: #374151;
        border-bottom: 1px solid #f0f0f0;
        vertical-align: middle;
    }

    .clients-table tbody tr:hover[b-aevtc6uwj8] {
        background: #f8fafc;
    }

.code-cell[b-aevtc6uwj8] {
    font-weight: 600;
    color: #1769d2;
}

.name-cell[b-aevtc6uwj8] {
    font-weight: 500;
    color: #111827;
}


/* =========================================================
   ESTADOS
   ========================================================= */

.status-active[b-aevtc6uwj8],
.status-inactive[b-aevtc6uwj8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-active[b-aevtc6uwj8] {
    background: #dcfce7;
    color: #166534;
}

.status-inactive[b-aevtc6uwj8] {
    background: #f3f4f6;
    color: #6b7280;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.actions[b-aevtc6uwj8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-edit[b-aevtc6uwj8],
.action-disable[b-aevtc6uwj8],
.action-enable[b-aevtc6uwj8],
.action-delete[b-aevtc6uwj8] {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s ease;
}

.action-edit[b-aevtc6uwj8] {
    color: #1769d2;
}

    .action-edit:hover[b-aevtc6uwj8] {
        background: #eff6ff;
    }

.action-disable[b-aevtc6uwj8] {
    color: #d97706;
}

    .action-disable:hover[b-aevtc6uwj8] {
        background: #fffbeb;
    }

.action-enable[b-aevtc6uwj8] {
    color: #15803d;
}

    .action-enable:hover[b-aevtc6uwj8] {
        background: #f0fdf4;
    }

.action-delete[b-aevtc6uwj8] {
    color: #dc2626;
}

    .action-delete:hover[b-aevtc6uwj8] {
        background: #fef2f2;
    }


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.empty-state[b-aevtc6uwj8] {
    padding: 55px 20px;
    text-align: center;
    color: #6b7280;
}

.empty-icon[b-aevtc6uwj8] {
    font-size: 40px;
    margin-bottom: 12px;
}

.empty-state h3[b-aevtc6uwj8] {
    margin: 0 0 7px 0;
    color: #374151;
    font-size: 18px;
    font-weight: 600;
}

.empty-state p[b-aevtc6uwj8] {
    margin: 0 0 18px 0;
    font-size: 14px;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal-overlay[b-aevtc6uwj8] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, .45);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.client-form-modal[b-aevtc6uwj8] {
    width: 100%;
    max-width: 520px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .20);
    overflow: hidden;
}

.form-header[b-aevtc6uwj8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
}

    .form-header h3[b-aevtc6uwj8] {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #111827;
    }

.close-button[b-aevtc6uwj8] {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

    .close-button:hover[b-aevtc6uwj8] {
        color: #111827;
    }

.small-form-body[b-aevtc6uwj8] {
    padding: 22px;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

.form-group[b-aevtc6uwj8] {
    margin-bottom: 17px;
}

    .form-group label[b-aevtc6uwj8] {
        display: block;
        margin-bottom: 6px;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

    .form-group input[b-aevtc6uwj8],
    .form-group select[b-aevtc6uwj8] {
        width: 100%;
        height: 40px;
        padding: 0 11px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
        box-sizing: border-box;
    }

        .form-group input:focus[b-aevtc6uwj8],
        .form-group select:focus[b-aevtc6uwj8] {
            border-color: #1769d2;
            box-shadow: 0 0 0 2px rgba(23, 105, 210, .10);
        }

.checkbox-group[b-aevtc6uwj8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .checkbox-group input[b-aevtc6uwj8] {
        width: 16px;
        height: 16px;
    }

.form-actions[b-aevtc6uwj8] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
}


/* =========================================================
   ALERTAS
   ========================================================= */

.alert-error[b-aevtc6uwj8] {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 13px;
}


/* =========================================================
   MODAL DE CONFIRMACIÓN
   ========================================================= */

.confirmation-modal[b-aevtc6uwj8] {
    width: 100%;
    max-width: 430px;
    background: white;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .20);
}

    .confirmation-modal h3[b-aevtc6uwj8] {
        margin: 0 0 10px 0;
        font-size: 18px;
        color: #111827;
    }

    .confirmation-modal p[b-aevtc6uwj8] {
        margin: 0 0 20px 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.5;
    }

.confirmation-actions[b-aevtc6uwj8] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}


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

@media (max-width: 768px) {

    .clientes-page[b-aevtc6uwj8] {
        padding: 16px;
    }

    .page-header[b-aevtc6uwj8] {
        align-items: flex-start;
        gap: 15px;
        flex-direction: column;
    }

    .filters[b-aevtc6uwj8] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-aevtc6uwj8] {
        max-width: none;
    }

    .clients-table[b-aevtc6uwj8] {
        min-width: 700px;
    }

    .list-card[b-aevtc6uwj8] {
        overflow-x: auto;
    }

    .btn-primary[b-aevtc6uwj8],
    .btn-secondary[b-aevtc6uwj8] {
        width: 100%;
    }
}
/* /Components/Pages/Logistica/CompararCotizaciones.razor.rz.scp.css */
.comparar-page[b-sdim29iv6i] { width:100%; box-sizing:border-box; }
.comparison-toolbar[b-sdim29iv6i] { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px; margin-bottom:16px; }
.comparison-toolbar .form-group[b-sdim29iv6i] { max-width:620px; }
.comparison-heading[b-sdim29iv6i] { display:flex; justify-content:space-between; align-items:center; gap:20px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px 20px; margin-bottom:16px; }
.comparison-heading h2[b-sdim29iv6i] { margin:4px 0 2px; font-size:20px; color:#111827; }
.comparison-heading p[b-sdim29iv6i] { margin:0; color:#6b7280; font-size:12px; }
.comparison-summary[b-sdim29iv6i] { display:flex; align-items:stretch; border-left:1px solid #e5e7eb; }
.comparison-summary div[b-sdim29iv6i] { min-width:90px; text-align:center; padding:6px 16px; border-right:1px solid #e5e7eb; }
.comparison-summary div:last-child[b-sdim29iv6i] { border-right:0; }
.comparison-summary strong[b-sdim29iv6i] { display:block; font-size:21px; color:#111827; }
.comparison-summary span[b-sdim29iv6i] { font-size:10px; color:#6b7280; }
.comparison-table-wrapper[b-sdim29iv6i] { background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:auto; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.comparison-table[b-sdim29iv6i] { width:100%; min-width:950px; border-collapse:separate; border-spacing:0; }
.comparison-table th[b-sdim29iv6i] { background:#f8fafc; border-bottom:1px solid #dfe3e8; border-right:1px solid #e5e7eb; padding:14px; text-align:left; vertical-align:top; }
.comparison-table th:last-child[b-sdim29iv6i],.comparison-table td:last-child[b-sdim29iv6i] { border-right:0; }
.comparison-table td[b-sdim29iv6i] { border-bottom:1px solid #e5e7eb; border-right:1px solid #eef0f3; padding:12px; vertical-align:top; }
.comparison-table tbody tr:last-child td[b-sdim29iv6i] { border-bottom:0; }
.product-column[b-sdim29iv6i] { width:240px; min-width:240px; position:sticky; left:0; z-index:3; }
.product-cell[b-sdim29iv6i] { background:#fff; position:sticky; left:0; z-index:2; }
.supplier-column[b-sdim29iv6i] { min-width:230px; }
.supplier-head[b-sdim29iv6i] { display:flex; flex-direction:column; gap:4px; }
.supplier-head strong[b-sdim29iv6i] { font-size:13px; color:#111827; line-height:1.3; }
.supplier-head small[b-sdim29iv6i] { color:#6b7280; font-size:10px; }
.quote-code[b-sdim29iv6i],.product-code[b-sdim29iv6i] { font-size:10px; font-weight:700; color:#2563eb; }
.quote-status[b-sdim29iv6i] { align-self:flex-start; margin-top:2px; }
.product-cell > strong[b-sdim29iv6i] { display:block; margin-top:4px; font-size:12px; color:#1f2937; line-height:1.35; }
.product-qty[b-sdim29iv6i] { margin-top:8px; color:#6b7280; font-size:10px; }
.product-qty b[b-sdim29iv6i] { color:#374151; }
.adjudicated-note[b-sdim29iv6i] { margin-top:10px; padding:7px 8px; border-radius:7px; background:#f0fdf4; color:#15803d; font-size:10px; line-height:1.35; }
.offer-cell[b-sdim29iv6i] { min-width:230px; }
.offer-box[b-sdim29iv6i] { min-height:105px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding:10px; border:1px solid #e5e7eb; border-radius:9px; background:#fff; }
.offer-box.offer-adjudicated[b-sdim29iv6i] { border-color:#86efac; background:#f0fdf4; }
.offer-box.offer-unavailable[b-sdim29iv6i] { background:#f8fafc; }
.offer-price[b-sdim29iv6i] { font-size:16px; font-weight:700; color:#111827; }
.offer-total[b-sdim29iv6i] { font-size:10px; color:#6b7280; }
.adjudicated-badge[b-sdim29iv6i] { font-size:9px; font-weight:800; color:#15803d; margin-top:3px; }
.already-assigned[b-sdim29iv6i] { font-size:9px; line-height:1.3; color:#9ca3af; }
.no-offer[b-sdim29iv6i] { color:#cbd5e1; font-size:20px; text-align:center; padding:25px 0; }
.comparison-legend[b-sdim29iv6i] { display:flex; flex-wrap:wrap; gap:18px; margin-top:12px; color:#6b7280; font-size:10px; }
.legend-dot[b-sdim29iv6i] { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; background:#cbd5e1; }
.legend-dot.adjudicado[b-sdim29iv6i] { background:#22c55e; }
.legend-dot.disponible[b-sdim29iv6i] { background:#3b82f6; }
.legend-dot.bloqueado[b-sdim29iv6i] { background:#9ca3af; }
.btn-small[b-sdim29iv6i] { min-height:32px; padding:0 10px; font-size:10px; }
.btn-warning[b-sdim29iv6i] { background:#fff7ed; border:1px solid #fed7aa; color:#c2410c; border-radius:7px; }
.decision-confirm[b-sdim29iv6i] { width:min(520px,calc(100vw - 30px)); }
.decision-data[b-sdim29iv6i] { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0; }
.decision-data div[b-sdim29iv6i] { background:#f8fafc; border-radius:8px; padding:10px; }
.decision-data span[b-sdim29iv6i] { display:block; color:#6b7280; font-size:9px; margin-bottom:4px; }
.decision-data strong[b-sdim29iv6i] { font-size:11px; color:#111827; }
.empty-state[b-sdim29iv6i] { background:#fff; border:1px dashed #d1d5db; border-radius:12px; padding:55px 20px; text-align:center; display:flex; flex-direction:column; gap:8px; color:#6b7280; }
.empty-state div[b-sdim29iv6i] { font-size:30px; }
.empty-state strong[b-sdim29iv6i] { color:#374151; }
@media(max-width:800px){
    .comparison-heading[b-sdim29iv6i]{flex-direction:column;align-items:flex-start}
    .comparison-summary[b-sdim29iv6i]{border-left:0;border-top:1px solid #e5e7eb;width:100%;padding-top:10px}
    .comparison-summary div[b-sdim29iv6i]{flex:1}
    .decision-data[b-sdim29iv6i]{grid-template-columns:1fr}
}
/* /Components/Pages/Logistica/Cotizaciones.razor.rz.scp.css */
/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

.page-container[b-5kczmn2lfh] {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   CABECERA
   ========================================================= */

.page-header[b-5kczmn2lfh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

    .page-header h1[b-5kczmn2lfh] {
        margin: 0;
        color: #111827;
        font-size: 28px;
        font-weight: 600;
    }

    .page-header p[b-5kczmn2lfh] {
        margin: 6px 0 0;
        color: #6b7280;
        font-size: 14px;
    }

.header-actions[b-5kczmn2lfh] {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary[b-5kczmn2lfh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s ease;
}

    .btn-primary:hover[b-5kczmn2lfh] {
        background: #1d4ed8;
    }

    .btn-primary:disabled[b-5kczmn2lfh] {
        opacity: .6;
        cursor: not-allowed;
    }

.btn-secondary[b-5kczmn2lfh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-secondary:hover[b-5kczmn2lfh] {
        background: #f9fafb;
    }

.btn-danger[b-5kczmn2lfh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #dc2626;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-danger:hover[b-5kczmn2lfh] {
        background: #b91c1c;
    }


/* =========================================================
   FILTROS
   ========================================================= */

.filters-bar[b-5kczmn2lfh] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-box[b-5kczmn2lfh] {
    position: relative;
    flex: 1 1 280px;
    max-width: 420px;
}

    .search-box input[b-5kczmn2lfh] {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        padding: 0 12px 0 38px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        outline: none;
        background: #ffffff;
        color: #111827;
        font-size: 13px;
    }

        .search-box input:focus[b-5kczmn2lfh] {
            border-color: #315a9f;
            box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
        }

.search-icon[b-5kczmn2lfh] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 15px;
    pointer-events: none;
}

.filter-select[b-5kczmn2lfh] {
    height: 40px;
    padding: 0 32px 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}


/* =========================================================
   TARJETA / TABLA
   ========================================================= */

.content-card[b-5kczmn2lfh] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.table-container[b-5kczmn2lfh] {
    width: 100%;
    overflow-x: auto;
}

.data-table[b-5kczmn2lfh] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

    .data-table thead th[b-5kczmn2lfh] {
        padding: 12px 14px;
        border-bottom: 1px solid #e5e7eb;
        background: #f8fafc;
        color: #374151;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
    }

    .data-table tbody td[b-5kczmn2lfh] {
        padding: 13px 14px;
        border-bottom: 1px solid #f1f5f9;
        color: #374151;
        font-size: 13px;
        vertical-align: middle;
    }

    .data-table tbody tr:hover[b-5kczmn2lfh] {
        background: #f8fafc;
    }

    .data-table tbody tr:last-child td[b-5kczmn2lfh] {
        border-bottom: none;
    }


/* =========================================================
   ESTADOS
   ========================================================= */

.status-badge[b-5kczmn2lfh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.status-registrada[b-5kczmn2lfh] {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-evaluacion[b-5kczmn2lfh] {
    background: #fef3c7;
    color: #92400e;
}

.status-aprobada[b-5kczmn2lfh] {
    background: #dcfce7;
    color: #166534;
}

.status-rechazada[b-5kczmn2lfh] {
    background: #fee2e2;
    color: #991b1b;
}

.status-vencida[b-5kczmn2lfh] {
    background: #f3f4f6;
    color: #4b5563;
}


/* =========================================================
   ACCIONES
   ========================================================= */

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

.action-button[b-5kczmn2lfh] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

    .action-button:hover[b-5kczmn2lfh] {
        background: #f3f4f6;
        color: #111827;
    }

.action-edit:hover[b-5kczmn2lfh] {
    background: #dbeafe;
    color: #1d4ed8;
}

.action-delete:hover[b-5kczmn2lfh] {
    background: #fee2e2;
    color: #dc2626;
}


/* =========================================================
   VACÍO
   ========================================================= */

.empty-list[b-5kczmn2lfh] {
    padding: 60px 20px;
    text-align: center;
}

.empty-list-icon[b-5kczmn2lfh] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.empty-list h3[b-5kczmn2lfh] {
    margin: 0 0 7px;
    color: #111827;
    font-size: 18px;
}

.empty-list p[b-5kczmn2lfh] {
    margin: 0 0 20px;
    color: #6b7280;
    font-size: 14px;
}


/* =========================================================
   MODAL - FONDO
   ========================================================= */

.modal-overlay[b-5kczmn2lfh] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, .58);
}


/* =========================================================
   MODAL PRINCIPAL
   ========================================================= */

.product-form-modal[b-5kczmn2lfh] {
    width: min(980px, calc(100vw - 48px));
    height: 90vh;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    overflow: hidden;
}


    /* =========================================================
   EDIT FORM
   ========================================================= */

    .product-form-modal > form[b-5kczmn2lfh] {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }


/* =========================================================
   CABECERA DEL MODAL
   ========================================================= */

.modal-header[b-5kczmn2lfh] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

    .modal-header h2[b-5kczmn2lfh] {
        margin: 0;
        color: #111827;
        font-size: 19px;
        font-weight: 600;
    }

    .modal-header p[b-5kczmn2lfh] {
        margin: 5px 0 0;
        color: #6b7280;
        font-size: 12px;
    }


/* =========================================================
   BOTÓN CERRAR
   ========================================================= */

.modal-close[b-5kczmn2lfh] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-close:hover[b-5kczmn2lfh] {
        background: #f3f4f6;
        color: #111827;
    }


/* =========================================================
   CUERPO DEL MODAL
   ESTE ES EL SCROLL IMPORTANTE
   ========================================================= */

.form-body[b-5kczmn2lfh] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 22px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

    .form-body[b-5kczmn2lfh]::-webkit-scrollbar {
        width: 8px;
    }

    .form-body[b-5kczmn2lfh]::-webkit-scrollbar-track {
        background: #f8fafc;
    }

    .form-body[b-5kczmn2lfh]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

        .form-body[b-5kczmn2lfh]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }


/* =========================================================
   SECCIONES
   ========================================================= */

.form-section-title[b-5kczmn2lfh] {
    margin: 4px 0 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
}

    .form-section-title:not(:first-child)[b-5kczmn2lfh] {
        margin-top: 25px;
    }


/* =========================================================
   GRID
   ========================================================= */

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

.form-group[b-5kczmn2lfh] {
    min-width: 0;
}

.form-group-full[b-5kczmn2lfh] {
    grid-column: 1 / -1;
}


/* =========================================================
   LABELS
   ========================================================= */

.form-group label[b-5kczmn2lfh] {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

    .form-group label span[b-5kczmn2lfh] {
        color: #dc2626;
    }


/* =========================================================
   INPUTS
   ========================================================= */

.form-control[b-5kczmn2lfh] {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    background: #ffffff;
    color: #111827;
    font-family: inherit;
    font-size: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-control:hover[b-5kczmn2lfh] {
        border-color: #b8c0cc;
    }

    .form-control:focus[b-5kczmn2lfh] {
        border-color: #315a9f;
        box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
    }

textarea.form-control[b-5kczmn2lfh] {
    min-height: 90px;
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.45;
}

select.form-control[b-5kczmn2lfh] {
    cursor: pointer;
}


/* =========================================================
   READONLY
   ========================================================= */

.form-control-readonly[b-5kczmn2lfh] {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}


/* =========================================================
   AYUDA
   ========================================================= */

.field-help[b-5kczmn2lfh] {
    margin-top: 4px;
    color: #6b7280;
    font-size: 11px;
}


/* =========================================================
   DETALLE DE COTIZACIÓN
   ========================================================= */

.detail-section[b-5kczmn2lfh] {
    margin-top: 24px;
}

.detail-table-container[b-5kczmn2lfh] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.detail-table[b-5kczmn2lfh] {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
}

    .detail-table thead th[b-5kczmn2lfh] {
        padding: 10px 11px;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
        color: #374151;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
    }

    .detail-table tbody td[b-5kczmn2lfh] {
        padding: 9px 10px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
        color: #374151;
        font-size: 12px;
    }

    .detail-table tbody tr:last-child td[b-5kczmn2lfh] {
        border-bottom: none;
    }

    .detail-table .form-control[b-5kczmn2lfh] {
        height: 36px;
        min-height: 36px;
        padding: 0 9px;
        font-size: 12px;
    }


/* =========================================================
   TOTALES
   ========================================================= */

.totals-container[b-5kczmn2lfh] {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.totals-box[b-5kczmn2lfh] {
    width: 330px;
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.total-row[b-5kczmn2lfh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 6px 0;
    color: #4b5563;
    font-size: 13px;
}

    .total-row strong[b-5kczmn2lfh] {
        color: #111827;
    }

.total-final[b-5kczmn2lfh] {
    margin-top: 7px;
    padding-top: 12px;
    border-top: 1px solid #d1d5db;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   DOCUMENTOS
   ========================================================= */

.documents-box[b-5kczmn2lfh] {
    margin-top: 20px;
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

    .documents-box h4[b-5kczmn2lfh] {
        margin: 0 0 6px;
        color: #374151;
        font-size: 13px;
    }

    .documents-box p[b-5kczmn2lfh] {
        margin: 0;
        color: #6b7280;
        font-size: 12px;
    }


/* =========================================================
   FOOTER MODAL
   ========================================================= */

.modal-footer[b-5kczmn2lfh] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

    .modal-footer .btn-primary[b-5kczmn2lfh],
    .modal-footer .btn-secondary[b-5kczmn2lfh] {
        min-width: 118px;
        height: 40px;
    }


/* =========================================================
   ERRORES
   ========================================================= */

.form-error[b-5kczmn2lfh] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
}

.validation-summary[b-5kczmn2lfh] {
    margin-bottom: 15px;
    color: #b91c1c;
    font-size: 12px;
}


/* =========================================================
   CONFIRMACIÓN
   ========================================================= */

.confirm-modal[b-5kczmn2lfh] {
    width: min(430px, calc(100vw - 40px));
    padding: 28px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    text-align: center;
}

.confirm-icon[b-5kczmn2lfh] {
    width: 58px;
    height: 58px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

    .confirm-icon.warning[b-5kczmn2lfh] {
        background: #fef3c7;
    }

    .confirm-icon.success[b-5kczmn2lfh] {
        background: #dcfce7;
    }

.confirm-modal h2[b-5kczmn2lfh] {
    margin: 0 0 10px;
    color: #111827;
    font-size: 18px;
}

.confirm-modal p[b-5kczmn2lfh] {
    margin: 7px 0;
    color: #4b5563;
    font-size: 13px;
}

.confirm-description[b-5kczmn2lfh] {
    color: #6b7280 !important;
}

.danger-text[b-5kczmn2lfh] {
    color: #b91c1c !important;
}

.confirm-actions[b-5kczmn2lfh] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}


/* =========================================================
   LOADING
   ========================================================= */

.loading-container[b-5kczmn2lfh] {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
}

.spinner[b-5kczmn2lfh] {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-5kczmn2lfh .8s linear infinite;
}

.mini-spinner[b-5kczmn2lfh] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.5);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-5kczmn2lfh .8s linear infinite;
}

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


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

@media (max-width: 900px) {

    .page-header[b-5kczmn2lfh] {
        flex-direction: column;
    }

    .header-actions[b-5kczmn2lfh] {
        width: 100%;
    }

    .form-grid[b-5kczmn2lfh] {
        grid-template-columns: 1fr;
    }

    .form-group-full[b-5kczmn2lfh] {
        grid-column: auto;
    }

    .product-form-modal[b-5kczmn2lfh] {
        width: calc(100vw - 30px);
        height: 94vh;
        max-height: calc(100vh - 30px);
    }

    .form-body[b-5kczmn2lfh] {
        padding: 18px;
    }

    .modal-header[b-5kczmn2lfh] {
        padding: 17px 18px;
    }

    .modal-footer[b-5kczmn2lfh] {
        padding: 12px 18px;
    }
}

@media (max-width: 600px) {

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

    .product-form-modal[b-5kczmn2lfh] {
        width: 100%;
        height: 96vh;
        max-height: calc(100vh - 20px);
        border-radius: 12px;
    }

    .form-grid[b-5kczmn2lfh] {
        grid-template-columns: 1fr;
    }

    .totals-container[b-5kczmn2lfh] {
        justify-content: stretch;
    }

    .totals-box[b-5kczmn2lfh] {
        width: 100%;
    }

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

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



/* =========================================================
   SERCOM - COTIZACIONES
   CORRECCIONES DE INTEGRACIÓN CON COTIZACIONES.razor
   ========================================================= */

.cotizaciones-page[b-5kczmn2lfh] {
    width: 100%;
    box-sizing: border-box;
}

.page-actions[b-5kczmn2lfh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-error[b-5kczmn2lfh] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
}

.page-error button[b-5kczmn2lfh] {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
}

.list-card[b-5kczmn2lfh] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.filters[b-5kczmn2lfh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.status-filter[b-5kczmn2lfh] {
    height: 40px;
    min-width: 150px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.status-filter:focus[b-5kczmn2lfh] {
    border-color: #315a9f;
    box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
}

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

.list-summary[b-5kczmn2lfh] {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #6b7280;
    font-size: 12px;
}

.list-summary strong[b-5kczmn2lfh] {
    color: #374151;
}

.text-right[b-5kczmn2lfh] {
    text-align: right !important;
}

.status-pending[b-5kczmn2lfh] {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-approved[b-5kczmn2lfh],
.status-aprobada[b-5kczmn2lfh] {
    background: #dcfce7;
    color: #166534;
}

.status-rejected[b-5kczmn2lfh],
.status-rechazada[b-5kczmn2lfh] {
    background: #fee2e2;
    color: #991b1b;
}

.status-evaluation[b-5kczmn2lfh],
.status-evaluacion[b-5kczmn2lfh] {
    background: #fef3c7;
    color: #92400e;
}

.status-expired[b-5kczmn2lfh],
.status-vencida[b-5kczmn2lfh],
.status-inactive[b-5kczmn2lfh] {
    background: #f3f4f6;
    color: #4b5563;
}


/* =========================================================
   MODAL PRINCIPAL
   ========================================================= */

.modal-container[b-5kczmn2lfh] {
    width: min(980px, calc(100vw - 48px));
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    overflow: hidden;
}

.modal-large[b-5kczmn2lfh] {
    width: min(980px, calc(100vw - 48px));
}

.modal-container > .modal-header[b-5kczmn2lfh] {
    flex-shrink: 0;
}

.modal-container > .modal-body[b-5kczmn2lfh] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px 24px;
    box-sizing: border-box;
}

.modal-container > .modal-body[b-5kczmn2lfh]::-webkit-scrollbar {
    width: 8px;
}

.modal-container > .modal-body[b-5kczmn2lfh]::-webkit-scrollbar-track {
    background: #f8fafc;
}

.modal-container > .modal-body[b-5kczmn2lfh]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.product-form[b-5kczmn2lfh] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.product-form > .form-body[b-5kczmn2lfh] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.product-form > .form-body[b-5kczmn2lfh]::-webkit-scrollbar {
    width: 8px;
}

.product-form > .form-body[b-5kczmn2lfh]::-webkit-scrollbar-track {
    background: #f8fafc;
}

.product-form > .form-body[b-5kczmn2lfh]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}


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

.section-title[b-5kczmn2lfh] {
    margin: 4px 0 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
}

.section-title.no-margin[b-5kczmn2lfh] {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.section-header[b-5kczmn2lfh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 24px;
    margin-bottom: 12px;
}

.section-description[b-5kczmn2lfh] {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 11px;
}

.input-with-suffix[b-5kczmn2lfh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-suffix .form-control[b-5kczmn2lfh] {
    flex: 1 1 auto;
}

.input-with-suffix span[b-5kczmn2lfh] {
    color: #6b7280;
    font-size: 12px;
    white-space: nowrap;
}

.form-body small[b-5kczmn2lfh] {
    color: #6b7280;
    font-size: 11px;
}

.form-error[b-5kczmn2lfh] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
}


/* =========================================================
   DETALLE
   ========================================================= */

.detail-table-wrapper[b-5kczmn2lfh] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.detail-unit[b-5kczmn2lfh] {
    display: inline-block;
    min-width: 55px;
    color: #6b7280;
    font-size: 12px;
}

.detail-delete[b-5kczmn2lfh] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.detail-delete:hover[b-5kczmn2lfh] {
    background: #fee2e2;
    color: #dc2626;
}

.detail-table .form-control[b-5kczmn2lfh] {
    height: 36px;
    min-height: 36px;
    padding: 0 9px;
    font-size: 12px;
}

.textarea[b-5kczmn2lfh] {
    width: 100%;
}


/* =========================================================
   DOCUMENTOS
   ========================================================= */

.document-placeholder[b-5kczmn2lfh] {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 12px;
    padding: 15px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

.document-placeholder-icon[b-5kczmn2lfh] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 9px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.document-placeholder strong[b-5kczmn2lfh] {
    display: block;
    color: #374151;
    font-size: 12px;
}

.document-placeholder p[b-5kczmn2lfh] {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 11px;
}


/* =========================================================
   BOTÓN PEQUEÑO
   ========================================================= */

.btn-small[b-5kczmn2lfh] {
    min-height: 36px;
    height: 36px;
    padding: 0 13px;
    font-size: 12px;
}


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

@media (max-width: 900px) {
    .page-actions[b-5kczmn2lfh] {
        width: 100%;
    }

    .modal-container[b-5kczmn2lfh],
    .modal-large[b-5kczmn2lfh] {
        width: calc(100vw - 30px);
        max-height: 94vh;
    }
}

@media (max-width: 600px) {
    .modal-overlay[b-5kczmn2lfh] {
        padding: 10px;
    }

    .modal-container[b-5kczmn2lfh],
    .modal-large[b-5kczmn2lfh],
    .product-form-modal[b-5kczmn2lfh] {
        width: 100%;
        max-height: 96vh;
        border-radius: 12px;
    }

    .filters[b-5kczmn2lfh] {
        align-items: stretch;
    }

    .search-box[b-5kczmn2lfh],
    .status-filter[b-5kczmn2lfh] {
        width: 100%;
        max-width: none;
    }

    .section-header[b-5kczmn2lfh] {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-header .btn-small[b-5kczmn2lfh] {
        width: 100%;
    }

    .document-placeholder[b-5kczmn2lfh] {
        align-items: flex-start;
    }
}

/* =========================================================
   FLUJO DE DECISIÓN
   ========================================================= */
.decision-panel[b-5kczmn2lfh] {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}
.decision-actions[b-5kczmn2lfh] { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.decision-note[b-5kczmn2lfh] { font-size:12px; color:#6b7280; }
.decision-result[b-5kczmn2lfh] { border-radius:8px; padding:12px 14px; font-size:12px; }
.decision-result.approved[b-5kczmn2lfh] { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.decision-result.rejected[b-5kczmn2lfh] { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.decision-result span[b-5kczmn2lfh] { margin-left:6px; color:inherit; opacity:.8; }
.decision-result p[b-5kczmn2lfh] { margin:7px 0 0; color:#4b5563; }
.decision-confirm[b-5kczmn2lfh] { width:min(500px, calc(100vw - 30px)); }
.decision-confirm > label[b-5kczmn2lfh] { display:block; margin:14px 0 6px; font-size:12px; font-weight:600; color:#374151; }
.action-btn.compare[b-5kczmn2lfh] { background:#eef2ff; color:#4338ca; }
.detail-total-summary[b-5kczmn2lfh] { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.detail-total-summary > div[b-5kczmn2lfh] { padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; display:flex; flex-direction:column; gap:4px; }
.detail-total-summary span[b-5kczmn2lfh] { font-size:10px; color:#6b7280; }
.detail-total-summary strong[b-5kczmn2lfh] { font-size:13px; color:#374151; }
.detail-total-summary .grand[b-5kczmn2lfh] { background:#f8fafc; border-color:#cbd5e1; }
.detail-total-summary .grand strong[b-5kczmn2lfh] { font-size:16px; color:#111827; }
@media(max-width:800px){ .detail-total-summary[b-5kczmn2lfh]{grid-template-columns:1fr 1fr;} }
@media(max-width:500px){ .detail-total-summary[b-5kczmn2lfh]{grid-template-columns:1fr;} }

/* =========================================================
   DOCUMENTOS / PDF
   ========================================================= */
.file-upload-button[b-5kczmn2lfh] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

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

.document-section-header[b-5kczmn2lfh] {
    margin-bottom: 10px;
}

.document-list-form[b-5kczmn2lfh] {
    margin-top: 8px;
}

.document-item[b-5kczmn2lfh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.document-info[b-5kczmn2lfh] {
    min-width: 0;
    flex: 1;
}

.document-info strong[b-5kczmn2lfh] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-info small[b-5kczmn2lfh] {
    display: block;
    margin-top: 3px;
    color: #6b7280;
    font-size: 11px;
}

.document-actions[b-5kczmn2lfh] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.document-action[b-5kczmn2lfh] {
    border: 0;
    background: #f3f4f6;
    color: #374151;
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.document-action:hover[b-5kczmn2lfh] {
    background: #e5e7eb;
}

.document-action-danger[b-5kczmn2lfh] {
    color: #b91c1c;
}

.document-action-danger:hover[b-5kczmn2lfh] {
    background: #fee2e2;
}

.file-message[b-5kczmn2lfh] {
    margin: 8px 0;
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 12px;
}

.file-message-success[b-5kczmn2lfh] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.file-message-error[b-5kczmn2lfh] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

@media (max-width: 700px) {
    .document-item[b-5kczmn2lfh] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .document-actions[b-5kczmn2lfh] {
        width: 100%;
        justify-content: flex-start;
        padding-left: 28px;
    }
}
/* /Components/Pages/Logistica/Dashboard.razor.rz.scp.css */
/* =========================================================
   DASHBOARD LOGÍSTICA
   ========================================================= */

.logistica-dashboard[b-8w02krunzt] {
    padding: 28px 30px 40px;
    max-width: 1600px;
    margin: 0 auto;
}


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

.dashboard-header[b-8w02krunzt] {
    margin-bottom: 30px;
}

.header-content[b-8w02krunzt] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon[b-8w02krunzt] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    font-size: 25px;
}

.dashboard-header h1[b-8w02krunzt] {
    margin: 0;
    color: #0f172a;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.dashboard-header p[b-8w02krunzt] {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 14px;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.dashboard-section[b-8w02krunzt] {
    margin-bottom: 32px;
}

.section-header[b-8w02krunzt] {
    margin-bottom: 15px;
}

    .section-header h2[b-8w02krunzt] {
        margin: 0;
        color: #1e293b;
        font-size: 17px;
        font-weight: 700;
    }

    .section-header p[b-8w02krunzt] {
        margin: 4px 0 0;
        color: #64748b;
        font-size: 13px;
    }


/* =========================================================
   OPERACIONES
   ========================================================= */

.operations-grid[b-8w02krunzt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.operation-card[b-8w02krunzt] {
    width: 100%;
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

    .operation-card:hover[b-8w02krunzt] {
        transform: translateY(-2px);
        border-color: #cbd5e1;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    }

    .operation-card:active[b-8w02krunzt] {
        transform: translateY(0);
    }

.operation-icon[b-8w02krunzt] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 22px;
}

.operation-content[b-8w02krunzt] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.operation-title[b-8w02krunzt] {
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
}

.operation-description[b-8w02krunzt] {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.operation-arrow[b-8w02krunzt] {
    color: #94a3b8;
    font-size: 18px;
    transition: transform 0.15s ease;
}

.operation-card:hover .operation-arrow[b-8w02krunzt] {
    transform: translateX(3px);
    color: #475569;
}


/* =========================================================
   COLORES DE ICONOS - OPERACIONES
   ========================================================= */

.operation-blue[b-8w02krunzt] {
    background: #eff6ff;
}

.operation-green[b-8w02krunzt] {
    background: #f0fdf4;
}

.operation-orange[b-8w02krunzt] {
    background: #fff7ed;
}

.operation-purple[b-8w02krunzt] {
    background: #faf5ff;
}

.operation-indigo[b-8w02krunzt] {
    background: #eef2ff;
}

.operation-red[b-8w02krunzt] {
    background: #fef2f2;
}


/* =========================================================
   MAESTROS
   ========================================================= */

.masters-grid[b-8w02krunzt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.master-card[b-8w02krunzt] {
    width: 100%;
    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

    .master-card:hover[b-8w02krunzt] {
        transform: translateY(-2px);
        border-color: #cbd5e1;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    }

.master-icon[b-8w02krunzt] {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 20px;
}

.master-content[b-8w02krunzt] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.master-title[b-8w02krunzt] {
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
}

.master-description[b-8w02krunzt] {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.master-arrow[b-8w02krunzt] {
    color: #94a3b8;
    font-size: 18px;
    transition: transform 0.15s ease;
}

.master-card:hover .master-arrow[b-8w02krunzt] {
    transform: translateX(3px);
    color: #475569;
}


/* =========================================================
   RESUMEN
   ========================================================= */

.summary-grid[b-8w02krunzt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.summary-card[b-8w02krunzt] {
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.summary-top[b-8w02krunzt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.summary-label[b-8w02krunzt] {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.summary-icon[b-8w02krunzt] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 16px;
}

.summary-value[b-8w02krunzt] {
    margin-top: 12px;
    color: #0f172a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.summary-footer[b-8w02krunzt] {
    margin-top: 10px;
    color: #94a3b8;
    font-size: 11px;
}

.summary-blue[b-8w02krunzt] {
    background: #eff6ff;
}

.summary-green[b-8w02krunzt] {
    background: #f0fdf4;
}

.summary-orange[b-8w02krunzt] {
    background: #fff7ed;
}

.summary-red[b-8w02krunzt] {
    background: #fef2f2;
}


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

@media (max-width: 1200px) {

    .operations-grid[b-8w02krunzt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .masters-grid[b-8w02krunzt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-grid[b-8w02krunzt] {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 700px) {

    .logistica-dashboard[b-8w02krunzt] {
        padding: 20px 16px 30px;
    }

    .dashboard-header h1[b-8w02krunzt] {
        font-size: 23px;
    }

    .operations-grid[b-8w02krunzt],
    .masters-grid[b-8w02krunzt],
    .summary-grid[b-8w02krunzt] {
        grid-template-columns: 1fr;
    }

    .operation-card[b-8w02krunzt],
    .master-card[b-8w02krunzt] {
        min-height: 84px;
    }
}
/* /Components/Pages/Logistica/Existencias.razor.rz.scp.css */
.existencias-page[b-ajmr6v499k] {
    padding: 24px;
    max-width: 1800px;
    margin: 0 auto;
}

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

.page-title[b-ajmr6v499k] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.title-icon[b-ajmr6v499k] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: #f1f5f9;
}

.page-title h1[b-ajmr6v499k] {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
}

.page-title p[b-ajmr6v499k] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
}

.page-actions[b-ajmr6v499k] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-primary[b-ajmr6v499k],
.btn-secondary[b-ajmr6v499k] {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.btn-primary[b-ajmr6v499k] {
    background: #2563eb;
    color: white;
}

    .btn-primary:hover[b-ajmr6v499k] {
        background: #1d4ed8;
    }

    .btn-primary:disabled[b-ajmr6v499k] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.btn-secondary[b-ajmr6v499k] {
    background: #f1f5f9;
    color: #334155;
}

    .btn-secondary:hover[b-ajmr6v499k] {
        background: #e2e8f0;
    }

.page-error[b-ajmr6v499k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

    .page-error button[b-ajmr6v499k] {
        margin-left: auto;
        border: none;
        background: transparent;
        color: #b91c1c;
        font-size: 20px;
        cursor: pointer;
    }

.loading-container[b-ajmr6v499k] {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
}

.spinner[b-ajmr6v499k] {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    border: 3px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-ajmr6v499k 0.8s linear infinite;
}

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

.list-card[b-ajmr6v499k] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.filters[b-ajmr6v499k] {
    display: flex;
    align-items: end;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.filter-group[b-ajmr6v499k] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 280px;
}

    .filter-group label[b-ajmr6v499k] {
        font-size: 13px;
        font-weight: 600;
        color: #475569;
    }

.status-filter[b-ajmr6v499k] {
    height: 40px;
    min-width: 280px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    color: #334155;
}

.search-box[b-ajmr6v499k] {
    flex: 1;
    position: relative;
    min-width: 260px;
}

    .search-box input[b-ajmr6v499k] {
        width: 100%;
        height: 40px;
        padding: 0 12px 0 38px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        outline: none;
        box-sizing: border-box;
    }

        .search-box input:focus[b-ajmr6v499k],
        .status-filter:focus[b-ajmr6v499k] {
            border-color: #2563eb;
        }

.search-icon[b-ajmr6v499k] {
    position: absolute;
    left: 12px;
    top: 10px;
    font-size: 16px;
}

.list-summary[b-ajmr6v499k] {
    padding: 14px 18px;
    font-size: 13px;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}

    .list-summary strong[b-ajmr6v499k] {
        color: #334155;
    }

.table-wrap[b-ajmr6v499k] {
    width: 100%;
    overflow-x: auto;
}

table[b-ajmr6v499k] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1460px;
    table-layout: fixed;
}

thead[b-ajmr6v499k] {
    background: #f8fafc;
}

th[b-ajmr6v499k] {
    padding: 10px 9px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.18;
    vertical-align: middle;
    height: 48px;
}

    th.th-wrap[b-ajmr6v499k] {
        white-space: normal;
    }

td[b-ajmr6v499k] {
    padding: 13px 9px;
    font-size: 13px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

tbody tr:hover[b-ajmr6v499k] {
    background: #f8fafc;
}

/* ANCHOS DE COLUMNAS */
.col-producto[b-ajmr6v499k] {
    width: 190px;
}

.col-codigo[b-ajmr6v499k] {
    width: 90px;
}

.col-unidad[b-ajmr6v499k] {
    width: 105px;
}

th:nth-child(4)[b-ajmr6v499k],
th:nth-child(5)[b-ajmr6v499k],
th:nth-child(6)[b-ajmr6v499k],
th:nth-child(7)[b-ajmr6v499k] {
    width: 88px;
}

th:nth-child(8)[b-ajmr6v499k] {
    width: 105px;
}

th:nth-child(9)[b-ajmr6v499k] {
    width: 115px;
}

th:nth-child(10)[b-ajmr6v499k] {
    width: 105px;
}

th:nth-child(11)[b-ajmr6v499k] {
    width: 120px;
}

th:nth-child(12)[b-ajmr6v499k] {
    width: 85px;
}

th:nth-child(13)[b-ajmr6v499k] {
    width: 95px;
}

.producto-nombre[b-ajmr6v499k] {
    display: block;
    line-height: 1.35;
    white-space: normal;
}

.codigo-producto[b-ajmr6v499k] {
    font-weight: 600;
    color: #475569;
}

.unidad-nombre[b-ajmr6v499k] {
    display: block;
    font-weight: 600;
    color: #334155;
    line-height: 1.2;
}

.unidad-abreviatura[b-ajmr6v499k] {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #64748b;
}

.right[b-ajmr6v499k] {
    text-align: right;
}

th.right[b-ajmr6v499k] {
    text-align: center;
}

.center[b-ajmr6v499k] {
    text-align: center;
}

.status-badge[b-ajmr6v499k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.status-active[b-ajmr6v499k] {
    background: #dcfce7;
    color: #15803d;
}

.status-inactive[b-ajmr6v499k] {
    background: #fee2e2;
    color: #b91c1c;
}

.status-warning[b-ajmr6v499k] {
    background: #fef3c7;
    color: #b45309;
}

.empty-list[b-ajmr6v499k] {
    padding: 70px 20px;
    text-align: center;
}

.empty-list-icon[b-ajmr6v499k] {
    font-size: 40px;
    margin-bottom: 12px;
}

.empty-list h3[b-ajmr6v499k] {
    margin: 0 0 6px;
    color: #334155;
}

.empty-list p[b-ajmr6v499k] {
    margin: 0;
    color: #64748b;
}

@media (max-width: 900px) {

    .existencias-page[b-ajmr6v499k] {
        padding: 16px;
    }

    .page-header[b-ajmr6v499k] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-actions[b-ajmr6v499k] {
        width: 100%;
    }

    .filters[b-ajmr6v499k] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-ajmr6v499k],
    .status-filter[b-ajmr6v499k],
    .search-box[b-ajmr6v499k] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Pages/Logistica/InventarioDetalle.razor.rz.scp.css */
/* =========================================================
   SERCOM ERP - DETALLE DE INVENTARIO
   ========================================================= */

.inventario-detalle-page[b-vrvn01ns0d] {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   CABECERA
   ========================================================= */

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

.page-title[b-vrvn01ns0d] {
    display: flex;
    align-items: center;
    gap: 13px;
}

    .page-title h1[b-vrvn01ns0d] {
        margin: 0 0 4px;
        color: #111827;
        font-size: 26px;
        font-weight: 700;
    }

    .page-title p[b-vrvn01ns0d] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

.title-icon[b-vrvn01ns0d] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eff6ff;
    font-size: 23px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary[b-vrvn01ns0d],
.btn-secondary[b-vrvn01ns0d] {
    min-height: 40px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s ease;
}

.btn-primary[b-vrvn01ns0d] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

    .btn-primary:hover[b-vrvn01ns0d] {
        background: #1d4ed8;
    }

.btn-secondary[b-vrvn01ns0d] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

    .btn-secondary:hover[b-vrvn01ns0d] {
        background: #f9fafb;
    }


/* =========================================================
   ERROR
   ========================================================= */

.page-error[b-vrvn01ns0d] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
}


/* =========================================================
   TARJETA
   ========================================================= */

.detail-card[b-vrvn01ns0d] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   CABECERA DE TARJETA
   ========================================================= */

.detail-card-header[b-vrvn01ns0d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.section-label[b-vrvn01ns0d] {
    display: block;
    margin-bottom: 5px;
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
}

.detail-card-header h2[b-vrvn01ns0d] {
    margin: 0;
    color: #111827;
    font-size: 21px;
}


/* =========================================================
   BADGE
   ========================================================= */

.movement-badge[b-vrvn01ns0d] {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.movement-entry[b-vrvn01ns0d] {
    background: #dcfce7;
    color: #166534;
}

.movement-exit[b-vrvn01ns0d] {
    background: #fee2e2;
    color: #991b1b;
}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.info-grid[b-vrvn01ns0d] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid #e5e7eb;
}

.info-item[b-vrvn01ns0d] {
    padding: 16px 20px;
    border-right: 1px solid #f0f1f3;
}

    .info-item:nth-child(3n)[b-vrvn01ns0d] {
        border-right: 0;
    }

    .info-item span[b-vrvn01ns0d] {
        display: block;
        margin-bottom: 5px;
        color: #6b7280;
        font-size: 11px;
    }

    .info-item strong[b-vrvn01ns0d] {
        color: #374151;
        font-size: 13px;
    }


/* =========================================================
   MOVIMIENTO INTEGRADO
   ========================================================= */

.integrated-warning[b-vrvn01ns0d] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 18px 20px 0;
    padding: 13px 15px;
    border: 1px solid #fde68a;
    border-radius: 9px;
    background: #fffbeb;
}

.integrated-icon[b-vrvn01ns0d] {
    font-size: 20px;
}

.integrated-warning strong[b-vrvn01ns0d] {
    color: #92400e;
    font-size: 13px;
}

.integrated-warning p[b-vrvn01ns0d] {
    margin: 4px 0 0;
    color: #78350f;
    font-size: 12px;
}


/* =========================================================
   SECCIÓN
   ========================================================= */

.section-title[b-vrvn01ns0d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px 12px;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
}

    .section-title span[b-vrvn01ns0d] {
        color: #6b7280;
        font-size: 11px;
        font-weight: 500;
    }


/* =========================================================
   TABLA
   ========================================================= */

.table-wrap[b-vrvn01ns0d] {
    margin: 0 20px;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
}

table[b-vrvn01ns0d] {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

th[b-vrvn01ns0d] {
    padding: 12px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

td[b-vrvn01ns0d] {
    padding: 13px 12px;
    border-bottom: 1px solid #f0f1f3;
    color: #374151;
    font-size: 13px;
}

tbody tr:last-child td[b-vrvn01ns0d] {
    border-bottom: 0;
}

tbody tr:hover[b-vrvn01ns0d] {
    background: #fafcff;
}

td strong[b-vrvn01ns0d] {
    color: #111827;
}

.right[b-vrvn01ns0d] {
    text-align: right;
}

.quantity[b-vrvn01ns0d] {
    font-weight: 700;
}


/* =========================================================
   OBSERVACIONES
   ========================================================= */

.observations[b-vrvn01ns0d] {
    margin: 18px 20px;
    padding: 14px;
    border-radius: 9px;
    background: #f8fafc;
}

    .observations span[b-vrvn01ns0d] {
        display: block;
        margin-bottom: 5px;
        color: #6b7280;
        font-size: 11px;
        font-weight: 700;
    }

    .observations p[b-vrvn01ns0d] {
        margin: 0;
        color: #374151;
        font-size: 13px;
        white-space: pre-wrap;
    }


/* =========================================================
   ACCIONES
   ========================================================= */

.detail-actions[b-vrvn01ns0d] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}


/* =========================================================
   LOADING
   ========================================================= */

.loading-container[b-vrvn01ns0d] {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
}

.spinner[b-vrvn01ns0d] {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-vrvn01ns0d .8s linear infinite;
}

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


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

@media (max-width: 850px) {

    .page-header[b-vrvn01ns0d] {
        align-items: flex-start;
        flex-direction: column;
    }

    .info-grid[b-vrvn01ns0d] {
        grid-template-columns: 1fr 1fr;
    }

    .info-item:nth-child(3n)[b-vrvn01ns0d] {
        border-right: 1px solid #f0f1f3;
    }

    .info-item:nth-child(2n)[b-vrvn01ns0d] {
        border-right: 0;
    }
}

@media (max-width: 600px) {

    .info-grid[b-vrvn01ns0d] {
        grid-template-columns: 1fr;
    }

    .info-item[b-vrvn01ns0d] {
        border-right: 0 !important;
        border-bottom: 1px solid #f0f1f3;
    }

    .detail-card-header[b-vrvn01ns0d] {
        align-items: flex-start;
        flex-direction: column;
    }

    .detail-actions[b-vrvn01ns0d] {
        flex-direction: column-reverse;
    }

        .detail-actions button[b-vrvn01ns0d] {
            width: 100%;
        }
}
/* /Components/Pages/Logistica/InventarioEditar.razor.rz.scp.css */
/* =========================================================
   SERCOM ERP - EDITAR MOVIMIENTO
   ========================================================= */

.inventario-editar-page[b-qq5zro86c7] {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   CABECERA
   ========================================================= */

.page-header[b-qq5zro86c7] {
    margin-bottom: 22px;
}

.page-title[b-qq5zro86c7] {
    display: flex;
    align-items: center;
    gap: 13px;
}

    .page-title h1[b-qq5zro86c7] {
        margin: 0 0 4px;
        color: #111827;
        font-size: 26px;
        font-weight: 700;
    }

    .page-title p[b-qq5zro86c7] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

.title-icon[b-qq5zro86c7] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eff6ff;
    font-size: 22px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary[b-qq5zro86c7],
.btn-secondary[b-qq5zro86c7] {
    min-height: 40px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s ease;
}

.btn-primary[b-qq5zro86c7] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

    .btn-primary:hover[b-qq5zro86c7] {
        background: #1d4ed8;
    }

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

.btn-secondary[b-qq5zro86c7] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

    .btn-secondary:hover[b-qq5zro86c7] {
        background: #f9fafb;
    }


/* =========================================================
   ERROR
   ========================================================= */

.page-error[b-qq5zro86c7] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
}

    .page-error button[b-qq5zro86c7] {
        width: 28px;
        height: 28px;
        margin-left: auto;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 18px;
        cursor: pointer;
    }


/* =========================================================
   TARJETA
   ========================================================= */

.list-card[b-qq5zro86c7] {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   CABECERA MOVIMIENTO
   ========================================================= */

.movement-header[b-qq5zro86c7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.section-label[b-qq5zro86c7] {
    display: block;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
}

.movement-header h2[b-qq5zro86c7] {
    margin: 0;
    color: #111827;
    font-size: 21px;
}

.movement-badge[b-qq5zro86c7] {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.movement-entry[b-qq5zro86c7] {
    background: #dcfce7;
    color: #166534;
}

.movement-exit[b-qq5zro86c7] {
    background: #fee2e2;
    color: #991b1b;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.form-section-title[b-qq5zro86c7] {
    padding: 15px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}

.detail-section-title[b-qq5zro86c7] {
    margin-top: 20px;
    border-top: 1px solid #e5e7eb;
}


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

.form-grid[b-qq5zro86c7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 20px;
}

.form-group-full[b-qq5zro86c7] {
    grid-column: 1 / -1;
}

.form-group label[b-qq5zro86c7],
.product-selector label[b-qq5zro86c7],
.quantity-selector label[b-qq5zro86c7],
.observation-selector label[b-qq5zro86c7] {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
}

.form-control[b-qq5zro86c7] {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    padding: 8px 11px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-family: inherit;
    font-size: 13px;
}

    .form-control:focus[b-qq5zro86c7] {
        outline: none;
        border-color: #315a9f;
        box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
    }

    .form-control[readonly][b-qq5zro86c7] {
        background: #f9fafb;
        color: #6b7280;
    }


/* =========================================================
   AGREGAR DETALLE
   ========================================================= */

.add-detail-box[b-qq5zro86c7] {
    display: grid;
    grid-template-columns: minmax(260px, 1.7fr) minmax(130px, .7fr) minmax(220px, 1.3fr) auto;
    align-items: end;
    gap: 12px;
    margin: 18px;
    padding: 16px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #f8fafc;
}

.add-detail-button[b-qq5zro86c7] {
    display: flex;
    align-items: flex-end;
}

    .add-detail-button button[b-qq5zro86c7] {
        white-space: nowrap;
    }


/* =========================================================
   TABLA
   ========================================================= */

.table-wrap[b-qq5zro86c7] {
    margin: 0 18px 18px;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
}

table[b-qq5zro86c7] {
    width: 100%;
    min-width: 750px;
    border-collapse: collapse;
}

th[b-qq5zro86c7] {
    padding: 12px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

td[b-qq5zro86c7] {
    padding: 13px 12px;
    border-bottom: 1px solid #f0f1f3;
    color: #374151;
    font-size: 13px;
}

tbody tr:last-child td[b-qq5zro86c7] {
    border-bottom: 0;
}

tbody tr:hover[b-qq5zro86c7] {
    background: #fafcff;
}

td strong[b-qq5zro86c7] {
    color: #111827;
}

td small[b-qq5zro86c7] {
    color: #6b7280;
    font-size: 11px;
}

.center[b-qq5zro86c7] {
    text-align: center;
}


/* =========================================================
   ELIMINAR
   ========================================================= */

.btn-action[b-qq5zro86c7] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fecaca;
    border-radius: 7px;
    background: #fff;
    color: #dc2626;
    cursor: pointer;
}

    .btn-action:hover[b-qq5zro86c7] {
        background: #fef2f2;
    }


/* =========================================================
   VACÍO
   ========================================================= */

.empty-list[b-qq5zro86c7] {
    margin: 0 18px 18px;
    padding: 45px 20px;
    border: 1px dashed #d1d5db;
    border-radius: 9px;
    background: #fafafa;
    text-align: center;
}

.empty-list-icon[b-qq5zro86c7] {
    margin-bottom: 10px;
    font-size: 34px;
}

.empty-list h3[b-qq5zro86c7] {
    margin: 0 0 6px;
    color: #111827;
    font-size: 17px;
}

.empty-list p[b-qq5zro86c7] {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}


/* =========================================================
   AUDITORÍA
   ========================================================= */

.audit-info[b-qq5zro86c7] {
    display: flex;
    gap: 40px;
    padding: 15px 18px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

    .audit-info span[b-qq5zro86c7] {
        display: block;
        margin-bottom: 4px;
        color: #6b7280;
        font-size: 10px;
    }

    .audit-info strong[b-qq5zro86c7] {
        color: #374151;
        font-size: 12px;
    }


/* =========================================================
   ACCIONES
   ========================================================= */

.form-actions[b-qq5zro86c7] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 18px;
    border-top: 1px solid #e5e7eb;
}


/* =========================================================
   LOADING
   ========================================================= */

.loading-container[b-qq5zro86c7] {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
}

.spinner[b-qq5zro86c7] {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-qq5zro86c7 .8s linear infinite;
}

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


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

@media (max-width: 950px) {

    .add-detail-box[b-qq5zro86c7] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 800px) {

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

    .form-group-full[b-qq5zro86c7] {
        grid-column: auto;
    }

    .add-detail-box[b-qq5zro86c7] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-qq5zro86c7] {
        flex-direction: column-reverse;
    }

        .form-actions button[b-qq5zro86c7] {
            width: 100%;
        }

    .audit-info[b-qq5zro86c7] {
        flex-direction: column;
        gap: 12px;
    }
}
/* /Components/Pages/Logistica/InventarioNuevaEntrada.razor.rz.scp.css */
/* =========================================================
   SERCOM ERP - NUEVA ENTRADA DE INVENTARIO
   ========================================================= */

.inventarios-page[b-ld6p4z0z77] {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   CABECERA
   ========================================================= */

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

.page-title[b-ld6p4z0z77] {
    display: flex;
    align-items: center;
    gap: 13px;
}

    .page-title h1[b-ld6p4z0z77] {
        margin: 0 0 4px;
        color: #111827;
        font-size: 26px;
        font-weight: 700;
    }

    .page-title p[b-ld6p4z0z77] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

.title-icon[b-ld6p4z0z77] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 23px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary[b-ld6p4z0z77],
.btn-secondary[b-ld6p4z0z77] {
    height: 40px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s ease;
}

.btn-primary[b-ld6p4z0z77] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

    .btn-primary:hover[b-ld6p4z0z77] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.btn-secondary[b-ld6p4z0z77] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

    .btn-secondary:hover[b-ld6p4z0z77] {
        background: #f9fafb;
        border-color: #9ca3af;
    }

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


/* =========================================================
   ERROR
   ========================================================= */

.page-error[b-ld6p4z0z77] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
}

    .page-error button[b-ld6p4z0z77] {
        width: 28px;
        height: 28px;
        margin-left: auto;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: inherit;
        font-size: 18px;
        cursor: pointer;
    }


/* =========================================================
   TARJETA
   ========================================================= */

.list-card[b-ld6p4z0z77] {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.form-section-title[b-ld6p4z0z77] {
    padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}

.detail-section-title[b-ld6p4z0z77] {
    margin-top: 20px;
    border-top: 1px solid #e5e7eb;
}


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

.form-grid[b-ld6p4z0z77] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 20px;
}

.form-group[b-ld6p4z0z77] {
    min-width: 0;
}

.form-group-full[b-ld6p4z0z77] {
    grid-column: 1 / -1;
}

.form-group label[b-ld6p4z0z77],
.product-selector label[b-ld6p4z0z77],
.quantity-selector label[b-ld6p4z0z77],
.observation-selector label[b-ld6p4z0z77] {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
}

.form-control[b-ld6p4z0z77] {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-family: inherit;
    font-size: 13px;
}

textarea.form-control[b-ld6p4z0z77] {
    min-height: 90px;
    resize: vertical;
}

.form-control:focus[b-ld6p4z0z77] {
    outline: none;
    border-color: #315a9f;
    box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
}


/* =========================================================
   AGREGAR DETALLE
   ========================================================= */

.add-detail-box[b-ld6p4z0z77] {
    display: grid;
    grid-template-columns: minmax(260px, 1.7fr) minmax(130px, .7fr) minmax(220px, 1.3fr) auto;
    align-items: end;
    gap: 12px;
    margin: 18px;
    padding: 16px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #f8fafc;
}

.add-detail-button[b-ld6p4z0z77] {
    display: flex;
    align-items: flex-end;
}

    .add-detail-button .btn-primary[b-ld6p4z0z77] {
        white-space: nowrap;
    }


/* =========================================================
   TABLA DETALLE
   ========================================================= */

.table-wrap[b-ld6p4z0z77] {
    margin: 0 18px 18px;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
}

table[b-ld6p4z0z77] {
    width: 100%;
    min-width: 750px;
    border-collapse: collapse;
}

th[b-ld6p4z0z77] {
    padding: 12px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

td[b-ld6p4z0z77] {
    padding: 13px 12px;
    border-bottom: 1px solid #f0f1f3;
    color: #374151;
    font-size: 13px;
}

tbody tr:last-child td[b-ld6p4z0z77] {
    border-bottom: 0;
}

tbody tr:hover[b-ld6p4z0z77] {
    background: #fafcff;
}

td b[b-ld6p4z0z77] {
    color: #111827;
}

.center[b-ld6p4z0z77] {
    text-align: center;
}


/* =========================================================
   ACCIÓN ELIMINAR
   ========================================================= */

.btn-action[b-ld6p4z0z77] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #fecaca;
    border-radius: 7px;
    background: #fff;
    color: #dc2626;
    cursor: pointer;
}

    .btn-action:hover[b-ld6p4z0z77] {
        background: #fef2f2;
        border-color: #fca5a5;
    }


/* =========================================================
   RESUMEN
   ========================================================= */

.list-summary[b-ld6p4z0z77] {
    padding: 13px 18px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
    color: #6b7280;
    font-size: 12px;
}

    .list-summary strong[b-ld6p4z0z77] {
        color: #111827;
    }


/* =========================================================
   VACÍO
   ========================================================= */

.empty-list[b-ld6p4z0z77] {
    margin: 0 18px 18px;
    padding: 45px 20px;
    border: 1px dashed #d1d5db;
    border-radius: 9px;
    background: #fafafa;
    text-align: center;
}

.empty-list-icon[b-ld6p4z0z77] {
    margin-bottom: 10px;
    font-size: 34px;
}

.empty-list h3[b-ld6p4z0z77] {
    margin: 0 0 7px;
    color: #111827;
    font-size: 17px;
}

.empty-list p[b-ld6p4z0z77] {
    max-width: 600px;
    margin: 0 auto;
    color: #6b7280;
    font-size: 13px;
}


/* =========================================================
   ACCIONES DEL FORMULARIO
   ========================================================= */

.form-actions[b-ld6p4z0z77] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}


/* =========================================================
   LOADING
   ========================================================= */

.loading-container[b-ld6p4z0z77] {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
}

.spinner[b-ld6p4z0z77] {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-ld6p4z0z77 .8s linear infinite;
}

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


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

@media (max-width: 950px) {

    .add-detail-box[b-ld6p4z0z77] {
        grid-template-columns: 1fr 1fr;
    }

    .add-detail-button[b-ld6p4z0z77] {
        align-items: stretch;
    }

        .add-detail-button .btn-primary[b-ld6p4z0z77] {
            width: 100%;
        }
}

@media (max-width: 800px) {

    .page-header[b-ld6p4z0z77] {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .form-group-full[b-ld6p4z0z77] {
        grid-column: auto;
    }

    .add-detail-box[b-ld6p4z0z77] {
        grid-template-columns: 1fr;
    }

    .add-detail-button[b-ld6p4z0z77] {
        width: 100%;
    }

        .add-detail-button .btn-primary[b-ld6p4z0z77] {
            width: 100%;
        }

    .form-actions[b-ld6p4z0z77] {
        flex-direction: column-reverse;
    }

        .form-actions button[b-ld6p4z0z77] {
            width: 100%;
        }
}

@media (max-width: 600px) {

    .page-title h1[b-ld6p4z0z77] {
        font-size: 22px;
    }

    .form-grid[b-ld6p4z0z77] {
        padding: 16px;
    }

    .add-detail-box[b-ld6p4z0z77] {
        margin: 14px;
        padding: 14px;
    }

    .table-wrap[b-ld6p4z0z77] {
        margin: 0 14px 14px;
    }
}
/* /Components/Pages/Logistica/InventarioNuevaSalida.razor.rz.scp.css */
/* =========================================================
   SERCOM ERP - NUEVA ENTRADA DE INVENTARIO
   ========================================================= */

.inventarios-page[b-e1mc69zxid] {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   CABECERA
   ========================================================= */

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

.page-title[b-e1mc69zxid] {
    display: flex;
    align-items: center;
    gap: 13px;
}

    .page-title h1[b-e1mc69zxid] {
        margin: 0 0 4px;
        color: #111827;
        font-size: 26px;
        font-weight: 700;
    }

    .page-title p[b-e1mc69zxid] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

.title-icon[b-e1mc69zxid] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 23px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary[b-e1mc69zxid],
.btn-secondary[b-e1mc69zxid] {
    height: 40px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s ease;
}

.btn-primary[b-e1mc69zxid] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

    .btn-primary:hover[b-e1mc69zxid] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.btn-secondary[b-e1mc69zxid] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

    .btn-secondary:hover[b-e1mc69zxid] {
        background: #f9fafb;
        border-color: #9ca3af;
    }

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


/* =========================================================
   ERROR
   ========================================================= */

.page-error[b-e1mc69zxid] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
}

    .page-error button[b-e1mc69zxid] {
        width: 28px;
        height: 28px;
        margin-left: auto;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: inherit;
        font-size: 18px;
        cursor: pointer;
    }


/* =========================================================
   TARJETA
   ========================================================= */

.list-card[b-e1mc69zxid] {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.form-section-title[b-e1mc69zxid] {
    padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}

.detail-section-title[b-e1mc69zxid] {
    margin-top: 20px;
    border-top: 1px solid #e5e7eb;
}


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

.form-grid[b-e1mc69zxid] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 20px;
}

.form-group[b-e1mc69zxid] {
    min-width: 0;
}

.form-group-full[b-e1mc69zxid] {
    grid-column: 1 / -1;
}

.form-group label[b-e1mc69zxid],
.product-selector label[b-e1mc69zxid],
.quantity-selector label[b-e1mc69zxid],
.observation-selector label[b-e1mc69zxid] {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
}

.form-control[b-e1mc69zxid] {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-family: inherit;
    font-size: 13px;
}

textarea.form-control[b-e1mc69zxid] {
    min-height: 90px;
    resize: vertical;
}

.form-control:focus[b-e1mc69zxid] {
    outline: none;
    border-color: #315a9f;
    box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
}


/* =========================================================
   AGREGAR DETALLE
   ========================================================= */

.add-detail-box[b-e1mc69zxid] {
    display: grid;
    grid-template-columns: minmax(260px, 1.7fr) minmax(130px, .7fr) minmax(220px, 1.3fr) auto;
    align-items: end;
    gap: 12px;
    margin: 18px;
    padding: 16px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #f8fafc;
}

.add-detail-button[b-e1mc69zxid] {
    display: flex;
    align-items: flex-end;
}

    .add-detail-button .btn-primary[b-e1mc69zxid] {
        white-space: nowrap;
    }


/* =========================================================
   TABLA DETALLE
   ========================================================= */

.table-wrap[b-e1mc69zxid] {
    margin: 0 18px 18px;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
}

table[b-e1mc69zxid] {
    width: 100%;
    min-width: 750px;
    border-collapse: collapse;
}

th[b-e1mc69zxid] {
    padding: 12px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

td[b-e1mc69zxid] {
    padding: 13px 12px;
    border-bottom: 1px solid #f0f1f3;
    color: #374151;
    font-size: 13px;
}

tbody tr:last-child td[b-e1mc69zxid] {
    border-bottom: 0;
}

tbody tr:hover[b-e1mc69zxid] {
    background: #fafcff;
}

td b[b-e1mc69zxid] {
    color: #111827;
}

.center[b-e1mc69zxid] {
    text-align: center;
}


/* =========================================================
   ACCIÓN ELIMINAR
   ========================================================= */

.btn-action[b-e1mc69zxid] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #fecaca;
    border-radius: 7px;
    background: #fff;
    color: #dc2626;
    cursor: pointer;
}

    .btn-action:hover[b-e1mc69zxid] {
        background: #fef2f2;
        border-color: #fca5a5;
    }


/* =========================================================
   RESUMEN
   ========================================================= */

.list-summary[b-e1mc69zxid] {
    padding: 13px 18px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
    color: #6b7280;
    font-size: 12px;
}

    .list-summary strong[b-e1mc69zxid] {
        color: #111827;
    }


/* =========================================================
   VACÍO
   ========================================================= */

.empty-list[b-e1mc69zxid] {
    margin: 0 18px 18px;
    padding: 45px 20px;
    border: 1px dashed #d1d5db;
    border-radius: 9px;
    background: #fafafa;
    text-align: center;
}

.empty-list-icon[b-e1mc69zxid] {
    margin-bottom: 10px;
    font-size: 34px;
}

.empty-list h3[b-e1mc69zxid] {
    margin: 0 0 7px;
    color: #111827;
    font-size: 17px;
}

.empty-list p[b-e1mc69zxid] {
    max-width: 600px;
    margin: 0 auto;
    color: #6b7280;
    font-size: 13px;
}


/* =========================================================
   ACCIONES DEL FORMULARIO
   ========================================================= */

.form-actions[b-e1mc69zxid] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}


/* =========================================================
   LOADING
   ========================================================= */

.loading-container[b-e1mc69zxid] {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
}

.spinner[b-e1mc69zxid] {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-e1mc69zxid .8s linear infinite;
}

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


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

@media (max-width: 950px) {

    .add-detail-box[b-e1mc69zxid] {
        grid-template-columns: 1fr 1fr;
    }

    .add-detail-button[b-e1mc69zxid] {
        align-items: stretch;
    }

        .add-detail-button .btn-primary[b-e1mc69zxid] {
            width: 100%;
        }
}

@media (max-width: 800px) {

    .page-header[b-e1mc69zxid] {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .form-group-full[b-e1mc69zxid] {
        grid-column: auto;
    }

    .add-detail-box[b-e1mc69zxid] {
        grid-template-columns: 1fr;
    }

    .add-detail-button[b-e1mc69zxid] {
        width: 100%;
    }

        .add-detail-button .btn-primary[b-e1mc69zxid] {
            width: 100%;
        }

    .form-actions[b-e1mc69zxid] {
        flex-direction: column-reverse;
    }

        .form-actions button[b-e1mc69zxid] {
            width: 100%;
        }
}

@media (max-width: 600px) {

    .page-title h1[b-e1mc69zxid] {
        font-size: 22px;
    }

    .form-grid[b-e1mc69zxid] {
        padding: 16px;
    }

    .add-detail-box[b-e1mc69zxid] {
        margin: 14px;
        padding: 14px;
    }

    .table-wrap[b-e1mc69zxid] {
        margin: 0 14px 14px;
    }
}
/* =========================================================
   STOCK DISPONIBLE
   ========================================================= */

.stock-info[b-e1mc69zxid] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 18px 18px;
    padding: 12px 15px;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    background: #eff6ff;
}

.stock-info-icon[b-e1mc69zxid] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #dbeafe;
    font-size: 18px;
}

.stock-info-label[b-e1mc69zxid] {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 11px;
}

.stock-info strong[b-e1mc69zxid] {
    color: #1d4ed8;
    font-size: 17px;
}


/* =========================================================
   CANTIDAD + STOCK EN TABLA
   ========================================================= */

.quantity-cell[b-e1mc69zxid] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .quantity-cell strong[b-e1mc69zxid] {
        color: #111827;
    }

    .quantity-cell small[b-e1mc69zxid] {
        color: #6b7280;
        font-size: 11px;
    }
/* /Components/Pages/Logistica/Inventarios.razor.rz.scp.css */
/* =========================================================
   SERCOM ERP - INVENTARIOS
   ========================================================= */

.inventarios-page[b-erejo89qxw] {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   CABECERA
   ========================================================= */

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

.page-title[b-erejo89qxw] {
    display: flex;
    align-items: center;
    gap: 13px;
}

    .page-title h1[b-erejo89qxw] {
        margin: 0 0 4px;
        color: #111827;
        font-size: 26px;
        font-weight: 700;
    }

    .page-title p[b-erejo89qxw] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

.title-icon[b-erejo89qxw] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 23px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary[b-erejo89qxw],
.btn-secondary[b-erejo89qxw] {
    height: 40px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s ease;
}

.btn-primary[b-erejo89qxw] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

    .btn-primary:hover[b-erejo89qxw] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.btn-secondary[b-erejo89qxw] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

    .btn-secondary:hover[b-erejo89qxw] {
        background: #f9fafb;
        border-color: #9ca3af;
    }

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


/* =========================================================
   MENSAJE DE ERROR
   ========================================================= */

.page-error[b-erejo89qxw] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
}

    .page-error button[b-erejo89qxw] {
        width: 28px;
        height: 28px;
        margin-left: auto;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: inherit;
        font-size: 18px;
        cursor: pointer;
    }

        .page-error button:hover[b-erejo89qxw] {
            background: rgba(153, 27, 27, .08);
        }


/* =========================================================
   TARJETA PRINCIPAL
   ========================================================= */

.list-card[b-erejo89qxw] {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   FILTROS
   ========================================================= */

.filters[b-erejo89qxw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.search-box[b-erejo89qxw] {
    position: relative;
    flex: 1;
    min-width: 280px;
}

    .search-box input[b-erejo89qxw] {
        width: 100%;
        height: 40px;
        padding: 0 13px 0 38px;
        box-sizing: border-box;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #fff;
        color: #374151;
        font-size: 13px;
    }

.search-icon[b-erejo89qxw] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 15px;
    pointer-events: none;
}

.status-filter[b-erejo89qxw] {
    height: 40px;
    min-width: 160px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
}

    .search-box input:focus[b-erejo89qxw],
    .status-filter:focus[b-erejo89qxw] {
        outline: none;
        border-color: #315a9f;
        box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
    }


/* =========================================================
   RESUMEN
   ========================================================= */

.list-summary[b-erejo89qxw] {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f1f3;
    background: #fafafa;
    color: #6b7280;
    font-size: 12px;
}

    .list-summary strong[b-erejo89qxw] {
        color: #111827;
    }


/* =========================================================
   TABLA
   ========================================================= */

.table-wrap[b-erejo89qxw] {
    width: 100%;
    overflow-x: auto;
}

table[b-erejo89qxw] {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
}

th[b-erejo89qxw] {
    padding: 13px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

td[b-erejo89qxw] {
    padding: 13px;
    border-bottom: 1px solid #f0f1f3;
    color: #374151;
    font-size: 13px;
    vertical-align: middle;
}

tbody tr:hover[b-erejo89qxw] {
    background: #fafcff;
}

td b[b-erejo89qxw] {
    color: #111827;
}

.center[b-erejo89qxw] {
    text-align: center;
}


/* =========================================================
   TIPO DE MOVIMIENTO
   ========================================================= */

.movement-badge[b-erejo89qxw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.movement-entry[b-erejo89qxw] {
    background: #dcfce7;
    color: #166534;
}

.movement-exit[b-erejo89qxw] {
    background: #fee2e2;
    color: #991b1b;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.action-buttons[b-erejo89qxw] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.btn-action[b-erejo89qxw] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dbe1e8;
    border-radius: 7px;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
}

    .btn-action:hover[b-erejo89qxw] {
        background: #f3f4f6;
        border-color: #cbd5e1;
    }


/* =========================================================
   VACÍO
   ========================================================= */

.empty-list[b-erejo89qxw] {
    padding: 60px 20px;
    text-align: center;
}

.empty-list-icon[b-erejo89qxw] {
    margin-bottom: 12px;
    font-size: 38px;
}

.empty-list h3[b-erejo89qxw] {
    margin: 0 0 7px;
    color: #111827;
    font-size: 18px;
}

.empty-list p[b-erejo89qxw] {
    max-width: 500px;
    margin: 0 auto 20px;
    color: #6b7280;
    font-size: 14px;
}


/* =========================================================
   CARGANDO
   ========================================================= */

.loading-container[b-erejo89qxw] {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
}

.spinner[b-erejo89qxw] {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-erejo89qxw .8s linear infinite;
}

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


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

@media (max-width: 800px) {

    .page-header[b-erejo89qxw] {
        align-items: flex-start;
        flex-direction: column;
    }

    .search-box[b-erejo89qxw] {
        width: 100%;
        min-width: 100%;
    }

    .status-filter[b-erejo89qxw] {
        width: 100%;
    }

    .page-title h1[b-erejo89qxw] {
        font-size: 22px;
    }
}
/* =========================================================
   DETALLE DEL MOVIMIENTO
   ========================================================= */

.movement-details[b-erejo89qxw] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 180px;
}

.movement-detail-item[b-erejo89qxw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 5px 0;
}

    .movement-detail-item + .movement-detail-item[b-erejo89qxw] {
        padding-top: 8px;
        border-top: 1px dashed #e5e7eb;
    }

.movement-product[b-erejo89qxw] {
    min-width: 0;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

.movement-quantity[b-erejo89qxw] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}

    .movement-quantity strong[b-erejo89qxw] {
        color: #111827;
        font-size: 12px;
    }

    .movement-quantity span[b-erejo89qxw] {
        color: #6b7280;
        font-size: 11px;
    }
/* /Components/Pages/Logistica/Marcas.razor.rz.scp.css */
/* =========================================================
   PÁGINA
   ========================================================= */

.clientes-page[b-0qhzdme3oo] {
    padding: 24px;
    max-width: 1500px;
    margin: 0 auto;
}


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

.page-header[b-0qhzdme3oo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.page-title[b-0qhzdme3oo] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.title-icon[b-0qhzdme3oo] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    flex-shrink: 0;
}

.page-title h1[b-0qhzdme3oo] {
    margin: 0;
    font-size: 27px;
    font-weight: 700;
    color: #111827;
}

.page-title p[b-0qhzdme3oo] {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.page-actions[b-0qhzdme3oo] {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary[b-0qhzdme3oo],
.btn-secondary[b-0qhzdme3oo],
.btn-danger[b-0qhzdme3oo] {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-0qhzdme3oo] {
    background: #2563eb;
    color: white;
}

    .btn-primary:hover[b-0qhzdme3oo] {
        background: #1d4ed8;
    }

    .btn-primary:disabled[b-0qhzdme3oo] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.btn-secondary[b-0qhzdme3oo] {
    background: #f3f4f6;
    color: #374151;
}

    .btn-secondary:hover[b-0qhzdme3oo] {
        background: #e5e7eb;
    }

.btn-danger[b-0qhzdme3oo] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover[b-0qhzdme3oo] {
        background: #b91c1c;
    }

    .btn-danger:disabled[b-0qhzdme3oo] {
        opacity: 0.65;
        cursor: not-allowed;
    }


/* =========================================================
   TARJETA
   ========================================================= */

.list-card[b-0qhzdme3oo] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}


/* =========================================================
   FILTROS
   ========================================================= */

.filters[b-0qhzdme3oo] {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.search-box[b-0qhzdme3oo] {
    flex: 1;
    position: relative;
}

    .search-box input[b-0qhzdme3oo] {
        width: 100%;
        height: 42px;
        box-sizing: border-box;
        padding: 0 14px 0 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        outline: none;
        font-size: 14px;
        color: #111827;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        .search-box input:focus[b-0qhzdme3oo] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
        }

.search-icon[b-0qhzdme3oo] {
    position: absolute;
    left: 14px;
    top: 9px;
    color: #6b7280;
    font-size: 20px;
    pointer-events: none;
}

.status-filter[b-0qhzdme3oo] {
    height: 42px;
    min-width: 130px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: #374151;
    outline: none;
    cursor: pointer;
    font-size: 14px;
}

    .status-filter:focus[b-0qhzdme3oo] {
        border-color: #2563eb;
    }


/* =========================================================
   RESUMEN
   ========================================================= */

.list-summary[b-0qhzdme3oo] {
    padding: 14px 18px;
    color: #6b7280;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
}

    .list-summary strong[b-0qhzdme3oo] {
        color: #374151;
    }


/* =========================================================
   TABLA
   ========================================================= */

.table-wrapper[b-0qhzdme3oo] {
    overflow-x: auto;
}

.clients-table[b-0qhzdme3oo] {
    width: 100%;
    border-collapse: collapse;
}

    .clients-table th[b-0qhzdme3oo] {
        background: #f9fafb;
        padding: 13px 18px;
        font-size: 12px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
        white-space: nowrap;
    }

    .clients-table td[b-0qhzdme3oo] {
        padding: 15px 18px;
        border-top: 1px solid #f0f0f0;
        font-size: 13px;
        color: #374151;
        vertical-align: middle;
    }

    .clients-table tbody tr[b-0qhzdme3oo] {
        transition: background 0.15s ease;
    }

        .clients-table tbody tr:hover[b-0qhzdme3oo] {
            background: #f8fafc;
        }

    .clients-table td strong[b-0qhzdme3oo] {
        color: #111827;
        font-weight: 600;
    }

.actions-column[b-0qhzdme3oo] {
    width: 140px;
    text-align: center !important;
}

.code-cell[b-0qhzdme3oo] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    font-family: monospace;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.actions[b-0qhzdme3oo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.action-edit[b-0qhzdme3oo],
.action-disable[b-0qhzdme3oo],
.action-enable[b-0qhzdme3oo],
.action-delete[b-0qhzdme3oo] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #f3f4f6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.2s ease;
}

    .action-edit:hover[b-0qhzdme3oo] {
        background: #dbeafe;
        color: #2563eb;
    }

    .action-disable:hover[b-0qhzdme3oo] {
        background: #fee2e2;
        color: #dc2626;
    }

    .action-enable:hover[b-0qhzdme3oo] {
        background: #dcfce7;
        color: #16a34a;
    }

    .action-delete:hover[b-0qhzdme3oo] {
        background: #fee2e2;
        color: #dc2626;
    }


/* =========================================================
   ESTADOS
   ========================================================= */

.status-active[b-0qhzdme3oo],
.status-inactive[b-0qhzdme3oo] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-active[b-0qhzdme3oo] {
    background: #dcfce7;
    color: #166534;
}

.status-inactive[b-0qhzdme3oo] {
    background: #f3f4f6;
    color: #6b7280;
}

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


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.empty-list[b-0qhzdme3oo] {
    padding: 60px 20px;
    text-align: center;
}

.empty-list-icon[b-0qhzdme3oo] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.empty-list h3[b-0qhzdme3oo] {
    margin: 0 0 7px;
    color: #111827;
    font-size: 17px;
}

.empty-list p[b-0qhzdme3oo] {
    margin: 0 0 20px;
    color: #6b7280;
    font-size: 14px;
}


/* =========================================================
   LOADING
   ========================================================= */

.loading-container[b-0qhzdme3oo] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

    .loading-container p[b-0qhzdme3oo] {
        margin-top: 14px;
        font-size: 14px;
    }

.spinner[b-0qhzdme3oo] {
    width: 34px;
    height: 34px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-0qhzdme3oo 0.8s linear infinite;
}

.mini-spinner[b-0qhzdme3oo] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-0qhzdme3oo 0.8s linear infinite;
}

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


/* =========================================================
   MODALES
   ========================================================= */

.modal-overlay[b-0qhzdme3oo] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.client-form-modal[b-0qhzdme3oo] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20);
}

.modal-header[b-0qhzdme3oo] {
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

    .modal-header h2[b-0qhzdme3oo] {
        margin: 0;
        color: #111827;
        font-size: 19px;
        font-weight: 700;
    }

    .modal-header p[b-0qhzdme3oo] {
        margin: 5px 0 0;
        color: #6b7280;
        font-size: 13px;
    }

.modal-close[b-0qhzdme3oo] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-close:hover[b-0qhzdme3oo] {
        background: #e5e7eb;
        color: #111827;
    }


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

.form-body[b-0qhzdme3oo] {
    padding: 24px;
}

.form-group[b-0qhzdme3oo] {
    margin-bottom: 18px;
}

    .form-group label[b-0qhzdme3oo] {
        display: block;
        margin-bottom: 7px;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

.required[b-0qhzdme3oo] {
    color: #dc2626;
}

.form-control[b-0qhzdme3oo] {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    background: white;
    color: #111827;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-control:focus[b-0qhzdme3oo] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    }

.form-help[b-0qhzdme3oo] {
    display: block;
    margin-top: 5px;
    color: #9ca3af;
    font-size: 12px;
}

.validation-message[b-0qhzdme3oo] {
    margin-top: 5px;
    color: #dc2626;
    font-size: 12px;
}

.form-check[b-0qhzdme3oo] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 4px;
}

.form-check-input[b-0qhzdme3oo] {
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.form-check label[b-0qhzdme3oo] {
    margin: 0;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
}


/* =========================================================
   FOOTER MODAL
   ========================================================= */

.modal-footer[b-0qhzdme3oo] {
    padding: 18px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}


/* =========================================================
   CONFIRMACIÓN
   ========================================================= */

.confirm-modal[b-0qhzdme3oo] {
    width: 100%;
    max-width: 430px;
    background: white;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20);
}

.confirm-icon[b-0qhzdme3oo] {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.delete-confirm-icon[b-0qhzdme3oo] {
    background: #fee2e2;
}

.confirm-modal h2[b-0qhzdme3oo] {
    margin: 0 0 10px;
    color: #111827;
    font-size: 19px;
}

.confirm-modal p[b-0qhzdme3oo] {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

.confirm-modal strong[b-0qhzdme3oo] {
    color: #374151;
}

.delete-warning[b-0qhzdme3oo] {
    margin-top: 10px !important;
    color: #dc2626 !important;
    font-size: 13px !important;
    font-weight: 600;
}

.confirm-actions[b-0qhzdme3oo] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}


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

@media (max-width: 900px) {

    .page-header[b-0qhzdme3oo] {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-actions[b-0qhzdme3oo] {
        width: 100%;
    }

        .page-actions button[b-0qhzdme3oo] {
            flex: 1;
        }

    .filters[b-0qhzdme3oo] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-0qhzdme3oo] {
        width: 100%;
    }

    .status-filter[b-0qhzdme3oo] {
        width: 100%;
    }
}


@media (max-width: 600px) {

    .clientes-page[b-0qhzdme3oo] {
        padding: 16px;
    }

    .page-title h1[b-0qhzdme3oo] {
        font-size: 22px;
    }

    .page-title p[b-0qhzdme3oo] {
        font-size: 13px;
    }

    .title-icon[b-0qhzdme3oo] {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

    .page-actions[b-0qhzdme3oo] {
        flex-direction: column;
    }

        .page-actions button[b-0qhzdme3oo] {
            width: 100%;
        }

    .clients-table th[b-0qhzdme3oo],
    .clients-table td[b-0qhzdme3oo] {
        padding: 12px;
    }

    .actions-column[b-0qhzdme3oo] {
        width: 120px;
    }

    .client-form-modal[b-0qhzdme3oo] {
        max-height: calc(100vh - 20px);
    }

    .modal-header[b-0qhzdme3oo],
    .form-body[b-0qhzdme3oo],
    .modal-footer[b-0qhzdme3oo] {
        padding-left: 18px;
        padding-right: 18px;
    }

    .confirm-modal[b-0qhzdme3oo] {
        padding: 22px;
    }
}
/* /Components/Pages/Logistica/OrdenesCompra.razor.rz.scp.css */
.ordenes-page[b-1l43hfh7r6] {
    width: 100%;
    box-sizing: border-box
}

.page-header[b-1l43hfh7r6] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px
}

.breadcrumb[b-1l43hfh7r6] {
    color: #6b7280;
    font-size: 13px
}

    .breadcrumb span[b-1l43hfh7r6] {
        margin: 0 8px
    }

.page-header h1[b-1l43hfh7r6] {
    margin: 5px 0;
    font-size: 26px;
    color: #111827
}

.page-description[b-1l43hfh7r6] {
    margin: 0;
    color: #6b7280;
    font-size: 14px
}

.header-actions[b-1l43hfh7r6] {
    display: flex;
    gap: 10px
}

.btn[b-1l43hfh7r6] {
    height: 40px;
    padding: 0 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-weight: 600;
    cursor: pointer
}

.btn-primary[b-1l43hfh7r6] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff
}

.btn-success[b-1l43hfh7r6] {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff
}

.btn-warning[b-1l43hfh7r6] {
    background: #d97706;
    border-color: #d97706;
    color: #fff
}

.btn-danger[b-1l43hfh7r6] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff
}

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

.list-card[b-1l43hfh7r6] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden
}

.filters[b-1l43hfh7r6] {
    display: flex;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb
}

.search[b-1l43hfh7r6] {
    height: 40px;
    flex: 1;
    min-width: 280px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px
}

.status-filter[b-1l43hfh7r6], .control[b-1l43hfh7r6] {
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    width: 100%;
    box-sizing: border-box
}

.status-filter[b-1l43hfh7r6] {
    width: auto;
    min-width: 160px
}

.table-wrap[b-1l43hfh7r6] {
    overflow: auto
}

table[b-1l43hfh7r6] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1050px
}

th[b-1l43hfh7r6] {
    background: #f9fafb;
    color: #4b5563;
    font-size: 12px;
    text-transform: uppercase;
    padding: 13px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb
}

td[b-1l43hfh7r6] {
    padding: 14px;
    border-bottom: 1px solid #f0f1f3;
    font-size: 13px;
    color: #374151
}

.right[b-1l43hfh7r6] {
    text-align: right
}

.center[b-1l43hfh7r6] {
    text-align: center
}

.actions[b-1l43hfh7r6] {
    display: flex;
    justify-content: center;
    gap: 5px
}

    .actions button[b-1l43hfh7r6] {
        width: 32px;
        height: 32px;
        border: 1px solid #e5e7eb;
        border-radius: 7px;
        background: #fff;
        cursor: pointer
    }

    .actions .ok[b-1l43hfh7r6] {
        color: #15803d
    }

    .actions .warn[b-1l43hfh7r6] {
        color: #b45309
    }

    .actions .del[b-1l43hfh7r6] {
        color: #dc2626
    }

.badge[b-1l43hfh7r6] {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700
}

.pending[b-1l43hfh7r6] {
    background: #dbeafe;
    color: #1d4ed8
}

.evaluation[b-1l43hfh7r6] {
    background: #fef3c7;
    color: #92400e
}

.approved[b-1l43hfh7r6] {
    background: #dcfce7;
    color: #166534
}

.inactive[b-1l43hfh7r6] {
    background: #f3f4f6;
    color: #4b5563
}

.summary[b-1l43hfh7r6] {
    padding: 12px 16px;
    color: #6b7280;
    font-size: 13px
}

.loading[b-1l43hfh7r6], .empty[b-1l43hfh7r6] {
    text-align: center;
    padding: 80px 20px;
    color: #6b7280
}

    .empty div[b-1l43hfh7r6] {
        font-size: 38px
    }

    .empty h3[b-1l43hfh7r6] {
        color: #111827
    }

.alert[b-1l43hfh7r6] {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px
}

    .alert span[b-1l43hfh7r6] {
        flex: 1
    }

    .alert button[b-1l43hfh7r6] {
        border: 0;
        background: transparent;
        cursor: pointer
    }

.error[b-1l43hfh7r6] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca
}

.success[b-1l43hfh7r6] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0
}

.backdrop[b-1l43hfh7r6] {
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,.52);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.modal[b-1l43hfh7r6] {
    width: 100%;
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0,0,0,.2)
}

.small[b-1l43hfh7r6] {
    max-width: 500px
}

.medium[b-1l43hfh7r6] {
    max-width: 650px
}

.large[b-1l43hfh7r6] {
    max-width: 1050px
}

.xl[b-1l43hfh7r6] {
    max-width: 1200px
}

.modal-head[b-1l43hfh7r6] {
    display: flex;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid #e5e7eb
}

    .modal-head h2[b-1l43hfh7r6] {
        margin: 0 0 5px;
        font-size: 19px
    }

    .modal-head p[b-1l43hfh7r6] {
        margin: 0;
        color: #6b7280;
        font-size: 13px
    }

    .modal-head > button[b-1l43hfh7r6] {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 7px;
        background: #f3f4f6;
        font-size: 22px;
        cursor: pointer
    }

.modal-body[b-1l43hfh7r6] {
    padding: 22px;
    overflow: auto
}

.modal-foot[b-1l43hfh7r6] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 15px 22px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa
}

.source[b-1l43hfh7r6] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    padding: 15px;
    margin: 16px 0;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #f9fafb
}

    .source small[b-1l43hfh7r6] {
        display: block;
        color: #6b7280;
        font-size: 10px;
        margin-bottom: 4px
    }

    .source b[b-1l43hfh7r6] {
        font-size: 13px;
        color: #111827
    }

.detail[b-1l43hfh7r6] {
    min-width: 800px
}

    .detail th[b-1l43hfh7r6], .detail td[b-1l43hfh7r6] {
        padding: 10px 12px
    }

.grid[b-1l43hfh7r6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 18px
}

    .grid .full[b-1l43hfh7r6] {
        grid-column: 1/-1
    }

    .grid label[b-1l43hfh7r6], .modal-body > label[b-1l43hfh7r6] {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #374151
    }

.control:focus[b-1l43hfh7r6], .search:focus[b-1l43hfh7r6], .status-filter:focus[b-1l43hfh7r6] {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1)
}

textarea.control[b-1l43hfh7r6] {
    min-height: 90px;
    resize: vertical
}

.totals[b-1l43hfh7r6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 15px;
    background: #fafafa;
    border-top: 1px solid #e5e7eb
}

    .totals span[b-1l43hfh7r6], .totals strong[b-1l43hfh7r6] {
        width: 240px;
        display: flex;
        justify-content: space-between
    }

.decision[b-1l43hfh7r6] {
    padding: 15px;
    border-radius: 9px;
    margin: 16px 0
}

    .decision p[b-1l43hfh7r6] {
        margin: 6px 0 0
    }

    .decision.warning[b-1l43hfh7r6] {
        background: #fffbeb;
        border: 1px solid #fde68a
    }

    .decision.success[b-1l43hfh7r6] {
        background: #f0fdf4;
        border: 1px solid #bbf7d0
    }

    .decision.danger[b-1l43hfh7r6] {
        background: #fef2f2;
        border: 1px solid #fecaca
    }

.notes[b-1l43hfh7r6] {
    padding: 14px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 16px
}

    .notes p[b-1l43hfh7r6] {
        margin: 6px 0
    }

.full[b-1l43hfh7r6] {
    grid-column: 1/-1
}

@media(max-width:800px) {
    .page-header[b-1l43hfh7r6] {
        flex-direction: column
    }

    .filters[b-1l43hfh7r6] {
        flex-wrap: wrap
    }

    .search[b-1l43hfh7r6] {
        min-width: 100%
    }

    .status-filter[b-1l43hfh7r6] {
        width: 100%
    }

    .source[b-1l43hfh7r6] {
        grid-template-columns: 1fr 1fr
    }

    .grid[b-1l43hfh7r6] {
        grid-template-columns: 1fr
    }

    .full[b-1l43hfh7r6] {
        grid-column: auto
    }

    .modal[b-1l43hfh7r6] {
        max-height: calc(100vh - 20px)
    }

    .modal-foot[b-1l43hfh7r6] {
        flex-wrap: wrap
    }

        .modal-foot .btn[b-1l43hfh7r6] {
            flex: 1
        }
}


.pdf-action[b-1l43hfh7r6] {
    min-width: 34px;
    height: 32px;
    padding: 0 7px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #fff;
    color: #b91c1c;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    transition: .15s ease;
}

    .pdf-action:hover[b-1l43hfh7r6] {
        background: #fef2f2;
        border-color: #fecaca;
    }
/* /Components/Pages/Logistica/Productos.razor.rz.scp.css */
.productos-page[b-rr441gorzx] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

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

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

.page-title[b-rr441gorzx] {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .page-title h1[b-rr441gorzx] {
        margin: 0;
        font-size: 27px;
        font-weight: 700;
        color: #111827;
    }

    .page-title p[b-rr441gorzx] {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 14px;
    }

.title-icon[b-rr441gorzx] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}


/* ========================================================= */
/* BOTONES */
/* ========================================================= */

.btn-primary[b-rr441gorzx],
.btn-secondary[b-rr441gorzx],
.btn-danger[b-rr441gorzx] {
    border: none;
    border-radius: 9px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: all .18s ease;
}

.btn-primary[b-rr441gorzx] {
    background: #2563eb;
    color: white;
    box-shadow: 0 2px 5px rgba(37, 99, 235, .22);
}

    .btn-primary:hover:not(:disabled)[b-rr441gorzx] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(37, 99, 235, .28);
    }

    .btn-primary:active:not(:disabled)[b-rr441gorzx] {
        transform: translateY(0);
        box-shadow: 0 2px 5px rgba(37, 99, 235, .20);
    }

.btn-secondary[b-rr441gorzx] {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

    .btn-secondary:hover:not(:disabled)[b-rr441gorzx] {
        background: #f8fafc;
        border-color: #9ca3af;
        color: #111827;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(15, 23, 42, .08);
    }

    .btn-secondary:active:not(:disabled)[b-rr441gorzx] {
        transform: translateY(0);
    }

.btn-danger[b-rr441gorzx] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover:not(:disabled)[b-rr441gorzx] {
        background: #b91c1c;
    }

/* Botones del pie del modal */
.modal-footer[b-rr441gorzx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

    .modal-footer .btn-primary[b-rr441gorzx],
    .modal-footer .btn-secondary[b-rr441gorzx] {
        min-width: 118px;
        height: 42px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
    }

    .modal-footer .btn-primary[b-rr441gorzx] {
        box-shadow: 0 3px 8px rgba(37, 99, 235, .24);
    }

    .modal-footer .btn-secondary[b-rr441gorzx] {
        background: #f8fafc;
    }

        .modal-footer .btn-primary:disabled[b-rr441gorzx],
        .modal-footer .btn-secondary:disabled[b-rr441gorzx] {
            opacity: .6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }


/* ========================================================= */
/* ALERTA */
/* ========================================================= */

.page-alert[b-rr441gorzx] {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
}

    .page-alert button[b-rr441gorzx] {
        margin-left: auto;
        border: none;
        background: transparent;
        color: inherit;
        font-size: 20px;
        cursor: pointer;
    }


/* ========================================================= */
/* CARD */
/* ========================================================= */

.list-card[b-rr441gorzx] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}


/* ========================================================= */
/* FILTROS */
/* ========================================================= */

.filters[b-rr441gorzx] {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.search-box[b-rr441gorzx] {
    flex: 1;
    position: relative;
}

    .search-box input[b-rr441gorzx] {
        width: 100%;
        height: 42px;
        padding: 0 14px 0 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        outline: none;
        font-size: 14px;
        box-sizing: border-box;
    }

        .search-box input:focus[b-rr441gorzx] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

.search-icon[b-rr441gorzx] {
    position: absolute;
    left: 14px;
    top: 11px;
    font-size: 16px;
}

.status-filter[b-rr441gorzx] {
    height: 42px;
    min-width: 130px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: #374151;
    outline: none;
}

    .status-filter:focus[b-rr441gorzx] {
        border-color: #2563eb;
    }


/* ========================================================= */
/* RESUMEN */
/* ========================================================= */

.list-summary[b-rr441gorzx] {
    padding: 14px 18px;
    color: #6b7280;
    font-size: 13px;
}

    .list-summary strong[b-rr441gorzx] {
        color: #111827;
    }


/* ========================================================= */
/* TABLA */
/* ========================================================= */

.table-wrapper[b-rr441gorzx] {
    overflow-x: auto;
}

.products-table[b-rr441gorzx] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px;
}

    .products-table th[b-rr441gorzx] {
        background: #f9fafb;
        padding: 13px 16px;
        font-size: 12px;
        color: #6b7280;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
        white-space: nowrap;
    }

    .products-table td[b-rr441gorzx] {
        padding: 14px 16px;
        border-top: 1px solid #f0f0f0;
        font-size: 13px;
        color: #374151;
        vertical-align: middle;
    }

    .products-table tbody tr:hover[b-rr441gorzx] {
        background: #f8fafc;
    }


/* ========================================================= */
/* CELDAS */
/* ========================================================= */

.code-cell[b-rr441gorzx] {
    font-family: monospace;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.product-name[b-rr441gorzx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 190px;
}

    .product-name strong[b-rr441gorzx] {
        color: #111827;
        font-size: 14px;
    }

    .product-name small[b-rr441gorzx] {
        color: #9ca3af;
        font-size: 11px;
    }

.barcode-cell[b-rr441gorzx] {
    font-family: monospace;
    font-size: 12px;
    color: #4b5563;
}

.text-muted[b-rr441gorzx] {
    color: #9ca3af;
}


/* ========================================================= */
/* STOCK */
/* ========================================================= */

.stock-cell[b-rr441gorzx] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 100px;
}

.stock-enabled[b-rr441gorzx] {
    color: #166534;
    font-size: 12px;
    font-weight: 600;
}

.stock-cell small[b-rr441gorzx] {
    color: #6b7280;
    font-size: 11px;
}

.stock-disabled[b-rr441gorzx] {
    color: #9ca3af;
    font-size: 12px;
}


/* ========================================================= */
/* ESTADOS */
/* ========================================================= */

.status-active[b-rr441gorzx],
.status-inactive[b-rr441gorzx] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-active[b-rr441gorzx] {
    background: #dcfce7;
    color: #166534;
}

.status-inactive[b-rr441gorzx] {
    background: #f3f4f6;
    color: #6b7280;
}


/* ========================================================= */
/* ACCIONES */
/* ========================================================= */

.actions-column[b-rr441gorzx] {
    width: 125px;
    text-align: center !important;
}

.actions[b-rr441gorzx] {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.action-edit[b-rr441gorzx],
.action-disable[b-rr441gorzx],
.action-enable[b-rr441gorzx],
.action-delete[b-rr441gorzx] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #f3f4f6;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .action-edit:hover[b-rr441gorzx] {
        background: #dbeafe;
    }

    .action-disable:hover[b-rr441gorzx] {
        background: #fee2e2;
    }

    .action-enable:hover[b-rr441gorzx] {
        background: #dcfce7;
    }

    .action-delete:hover[b-rr441gorzx] {
        background: #fee2e2;
    }


/* ========================================================= */
/* VACÍO */
/* ========================================================= */

.empty-list[b-rr441gorzx] {
    padding: 60px 20px;
    text-align: center;
}

.empty-list-icon[b-rr441gorzx] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
}

.empty-list h3[b-rr441gorzx] {
    margin: 0 0 7px;
    font-size: 18px;
    color: #111827;
}

.empty-list p[b-rr441gorzx] {
    margin: 0 0 20px;
    color: #6b7280;
    font-size: 14px;
}


/* ========================================================= */
/* LOADING */
/* ========================================================= */

.loading-container[b-rr441gorzx] {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
}

.spinner[b-rr441gorzx] {
    width: 34px;
    height: 34px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-rr441gorzx 0.8s linear infinite;
    margin: 0 auto 14px;
}

.mini-spinner[b-rr441gorzx] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.5);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-rr441gorzx 0.8s linear infinite;
}

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


/* =========================================================
   MODAL
   ========================================================= */

.modal-overlay[b-rr441gorzx] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, .58);
}

.modal-container[b-rr441gorzx] {
    width: min(700px, calc(100vw - 48px));
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    overflow: hidden;
    animation: inspeccionModalEntrada-b-rr441gorzx .18s ease-out;
}

.modal-large[b-rr441gorzx] {
    width: min(1000px, calc(100vw - 48px));
}

@keyframes inspeccionModalEntrada-b-rr441gorzx {

    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

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


/* =========================================================
   CABECERA DEL MODAL
   ========================================================= */

.modal-header[b-rr441gorzx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

    .modal-header h2[b-rr441gorzx] {
        margin: 0;
        color: #111827;
        font-size: 18px;
        font-weight: 600;
    }

    .modal-header p[b-rr441gorzx] {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 12px;
    }

.modal-close[b-rr441gorzx] {
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-close:hover[b-rr441gorzx] {
        background: #f3f4f6;
        color: #111827;
    }


/* =========================================================
   CUERPO DEL MODAL
   ========================================================= */

.modal-body[b-rr441gorzx] {
    padding: 20px 24px;
    overflow-y: auto;
}

    .modal-body[b-rr441gorzx]::-webkit-scrollbar {
        width: 8px;
    }

    .modal-body[b-rr441gorzx]::-webkit-scrollbar-track {
        background: #f8fafc;
    }

    .modal-body[b-rr441gorzx]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }


/* =========================================================
   GRID DE FORMULARIO
   ========================================================= */

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

.form-group[b-rr441gorzx] {
    min-width: 0;
}

.form-group-full[b-rr441gorzx] {
    grid-column: span 2;
}


/* =========================================================
   ETIQUETAS
   ========================================================= */

.form-group label[b-rr441gorzx] {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

    .form-group label span[b-rr441gorzx] {
        color: #dc2626;
    }


/* =========================================================
   INPUTS
   ========================================================= */

.form-control[b-rr441gorzx] {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    background: #ffffff;
    color: #111827;
    font-family: inherit;
    font-size: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-control:hover[b-rr441gorzx] {
        border-color: #b8c0cc;
    }

    .form-control:focus[b-rr441gorzx] {
        border-color: #315a9f;
        box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
    }

textarea.form-control[b-rr441gorzx] {
    min-height: 90px;
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.45;
}

select.form-control[b-rr441gorzx] {
    cursor: pointer;
}


/* =========================================================
   SOLO LECTURA
   ========================================================= */

.form-control-readonly[b-rr441gorzx] {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}


/* =========================================================
   AYUDA DE CAMPOS
   ========================================================= */

.field-help[b-rr441gorzx] {
    margin-top: 2px;
    color: #6b7280;
    font-size: 11px;
}


/* =========================================================
   CHECKBOXES / ACTIVIDADES
   ========================================================= */

.inspeccion-checks[b-rr441gorzx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-top: 4px;
}

.inspeccion-check[b-rr441gorzx] {
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .inspeccion-check:hover[b-rr441gorzx] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #111827;
    }

    .inspeccion-check input[type="checkbox"][b-rr441gorzx] {
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: #315a9f;
        cursor: pointer;
    }


/* =========================================================
   ALERTAS
   ========================================================= */

.alert-error[b-rr441gorzx] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
}

.alert-success[b-rr441gorzx] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 13px;
}


/* =========================================================
   EVIDENCIAS FOTOGRÁFICAS
   ========================================================= */

.evidencias-upload[b-rr441gorzx] {
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

    .evidencias-upload input[type="file"][b-rr441gorzx] {
        width: 100%;
        font-size: 13px;
        color: #374151;
    }

.evidencias-grid[b-rr441gorzx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.evidencia-card[b-rr441gorzx] {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}

    .evidencia-card img[b-rr441gorzx] {
        display: block;
        width: 100%;
        height: 170px;
        object-fit: cover;
        background: #f1f5f9;
    }

.evidencia-info[b-rr441gorzx] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 11px;
}

    .evidencia-info strong[b-rr441gorzx] {
        overflow: hidden;
        color: #374151;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .evidencia-info span[b-rr441gorzx] {
        color: #94a3b8;
        font-size: 11px;
    }

.evidencias-count[b-rr441gorzx] {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

    .evidencias-count.warning[b-rr441gorzx] {
        background: #fff7ed;
        color: #c2410c;
    }

    .evidencias-count.ok[b-rr441gorzx] {
        background: #ecfdf5;
        color: #047857;
    }



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

.form-section-title[b-rr441gorzx] {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin: 4px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

    .form-section-title:not(:first-child)[b-rr441gorzx] {
        margin-top: 24px;
    }

.form-grid[b-rr441gorzx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group[b-rr441gorzx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group-full[b-rr441gorzx] {
    grid-column: 1 / -1;
}

.form-group label[b-rr441gorzx] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.form-control[b-rr441gorzx] {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: #111827;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

    .form-control:focus[b-rr441gorzx] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }

.textarea-control[b-rr441gorzx] {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.form-help[b-rr441gorzx] {
    font-size: 11px;
    color: #9ca3af;
}

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

.form-error[b-rr441gorzx] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 8px;
    padding: 11px 13px;
    margin-bottom: 18px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13px;
}

/* ========================================================= */
/* CHECKBOX */
/* ========================================================= */

.checkbox-card[b-rr441gorzx] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
}

.checkbox-label[b-rr441gorzx] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
}

    .checkbox-label input[b-rr441gorzx] {
        margin-top: 3px;
    }

    .checkbox-label div[b-rr441gorzx] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .checkbox-label strong[b-rr441gorzx] {
        font-size: 13px;
        color: #374151;
    }

    .checkbox-label span[b-rr441gorzx] {
        font-size: 12px;
        color: #6b7280;
    }

/* ========================================================= */
/* CONFIRMACIÓN */
/* ========================================================= */

.confirm-modal[b-rr441gorzx] {
    width: 100%;
    max-width: 430px;
    background: white;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
}

.confirm-icon[b-rr441gorzx] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
}

    .confirm-icon.danger[b-rr441gorzx] {
        background: #fee2e2;
    }

.confirm-modal h2[b-rr441gorzx] {
    margin: 0 0 10px;
    color: #111827;
    font-size: 20px;
}

.confirm-modal p[b-rr441gorzx] {
    color: #4b5563;
    font-size: 14px;
    margin: 7px 0;
}

.confirm-description[b-rr441gorzx] {
    color: #6b7280 !important;
    font-size: 13px !important;
}

.danger-text[b-rr441gorzx] {
    color: #b91c1c !important;
}

.confirm-actions[b-rr441gorzx] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}


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

@media (max-width: 900px) {

    .page-header[b-rr441gorzx] {
        align-items: flex-start;
        flex-direction: column;
    }

        .page-header .btn-primary[b-rr441gorzx] {
            width: 100%;
        }

    .filters[b-rr441gorzx] {
        flex-direction: column;
        align-items: stretch;
    }

    .status-filter[b-rr441gorzx] {
        width: 100%;
    }
}


@media (max-width: 600px) {

    .productos-page[b-rr441gorzx] {
        padding: 16px;
    }

    .page-title[b-rr441gorzx] {
        align-items: flex-start;
    }

    .title-icon[b-rr441gorzx] {
        width: 44px;
        height: 44px;
    }

    .page-title h1[b-rr441gorzx] {
        font-size: 23px;
    }

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

    .form-group-full[b-rr441gorzx] {
        grid-column: auto;
    }

    .modal-overlay[b-rr441gorzx] {
        padding: 8px;
    }

    .modal-container[b-rr441gorzx] {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 12px;
    }

    .modal-header[b-rr441gorzx] {
        padding: 17px;
    }

    .modal-body[b-rr441gorzx] {
        padding: 17px;
    }

    .modal-footer[b-rr441gorzx] {
        padding: 14px 17px;
        flex-direction: column-reverse;
    }

        .modal-footer .btn-primary[b-rr441gorzx],
        .modal-footer .btn-secondary[b-rr441gorzx] {
            width: 100%;
        }
}
/* /Components/Pages/Logistica/Proveedores.razor.rz.scp.css */
/* ============================================================
   PROVEEDORES
   ============================================================ */

.proveedores-page[b-oht088raud] {
    width: 100%;
    min-height: 100%;
    padding: 24px;
    box-sizing: border-box;
}


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

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

.header-left[b-oht088raud] {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .header-left h1[b-oht088raud] {
        margin: 0;
        font-size: 25px;
        font-weight: 700;
        color: #1f2937;
    }

    .header-left p[b-oht088raud] {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 14px;
    }


/* ============================================================
   BOTONES
   ============================================================ */

.btn-primary[b-oht088raud],
.btn-secondary[b-oht088raud],
.btn-danger[b-oht088raud],
.btn-back[b-oht088raud] {
    border: none;
    border-radius: 7px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-primary[b-oht088raud] {
    background: #2563eb;
    color: #ffffff;
}

    .btn-primary:hover[b-oht088raud] {
        background: #1d4ed8;
    }

.btn-secondary[b-oht088raud] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

    .btn-secondary:hover[b-oht088raud] {
        background: #e5e7eb;
    }

.btn-danger[b-oht088raud] {
    background: #dc2626;
    color: #ffffff;
}

    .btn-danger:hover[b-oht088raud] {
        background: #b91c1c;
    }

.btn-back[b-oht088raud] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

    .btn-back:hover[b-oht088raud] {
        background: #f9fafb;
    }

    .btn-back .icon[b-oht088raud] {
        font-size: 16px;
    }


/* ============================================================
   ALERTAS
   ============================================================ */

.alert-success[b-oht088raud],
.alert-error[b-oht088raud] {
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 13px;
}

.alert-success[b-oht088raud] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.alert-error[b-oht088raud] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}


/* ============================================================
   CARD PRINCIPAL
   ============================================================ */

.card[b-oht088raud] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.toolbar[b-oht088raud] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.search-box[b-oht088raud] {
    position: relative;
    width: min(520px, 100%);
}

    .search-box input[b-oht088raud] {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        padding: 0 14px 0 40px;
        border: 1px solid #d1d5db;
        border-radius: 7px;
        outline: none;
        font-size: 13px;
        color: #374151;
        background: #ffffff;
    }

        .search-box input:focus[b-oht088raud] {
            border-color: #2563eb;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.10);
        }

.search-icon[b-oht088raud] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 20px;
    pointer-events: none;
}

.toolbar-info[b-oht088raud] {
    color: #6b7280;
    font-size: 13px;
    white-space: nowrap;
}


/* ============================================================
   TABLA PRINCIPAL
   ============================================================ */

.table-container[b-oht088raud] {
    width: 100%;
    overflow-x: auto;
}

.data-table[b-oht088raud] {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
}

    .data-table thead[b-oht088raud] {
        background: #f8fafc;
    }

    .data-table th[b-oht088raud] {
        padding: 12px 14px;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
    }

    .data-table td[b-oht088raud] {
        padding: 13px 14px;
        border-bottom: 1px solid #edf0f3;
        color: #374151;
        font-size: 13px;
        vertical-align: middle;
    }

    .data-table tbody tr[b-oht088raud] {
        transition: background 0.12s ease;
    }

        .data-table tbody tr:hover[b-oht088raud] {
            background: #f8fafc;
        }

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


/* ============================================================
   DOCUMENTO
   ============================================================ */

.documento[b-oht088raud] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.documento-tipo[b-oht088raud] {
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
}

.documento-numero[b-oht088raud] {
    color: #111827;
    font-weight: 600;
}

.razon-social[b-oht088raud] {
    color: #111827;
    font-weight: 600;
}

.text-muted[b-oht088raud] {
    color: #9ca3af;
}


/* ============================================================
   BADGES
   ============================================================ */

.badge[b-oht088raud] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.badge-active[b-oht088raud] {
    background: #ecfdf5;
    color: #047857;
}

.badge-inactive[b-oht088raud] {
    background: #f3f4f6;
    color: #6b7280;
}


/* ============================================================
   ACCIONES
   ============================================================ */

.actions-column[b-oht088raud] {
    width: 300px;
}

.actions[b-oht088raud] {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.action-btn[b-oht088raud] {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

    .action-btn.view[b-oht088raud] {
        color: #2563eb;
    }

        .action-btn.view:hover[b-oht088raud] {
            background: #eff6ff;
        }

    .action-btn.edit[b-oht088raud] {
        color: #4f46e5;
    }

        .action-btn.edit:hover[b-oht088raud] {
            background: #eef2ff;
        }

    .action-btn.state[b-oht088raud] {
        color: #d97706;
    }

        .action-btn.state:hover[b-oht088raud] {
            background: #fffbeb;
        }

    .action-btn.delete[b-oht088raud] {
        color: #dc2626;
    }

        .action-btn.delete:hover[b-oht088raud] {
            background: #fef2f2;
        }


/* ============================================================
   LOADING
   ============================================================ */

.loading-container[b-oht088raud] {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6b7280;
    font-size: 13px;
}

.spinner[b-oht088raud] {
    width: 18px;
    height: 18px;
    border: 2px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: proveedor-spin-b-oht088raud 0.7s linear infinite;
}

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


/* ============================================================
   ESTADO VACÍO
   ============================================================ */

.empty-state[b-oht088raud] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}

.empty-icon[b-oht088raud] {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 28px;
}

.empty-state h3[b-oht088raud] {
    margin: 0 0 5px;
    color: #374151;
    font-size: 16px;
}

.empty-state p[b-oht088raud] {
    margin: 0 0 18px;
    color: #6b7280;
    font-size: 13px;
}


/* ============================================================
   MODAL
   ============================================================ */

.modal-overlay[b-oht088raud] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.48);
}

.modal-container[b-oht088raud] {
    width: min(1100px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.20), 0 4px 12px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}


/* ============================================================
   HEADER MODAL
   ============================================================ */

.modal-header[b-oht088raud] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

    .modal-header h2[b-oht088raud] {
        margin: 0;
        color: #111827;
        font-size: 19px;
        font-weight: 700;
    }

    .modal-header p[b-oht088raud] {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 12px;
    }

.modal-close[b-oht088raud] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

    .modal-close:hover[b-oht088raud] {
        background: #f3f4f6;
        color: #111827;
    }


/* ============================================================
   BODY MODAL
   ============================================================ */

.modal-body[b-oht088raud] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px;
}


/* ============================================================
   TITULOS DE SECCIÓN
   ============================================================ */

.section-title[b-oht088raud] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
}

.section-number[b-oht088raud] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.section-title h3[b-oht088raud] {
    margin: 0;
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
}

.section-title p[b-oht088raud] {
    margin: 2px 0 0;
    color: #6b7280;
    font-size: 11px;
}


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

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

.form-group[b-oht088raud] {
    min-width: 0;
}

.form-group-wide[b-oht088raud] {
    grid-column: span 1;
}

.form-group label[b-oht088raud] {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

    .form-group label span[b-oht088raud] {
        color: #dc2626;
    }

.form-control[b-oht088raud] {
    width: 100%;
    height: 39px;
    box-sizing: border-box;
    padding: 0 11px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    outline: none;
    color: #374151;
    background: #ffffff;
    font-size: 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .form-control:focus[b-oht088raud] {
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.10);
    }

    .form-control:disabled[b-oht088raud] {
        background: #f8fafc;
        color: #4b5563;
        cursor: default;
    }


/* ============================================================
   ESTADO
   ============================================================ */

.estado-box[b-oht088raud] {
    margin-top: 20px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #f8fafc;
}

    .estado-box strong[b-oht088raud] {
        color: #374151;
        font-size: 12px;
    }

    .estado-box p[b-oht088raud] {
        margin: 3px 0 0;
        color: #6b7280;
        font-size: 11px;
    }


/* ============================================================
   DIVISOR
   ============================================================ */

.section-divider[b-oht088raud] {
    height: 1px;
    margin: 25px 0;
    background: #e5e7eb;
}


/* ============================================================
   SUBTABLAS
   ============================================================ */

.subtable-container[b-oht088raud] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
}

.subtable[b-oht088raud] {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

    .subtable thead[b-oht088raud] {
        background: #f8fafc;
    }

    .subtable th[b-oht088raud] {
        padding: 10px 11px;
        border-bottom: 1px solid #e5e7eb;
        color: #64748b;
        font-size: 10px;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
    }

    .subtable td[b-oht088raud] {
        padding: 10px 11px;
        border-bottom: 1px solid #edf0f3;
        color: #374151;
        font-size: 12px;
    }

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

.subtable-empty[b-oht088raud] {
    padding: 20px;
    border: 1px dashed #d1d5db;
    border-radius: 7px;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
}


/* ============================================================
   FOOTER MODAL
   ============================================================ */

.modal-footer[b-oht088raud] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 22px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}


/* ============================================================
   MODAL CONFIRMACIÓN
   ============================================================ */

.confirm-modal[b-oht088raud] {
    width: min(430px, 100%);
    padding: 28px;
    background: #ffffff;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.20);
}

.confirm-icon[b-oht088raud] {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    font-size: 22px;
    font-weight: 700;
}

.confirm-modal h2[b-oht088raud] {
    margin: 0 0 9px;
    color: #111827;
    font-size: 18px;
}

.confirm-modal p[b-oht088raud] {
    margin: 5px 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

.confirm-modal strong[b-oht088raud] {
    display: block;
    margin: 9px 0;
    color: #111827;
    font-size: 14px;
}

.warning-text[b-oht088raud] {
    color: #b91c1c !important;
    font-size: 12px !important;
}

.confirm-actions[b-oht088raud] {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 22px;
}


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

@media (max-width: 900px) {

    .proveedores-page[b-oht088raud] {
        padding: 16px;
    }

    .page-header[b-oht088raud] {
        align-items: flex-start;
    }

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

    .search-box[b-oht088raud] {
        width: 100%;
    }

    .toolbar-info[b-oht088raud] {
        text-align: right;
    }

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

    .form-group-wide[b-oht088raud] {
        grid-column: span 1;
    }
}


@media (max-width: 650px) {

    .page-header[b-oht088raud] {
        flex-direction: column;
    }

    .header-left[b-oht088raud] {
        width: 100%;
    }

    .btn-primary[b-oht088raud] {
        width: 100%;
    }

    .header-left .btn-back[b-oht088raud] {
        flex-shrink: 0;
    }

    .modal-overlay[b-oht088raud] {
        padding: 10px;
        align-items: flex-start;
    }

    .modal-container[b-oht088raud] {
        max-height: calc(100vh - 20px);
    }

    .modal-header[b-oht088raud] {
        padding: 15px;
    }

    .modal-body[b-oht088raud] {
        padding: 16px;
    }

    .modal-footer[b-oht088raud] {
        padding: 12px 15px;
    }

        .modal-footer .btn-primary[b-oht088raud],
        .modal-footer .btn-secondary[b-oht088raud] {
            width: auto;
        }

    .confirm-modal[b-oht088raud] {
        padding: 22px;
    }
}

/* ============================================================
   SUBSECCIONES CONTACTOS / CUENTAS
   ============================================================ */

.subsection-toolbar[b-oht088raud] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.btn-small[b-oht088raud] {
    padding: 7px 11px;
    font-size: 12px;
}


/* ============================================================
   ACCIONES DE CONTACTOS / CUENTAS
   ============================================================ */

.sub-actions[b-oht088raud] {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.sub-action[b-oht088raud] {
    border: none;
    background: transparent;
    border-radius: 5px;
    padding: 4px 6px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

    .sub-action.edit[b-oht088raud] {
        color: #4f46e5;
    }

        .sub-action.edit:hover[b-oht088raud] {
            background: #eef2ff;
        }

    .sub-action.state[b-oht088raud] {
        color: #d97706;
    }

        .sub-action.state:hover[b-oht088raud] {
            background: #fffbeb;
        }

    .sub-action.delete[b-oht088raud] {
        color: #dc2626;
    }

        .sub-action.delete:hover[b-oht088raud] {
            background: #fef2f2;
        }


/* ============================================================
   SUBMODALES
   ============================================================ */

.nested-modal[b-oht088raud] {
    z-index: 1200;
}

.submodal[b-oht088raud] {
    width: min(650px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}


/* ============================================================
   SELECT
   ============================================================ */

select.form-control[b-oht088raud] {
    cursor: pointer;
}

    select.form-control:disabled[b-oht088raud] {
        cursor: default;
    }
/* /Components/Pages/Logistica/Recepciones.razor.rz.scp.css */
.recepciones-page[b-b7cfkztll4] {
    width: 100%;
    box-sizing: border-box;
}

.page-header[b-b7cfkztll4] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.breadcrumb[b-b7cfkztll4] {
    color: #6b7280;
    font-size: 13px;
}

    .breadcrumb span[b-b7cfkztll4] {
        margin: 0 8px;
    }

.page-header h1[b-b7cfkztll4] {
    margin: 5px 0;
    font-size: 26px;
    color: #111827;
}

.page-description[b-b7cfkztll4] {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.header-actions[b-b7cfkztll4] {
    display: flex;
    gap: 10px;
}

.btn[b-b7cfkztll4] {
    height: 40px;
    padding: 0 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary[b-b7cfkztll4] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.btn-success[b-b7cfkztll4] {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.btn-danger[b-b7cfkztll4] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.btn-secondary[b-b7cfkztll4] {
    background: #fff;
    color: #374151;
}

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

.list-card[b-b7cfkztll4] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.filters[b-b7cfkztll4] {
    display: flex;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.search[b-b7cfkztll4] {
    height: 40px;
    flex: 1;
    min-width: 280px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}

.status-filter[b-b7cfkztll4],
.control[b-b7cfkztll4] {
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.status-filter[b-b7cfkztll4] {
    width: auto;
    min-width: 160px;
}

.table-wrap[b-b7cfkztll4] {
    overflow: auto;
}

table[b-b7cfkztll4] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
}

th[b-b7cfkztll4] {
    background: #f9fafb;
    color: #4b5563;
    font-size: 12px;
    text-transform: uppercase;
    padding: 13px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

td[b-b7cfkztll4] {
    padding: 14px;
    border-bottom: 1px solid #f0f1f3;
    font-size: 13px;
    color: #374151;
}

.right[b-b7cfkztll4] {
    text-align: right;
}

.center[b-b7cfkztll4] {
    text-align: center;
}

.actions[b-b7cfkztll4] {
    display: flex;
    justify-content: center;
    gap: 5px;
}

    .actions button[b-b7cfkztll4] {
        width: 32px;
        height: 32px;
        border: 1px solid #e5e7eb;
        border-radius: 7px;
        background: #fff;
        cursor: pointer;
    }

        .actions button:hover[b-b7cfkztll4] {
            background: #f3f4f6;
        }

    .actions .ok[b-b7cfkztll4] {
        color: #15803d;
    }

    .actions .del[b-b7cfkztll4] {
        color: #dc2626;
    }

.badge[b-b7cfkztll4] {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.pending[b-b7cfkztll4] {
    background: #dbeafe;
    color: #1d4ed8;
}

.approved[b-b7cfkztll4] {
    background: #dcfce7;
    color: #166534;
}

.inactive[b-b7cfkztll4] {
    background: #f3f4f6;
    color: #4b5563;
}

.summary[b-b7cfkztll4] {
    padding: 12px 16px;
    color: #6b7280;
    font-size: 13px;
}

.loading[b-b7cfkztll4],
.empty[b-b7cfkztll4] {
    text-align: center;
    padding: 80px 20px;
    color: #6b7280;
}

    .empty div[b-b7cfkztll4] {
        font-size: 38px;
    }

    .empty h3[b-b7cfkztll4] {
        color: #111827;
    }

.alert[b-b7cfkztll4] {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}

    .alert span[b-b7cfkztll4] {
        flex: 1;
    }

    .alert button[b-b7cfkztll4] {
        border: 0;
        background: transparent;
        cursor: pointer;
    }

.error[b-b7cfkztll4] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.success[b-b7cfkztll4] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.backdrop[b-b7cfkztll4] {
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,.52);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal[b-b7cfkztll4] {
    width: 100%;
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0,0,0,.2);
}

.small[b-b7cfkztll4] {
    max-width: 500px;
}

.medium[b-b7cfkztll4] {
    max-width: 650px;
}

.xl[b-b7cfkztll4] {
    max-width: 1200px;
}

.modal-head[b-b7cfkztll4] {
    display: flex;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid #e5e7eb;
}

    .modal-head h2[b-b7cfkztll4] {
        margin: 0 0 5px;
        font-size: 19px;
    }

    .modal-head p[b-b7cfkztll4] {
        margin: 0;
        color: #6b7280;
        font-size: 13px;
    }

    .modal-head > button[b-b7cfkztll4] {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 7px;
        background: #f3f4f6;
        font-size: 22px;
        cursor: pointer;
    }

.modal-body[b-b7cfkztll4] {
    padding: 22px;
    overflow: auto;
}

.modal-foot[b-b7cfkztll4] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 15px 22px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

.source[b-b7cfkztll4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 15px;
    margin: 16px 0;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #f9fafb;
}

    .source small[b-b7cfkztll4] {
        display: block;
        color: #6b7280;
        font-size: 10px;
        margin-bottom: 4px;
    }

    .source b[b-b7cfkztll4] {
        font-size: 13px;
        color: #111827;
    }

.detail[b-b7cfkztll4] {
    min-width: 900px;
}

    .detail th[b-b7cfkztll4],
    .detail td[b-b7cfkztll4] {
        padding: 10px 12px;
    }

.grid[b-b7cfkztll4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 18px;
}

    .grid .full[b-b7cfkztll4] {
        grid-column: 1/-1;
    }

    .grid label[b-b7cfkztll4],
    .modal-body > label[b-b7cfkztll4] {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

.control:focus[b-b7cfkztll4],
.search:focus[b-b7cfkztll4],
.status-filter:focus[b-b7cfkztll4],
.quantity-input:focus[b-b7cfkztll4] {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

textarea.control[b-b7cfkztll4] {
    min-height: 90px;
    resize: vertical;
}

.quantity-input[b-b7cfkztll4] {
    width: 110px;
    height: 36px;
    padding: 6px 9px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    box-sizing: border-box;
}

.section-title[b-b7cfkztll4] {
    margin: 22px 0 10px;
    font-size: 14px;
    color: #111827;
}

.decision[b-b7cfkztll4] {
    padding: 15px;
    border-radius: 9px;
    margin: 16px 0;
}

    .decision p[b-b7cfkztll4] {
        margin: 6px 0 0;
    }

    .decision.success[b-b7cfkztll4] {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
    }

    .decision.danger[b-b7cfkztll4] {
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

.notes[b-b7cfkztll4] {
    padding: 14px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 16px;
}

    .notes p[b-b7cfkztll4] {
        margin: 6px 0;
    }

.muted[b-b7cfkztll4] {
    color: #9ca3af;
}

@media(max-width:800px) {

    .page-header[b-b7cfkztll4] {
        flex-direction: column;
    }

    .filters[b-b7cfkztll4] {
        flex-wrap: wrap;
    }

    .search[b-b7cfkztll4] {
        min-width: 100%;
    }

    .status-filter[b-b7cfkztll4] {
        width: 100%;
    }

    .source[b-b7cfkztll4] {
        grid-template-columns: 1fr 1fr;
    }

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

        .grid .full[b-b7cfkztll4] {
            grid-column: auto;
        }

    .modal[b-b7cfkztll4] {
        max-height: calc(100vh - 20px);
    }

    .modal-foot[b-b7cfkztll4] {
        flex-wrap: wrap;
    }

        .modal-foot .btn[b-b7cfkztll4] {
            flex: 1;
        }
}
/* =========================================================
   ARCHIVO - GUÍA DE REMISIÓN
   ========================================================= */

.file-section[b-b7cfkztll4] {
    margin-top: 14px;
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #f9fafb;
}

.file-section-title[b-b7cfkztll4] {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.file-current[b-b7cfkztll4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 13px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
}

.file-info[b-b7cfkztll4] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.file-icon[b-b7cfkztll4] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 7px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 18px;
}

.file-details[b-b7cfkztll4] {
    min-width: 0;
}

    .file-details b[b-b7cfkztll4] {
        display: block;
        color: #111827;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .file-details small[b-b7cfkztll4] {
        display: block;
        margin-top: 2px;
        color: #6b7280;
        font-size: 11px;
    }

.file-actions[b-b7cfkztll4] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

    .file-actions .btn[b-b7cfkztll4] {
        height: 34px;
        padding: 0 11px;
        font-size: 12px;
    }

.file-upload[b-b7cfkztll4] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .file-upload input[type="file"][b-b7cfkztll4] {
        width: 100%;
        padding: 8px;
        border: 1px dashed #cbd5e1;
        border-radius: 8px;
        background: #fff;
        color: #4b5563;
        font-size: 12px;
        box-sizing: border-box;
        cursor: pointer;
    }

        .file-upload input[type="file"]:hover[b-b7cfkztll4] {
            border-color: #93c5fd;
            background: #f8fbff;
        }

.file-selected[b-b7cfkztll4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 12px;
}

    .file-selected b[b-b7cfkztll4] {
        font-weight: 600;
    }

.file-help[b-b7cfkztll4] {
    margin-top: 7px;
    color: #6b7280;
    font-size: 11px;
}

.file-error[b-b7cfkztll4] {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 12px;
}

.file-success[b-b7cfkztll4] {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 12px;
}

.action-pdf[b-b7cfkztll4] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #64748b;
    text-decoration: none;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .action-pdf:hover[b-b7cfkztll4] {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #334155;
        transform: translateY(-1px);
    }

/* =========================================================
   ORIGEN DE RECEPCIÓN
   ========================================================= */

.badge.origin-oc[b-b7cfkztll4] {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge.direct[b-b7cfkztll4] {
    background: #dcfce7;
    color: #166534;
}

.direct-add[b-b7cfkztll4] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 150px 120px auto;
    gap: 12px;
    align-items: end;
    padding: 15px;
    margin: 14px 0;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #f9fafb;
}

.direct-add-product[b-b7cfkztll4] {
    min-width: 0;
}

.direct-unit[b-b7cfkztll4] {
    min-width: 100px;
}

.unit-display[b-b7cfkztll4] {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 8px 11px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f3f4f6;
    color: #374151;
    box-sizing: border-box;
}

.direct-add-button[b-b7cfkztll4] {
    min-width: 105px;
}

.direct-remove[b-b7cfkztll4] {
    width: 36px;
    height: 34px;
    padding: 0 8px;
}

.file-empty[b-b7cfkztll4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
}

    .file-empty > span[b-b7cfkztll4] {
        font-size: 20px;
    }

    .file-empty b[b-b7cfkztll4] {
        display: block;
        color: #374151;
        font-size: 13px;
    }

    .file-empty small[b-b7cfkztll4] {
        display: block;
        margin-top: 3px;
        font-size: 11px;
    }

.file-input[b-b7cfkztll4] {
    width: 100%;
    margin-top: 8px;
}

.file-message[b-b7cfkztll4] {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 12px;
}

@media(max-width:800px) {
    .direct-add[b-b7cfkztll4] {
        grid-template-columns: 1fr;
    }

    .direct-add-button[b-b7cfkztll4] {
        width: 100%;
    }
}
/* /Components/Pages/Logistica/Reportes.razor.rz.scp.css */
/* =========================================================
   REPORTES DE LOGÍSTICA
   ========================================================= */

.reportes-page[b-zjiy30fhbt] {
    width: 100%;
    box-sizing: border-box;
}

.page-header[b-zjiy30fhbt] {
    margin-bottom: 18px;
}

.page-title[b-zjiy30fhbt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-icon[b-zjiy30fhbt] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef2ff;
    font-size: 22px;
}

.page-title h1[b-zjiy30fhbt] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
}

.page-title p[b-zjiy30fhbt] {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.page-error[b-zjiy30fhbt] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
}

    .page-error button[b-zjiy30fhbt] {
        margin-left: auto;
        width: 28px;
        height: 28px;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 18px;
        cursor: pointer;
    }

.report-card[b-zjiy30fhbt] {
    width: 100%;
    margin-bottom: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

.report-section-title[b-zjiy30fhbt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 18px;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
}

.filters-grid[b-zjiy30fhbt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
    padding: 18px;
}

.form-group[b-zjiy30fhbt] {
    min-width: 0;
}

    .form-group label[b-zjiy30fhbt] {
        display: block;
        margin-bottom: 6px;
        color: #374151;
        font-size: 12px;
        font-weight: 600;
    }

.form-control[b-zjiy30fhbt] {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    outline: none;
}

    .form-control:focus[b-zjiy30fhbt] {
        border-color: #315a9f;
        box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
    }

.filter-actions[b-zjiy30fhbt] {
    display: flex;
    gap: 9px;
    padding: 0 18px 18px;
}

.btn-primary[b-zjiy30fhbt],
.btn-secondary[b-zjiy30fhbt] {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary[b-zjiy30fhbt] {
    border: 1px solid #315a9f;
    background: #315a9f;
    color: #ffffff;
}

    .btn-primary:hover[b-zjiy30fhbt] {
        filter: brightness(.95);
    }

    .btn-primary:disabled[b-zjiy30fhbt],
    .btn-secondary:disabled[b-zjiy30fhbt] {
        opacity: .55;
        cursor: not-allowed;
    }

.btn-secondary[b-zjiy30fhbt] {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
}

    .btn-secondary:hover[b-zjiy30fhbt] {
        background: #f9fafb;
    }

.loading-container[b-zjiy30fhbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    color: #6b7280;
    font-size: 13px;
}

.spinner[b-zjiy30fhbt] {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-top-color: #315a9f;
    border-radius: 50%;
    animation: report-spin-b-zjiy30fhbt .8s linear infinite;
}

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

.report-result-header[b-zjiy30fhbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border-bottom: 1px solid #e5e7eb;
}

    .report-result-header h2[b-zjiy30fhbt] {
        margin: 0;
        color: #1f2937;
        font-size: 17px;
    }

    .report-result-header p[b-zjiy30fhbt] {
        margin: 5px 0 0;
        color: #6b7280;
        font-size: 12px;
    }

.result-badge[b-zjiy30fhbt] {
    padding: 7px 11px;
    border-radius: 20px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.summary-grid[b-zjiy30fhbt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #e5e7eb;
}

.summary-item[b-zjiy30fhbt] {
    padding: 14px 18px;
    border-right: 1px solid #e5e7eb;
}

    .summary-item:last-child[b-zjiy30fhbt] {
        border-right: 0;
    }

    .summary-item span[b-zjiy30fhbt] {
        display: block;
        margin-bottom: 4px;
        color: #6b7280;
        font-size: 11px;
    }

    .summary-item strong[b-zjiy30fhbt] {
        color: #1f2937;
        font-size: 18px;
    }

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

.report-table[b-zjiy30fhbt] {
    width: 100%;
    min-width: 1250px;
    border-collapse: collapse;
    font-size: 12px;
}

    .report-table th[b-zjiy30fhbt] {
        padding: 10px 9px;
        border-bottom: 1px solid #d1d5db;
        background: #f8fafc;
        color: #4b5563;
        font-size: 10px;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
    }

    .report-table td[b-zjiy30fhbt] {
        padding: 10px 9px;
        border-bottom: 1px solid #f1f5f9;
        color: #374151;
        vertical-align: middle;
    }

    .report-table tbody tr:hover[b-zjiy30fhbt] {
        background: #fafafa;
    }

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

.code-cell[b-zjiy30fhbt] {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
}

.product-code[b-zjiy30fhbt] {
    color: #6b7280;
    font-size: 10px;
    font-weight: 600;
}

.product-name[b-zjiy30fhbt] {
    margin-top: 2px;
    color: #1f2937;
    font-weight: 600;
}

.movement-badge[b-zjiy30fhbt] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
}

    .movement-badge.entry[b-zjiy30fhbt] {
        background: #dcfce7;
        color: #166534;
    }

    .movement-badge.exit[b-zjiy30fhbt] {
        background: #fee2e2;
        color: #991b1b;
    }

.empty-state[b-zjiy30fhbt],
.initial-state[b-zjiy30fhbt] {
    padding: 55px 20px;
    text-align: center;
}

.empty-icon[b-zjiy30fhbt],
.initial-icon[b-zjiy30fhbt] {
    margin-bottom: 10px;
    font-size: 34px;
}

.empty-state h3[b-zjiy30fhbt],
.initial-state h2[b-zjiy30fhbt] {
    margin: 0 0 7px;
    color: #374151;
    font-size: 16px;
}

.empty-state p[b-zjiy30fhbt],
.initial-state p[b-zjiy30fhbt] {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
}

@media (max-width: 900px) {
    .filters-grid[b-zjiy30fhbt] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .summary-grid[b-zjiy30fhbt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-item:nth-child(2)[b-zjiy30fhbt] {
        border-right: 0;
    }
}

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

    .summary-grid[b-zjiy30fhbt] {
        grid-template-columns: 1fr;
    }

    .summary-item[b-zjiy30fhbt] {
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
    }

        .summary-item:last-child[b-zjiy30fhbt] {
            border-bottom: 0;
        }

    .report-result-header[b-zjiy30fhbt] {
        align-items: flex-start;
        flex-direction: column;
    }

    .filter-actions[b-zjiy30fhbt] {
        flex-direction: column;
    }

    .btn-primary[b-zjiy30fhbt],
    .btn-secondary[b-zjiy30fhbt] {
        width: 100%;
    }
}

.result-actions[b-zjiy30fhbt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-excel[b-zjiy30fhbt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #16a34a;
    border-radius: 8px;
    background: #16a34a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: .15s ease;
}

    .btn-excel:hover[b-zjiy30fhbt] {
        background: #15803d;
        border-color: #15803d;
        color: #fff;
    }

.summary-item.highlight[b-zjiy30fhbt] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

@media (max-width: 760px) {
    .result-actions[b-zjiy30fhbt] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* /Components/Pages/Logistica/Requerimientos.razor.rz.scp.css */
/* =========================================================
   REQUERIMIENTOS - SERCOM ERP
   ========================================================= */

.requerimientos-page[b-8q5khp2aw5] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}


/* =========================================================
   CABECERA
   ========================================================= */

.page-header[b-8q5khp2aw5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.page-title[b-8q5khp2aw5] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.title-icon[b-8q5khp2aw5] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    flex-shrink: 0;
}

.page-title h1[b-8q5khp2aw5] {
    margin: 0;
    font-size: 27px;
    font-weight: 700;
    color: #111827;
}

.page-title p[b-8q5khp2aw5] {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.page-actions[b-8q5khp2aw5] {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =========================================================
   BOTONES GENERALES
   ========================================================= */

.btn-primary[b-8q5khp2aw5],
.btn-secondary[b-8q5khp2aw5],
.btn-danger[b-8q5khp2aw5] {
    border: none;
    border-radius: 9px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: all .18s ease;
}

.btn-primary[b-8q5khp2aw5] {
    background: #2563eb;
    color: white;
    box-shadow: 0 2px 5px rgba(37, 99, 235, .22);
}

    .btn-primary:hover:not(:disabled)[b-8q5khp2aw5] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(37, 99, 235, .28);
    }

    .btn-primary:active:not(:disabled)[b-8q5khp2aw5] {
        transform: translateY(0);
        box-shadow: 0 2px 5px rgba(37, 99, 235, .20);
    }

.btn-secondary[b-8q5khp2aw5] {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

    .btn-secondary:hover:not(:disabled)[b-8q5khp2aw5] {
        background: #f8fafc;
        border-color: #9ca3af;
        color: #111827;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(15, 23, 42, .08);
    }

    .btn-secondary:active:not(:disabled)[b-8q5khp2aw5] {
        transform: translateY(0);
    }

.btn-danger[b-8q5khp2aw5] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover:not(:disabled)[b-8q5khp2aw5] {
        background: #b91c1c;
    }

    .btn-primary:disabled[b-8q5khp2aw5],
    .btn-secondary:disabled[b-8q5khp2aw5],
    .btn-danger:disabled[b-8q5khp2aw5] {
        opacity: .6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }


/* =========================================================
   ERROR GENERAL
   ========================================================= */

.page-error[b-8q5khp2aw5] {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 9px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
}

    .page-error button[b-8q5khp2aw5] {
        margin-left: auto;
        border: none;
        background: transparent;
        color: #991b1b;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }


/* =========================================================
   TARJETA PRINCIPAL
   ========================================================= */

.list-card[b-8q5khp2aw5] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
    overflow: hidden;
}


/* =========================================================
   FILTROS
   ========================================================= */

.filters[b-8q5khp2aw5] {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.search-box[b-8q5khp2aw5] {
    flex: 1;
    position: relative;
}

    .search-box input[b-8q5khp2aw5] {
        width: 100%;
        height: 42px;
        box-sizing: border-box;
        padding: 0 14px 0 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        outline: none;
        font-size: 14px;
        color: #111827;
        background: #fff;
        transition: border-color .18s ease, box-shadow .18s ease;
    }

        .search-box input:focus[b-8q5khp2aw5] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

.search-icon[b-8q5khp2aw5] {
    position: absolute;
    left: 14px;
    top: 10px;
    font-size: 17px;
    pointer-events: none;
}

.status-filter[b-8q5khp2aw5] {
    height: 42px;
    min-width: 155px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

    .status-filter:focus[b-8q5khp2aw5] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    }


/* =========================================================
   RESUMEN
   ========================================================= */

.list-summary[b-8q5khp2aw5] {
    padding: 14px 18px;
    color: #6b7280;
    font-size: 13px;
    background: #ffffff;
}

    .list-summary strong[b-8q5khp2aw5] {
        color: #111827;
        font-weight: 700;
    }


/* =========================================================
   TABLA
   ========================================================= */

.table-wrapper[b-8q5khp2aw5] {
    overflow-x: auto;
}

.requerimientos-table[b-8q5khp2aw5] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1150px;
}

    .requerimientos-table th[b-8q5khp2aw5] {
        background: #f9fafb;
        padding: 13px 15px;
        color: #6b7280;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        text-align: left;
        white-space: nowrap;
    }

    .requerimientos-table td[b-8q5khp2aw5] {
        padding: 15px;
        border-top: 1px solid #f0f0f0;
        color: #374151;
        font-size: 13px;
        vertical-align: middle;
    }

    .requerimientos-table tbody tr[b-8q5khp2aw5] {
        transition: background .15s ease;
    }

        .requerimientos-table tbody tr:hover[b-8q5khp2aw5] {
            background: #f8fafc;
        }

.document-number[b-8q5khp2aw5] {
    color: #2563eb;
    font-weight: 700;
    white-space: nowrap;
}

.text-muted[b-8q5khp2aw5] {
    color: #9ca3af;
}


/* =========================================================
   COLUMNA ACCIONES
   ========================================================= */

.actions-column[b-8q5khp2aw5] {
    width: 175px;
    min-width: 175px;
    text-align: center !important;
}

.actions[b-8q5khp2aw5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.action-view[b-8q5khp2aw5],
.action-edit[b-8q5khp2aw5],
.action-delete[b-8q5khp2aw5],
.action-quote[b-8q5khp2aw5],
.action-pdf[b-8q5khp2aw5] {
    width: 33px;
    height: 33px;
    padding: 0;
    border: none;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all .18s ease;
}

.action-view[b-8q5khp2aw5] {
    background: #f3f4f6;
}

    .action-view:hover[b-8q5khp2aw5] {
        background: #dbeafe;
        transform: translateY(-1px);
    }

.action-edit[b-8q5khp2aw5] {
    background: #f3f4f6;
}

    .action-edit:hover[b-8q5khp2aw5] {
        background: #dbeafe;
        transform: translateY(-1px);
    }

.action-delete[b-8q5khp2aw5] {
    background: #f3f4f6;
}

    .action-delete:hover[b-8q5khp2aw5] {
        background: #fee2e2;
        transform: translateY(-1px);
    }

.action-quote[b-8q5khp2aw5] {
    background: #f3f4f6;
}

    .action-quote:hover[b-8q5khp2aw5] {
        background: #fef3c7;
        transform: translateY(-1px);
    }

.action-pdf[b-8q5khp2aw5] {
    background: #f3f4f6;
}

    .action-pdf:hover[b-8q5khp2aw5] {
        background: #fee2e2;
        transform: translateY(-1px);
    }


/* =========================================================
   ESTADOS
   ========================================================= */

.status-pending[b-8q5khp2aw5],
.status-approved[b-8q5khp2aw5],
.status-rejected[b-8q5khp2aw5],
.status-inactive[b-8q5khp2aw5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-pending[b-8q5khp2aw5] {
    color: #92400e;
    background: #fef3c7;
}

.status-approved[b-8q5khp2aw5] {
    color: #166534;
    background: #dcfce7;
}

.status-rejected[b-8q5khp2aw5] {
    color: #991b1b;
    background: #fee2e2;
}

.status-inactive[b-8q5khp2aw5] {
    color: #4b5563;
    background: #f3f4f6;
}

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


/* =========================================================
   PRIORIDAD
   ========================================================= */

.priority-high[b-8q5khp2aw5],
.priority-medium[b-8q5khp2aw5],
.priority-low[b-8q5khp2aw5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.priority-high[b-8q5khp2aw5] {
    color: #991b1b;
    background: #fee2e2;
}

.priority-medium[b-8q5khp2aw5] {
    color: #92400e;
    background: #fef3c7;
}

.priority-low[b-8q5khp2aw5] {
    color: #166534;
    background: #dcfce7;
}

.priority-dot[b-8q5khp2aw5] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.empty-list[b-8q5khp2aw5] {
    padding: 65px 20px;
    text-align: center;
    color: #6b7280;
}

.empty-list-icon[b-8q5khp2aw5] {
    width: 64px;
    height: 64px;
    margin: 0 auto 15px;
    border-radius: 16px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.empty-list h3[b-8q5khp2aw5] {
    margin: 0 0 6px;
    color: #374151;
    font-size: 16px;
}

.empty-list p[b-8q5khp2aw5] {
    margin: 0;
    font-size: 13px;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal-overlay[b-8q5khp2aw5] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-container[b-8q5khp2aw5] {
    width: 100%;
    max-height: calc(100vh - 48px);
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-large[b-8q5khp2aw5] {
    max-width: 1100px;
}


/* =========================================================
   HEADER MODAL
   ========================================================= */

.modal-header[b-8q5khp2aw5] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

    .modal-header h2[b-8q5khp2aw5] {
        margin: 0;
        color: #111827;
        font-size: 20px;
        font-weight: 700;
    }

    .modal-header p[b-8q5khp2aw5] {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 13px;
    }

.modal-close[b-8q5khp2aw5] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .18s ease;
}

    .modal-close:hover:not(:disabled)[b-8q5khp2aw5] {
        background: #fee2e2;
        color: #991b1b;
    }

    .modal-close:disabled[b-8q5khp2aw5] {
        opacity: .5;
        cursor: not-allowed;
    }


/* =========================================================
   BODY MODAL
   ========================================================= */

.modal-body[b-8q5khp2aw5] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    background: #ffffff;
}


/* =========================================================
   SECCIONES DEL FORMULARIO
   ========================================================= */

.section-title[b-8q5khp2aw5] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.section-title-icon[b-8q5khp2aw5] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.section-title h3[b-8q5khp2aw5] {
    margin: 0;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
}

.section-title p[b-8q5khp2aw5] {
    margin: 3px 0 0;
    color: #6b7280;
    font-size: 12px;
}

.detail-section-title[b-8q5khp2aw5] {
    margin-top: 28px;
}


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

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

.form-group[b-8q5khp2aw5] {
    min-width: 0;
}

    .form-group label[b-8q5khp2aw5],
    .product-selector label[b-8q5khp2aw5],
    .quantity-selector label[b-8q5khp2aw5],
    .observation-selector label[b-8q5khp2aw5] {
        display: block;
        margin-bottom: 7px;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

.form-control[b-8q5khp2aw5] {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

    .form-control:focus[b-8q5khp2aw5] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    }

select.form-control[b-8q5khp2aw5] {
    cursor: pointer;
}


/* =========================================================
   ERROR DEL FORMULARIO
   ========================================================= */

.form-error[b-8q5khp2aw5] {
    margin-bottom: 20px;
    padding: 11px 13px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.validation-summary[b-8q5khp2aw5] {
    margin-bottom: 15px;
    color: #991b1b;
    font-size: 13px;
}


/* =========================================================
   AGREGAR DETALLE
   ========================================================= */

.add-detail-box[b-8q5khp2aw5] {
    display: grid;
    grid-template-columns: minmax(280px, 1.4fr) 130px minmax(180px, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
}

.product-selector[b-8q5khp2aw5],
.quantity-selector[b-8q5khp2aw5],
.observation-selector[b-8q5khp2aw5] {
    min-width: 0;
}

.add-button-wrapper[b-8q5khp2aw5] {
    display: flex;
    align-items: flex-end;
}

.btn-add-detail[b-8q5khp2aw5] {
    height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: all .18s ease;
}

    .btn-add-detail:hover[b-8q5khp2aw5] {
        background: #dbeafe;
        transform: translateY(-1px);
    }


/* =========================================================
   TABLA DE DETALLES
   ========================================================= */

.detail-table-wrapper[b-8q5khp2aw5] {
    margin-top: 14px;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.detail-table[b-8q5khp2aw5] {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

    .detail-table th[b-8q5khp2aw5] {
        padding: 11px 12px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        color: #6b7280;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        text-align: left;
        white-space: nowrap;
    }

    .detail-table td[b-8q5khp2aw5] {
        padding: 10px 12px;
        border-bottom: 1px solid #f0f0f0;
        color: #374151;
        font-size: 13px;
        vertical-align: middle;
    }

    .detail-table tbody tr:last-child td[b-8q5khp2aw5] {
        border-bottom: none;
    }

    .detail-table tbody tr:hover[b-8q5khp2aw5] {
        background: #fafafa;
    }

    .detail-table td strong[b-8q5khp2aw5] {
        color: #111827;
    }


/* =========================================================
   INPUTS DE DETALLE
   ========================================================= */

.detail-input[b-8q5khp2aw5] {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    padding: 0 9px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: white;
    color: #111827;
    font-size: 12px;
    outline: none;
}

    .detail-input:focus[b-8q5khp2aw5] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
    }

.quantity-input[b-8q5khp2aw5] {
    text-align: right;
}


/* =========================================================
   QUITAR DETALLE
   ========================================================= */

.remove-detail[b-8q5khp2aw5] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 7px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .18s ease;
}

    .remove-detail:hover[b-8q5khp2aw5] {
        background: #fee2e2;
        color: #b91c1c;
    }


/* =========================================================
   DETALLE VACÍO
   ========================================================= */

.empty-details[b-8q5khp2aw5] {
    margin-top: 14px;
    padding: 35px 20px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    background: #fafafa;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

    .empty-details > div[b-8q5khp2aw5] {
        width: 45px;
        height: 45px;
        margin-bottom: 5px;
        border-radius: 11px;
        background: #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 21px;
    }

    .empty-details strong[b-8q5khp2aw5] {
        color: #374151;
        font-size: 13px;
    }

    .empty-details span[b-8q5khp2aw5] {
        color: #9ca3af;
        font-size: 12px;
    }


/* =========================================================
   FOOTER MODAL
   ========================================================= */

.modal-footer[b-8q5khp2aw5] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

    .modal-footer .btn-primary[b-8q5khp2aw5],
    .modal-footer .btn-secondary[b-8q5khp2aw5] {
        min-width: 118px;
        height: 42px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
    }

    .modal-footer .btn-primary[b-8q5khp2aw5] {
        box-shadow: 0 3px 8px rgba(37, 99, 235, .24);
    }

    .modal-footer .btn-secondary[b-8q5khp2aw5] {
        background: #f8fafc;
    }


/* =========================================================
   RESUMEN DEL DETALLE
   ========================================================= */

.detail-summary[b-8q5khp2aw5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}

    .detail-summary > div[b-8q5khp2aw5] {
        padding: 13px 14px;
        border: 1px solid #e5e7eb;
        border-radius: 9px;
        background: #f9fafb;
    }

    .detail-summary span[b-8q5khp2aw5] {
        display: block;
        margin-bottom: 5px;
        color: #6b7280;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .detail-summary strong[b-8q5khp2aw5] {
        display: block;
        color: #111827;
        font-size: 13px;
        font-weight: 600;
    }


/* =========================================================
   CONFIRMACIÓN DE ELIMINACIÓN
   ========================================================= */

.confirm-modal[b-8q5khp2aw5] {
    width: 100%;
    max-width: 430px;
    padding: 28px;
    border-radius: 14px;
    background: white;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    text-align: center;
}

.confirm-icon[b-8q5khp2aw5] {
    width: 58px;
    height: 58px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.confirm-modal h2[b-8q5khp2aw5] {
    margin: 0 0 10px;
    color: #111827;
    font-size: 19px;
}

.confirm-modal p[b-8q5khp2aw5] {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}

    .confirm-modal p strong[b-8q5khp2aw5] {
        color: #111827;
    }

.confirm-warning[b-8q5khp2aw5] {
    margin-top: 10px !important;
    color: #991b1b !important;
    font-size: 12px !important;
}

.confirm-actions[b-8q5khp2aw5] {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

    .confirm-actions .btn-primary[b-8q5khp2aw5],
    .confirm-actions .btn-secondary[b-8q5khp2aw5],
    .confirm-actions .btn-danger[b-8q5khp2aw5] {
        min-width: 110px;
    }


/* =========================================================
   LOADING
   ========================================================= */

.loading-container[b-8q5khp2aw5] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
}

    .loading-container p[b-8q5khp2aw5] {
        margin-top: 12px;
    }

.spinner[b-8q5khp2aw5],
.mini-spinner[b-8q5khp2aw5] {
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-8q5khp2aw5 .7s linear infinite;
}

.spinner[b-8q5khp2aw5] {
    width: 34px;
    height: 34px;
}

.mini-spinner[b-8q5khp2aw5] {
    width: 15px;
    height: 15px;
    border-width: 2px;
    display: inline-block;
}

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


/* =========================================================
   SCROLLBAR MODAL
   ========================================================= */

.modal-body[b-8q5khp2aw5]::-webkit-scrollbar {
    width: 8px;
}

.modal-body[b-8q5khp2aw5]::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.modal-body[b-8q5khp2aw5]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

    .modal-body[b-8q5khp2aw5]::-webkit-scrollbar-thumb:hover {
        background: #9ca3af;
    }


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

@media (max-width: 1100px) {

    .add-detail-box[b-8q5khp2aw5] {
        grid-template-columns: 1fr 130px;
    }

    .observation-selector[b-8q5khp2aw5] {
        grid-column: 1 / 2;
    }

    .add-button-wrapper[b-8q5khp2aw5] {
        grid-column: 2 / 3;
    }

    .detail-summary[b-8q5khp2aw5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {

    .requerimientos-page[b-8q5khp2aw5] {
        padding: 18px;
    }

    .page-header[b-8q5khp2aw5] {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-actions[b-8q5khp2aw5] {
        width: 100%;
    }

        .page-actions button[b-8q5khp2aw5] {
            flex: 1;
        }

    .filters[b-8q5khp2aw5] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-8q5khp2aw5] {
        width: 100%;
    }

    .status-filter[b-8q5khp2aw5] {
        width: 100%;
    }

    .form-grid[b-8q5khp2aw5] {
        grid-template-columns: 1fr 1fr;
    }

    .modal-overlay[b-8q5khp2aw5] {
        padding: 12px;
    }

    .modal-container[b-8q5khp2aw5] {
        max-height: calc(100vh - 24px);
    }

    .modal-body[b-8q5khp2aw5] {
        padding: 20px;
    }
}


@media (max-width: 650px) {

    .requerimientos-page[b-8q5khp2aw5] {
        padding: 14px;
    }

    .page-title h1[b-8q5khp2aw5] {
        font-size: 23px;
    }

    .page-title p[b-8q5khp2aw5] {
        font-size: 13px;
    }

    .title-icon[b-8q5khp2aw5] {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .page-actions[b-8q5khp2aw5] {
        flex-direction: column;
    }

        .page-actions button[b-8q5khp2aw5] {
            width: 100%;
        }

    .form-grid[b-8q5khp2aw5] {
        grid-template-columns: 1fr;
    }

    .add-detail-box[b-8q5khp2aw5] {
        grid-template-columns: 1fr;
    }

    .observation-selector[b-8q5khp2aw5],
    .add-button-wrapper[b-8q5khp2aw5] {
        grid-column: auto;
    }

    .btn-add-detail[b-8q5khp2aw5] {
        width: 100%;
    }

    .detail-summary[b-8q5khp2aw5] {
        grid-template-columns: 1fr;
    }

    .modal-header[b-8q5khp2aw5] {
        padding: 16px 18px;
    }

    .modal-body[b-8q5khp2aw5] {
        padding: 18px;
    }

    .modal-footer[b-8q5khp2aw5] {
        padding: 12px 18px;
        flex-direction: column-reverse;
    }

        .modal-footer button[b-8q5khp2aw5] {
            width: 100%;
        }

    .confirm-modal[b-8q5khp2aw5] {
        padding: 24px 20px;
    }
}

/* =========================================================
   ACCIONES DE APROBACIÓN DESDE EL DETALLE
   ========================================================= */

.btn-detail-approve[b-8q5khp2aw5],
.btn-detail-reject[b-8q5khp2aw5] {
    min-width: 118px;
    height: 42px;
    padding: 0 15px;
    border: none;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
}

.btn-detail-approve[b-8q5khp2aw5] {
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(22, 163, 74, .20);
}

    .btn-detail-approve:hover:not(:disabled)[b-8q5khp2aw5] {
        background: #15803d;
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(22, 163, 74, .25);
    }

.btn-detail-reject[b-8q5khp2aw5] {
    background: #ffffff;
    color: #dc2626;
    border: 1px solid #fecaca;
}

    .btn-detail-reject:hover:not(:disabled)[b-8q5khp2aw5] {
        background: #fef2f2;
        border-color: #fca5a5;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(220, 38, 38, .10);
    }

    .btn-detail-approve:active:not(:disabled)[b-8q5khp2aw5],
    .btn-detail-reject:active:not(:disabled)[b-8q5khp2aw5] {
        transform: translateY(0);
    }

    .btn-detail-approve:disabled[b-8q5khp2aw5],
    .btn-detail-reject:disabled[b-8q5khp2aw5] {
        opacity: .6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* =========================================================
   INFORMACIÓN DE REVISIÓN
   ========================================================= */

.review-info[b-8q5khp2aw5] {
    margin-top: 4px;
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.review-info-header[b-8q5khp2aw5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.review-info-icon[b-8q5khp2aw5] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #dcfce7;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.review-info-header strong[b-8q5khp2aw5] {
    display: block;
    color: #111827;
    font-size: 13px;
}

.review-info-header span[b-8q5khp2aw5] {
    display: block;
    margin-top: 2px;
    color: #6b7280;
    font-size: 11px;
}

.review-info-grid[b-8q5khp2aw5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .review-info-grid > div[b-8q5khp2aw5] {
        padding: 10px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #ffffff;
    }

    .review-info-grid span[b-8q5khp2aw5] {
        display: block;
        margin-bottom: 4px;
        color: #6b7280;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .review-info-grid strong[b-8q5khp2aw5] {
        display: block;
        color: #374151;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
    }

.review-observation[b-8q5khp2aw5] {
    grid-column: 1 / -1;
}

@media (max-width: 650px) {
    .review-info-grid[b-8q5khp2aw5] {
        grid-template-columns: 1fr;
    }

    .review-observation[b-8q5khp2aw5] {
        grid-column: auto;
    }

    .btn-detail-approve[b-8q5khp2aw5],
    .btn-detail-reject[b-8q5khp2aw5] {
        width: 100%;
    }
}
/* /Components/Pages/Logistica/UnidadesMedida.razor.rz.scp.css */
/* =========================================================
   PÁGINA
   ========================================================= */

.clientes-page[b-7bku0ngqzn] {
    padding: 24px;
    max-width: 1500px;
    margin: 0 auto;
}


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

.page-header[b-7bku0ngqzn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.page-title[b-7bku0ngqzn] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.title-icon[b-7bku0ngqzn] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    flex-shrink: 0;
}

.page-title h1[b-7bku0ngqzn] {
    margin: 0;
    font-size: 27px;
    font-weight: 700;
    color: #111827;
}

.page-title p[b-7bku0ngqzn] {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.page-actions[b-7bku0ngqzn] {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary[b-7bku0ngqzn],
.btn-secondary[b-7bku0ngqzn],
.btn-danger[b-7bku0ngqzn] {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-7bku0ngqzn] {
    background: #2563eb;
    color: white;
}

    .btn-primary:hover[b-7bku0ngqzn] {
        background: #1d4ed8;
    }

    .btn-primary:disabled[b-7bku0ngqzn] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.btn-secondary[b-7bku0ngqzn] {
    background: #f3f4f6;
    color: #374151;
}

    .btn-secondary:hover[b-7bku0ngqzn] {
        background: #e5e7eb;
    }

.btn-danger[b-7bku0ngqzn] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover[b-7bku0ngqzn] {
        background: #b91c1c;
    }

    .btn-danger:disabled[b-7bku0ngqzn] {
        opacity: 0.65;
        cursor: not-allowed;
    }


/* =========================================================
   TARJETA PRINCIPAL
   ========================================================= */

.list-card[b-7bku0ngqzn] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}


/* =========================================================
   FILTROS
   ========================================================= */

.filters[b-7bku0ngqzn] {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.search-box[b-7bku0ngqzn] {
    flex: 1;
    position: relative;
}

    .search-box input[b-7bku0ngqzn] {
        width: 100%;
        height: 42px;
        box-sizing: border-box;
        padding: 0 14px 0 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        outline: none;
        font-size: 14px;
        color: #111827;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        .search-box input:focus[b-7bku0ngqzn] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
        }

.search-icon[b-7bku0ngqzn] {
    position: absolute;
    left: 14px;
    top: 9px;
    color: #6b7280;
    font-size: 20px;
    pointer-events: none;
}

.status-filter[b-7bku0ngqzn] {
    height: 42px;
    min-width: 130px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: #374151;
    outline: none;
    cursor: pointer;
    font-size: 14px;
}

    .status-filter:focus[b-7bku0ngqzn] {
        border-color: #2563eb;
    }


/* =========================================================
   RESUMEN
   ========================================================= */

.list-summary[b-7bku0ngqzn] {
    padding: 14px 18px;
    color: #6b7280;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
}

    .list-summary strong[b-7bku0ngqzn] {
        color: #374151;
    }


/* =========================================================
   TABLA
   ========================================================= */

.table-wrapper[b-7bku0ngqzn] {
    overflow-x: auto;
}

.clients-table[b-7bku0ngqzn] {
    width: 100%;
    border-collapse: collapse;
}

    .clients-table th[b-7bku0ngqzn] {
        background: #f9fafb;
        padding: 13px 18px;
        font-size: 12px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
        white-space: nowrap;
    }

    .clients-table td[b-7bku0ngqzn] {
        padding: 15px 18px;
        border-top: 1px solid #f0f0f0;
        font-size: 13px;
        color: #374151;
        vertical-align: middle;
    }

    .clients-table tbody tr[b-7bku0ngqzn] {
        transition: background 0.15s ease;
    }

        .clients-table tbody tr:hover[b-7bku0ngqzn] {
            background: #f8fafc;
        }

    .clients-table td strong[b-7bku0ngqzn] {
        color: #111827;
        font-weight: 600;
    }

.actions-column[b-7bku0ngqzn] {
    width: 140px;
    text-align: center !important;
}

.code-cell[b-7bku0ngqzn] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    font-family: monospace;
}

.document-cell[b-7bku0ngqzn] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
}

.not-principal[b-7bku0ngqzn] {
    color: #9ca3af;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.actions[b-7bku0ngqzn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.action-edit[b-7bku0ngqzn],
.action-disable[b-7bku0ngqzn],
.action-enable[b-7bku0ngqzn],
.action-delete[b-7bku0ngqzn] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #f3f4f6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.2s ease;
}

    .action-edit:hover[b-7bku0ngqzn] {
        background: #dbeafe;
        color: #2563eb;
    }

    .action-disable:hover[b-7bku0ngqzn] {
        background: #fee2e2;
        color: #dc2626;
    }

    .action-enable:hover[b-7bku0ngqzn] {
        background: #dcfce7;
        color: #16a34a;
    }

    .action-delete:hover[b-7bku0ngqzn] {
        background: #fee2e2;
        color: #dc2626;
    }


/* =========================================================
   ESTADOS
   ========================================================= */

.status-active[b-7bku0ngqzn],
.status-inactive[b-7bku0ngqzn] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-active[b-7bku0ngqzn] {
    background: #dcfce7;
    color: #166534;
}

.status-inactive[b-7bku0ngqzn] {
    background: #f3f4f6;
    color: #6b7280;
}

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


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.empty-list[b-7bku0ngqzn] {
    padding: 60px 20px;
    text-align: center;
}

.empty-list-icon[b-7bku0ngqzn] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.empty-list h3[b-7bku0ngqzn] {
    margin: 0 0 7px;
    color: #111827;
    font-size: 17px;
}

.empty-list p[b-7bku0ngqzn] {
    margin: 0 0 20px;
    color: #6b7280;
    font-size: 14px;
}


/* =========================================================
   LOADING
   ========================================================= */

.loading-container[b-7bku0ngqzn] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

    .loading-container p[b-7bku0ngqzn] {
        margin-top: 14px;
        font-size: 14px;
    }

.spinner[b-7bku0ngqzn] {
    width: 34px;
    height: 34px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-7bku0ngqzn 0.8s linear infinite;
}

.mini-spinner[b-7bku0ngqzn] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-7bku0ngqzn 0.8s linear infinite;
}

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


/* =========================================================
   MODALES
   ========================================================= */

.modal-overlay[b-7bku0ngqzn] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.client-form-modal[b-7bku0ngqzn] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20);
}

.modal-header[b-7bku0ngqzn] {
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

    .modal-header h2[b-7bku0ngqzn] {
        margin: 0;
        color: #111827;
        font-size: 19px;
        font-weight: 700;
    }

    .modal-header p[b-7bku0ngqzn] {
        margin: 5px 0 0;
        color: #6b7280;
        font-size: 13px;
    }

.modal-close[b-7bku0ngqzn] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-close:hover[b-7bku0ngqzn] {
        background: #e5e7eb;
        color: #111827;
    }


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

.form-body[b-7bku0ngqzn] {
    padding: 24px;
}

.form-group[b-7bku0ngqzn] {
    margin-bottom: 18px;
}

    .form-group label[b-7bku0ngqzn] {
        display: block;
        margin-bottom: 7px;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

.required[b-7bku0ngqzn] {
    color: #dc2626;
}

.form-control[b-7bku0ngqzn] {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    background: white;
    color: #111827;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-control:focus[b-7bku0ngqzn] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    }

.form-help[b-7bku0ngqzn] {
    display: block;
    margin-top: 5px;
    color: #9ca3af;
    font-size: 12px;
}

.validation-message[b-7bku0ngqzn] {
    margin-top: 5px;
    color: #dc2626;
    font-size: 12px;
}

.form-check[b-7bku0ngqzn] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 4px;
}

.form-check-input[b-7bku0ngqzn] {
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.form-check label[b-7bku0ngqzn] {
    margin: 0;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
}


/* =========================================================
   FOOTER DEL MODAL
   ========================================================= */

.modal-footer[b-7bku0ngqzn] {
    padding: 18px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}


/* =========================================================
   CONFIRMACIÓN
   ========================================================= */

.confirm-modal[b-7bku0ngqzn] {
    width: 100%;
    max-width: 430px;
    background: white;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20);
}

.confirm-icon[b-7bku0ngqzn] {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.delete-confirm-icon[b-7bku0ngqzn] {
    background: #fee2e2;
}

.confirm-modal h2[b-7bku0ngqzn] {
    margin: 0 0 10px;
    color: #111827;
    font-size: 19px;
}

.confirm-modal p[b-7bku0ngqzn] {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

.confirm-modal strong[b-7bku0ngqzn] {
    color: #374151;
}

.delete-warning[b-7bku0ngqzn] {
    margin-top: 10px !important;
    color: #dc2626 !important;
    font-size: 13px !important;
    font-weight: 600;
}

.confirm-actions[b-7bku0ngqzn] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}


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

@media (max-width: 900px) {

    .page-header[b-7bku0ngqzn] {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-actions[b-7bku0ngqzn] {
        width: 100%;
    }

        .page-actions button[b-7bku0ngqzn] {
            flex: 1;
        }

    .filters[b-7bku0ngqzn] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-7bku0ngqzn] {
        width: 100%;
    }

    .status-filter[b-7bku0ngqzn] {
        width: 100%;
    }
}


@media (max-width: 600px) {

    .clientes-page[b-7bku0ngqzn] {
        padding: 16px;
    }

    .page-title h1[b-7bku0ngqzn] {
        font-size: 22px;
    }

    .page-title p[b-7bku0ngqzn] {
        font-size: 13px;
    }

    .title-icon[b-7bku0ngqzn] {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

    .page-actions[b-7bku0ngqzn] {
        flex-direction: column;
    }

        .page-actions button[b-7bku0ngqzn] {
            width: 100%;
        }

    .clients-table th[b-7bku0ngqzn],
    .clients-table td[b-7bku0ngqzn] {
        padding: 12px;
    }

    .actions-column[b-7bku0ngqzn] {
        width: 120px;
    }

    .client-form-modal[b-7bku0ngqzn] {
        max-height: calc(100vh - 20px);
    }

    .modal-header[b-7bku0ngqzn],
    .form-body[b-7bku0ngqzn],
    .modal-footer[b-7bku0ngqzn] {
        padding-left: 18px;
        padding-right: 18px;
    }

    .confirm-modal[b-7bku0ngqzn] {
        padding: 22px;
    }
}
/* /Components/Pages/TalentoHumano/Catalogos/Areas.razor.rz.scp.css */
/* CSS for Areas component */
/* =====================================================
   CONTENEDOR
   ===================================================== */

.areas-page[b-eflm0lp94b] {
    padding: 24px;
    max-width: 1500px;
    margin: 0 auto;
}


/* =====================================================
   HEADER
   ===================================================== */

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

.page-title-section[b-eflm0lp94b] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.title-icon[b-eflm0lp94b] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f5f9;
    color: #334155;
    font-size: 24px;
}

.page-title-section h1[b-eflm0lp94b] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #1f2937;
}

.page-title-section p[b-eflm0lp94b] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
}

.page-actions[b-eflm0lp94b] {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =====================================================
   BOTONES
   ===================================================== */

.btn-primary[b-eflm0lp94b],
.btn-secondary[b-eflm0lp94b],
.btn-danger[b-eflm0lp94b] {
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-eflm0lp94b] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-eflm0lp94b] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.btn-secondary[b-eflm0lp94b] {
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
}

    .btn-secondary:hover:not(:disabled)[b-eflm0lp94b] {
        background: #f8fafc;
    }

.btn-danger[b-eflm0lp94b] {
    border: 1px solid #dc2626;
    background: #dc2626;
    color: white;
}

    .btn-danger:hover:not(:disabled)[b-eflm0lp94b] {
        background: #b91c1c;
    }

    .btn-primary:disabled[b-eflm0lp94b],
    .btn-secondary:disabled[b-eflm0lp94b],
    .btn-danger:disabled[b-eflm0lp94b] {
        opacity: 0.6;
        cursor: not-allowed;
    }


/* =====================================================
   ALERTAS
   ===================================================== */

.alert[b-eflm0lp94b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 9px;
    margin-bottom: 18px;
    font-size: 14px;
}

.alert-success[b-eflm0lp94b] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

.alert-error[b-eflm0lp94b] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}


/* =====================================================
   TARJETA PRINCIPAL
   ===================================================== */

.content-card[b-eflm0lp94b] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}


/* =====================================================
   TOOLBAR
   ===================================================== */

.toolbar[b-eflm0lp94b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.search-box[b-eflm0lp94b] {
    position: relative;
    width: 380px;
}

    .search-box input[b-eflm0lp94b] {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 14px 10px 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        outline: none;
        font-size: 14px;
        color: #1f2937;
    }

        .search-box input:focus[b-eflm0lp94b] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

.search-icon[b-eflm0lp94b] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
}

.toolbar-info[b-eflm0lp94b] {
    color: #64748b;
    font-size: 13px;
}


/* =====================================================
   TABLA
   ===================================================== */

.table-container[b-eflm0lp94b] {
    width: 100%;
    overflow-x: auto;
}

.areas-table[b-eflm0lp94b] {
    width: 100%;
    border-collapse: collapse;
}

    .areas-table thead[b-eflm0lp94b] {
        background: #f8fafc;
    }

    .areas-table th[b-eflm0lp94b] {
        padding: 13px 18px;
        text-align: left;
        color: #475569;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .areas-table td[b-eflm0lp94b] {
        padding: 15px 18px;
        border-bottom: 1px solid #f1f5f9;
        color: #374151;
        font-size: 14px;
        vertical-align: middle;
    }

    .areas-table tbody tr[b-eflm0lp94b] {
        transition: background 0.15s ease;
    }

        .areas-table tbody tr:hover[b-eflm0lp94b] {
            background: #f8fafc;
        }

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

.col-code[b-eflm0lp94b] {
    width: 130px;
}

.col-status[b-eflm0lp94b] {
    width: 120px;
}

.col-actions[b-eflm0lp94b] {
    width: 150px;
    text-align: center !important;
}

.codigo[b-eflm0lp94b] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.nombre-area[b-eflm0lp94b] {
    font-weight: 600;
    color: #1f2937;
}

.descripcion[b-eflm0lp94b] {
    color: #64748b;
}


/* =====================================================
   ESTADOS
   ===================================================== */

.badge[b-eflm0lp94b] {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.badge-active[b-eflm0lp94b] {
    background: #dcfce7;
    color: #15803d;
}

.badge-inactive[b-eflm0lp94b] {
    background: #f1f5f9;
    color: #64748b;
}


/* =====================================================
   ACCIONES
   ===================================================== */

.action-buttons[b-eflm0lp94b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.action-btn[b-eflm0lp94b] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid #e5e7eb;
    background: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s ease;
}

    .action-btn.edit[b-eflm0lp94b] {
        color: #2563eb;
    }

        .action-btn.edit:hover[b-eflm0lp94b] {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

    .action-btn.warning[b-eflm0lp94b] {
        color: #d97706;
    }

        .action-btn.warning:hover[b-eflm0lp94b] {
            background: #fffbeb;
            border-color: #fde68a;
        }

    .action-btn.success[b-eflm0lp94b] {
        color: #16a34a;
    }

        .action-btn.success:hover[b-eflm0lp94b] {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }

    .action-btn.delete[b-eflm0lp94b] {
        color: #dc2626;
    }

        .action-btn.delete:hover[b-eflm0lp94b] {
            background: #fef2f2;
            border-color: #fecaca;
        }


/* =====================================================
   LOADING
   ===================================================== */

.loading-state[b-eflm0lp94b] {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #64748b;
    font-size: 14px;
}

.spinner[b-eflm0lp94b] {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-eflm0lp94b 0.8s linear infinite;
}

.button-spinner[b-eflm0lp94b] {
    width: 13px;
    height: 13px;
    display: inline-block;
    margin-right: 7px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-eflm0lp94b 0.8s linear infinite;
}

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


/* =====================================================
   SIN RESULTADOS
   ===================================================== */

.empty-state[b-eflm0lp94b] {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}

.empty-icon[b-eflm0lp94b] {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 14px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 26px;
}

.empty-state h3[b-eflm0lp94b] {
    margin: 0 0 6px;
    font-size: 17px;
    color: #334155;
}

.empty-state p[b-eflm0lp94b] {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 14px;
}


/* =====================================================
   MODAL
   ===================================================== */

.modal-overlay[b-eflm0lp94b] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.45);
}

.modal-card[b-eflm0lp94b] {
    width: 100%;
    max-width: 520px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
    overflow: hidden;
}

.modal-header[b-eflm0lp94b] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid #e5e7eb;
}

    .modal-header h2[b-eflm0lp94b] {
        margin: 0;
        font-size: 19px;
        color: #1f2937;
    }

    .modal-header p[b-eflm0lp94b] {
        margin: 5px 0 0;
        color: #64748b;
        font-size: 13px;
    }

.modal-close[b-eflm0lp94b] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font-size: 23px;
    cursor: pointer;
}

    .modal-close:hover[b-eflm0lp94b] {
        background: #f1f5f9;
        color: #1f2937;
    }

.modal-body[b-eflm0lp94b] {
    padding: 22px;
}

.form-group[b-eflm0lp94b] {
    margin-bottom: 18px;
}

    .form-group:last-child[b-eflm0lp94b] {
        margin-bottom: 0;
    }

    .form-group label[b-eflm0lp94b] {
        display: block;
        margin-bottom: 7px;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

        .form-group label span[b-eflm0lp94b] {
            color: #dc2626;
        }

.form-control[b-eflm0lp94b] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: #1f2937;
    background: white;
}

    .form-control:focus[b-eflm0lp94b] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

.textarea[b-eflm0lp94b] {
    resize: vertical;
    min-height: 90px;
}

.modal-footer[b-eflm0lp94b] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e5e7eb;
}


/* =====================================================
   TOGGLE
   ===================================================== */

.status-toggle[b-eflm0lp94b] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 14px;
}

.toggle[b-eflm0lp94b] {
    position: relative;
    width: 42px;
    height: 23px;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .toggle span[b-eflm0lp94b] {
        position: absolute;
        width: 17px;
        height: 17px;
        top: 3px;
        left: 3px;
        border-radius: 50%;
        background: white;
        transition: transform 0.2s ease;
    }

    .toggle.active[b-eflm0lp94b] {
        background: #2563eb;
    }

        .toggle.active span[b-eflm0lp94b] {
            transform: translateX(19px);
        }


/* =====================================================
   CONFIRMACIÓN
   ===================================================== */

.confirm-card[b-eflm0lp94b] {
    width: 100%;
    max-width: 430px;
    padding: 28px;
    background: white;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.confirm-icon[b-eflm0lp94b] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    font-size: 22px;
    font-weight: 700;
}

.confirm-card h2[b-eflm0lp94b] {
    margin: 0 0 10px;
    color: #1f2937;
    font-size: 19px;
}

.confirm-card p[b-eflm0lp94b] {
    margin: 5px 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.confirm-card .confirm-warning[b-eflm0lp94b] {
    margin-top: 12px;
    color: #b91c1c;
    font-size: 12px;
}

.confirm-card .modal-footer[b-eflm0lp94b] {
    margin-top: 22px;
    padding: 0;
    border: none;
}


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

@media (max-width: 800px) {

    .areas-page[b-eflm0lp94b] {
        padding: 16px;
    }

    .page-header[b-eflm0lp94b] {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-actions[b-eflm0lp94b] {
        width: 100%;
    }

        .page-actions button[b-eflm0lp94b] {
            flex: 1;
        }

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

    .search-box[b-eflm0lp94b] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .page-title-section h1[b-eflm0lp94b] {
        font-size: 22px;
    }

    .areas-table th[b-eflm0lp94b],
    .areas-table td[b-eflm0lp94b] {
        padding: 12px;
    }

    .modal-overlay[b-eflm0lp94b] {
        align-items: flex-end;
        padding: 0;
    }

    .modal-card[b-eflm0lp94b],
    .confirm-card[b-eflm0lp94b] {
        max-width: none;
        border-radius: 14px 14px 0 0;
    }
}
/* /Components/Pages/TalentoHumano/Catalogos/JornadaHorario.razor.rz.scp.css */
.jh-page[b-um2lkzxdea] {
    padding: 24px;
    color: #1f2937;
}

.jh-page-header[b-um2lkzxdea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

    .jh-page-header h1[b-um2lkzxdea] {
        margin: 0 0 6px;
        color: #111827;
        font-size: 26px;
        font-weight: 700;
    }

    .jh-page-header p[b-um2lkzxdea] {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

/* Botones */

.jh-btn[b-um2lkzxdea] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .jh-btn:disabled[b-um2lkzxdea] {
        cursor: not-allowed;
        opacity: .65;
    }

.jh-btn-primary[b-um2lkzxdea] {
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
}

    .jh-btn-primary:hover:not(:disabled)[b-um2lkzxdea] {
        background: #1d4ed8;
    }

.jh-btn-secondary[b-um2lkzxdea] {
    color: #374151;
    background: #fff;
    border-color: #d1d5db;
}

    .jh-btn-secondary:hover:not(:disabled)[b-um2lkzxdea] {
        background: #f9fafb;
    }

.jh-btn-danger[b-um2lkzxdea] {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
}

    .jh-btn-danger:hover:not(:disabled)[b-um2lkzxdea] {
        background: #b91c1c;
    }

/* Mensajes */

.jh-alert[b-um2lkzxdea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 13px;
}

.jh-alert-success[b-um2lkzxdea] {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.jh-alert-error[b-um2lkzxdea] {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.jh-alert-close[b-um2lkzxdea] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
}

/* Búsqueda y filtros */

.jh-toolbar[b-um2lkzxdea] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.jh-search[b-um2lkzxdea] {
    flex: 1;
    max-width: 430px;
}

    .jh-search input[b-um2lkzxdea],
    .jh-filter[b-um2lkzxdea] {
        box-sizing: border-box;
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #fff;
        color: #374151;
        font-size: 13px;
        outline: none;
    }

        .jh-search input:focus[b-um2lkzxdea],
        .jh-filter:focus[b-um2lkzxdea],
        .jh-input:focus[b-um2lkzxdea] {
            border-color: #60a5fa;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

.jh-filter[b-um2lkzxdea] {
    width: 190px;
}

/* Tabla */

.jh-table-card[b-um2lkzxdea] {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .03);
}

.jh-table-wrapper[b-um2lkzxdea] {
    width: 100%;
    overflow-x: auto;
}

.jh-table[b-um2lkzxdea] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

    .jh-table thead[b-um2lkzxdea] {
        background: #f9fafb;
    }

    .jh-table th[b-um2lkzxdea] {
        padding: 14px 16px;
        color: #6b7280;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .045em;
        white-space: nowrap;
        border-bottom: 1px solid #e5e7eb;
    }

    .jh-table td[b-um2lkzxdea] {
        padding: 15px 16px;
        color: #374151;
        font-size: 12px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
    }

    .jh-table tbody tr:last-child td[b-um2lkzxdea] {
        border-bottom: 0;
    }

    .jh-table tbody tr:hover[b-um2lkzxdea] {
        background: #fafcff;
    }

.jh-code[b-um2lkzxdea] {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 5px;
    background: #f3f4f6;
    color: #374151;
    font-family: Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
}

.jh-name[b-um2lkzxdea] {
    color: #111827;
    font-size: 12px;
    font-weight: 600;
}

.jh-description[b-um2lkzxdea] {
    max-width: 250px;
    margin-top: 4px;
    overflow: hidden;
    color: #9ca3af;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Estado */

.jh-status[b-um2lkzxdea] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.jh-status-active[b-um2lkzxdea] {
    color: #15803d;
    background: #dcfce7;
}

.jh-status-inactive[b-um2lkzxdea] {
    color: #6b7280;
    background: #f3f4f6;
}

/* Acciones de la tabla */

.jh-actions[b-um2lkzxdea] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.jh-action-btn[b-um2lkzxdea] {
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

    .jh-action-btn:hover[b-um2lkzxdea] {
        text-decoration: underline;
    }

.jh-action-deactivate[b-um2lkzxdea] {
    color: #b45309;
}

.jh-action-activate[b-um2lkzxdea] {
    color: #15803d;
}

.jh-action-delete[b-um2lkzxdea] {
    color: #dc2626;
}

.jh-table-footer[b-um2lkzxdea] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 14px 18px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 12px;
}

    .jh-table-footer strong[b-um2lkzxdea] {
        color: #111827;
    }

/* Carga y tabla vacía */

.jh-loading[b-um2lkzxdea],
.jh-empty[b-um2lkzxdea] {
    padding: 52px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

    .jh-empty h3[b-um2lkzxdea] {
        margin: 0 0 8px;
        color: #374151;
        font-size: 16px;
    }

    .jh-empty p[b-um2lkzxdea] {
        margin: 0 0 20px;
        font-size: 13px;
    }

/* Modal de registro y edición */

.jh-modal-backdrop[b-um2lkzxdea] {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 24px;
    background: rgba(17, 24, 39, .55);
}

.jh-modal-container[b-um2lkzxdea] {
    width: 100%;
    max-width: 680px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

.jh-modal-header[b-um2lkzxdea] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

    .jh-modal-header h2[b-um2lkzxdea] {
        margin: 0 0 6px;
        color: #111827;
        font-size: 19px;
        font-weight: 700;
    }

    .jh-modal-header p[b-um2lkzxdea] {
        margin: 0;
        color: #6b7280;
        font-size: 12px;
    }

.jh-modal-close[b-um2lkzxdea] {
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.jh-modal-body[b-um2lkzxdea] {
    padding: 24px;
    background: #fff;
}

/* Formulario */

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

.jh-form-group[b-um2lkzxdea] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

    .jh-form-group label[b-um2lkzxdea] {
        color: #374151;
        font-size: 12px;
        font-weight: 600;
    }

.jh-input[b-um2lkzxdea] {
    box-sizing: border-box;
    width: 100%;
    min-height: 41px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    color: #111827;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.jh-form-group small[b-um2lkzxdea] {
    color: #9ca3af;
    font-size: 10px;
    line-height: 1.5;
}

.jh-form-full[b-um2lkzxdea] {
    grid-column: 1 / -1;
}

.jh-textarea[b-um2lkzxdea] {
    min-height: 85px;
    resize: vertical;
}

.jh-modal-footer[b-um2lkzxdea] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* Confirmación de acciones */

.jh-confirm-dialog[b-um2lkzxdea] {
    width: 100%;
    max-width: 420px;
    padding: 28px;
    border-radius: 14px;
    background: #fff;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

.jh-confirm-icon[b-um2lkzxdea] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fef3c7;
    color: #b45309;
    font-size: 25px;
    font-weight: 700;
}

.jh-confirm-dialog h2[b-um2lkzxdea] {
    margin: 0 0 10px;
    color: #111827;
    font-size: 18px;
}

.jh-confirm-dialog p[b-um2lkzxdea] {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}

.jh-confirm-actions[b-um2lkzxdea] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

/* Adaptación para pantallas pequeñas */

@media (max-width: 768px) {
    .jh-page[b-um2lkzxdea] {
        padding: 16px;
    }

    .jh-page-header[b-um2lkzxdea] {
        align-items: flex-start;
        flex-direction: column;
    }

    .jh-toolbar[b-um2lkzxdea] {
        flex-direction: column;
    }

    .jh-search[b-um2lkzxdea] {
        max-width: none;
    }

    .jh-filter[b-um2lkzxdea] {
        width: 100%;
    }

    .jh-form-grid[b-um2lkzxdea] {
        grid-template-columns: 1fr;
    }

    .jh-form-full[b-um2lkzxdea] {
        grid-column: auto;
    }

    .jh-modal-backdrop[b-um2lkzxdea] {
        align-items: flex-start;
        padding: 12px;
    }

    .jh-modal-container[b-um2lkzxdea] {
        max-height: calc(100vh - 24px);
    }

    .jh-modal-header[b-um2lkzxdea],
    .jh-modal-body[b-um2lkzxdea] {
        padding: 18px;
    }

    .jh-modal-footer[b-um2lkzxdea] {
        flex-wrap: wrap;
        padding: 16px 18px;
    }

    .jh-confirm-actions[b-um2lkzxdea] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/TalentoHumano/Catalogos/Puestos.razor.rz.scp.css */
.puestos-page[b-vilv4fsi27] {
    padding: 28px;
    max-width: 1500px;
    margin: 0 auto;
}

/* =====================================================
   HEADER
   ===================================================== */

.page-header[b-vilv4fsi27] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
}

.breadcrumb[b-vilv4fsi27] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

    .breadcrumb span[b-vilv4fsi27] {
        color: #9ca3af;
    }

.page-header h1[b-vilv4fsi27] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #111827;
}

.page-description[b-vilv4fsi27] {
    margin: 7px 0 0;
    color: #6b7280;
    font-size: 14px;
}

/* =====================================================
   BOTONES
   ===================================================== */

.btn-primary[b-vilv4fsi27],
.btn-secondary[b-vilv4fsi27],
.btn-danger[b-vilv4fsi27] {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.btn-primary[b-vilv4fsi27] {
    background: #2563eb;
    color: white;
}

    .btn-primary:hover[b-vilv4fsi27] {
        background: #1d4ed8;
    }

    .btn-primary:disabled[b-vilv4fsi27] {
        opacity: .6;
        cursor: not-allowed;
    }

.btn-secondary[b-vilv4fsi27] {
    background: #f3f4f6;
    color: #374151;
}

    .btn-secondary:hover[b-vilv4fsi27] {
        background: #e5e7eb;
    }

.btn-danger[b-vilv4fsi27] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover[b-vilv4fsi27] {
        background: #b91c1c;
    }

    .btn-danger:disabled[b-vilv4fsi27] {
        opacity: .6;
        cursor: not-allowed;
    }

/* =====================================================
   TOOLBAR
   ===================================================== */

.toolbar[b-vilv4fsi27] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.search-box[b-vilv4fsi27] {
    position: relative;
    width: 360px;
}

    .search-box input[b-vilv4fsi27] {
        width: 100%;
        height: 42px;
        padding: 0 14px 0 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: white;
        color: #111827;
        font-size: 14px;
        outline: none;
        box-sizing: border-box;
    }

        .search-box input:focus[b-vilv4fsi27] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

.search-icon[b-vilv4fsi27] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 18px;
    pointer-events: none;
}

/* =====================================================
   TABLA
   ===================================================== */

.table-card[b-vilv4fsi27] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.table-header[b-vilv4fsi27] {
    padding: 17px 20px;
    border-bottom: 1px solid #e5e7eb;
}

    .table-header > div[b-vilv4fsi27] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .table-header strong[b-vilv4fsi27] {
        font-size: 15px;
        color: #111827;
    }

.record-count[b-vilv4fsi27] {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 999px;
}

.table-responsive[b-vilv4fsi27] {
    width: 100%;
    overflow-x: auto;
}

.data-table[b-vilv4fsi27] {
    width: 100%;
    border-collapse: collapse;
    min-width: 850px;
}

    .data-table th[b-vilv4fsi27] {
        padding: 12px 20px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        color: #6b7280;
        letter-spacing: .04em;
    }

    .data-table td[b-vilv4fsi27] {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f1f3;
        vertical-align: middle;
        font-size: 14px;
        color: #374151;
    }

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

    .data-table tbody tr:hover[b-vilv4fsi27] {
        background: #fafafa;
    }

.code-badge[b-vilv4fsi27] {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    font-family: Consolas, monospace;
}

.name-cell strong[b-vilv4fsi27] {
    color: #111827;
    font-weight: 600;
}

.description-cell[b-vilv4fsi27] {
    color: #6b7280;
}

.actions-column[b-vilv4fsi27] {
    width: 150px;
    text-align: center !important;
}

.actions[b-vilv4fsi27] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.action-btn[b-vilv4fsi27] {
    width: 34px;
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: white;
    cursor: pointer;
    transition: all .2s ease;
}

    .action-btn.edit[b-vilv4fsi27] {
        color: #2563eb;
    }

        .action-btn.edit:hover[b-vilv4fsi27] {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

    .action-btn.deactivate[b-vilv4fsi27] {
        color: #d97706;
    }

        .action-btn.deactivate:hover[b-vilv4fsi27] {
            background: #fffbeb;
            border-color: #fde68a;
        }

    .action-btn.activate[b-vilv4fsi27] {
        color: #16a34a;
    }

        .action-btn.activate:hover[b-vilv4fsi27] {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }

    .action-btn.delete[b-vilv4fsi27] {
        color: #dc2626;
    }

        .action-btn.delete:hover[b-vilv4fsi27] {
            background: #fef2f2;
            border-color: #fecaca;
        }

/* =====================================================
   ESTADOS
   ===================================================== */

.status[b-vilv4fsi27] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

    .status.active[b-vilv4fsi27] {
        background: #ecfdf5;
        color: #047857;
    }

    .status.inactive[b-vilv4fsi27] {
        background: #f3f4f6;
        color: #6b7280;
    }

/* =====================================================
   LOADING / EMPTY
   ===================================================== */

.loading-state[b-vilv4fsi27] {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6b7280;
}

.spinner[b-vilv4fsi27] {
    width: 20px;
    height: 20px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-vilv4fsi27 .8s linear infinite;
}

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

.empty-state[b-vilv4fsi27] {
    padding: 70px 20px;
    text-align: center;
}

.empty-icon[b-vilv4fsi27] {
    font-size: 42px;
    color: #9ca3af;
    margin-bottom: 12px;
}

.empty-state h3[b-vilv4fsi27] {
    margin: 0;
    font-size: 17px;
    color: #111827;
}

.empty-state p[b-vilv4fsi27] {
    margin: 7px 0 20px;
    color: #6b7280;
    font-size: 14px;
}

/* =====================================================
   ALERTAS
   ===================================================== */

.alert-error[b-vilv4fsi27] {
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 14px;
}

/* =====================================================
   MODAL
   ===================================================== */

.modal-backdrop[b-vilv4fsi27] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(17, 24, 39, .48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-container[b-vilv4fsi27] {
    width: min(600px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .20);
}

.modal-header[b-vilv4fsi27] {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 22px;
    border-bottom: 1px solid #e5e7eb;
}

    .modal-header h2[b-vilv4fsi27] {
        margin: 0;
        color: #111827;
        font-size: 20px;
    }

    .modal-header p[b-vilv4fsi27] {
        margin: 5px 0 0;
        color: #6b7280;
        font-size: 13px;
    }

.modal-close[b-vilv4fsi27] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 22px;
    cursor: pointer;
}

    .modal-close:hover[b-vilv4fsi27] {
        background: #e5e7eb;
    }

.modal-body[b-vilv4fsi27] {
    padding: 22px;
}

.form-grid[b-vilv4fsi27] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group[b-vilv4fsi27] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .form-group.full-width[b-vilv4fsi27] {
        grid-column: 1 / -1;
    }

    .form-group label[b-vilv4fsi27] {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

        .form-group label span[b-vilv4fsi27] {
            color: #dc2626;
        }

    .form-group input[b-vilv4fsi27],
    .form-group textarea[b-vilv4fsi27] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 10px 12px;
        font-family: inherit;
        font-size: 14px;
        color: #111827;
        outline: none;
    }

    .form-group textarea[b-vilv4fsi27] {
        resize: vertical;
    }

        .form-group input:focus[b-vilv4fsi27],
        .form-group textarea:focus[b-vilv4fsi27] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

    .form-group small[b-vilv4fsi27] {
        font-size: 11px;
        color: #6b7280;
    }

.switch-label[b-vilv4fsi27] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

    .switch-label input[b-vilv4fsi27] {
        width: 17px;
        height: 17px;
        accent-color: #2563eb;
    }

.modal-footer[b-vilv4fsi27] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e5e7eb;
}

/* =====================================================
   CONFIRMACIÓN
   ===================================================== */

.confirm-dialog[b-vilv4fsi27] {
    width: min(430px, 100%);
    background: white;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .20);
}

.confirm-icon[b-vilv4fsi27] {
    width: 48px;
    height: 48px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    font-size: 24px;
    font-weight: 700;
}

.confirm-dialog h2[b-vilv4fsi27] {
    margin: 0;
    color: #111827;
    font-size: 20px;
}

.confirm-dialog p[b-vilv4fsi27] {
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

.warning-text[b-vilv4fsi27] {
    color: #b91c1c !important;
}

.confirm-actions[b-vilv4fsi27] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

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

@media (max-width: 768px) {

    .puestos-page[b-vilv4fsi27] {
        padding: 18px;
    }

    .page-header[b-vilv4fsi27] {
        flex-direction: column;
    }

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

    .search-box[b-vilv4fsi27] {
        width: 100%;
    }

    .toolbar .btn-primary[b-vilv4fsi27] {
        width: 100%;
    }

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

    .form-group.full-width[b-vilv4fsi27] {
        grid-column: auto;
    }

    .modal-backdrop[b-vilv4fsi27] {
        padding: 10px;
    }

    .modal-footer[b-vilv4fsi27] {
        flex-direction: column-reverse;
    }

        .modal-footer button[b-vilv4fsi27] {
            width: 100%;
        }

    .confirm-actions[b-vilv4fsi27] {
        flex-direction: column-reverse;
    }

        .confirm-actions button[b-vilv4fsi27] {
            width: 100%;
        }
}
/* /Components/Pages/TalentoHumano/Catalogos/RegimenesTrabajo.razor.rz.scp.css */
/* CSS para RegimenesTrabajo */

/* ==========================================================
   PÁGINA
   ========================================================== */

.regimenes-trabajo-page[b-9bzf2x6tsv] {
    padding: 28px;
    max-width: 1500px;
    margin: 0 auto;
}


/* ==========================================================
   HEADER
   ========================================================== */

.page-header[b-9bzf2x6tsv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
}

.breadcrumb[b-9bzf2x6tsv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

    .breadcrumb span[b-9bzf2x6tsv] {
        color: #9ca3af;
    }

.page-header h1[b-9bzf2x6tsv] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #111827;
}

.page-description[b-9bzf2x6tsv] {
    margin: 7px 0 0;
    color: #6b7280;
    font-size: 14px;
}


/* ==========================================================
   BOTONES
   ========================================================== */

.btn-primary[b-9bzf2x6tsv],
.btn-secondary[b-9bzf2x6tsv],
.btn-danger[b-9bzf2x6tsv] {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.btn-primary[b-9bzf2x6tsv] {
    background: #2563eb;
    color: white;
}

    .btn-primary:hover[b-9bzf2x6tsv] {
        background: #1d4ed8;
    }

    .btn-primary:disabled[b-9bzf2x6tsv] {
        opacity: .6;
        cursor: not-allowed;
    }

.btn-secondary[b-9bzf2x6tsv] {
    background: #f3f4f6;
    color: #374151;
}

    .btn-secondary:hover[b-9bzf2x6tsv] {
        background: #e5e7eb;
    }

.btn-danger[b-9bzf2x6tsv] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover[b-9bzf2x6tsv] {
        background: #b91c1c;
    }

    .btn-danger:disabled[b-9bzf2x6tsv] {
        opacity: .6;
        cursor: not-allowed;
    }


/* ==========================================================
   TOOLBAR
   ========================================================== */

.toolbar[b-9bzf2x6tsv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.search-box[b-9bzf2x6tsv] {
    position: relative;
    width: 400px;
}

    .search-box input[b-9bzf2x6tsv] {
        width: 100%;
        height: 42px;
        padding: 0 14px 0 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: white;
        color: #111827;
        font-size: 14px;
        outline: none;
        box-sizing: border-box;
    }

        .search-box input:focus[b-9bzf2x6tsv] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

.search-icon[b-9bzf2x6tsv] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 18px;
    pointer-events: none;
}


/* ==========================================================
   TABLA
   ========================================================== */

.table-card[b-9bzf2x6tsv] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.table-header[b-9bzf2x6tsv] {
    padding: 17px 20px;
    border-bottom: 1px solid #e5e7eb;
}

    .table-header > div[b-9bzf2x6tsv] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .table-header strong[b-9bzf2x6tsv] {
        font-size: 15px;
        color: #111827;
    }

.record-count[b-9bzf2x6tsv] {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 999px;
}

.table-responsive[b-9bzf2x6tsv] {
    width: 100%;
    overflow-x: auto;
}

.data-table[b-9bzf2x6tsv] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

    .data-table th[b-9bzf2x6tsv] {
        padding: 12px 20px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        color: #6b7280;
        letter-spacing: .04em;
    }

    .data-table td[b-9bzf2x6tsv] {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f1f3;
        vertical-align: middle;
        font-size: 14px;
        color: #374151;
    }

    .data-table tbody tr:last-child td[b-9bzf2x6tsv] {
        border-bottom: none;
    }

    .data-table tbody tr:hover[b-9bzf2x6tsv] {
        background: #fafafa;
    }


/* ==========================================================
   CÓDIGO
   ========================================================== */

.code-badge[b-9bzf2x6tsv] {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    font-family: Consolas, monospace;
}


/* ==========================================================
   NOMBRE Y DESCRIPCIÓN
   ========================================================== */

.name-cell strong[b-9bzf2x6tsv] {
    color: #111827;
    font-weight: 600;
}

.description-cell[b-9bzf2x6tsv] {
    color: #6b7280;
}


/* ==========================================================
   ACCIONES
   ========================================================== */

.actions-column[b-9bzf2x6tsv] {
    width: 150px;
    text-align: center !important;
}

.actions[b-9bzf2x6tsv] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.action-btn[b-9bzf2x6tsv] {
    width: 34px;
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: white;
    cursor: pointer;
    transition: all .2s ease;
}

    .action-btn.edit[b-9bzf2x6tsv] {
        color: #2563eb;
    }

        .action-btn.edit:hover[b-9bzf2x6tsv] {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

    .action-btn.deactivate[b-9bzf2x6tsv] {
        color: #d97706;
    }

        .action-btn.deactivate:hover[b-9bzf2x6tsv] {
            background: #fffbeb;
            border-color: #fde68a;
        }

    .action-btn.activate[b-9bzf2x6tsv] {
        color: #16a34a;
    }

        .action-btn.activate:hover[b-9bzf2x6tsv] {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }

    .action-btn.delete[b-9bzf2x6tsv] {
        color: #dc2626;
    }

        .action-btn.delete:hover[b-9bzf2x6tsv] {
            background: #fef2f2;
            border-color: #fecaca;
        }


/* ==========================================================
   ESTADO
   ========================================================== */

.status[b-9bzf2x6tsv] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

    .status.active[b-9bzf2x6tsv] {
        background: #ecfdf5;
        color: #047857;
    }

    .status.inactive[b-9bzf2x6tsv] {
        background: #f3f4f6;
        color: #6b7280;
    }


/* ==========================================================
   CARGANDO
   ========================================================== */

.loading-state[b-9bzf2x6tsv] {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6b7280;
}

.spinner[b-9bzf2x6tsv] {
    width: 20px;
    height: 20px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: regimen-spin-b-9bzf2x6tsv .8s linear infinite;
}

@keyframes regimen-spin-b-9bzf2x6tsv {

    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================
   VACÍO
   ========================================================== */

.empty-state[b-9bzf2x6tsv] {
    padding: 70px 20px;
    text-align: center;
}

.empty-icon[b-9bzf2x6tsv] {
    font-size: 42px;
    color: #9ca3af;
    margin-bottom: 12px;
}

.empty-state h3[b-9bzf2x6tsv] {
    margin: 0;
    font-size: 17px;
    color: #111827;
}

.empty-state p[b-9bzf2x6tsv] {
    margin: 7px 0 20px;
    color: #6b7280;
    font-size: 14px;
}


/* ==========================================================
   ALERTAS
   ========================================================== */

.alert-error[b-9bzf2x6tsv] {
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 14px;
}


/* ==========================================================
   MODAL
   ========================================================== */

.modal-backdrop[b-9bzf2x6tsv] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(17, 24, 39, .48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-container[b-9bzf2x6tsv] {
    width: min(650px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .20);
}

.modal-header[b-9bzf2x6tsv] {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 22px;
    border-bottom: 1px solid #e5e7eb;
}

    .modal-header h2[b-9bzf2x6tsv] {
        margin: 0;
        color: #111827;
        font-size: 20px;
    }

    .modal-header p[b-9bzf2x6tsv] {
        margin: 5px 0 0;
        color: #6b7280;
        font-size: 13px;
    }

.modal-close[b-9bzf2x6tsv] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 22px;
    cursor: pointer;
}

    .modal-close:hover[b-9bzf2x6tsv] {
        background: #e5e7eb;
    }

.modal-body[b-9bzf2x6tsv] {
    padding: 22px;
}


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

.form-grid[b-9bzf2x6tsv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group[b-9bzf2x6tsv] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .form-group.full-width[b-9bzf2x6tsv] {
        grid-column: 1 / -1;
    }

    .form-group label[b-9bzf2x6tsv] {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

        .form-group label span[b-9bzf2x6tsv] {
            color: #dc2626;
        }

    .form-group input[b-9bzf2x6tsv],
    .form-group textarea[b-9bzf2x6tsv] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 10px 12px;
        font-family: inherit;
        font-size: 14px;
        color: #111827;
        outline: none;
    }

    .form-group textarea[b-9bzf2x6tsv] {
        resize: vertical;
    }

        .form-group input:focus[b-9bzf2x6tsv],
        .form-group textarea:focus[b-9bzf2x6tsv] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

    .form-group small[b-9bzf2x6tsv] {
        font-size: 11px;
        color: #6b7280;
    }


/* ==========================================================
   ESTADO ACTIVO
   ========================================================== */

.switch-label[b-9bzf2x6tsv] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

    .switch-label input[b-9bzf2x6tsv] {
        width: 17px;
        height: 17px;
        accent-color: #2563eb;
    }


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

.modal-footer[b-9bzf2x6tsv] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e5e7eb;
}


/* ==========================================================
   CONFIRMACIÓN
   ========================================================== */

.confirm-dialog[b-9bzf2x6tsv] {
    width: min(430px, 100%);
    background: white;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .20);
}

.confirm-icon[b-9bzf2x6tsv] {
    width: 48px;
    height: 48px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    font-size: 24px;
    font-weight: 700;
}

.confirm-dialog h2[b-9bzf2x6tsv] {
    margin: 0;
    color: #111827;
    font-size: 20px;
}

.confirm-dialog p[b-9bzf2x6tsv] {
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

.warning-text[b-9bzf2x6tsv] {
    color: #b91c1c !important;
}

.confirm-actions[b-9bzf2x6tsv] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}


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

@media (max-width: 768px) {

    .regimenes-trabajo-page[b-9bzf2x6tsv] {
        padding: 18px;
    }

    .page-header[b-9bzf2x6tsv] {
        flex-direction: column;
    }

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

    .search-box[b-9bzf2x6tsv] {
        width: 100%;
    }

    .toolbar .btn-primary[b-9bzf2x6tsv] {
        width: 100%;
    }

    .form-grid[b-9bzf2x6tsv] {
        grid-template-columns: 1fr;
    }

    .form-group.full-width[b-9bzf2x6tsv] {
        grid-column: auto;
    }

    .modal-backdrop[b-9bzf2x6tsv] {
        padding: 10px;
    }

    .modal-footer[b-9bzf2x6tsv] {
        flex-direction: column-reverse;
    }

        .modal-footer button[b-9bzf2x6tsv] {
            width: 100%;
        }

    .confirm-actions[b-9bzf2x6tsv] {
        flex-direction: column-reverse;
    }

        .confirm-actions button[b-9bzf2x6tsv] {
            width: 100%;
        }
}
/* /Components/Pages/TalentoHumano/Catalogos/RegimenLaboral.razor.rz.scp.css */

/* ==========================================================
   SERCOM ERP - RÉGIMEN LABORAL
   ========================================================== */

/* PÁGINA */

.regimenes-trabajo-page[b-ue4ox7eacg],
.regimen-laboral-page[b-ue4ox7eacg] {
    box-sizing: border-box;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px;
    color: #111827;
    background: #ffffff;
    font-family: inherit;
}

    .regimenes-trabajo-page *[b-ue4ox7eacg],
    .regimen-laboral-page *[b-ue4ox7eacg] {
        box-sizing: border-box;
    }

/* ENCABEZADO */

.page-header[b-ue4ox7eacg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
}

.breadcrumb[b-ue4ox7eacg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #6b7280;
    font-size: 13px;
}

    .breadcrumb span[b-ue4ox7eacg] {
        color: #9ca3af;
    }

.page-header h1[b-ue4ox7eacg] {
    margin: 0;
    color: #111827;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}

.page-description[b-ue4ox7eacg] {
    margin: 7px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

/* BOTONES */

.btn-primary[b-ue4ox7eacg],
.btn-secondary[b-ue4ox7eacg],
.btn-danger[b-ue4ox7eacg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.btn-primary[b-ue4ox7eacg] {
    background: #2563eb;
    color: #ffffff;
}

    .btn-primary:hover[b-ue4ox7eacg] {
        background: #1d4ed8;
    }

.btn-secondary[b-ue4ox7eacg] {
    background: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}

    .btn-secondary:hover[b-ue4ox7eacg] {
        background: #f9fafb;
        border-color: #9ca3af;
    }

.btn-danger[b-ue4ox7eacg] {
    background: #dc2626;
    color: #ffffff;
}

    .btn-danger:hover[b-ue4ox7eacg] {
        background: #b91c1c;
    }

    .btn-primary:disabled[b-ue4ox7eacg],
    .btn-secondary:disabled[b-ue4ox7eacg],
    .btn-danger:disabled[b-ue4ox7eacg] {
        opacity: .6;
        cursor: not-allowed;
    }

/* BÚSQUEDA Y BARRA DE ACCIONES */

.toolbar[b-ue4ox7eacg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.search-box[b-ue4ox7eacg] {
    position: relative;
    width: 400px;
    max-width: 100%;
}

    .search-box input[b-ue4ox7eacg] {
        display: block;
        width: 100%;
        height: 42px;
        padding: 0 14px 0 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        color: #111827;
        font-family: inherit;
        font-size: 14px;
        outline: none;
    }

        .search-box input[b-ue4ox7eacg]::placeholder {
            color: #9ca3af;
        }

        .search-box input:focus[b-ue4ox7eacg] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

.search-icon[b-ue4ox7eacg] {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 18px;
    pointer-events: none;
}

/* TABLA */

.table-card[b-ue4ox7eacg] {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.table-header[b-ue4ox7eacg] {
    padding: 17px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

    .table-header > div[b-ue4ox7eacg] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .table-header strong[b-ue4ox7eacg] {
        color: #111827;
        font-size: 15px;
    }

.record-count[b-ue4ox7eacg] {
    padding: 4px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
}

.table-responsive[b-ue4ox7eacg] {
    width: 100%;
    overflow-x: auto;
}

.data-table[b-ue4ox7eacg] {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    background: #ffffff;
}

    .data-table th[b-ue4ox7eacg] {
        padding: 13px 20px;
        border-bottom: 1px solid #e5e7eb;
        background: #f9fafb;
        color: #6b7280;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .data-table td[b-ue4ox7eacg] {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f1f3;
        color: #374151;
        font-size: 14px;
        vertical-align: middle;
    }

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

    .data-table tbody tr:hover[b-ue4ox7eacg] {
        background: #fafafa;
    }

/* CÓDIGO Y DESCRIPCIÓN */

.code-badge[b-ue4ox7eacg] {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    font-family: Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
}

.name-cell strong[b-ue4ox7eacg] {
    color: #111827;
    font-weight: 600;
}

.description-cell[b-ue4ox7eacg] {
    color: #6b7280;
    line-height: 1.5;
}

/* ESTADOS */

.status[b-ue4ox7eacg] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    .status.active[b-ue4ox7eacg] {
        background: #ecfdf5;
        color: #047857;
    }

    .status.inactive[b-ue4ox7eacg] {
        background: #f3f4f6;
        color: #6b7280;
    }

/* ACCIONES DE LA TABLA */

.actions-column[b-ue4ox7eacg] {
    text-align: center !important;
}

.actions[b-ue4ox7eacg] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.action-btn[b-ue4ox7eacg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

    .action-btn.edit[b-ue4ox7eacg] {
        color: #2563eb;
    }

        .action-btn.edit:hover[b-ue4ox7eacg] {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

    .action-btn.deactivate[b-ue4ox7eacg] {
        color: #d97706;
    }

        .action-btn.deactivate:hover[b-ue4ox7eacg] {
            background: #fffbeb;
            border-color: #fde68a;
        }

    .action-btn.activate[b-ue4ox7eacg] {
        color: #16a34a;
    }

        .action-btn.activate:hover[b-ue4ox7eacg] {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }

    .action-btn.delete[b-ue4ox7eacg] {
        color: #dc2626;
    }

        .action-btn.delete:hover[b-ue4ox7eacg] {
            background: #fef2f2;
            border-color: #fecaca;
        }

/* CARGA */

.loading-state[b-ue4ox7eacg] {
    display: flex;
    min-height: 300px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6b7280;
    background: #ffffff;
}

.spinner[b-ue4ox7eacg] {
    width: 22px;
    height: 22px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: regimen-laboral-girar-b-ue4ox7eacg .8s linear infinite;
}

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

/* ESTADO VACÍO */

.empty-state[b-ue4ox7eacg] {
    padding: 65px 20px;
    background: #ffffff;
    text-align: center;
}

.empty-icon[b-ue4ox7eacg] {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 18px;
    font-weight: 800;
}

.empty-state h3[b-ue4ox7eacg] {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 600;
}

.empty-state p[b-ue4ox7eacg] {
    margin: 8px 0 20px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

/* MENSAJES DE ERROR */

.alert-error[b-ue4ox7eacg] {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ==========================================================
   MODAL DE REGISTRO Y EDICIÓN
   Estas clases coinciden con RegimenLaboral.razor
   ========================================================== */

.modal-backdrop[b-ue4ox7eacg] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 24px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}

.modal-container[b-ue4ox7eacg] {
    position: relative;
    width: 100%;
    max-width: 650px;
    max-height: calc(100vh - 48px);
    margin: auto;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
}

.modal-header[b-ue4ox7eacg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

    .modal-header h2[b-ue4ox7eacg] {
        margin: 0;
        color: #111827;
        font-size: 21px;
        font-weight: 700;
        line-height: 1.35;
    }

    .modal-header p[b-ue4ox7eacg] {
        margin: 6px 0 0;
        color: #6b7280;
        font-size: 13px;
        line-height: 1.5;
    }

.modal-close[b-ue4ox7eacg] {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

    .modal-close:hover[b-ue4ox7eacg] {
        background: #e5e7eb;
    }

    .modal-close:disabled[b-ue4ox7eacg] {
        opacity: .5;
        cursor: not-allowed;
    }

.modal-body[b-ue4ox7eacg] {
    padding: 24px;
    background: #ffffff;
}

/* FORMULARIO DEL MODAL */

.form-grid[b-ue4ox7eacg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.form-group[b-ue4ox7eacg] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-ue4ox7eacg] {
        grid-column: 1 / -1;
    }

    .form-group label[b-ue4ox7eacg] {
        margin: 0;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
    }

        .form-group label span[b-ue4ox7eacg] {
            color: #dc2626;
        }

    .form-group input:not([type="checkbox"])[b-ue4ox7eacg],
    .form-group textarea[b-ue4ox7eacg] {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 11px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        color: #111827;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.5;
        outline: none;
        box-shadow: none;
    }

    .form-group input:not([type="checkbox"])[b-ue4ox7eacg] {
        height: 44px;
    }

    .form-group textarea[b-ue4ox7eacg] {
        min-height: 110px;
        resize: vertical;
    }

        .form-group input[b-ue4ox7eacg]::placeholder,
        .form-group textarea[b-ue4ox7eacg]::placeholder {
            color: #9ca3af;
        }

        .form-group input:not([type="checkbox"]):focus[b-ue4ox7eacg],
        .form-group textarea:focus[b-ue4ox7eacg] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

    .form-group small[b-ue4ox7eacg] {
        color: #6b7280;
        font-size: 11px;
        line-height: 1.5;
    }

/* CASILLA DE ESTADO */

.switch-label[b-ue4ox7eacg] {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .switch-label input[type="checkbox"][b-ue4ox7eacg] {
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: #2563eb;
    }

/* PIE DEL MODAL */

.modal-footer[b-ue4ox7eacg] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 17px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* ==========================================================
   MODAL DE CONFIRMACIÓN
   ========================================================== */

.confirm-dialog[b-ue4ox7eacg] {
    width: 100%;
    max-width: 430px;
    margin: auto;
    padding: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
}

.confirm-icon[b-ue4ox7eacg] {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    font-size: 24px;
    font-weight: 700;
}

.confirm-dialog h2[b-ue4ox7eacg] {
    margin: 0;
    color: #111827;
    font-size: 20px;
    font-weight: 700;
}

.confirm-dialog p[b-ue4ox7eacg] {
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.confirm-dialog .warning-text[b-ue4ox7eacg] {
    color: #b91c1c;
}

.confirm-actions[b-ue4ox7eacg] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

/* ==========================================================
   DISEÑO RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {
    .regimenes-trabajo-page[b-ue4ox7eacg],
    .regimen-laboral-page[b-ue4ox7eacg] {
        padding: 18px;
    }

    .page-header[b-ue4ox7eacg] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

        .page-header .btn-secondary[b-ue4ox7eacg] {
            align-self: flex-start;
        }

        .page-header h1[b-ue4ox7eacg] {
            font-size: 24px;
        }

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

    .search-box[b-ue4ox7eacg] {
        width: 100%;
    }

    .toolbar > .btn-primary[b-ue4ox7eacg] {
        width: 100%;
    }

    .table-header[b-ue4ox7eacg] {
        padding: 15px;
    }

    .empty-state[b-ue4ox7eacg] {
        padding: 45px 16px;
    }

    .modal-backdrop[b-ue4ox7eacg] {
        align-items: center;
        padding: 12px;
    }

    .modal-container[b-ue4ox7eacg] {
        max-height: calc(100vh - 24px);
    }

    .modal-header[b-ue4ox7eacg],
    .modal-body[b-ue4ox7eacg] {
        padding: 18px;
    }

    .form-grid[b-ue4ox7eacg] {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .form-group.full-width[b-ue4ox7eacg] {
        grid-column: auto;
    }

    .modal-footer[b-ue4ox7eacg] {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 16px 18px;
    }

        .modal-footer button[b-ue4ox7eacg] {
            width: 100%;
        }

    .confirm-dialog[b-ue4ox7eacg] {
        padding: 22px;
    }

    .confirm-actions[b-ue4ox7eacg] {
        flex-direction: column-reverse;
    }

        .confirm-actions button[b-ue4ox7eacg] {
            width: 100%;
        }
}
/* /Components/Pages/TalentoHumano/Catalogos/Sedes.razor.rz.scp.css */
/* CSS for Sedes component */
.sedes-page[b-k35yyp6fkd] {
    padding: 28px;
    max-width: 1500px;
    margin: 0 auto;
}

/* HEADER */

.page-header[b-k35yyp6fkd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
}

.breadcrumb[b-k35yyp6fkd] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

    .breadcrumb span[b-k35yyp6fkd] {
        color: #9ca3af;
    }

.page-header h1[b-k35yyp6fkd] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #111827;
}

.page-description[b-k35yyp6fkd] {
    margin: 7px 0 0;
    color: #6b7280;
    font-size: 14px;
}

/* BOTONES */

.btn-primary[b-k35yyp6fkd],
.btn-secondary[b-k35yyp6fkd],
.btn-danger[b-k35yyp6fkd] {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.btn-primary[b-k35yyp6fkd] {
    background: #2563eb;
    color: white;
}

    .btn-primary:hover[b-k35yyp6fkd] {
        background: #1d4ed8;
    }

    .btn-primary:disabled[b-k35yyp6fkd] {
        opacity: .6;
        cursor: not-allowed;
    }

.btn-secondary[b-k35yyp6fkd] {
    background: #f3f4f6;
    color: #374151;
}

    .btn-secondary:hover[b-k35yyp6fkd] {
        background: #e5e7eb;
    }

.btn-danger[b-k35yyp6fkd] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover[b-k35yyp6fkd] {
        background: #b91c1c;
    }

    .btn-danger:disabled[b-k35yyp6fkd] {
        opacity: .6;
        cursor: not-allowed;
    }

/* TOOLBAR */

.toolbar[b-k35yyp6fkd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.search-box[b-k35yyp6fkd] {
    position: relative;
    width: 400px;
}

    .search-box input[b-k35yyp6fkd] {
        width: 100%;
        height: 42px;
        padding: 0 14px 0 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: white;
        color: #111827;
        font-size: 14px;
        outline: none;
        box-sizing: border-box;
    }

        .search-box input:focus[b-k35yyp6fkd] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

.search-icon[b-k35yyp6fkd] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 18px;
    pointer-events: none;
}

/* TABLA */

.table-card[b-k35yyp6fkd] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.table-header[b-k35yyp6fkd] {
    padding: 17px 20px;
    border-bottom: 1px solid #e5e7eb;
}

    .table-header > div[b-k35yyp6fkd] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .table-header strong[b-k35yyp6fkd] {
        font-size: 15px;
        color: #111827;
    }

.record-count[b-k35yyp6fkd] {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 999px;
}

.table-responsive[b-k35yyp6fkd] {
    width: 100%;
    overflow-x: auto;
}

.data-table[b-k35yyp6fkd] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

    .data-table th[b-k35yyp6fkd] {
        padding: 12px 20px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        color: #6b7280;
        letter-spacing: .04em;
    }

    .data-table td[b-k35yyp6fkd] {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f1f3;
        vertical-align: middle;
        font-size: 14px;
        color: #374151;
    }

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

    .data-table tbody tr:hover[b-k35yyp6fkd] {
        background: #fafafa;
    }

.code-badge[b-k35yyp6fkd] {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    font-family: Consolas, monospace;
}

.name-cell strong[b-k35yyp6fkd] {
    color: #111827;
    font-weight: 600;
}

.address-cell[b-k35yyp6fkd],
.description-cell[b-k35yyp6fkd] {
    color: #6b7280;
}

.actions-column[b-k35yyp6fkd] {
    width: 150px;
    text-align: center !important;
}

.actions[b-k35yyp6fkd] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.action-btn[b-k35yyp6fkd] {
    width: 34px;
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: white;
    cursor: pointer;
    transition: all .2s ease;
}

    .action-btn.edit[b-k35yyp6fkd] {
        color: #2563eb;
    }

        .action-btn.edit:hover[b-k35yyp6fkd] {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

    .action-btn.deactivate[b-k35yyp6fkd] {
        color: #d97706;
    }

        .action-btn.deactivate:hover[b-k35yyp6fkd] {
            background: #fffbeb;
            border-color: #fde68a;
        }

    .action-btn.activate[b-k35yyp6fkd] {
        color: #16a34a;
    }

        .action-btn.activate:hover[b-k35yyp6fkd] {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }

    .action-btn.delete[b-k35yyp6fkd] {
        color: #dc2626;
    }

        .action-btn.delete:hover[b-k35yyp6fkd] {
            background: #fef2f2;
            border-color: #fecaca;
        }

/* ESTADO */

.status[b-k35yyp6fkd] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

    .status.active[b-k35yyp6fkd] {
        background: #ecfdf5;
        color: #047857;
    }

    .status.inactive[b-k35yyp6fkd] {
        background: #f3f4f6;
        color: #6b7280;
    }

/* LOADING */

.loading-state[b-k35yyp6fkd] {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6b7280;
}

.spinner[b-k35yyp6fkd] {
    width: 20px;
    height: 20px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-k35yyp6fkd .8s linear infinite;
}

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

/* VACÍO */

.empty-state[b-k35yyp6fkd] {
    padding: 70px 20px;
    text-align: center;
}

.empty-icon[b-k35yyp6fkd] {
    font-size: 42px;
    color: #9ca3af;
    margin-bottom: 12px;
}

.empty-state h3[b-k35yyp6fkd] {
    margin: 0;
    font-size: 17px;
    color: #111827;
}

.empty-state p[b-k35yyp6fkd] {
    margin: 7px 0 20px;
    color: #6b7280;
    font-size: 14px;
}

/* ALERTAS */

.alert-error[b-k35yyp6fkd] {
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 14px;
}

/* MODAL */

.modal-backdrop[b-k35yyp6fkd] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(17, 24, 39, .48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-container[b-k35yyp6fkd] {
    width: min(650px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .20);
}

.modal-header[b-k35yyp6fkd] {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 22px;
    border-bottom: 1px solid #e5e7eb;
}

    .modal-header h2[b-k35yyp6fkd] {
        margin: 0;
        color: #111827;
        font-size: 20px;
    }

    .modal-header p[b-k35yyp6fkd] {
        margin: 5px 0 0;
        color: #6b7280;
        font-size: 13px;
    }

.modal-close[b-k35yyp6fkd] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 22px;
    cursor: pointer;
}

    .modal-close:hover[b-k35yyp6fkd] {
        background: #e5e7eb;
    }

.modal-body[b-k35yyp6fkd] {
    padding: 22px;
}

/* FORMULARIO */

.form-grid[b-k35yyp6fkd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group[b-k35yyp6fkd] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .form-group.full-width[b-k35yyp6fkd] {
        grid-column: 1 / -1;
    }

    .form-group label[b-k35yyp6fkd] {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

        .form-group label span[b-k35yyp6fkd] {
            color: #dc2626;
        }

    .form-group input[b-k35yyp6fkd],
    .form-group textarea[b-k35yyp6fkd] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 10px 12px;
        font-family: inherit;
        font-size: 14px;
        color: #111827;
        outline: none;
    }

    .form-group textarea[b-k35yyp6fkd] {
        resize: vertical;
    }

        .form-group input:focus[b-k35yyp6fkd],
        .form-group textarea:focus[b-k35yyp6fkd] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

    .form-group small[b-k35yyp6fkd] {
        font-size: 11px;
        color: #6b7280;
    }

.switch-label[b-k35yyp6fkd] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

    .switch-label input[b-k35yyp6fkd] {
        width: 17px;
        height: 17px;
        accent-color: #2563eb;
    }

.modal-footer[b-k35yyp6fkd] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e5e7eb;
}

/* CONFIRMACIÓN */

.confirm-dialog[b-k35yyp6fkd] {
    width: min(430px, 100%);
    background: white;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .20);
}

.confirm-icon[b-k35yyp6fkd] {
    width: 48px;
    height: 48px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    font-size: 24px;
    font-weight: 700;
}

.confirm-dialog h2[b-k35yyp6fkd] {
    margin: 0;
    color: #111827;
    font-size: 20px;
}

.confirm-dialog p[b-k35yyp6fkd] {
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

.warning-text[b-k35yyp6fkd] {
    color: #b91c1c !important;
}

.confirm-actions[b-k35yyp6fkd] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .sedes-page[b-k35yyp6fkd] {
        padding: 18px;
    }

    .page-header[b-k35yyp6fkd] {
        flex-direction: column;
    }

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

    .search-box[b-k35yyp6fkd] {
        width: 100%;
    }

    .toolbar .btn-primary[b-k35yyp6fkd] {
        width: 100%;
    }

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

    .form-group.full-width[b-k35yyp6fkd] {
        grid-column: auto;
    }

    .modal-backdrop[b-k35yyp6fkd] {
        padding: 10px;
    }

    .modal-footer[b-k35yyp6fkd] {
        flex-direction: column-reverse;
    }

        .modal-footer button[b-k35yyp6fkd] {
            width: 100%;
        }

    .confirm-actions[b-k35yyp6fkd] {
        flex-direction: column-reverse;
    }

        .confirm-actions button[b-k35yyp6fkd] {
            width: 100%;
        }
}
/* /Components/Pages/TalentoHumano/Catalogos/TipoContrato.razor.rz.scp.css */
/* CSS for TipoContrato component */

/* ==========================================================
   SERCOM ERP - TIPOS DE CONTRATO
   ========================================================== */

.tipo-contrato-page[b-07lm19uy3b] {
    box-sizing: border-box;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px;
    color: #111827;
    background: #ffffff;
}

    .tipo-contrato-page *[b-07lm19uy3b],
    .tc-modal-backdrop *[b-07lm19uy3b] {
        box-sizing: border-box;
    }

/* ENCABEZADO */

.page-header[b-07lm19uy3b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
}

.breadcrumb[b-07lm19uy3b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #6b7280;
    font-size: 13px;
}

    .breadcrumb span[b-07lm19uy3b] {
        color: #9ca3af;
    }

.page-header h1[b-07lm19uy3b] {
    margin: 0;
    color: #111827;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}

.page-description[b-07lm19uy3b] {
    margin: 7px 0 0;
    color: #6b7280;
    font-size: 14px;
}

/* BOTONES */

.btn-primary[b-07lm19uy3b],
.btn-secondary[b-07lm19uy3b],
.btn-danger[b-07lm19uy3b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.btn-primary[b-07lm19uy3b] {
    background: #2563eb;
    color: #ffffff;
}

    .btn-primary:hover[b-07lm19uy3b] {
        background: #1d4ed8;
    }

.btn-secondary[b-07lm19uy3b] {
    background: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}

    .btn-secondary:hover[b-07lm19uy3b] {
        background: #f9fafb;
        border-color: #9ca3af;
    }

.btn-danger[b-07lm19uy3b] {
    background: #dc2626;
    color: #ffffff;
}

    .btn-danger:hover[b-07lm19uy3b] {
        background: #b91c1c;
    }

    .btn-primary:disabled[b-07lm19uy3b],
    .btn-secondary:disabled[b-07lm19uy3b],
    .btn-danger:disabled[b-07lm19uy3b] {
        opacity: .6;
        cursor: not-allowed;
    }

/* BÚSQUEDA */

.toolbar[b-07lm19uy3b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.search-box[b-07lm19uy3b] {
    position: relative;
    width: 400px;
    max-width: 100%;
}

    .search-box input[b-07lm19uy3b] {
        display: block;
        width: 100%;
        height: 42px;
        padding: 0 14px 0 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        color: #111827;
        font-family: inherit;
        font-size: 14px;
        outline: none;
    }

        .search-box input[b-07lm19uy3b]::placeholder {
            color: #9ca3af;
        }

        .search-box input:focus[b-07lm19uy3b] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

.search-icon[b-07lm19uy3b] {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 18px;
    pointer-events: none;
}

/* TABLA */

.table-card[b-07lm19uy3b] {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.table-header[b-07lm19uy3b] {
    padding: 17px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

    .table-header > div[b-07lm19uy3b] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .table-header strong[b-07lm19uy3b] {
        color: #111827;
        font-size: 15px;
    }

.record-count[b-07lm19uy3b] {
    padding: 4px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
}

.table-responsive[b-07lm19uy3b] {
    width: 100%;
    overflow-x: auto;
}

.data-table[b-07lm19uy3b] {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    background: #ffffff;
}

    .data-table th[b-07lm19uy3b] {
        padding: 13px 20px;
        border-bottom: 1px solid #e5e7eb;
        background: #f9fafb;
        color: #6b7280;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .data-table td[b-07lm19uy3b] {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f1f3;
        color: #374151;
        font-size: 14px;
        vertical-align: middle;
    }

    .data-table tbody tr:last-child td[b-07lm19uy3b] {
        border-bottom: none;
    }

    .data-table tbody tr:hover[b-07lm19uy3b] {
        background: #fafafa;
    }

.code-badge[b-07lm19uy3b] {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    font-family: Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
}

.name-cell strong[b-07lm19uy3b] {
    color: #111827;
    font-weight: 600;
}

.description-cell[b-07lm19uy3b] {
    color: #6b7280;
    line-height: 1.5;
}

/* ESTADOS */

.status[b-07lm19uy3b] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    .status.active[b-07lm19uy3b] {
        background: #ecfdf5;
        color: #047857;
    }

    .status.inactive[b-07lm19uy3b] {
        background: #f3f4f6;
        color: #6b7280;
    }

/* ACCIONES */

.actions-column[b-07lm19uy3b] {
    text-align: center !important;
}

.actions[b-07lm19uy3b] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.action-btn[b-07lm19uy3b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #ffffff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

    .action-btn.edit[b-07lm19uy3b] {
        color: #2563eb;
    }

        .action-btn.edit:hover[b-07lm19uy3b] {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

    .action-btn.deactivate[b-07lm19uy3b] {
        color: #d97706;
    }

        .action-btn.deactivate:hover[b-07lm19uy3b] {
            background: #fffbeb;
            border-color: #fde68a;
        }

    .action-btn.activate[b-07lm19uy3b] {
        color: #16a34a;
    }

        .action-btn.activate:hover[b-07lm19uy3b] {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }

    .action-btn.delete[b-07lm19uy3b] {
        color: #dc2626;
    }

        .action-btn.delete:hover[b-07lm19uy3b] {
            background: #fef2f2;
            border-color: #fecaca;
        }

/* CARGA */

.loading-state[b-07lm19uy3b] {
    display: flex;
    min-height: 300px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6b7280;
    background: #ffffff;
}

.spinner[b-07lm19uy3b] {
    width: 22px;
    height: 22px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: tipo-contrato-girar-b-07lm19uy3b .8s linear infinite;
}

@keyframes tipo-contrato-girar-b-07lm19uy3b {
    to {
        transform: rotate(360deg);
    }
}

/* ESTADO VACÍO */

.empty-state[b-07lm19uy3b] {
    padding: 65px 20px;
    background: #ffffff;
    text-align: center;
}

.empty-icon[b-07lm19uy3b] {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 18px;
    font-weight: 800;
}

.empty-state h3[b-07lm19uy3b] {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 600;
}

.empty-state p[b-07lm19uy3b] {
    margin: 8px 0 20px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

/* MENSAJES */

.alert-error[b-07lm19uy3b] {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ==========================================================
   MODAL DE TIPO DE CONTRATO
   ========================================================== */

.tc-modal-backdrop[b-07lm19uy3b] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 24px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}

.tc-modal-container[b-07lm19uy3b] {
    position: relative;
    width: 100%;
    max-width: 650px;
    max-height: calc(100vh - 48px);
    margin: auto;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
}

.tc-modal-header[b-07lm19uy3b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

    .tc-modal-header h2[b-07lm19uy3b] {
        margin: 0;
        color: #111827;
        font-size: 21px;
        font-weight: 700;
        line-height: 1.35;
    }

    .tc-modal-header p[b-07lm19uy3b] {
        margin: 6px 0 0;
        color: #6b7280;
        font-size: 13px;
        line-height: 1.5;
    }

.tc-modal-close[b-07lm19uy3b] {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

    .tc-modal-close:hover[b-07lm19uy3b] {
        background: #e5e7eb;
    }

    .tc-modal-close:disabled[b-07lm19uy3b] {
        opacity: .5;
        cursor: not-allowed;
    }

.tc-modal-body[b-07lm19uy3b] {
    padding: 24px;
    background: #ffffff;
}

/* CAMPOS */

.form-grid[b-07lm19uy3b] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.form-group[b-07lm19uy3b] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-07lm19uy3b] {
        grid-column: 1 / -1;
    }

    .form-group label[b-07lm19uy3b] {
        margin: 0;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
    }

        .form-group label span[b-07lm19uy3b] {
            color: #dc2626;
        }

    .form-group input:not([type="checkbox"])[b-07lm19uy3b],
    .form-group textarea[b-07lm19uy3b] {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 11px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        color: #111827;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.5;
        outline: none;
        box-shadow: none;
    }

    .form-group input:not([type="checkbox"])[b-07lm19uy3b] {
        height: 44px;
    }

    .form-group textarea[b-07lm19uy3b] {
        min-height: 110px;
        resize: vertical;
    }

        .form-group input[b-07lm19uy3b]::placeholder,
        .form-group textarea[b-07lm19uy3b]::placeholder {
            color: #9ca3af;
        }

        .form-group input:not([type="checkbox"]):focus[b-07lm19uy3b],
        .form-group textarea:focus[b-07lm19uy3b] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

    .form-group small[b-07lm19uy3b] {
        color: #6b7280;
        font-size: 11px;
        line-height: 1.5;
    }

.tc-switch-label[b-07lm19uy3b] {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .tc-switch-label input[type="checkbox"][b-07lm19uy3b] {
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: #2563eb;
    }

/* PIE DEL MODAL */

.tc-modal-footer[b-07lm19uy3b] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 17px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* ==========================================================
   CONFIRMACIÓN DE ELIMINACIÓN
   ========================================================== */

.tc-confirm-dialog[b-07lm19uy3b] {
    width: 100%;
    max-width: 430px;
    margin: auto;
    padding: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
}

.tc-confirm-icon[b-07lm19uy3b] {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    font-size: 24px;
    font-weight: 700;
}

.tc-confirm-dialog h2[b-07lm19uy3b] {
    margin: 0;
    color: #111827;
    font-size: 20px;
    font-weight: 700;
}

.tc-confirm-dialog p[b-07lm19uy3b] {
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.tc-confirm-dialog .tc-warning-text[b-07lm19uy3b] {
    color: #b91c1c;
}

.tc-confirm-actions[b-07lm19uy3b] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .tipo-contrato-page[b-07lm19uy3b] {
        padding: 18px;
    }

    .page-header[b-07lm19uy3b] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

        .page-header .btn-secondary[b-07lm19uy3b] {
            align-self: flex-start;
        }

        .page-header h1[b-07lm19uy3b] {
            font-size: 24px;
        }

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

    .search-box[b-07lm19uy3b] {
        width: 100%;
    }

    .toolbar > .btn-primary[b-07lm19uy3b] {
        width: 100%;
    }

    .table-header[b-07lm19uy3b] {
        padding: 15px;
    }

    .empty-state[b-07lm19uy3b] {
        padding: 45px 16px;
    }

    .tc-modal-backdrop[b-07lm19uy3b] {
        padding: 12px;
    }

    .tc-modal-container[b-07lm19uy3b] {
        max-height: calc(100vh - 24px);
    }

    .tc-modal-header[b-07lm19uy3b],
    .tc-modal-body[b-07lm19uy3b] {
        padding: 18px;
    }

    .form-grid[b-07lm19uy3b] {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .form-group.full-width[b-07lm19uy3b] {
        grid-column: auto;
    }

    .tc-modal-footer[b-07lm19uy3b] {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 16px 18px;
    }

        .tc-modal-footer button[b-07lm19uy3b] {
            width: 100%;
        }

    .tc-confirm-dialog[b-07lm19uy3b] {
        padding: 22px;
    }

    .tc-confirm-actions[b-07lm19uy3b] {
        flex-direction: column-reverse;
    }

        .tc-confirm-actions button[b-07lm19uy3b] {
            width: 100%;
        }
}
/* /Components/Pages/TalentoHumano/Dashboard.razor.rz.scp.css */
/* =========================================================
   TALENTO HUMANO - DASHBOARD
   ========================================================= */

.talento-dashboard[b-m3lcwc5dzl] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}


/* =========================================================
   CABECERA
   ========================================================= */

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

.dashboard-title[b-m3lcwc5dzl] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.title-icon[b-m3lcwc5dzl] {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    font-size: 27px;
}

.dashboard-title h1[b-m3lcwc5dzl] {
    margin: 0;
    font-size: 27px;
    font-weight: 700;
    color: #1f2937;
}

.dashboard-title p[b-m3lcwc5dzl] {
    margin: 5px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.dashboard-period[b-m3lcwc5dzl] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}

.period-label[b-m3lcwc5dzl] {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.dashboard-period strong[b-m3lcwc5dzl] {
    margin-top: 3px;
    color: #374151;
    font-size: 14px;
}


/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.section-title[b-m3lcwc5dzl] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .section-title > div[b-m3lcwc5dzl] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #374151;
        font-size: 16px;
        font-weight: 700;
    }

.section-icon[b-m3lcwc5dzl] {
    color: #64748b;
}

.quick-title[b-m3lcwc5dzl] {
    margin-top: 28px;
}


/* =========================================================
   INDICADORES
   ========================================================= */

.stats-grid[b-m3lcwc5dzl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.stat-card[b-m3lcwc5dzl] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 112px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.stat-icon[b-m3lcwc5dzl] {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.stat-content[b-m3lcwc5dzl] {
    min-width: 0;
}

.stat-label[b-m3lcwc5dzl] {
    display: block;
    color: #6b7280;
    font-size: 12px;
    margin-bottom: 4px;
}

.stat-value[b-m3lcwc5dzl] {
    display: block;
    color: #1f2937;
    font-size: 25px;
    line-height: 1.1;
}

.stat-detail[b-m3lcwc5dzl] {
    display: block;
    margin-top: 5px;
    color: #9ca3af;
    font-size: 11px;
}


/* =========================================================
   COLORES DE ICONOS
   ========================================================= */

.stat-blue[b-m3lcwc5dzl] {
    background: #eff6ff;
}

.stat-green[b-m3lcwc5dzl] {
    background: #ecfdf5;
}

.stat-purple[b-m3lcwc5dzl] {
    background: #f5f3ff;
}

.stat-orange[b-m3lcwc5dzl] {
    background: #fff7ed;
}

.stat-cyan[b-m3lcwc5dzl] {
    background: #ecfeff;
}

.stat-indigo[b-m3lcwc5dzl] {
    background: #eef2ff;
}

.stat-teal[b-m3lcwc5dzl] {
    background: #f0fdfa;
}

.stat-red[b-m3lcwc5dzl] {
    background: #fef2f2;
}


/* =========================================================
   ACCESOS RÁPIDOS
   ========================================================= */

.quick-grid[b-m3lcwc5dzl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.quick-card[b-m3lcwc5dzl] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 17px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .quick-card:hover[b-m3lcwc5dzl] {
        transform: translateY(-2px);
        border-color: #cbd5e1;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
    }

.quick-icon[b-m3lcwc5dzl] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 20px;
}

.quick-blue[b-m3lcwc5dzl] {
    background: #eff6ff;
}

.quick-green[b-m3lcwc5dzl] {
    background: #ecfdf5;
}

.quick-purple[b-m3lcwc5dzl] {
    background: #f5f3ff;
}

.quick-orange[b-m3lcwc5dzl] {
    background: #fff7ed;
}

.quick-content[b-m3lcwc5dzl] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .quick-content strong[b-m3lcwc5dzl] {
        color: #1f2937;
        font-size: 14px;
    }

    .quick-content span[b-m3lcwc5dzl] {
        margin-top: 3px;
        color: #9ca3af;
        font-size: 11px;
    }

.quick-arrow[b-m3lcwc5dzl] {
    margin-left: auto;
    color: #94a3b8;
    font-size: 18px;
}

.quick-card-disabled[b-m3lcwc5dzl] {
    cursor: not-allowed;
    opacity: .65;
}

    .quick-card-disabled:hover[b-m3lcwc5dzl] {
        transform: none;
        border-color: #e5e7eb;
        box-shadow: none;
    }

.quick-status[b-m3lcwc5dzl] {
    margin-left: auto;
    color: #9ca3af;
    font-size: 10px;
    text-align: right;
}


/* =========================================================
   COLUMNAS
   ========================================================= */

.dashboard-columns[b-m3lcwc5dzl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}


/* =========================================================
   TARJETAS DE CONTENIDO
   ========================================================= */

.dashboard-card[b-m3lcwc5dzl] {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.card-header[b-m3lcwc5dzl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

    .card-header h2[b-m3lcwc5dzl] {
        margin: 0;
        color: #1f2937;
        font-size: 16px;
        font-weight: 700;
    }

    .card-header p[b-m3lcwc5dzl] {
        margin: 5px 0 0;
        color: #9ca3af;
        font-size: 12px;
    }


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

.distribution-list[b-m3lcwc5dzl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.distribution-item[b-m3lcwc5dzl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #4b5563;
    font-size: 13px;
}

    .distribution-item strong[b-m3lcwc5dzl] {
        color: #1f2937;
    }

.distribution-label[b-m3lcwc5dzl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot[b-m3lcwc5dzl] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dot-blue[b-m3lcwc5dzl] {
    background: #3b82f6;
}

.dot-purple[b-m3lcwc5dzl] {
    background: #8b5cf6;
}

.progress-bar[b-m3lcwc5dzl] {
    height: 7px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 20px;
    background: #f1f5f9;
}

.progress-fill[b-m3lcwc5dzl] {
    height: 100%;
    border-radius: inherit;
}

.progress-blue[b-m3lcwc5dzl] {
    background: #3b82f6;
}

.progress-purple[b-m3lcwc5dzl] {
    background: #8b5cf6;
}


/* =========================================================
   PERSONAL POR ÁREA
   ========================================================= */

.area-list[b-m3lcwc5dzl] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.area-row[b-m3lcwc5dzl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #4b5563;
    font-size: 12px;
}

    .area-row strong[b-m3lcwc5dzl] {
        color: #374151;
    }

.area-bar[b-m3lcwc5dzl] {
    height: 6px;
    overflow: hidden;
    border-radius: 20px;
    background: #f1f5f9;
    margin-bottom: 3px;
}

    .area-bar > div[b-m3lcwc5dzl] {
        height: 100%;
        border-radius: inherit;
        background: #64748b;
    }


/* =========================================================
   CONTRATOS
   ========================================================= */

.contract-summary[b-m3lcwc5dzl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.contract-item[b-m3lcwc5dzl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 15px 8px;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    text-align: center;
}

.contract-number[b-m3lcwc5dzl] {
    font-size: 24px;
    font-weight: 700;
}

.green[b-m3lcwc5dzl] {
    color: #059669;
}

.orange[b-m3lcwc5dzl] {
    color: #d97706;
}

.red[b-m3lcwc5dzl] {
    color: #dc2626;
}

.blue[b-m3lcwc5dzl] {
    color: #2563eb;
}


/* =========================================================
   ASISTENCIA
   ========================================================= */

.attendance-grid[b-m3lcwc5dzl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.attendance-item[b-m3lcwc5dzl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border-radius: 10px;
    background: #f8fafc;
}

.attendance-icon[b-m3lcwc5dzl] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #ffffff;
    font-weight: 700;
}

.attendance-item div[b-m3lcwc5dzl] {
    display: flex;
    flex-direction: column;
}

.attendance-item strong[b-m3lcwc5dzl] {
    color: #1f2937;
    font-size: 17px;
}

.attendance-item span[b-m3lcwc5dzl] {
    margin-top: 2px;
    color: #9ca3af;
    font-size: 10px;
}


/* =========================================================
   ALERTAS
   ========================================================= */

.alerts-card[b-m3lcwc5dzl] {
    margin-bottom: 18px;
}

.alert-count[b-m3lcwc5dzl] {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
}

.alerts-list[b-m3lcwc5dzl] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.alert-item[b-m3lcwc5dzl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
}

.alert-warning[b-m3lcwc5dzl] {
    background: #fffbeb;
}

.alert-info[b-m3lcwc5dzl] {
    background: #eff6ff;
}

.alert-icon[b-m3lcwc5dzl] {
    font-size: 17px;
}

.alert-content[b-m3lcwc5dzl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .alert-content strong[b-m3lcwc5dzl] {
        color: #374151;
        font-size: 12px;
    }

    .alert-content span[b-m3lcwc5dzl] {
        color: #6b7280;
        font-size: 11px;
    }


/* =========================================================
   PIE
   ========================================================= */

.dashboard-footer[b-m3lcwc5dzl] {
    display: flex;
    justify-content: space-between;
    padding: 4px 2px 10px;
    color: #9ca3af;
    font-size: 10px;
}


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

@media (max-width: 1200px) {

    .stats-grid[b-m3lcwc5dzl] {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-grid[b-m3lcwc5dzl] {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 900px) {

    .dashboard-columns[b-m3lcwc5dzl] {
        grid-template-columns: 1fr;
    }

    .dashboard-header[b-m3lcwc5dzl] {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-period[b-m3lcwc5dzl] {
        align-items: flex-start;
    }
}


@media (max-width: 600px) {

    .talento-dashboard[b-m3lcwc5dzl] {
        padding: 15px;
    }

    .stats-grid[b-m3lcwc5dzl] {
        grid-template-columns: 1fr;
    }

    .quick-grid[b-m3lcwc5dzl] {
        grid-template-columns: 1fr;
    }

    .contract-summary[b-m3lcwc5dzl] {
        grid-template-columns: 1fr 1fr;
    }

    .attendance-grid[b-m3lcwc5dzl] {
        grid-template-columns: 1fr;
    }

    .dashboard-footer[b-m3lcwc5dzl] {
        flex-direction: column;
        gap: 5px;
    }
}
/* /Components/Pages/TalentoHumano/Maestros.razor.rz.scp.css */
.page-container[b-eibrcy4mu3] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* =====================================================
   HEADER
   ===================================================== */

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

.page-title-section[b-eibrcy4mu3] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.title-icon[b-eibrcy4mu3] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f5f9;
    font-size: 24px;
}

.page-title-section h1[b-eibrcy4mu3] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
}

.page-title-section p[b-eibrcy4mu3] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
}

.page-actions[b-eibrcy4mu3] {
    display: flex;
    gap: 10px;
}

.btn-secondary[b-eibrcy4mu3] {
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-secondary:hover[b-eibrcy4mu3] {
        background: #f8fafc;
    }

/* =====================================================
   GRID DE MAESTROS
   ===================================================== */

.masters-grid[b-eibrcy4mu3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

/* =====================================================
   TARJETA
   ===================================================== */

.master-card[b-eibrcy4mu3] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 145px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .master-card.active[b-eibrcy4mu3] {
        cursor: pointer;
    }

        .master-card.active:hover[b-eibrcy4mu3] {
            transform: translateY(-2px);
            border-color: #cbd5e1;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
        }

    .master-card.disabled[b-eibrcy4mu3] {
        opacity: 0.65;
        background: #f8fafc;
    }

/* =====================================================
   ICONO
   ===================================================== */

.master-icon[b-eibrcy4mu3] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f1f5f9;
    color: #334155;
    font-size: 21px;
}

/* =====================================================
   CONTENIDO
   ===================================================== */

.master-content[b-eibrcy4mu3] {
    flex: 1;
    padding-right: 20px;
}

    .master-content h3[b-eibrcy4mu3] {
        margin: 0 0 7px;
        font-size: 16px;
        font-weight: 650;
        color: #1f2937;
    }

    .master-content p[b-eibrcy4mu3] {
        margin: 0;
        color: #64748b;
        font-size: 13px;
        line-height: 1.5;
    }

/* =====================================================
   ESTADO
   ===================================================== */

.master-status[b-eibrcy4mu3] {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 8px;
    border-radius: 20px;
    background: #e2e8f0;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

/* =====================================================
   FLECHA
   ===================================================== */

.master-arrow[b-eibrcy4mu3] {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 24px;
}

.master-card.active:hover .master-arrow[b-eibrcy4mu3] {
    color: #475569;
}

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

@media (max-width: 1100px) {

    .masters-grid[b-eibrcy4mu3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .page-container[b-eibrcy4mu3] {
        padding: 16px;
    }

    .page-header[b-eibrcy4mu3] {
        align-items: flex-start;
        flex-direction: column;
    }

    .masters-grid[b-eibrcy4mu3] {
        grid-template-columns: 1fr;
    }

    .page-actions[b-eibrcy4mu3] {
        width: 100%;
    }

    .btn-secondary[b-eibrcy4mu3] {
        width: 100%;
    }
}
/* /Components/Pages/Ventas/Clientes.razor.rz.scp.css */
.clientes-page[b-p3i7ya80ex] {
    padding: 24px;
    max-width: 1500px;
    margin: 0 auto;
}


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

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

.page-title[b-p3i7ya80ex] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.title-icon[b-p3i7ya80ex] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    font-size: 25px;
}

.page-title h1[b-p3i7ya80ex] {
    margin: 0;
    font-size: 27px;
    font-weight: 700;
}

.page-title p[b-p3i7ya80ex] {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 14px;
}


/* =====================================================
   BOTONES
   ===================================================== */

.btn-primary[b-p3i7ya80ex],
.btn-secondary[b-p3i7ya80ex],
.btn-add[b-p3i7ya80ex],
.btn-danger[b-p3i7ya80ex] {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: 0.2s;
}

.btn-primary[b-p3i7ya80ex] {
    background: #2563eb;
    color: white;
}

    .btn-primary:hover[b-p3i7ya80ex] {
        background: #1d4ed8;
    }

.btn-secondary[b-p3i7ya80ex] {
    background: #f3f4f6;
    color: #374151;
}

    .btn-secondary:hover[b-p3i7ya80ex] {
        background: #e5e7eb;
    }

.btn-add[b-p3i7ya80ex] {
    background: #eff6ff;
    color: #2563eb;
}

    .btn-add:hover[b-p3i7ya80ex] {
        background: #dbeafe;
    }

.btn-danger[b-p3i7ya80ex] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover[b-p3i7ya80ex] {
        background: #b91c1c;
    }


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

.list-card[b-p3i7ya80ex],
.selected-client-card[b-p3i7ya80ex] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}


/* =====================================================
   FILTROS
   ===================================================== */

.filters[b-p3i7ya80ex] {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.search-box[b-p3i7ya80ex] {
    flex: 1;
    position: relative;
}

    .search-box input[b-p3i7ya80ex] {
        width: 100%;
        height: 42px;
        padding: 0 14px 0 40px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        outline: none;
        font-size: 14px;
        box-sizing: border-box;
    }

        .search-box input:focus[b-p3i7ya80ex] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

.search-icon[b-p3i7ya80ex] {
    position: absolute;
    left: 14px;
    top: 11px;
}

.status-filter[b-p3i7ya80ex] {
    height: 42px;
    min-width: 130px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    outline: none;
}


/* =====================================================
   RESUMEN
   ===================================================== */

.list-summary[b-p3i7ya80ex] {
    padding: 14px 18px;
    color: #6b7280;
    font-size: 13px;
}

    .list-summary strong[b-p3i7ya80ex] {
        color: #111827;
    }


/* =====================================================
   TABLAS
   ===================================================== */

.table-wrapper[b-p3i7ya80ex] {
    overflow-x: auto;
}

.clients-table[b-p3i7ya80ex],
.related-table[b-p3i7ya80ex] {
    width: 100%;
    border-collapse: collapse;
}

    .clients-table th[b-p3i7ya80ex],
    .related-table th[b-p3i7ya80ex] {
        background: #f9fafb;
        padding: 13px 18px;
        text-align: left;
        font-size: 12px;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .clients-table td[b-p3i7ya80ex],
    .related-table td[b-p3i7ya80ex] {
        padding: 15px 18px;
        border-top: 1px solid #f0f0f0;
        font-size: 13px;
        color: #374151;
        vertical-align: middle;
    }

    .clients-table tbody tr[b-p3i7ya80ex] {
        cursor: pointer;
        transition: background 0.15s;
    }

        .clients-table tbody tr:hover[b-p3i7ya80ex] {
            background: #f8fafc;
        }

        .clients-table tbody tr.selected-row[b-p3i7ya80ex] {
            background: #eff6ff;
        }

            .clients-table tbody tr.selected-row td:first-child[b-p3i7ya80ex] {
                box-shadow: inset 3px 0 0 #2563eb;
            }

.actions-column[b-p3i7ya80ex] {
    width: 125px;
    text-align: center !important;
}

.document-cell[b-p3i7ya80ex] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .document-cell strong[b-p3i7ya80ex] {
        color: #111827;
    }

    .document-cell small[b-p3i7ya80ex] {
        color: #9ca3af;
        font-size: 11px;
    }


/* =====================================================
   ACCIONES
   ===================================================== */

.actions[b-p3i7ya80ex] {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.action-view[b-p3i7ya80ex],
.action-edit[b-p3i7ya80ex],
.action-disable[b-p3i7ya80ex],
.action-enable[b-p3i7ya80ex] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    background: #f3f4f6;
    transition: 0.2s;
}

    .action-view:hover[b-p3i7ya80ex],
    .action-edit:hover[b-p3i7ya80ex] {
        background: #dbeafe;
    }

    .action-disable:hover[b-p3i7ya80ex] {
        background: #fee2e2;
    }

    .action-enable:hover[b-p3i7ya80ex] {
        background: #dcfce7;
    }


/* =====================================================
   ESTADOS
   ===================================================== */

.status-active[b-p3i7ya80ex],
.status-inactive[b-p3i7ya80ex] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-active[b-p3i7ya80ex] {
    background: #ecfdf5;
    color: #047857;
}

.status-inactive[b-p3i7ya80ex] {
    background: #fef2f2;
    color: #b91c1c;
}

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


/* =====================================================
   CLIENTE SELECCIONADO
   ===================================================== */

.selected-client-card[b-p3i7ya80ex] {
    margin-top: 20px;
    overflow: hidden;
}

.selected-client-header[b-p3i7ya80ex] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.selected-client-info[b-p3i7ya80ex] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.selected-client-icon[b-p3i7ya80ex] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}

.selected-client-title[b-p3i7ya80ex] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .selected-client-title h2[b-p3i7ya80ex] {
        margin: 0;
        font-size: 19px;
        color: #111827;
    }

.selected-client-info p[b-p3i7ya80ex] {
    margin: 5px 0 0;
    color: #6b7280;
    font-size: 13px;
}


/* =====================================================
   SECCIONES RELACIONADAS
   ===================================================== */

.related-section[b-p3i7ya80ex] {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

    .related-section:last-child[b-p3i7ya80ex] {
        border-bottom: none;
    }

.related-header[b-p3i7ya80ex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.related-title[b-p3i7ya80ex] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.related-icon[b-p3i7ya80ex] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-title h3[b-p3i7ya80ex] {
    margin: 0;
    font-size: 16px;
    color: #111827;
}

.related-title p[b-p3i7ya80ex] {
    margin: 3px 0 0;
    font-size: 12px;
    color: #6b7280;
}


/* =====================================================
   TABLAS RELACIONADAS
   ===================================================== */

.related-table th[b-p3i7ya80ex] {
    font-size: 11px;
    padding: 11px 14px;
}

.related-table td[b-p3i7ya80ex] {
    padding: 13px 14px;
}

.related-table tbody tr:hover[b-p3i7ya80ex] {
    background: #fafafa;
}

.related-name[b-p3i7ya80ex] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 170px;
}

.small-item-icon[b-p3i7ya80ex] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.related-name strong[b-p3i7ya80ex] {
    color: #111827;
}

.badge-principal[b-p3i7ya80ex] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.not-principal[b-p3i7ya80ex] {
    color: #9ca3af;
}

.contact-type[b-p3i7ya80ex] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 11px;
    font-weight: 600;
}


/* =====================================================
   VACÍOS
   ===================================================== */

.empty-related[b-p3i7ya80ex] {
    min-height: 90px;
    border: 1px dashed #d1d5db;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    color: #6b7280;
}

.empty-related-icon[b-p3i7ya80ex] {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.empty-related strong[b-p3i7ya80ex] {
    display: block;
    color: #374151;
    font-size: 13px;
}

.empty-related p[b-p3i7ya80ex] {
    margin: 3px 0 0;
    font-size: 12px;
}

.empty-list[b-p3i7ya80ex] {
    padding: 65px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.empty-list-icon[b-p3i7ya80ex] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 15px;
}

.empty-list h3[b-p3i7ya80ex] {
    margin: 0;
    color: #374151;
}

.empty-list p[b-p3i7ya80ex] {
    margin: 7px 0 20px;
    color: #6b7280;
    font-size: 13px;
}


/* =====================================================
   MODALES
   ===================================================== */

.modal-overlay[b-p3i7ya80ex] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.client-form-modal[b-p3i7ya80ex] {
    width: 100%;
    max-width: 850px;
    max-height: calc(100vh - 40px);
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.small-form-modal[b-p3i7ya80ex] {
    width: 100%;
    max-width: 700px;
    max-height: calc(100vh - 40px);
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.form-header[b-p3i7ya80ex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

    .form-header h2[b-p3i7ya80ex] {
        margin: 0;
        font-size: 21px;
    }

    .form-header p[b-p3i7ya80ex] {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 13px;
    }

.close-button[b-p3i7ya80ex] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #f3f4f6;
    color: #4b5563;
    cursor: pointer;
    font-size: 16px;
}

    .close-button:hover[b-p3i7ya80ex] {
        background: #e5e7eb;
    }

.small-form-body[b-p3i7ya80ex] {
    padding: 22px 24px;
    overflow-y: auto;
}


/* =====================================================
   FORMULARIOS
   ===================================================== */

.form-card[b-p3i7ya80ex] {
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    padding: 20px;
    margin-bottom: 16px;
}

.section-title[b-p3i7ya80ex] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.section-number[b-p3i7ya80ex] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2563eb;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.section-title h3[b-p3i7ya80ex] {
    margin: 0;
    font-size: 16px;
}

.section-title p[b-p3i7ya80ex] {
    margin: 3px 0 0;
    color: #6b7280;
    font-size: 12px;
}

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

.form-group-wide[b-p3i7ya80ex] {
    grid-column: span 2;
}

.form-group[b-p3i7ya80ex] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .form-group label[b-p3i7ya80ex] {
        font-size: 12px;
        font-weight: 600;
        color: #374151;
    }

.required[b-p3i7ya80ex] {
    color: #dc2626;
}

.form-control[b-p3i7ya80ex] {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: white;
    box-sizing: border-box;
    font-size: 13px;
    outline: none;
}

    .form-control:focus[b-p3i7ya80ex] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
    }

.textarea[b-p3i7ya80ex] {
    min-height: 75px;
    resize: vertical;
}


/* =====================================================
   SWITCH
   ===================================================== */

.switch-container[b-p3i7ya80ex] {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4b5563;
    font-size: 13px;
}

.switch[b-p3i7ya80ex] {
    position: relative;
    width: 40px;
    height: 22px;
    display: inline-block;
}

    .switch input[b-p3i7ya80ex] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-p3i7ya80ex] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #d1d5db;
    border-radius: 20px;
    transition: 0.2s;
}

    .slider[b-p3i7ya80ex]:before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        left: 3px;
        top: 3px;
        background: white;
        border-radius: 50%;
        transition: 0.2s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

.switch input:checked + .slider[b-p3i7ya80ex] {
    background: #2563eb;
}

    .switch input:checked + .slider[b-p3i7ya80ex]:before {
        transform: translateX(18px);
    }


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

.form-actions[b-p3i7ya80ex] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 18px;
}

.alert-error[b-p3i7ya80ex] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    margin: 15px 24px 0;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 13px;
}


/* =====================================================
   CONFIRMACIÓN
   ===================================================== */

.confirm-modal[b-p3i7ya80ex] {
    width: 100%;
    max-width: 430px;
    background: white;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.confirm-icon[b-p3i7ya80ex] {
    width: 55px;
    height: 55px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.confirm-modal h3[b-p3i7ya80ex] {
    margin: 0 0 8px;
    font-size: 20px;
}

.confirm-modal > p[b-p3i7ya80ex] {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

.confirm-client[b-p3i7ya80ex] {
    margin: 18px 0;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .confirm-client strong[b-p3i7ya80ex] {
        color: #111827;
    }

    .confirm-client span[b-p3i7ya80ex] {
        color: #6b7280;
        font-size: 12px;
    }

.confirm-actions[b-p3i7ya80ex] {
    display: flex;
    justify-content: center;
    gap: 10px;
}


/* =====================================================
   CARGANDO
   ===================================================== */

.loading-container[b-p3i7ya80ex] {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6b7280;
}

.spinner[b-p3i7ya80ex],
.mini-spinner[b-p3i7ya80ex] {
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-p3i7ya80ex 0.8s linear infinite;
}

.spinner[b-p3i7ya80ex] {
    width: 28px;
    height: 28px;
}

.mini-spinner[b-p3i7ya80ex] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

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


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

@media (max-width: 900px) {

    .clientes-page[b-p3i7ya80ex] {
        padding: 15px;
    }

    .page-header[b-p3i7ya80ex],
    .selected-client-header[b-p3i7ya80ex],
    .related-header[b-p3i7ya80ex] {
        flex-direction: column;
        align-items: stretch;
    }

        .page-header .btn-primary[b-p3i7ya80ex],
        .related-header .btn-add[b-p3i7ya80ex] {
            width: 100%;
        }

    .filters[b-p3i7ya80ex] {
        flex-direction: column;
    }

    .search-box[b-p3i7ya80ex],
    .status-filter[b-p3i7ya80ex] {
        width: 100%;
    }

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

    .form-group-wide[b-p3i7ya80ex] {
        grid-column: span 1;
    }

    .selected-client-header .btn-secondary[b-p3i7ya80ex] {
        width: 100%;
    }
}


@media (max-width: 600px) {

    .form-actions[b-p3i7ya80ex] {
        flex-direction: column-reverse;
    }

        .form-actions button[b-p3i7ya80ex] {
            width: 100%;
        }

    .client-form-modal[b-p3i7ya80ex],
    .small-form-modal[b-p3i7ya80ex] {
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-overlay[b-p3i7ya80ex] {
        padding: 0;
    }
}
/* /Components/Pages/Ventas/Cotizaciones.razor.rz.scp.css */
.cotizaciones-page[b-y5o6rbu9xx] {
    padding: 28px;
    max-width: 1600px;
    margin: 0 auto;
}

.page-header[b-y5o6rbu9xx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

    .page-header h1[b-y5o6rbu9xx] {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
    }

    .page-header p[b-y5o6rbu9xx] {
        margin: 6px 0 0;
        color: #6b7280;
    }

.btn-primary[b-y5o6rbu9xx],
.btn-secondary[b-y5o6rbu9xx],
.btn-danger[b-y5o6rbu9xx] {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary[b-y5o6rbu9xx] {
    background: #1f2937;
    color: white;
}

    .btn-primary:hover[b-y5o6rbu9xx] {
        opacity: .9;
    }

.btn-secondary[b-y5o6rbu9xx] {
    background: #f3f4f6;
    color: #374151;
}

    .btn-secondary:hover[b-y5o6rbu9xx] {
        background: #e5e7eb;
    }

.btn-danger[b-y5o6rbu9xx] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover[b-y5o6rbu9xx] {
        background: #b91c1c;
    }

    .btn-primary:disabled[b-y5o6rbu9xx],
    .btn-secondary:disabled[b-y5o6rbu9xx],
    .btn-danger:disabled[b-y5o6rbu9xx] {
        opacity: .6;
        cursor: not-allowed;
    }

.table-card[b-y5o6rbu9xx] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.table-wrapper[b-y5o6rbu9xx] {
    overflow-x: auto;
}

table[b-y5o6rbu9xx] {
    width: 100%;
    border-collapse: collapse;
}

thead[b-y5o6rbu9xx] {
    background: #f9fafb;
}

th[b-y5o6rbu9xx] {
    padding: 13px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

td[b-y5o6rbu9xx] {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f1f3;
    font-size: 14px;
    color: #374151;
}

tbody tr:hover[b-y5o6rbu9xx] {
    background: #fafafa;
}

.amount[b-y5o6rbu9xx] {
    text-align: right;
    font-weight: 600;
}

.actions[b-y5o6rbu9xx] {
    display: flex;
    gap: 6px;
}

.btn-action[b-y5o6rbu9xx] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 15px;
}

.btn-edit[b-y5o6rbu9xx] {
    background: #eff6ff;
    color: #2563eb;
}

.btn-delete[b-y5o6rbu9xx] {
    background: #fef2f2;
    color: #dc2626;
}

.estado-badge[b-y5o6rbu9xx] {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.estado-borrador[b-y5o6rbu9xx] {
    background: #f3f4f6;
    color: #4b5563;
}

.estado-pendiente[b-y5o6rbu9xx] {
    background: #fff7ed;
    color: #c2410c;
}

.estado-aceptada[b-y5o6rbu9xx] {
    background: #ecfdf5;
    color: #047857;
}

.estado-rechazada[b-y5o6rbu9xx] {
    background: #fef2f2;
    color: #b91c1c;
}

.estado-vencida[b-y5o6rbu9xx] {
    background: #fef2f2;
    color: #991b1b;
}

.loading[b-y5o6rbu9xx] {
    padding: 50px;
    text-align: center;
    color: #6b7280;
}

.empty-state[b-y5o6rbu9xx] {
    padding: 60px 20px;
    text-align: center;
}

.empty-icon[b-y5o6rbu9xx] {
    font-size: 42px;
    margin-bottom: 12px;
}

.empty-state h3[b-y5o6rbu9xx] {
    margin: 0 0 8px;
}

.empty-state p[b-y5o6rbu9xx] {
    margin: 0 0 20px;
    color: #6b7280;
}

.alert-error[b-y5o6rbu9xx],
.alert-success[b-y5o6rbu9xx] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 14px;
}

.alert-error[b-y5o6rbu9xx] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.alert-success[b-y5o6rbu9xx] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

.modal-overlay[b-y5o6rbu9xx] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}

.modal-container[b-y5o6rbu9xx] {
    width: 100%;
    max-height: 94vh;
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-large[b-y5o6rbu9xx] {
    max-width: 1250px;
}

.modal-confirm[b-y5o6rbu9xx] {
    max-width: 480px;
}

.modal-header[b-y5o6rbu9xx] {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

    .modal-header h2[b-y5o6rbu9xx] {
        margin: 0;
        font-size: 20px;
    }

    .modal-header p[b-y5o6rbu9xx] {
        margin: 5px 0 0;
        color: #6b7280;
        font-size: 13px;
    }

.modal-close[b-y5o6rbu9xx] {
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.modal-body[b-y5o6rbu9xx] {
    padding: 24px;
    overflow-y: auto;
}

.modal-footer[b-y5o6rbu9xx] {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.form-section[b-y5o6rbu9xx] {
    margin-bottom: 28px;
}

.section-title[b-y5o6rbu9xx] {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e5e7eb;
}

.section-title-with-action[b-y5o6rbu9xx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

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

.form-group[b-y5o6rbu9xx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group-full[b-y5o6rbu9xx] {
    grid-column: 1 / -1;
}

.form-group label[b-y5o6rbu9xx] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.form-control[b-y5o6rbu9xx] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: white;
    color: #111827;
    font-size: 14px;
    outline: none;
}

    .form-control:focus[b-y5o6rbu9xx] {
        border-color: #6b7280;
        box-shadow: 0 0 0 2px rgba(107, 114, 128, .1);
    }

    .form-control:disabled[b-y5o6rbu9xx] {
        background: #f3f4f6;
        color: #6b7280;
    }

.field-help[b-y5o6rbu9xx] {
    color: #6b7280;
    font-size: 11px;
}

.textarea-control[b-y5o6rbu9xx] {
    resize: vertical;
    min-height: 75px;
}

.details-wrapper[b-y5o6rbu9xx] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow-x: auto;
}

.details-table[b-y5o6rbu9xx] {
    min-width: 1050px;
}

    .details-table th[b-y5o6rbu9xx] {
        font-size: 11px;
        padding: 10px;
    }

    .details-table td[b-y5o6rbu9xx] {
        padding: 8px;
        vertical-align: middle;
    }

    .details-table .form-control[b-y5o6rbu9xx] {
        padding: 8px;
        font-size: 13px;
    }

.item-column[b-y5o6rbu9xx] {
    width: 55px;
}

.unit-column[b-y5o6rbu9xx] {
    width: 100px;
}

.quantity-column[b-y5o6rbu9xx] {
    width: 105px;
}

.price-column[b-y5o6rbu9xx] {
    width: 120px;
}

.discount-column[b-y5o6rbu9xx] {
    width: 110px;
}

.amount-column[b-y5o6rbu9xx] {
    width: 125px;
}

.action-column[b-y5o6rbu9xx] {
    width: 45px;
}

.item-cell[b-y5o6rbu9xx] {
    text-align: center;
    font-weight: 600;
}

.amount-cell[b-y5o6rbu9xx] {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

.text-right[b-y5o6rbu9xx] {
    text-align: right;
}

.btn-remove-detail[b-y5o6rbu9xx] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 18px;
    cursor: pointer;
}

    .btn-remove-detail:hover[b-y5o6rbu9xx] {
        background: #fee2e2;
    }

.details-empty[b-y5o6rbu9xx] {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

.link-button[b-y5o6rbu9xx] {
    border: none;
    background: transparent;
    color: #2563eb;
    cursor: pointer;
    font-weight: 600;
}

.totals-section[b-y5o6rbu9xx] {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.totals-box[b-y5o6rbu9xx] {
    width: 320px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.total-row[b-y5o6rbu9xx] {
    display: flex;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
}

    .total-row strong[b-y5o6rbu9xx] {
        font-weight: 700;
    }

.total-final[b-y5o6rbu9xx] {
    background: #f9fafb;
    font-size: 17px;
    border-bottom: none;
}

    .total-final strong[b-y5o6rbu9xx] {
        font-size: 18px;
    }

.confirm-icon[b-y5o6rbu9xx] {
    text-align: center;
    font-size: 42px;
    margin-bottom: 12px;
}

.confirm-title[b-y5o6rbu9xx] {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
}

.confirm-description[b-y5o6rbu9xx] {
    text-align: center;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {

    .cotizaciones-page[b-y5o6rbu9xx] {
        padding: 18px;
    }

    .page-header[b-y5o6rbu9xx] {
        flex-direction: column;
    }

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

    .form-group-full[b-y5o6rbu9xx] {
        grid-column: auto;
    }

    .modal-overlay[b-y5o6rbu9xx] {
        padding: 10px;
    }

    .modal-body[b-y5o6rbu9xx] {
        padding: 18px;
    }
}

@media (max-width: 600px) {

    .cotizaciones-page[b-y5o6rbu9xx] {
        padding: 12px;
    }

    .page-header h1[b-y5o6rbu9xx] {
        font-size: 24px;
    }

    .modal-header[b-y5o6rbu9xx],
    .modal-footer[b-y5o6rbu9xx] {
        padding: 15px;
    }

    .modal-footer[b-y5o6rbu9xx] {
        flex-direction: column-reverse;
    }

        .modal-footer button[b-y5o6rbu9xx] {
            width: 100%;
        }
}
/* /Components/Pages/Ventas/Inspecciones.razor.rz.scp.css */
/* =========================================================
   PÁGINA
   ========================================================= */

.inspecciones-page[b-2ysv9kb14g] {
    padding: 28px 32px;
    min-height: calc(100vh - 70px);
    background: #ffffff;
}

    .inspecciones-page .page-header[b-2ysv9kb14g] {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 22px;
    }

        .inspecciones-page .page-header h1[b-2ysv9kb14g] {
            margin: 0;
            color: #111827;
            font-size: 30px;
            font-weight: 500;
            line-height: 1.2;
        }

        .inspecciones-page .page-header p[b-2ysv9kb14g] {
            margin: 7px 0 0;
            color: #6b7280;
            font-size: 14px;
        }


/* =========================================================
   SELECTOR DE EMPRESA
   ========================================================= */

.empresa-selector[b-2ysv9kb14g] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

    .empresa-selector .form-label[b-2ysv9kb14g] {
        display: block;
        margin-bottom: 6px;
        color: #374151;
        font-size: 12px;
        font-weight: 600;
    }


/* =========================================================
   BOTONES GENERALES
   ========================================================= */

.btn-primary[b-2ysv9kb14g] {
    min-height: 40px;
    padding: 0 17px;
    border: 1px solid #315a9f;
    border-radius: 8px;
    background: #315a9f;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .btn-primary:hover[b-2ysv9kb14g] {
        background: #284b85;
        border-color: #284b85;
        box-shadow: 0 3px 8px rgba(49, 90, 159, .20);
    }

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

.btn-secondary[b-2ysv9kb14g] {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .btn-secondary:hover[b-2ysv9kb14g] {
        background: #f9fafb;
        border-color: #9ca3af;
        color: #111827;
    }


/* =========================================================
   TABLA
   ========================================================= */

.table-card[b-2ysv9kb14g] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.table-wrapper[b-2ysv9kb14g] {
    width: 100%;
    overflow-x: auto;
}

.table-card table[b-2ysv9kb14g] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.table-card thead[b-2ysv9kb14g] {
    background: #f8fafc;
}

.table-card th[b-2ysv9kb14g] {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

.table-card td[b-2ysv9kb14g] {
    padding: 15px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
    font-size: 13px;
    vertical-align: middle;
}

.table-card tbody tr:last-child td[b-2ysv9kb14g] {
    border-bottom: none;
}

.table-card tbody tr:hover[b-2ysv9kb14g] {
    background: #fafcff;
}

.table-card td strong[b-2ysv9kb14g] {
    color: #111827;
}


/* =========================================================
   TABLA SIN TABLE-CARD
   COMPATIBILIDAD CON EL RAZOR ACTUAL
   ========================================================= */

.table-wrapper > table[b-2ysv9kb14g] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

    .table-wrapper > table thead[b-2ysv9kb14g] {
        background: #f8fafc;
    }

    .table-wrapper > table th[b-2ysv9kb14g] {
        padding: 13px 16px;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
        color: #6b7280;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        white-space: nowrap;
    }

    .table-wrapper > table td[b-2ysv9kb14g] {
        padding: 15px 16px;
        border-bottom: 1px solid #f1f5f9;
        color: #374151;
        font-size: 13px;
        vertical-align: middle;
    }

    .table-wrapper > table tbody tr:last-child td[b-2ysv9kb14g] {
        border-bottom: none;
    }

    .table-wrapper > table tbody tr:hover[b-2ysv9kb14g] {
        background: #fafcff;
    }

    .table-wrapper > table td strong[b-2ysv9kb14g] {
        color: #111827;
    }


/* =========================================================
   ESTADOS
   ========================================================= */

.estado-badge[b-2ysv9kb14g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
}

.estado-pendiente[b-2ysv9kb14g] {
    background: #fff7ed;
    color: #c2410c;
}

.estado-aceptada[b-2ysv9kb14g] {
    background: #ecfdf5;
    color: #047857;
}

.estado-borrador[b-2ysv9kb14g] {
    background: #eef4ff;
    color: #315a9f;
}

.estado-vencida[b-2ysv9kb14g] {
    background: #f3f4f6;
    color: #6b7280;
}


/* =========================================================
   CARGANDO
   ========================================================= */

.loading[b-2ysv9kb14g] {
    padding: 55px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.empty-state[b-2ysv9kb14g] {
    padding: 55px 20px;
    text-align: center;
}

.empty-state-icon[b-2ysv9kb14g] {
    width: 58px;
    height: 58px;
    margin: 0 auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef4ff;
    font-size: 25px;
}

.empty-state h3[b-2ysv9kb14g] {
    margin: 0;
    color: #1f2937;
    font-size: 18px;
    font-weight: 600;
}

.empty-state p[b-2ysv9kb14g] {
    max-width: 430px;
    margin: 8px auto 20px;
    color: #6b7280;
    font-size: 13px;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.actions[b-2ysv9kb14g] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-action[b-2ysv9kb14g] {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #315a9f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: all .15s ease;
}

    .btn-action:hover[b-2ysv9kb14g] {
        background: #eef4ff;
        border-color: #315a9f;
        transform: translateY(-1px);
    }

    .btn-action:disabled[b-2ysv9kb14g] {
        opacity: .5;
        cursor: not-allowed;
        transform: none;
    }

.btn-edit[b-2ysv9kb14g] {
    color: #315a9f;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal-overlay[b-2ysv9kb14g] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, .58);
}

.modal-container[b-2ysv9kb14g] {
    width: min(700px, calc(100vw - 48px));
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    overflow: hidden;
    animation: inspeccionModalEntrada-b-2ysv9kb14g .18s ease-out;
}

.modal-large[b-2ysv9kb14g] {
    width: min(1000px, calc(100vw - 48px));
}

@keyframes inspeccionModalEntrada-b-2ysv9kb14g {

    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

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


/* =========================================================
   CABECERA DEL MODAL
   ========================================================= */

.modal-header[b-2ysv9kb14g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

    .modal-header h2[b-2ysv9kb14g] {
        margin: 0;
        color: #111827;
        font-size: 18px;
        font-weight: 600;
    }

    .modal-header p[b-2ysv9kb14g] {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 12px;
    }

.modal-close[b-2ysv9kb14g] {
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-close:hover[b-2ysv9kb14g] {
        background: #f3f4f6;
        color: #111827;
    }


/* =========================================================
   CUERPO DEL MODAL
   ========================================================= */

.modal-body[b-2ysv9kb14g] {
    padding: 20px 24px;
    overflow-y: auto;
}

    .modal-body[b-2ysv9kb14g]::-webkit-scrollbar {
        width: 8px;
    }

    .modal-body[b-2ysv9kb14g]::-webkit-scrollbar-track {
        background: #f8fafc;
    }

    .modal-body[b-2ysv9kb14g]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }


/* =========================================================
   GRID DE FORMULARIO
   ========================================================= */

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

.form-group[b-2ysv9kb14g] {
    min-width: 0;
}

.form-group-full[b-2ysv9kb14g] {
    grid-column: span 2;
}


/* =========================================================
   ETIQUETAS
   ========================================================= */

.form-group label[b-2ysv9kb14g] {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

    .form-group label span[b-2ysv9kb14g] {
        color: #dc2626;
    }


/* =========================================================
   INPUTS
   ========================================================= */

.form-control[b-2ysv9kb14g] {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    background: #ffffff;
    color: #111827;
    font-family: inherit;
    font-size: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-control:hover[b-2ysv9kb14g] {
        border-color: #b8c0cc;
    }

    .form-control:focus[b-2ysv9kb14g] {
        border-color: #315a9f;
        box-shadow: 0 0 0 3px rgba(49, 90, 159, .10);
    }

textarea.form-control[b-2ysv9kb14g] {
    min-height: 90px;
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.45;
}

select.form-control[b-2ysv9kb14g] {
    cursor: pointer;
}


/* =========================================================
   SOLO LECTURA
   ========================================================= */

.form-control-readonly[b-2ysv9kb14g] {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}


/* =========================================================
   AYUDA DE CAMPOS
   ========================================================= */

.field-help[b-2ysv9kb14g] {
    margin-top: 2px;
    color: #6b7280;
    font-size: 11px;
}


/* =========================================================
   CHECKBOXES / ACTIVIDADES
   ========================================================= */

.inspeccion-checks[b-2ysv9kb14g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-top: 4px;
}

.inspeccion-check[b-2ysv9kb14g] {
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .inspeccion-check:hover[b-2ysv9kb14g] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #111827;
    }

    .inspeccion-check input[type="checkbox"][b-2ysv9kb14g] {
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: #315a9f;
        cursor: pointer;
    }


/* =========================================================
   ALERTAS
   ========================================================= */

.alert-error[b-2ysv9kb14g] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
}

.alert-success[b-2ysv9kb14g] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 13px;
}


/* =========================================================
   EVIDENCIAS FOTOGRÁFICAS
   ========================================================= */

.evidencias-upload[b-2ysv9kb14g] {
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

    .evidencias-upload input[type="file"][b-2ysv9kb14g] {
        width: 100%;
        font-size: 13px;
        color: #374151;
    }

.evidencias-grid[b-2ysv9kb14g] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.evidencia-card[b-2ysv9kb14g] {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}

    .evidencia-card img[b-2ysv9kb14g] {
        display: block;
        width: 100%;
        height: 170px;
        object-fit: cover;
        background: #f1f5f9;
    }

.evidencia-info[b-2ysv9kb14g] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 11px;
}

    .evidencia-info strong[b-2ysv9kb14g] {
        overflow: hidden;
        color: #374151;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .evidencia-info span[b-2ysv9kb14g] {
        color: #94a3b8;
        font-size: 11px;
    }

.evidencias-count[b-2ysv9kb14g] {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

    .evidencias-count.warning[b-2ysv9kb14g] {
        background: #fff7ed;
        color: #c2410c;
    }

    .evidencias-count.ok[b-2ysv9kb14g] {
        background: #ecfdf5;
        color: #047857;
    }


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

.modal-footer[b-2ysv9kb14g] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

    .modal-footer .btn-primary[b-2ysv9kb14g],
    .modal-footer .btn-secondary[b-2ysv9kb14g] {
        min-width: 130px;
    }


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

@media (max-width: 900px) {

    .inspecciones-page[b-2ysv9kb14g] {
        padding: 20px;
    }

    .modal-overlay[b-2ysv9kb14g] {
        padding: 16px;
    }

    .modal-container[b-2ysv9kb14g] {
        max-height: 96vh;
    }

    .form-grid[b-2ysv9kb14g] {
        grid-template-columns: 1fr;
    }

    .form-group-full[b-2ysv9kb14g] {
        grid-column: auto;
    }

    .inspeccion-checks[b-2ysv9kb14g] {
        grid-template-columns: 1fr;
    }

    .evidencias-grid[b-2ysv9kb14g] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 600px) {

    .inspecciones-page[b-2ysv9kb14g] {
        padding: 16px;
    }

        .inspecciones-page .page-header[b-2ysv9kb14g] {
            flex-direction: column;
            align-items: stretch;
        }

            .inspecciones-page .page-header h1[b-2ysv9kb14g] {
                font-size: 24px;
            }

    .modal-overlay[b-2ysv9kb14g] {
        padding: 8px;
    }

    .modal-container[b-2ysv9kb14g] {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 12px;
    }

    .modal-header[b-2ysv9kb14g] {
        padding: 17px;
    }

    .modal-body[b-2ysv9kb14g] {
        padding: 17px;
    }

    .modal-footer[b-2ysv9kb14g] {
        padding: 14px 17px;
        flex-direction: column-reverse;
    }

        .modal-footer .btn-primary[b-2ysv9kb14g],
        .modal-footer .btn-secondary[b-2ysv9kb14g] {
            width: 100%;
        }

    .evidencias-grid[b-2ysv9kb14g] {
        grid-template-columns: 1fr;
    }

    .evidencia-card img[b-2ysv9kb14g] {
        height: 220px;
    }
}
.evidencia-imagen-btn[b-2ysv9kb14g] {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

    .evidencia-imagen-btn img[b-2ysv9kb14g] {
        display: block;
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 8px 8px 0 0;
    }

.evidencia-visor-overlay[b-2ysv9kb14g] {
    z-index: 9999 !important;
}

.evidencia-visor[b-2ysv9kb14g] {
    position: relative;
    z-index: 10000;
    width: min(90vw, 1100px);
    height: min(90vh, 850px);
    background: #111;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.evidencia-visor-imagen[b-2ysv9kb14g] {
    max-width: 100%;
    max-height: calc(100% - 40px);
    object-fit: contain;
}

.evidencia-visor-cerrar[b-2ysv9kb14g] {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.evidencia-visor-nombre[b-2ysv9kb14g] {
    margin-top: 8px;
    color: white;
    font-size: 13px;
    text-align: center;
    max-width: 100%;
}
/* /Components/Pages/Ventas/Pedidos.razor.rz.scp.css */
.pedidos-page[b-0jtw8zbnnk] {
    padding: 28px;
    max-width: 1600px;
    margin: 0 auto;
}

.page-header[b-0jtw8zbnnk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

    .page-header h1[b-0jtw8zbnnk] {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        color: #111827;
    }

    .page-header p[b-0jtw8zbnnk] {
        margin: 6px 0 0;
        color: #6b7280;
        font-size: 14px;
    }

.header-actions[b-0jtw8zbnnk] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.empresa-selector[b-0jtw8zbnnk] {
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .empresa-selector label[b-0jtw8zbnnk],
    .form-group label[b-0jtw8zbnnk] {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

.btn-primary[b-0jtw8zbnnk],
.btn-secondary[b-0jtw8zbnnk] {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    min-height: 40px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary[b-0jtw8zbnnk] {
    background: #1f2937;
    color: white;
}

    .btn-primary:hover[b-0jtw8zbnnk] {
        opacity: .9;
    }

.btn-secondary[b-0jtw8zbnnk] {
    background: #f3f4f6;
    color: #374151;
}

    .btn-secondary:hover[b-0jtw8zbnnk] {
        background: #e5e7eb;
    }

    .btn-primary:disabled[b-0jtw8zbnnk],
    .btn-secondary:disabled[b-0jtw8zbnnk] {
        opacity: .6;
        cursor: not-allowed;
    }

.table-card[b-0jtw8zbnnk] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.table-wrapper[b-0jtw8zbnnk] {
    overflow-x: auto;
}

    .table-wrapper table[b-0jtw8zbnnk] {
        width: 100%;
        min-width: 1050px;
        border-collapse: collapse;
    }

    .table-wrapper thead[b-0jtw8zbnnk] {
        background: #f9fafb;
    }

    .table-wrapper th[b-0jtw8zbnnk] {
        padding: 13px 16px;
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .table-wrapper td[b-0jtw8zbnnk] {
        padding: 14px 16px;
        border-bottom: 1px solid #f0f1f3;
        font-size: 14px;
        color: #374151;
        vertical-align: middle;
    }

    .table-wrapper tbody tr:hover[b-0jtw8zbnnk] {
        background: #fafafa;
    }

    .table-wrapper td strong[b-0jtw8zbnnk] {
        color: #111827;
    }

.form-control[b-0jtw8zbnnk] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    min-height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: white;
    color: #111827;
    font-size: 14px;
    outline: none;
}

    .form-control:focus[b-0jtw8zbnnk] {
        border-color: #6b7280;
        box-shadow: 0 0 0 2px rgba(107, 114, 128, .1);
    }

    .form-control:disabled[b-0jtw8zbnnk] {
        background: #f3f4f6;
        color: #6b7280;
    }

.estado-badge[b-0jtw8zbnnk],
.tipo-badge[b-0jtw8zbnnk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.tipo-badge[b-0jtw8zbnnk] {
    background: #eef4ff;
    color: #315a9f;
}

.estado-solicitado[b-0jtw8zbnnk] {
    background: #fff7ed;
    color: #c2410c;
}

.estado-programado[b-0jtw8zbnnk] {
    background: #eef4ff;
    color: #315a9f;
}

.estado-ejecutado[b-0jtw8zbnnk] {
    background: #ecfdf5;
    color: #047857;
}

.estado-despachado[b-0jtw8zbnnk] {
    background: #f0fdfa;
    color: #0f766e;
}

.estado-cerrado[b-0jtw8zbnnk] {
    background: #f3f4f6;
    color: #4b5563;
}

.actions[b-0jtw8zbnnk] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-action[b-0jtw8zbnnk] {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #315a9f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: all .15s ease;
}

    .btn-action:hover[b-0jtw8zbnnk] {
        background: #eef4ff;
        border-color: #315a9f;
        transform: translateY(-1px);
    }

.loading[b-0jtw8zbnnk] {
    padding: 55px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.empty-state[b-0jtw8zbnnk] {
    padding: 55px 20px;
    text-align: center;
}

.empty-state-icon[b-0jtw8zbnnk] {
    width: 58px;
    height: 58px;
    margin: 0 auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef4ff;
    font-size: 25px;
}

.empty-state h3[b-0jtw8zbnnk] {
    margin: 0;
    color: #1f2937;
    font-size: 18px;
    font-weight: 600;
}

.empty-state p[b-0jtw8zbnnk] {
    max-width: 430px;
    margin: 8px auto 20px;
    color: #6b7280;
    font-size: 13px;
}

.alert-error[b-0jtw8zbnnk],
.alert-success[b-0jtw8zbnnk] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 14px;
}

.alert-error[b-0jtw8zbnnk] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.alert-success[b-0jtw8zbnnk] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

.modal-overlay[b-0jtw8zbnnk] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, .58);
}

.modal-container[b-0jtw8zbnnk] {
    width: min(800px, calc(100vw - 48px));
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    overflow: hidden;
}

.modal-header[b-0jtw8zbnnk] {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

    .modal-header h2[b-0jtw8zbnnk] {
        margin: 0;
        font-size: 20px;
        color: #111827;
    }

    .modal-header p[b-0jtw8zbnnk] {
        margin: 5px 0 0;
        color: #6b7280;
        font-size: 13px;
    }

.modal-close[b-0jtw8zbnnk] {
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}

.modal-body[b-0jtw8zbnnk] {
    padding: 24px;
    overflow-y: auto;
}

.modal-footer[b-0jtw8zbnnk] {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.form-section[b-0jtw8zbnnk] {
    margin-bottom: 10px;
}

.section-title[b-0jtw8zbnnk] {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e5e7eb;
}

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

.form-group[b-0jtw8zbnnk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group-full[b-0jtw8zbnnk] {
    grid-column: 1 / -1;
}

.field-help[b-0jtw8zbnnk] {
    color: #6b7280;
    font-size: 11px;
}

.textarea-control[b-0jtw8zbnnk] {
    resize: vertical;
    min-height: 90px;
}

@media (max-width: 900px) {
    .pedidos-page[b-0jtw8zbnnk] {
        padding: 18px;
    }

    .page-header[b-0jtw8zbnnk] {
        flex-direction: column;
    }

    .header-actions[b-0jtw8zbnnk] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .empresa-selector[b-0jtw8zbnnk] {
        min-width: 0;
        width: 100%;
    }

    .form-grid[b-0jtw8zbnnk] {
        grid-template-columns: 1fr;
    }

    .form-group-full[b-0jtw8zbnnk] {
        grid-column: auto;
    }

    .modal-overlay[b-0jtw8zbnnk] {
        padding: 10px;
    }

    .modal-body[b-0jtw8zbnnk] {
        padding: 18px;
    }
}

@media (max-width: 600px) {
    .pedidos-page[b-0jtw8zbnnk] {
        padding: 12px;
    }

    .page-header h1[b-0jtw8zbnnk] {
        font-size: 24px;
    }

    .modal-header[b-0jtw8zbnnk],
    .modal-footer[b-0jtw8zbnnk] {
        padding: 15px;
    }

    .modal-footer[b-0jtw8zbnnk] {
        flex-direction: column-reverse;
    }

        .modal-footer button[b-0jtw8zbnnk] {
            width: 100%;
        }
}