/*
 * PROJECTO - Layout global unificado
 * Concepto 3: selector contextual + navegación secundaria compacta.
 * Este archivo se carga al final para mantener la misma estructura visual
 * en todas las vistas sin alterar los estilos internos de cada módulo.
 */

body.app-shell {
    --layout-accent: var(--theme-primary, #ff5a00);
    --layout-accent-rgb: var(--theme-primary-rgb, 255, 90, 0);
    --layout-soft: var(--primary-soft, color-mix(in srgb, var(--layout-accent) 11%, var(--theme-surface, #fff)));
    --layout-ink: var(--theme-heading, #101a33);
    --layout-muted: var(--theme-muted, #69748b);
    --layout-border: var(--theme-border, #e3e8f0);
    --layout-surface: var(--theme-surface, #fff);
    --layout-bg: var(--theme-bg, #f6f8fb);
    background: var(--layout-bg) !important;
}

/* ==========================================================
   Trims: sistema visual compartido con Blanks Entradas
   ========================================================== */
body.app-shell[data-department="trims"] {
    --trims-orange: #ff5a00;
    --trims-orange-rgb: 255, 90, 0;
    --trims-orange-dark: #e94f00;
    --trims-orange-soft: #fff1e8;
    --theme-primary: var(--trims-orange);
    --theme-primary-rgb: var(--trims-orange-rgb);
    --theme-primary-hover: var(--trims-orange-dark);
    --theme-accent: var(--trims-orange);
    --primary-blue: var(--trims-orange);
    --primary: var(--trims-orange);
    --primary-dark: var(--trims-orange-dark);
    --primary-rgb: var(--trims-orange-rgb);
    --primary-soft: var(--trims-orange-soft);
    --primary-light: var(--trims-orange-soft);
    --dept-color: var(--trims-orange);
    --dept-soft: var(--trims-orange-soft);
    --ui-primary: var(--trims-orange);
    --ui-primary-rgb: var(--trims-orange-rgb);
    --app-primary: var(--trims-orange);
    --app-primary-dark: var(--trims-orange-dark);
    --ios-primary: var(--trims-orange);
    --ios-primary-rgb: var(--trims-orange-rgb);
}

html[data-theme="dark"] body.app-shell[data-department="trims"] {
    --trims-orange-soft: rgba(var(--trims-orange-rgb), .16);
    --primary-soft: rgba(var(--trims-orange-rgb), .16);
    --primary-light: rgba(var(--trims-orange-rgb), .16);
    --dept-soft: rgba(var(--trims-orange-rgb), .16);
}

body.app-shell[data-department="trims"] :is(.app-main, .app-container) {
    background:
        radial-gradient(circle at 12% 0, rgba(var(--trims-orange-rgb), .08), transparent 30rem),
        radial-gradient(circle at 88% 6%, rgba(var(--trims-orange-rgb), .04), transparent 26rem),
        var(--theme-bg) !important;
}

body.app-shell[data-department="trims"] :is(
    .view-shell,
    .container-fluid,
    .page-wrapper
) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    color: var(--theme-text) !important;
}

body.app-shell[data-department="trims"] .view-shell {
    display: grid;
    gap: 10px;
}

body.app-shell[data-department="trims"] :is(
    .view-toolbar,
    .card,
    .content-panel,
    .table-responsive
) {
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    border-radius: 12px !important;
    background: var(--theme-surface) !important;
    box-shadow: 0 8px 22px rgba(24, 39, 75, .06) !important;
}

body.app-shell[data-department="trims"] .view-toolbar {
    min-height: 66px;
    padding: 11px 14px !important;
    border: 1px solid var(--theme-border) !important;
}

body.app-shell[data-department="trims"] .view-title {
    color: var(--theme-heading) !important;
    font-size: clamp(17px, 2vw, 21px) !important;
    font-weight: 900 !important;
}

body.app-shell[data-department="trims"] .view-title > i,
body.app-shell[data-department="trims"] .view-toolbar i.text-primary {
    color: var(--trims-orange) !important;
}

body.app-shell[data-department="trims"] .view-subtitle {
    color: var(--theme-muted) !important;
}

body.app-shell[data-department="trims"] :is(
    .btn-primary,
    .btn-success
) {
    color: #fff !important;
    border-color: var(--trims-orange) !important;
    background: linear-gradient(180deg, var(--trims-orange), var(--trims-orange-dark)) !important;
    box-shadow: 0 7px 16px rgba(var(--trims-orange-rgb), .18) !important;
}

body.app-shell[data-department="trims"] :is(
    .btn-outline-primary,
    .btn-outline-success,
    .btn-outline-secondary,
    .btn-outline-dark,
    .btn-light
) {
    color: var(--theme-heading) !important;
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
}

body.app-shell[data-department="trims"] :is(
    .btn-outline-primary,
    .btn-outline-success,
    .btn-outline-secondary,
    .btn-outline-dark,
    .btn-light
):hover {
    color: var(--trims-orange) !important;
    border-color: color-mix(in srgb, var(--trims-orange) 40%, var(--theme-border)) !important;
    background: var(--trims-orange-soft) !important;
}

body.app-shell[data-department="trims"] :is(
    .nav-tabs .nav-link.active,
    .nav-pills .nav-link.active,
    .page-item.active .page-link
) {
    color: #fff !important;
    border-color: var(--trims-orange) !important;
    background: var(--trims-orange) !important;
}

body.app-shell[data-department="trims"] :is(
    .nav-tabs .nav-link:not(.active),
    .nav-pills .nav-link:not(.active)
) {
    color: var(--theme-muted) !important;
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
}

body.app-shell[data-department="trims"] :is(
    .table,
    .table-trims,
    .pulled-table,
    .modern-table
) {
    --bs-table-bg: var(--theme-surface);
    --bs-table-color: var(--theme-text);
    --bs-table-border-color: var(--theme-border);
    width: 100%;
    margin: 0;
    color: var(--theme-text) !important;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--theme-surface) !important;
}

body.app-shell[data-department="trims"] :is(
    .table,
    .table-trims,
    .pulled-table,
    .modern-table
) thead th,
body.app-shell[data-department="trims"] :is(
    .table thead.table-dark th,
    .table thead.table-light th,
    .table thead .table-success > th,
    .table-dark > :not(caption) > * > *
) {
    color: color-mix(in srgb, var(--trims-orange) 62%, var(--theme-heading)) !important;
    border-color: var(--theme-border) !important;
    background: var(--trims-orange-soft) !important;
    background-image: none !important;
    font-weight: 900 !important;
}

body.app-shell[data-department="trims"] .table-trims :is(.section-entry, .section-exit, .section-stock) {
    color: color-mix(in srgb, var(--trims-orange) 62%, var(--theme-heading)) !important;
    border-color: var(--theme-border) !important;
    background: var(--trims-orange-soft) !important;
}

body.app-shell[data-department="trims"] :is(
    .table,
    .table-trims,
    .pulled-table,
    .modern-table
) tbody td {
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
}

body.app-shell[data-department="trims"] :is(
    .table,
    .table-trims,
    .pulled-table,
    .modern-table
) tbody tr:nth-child(even) td {
    background: var(--theme-surface-soft) !important;
}

body.app-shell[data-department="trims"] :is(
    .table,
    .table-trims,
    .pulled-table,
    .modern-table
) tbody tr:hover td {
    background: color-mix(in srgb, var(--trims-orange) 7%, var(--theme-surface)) !important;
}

body.app-shell[data-department="trims"] :is(
    .card-header,
    .card-header-custom,
    .trims-panel-header
) {
    color: var(--theme-heading) !important;
    border-color: var(--theme-border) !important;
    background: color-mix(in srgb, var(--theme-surface) 88%, var(--trims-orange-soft)) !important;
}

body.app-shell[data-department="trims"] :is(
    .form-control:focus,
    .form-select:focus,
    .select2-container--bootstrap-5.select2-container--focus .select2-selection
) {
    border-color: color-mix(in srgb, var(--trims-orange) 55%, var(--theme-border)) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--trims-orange-rgb), .14) !important;
}

body.app-shell[data-department="trims"] .app-topbar {
    color: var(--theme-heading) !important;
    border-bottom-color: color-mix(in srgb, var(--trims-orange) 16%, var(--theme-border)) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--theme-surface) 96%, var(--trims-orange-soft)), var(--theme-surface)) !important;
}

body.app-shell[data-department="trims"] :is(.topbar-search i, .department-views-nav-label i) {
    color: var(--trims-orange) !important;
}

body.app-shell[data-department="trims"] :is(.theme-picker, .topbar-icon) {
    color: var(--theme-heading) !important;
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
}

body.app-shell[data-department="trims"] :is(.theme-picker, .topbar-icon):hover {
    color: var(--trims-orange) !important;
    border-color: color-mix(in srgb, var(--trims-orange) 38%, var(--theme-border)) !important;
    background: var(--trims-orange-soft) !important;
}

body.app-shell[data-department="trims"] .topbar-avatar,
body.app-shell[data-department="trims"] .notification-badge {
    color: #fff !important;
    background: linear-gradient(180deg, var(--trims-orange), var(--trims-orange-dark)) !important;
}

body.app-shell[data-department="trims"] .department-views-nav {
    border-color: color-mix(in srgb, var(--trims-orange) 16%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-surface) 96%, var(--trims-orange-soft)) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

body.app-shell[data-department="trims"] .department-views-nav-link {
    color: var(--theme-text) !important;
    border-radius: 11px !important;
}

body.app-shell[data-department="trims"] .department-views-nav-link:hover {
    color: var(--trims-orange) !important;
    border-color: color-mix(in srgb, var(--trims-orange) 34%, var(--theme-border)) !important;
    background: var(--trims-orange-soft) !important;
}

body.app-shell[data-department="trims"] .department-views-nav-link.active,
body.app-shell[data-department="trims"] .department-views-nav-link.active:hover,
body.app-shell[data-department="trims"] .department-views-nav-link.active:focus,
body.app-shell[data-department="trims"] .department-views-nav-link.active:visited {
    color: #fff !important;
    border-color: var(--trims-orange) !important;
    background: linear-gradient(180deg, var(--trims-orange), var(--trims-orange-dark)) !important;
    box-shadow: 0 9px 20px rgba(var(--trims-orange-rgb), .24) !important;
}

body.app-shell[data-department="trims"] .app-statusbar {
    color: var(--theme-muted) !important;
    border-top-color: color-mix(in srgb, var(--trims-orange) 14%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-surface) 96%, var(--trims-orange-soft)) !important;
}

body.app-shell[data-department="trims"] .app-statusbar :is(strong, a) {
    color: var(--trims-orange) !important;
}

/* Inventario de empaque y consumibles: misma lectura operativa de Blanks. */
body.app-shell[data-department="trims"] .trims-consumables-screen {
    gap: 12px;
}

body.app-shell[data-department="trims"] .trims-stock-header,
body.app-shell[data-department="trims"] .trims-stock-content {
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    background: var(--theme-surface);
    box-shadow: 0 8px 22px rgba(24, 39, 75, .06);
}

body.app-shell[data-department="trims"] .trims-stock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 74px;
    padding: 13px 16px;
}

