:root {
    --jar-orange: #f99823;
    --jar-orange-dark: #db7410;
    --jar-navy: #17263b;
    --jar-sidebar: 94px;
    --jar-header: 70px;
    --primary: var(--jar-orange);
    --bs-primary: var(--jar-orange);
    --bs-primary-rgb: 249, 152, 35;
    --bs-primary-text-emphasis: #7c4309;
    --bs-primary-bg-subtle: #fff0dc;
    --bs-primary-border-subtle: #fbd0a0;
    --bs-link-color: #b65e00;
    --bs-link-color-rgb: 182, 94, 0;
    --bs-link-hover-color: var(--jar-orange-dark);
    --bs-link-hover-color-rgb: 219, 116, 16;
    --bs-focus-ring-color: rgba(249, 152, 35, .3);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--jar-orange);
    --bs-btn-border-color: var(--jar-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--jar-orange-dark);
    --bs-btn-hover-border-color: #c96b05;
    --bs-btn-focus-shadow-rgb: 249, 152, 35;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c96b05;
    --bs-btn-active-border-color: #b85f04;
    color: #fff !important;
    background-color: var(--jar-orange) !important;
    border-color: var(--jar-orange) !important;
}

.btn-primary:hover, .btn-primary:focus {
    color: #fff !important;
    background-color: var(--jar-orange-dark) !important;
    border-color: var(--jar-orange-dark) !important;
}

.btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    background-color: #c96b05 !important;
    border-color: #b85f04 !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--jar-orange-dark);
    --bs-btn-border-color: var(--jar-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--jar-orange);
    --bs-btn-hover-border-color: var(--jar-orange);
    --bs-btn-focus-shadow-rgb: 249, 152, 35;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--jar-orange-dark);
    --bs-btn-active-border-color: var(--jar-orange-dark);
    color: var(--jar-orange-dark) !important;
    border-color: var(--jar-orange) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--jar-orange) !important;
    border-color: var(--jar-orange) !important;
}

.dxbl-btn-primary {
    --dxbl-btn-bg: var(--jar-orange) !important;
    --dxbl-btn-border-color: var(--jar-orange) !important;
    --dxbl-btn-hover-bg: var(--jar-orange-dark) !important;
    --dxbl-btn-hover-border-color: var(--jar-orange-dark) !important;
    --dxbl-btn-active-bg: #c96b05 !important;
    --dxbl-btn-active-border-color: #b85f04 !important;
    --dxbl-btn-focus-color: var(--jar-orange) !important;
    --dxbl-btn-focus-outline-color: var(--jar-orange) !important;
}

.bg-primary, .text-bg-primary { background-color: var(--jar-orange) !important; }
.border-primary { border-color: var(--jar-orange) !important; }
.text-primary { color: var(--jar-orange-dark) !important; }

.form-check-input:checked { background-color: var(--jar-orange); border-color: var(--jar-orange); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #fbc17e;
    box-shadow: 0 0 0 .25rem rgba(249, 152, 35, .25);
}
.page-link.active, .active > .page-link {
    background-color: var(--jar-orange);
    border-color: var(--jar-orange);
}
.dropdown-item.active, .dropdown-item:active { background-color: var(--jar-orange); }

/* Bootstrap owns the modal; only its body scrolls so the title and actions remain visible. */
.bootstrap-modal { z-index: 1055; overflow-x: hidden; overflow-y: auto; }
.bootstrap-modal .modal-dialog { max-height: calc(100dvh - 2rem); }
.bootstrap-modal .modal-content {
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    background: #fff;
}
.bootstrap-modal .modal-header,
.bootstrap-modal .modal-footer {
    flex: 0 0 auto;
    background: #fff;
}
.bootstrap-modal .modal-body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
}
.bootstrap-modal .user-wizard-modal-body {
    height: min(620px, calc(100dvh - 7rem));
    padding: 0;
    overflow: hidden;
}
.bootstrap-modal .user-wizard-modal-body > form { height: 100%; min-height: 0; }
.bootstrap-modal .dxbl-text-edit,
.bootstrap-modal .dxbl-spin-edit,
.bootstrap-modal .dxbl-combobox,
.bootstrap-modal .dxbl-date-edit,
.bootstrap-modal .dxbl-time-edit,
.bootstrap-modal .dxbl-date-time-edit,
.bootstrap-modal .dxbl-masked-input { width: 100%; max-width: 100%; }

/* Los editores DevExpress crean el listado/calendario en un portal independiente. */
.dxbl-popup-portal,
.dxbl-modal,
.dxbl-modal-root,
.dxbl-dialog-captor,
.dxbl-dropdown,
.dxbl-btn-dropdown-popup { z-index: 1090 !important; }
.dxbl-dropdown > .dxbl-dropdown-dialog,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup { z-index: 1091 !important; }
.modal-backdrop { z-index: 1050; }