body.app-shell[data-department="trims"] .trims-stock-heading {
    min-width: 0;
}

body.app-shell[data-department="trims"] .trims-stock-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--trims-orange);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.app-shell[data-department="trims"] .trims-stock-heading h1 {
    margin: 1px 0 0;
    color: var(--theme-heading);
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 900;
    line-height: 1.15;
}

body.app-shell[data-department="trims"] .trims-stock-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

body.app-shell[data-department="trims"] .trims-stock-actions .btn {
    min-height: 36px;
    padding-inline: 11px;
    font-size: 12px;
    font-weight: 800;
}

body.app-shell[data-department="trims"] .trims-stock-tabs {
    gap: 6px;
    margin: 0;
    padding: 0 4px;
    border: 0;
}

body.app-shell[data-department="trims"] .trims-stock-tabs .nav-link {
    min-width: 106px;
    padding: 9px 14px;
    border: 1px solid var(--theme-border) !important;
    border-radius: 10px 10px 0 0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .03em;
}

body.app-shell[data-department="trims"] .trims-stock-content {
    min-width: 0;
    padding: 12px;
}

body.app-shell[data-department="trims"] .trims-stock-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 11px;
}

body.app-shell[data-department="trims"] .trims-stock-metric {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-surface-soft, #f8fafc);
}

body.app-shell[data-department="trims"] .trims-stock-metric span {
    display: block;
    overflow: hidden;
    color: var(--theme-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .055em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

body.app-shell[data-department="trims"] .trims-stock-metric strong {
    display: block;
    margin-top: 2px;
    color: var(--theme-heading);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
}

body.app-shell[data-department="trims"] .trims-stock-metric-available {
    border-color: color-mix(in srgb, var(--trims-orange) 34%, var(--theme-border));
    background: var(--trims-orange-soft);
}

body.app-shell[data-department="trims"] .trims-stock-metric-available strong {
    color: var(--trims-orange-dark);
}

body.app-shell[data-department="trims"] .trims-stock-filterbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

body.app-shell[data-department="trims"] .trims-stock-filterbar > strong {
    color: var(--theme-heading);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .07em;
}

body.app-shell[data-department="trims"] .trims-stock-search {
    width: min(300px, 100%);
    margin-left: auto;
    border-color: var(--theme-border);
    font-size: 12px;
}

body.app-shell[data-department="trims"] .trims-stock-table-wrap {
    overflow: auto;
    border: 1px solid var(--theme-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

body.app-shell[data-department="trims"] .trims-stock-table-wrap .table-trims {
    min-width: max-content;
}

body.app-shell[data-department="trims"] .trims-stock-table-wrap .table-trims th {
    padding: 9px 10px;
    font-size: 10px;
    letter-spacing: .025em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

body.app-shell[data-department="trims"] .trims-stock-table-wrap .table-trims td {
    padding: 9px 10px;
    font-size: 12px;
    text-align: center;
}

body.app-shell[data-department="trims"] .trims-stock-table-wrap .table-trims .sticky-desc {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 190px;
    max-width: 280px;
    text-align: left;
}

body.app-shell[data-department="trims"] .trims-stock-table-wrap .table-trims thead .sticky-desc {
    z-index: 4;
}

body.app-shell[data-department="trims"] .trims-stock-description {
    color: var(--theme-heading) !important;
    font-weight: 800;
    white-space: normal;
}

body.app-shell[data-department="trims"] .trims-stock-table-wrap .table-trims .bg-total,
body.app-shell[data-department="trims"] .trims-stock-table-wrap .table-trims .bg-final {
    background: color-mix(in srgb, var(--trims-orange) 10%, var(--theme-surface)) !important;
    color: var(--theme-heading) !important;
    font-weight: 900;
}

@media screen and (max-width: 780px) {
    body.app-shell[data-department="trims"] .trims-stock-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    body.app-shell[data-department="trims"] .trims-stock-actions {
        width: 100%;
        justify-content: stretch;
    }

    body.app-shell[data-department="trims"] .trims-stock-actions .btn {
        flex: 1 1 auto;
    }

    body.app-shell[data-department="trims"] .trims-stock-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-shell[data-department="trims"] .trims-stock-filterbar {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    body.app-shell[data-department="trims"] .trims-stock-search {
        width: 100%;
    }
}

@media screen and (min-width: 1100px) {
    body.app-shell[data-department="trims"] .app-container {
        padding: 6px 8px 14px !important;
    }

    body.app-shell[data-department="trims"] .app-container > :is(.view-shell, .container-fluid, .page-wrapper) {
        padding: 8px 10px 12px !important;
    }
}

@media screen and (max-width: 768px) {
    body.app-shell[data-department="trims"] .app-container {
        padding: 3px !important;
    }

    body.app-shell[data-department="trims"] .app-container > :is(.view-shell, .container-fluid, .page-wrapper) {
        padding: 5px 6px 10px !important;
    }

    body.app-shell[data-department="trims"] .view-toolbar {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

body.app-shell .industrial-shell,
body.app-shell .app-workspace {
    width: 100%;
    min-width: 0;
}

/* Barra principal: logo, selector de módulo, búsqueda, avisos y usuario. */
body.app-shell .app-topbar {
    min-height: 62px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    position: sticky;
    top: 0;
    z-index: 1025;
    padding: 0 clamp(14px, 1.45vw, 24px) !important;
    color: var(--layout-ink) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--layout-border) !important;
    background: color-mix(in srgb, var(--layout-surface) 97%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px);
}

body.app-shell .topbar-brand {
    min-width: max-content;
    display: inline-flex !important;
    align-items: center;
    gap: 9px !important;
    color: var(--layout-ink) !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    text-decoration: none;
}

body.app-shell .topbar-brand-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--layout-accent);
    border: 2px solid var(--layout-accent);
    border-radius: 9px;
    background: var(--layout-surface);
    font-size: 1rem;
}

body.app-shell .topbar-company-logo {
    width: 72px !important;
    max-width: 72px !important;
    height: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: #fff;
    overflow: hidden !important;
}

body.app-shell .topbar-company-logo img,
body.app-shell .sidebar-company-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center center;
}

body.app-shell .sidebar-company-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: .15rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 9px;
    background: #fff;
}

body.app-shell .layout-department-dropdown {
    flex: 0 0 auto;
}

body.app-shell .layout-department-selector {
    min-width: 142px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 11px;
    color: #fff !important;
    border: 1px solid var(--layout-accent) !important;
    border-radius: 8px;
    background: var(--layout-accent) !important;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

body.app-shell .layout-department-selector :where(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
}

body.app-shell .layout-department-selector:hover,
body.app-shell .layout-department-selector:focus,
body.app-shell .layout-department-selector[aria-expanded="true"] {
    color: #fff !important;
    border-color: color-mix(in srgb, var(--layout-accent) 82%, #111827) !important;
    background: color-mix(in srgb, var(--layout-accent) 86%, #111827) !important;
    box-shadow: 0 0 0 3px rgba(var(--layout-accent-rgb), .10) !important;
    outline: 0;
}

body.app-shell .layout-department-selector::after {
    margin-left: auto;
}

body.app-shell .layout-department-menu {
    width: min(320px, calc(100vw - 20px));
    max-height: min(610px, calc(100vh - 84px));
    padding: 8px;
    overflow-y: auto;
    color: var(--layout-ink) !important;
    border: 1px solid var(--layout-border) !important;
    border-radius: 11px !important;
    background: var(--layout-surface) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .15) !important;
}

body.app-shell .layout-department-menu-title {
    padding: 7px 10px 8px;
    color: var(--layout-muted);
    border-bottom: 1px solid var(--layout-border);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .04em !important;
    text-transform: uppercase;
}

body.app-shell .layout-department-menu .dropdown-item {
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
    padding: 7px 10px;
    color: var(--layout-ink) !important;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent !important;
    font-size: .79rem;
    font-weight: 750;
}

body.app-shell .layout-department-menu .dropdown-item i {
    width: 22px;
    color: var(--layout-muted);
    text-align: center;
    font-size: .98rem;
}

body.app-shell .layout-department-menu .dropdown-item:hover,
body.app-shell .layout-department-menu .dropdown-item:focus {
    color: var(--layout-accent) !important;
    border-color: color-mix(in srgb, var(--layout-accent) 25%, var(--layout-border));
    background: var(--layout-soft) !important;
}

body.app-shell .layout-department-menu .dropdown-item:hover i,
body.app-shell .layout-department-menu .dropdown-item:focus i {
    color: var(--layout-accent);
}

body.app-shell .layout-department-menu .dropdown-item.active,
body.app-shell .layout-department-menu .dropdown-item.active:hover,
body.app-shell .layout-department-menu .dropdown-item.active:focus {
    color: #fff !important;
    border-color: var(--layout-accent) !important;
    background: var(--layout-accent) !important;
}

body.app-shell .layout-department-menu .dropdown-item.active :where(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
}

body.app-shell .topbar-search {
    width: min(390px, 31vw) !important;
    min-width: 190px;
    min-height: 39px !important;
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 0 12px !important;
    color: var(--layout-muted) !important;
    border: 1px solid var(--layout-border) !important;
    border-radius: 8px !important;
    background: var(--layout-surface) !important;
    box-shadow: none !important;
}

body.app-shell .topbar-search i {
    color: var(--layout-muted) !important;
}

body.app-shell .topbar-search input {
    min-width: 0;
    width: 100%;
    padding: 0 !important;
    color: var(--layout-ink) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .78rem !important;
    font-weight: 600;
}

body.app-shell .topbar-actions {
    width: auto !important;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px !important;
    margin-left: auto;
    overflow: visible !important;
}

body.app-shell .topbar-icon {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    color: var(--layout-muted) !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-shell .topbar-icon:hover,
body.app-shell .topbar-icon:focus {
    color: var(--layout-accent) !important;
    border-color: color-mix(in srgb, var(--layout-accent) 24%, var(--layout-border)) !important;
    background: var(--layout-soft) !important;
}

body.app-shell .notification-badge {
    color: #fff !important;
    border: 2px solid var(--layout-surface) !important;
    background: var(--layout-accent) !important;
}

body.app-shell .topbar-user {
    min-width: 150px;
    min-height: 42px;
    display: grid !important;
    grid-template-columns: 35px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 8px;
    padding: 3px 7px 3px 4px !important;
    color: var(--layout-ink) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
}

body.app-shell .topbar-user:hover,
body.app-shell .topbar-user:focus,
body.app-shell .topbar-user[aria-expanded="true"] {
    border-color: var(--layout-border) !important;
    background: var(--layout-surface) !important;
}

body.app-shell .topbar-avatar {
    width: 35px !important;
    height: 35px !important;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--layout-accent) 74%, #111827) !important;
    border: 0 !important;
    border-radius: 50%;
    background: var(--layout-soft) !important;
    box-shadow: none !important;
    font-size: .72rem;
    font-weight: 900;
}

body.app-shell .topbar-user-text {
    min-width: 0;
}

body.app-shell .topbar-user-text strong,
body.app-shell .topbar-user-text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app-shell .topbar-user-text strong {
    color: var(--layout-ink);
    font-size: .74rem;
    font-weight: 850;
}

body.app-shell .topbar-user-text small {
    color: var(--layout-muted);
    font-size: .64rem;
    font-weight: 650;
}

body.app-shell .topbar-user-chevron {
    color: var(--layout-muted);
    font-size: .7rem;
}

body.app-shell .topbar-account-menu {
    width: 260px;
    padding: 8px;
    color: var(--layout-ink) !important;
    border: 1px solid var(--layout-border) !important;
    border-radius: 11px !important;
    background: var(--layout-surface) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .15) !important;
}

body.app-shell .topbar-account-heading {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 7px 8px 10px;
    border-bottom: 1px solid var(--layout-border);
}

body.app-shell .topbar-account-heading strong,
body.app-shell .topbar-account-heading small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app-shell .topbar-account-heading strong {
    font-size: .78rem;
    font-weight: 850;
}

body.app-shell .topbar-account-heading small {
    color: var(--layout-muted);
    font-size: .67rem;
}

body.app-shell .topbar-account-row,
body.app-shell .topbar-theme-row {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 9px;
    color: var(--layout-muted);
    font-size: .72rem;
    font-weight: 750;
}

body.app-shell .topbar-account-row strong {
    min-width: 25px;
    min-height: 23px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    color: #fff;
    border-radius: 999px;
    background: #16a34a;
}

body.app-shell .topbar-account-online-list {
    display: grid;
    gap: 3px;
    padding: 0 6px 6px;
    border-bottom: 1px solid var(--layout-border);
}

body.app-shell .topbar-account-online-user {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 4px;
    border-radius: 7px;
    background: color-mix(in srgb, #16a34a 7%, var(--layout-surface));
}

body.app-shell .topbar-account-online-user .topbar-online-avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #16a34a;
    font-size: .62rem;
    font-weight: 900;
}

body.app-shell .topbar-account-online-user b,
body.app-shell .topbar-account-online-user small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app-shell .topbar-account-online-user b {
    color: var(--layout-ink);
    font-size: .68rem;
    font-weight: 800;
}

body.app-shell .topbar-account-online-user small {
    color: var(--layout-muted);
    font-size: .59rem;
}

body.app-shell .topbar-theme-row .theme-picker {
    width: 86px !important;
    min-width: 86px !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 24px 0 8px !important;
    border: 1px solid var(--layout-border) !important;
    border-radius: 6px !important;
    background-color: var(--layout-surface) !important;
    font-size: .7rem;
}

body.app-shell .topbar-account-menu .dropdown-item {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    color: var(--layout-ink) !important;
    border: 0 !important;
    border-radius: 7px;
    background: transparent !important;
    font-size: .75rem;
    font-weight: 750;
}

body.app-shell .topbar-account-menu .dropdown-item:hover,
body.app-shell .topbar-account-menu .dropdown-item:focus {
    color: var(--layout-accent) !important;
    background: var(--layout-soft) !important;
}

body.app-shell .topbar-account-menu .topbar-account-logout {
    width: 100%;
    color: #c62828 !important;
}

/* Segunda barra: solamente las vistas disponibles del contexto actual. */
body.app-shell .department-views-nav {
    width: 100% !important;
    min-height: 45px;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 7px clamp(12px, 1.35vw, 22px) !important;
    color: var(--layout-ink) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--layout-border) !important;
    border-radius: 0 !important;
    background: var(--layout-surface) !important;
    box-shadow: none !important;
}

body.app-shell .department-views-nav-label {
    display: none !important;
}

body.app-shell .department-views-nav-scroll {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}

body.app-shell .department-views-nav-link,
body.app-shell .department-views-nav-link:visited {
    min-height: 30px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0 10px !important;
    color: var(--layout-muted) !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .72rem !important;
    font-weight: 750 !important;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

body.app-shell .department-views-nav-link i {
    color: inherit !important;
    font-size: .82rem !important;
}

body.app-shell .department-views-nav-link:hover,
body.app-shell .department-views-nav-link:focus {
    color: var(--layout-accent) !important;
    border-color: color-mix(in srgb, var(--layout-accent) 28%, var(--layout-border)) !important;
    background: var(--layout-soft) !important;
    box-shadow: none !important;
    outline: 0;
}

body.app-shell .department-views-nav-link.active,
body.app-shell .department-views-nav-link.active:hover,
body.app-shell .department-views-nav-link.active:focus,
body.app-shell .department-views-nav-link.active:visited {
    color: #fff !important;
    border-color: var(--layout-accent) !important;
    background: var(--layout-accent) !important;
    box-shadow: none !important;
    outline: 0;
}

body.app-shell .department-views-nav-link.active i,
body.app-shell .department-views-nav-link.active span {
    color: #fff !important;
    -webkit-text-fill-color: currentColor;
}

/* Ancho y espaciado constantes para cualquier vista. */
body.app-shell .app-main,
body.app-shell .app-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body.app-shell .app-container {
    min-height: calc(100vh - 108px);
    padding: clamp(12px, 1.25vw, 20px) clamp(12px, 1.4vw, 24px) 24px !important;
}

body.app-shell .app-statusbar {
    min-height: 44px !important;
    padding: 8px clamp(14px, 1.45vw, 24px) !important;
    color: var(--layout-muted) !important;
    border: 0 !important;
    border-top: 1px solid var(--layout-border) !important;
    background: var(--layout-surface) !important;
    box-shadow: none !important;
}

/* Órdenes activas: tabla neutra, texto legible y estados operativos. */
body.app-shell .production-orders-page {
    --production-table-ink: #172033;
    --production-table-muted: #536078;
    --production-table-border: #d8dee8;
}

body.app-shell .production-orders-page .production-orders-icon {
    color: var(--layout-accent) !important;
    border: 1px solid color-mix(in srgb, var(--layout-accent) 24%, var(--production-table-border)) !important;
    background: var(--layout-soft) !important;
}

body.app-shell .production-orders-table {
    color: var(--production-table-ink) !important;
    background: #fff !important;
    border-color: var(--production-table-border) !important;
}

body.app-shell .production-orders-table thead th {
    color: #172033 !important;
    border-color: #cfd8e6 !important;
    background: #eef3f8 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

body.app-shell .production-orders-table tbody td {
    color: var(--production-table-ink) !important;
    border-color: var(--production-table-border) !important;
    background: #fff !important;
    font-size: 9px !important;
    font-weight: 650;
}

body.app-shell .production-orders-table tbody tr.production-order-row:nth-of-type(odd) > td:not(.production-dept-status-cell) {
    background: #fafbfc !important;
}

body.app-shell .production-orders-table tbody tr.production-order-row:hover > td:not(.production-dept-status-cell) {
    color: #111827 !important;
    background: #fff7ed !important;
}

body.app-shell .production-orders-table :where(
    .production-order-code,
    .production-text-cell strong,
    .production-total-cell
) {
    color: #111827 !important;
    font-weight: 900 !important;
}

body.app-shell .production-orders-table :where(
    .production-date-cell,
    .production-text-cell span,
    .production-description-cell
) {
    color: #3f4b60 !important;
}

body.app-shell .production-orders-table tbody tr.production-week-separator > td,
body.app-shell .production-orders-table tbody tr.production-week-separator.week-tone-0 > td,
body.app-shell .production-orders-table tbody tr.production-week-separator.week-tone-1 > td,
body.app-shell .production-orders-table tbody tr.production-week-separator.week-tone-2 > td,
body.app-shell .production-orders-table tbody tr.production-week-separator.week-tone-3 > td {
    color: #273248 !important;
    border-color: var(--production-table-border) !important;
    border-left-color: var(--layout-accent) !important;
    background: #f6f7f9 !important;
    font-weight: 900 !important;
}

body.app-shell .production-orders-table .production-dept-status-cell,
body.app-shell .production-orders-table .production-dept-status-cell .production-dept-status,
body.app-shell .production-orders-table .production-dept-status-cell .status-pill {
    color: inherit !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    text-shadow: none !important;
}

body.app-shell .production-orders-table .production-status-cell {
    color: var(--status-fg, #fff) !important;
    background: var(--status-bg, #64748b) !important;
}

body.app-shell .production-orders-table .production-status-cell .production-order-state {
    color: inherit !important;
}

body.app-shell .production-orders-table .production-status-cell {
    padding: 0 !important;
}

body.app-shell .production-orders-table .production-status-cell .production-order-state {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-shell .production-orders-table .production-status-cell .production-order-state.note-unread {
    box-shadow: inset 0 0 0 2px #f59e0b !important;
}

body.app-shell .production-orders-table .production-dept-status-cell.board-complete,
body.app-shell .production-orders-table .production-dept-status-cell:has(.status-complete) {
    color: var(--status-fg, #fff) !important;
    background: var(--status-bg, #64748b) !important;
}

body.app-shell .production-orders-table .production-dept-status-cell.board-partial,
body.app-shell .production-orders-table .production-dept-status-cell.board-neck,
body.app-shell .production-orders-table .production-dept-status-cell:has(.status-partial),
body.app-shell .production-orders-table .production-dept-status-cell:has(.status-neck) {
    color: var(--status-fg, #352100) !important;
    background: var(--status-bg, #64748b) !important;
}

body.app-shell .production-orders-table .production-dept-status-cell.board-paperwork,
body.app-shell .production-orders-table .production-dept-status-cell:has(.status-paperwork) {
    color: var(--status-fg, #fff) !important;
    background: var(--status-bg, #64748b) !important;
}

body.app-shell .production-orders-table .production-dept-status-cell.board-prod,
body.app-shell .production-orders-table .production-dept-status-cell:has(.status-prod) {
    color: var(--status-fg, #fff) !important;
    background: var(--status-bg, #64748b) !important;
}

body.app-shell .production-orders-table .production-dept-status-cell.board-trims,
body.app-shell .production-orders-table .production-dept-status-cell:has(.status-trims) {
    color: var(--status-fg, #fff) !important;
    background: var(--status-bg, #64748b) !important;
}

body.app-shell .production-orders-table .production-dept-status-cell.board-packing,
body.app-shell .production-orders-table .production-dept-status-cell:has(.status-packing) {
    color: var(--status-fg, #fff) !important;
    background: var(--status-bg, #64748b) !important;
}

body.app-shell .production-orders-table .production-dept-status-cell.board-shipping,
body.app-shell .production-orders-table .production-dept-status-cell:has(.status-shipping) {
    color: var(--status-fg, #fff) !important;
    background: var(--status-bg, #64748b) !important;
}

body.app-shell .production-orders-table .production-dept-status-cell.board-inactive,
body.app-shell .production-orders-table .production-dept-status-cell:has(.status-inactive) {
    color: var(--status-fg, #344054) !important;
    background: var(--status-bg, #64748b) !important;
}

body.app-shell .production-orders-table .production-dept-status-cell .status-pill,
body.app-shell .production-orders-table .production-dept-status-cell .status-pill span {
    color: inherit !important;
}

/* El status usa una sola superficie: la celda coloreada desde Catálogos. */
body.app-shell .production-orders-table .production-dept-status-cell .production-dept-status,
body.app-shell .production-orders-table .production-dept-status-cell .status-pill {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 3px !important;
    color: inherit !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-shell .production-orders-table .production-dept-status-cell .production-dept-status.note-unread {
    box-shadow: inset 0 0 0 2px #f59e0b !important;
}

/* Contraste estable para botones llenos y para el selector del dashboard. */
body.app-shell :where(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-dark),
body.app-shell :where(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-dark) :where(i, span, strong),
body.app-shell .production-primary-button,
body.app-shell .production-primary-button :where(i, span),
body.app-shell .production-columns-control > .production-toolbar-button.has-hidden-columns,
body.app-shell .production-columns-control > .production-toolbar-button.has-hidden-columns i {
    color: #fff !important;
}

body.app-shell .btn-warning,
body.app-shell .btn-warning :where(i, span, strong) {
    color: #172033 !important;
}

body.app-shell .permission-dept-button.is-active,
body.app-shell .permission-dept-button.is-active .permission-dept-text strong,
body.app-shell .permission-dept-button.is-active .permission-dept-text small {
    color: #fff !important;
}

body.app-shell .production-columns-control {
    position: relative;
    flex: 0 0 auto;
}

body.app-shell .production-columns-control > .production-toolbar-button.has-hidden-columns {
    color: #fff !important;
    border-color: var(--layout-accent) !important;
    background: var(--layout-accent) !important;
}

body.app-shell .production-columns-menu {
    width: min(300px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 100px));
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 1060;
    padding: 10px;
    overflow: hidden;
    color: var(--production-table-ink, #172033);
    border: 1px solid var(--production-table-border, #d8dee8);
    border-radius: 10px;
    background: var(--layout-surface);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}

body.app-shell .production-columns-menu[hidden] {
    display: none !important;
}

body.app-shell .production-columns-title {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 7px;
    border-bottom: 1px solid var(--production-table-border, #d8dee8);
    font-size: .78rem;
    font-weight: 900;
}

body.app-shell .production-columns-title button {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    margin-left: auto;
    padding: 0;
    color: var(--layout-muted);
    border: 0;
    border-radius: 6px;
    background: transparent;
}

body.app-shell .production-columns-menu > p {
    margin: 8px 4px 5px;
    color: var(--layout-muted);
    font-size: .65rem;
}

body.app-shell .production-columns-list {
    max-height: 340px;
    display: grid;
    gap: 2px;
    overflow-y: auto;
}

body.app-shell .production-columns-list label {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 7px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 750;
}

body.app-shell .production-columns-list label:hover {
    background: var(--layout-soft);
}

body.app-shell .production-columns-list input {
    width: 15px;
    height: 15px;
    accent-color: var(--layout-accent);
}

body.app-shell .production-columns-list label.locked {
    color: var(--layout-muted);
}

body.app-shell .production-columns-restore {
    width: 100%;
    min-height: 34px;
    margin-top: 8px;
    color: var(--layout-accent);
    border: 1px solid color-mix(in srgb, var(--layout-accent) 30%, var(--layout-border));
    border-radius: 7px;
    background: var(--layout-soft);
    font-size: .71rem;
    font-weight: 850;
}

html[data-theme="dark"] body.app-shell .production-orders-table {
    --production-table-ink: #f1f5f9;
    --production-table-muted: #cbd5e1;
    --production-table-border: #334155;
    background: #111827 !important;
}

html[data-theme="dark"] body.app-shell .production-orders-table thead th {
    color: #f8fafc !important;
    background: #1f2937 !important;
}

html[data-theme="dark"] body.app-shell .production-orders-table tbody td,
html[data-theme="dark"] body.app-shell .production-orders-table tbody tr.production-order-row:nth-of-type(odd) > td:not(.production-dept-status-cell) {
    color: #e5e7eb !important;
    background: #111827 !important;
}

@media (max-width: 1100px) {
    body.app-shell .app-topbar {
        gap: 11px !important;
    }

    body.app-shell .topbar-search {
        width: min(250px, 24vw) !important;
    }

    body.app-shell .topbar-user {
        min-width: 44px;
        grid-template-columns: 35px;
        padding-right: 4px !important;
    }

    body.app-shell .topbar-user-text,
    body.app-shell .topbar-user-chevron {
        display: none !important;
    }
}

/* Tablet vertical y horizontal: una sola barra compacta, sin apilar controles. */
@media (max-width: 768px) {
    body.app-shell .app-topbar {
        min-height: 57px !important;
        gap: 8px !important;
        padding: 0 10px !important;
    }

    body.app-shell .topbar-brand {
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    body.app-shell .topbar-brand > span:last-child {
        display: none;
    }

    body.app-shell .topbar-brand-mark {
        width: 34px;
        height: 34px;
    }

    body.app-shell .layout-department-selector {
        min-width: 0;
        max-width: 42vw;
        height: 36px;
        padding: 0 9px;
    }

    body.app-shell .layout-department-selector span {
        max-width: 25vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.app-shell .topbar-search {
        width: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: grid !important;
        place-items: center;
        flex: 0 0 36px;
        padding: 0 !important;
    }

    body.app-shell .topbar-search input {
        width: 1px !important;
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    body.app-shell .topbar-actions {
        max-width: none !important;
        gap: 3px !important;
        padding: 0 !important;
    }

    body.app-shell .topbar-user {
        min-width: 36px;
        min-height: 36px;
        grid-template-columns: 32px;
        padding: 2px !important;
    }

    body.app-shell .topbar-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    body.app-shell .department-views-nav {
        width: 100% !important;
        min-height: 43px;
        margin: 0 !important;
        padding: 6px 9px !important;
        border-radius: 0 !important;
    }

    body.app-shell .department-views-nav-link {
        min-height: 30px !important;
        padding: 0 9px !important;
        font-size: .68rem !important;
    }

    body.app-shell .app-container {
        padding: 10px !important;
    }
}

@media (max-width: 480px) {
    body.app-shell .layout-department-selector {
        max-width: 35vw;
    }

    body.app-shell .layout-department-selector span {
        max-width: 18vw;
    }

    body.app-shell .topbar-search {
        display: none !important;
    }

    body.app-shell .topbar-icon {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    body.app-shell .app-statusbar {
        display: none !important;
    }
}

@media print {
    body.app-shell .app-topbar,
    body.app-shell .department-views-nav,
    body.app-shell .app-statusbar {
        display: none !important;
    }

    body.app-shell .app-container {
        padding: 0 !important;
    }
}

/* ==========================================================
   Ancho fluido y densidad uniforme
   El layout ya aporta el margen exterior. Evita acumular el
   padding de app-main + app-container + cada vista, algo que
   se nota especialmente cuando la aplicación corre como PWA.
   ========================================================== */
@media screen {
    body.app-shell .app-main {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        overflow-x: clip;
    }

    body.app-shell .app-container {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: clamp(7px, .65vw, 11px) !important;
    }

    body.app-shell .app-container > :where(
        div,
        section,
        article,
        main,
        form
    ):not(.modal):not(.modal-backdrop):not(.offcanvas):not(.toast):not([role="dialog"]) {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    body.app-shell .app-container > :where(
        .container,
        .container-sm,
        .container-md,
        .container-lg,
        .container-xl,
        .container-xxl,
        .container-fluid,
        [class*="-page"],
        [class*="-shell"],
        [class*="-wrapper"]
    ):not(.modal):not(.offcanvas):not([role="dialog"]) {
        padding-left: clamp(7px, .7vw, 12px) !important;
        padding-right: clamp(7px, .7vw, 12px) !important;
        row-gap: clamp(8px, .85vw, 14px) !important;
    }

    body.app-shell .app-container :where(
        .page-wrapper,
        .page-container,
        .view-shell,
        .dashboard-core,
        .inventory-clean-shell,
        .shipping-dashboard-shell,
        .vidal-dashboard-shell,
        .production-detail-page,
        .production-create-page,
        .pb-content,
        .qc-page,
        .blanks-import-page,
        .receive-page,
        .bol-page
    ) {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        row-gap: clamp(8px, .85vw, 14px) !important;
    }

    body.app-shell .app-container > :where(
        .container,
        .container-fluid,
        [class*="-page"],
        [class*="-shell"],
        [class*="-wrapper"]
    ) > :where(section, article) {
        margin-top: 0 !important;
        margin-bottom: clamp(8px, .85vw, 14px) !important;
    }

    body.app-shell .app-container > :where(
        .container,
        .container-fluid,
        [class*="-page"],
        [class*="-shell"],
        [class*="-wrapper"]
    ) > :where(section, article):last-child {
        margin-bottom: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    body.app-shell .app-container {
        padding: 5px !important;
    }

    body.app-shell .app-container > :where(
        .container,
        .container-sm,
        .container-md,
        .container-lg,
        .container-xl,
        .container-xxl,
        .container-fluid,
        [class*="-page"],
        [class*="-shell"],
        [class*="-wrapper"]
    ):not(.modal):not(.offcanvas):not([role="dialog"]) {
        padding-left: 6px !important;
        padding-right: 6px !important;
        row-gap: 8px !important;
    }
}

/* Blanks tiene varias vistas antiguas con padding propio, utilidades p-4/px-4
   y shells centrados. Esta capa evita que vuelvan a acumular espacio sobre
   el margen global, sin modificar papeletas o vistas de impresión. */
@media screen {
    body.app-shell[data-department="blanks"] .app-main {
        padding: 0 !important;
    }

    body.app-shell[data-department="blanks"] .app-container {
        width: 100% !important;
        max-width: none !important;
        padding: 6px 8px 12px !important;
    }

    body.app-shell[data-department="blanks"] .app-container > :is(
        .container-fluid,
        .page-wrapper,
        .blanks-operations-page,
        .blanks-page,
        .blanks-import-page,
        .inventory-clean-page,
        .blanks-orders-page,
        .blanks-order-detail-page,
        .blanks-replacement-page,
        .replacement-fulfill-page,
        .transfer-locations-page,
        .location-detail-clean,
        .stock-history-page
    ) {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px 10px 14px !important;
        gap: 10px !important;
        box-sizing: border-box;
    }

    body.app-shell[data-department="blanks"] .app-container :is(
        .inventory-clean-shell,
        .ld-header,
        .ld-summary,
        .ld-inventory
    ) {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.app-shell[data-department="blanks"] .app-container > :is(
        .container-fluid,
        .page-wrapper,
        .blanks-operations-page,
        .blanks-page,
        .blanks-import-page,
        .inventory-clean-page,
        .blanks-orders-page,
        .blanks-order-detail-page,
        .blanks-replacement-page,
        .replacement-fulfill-page,
        .transfer-locations-page,
        .location-detail-clean,
        .stock-history-page
    ) > :is(section, article, .card, .card-custom, .content-panel) {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
}

@media screen and (max-width: 768px) {
    body.app-shell[data-department="blanks"] .app-container {
        padding: 3px !important;
    }

    body.app-shell[data-department="blanks"] .app-container > :is(
        .container-fluid,
        .page-wrapper,
        .blanks-operations-page,
        .blanks-page,
        .blanks-import-page,
        .inventory-clean-page,
        .blanks-orders-page,
        .blanks-order-detail-page,
        .blanks-replacement-page,
        .replacement-fulfill-page,
        .transfer-locations-page,
        .location-detail-clean,
        .stock-history-page
    ) {
        padding: 5px 6px 10px !important;
        gap: 8px !important;
    }
}
/* Marca de empresa limpia: evita que el logo herede cuadros, bordes o fondos de iconos. */
body.app-shell .topbar-brand {
    max-width: min(360px, 36vw);
    min-width: 0 !important;
}

body.app-shell .topbar-brand > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app-shell .topbar-brand-mark.topbar-company-logo {
    width: 72px !important;
    max-width: 72px !important;
    height: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body.app-shell .topbar-brand-mark.topbar-company-logo img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
}

body.app-shell .sidebar-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    overflow: hidden !important;
}

body.app-shell .sidebar-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.app-shell .sidebar-brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
}

body.app-shell .sidebar-brand-icon {
    color: var(--layout-accent);
    border: 1px solid color-mix(in srgb, var(--layout-accent) 40%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--layout-accent) 8%, transparent);
}

body.app-shell .sidebar-company-logo-wrap {
    width: 58px !important;
    max-width: 58px !important;
    height: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 58px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body.app-shell .sidebar-company-logo {
    width: 100% !important;
    height: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: center center !important;
}