.nav-tabs { border-bottom-color: #eadbc9; }
.technical-card .card-header-tabs { margin-bottom: -1px !important; }
.nav-tabs .nav-link {
    margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; border-radius: .5rem .5rem 0 0;
    color: #667085; font-weight: 700;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-color: transparent transparent #f4bd7d; background: #fff7ed; color: var(--jar-orange-dark);
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    border-color: transparent transparent var(--jar-orange); background: transparent; color: var(--jar-orange-dark);
}
.nav-pills .nav-link { color: #667085; font-weight: 700; }
.nav-pills .nav-link:hover { background: #fff7ed; color: var(--jar-orange-dark); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--jar-orange) !important; color: #fff !important;
}

html, body { overflow-x: hidden; }
.technical-layout { min-height: 100vh; background: #f4f6f9; }
.sidebar-toggle { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sidebar-overlay { display: none; }
.technical-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--jar-sidebar); z-index: 1040; background: #fff; border-right: 1px solid #e7e9ee; box-shadow: 3px 0 18px rgba(23,38,59,.06); }
.technical-main { min-height: 100vh; margin-left: var(--jar-sidebar); }
.technical-content { padding: calc(var(--jar-header) + 24px) clamp(14px, 2vw, 30px) 42px; }
.technical-header { left: var(--jar-sidebar); height: var(--jar-header); padding: 0 clamp(14px, 2vw, 30px); background: rgba(255,255,255,.96); border-bottom: 1px solid #e7e9ee; backdrop-filter: blur(12px); z-index: 1030; }
.header-layout-inner { height: 100%; }
.header-brand { font-size: 1.35rem; font-weight: 800; color: var(--jar-navy); white-space: nowrap; }
.navbar-separator { width: 1px; height: 28px; margin: 0 18px; background: #e1e5ea; }
.navbar-actions { display: flex; align-items: center; gap: 6px; }
.action-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #657083; text-decoration: none; font-size: 1.25rem; }
.action-btn:hover { background: #fff1df; color: var(--jar-orange-dark); }
.user-menu { display: flex; align-items: center; gap: 12px; color: var(--jar-navy); text-decoration: none; }
.user-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.user-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #fff1df; color: var(--jar-orange-dark); font-size: 1.25rem; }

.sidebar-header { height: var(--jar-header); display: grid; place-items: center; border-bottom: 1px solid #edf0f3; }
.logo-container { display: grid; place-items: center; }
.sidebar-logo { width: 37px; height: 62px; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(23,38,59,.16)); }
.nav-menu {
    height: calc(100dvh - var(--jar-header));
    padding: 12px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(var(--bs-primary-rgb), .55) transparent;
    scrollbar-width: thin;
}
.nav-menu::-webkit-scrollbar { width: 6px; }
.nav-menu::-webkit-scrollbar-track { background: transparent; }
.nav-menu::-webkit-scrollbar-thumb { border: 1px solid transparent; border-radius: 999px; background: rgba(var(--bs-primary-rgb), .48); background-clip: padding-box; }
.nav-menu::-webkit-scrollbar-thumb:hover { background: rgba(var(--bs-primary-rgb), .72); background-clip: padding-box; }
.nav-item { position: relative; padding: 2px 11px; }
.nav-link { min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 4px; border-radius: 12px; color: #727c8d; text-decoration: none; font-size: .72rem; line-height: 1.05; }
.nav-icon-container { position: relative; font-size: 1.45rem; line-height: 1; }
.nav-link:hover { background: #fff5e9; color: var(--jar-orange-dark); }
.nav-link.active { background: #fff0dc; color: var(--jar-orange-dark); font-weight: 700; }
.nav-link.active .active-indicator { position: absolute; left: -25px; top: 3px; width: 4px; height: 20px; border-radius: 0 4px 4px 0; background: var(--jar-orange); }
.submenu-indicator { position: absolute; right: 6px; bottom: 7px; color: var(--jar-orange-dark); font-size: .9rem; transition: transform .18s; }
.has-submenu:hover .submenu-indicator { transform: rotate(90deg); }
.submenu-popup {
    position: fixed;
    z-index: 1060;
    display: none;
    max-height: calc(100dvh - 20px);
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #e6e9ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(23,38,59,.16);
    scrollbar-color: rgba(var(--bs-primary-rgb), .55) transparent;
    scrollbar-width: thin;
}
.submenu-popup::-webkit-scrollbar { width: 6px; }
.submenu-popup::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(var(--bs-primary-rgb), .48); }
.has-submenu.submenu-measuring .submenu-popup { display: block; visibility: hidden; }
.has-submenu.submenu-positioned:hover .submenu-popup,
.has-submenu.submenu-positioned:focus-within .submenu-popup,
.has-submenu.submenu-positioned.submenu-open .submenu-popup { display: block; visibility: visible; }
.submenu-title { padding: 6px 10px 10px; color: var(--jar-navy); font-weight: 800; }
.submenu-link { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; color: #596477; text-decoration: none; }
.submenu-link:hover, .submenu-link.active { color: var(--jar-orange-dark); background: #fff4e5; }

.technical-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.technical-page-title { margin: 0; color: var(--jar-navy); font-size: clamp(1.55rem, 2.2vw, 2.15rem); font-weight: 800; }
.technical-page-subtitle { margin: 5px 0 0; color: #707b8d; }
.technical-card { border: 0; border-radius: 15px; background: #fff; box-shadow: 0 7px 24px rgba(23,38,59,.07); }
.grid-row-actions { display: flex; align-items: center; justify-content: center; gap: .2rem; }
.grid-icon-action {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--jar-orange-dark);
    font-size: 1.08rem;
    transition: color .16s ease, background-color .16s ease, transform .12s ease;
}
.grid-icon-action:hover,
.grid-icon-action:focus-visible { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); outline: 0; }
.grid-icon-action:active { transform: scale(.94); }
.grid-icon-action::after {
    position: absolute;
    inset: 50%;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), .25);
    content: "";
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
}
.grid-icon-action:active::after { inset: -45%; opacity: 1; transform: translate(0, 0) scale(1); transition: transform .3s ease-out, opacity .45s ease-out; }
.classification-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.classification-choice {
    display: flex; align-items: center; gap: .75rem; min-height: 58px; padding: .9rem 1rem;
    border: 1px solid var(--bs-border-color); border-radius: .65rem; background: #fff; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.classification-choice:hover { border-color: var(--jar-orange); background: var(--bs-primary-bg-subtle); }
.classification-choice.selected { border-color: var(--jar-orange); box-shadow: 0 0 0 .2rem rgba(249,152,35,.14); }
.classification-choice .form-check-input { margin: 0 0 0 auto; flex: 0 0 auto; }
.classification-choice .ti { font-size: 1.15rem; }
#blazor-error-ui { display: none; position: fixed; inset: auto 0 0 0; z-index: 2000; padding: .8rem 1.25rem; background: #fff3cd; color: #664d03; box-shadow: 0 -2px 8px rgba(0,0,0,.12); }
.confirm-icon { font-size: 4rem; line-height: 1; margin-bottom: 18px; }
.text-danger .ti, .text-danger { color: #d63939 !important; }
.text-warning .ti, .text-warning { color: #f59f00 !important; }
.text-success .ti, .text-success { color: #2fb344 !important; }
.text-info .ti, .text-info { color: #4299e1 !important; }

html:fullscreen .technical-sidebar,
html:fullscreen .technical-header,
html:fullscreen .sidebar-overlay { display: none !important; }
html:fullscreen .technical-main { margin-left: 0; }
html:fullscreen .technical-content { padding: 18px; }
html:fullscreen .order-current { top: 1rem; max-height: calc(100vh - 2rem); }
html:fullscreen .kitchen-monitor { min-height: calc(100dvh - 36px); }
html:fullscreen .fullscreen-enter { display: none !important; }
html:fullscreen .fullscreen-exit { display: inline-block !important; }

@media (max-width: 767.98px) {
    .bootstrap-modal .modal-dialog.modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
    }
    .bootstrap-modal .modal-dialog.modal-fullscreen-md-down .modal-content {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .bootstrap-modal .modal-dialog.modal-fullscreen-md-down .user-wizard-modal-body { height: auto; }
    .classification-choice-grid { grid-template-columns: 1fr; }
    .technical-sidebar { transform: translateX(-100%); transition: transform .25s; }
    .sidebar-toggle:checked ~ .technical-sidebar { transform: none; }
    .sidebar-toggle:checked ~ .sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(23,38,59,.38); }
    .technical-main { margin-left: 0; }
    .technical-header { left: 0; }
    .navbar-separator { margin: 0 9px; }
    .technical-content { padding-inline: 12px; }
}
.status-pill { display:inline-flex; align-items:center; justify-content:center; min-height:26px; padding:.25rem .6rem; border:1px solid transparent; border-radius:999px; font-size:.72rem; font-weight:800; line-height:1; white-space:nowrap; }
.status-pill.status-warning { border-color:#f0cf80; background:#fff3cd; color:#856404; }
.status-pill.status-info { border-color:#9ec5fe; background:#e7f1ff; color:#084298; }
.status-pill.status-success { border-color:#9fd5ac; background:#e8f7ec; color:#237a35; }
.status-pill.status-secondary { border-color:#d6dbe1; background:#f1f3f5; color:#5f6977; }
.solicitud-insumos-table { max-height: 48vh; border: 1px solid var(--bs-border-color); border-radius: .65rem; }
.solicitud-insumos-table thead { position: sticky; top: 0; z-index: 1; background: #fff; }