/* ============================================================
   DONDE HERNÁN · EXPERIENCE DESIGN SYSTEM 2.0
   Light / Dark · Mobile First · Branding Ready
   ============================================================ */

:root {
    color-scheme: light;

    --dh-brand-primary: #b71f2a;
    --dh-brand-primary-strong: #8f1720;
    --dh-brand-accent: #e7303d;
    --dh-brand-warm: #ffb547;

    --dh-app-bg: #f7f8fb;
    --dh-app-bg-soft: #f1f4f7;

    --dh-surface: #ffffff;
    --dh-surface-soft: #f8f9fb;
    --dh-surface-muted: #f1f3f6;

    --dh-ui-text: #171a1f;
    --dh-ui-text-strong: #080a0d;
    --dh-ui-muted: #69727e;
    --dh-ui-soft: #8b94a0;

    --dh-ui-border: #e2e6eb;
    --dh-ui-border-strong: #d4dae1;

    --dh-success: #167c45;
    --dh-success-soft: #eaf8f0;

    --dh-warning: #9a650b;
    --dh-warning-soft: #fff6dd;

    --dh-danger: #c72b35;
    --dh-danger-soft: #fff0f1;

    --dh-info: #2361a1;
    --dh-info-soft: #eef6ff;

    --dh-shadow-xs:
        0 1px 2px rgba(20, 25, 32, .035);

    --dh-shadow-sm:
        0 4px 16px rgba(20, 25, 32, .055),
        0 1px 3px rgba(20, 25, 32, .035);

    --dh-shadow-md:
        0 16px 44px rgba(20, 25, 32, .075),
        0 3px 10px rgba(20, 25, 32, .035);

    --dh-radius-sm: 10px;
    --dh-radius-md: 14px;
    --dh-radius-lg: 18px;
    --dh-radius-xl: 24px;

    --dh-sidebar-bg:
        radial-gradient(
            circle at 8% 2%,
            color-mix(
                in srgb,
                var(--dh-brand-primary) 9%,
                transparent
            ),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafbfc 100%
        );

    --dh-sidebar-text: #555e69;
    --dh-sidebar-strong: #161a20;
    --dh-sidebar-border: #e6e9ed;

    --dh-transition:
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


/* ============================================================
   DARK
   ============================================================ */

:root[data-dh-theme="dark"] {
    color-scheme: dark;

    --dh-app-bg: #0d0f12;
    --dh-app-bg-soft: #121519;

    --dh-surface: #171a1f;
    --dh-surface-soft: #1b1f24;
    --dh-surface-muted: #20252b;

    --dh-ui-text: #edf0f3;
    --dh-ui-text-strong: #ffffff;
    --dh-ui-muted: #a5aeb9;
    --dh-ui-soft: #7f8995;

    --dh-ui-border: #2a3037;
    --dh-ui-border-strong: #373e47;

    --dh-success-soft: #13291f;
    --dh-warning-soft: #2b2312;
    --dh-danger-soft: #30171a;
    --dh-info-soft: #142638;

    --dh-shadow-xs:
        0 1px 2px rgba(0,0,0,.25);

    --dh-shadow-sm:
        0 6px 20px rgba(0,0,0,.22),
        0 1px 4px rgba(0,0,0,.25);

    --dh-shadow-md:
        0 18px 52px rgba(0,0,0,.30),
        0 3px 12px rgba(0,0,0,.22);

    --dh-sidebar-bg:
        radial-gradient(
            circle at 12% 6%,
            color-mix(
                in srgb,
                var(--dh-brand-primary) 28%,
                transparent
            ),
            transparent 34%
        ),
        radial-gradient(
            circle at 72% 72%,
            rgba(105,20,28,.18),
            transparent 42%
        ),
        linear-gradient(
            165deg,
            #101115 0%,
            #191419 48%,
            #0f0d10 100%
        );

    --dh-sidebar-text: #b5bcc5;
    --dh-sidebar-strong: #ffffff;
    --dh-sidebar-border: rgba(255,255,255,.075);
}


/* ============================================================
   APP FOUNDATION
   ============================================================ */

html {
    background: var(--dh-app-bg);
}

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

body {
    background: var(--dh-app-bg) !important;
    color: var(--dh-ui-text) !important;

    transition:
        background-color .18s ease,
        color .18s ease;
}

.dh-app,
.dh-workspace,
.dh-main {
    background: var(--dh-app-bg);
    color: var(--dh-ui-text);
}

.dh-workspace,
.dh-main {
    min-width: 0;
}


/* ============================================================
   LIGHT/DARK SIDEBAR
   ============================================================ */

.dh-sidebar {
    background: var(--dh-sidebar-bg) !important;

    border-right:
        1px solid
        var(--dh-sidebar-border) !important;

    color:
        var(--dh-sidebar-text) !important;

    box-shadow:
        8px 0 28px rgba(20,25,32,.035);

    transition:
        transform .22s ease,
        width .20s ease,
        background .20s ease,
        border-color .20s ease;
}

:root[data-dh-theme="dark"] .dh-sidebar {
    box-shadow:
        14px 0 42px rgba(0,0,0,.22);
}

.dh-brand {
    border-bottom-color:
        var(--dh-sidebar-border) !important;
}

.dh-sidebar-footer {
    border-top-color:
        var(--dh-sidebar-border) !important;
}

.dh-sidebar a,
.dh-sidebar button {
    transition:
        var(--dh-transition);
}

.dh-sidebar .dh-nav-item,
.dh-sidebar .nav-link {
    color:
        var(--dh-sidebar-text) !important;
}

.dh-sidebar .dh-nav-item:hover,
.dh-sidebar .nav-link:hover {
    color:
        var(--dh-sidebar-strong) !important;

    background:
        color-mix(
            in srgb,
            var(--dh-brand-primary) 7%,
            transparent
        ) !important;
}

.dh-sidebar .dh-nav-item.active,
.dh-sidebar .nav-link.active {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--dh-brand-primary),
            var(--dh-brand-primary-strong)
        ) !important;

    border-color:
        var(--dh-brand-primary) !important;

    box-shadow:
        0 8px 20px
        color-mix(
            in srgb,
            var(--dh-brand-primary) 18%,
            transparent
        ) !important;
}

.dh-sidebar-section-title,
.dh-nav-section-title,
.dh-sidebar-label {
    color:
        color-mix(
            in srgb,
            var(--dh-sidebar-text) 72%,
            transparent
        ) !important;
}

.dh-sidebar-tool {
    color:
        var(--dh-sidebar-text) !important;

    border-color:
        var(--dh-sidebar-border) !important;

    background:
        color-mix(
            in srgb,
            var(--dh-surface) 76%,
            transparent
        ) !important;
}

.dh-sidebar-tool:hover {
    color:
        var(--dh-sidebar-strong) !important;

    background:
        color-mix(
            in srgb,
            var(--dh-brand-primary) 7%,
            var(--dh-surface)
        ) !important;
}


/* ============================================================
   TOPBAR
   ============================================================ */

.dh-topbar {
    background:
        color-mix(
            in srgb,
            var(--dh-surface) 94%,
            transparent
        ) !important;

    color:
        var(--dh-ui-text) !important;

    border-bottom:
        1px solid
        var(--dh-ui-border) !important;

    box-shadow:
        var(--dh-shadow-xs);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    transition:
        var(--dh-transition);
}

.dh-topbar-title {
    color:
        var(--dh-ui-text-strong) !important;
}

.dh-topbar-eyebrow {
    color:
        var(--dh-ui-soft) !important;
}


/* ============================================================
   THEME + TOPBAR CONTROLS
   ============================================================ */

.dh-menu-button,
.dh-theme-toggle,
.dh-command-trigger {
    border:
        1px solid
        var(--dh-ui-border) !important;

    background:
        var(--dh-surface) !important;

    color:
        var(--dh-ui-text) !important;

    box-shadow:
        var(--dh-shadow-xs);

    transition:
        var(--dh-transition);
}

.dh-menu-button:hover,
.dh-theme-toggle:hover,
.dh-command-trigger:hover {
    color:
        var(--dh-brand-primary) !important;

    border-color:
        color-mix(
            in srgb,
            var(--dh-brand-primary) 30%,
            var(--dh-ui-border)
        ) !important;

    box-shadow:
        var(--dh-shadow-sm);

    transform:
        translateY(-1px);
}

.dh-theme-toggle {
    min-width: 44px;
    height: 42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 7px;

    padding:
        0 12px;

    border-radius:
        12px;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;

    touch-action:
        manipulation;
}

.dh-theme-icon {
    width:
        20px;

    height:
        20px;

    display:
        inline-grid;

    place-items:
        center;

    font-size:
        18px;

    line-height:
        1;
}

.dh-theme-label {
    white-space:
        nowrap;
}


/* ============================================================
   CONTENT / CARDS / MODALS
   ============================================================ */

.card,
.dh-card,
.modal-content,
.dropdown-menu,
.list-group-item {
    background:
        var(--dh-surface) !important;

    color:
        var(--dh-ui-text) !important;

    border-color:
        var(--dh-ui-border) !important;

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

.card {
    box-shadow:
        var(--dh-shadow-sm);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
    color:
        var(--dh-ui-text) !important;

    background:
        var(--dh-surface-soft) !important;

    border-color:
        var(--dh-ui-border) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color:
        var(--dh-ui-text-strong);
}

.text-muted {
    color:
        var(--dh-ui-muted) !important;
}


/* ============================================================
   FORMS
   ============================================================ */

.form-control,
.form-select,
.input-group-text {
    color:
        var(--dh-ui-text) !important;

    background:
        var(--dh-surface) !important;

    border-color:
        var(--dh-ui-border-strong) !important;

    box-shadow:
        none;

    transition:
        var(--dh-transition);
}

.form-control::placeholder {
    color:
        var(--dh-ui-soft);
}

.form-control:focus,
.form-select:focus {
    color:
        var(--dh-ui-text) !important;

    background:
        var(--dh-surface) !important;

    border-color:
        color-mix(
            in srgb,
            var(--dh-brand-primary) 60%,
            var(--dh-ui-border-strong)
        ) !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--dh-brand-primary) 13%,
            transparent
        ) !important;
}

.form-label,
.form-check-label {
    color:
        var(--dh-ui-text) !important;
}

.form-check-input {
    border-color:
        var(--dh-ui-border-strong);
}

.form-check-input:checked {
    background-color:
        var(--dh-brand-primary);

    border-color:
        var(--dh-brand-primary);
}


/* ============================================================
   TABLES
   ============================================================ */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--dh-ui-text);
    --bs-table-border-color: var(--dh-ui-border);

    --bs-table-striped-bg:
        color-mix(
            in srgb,
            var(--dh-surface-muted) 68%,
            transparent
        );

    --bs-table-striped-color:
        var(--dh-ui-text);

    --bs-table-hover-bg:
        color-mix(
            in srgb,
            var(--dh-brand-primary) 5%,
            var(--dh-surface)
        );

    --bs-table-hover-color:
        var(--dh-ui-text);
}

.table > :not(caption) > * > * {
    color:
        var(--dh-ui-text);

    background-color:
        transparent !important;

    border-bottom-color:
        var(--dh-ui-border);
}

.table thead th {
    color:
        var(--dh-ui-muted) !important;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    transition:
        var(--dh-transition);
}

.btn-dark,
.btn-danger,
.btn-dh {
    color:
        #ffffff !important;

    border-color:
        var(--dh-brand-primary) !important;

    background:
        linear-gradient(
            135deg,
            var(--dh-brand-primary),
            var(--dh-brand-primary-strong)
        ) !important;

    box-shadow:
        0 7px 18px
        color-mix(
            in srgb,
            var(--dh-brand-primary) 16%,
            transparent
        );
}

.btn-dark:hover,
.btn-danger:hover,
.btn-dh:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(.98);
}

.btn-outline-dark {
    color:
        var(--dh-ui-text) !important;

    border-color:
        var(--dh-ui-border-strong) !important;
}

.btn-outline-dark:hover {
    color:
        #ffffff !important;

    border-color:
        var(--dh-brand-primary) !important;

    background:
        var(--dh-brand-primary) !important;
}


/* ============================================================
   ALERTS
   ============================================================ */

.alert {
    border-radius:
        var(--dh-radius-md);

    border-color:
        var(--dh-ui-border);
}

.alert-success {
    color:
        var(--dh-success);

    background:
        var(--dh-success-soft);

    border-color:
        color-mix(
            in srgb,
            var(--dh-success) 18%,
            transparent
        );
}

.alert-warning {
    color:
        var(--dh-warning);

    background:
        var(--dh-warning-soft);
}

.alert-danger {
    color:
        var(--dh-danger);

    background:
        var(--dh-danger-soft);
}

.alert-info {
    color:
        var(--dh-info);

    background:
        var(--dh-info-soft);
}


/* ============================================================
   DARK BOOTSTRAP COMPATIBILITY
   ============================================================ */

:root[data-dh-theme="dark"] .bg-white,
:root[data-dh-theme="dark"] .bg-light {
    background-color:
        var(--dh-surface) !important;
}

:root[data-dh-theme="dark"] .text-dark {
    color:
        var(--dh-ui-text) !important;
}

:root[data-dh-theme="dark"] .border,
:root[data-dh-theme="dark"] .border-top,
:root[data-dh-theme="dark"] .border-bottom,
:root[data-dh-theme="dark"] .border-start,
:root[data-dh-theme="dark"] .border-end {
    border-color:
        var(--dh-ui-border) !important;
}

:root[data-dh-theme="dark"] hr {
    border-color:
        var(--dh-ui-border);
}

:root[data-dh-theme="dark"] code {
    color:
        #ff8892;
}


/* ============================================================
   MOBILE NAVIGATION · AUTHORITATIVE
   ============================================================ */

.dh-mobile-overlay {
    background:
        rgba(5,7,10,.55) !important;

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);
}

@media (max-width: 991.98px) {

    html,
    body {
        overflow-x:
            clip;
    }

    body.dh-sidebar-open {
        overflow:
            hidden !important;
    }

    .dh-sidebar {
        width:
            min(
                86vw,
                320px
            ) !important;

        max-width:
            320px;

        z-index:
            1090 !important;

        transform:
            translate3d(
                -104%,
                0,
                0
            ) !important;

        transition:
            transform .24s
            cubic-bezier(
                .22,
                .72,
                .18,
                1
            ) !important;

        will-change:
            transform;

        box-shadow:
            20px 0 60px
            rgba(0,0,0,.22);
    }

    body.dh-sidebar-open .dh-sidebar {
        transform:
            translate3d(
                0,
                0,
                0
            ) !important;
    }

    .dh-mobile-overlay {
        position:
            fixed !important;

        inset:
            0 !important;

        z-index:
            1080 !important;

        display:
            block !important;

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transition:
            opacity .20s ease,
            visibility .20s ease;
    }

    body.dh-sidebar-open
    .dh-mobile-overlay {
        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;
    }

    .dh-workspace {
        width:
            100% !important;

        max-width:
            100%;

        margin-left:
            0 !important;
    }

    .dh-menu-button {
        display:
            inline-grid !important;

        place-items:
            center;

        width:
            44px !important;

        min-width:
            44px;

        height:
            44px !important;

        padding:
            0 !important;

        touch-action:
            manipulation;
    }

    .dh-topbar {
        position:
            sticky !important;

        top:
            0;

        z-index:
            1070;

        width:
            100%;
    }

    .dh-main {
        width:
            100%;

        max-width:
            100%;

        overflow-x:
            clip;
    }

    .dh-main > * {
        max-width:
            100%;
    }

    .table-responsive {
        max-width:
            100%;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            thin;
    }

    .form-control,
    .form-select,
    .btn:not(.btn-sm),
    .input-group-text {
        min-height:
            44px;
    }
}


@media (max-width: 767.98px) {

    .dh-topbar {
        min-height:
            64px !important;

        height:
            auto !important;

        padding:
            10px 12px !important;
    }

    .dh-topbar-left,
    .dh-topbar-actions {
        gap:
            8px !important;
    }

    .dh-topbar-eyebrow,
    .dh-command-trigger,
    .dh-live-status,
    .dh-profile-copy {
        display:
            none !important;
    }

    .dh-topbar-title {
        max-width:
            42vw;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        font-size:
            14px !important;
    }

    .dh-theme-toggle {
        width:
            44px;

        min-width:
            44px;

        padding:
            0;
    }

    .dh-theme-label {
        display:
            none;
    }

    .dh-main {
        padding:
            16px 12px 24px !important;
    }

    .modal-dialog {
        margin:
            10px;
    }

    .dropdown-menu {
        max-width:
            calc(100vw - 24px);
    }

    .row {
        --bs-gutter-x:
            1rem;
    }
}


/* ============================================================
   LOGIN
   ============================================================ */

.auth-wrap {
    min-height:
        100vh;

    color:
        var(--dh-ui-text);

    background:
        radial-gradient(
            circle at 15% 12%,
            color-mix(
                in srgb,
                var(--dh-brand-primary) 12%,
                transparent
            ),
            transparent 30%
        ),
        var(--dh-app-bg) !important;
}

.auth-card {
    color:
        var(--dh-ui-text);

    background:
        color-mix(
            in srgb,
            var(--dh-surface) 96%,
            transparent
        ) !important;

    border:
        1px solid
        var(--dh-ui-border) !important;

    border-radius:
        var(--dh-radius-xl) !important;

    box-shadow:
        var(--dh-shadow-md) !important;
}

.dh-auth-theme-toggle {
    position:
        fixed;

    top:
        18px;

    right:
        18px;

    z-index:
        30;

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        var(--dh-ui-border);

    border-radius:
        13px;

    background:
        var(--dh-surface);

    color:
        var(--dh-ui-text);

    box-shadow:
        var(--dh-shadow-sm);

    cursor:
        pointer;

    transition:
        var(--dh-transition);
}

.dh-auth-theme-toggle:hover {
    color:
        var(--dh-brand-primary);

    transform:
        translateY(-1px);
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}


/* ============================================================
   HERNAN_R6_EXPERIENCE_03B1_MOBILE_FOUNDATION_DASHBOARD
   Mobile operational hardening
   ============================================================ */


/* ------------------------------------------------------------
   MODERN MOBILE VIEWPORT
   100vh remains fallback; dvh handles browser chrome correctly.
   ------------------------------------------------------------ */

html,
body,
.dh-app {
    min-height:
        100vh;
}

@supports (height: 100dvh) {

    html,
    body,
    .dh-app {
        min-height:
            100dvh;
    }

    .dh-sidebar {
        height:
            100dvh !important;

        max-height:
            100dvh;
    }

    .auth-wrap {
        min-height:
            100dvh;
    }
}


/* ------------------------------------------------------------
   UNIVERSAL MEDIA SAFETY
   ------------------------------------------------------------ */

.dh-main img,
.dh-main svg,
.dh-main canvas,
.dh-main video {
    max-width:
        100%;
}

.dh-main img,
.dh-main video {
    height:
        auto;
}


/* ------------------------------------------------------------
   MOBILE / TABLET SHELL
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {

    html {
        -webkit-text-size-adjust:
            100%;

        text-size-adjust:
            100%;
    }

    body {
        overscroll-behavior-x:
            none;
    }

    body.dh-sidebar-open {
        overscroll-behavior:
            none;
    }

    .dh-sidebar {
        overflow-y:
            auto;

        overflow-x:
            hidden;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;

        padding-bottom:
            max(
                12px,
                env(safe-area-inset-bottom)
            );
    }

    .dh-topbar {
        padding-left:
            max(
                12px,
                env(safe-area-inset-left)
            ) !important;

        padding-right:
            max(
                12px,
                env(safe-area-inset-right)
            ) !important;
    }

    .dh-main {
        padding-left:
            max(
                12px,
                env(safe-area-inset-left)
            ) !important;

        padding-right:
            max(
                12px,
                env(safe-area-inset-right)
            ) !important;

        padding-bottom:
            calc(
                24px +
                env(safe-area-inset-bottom)
            ) !important;
    }

    .dh-workspace,
    .dh-main,
    .dh-main > *,
    .container,
    .container-fluid,
    .row {
        min-width:
            0;
    }

    /*
     * Prevent Safari automatic zoom on focused controls.
     */
    .dh-main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    .dh-main select,
    .dh-main textarea {
        font-size:
            16px !important;
    }

    .dh-main textarea {
        min-height:
            96px;
    }

    /*
     * Operational touch targets.
     */
    .dh-main .btn:not(.btn-sm),
    .dh-main button:not(.btn-sm) {
        min-height:
            44px;
    }

    .dh-main .btn-sm {
        min-height:
            40px;

        padding:
            .45rem .72rem;
    }

    .dh-profile-button,
    .dh-menu-button,
    .dh-theme-toggle {
        min-width:
            44px !important;

        min-height:
            44px !important;

        touch-action:
            manipulation;
    }

    .form-check {
        min-height:
            40px;
    }

    .form-check-label {
        line-height:
            1.35;
    }

    .form-check-input {
        width:
            20px;

        height:
            20px;

        margin-top:
            .12em;
    }

    /*
     * Dropdowns must never escape the device viewport.
     */
    .dropdown-menu {
        max-width:
            calc(
                100vw -
                24px
            ) !important;

        max-height:
            calc(
                100dvh -
                84px
            );

        overflow-y:
            auto;

        overscroll-behavior:
            contain;
    }

    /*
     * Responsive tables remain horizontally scrollable
     * without moving the whole application.
     */
    .table-responsive {
        width:
            100%;

        max-width:
            100%;

        overflow-x:
            auto;

        overscroll-behavior-inline:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }

    .table-responsive > .table {
        margin-bottom:
            0;
    }

    /*
     * Prevent Bootstrap rows/cards from creating
     * accidental page-level horizontal scroll.
     */
    .card,
    .modal-content {
        min-width:
            0;
    }
}


/* ------------------------------------------------------------
   PHONE CONTENT DENSITY
   ------------------------------------------------------------ */

@media (max-width: 575.98px) {

    .dh-main {
        padding-top:
            14px !important;
    }

    .dh-main .card-body {
        padding:
            16px !important;
    }

    .dh-main .card-header,
    .dh-main .card-footer {
        padding-left:
            16px !important;

        padding-right:
            16px !important;
    }

    .dh-main h1,
    .dh-main .h1 {
        font-size:
            clamp(
                1.55rem,
                7vw,
                2rem
            );
    }

    .dh-main h2,
    .dh-main .h2 {
        font-size:
            clamp(
                1.3rem,
                6vw,
                1.65rem
            );
    }

    .dh-main .d-flex.justify-content-between {
        min-width:
            0;
    }

    .dh-main .modal-dialog {
        width:
            auto;

        max-width:
            none;

        margin:
            8px;
    }

    .dh-main .modal-content {
        max-height:
            calc(
                100dvh -
                16px
            );

        overflow:
            auto;
    }
}


/* ============================================================
   DASHBOARD · MOBILE HARDENING
   ============================================================ */

.executive-dashboard {
    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    overflow-x:
        clip;
}

.executive-dashboard *,
.executive-dashboard *::before,
.executive-dashboard *::after {
    box-sizing:
        border-box;
}

.executive-dashboard .kpi-grid,
.executive-dashboard .today-grid,
.executive-dashboard .panel-grid,
.executive-dashboard .secondary-grid,
.executive-dashboard .channel-grid,
.executive-dashboard .insights-grid {
    min-width:
        0;
}

.executive-dashboard .kpi-card,
.executive-dashboard .pay-card,
.executive-dashboard .panel,
.executive-dashboard .insight-card {
    min-width:
        0;
}

.executive-dashboard .chart-shell {
    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    overflow:
        hidden;
}

.executive-dashboard .chart-shell svg {
    display:
        block;

    width:
        100% !important;

    max-width:
        100%;

    height:
        300px;
}

.executive-dashboard .chart-tooltip {
    max-width:
        min(
            260px,
            calc(
                100vw -
                40px
            )
        );

    min-width:
        0 !important;

    white-space:
        normal;

    overflow-wrap:
        anywhere;

    pointer-events:
        none;
}

.executive-dashboard .method-row,
.executive-dashboard .product-row {
    min-width:
        0;
}

.executive-dashboard .method-row > *,
.executive-dashboard .product-row > * {
    min-width:
        0;
}

.executive-dashboard .product-row strong,
.executive-dashboard .product-row small {
    overflow-wrap:
        anywhere;
}


/* ------------------------------------------------------------
   DASHBOARD TABLET
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .executive-dashboard .panel-grid,
    .executive-dashboard .secondary-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }

    .executive-dashboard .chart-legend {
        gap:
            8px 12px;
    }
}


/* ------------------------------------------------------------
   DASHBOARD PHONE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .executive-dashboard {
        --dh-dashboard-gap:
            12px;
    }

    .executive-dashboard .kpi-grid,
    .executive-dashboard .today-grid,
    .executive-dashboard .insights-grid,
    .executive-dashboard .channel-grid,
    .executive-dashboard .panel-grid,
    .executive-dashboard .secondary-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;

        gap:
            var(
                --dh-dashboard-gap
            ) !important;
    }

    .executive-dashboard .kpi-card,
    .executive-dashboard .pay-card {
        width:
            100%;

        min-height:
            0;
    }

    .executive-dashboard button,
    .executive-dashboard .btn,
    .executive-dashboard a[role="button"] {
        min-height:
            44px;

        touch-action:
            manipulation;
    }

    .executive-dashboard .chart-shell {
        min-height:
            260px;
    }

    .executive-dashboard .chart-shell svg {
        height:
            260px;
    }

    .executive-dashboard .chart-legend {
        display:
            flex;

        flex-wrap:
            wrap;

        gap:
            8px 12px;
    }

    .executive-dashboard .method-row {
        gap:
            10px;
    }

    .executive-dashboard .product-row {
        grid-template-columns:
            36px
            minmax(
                0,
                1fr
            )
            auto;
    }

    .executive-dashboard .product-row > :last-child {
        max-width:
            34vw;

        text-align:
            right;

        overflow-wrap:
            anywhere;
    }
}


/* ------------------------------------------------------------
   VERY NARROW PHONE
   ------------------------------------------------------------ */

@media (max-width: 380px) {

    .executive-dashboard .product-row {
        grid-template-columns:
            32px
            minmax(
                0,
                1fr
            );
    }

    .executive-dashboard .product-row > :last-child {
        grid-column:
            2;

        max-width:
            none;

        text-align:
            left;
    }

    .dh-main {
        padding-left:
            10px !important;

        padding-right:
            10px !important;
    }
}

/* END HERNAN_R6_EXPERIENCE_03B1_MOBILE_FOUNDATION_DASHBOARD */


/* ============================================================
   HERNAN_R6_EXPERIENCE_03C2_OPERATIONAL_MOBILE_TOUCH
   Mesas · Pedidos · Cocina · Caja/POS
   ============================================================ */


/* ------------------------------------------------------------
   OPERATIONAL FOUNDATION
   ------------------------------------------------------------ */

.dh-op-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dh-op-page *,
.dh-op-page *::before,
.dh-op-page *::after {
    box-sizing: border-box;
}

.dh-op-hero,
.dh-op-actions,
.dh-operational-stats,
.dh-filterbar,
.dh-room-section,
.dh-table-grid,
.dh-order-grid,
.dh-pos-grid,
.dh-order-create-shell,
.dh-order-workspace-grid,
.dh-product-grid,
.dh-combo-grid,
.dh-kds-grid,
.dh-payment-layout {
    min-width: 0;
}


/* ------------------------------------------------------------
   CUSTOM SURFACES · DARK MODE COMPATIBILITY
   Keep operational state colors untouched.
   ------------------------------------------------------------ */

:root[data-dh-theme="dark"]
:is(
    .dh-room-section,
    .dh-product-search-card,
    .dh-product-category,
    .dh-product-card,
    .dh-combo-card,
    .dh-cart-panel,
    .dh-create-main,
    .dh-create-summary,
    .dh-availability-panel,
    .dh-payment-summary,
    .dh-payment-card,
    .dh-sensitive-zone,
    .dh-sensitive-block
) {
    background:
        var(--dh-surface) !important;

    border-color:
        var(--dh-ui-border) !important;

    color:
        var(--dh-ui-text) !important;
}

:root[data-dh-theme="dark"]
:is(
    .dh-product-card,
    .dh-combo-card,
    .dh-cart-panel,
    .dh-payment-card
)
.text-muted {
    color:
        var(--dh-ui-muted) !important;
}


/* ------------------------------------------------------------
   TOUCH TARGETS
   ------------------------------------------------------------ */

:is(
    .dh-table-actions,
    .dh-op-actions,
    .dh-kds-ticket-footer,
    .dh-cart-primary-action,
    .dh-payment-actions
)
:is(
    a,
    button
) {
    touch-action:
        manipulation;
}

.dh-table-actions .btn,
.dh-inline-action,
.dh-filter-pills button,
.dh-channel-card,
.dh-product-toggle,
.dh-remove-line,
.dh-add-payment,
.dh-sensitive-toggle {
    min-height:
        44px;
}

.dh-inline-action,
.dh-remove-line {
    min-width:
        44px;

    display:
        inline-grid;

    place-items:
        center;
}


/* ------------------------------------------------------------
   RESPONSIVE TABLE / INPUT SAFETY
   ------------------------------------------------------------ */

.dh-op-page input,
.dh-op-page select,
.dh-op-page textarea {
    max-width:
        100%;
}

.dh-product-card,
.dh-combo-card,
.dh-cart-panel,
.dh-kds-ticket,
.dh-pos-card,
.dh-payment-card,
.dh-table-tile {
    min-width:
        0;
}


/* ============================================================
   TABLET · <= 991px
   ============================================================ */

@media (max-width: 991.98px) {

    /* --------------------------------
       HERO / ACTIONS
       -------------------------------- */

    .dh-op-hero {
        gap:
            16px;
    }

    .dh-op-actions {
        display:
            flex;

        flex-wrap:
            wrap;

        gap:
            10px;
    }


    /* --------------------------------
       ORDER CREATION
       -------------------------------- */

    .dh-order-create-shell {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }

    .dh-create-summary {
        position:
            static !important;

        top:
            auto !important;

        width:
            100%;

        max-width:
            none;
    }


    /* --------------------------------
       ORDER WORKSPACE
       -------------------------------- */

    .dh-order-workspace-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }

    .dh-cart-panel {
        position:
            static !important;

        top:
            auto !important;

        max-height:
            none !important;

        overflow:
            visible !important;
    }


    /* --------------------------------
       PRODUCT / COMBO CATALOG
       -------------------------------- */

    .dh-product-grid,
    .dh-combo-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }


    /* --------------------------------
       KDS
       -------------------------------- */

    .dh-kds-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }


    /* --------------------------------
       PAYMENT
       -------------------------------- */

    .dh-payment-layout {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }

    .dh-payment-actions {
        position:
            static !important;

        top:
            auto !important;

        width:
            100%;
    }
}


/* ============================================================
   MOBILE · <= 767px
   ============================================================ */

@media (max-width: 767.98px) {

    /* --------------------------------
       OPERATION HERO
       -------------------------------- */

    .dh-op-hero {
        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            stretch !important;

        gap:
            14px;
    }

    .dh-op-actions {
        width:
            100%;
    }

    .dh-op-actions .btn {
        flex:
            1 1 160px;

        min-height:
            46px;
    }


    /* --------------------------------
       OPERATIONAL STATS
       -------------------------------- */

    .dh-operational-stats {
        display:
            grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;

        gap:
            10px !important;
    }

    .dh-mini-stat {
        min-width:
            0;

        padding:
            14px !important;
    }

    .dh-mini-stat strong {
        overflow-wrap:
            anywhere;
    }


    /* --------------------------------
       SEARCH / FILTERS
       -------------------------------- */

    .dh-filterbar {
        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            stretch !important;

        gap:
            12px;
    }

    .dh-searchbox {
        width:
            100%;

        min-width:
            0;
    }

    .dh-searchbox input {
        width:
            100%;
    }

    .dh-filter-pills {
        width:
            100%;

        display:
            flex !important;

        flex-wrap:
            nowrap !important;

        gap:
            8px;

        overflow-x:
            auto;

        padding-bottom:
            4px;

        overscroll-behavior-inline:
            contain;

        scrollbar-width:
            thin;

        -webkit-overflow-scrolling:
            touch;
    }

    .dh-filter-pills button {
        flex:
            0 0 auto;

        min-width:
            max-content;

        padding-left:
            14px;

        padding-right:
            14px;
    }


    /* --------------------------------
       MESAS
       -------------------------------- */

    .dh-room-header {
        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            stretch !important;

        gap:
            12px;
    }

    .dh-room-header > * {
        min-width:
            0;
    }

    .dh-table-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;

        gap:
            12px !important;
    }

    .dh-table-tile {
        min-height:
            190px;

        padding:
            14px !important;
    }

    .dh-table-name {
        overflow-wrap:
            anywhere;
    }

    .dh-table-actions {
        display:
            grid !important;

        grid-template-columns:
            minmax(
                0,
                1fr
            );

        gap:
            8px !important;
    }

    .dh-table-actions .btn,
    .dh-table-actions a {
        width:
            100%;

        min-height:
            44px;
    }


    /* --------------------------------
       ORDER CARDS / POS CARDS
       -------------------------------- */

    .dh-order-grid,
    .dh-pos-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;

        gap:
            12px !important;
    }

    .dh-order-card,
    .dh-pos-card {
        width:
            100%;

        max-width:
            100%;
    }

    .dh-order-card-top,
    .dh-pos-card-head {
        gap:
            10px;
    }


    /* --------------------------------
       ORDER CREATION
       -------------------------------- */

    .dh-channel-selector {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            ) !important;

        gap:
            8px !important;
    }

    .dh-channel-card {
        min-width:
            0;

        padding:
            12px 8px !important;

        text-align:
            center;
    }

    .dh-create-main,
    .dh-create-summary {
        min-width:
            0;
    }


    /* --------------------------------
       ORDER FLOW
       -------------------------------- */

    .dh-order-flow {
        display:
            flex !important;

        flex-wrap:
            nowrap !important;

        gap:
            8px;

        overflow-x:
            auto;

        padding-bottom:
            5px;

        overscroll-behavior-inline:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }

    .dh-order-flow-step {
        flex:
            0 0 auto;

        min-width:
            118px;
    }


    /* --------------------------------
       PRODUCT / COMBO
       -------------------------------- */

    .dh-product-grid,
    .dh-combo-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }

    .dh-product-card,
    .dh-combo-card {
        width:
            100%;

        max-width:
            100%;
    }

    .dh-product-card-head,
    .dh-combo-card-top,
    .dh-category-head {
        min-width:
            0;
    }

    .dh-product-card-head > *,
    .dh-combo-card-top > *,
    .dh-category-head > * {
        min-width:
            0;
    }

    .dh-product-price {
        flex:
            0 0 auto;
    }

    .dh-extra-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }

    .dh-extra-option {
        min-width:
            0;

        min-height:
            42px;
    }

    .dh-product-add-row {
        display:
            grid !important;

        grid-template-columns:
            96px
            minmax(
                0,
                1fr
            ) !important;

        gap:
            10px !important;
    }

    .dh-qty-field,
    .dh-note-field {
        min-width:
            0;
    }

    .dh-qty-field input,
    .dh-note-field input {
        width:
            100% !important;

        max-width:
            none !important;
    }

    .dh-combo-card form.d-flex {
        flex-wrap:
            wrap;
    }

    .dh-combo-card form.d-flex
    input.form-control {
        flex:
            0 0 96px;

        width:
            96px;

        max-width:
            none !important;
    }

    .dh-combo-card form.d-flex
    .btn {
        min-height:
            44px;
    }


    /* --------------------------------
       CART
       -------------------------------- */

    .dh-cart-head {
        min-width:
            0;
    }

    .dh-cart-line {
        min-width:
            0;
    }

    .dh-cart-line-main {
        min-width:
            0;
    }

    .dh-cart-product {
        min-width:
            0;

        overflow-wrap:
            anywhere;
    }

    .dh-cart-line-price {
        white-space:
            nowrap;
    }

    .dh-remove-line {
        min-width:
            44px;

        min-height:
            44px;
    }

    .dh-cart-primary-action
    .btn {
        min-height:
            50px;
    }


    /* --------------------------------
       KITCHEN / KDS
       -------------------------------- */

    .dh-kds-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;

        gap:
            14px !important;
    }

    .dh-kds-ticket {
        width:
            100%;

        max-width:
            100%;
    }

    .dh-kds-ticket-head {
        gap:
            10px;
    }

    .dh-kds-items,
    .dh-kds-item {
        min-width:
            0;
    }

    .dh-kds-note {
        overflow-wrap:
            anywhere;
    }

    .dh-kds-ticket-footer {
        display:
            grid !important;

        grid-template-columns:
            minmax(
                0,
                1fr
            );

        gap:
            8px !important;
    }

    .dh-kds-ticket-footer
    .btn {
        width:
            100%;

        min-height:
            48px;
    }

    .dh-product-toggle-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }

    .dh-product-toggle {
        width:
            100%;

        min-width:
            0;

        overflow-wrap:
            anywhere;
    }


    /* --------------------------------
       PAYMENT
       -------------------------------- */

    .dh-payment-summary,
    .dh-payment-actions,
    .dh-payment-card {
        min-width:
            0;
    }

    .dh-payment-total-hero {
        min-width:
            0;
    }

    .dh-payment-total-hero > strong {
        overflow-wrap:
            anywhere;
    }

    .dh-payment-line {
        min-width:
            0;
    }

    .dh-payment-line > div {
        min-width:
            0;
    }

    .dh-payment-line
    :is(
        strong,
        span,
        small
    ) {
        overflow-wrap:
            anywhere;
    }

    .dh-payment-method-row {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;

        gap:
            12px !important;

        align-items:
            stretch !important;
    }

    .dh-payment-method-select,
    .dh-payment-method-amount,
    .dh-payment-digital-evidence {
        width:
            100%;

        min-width:
            0;

        grid-column:
            auto !important;
    }

    .dh-payment-method-row
    :is(
        input,
        select
    ) {
        width:
            100%;
    }

    .dh-payment-balance {
        gap:
            10px;
    }

    .dh-cash-change {
        min-width:
            0;
    }

    .dh-add-payment {
        width:
            100%;

        min-height:
            46px;
    }

    .dh-payment-security {
        display:
            block;

        line-height:
            1.45;
    }

    .dh-sensitive-toggle {
        width:
            100%;

        min-height:
            46px;
    }


    /* --------------------------------
       CASH SHIFT / BOOTSTRAP FORMS
       -------------------------------- */

    .dh-main
    > .d-flex.justify-content-between {
        flex-wrap:
            wrap;

        gap:
            12px;
    }

    .dh-main
    .display-6 {
        font-size:
            clamp(
                1.7rem,
                8vw,
                2.5rem
            );
    }

    .dh-main
    .table-responsive
    table {
        min-width:
            620px;
    }
}


/* ============================================================
   SMALL PHONE · <= 575px
   ============================================================ */

@media (max-width: 575.98px) {

    /* --------------------------------
       FULL-WIDTH PRIMARY ACTIONS
       -------------------------------- */

    .dh-op-actions {
        display:
            grid !important;

        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }

    .dh-op-actions .btn {
        width:
            100%;

        min-height:
            48px;
    }


    /* --------------------------------
       STATS
       -------------------------------- */

    .dh-operational-stats {
        gap:
            8px !important;
    }


    /* --------------------------------
       MESAS
       -------------------------------- */

    .dh-table-grid {
        gap:
            10px !important;
    }

    .dh-table-tile {
        min-height:
            180px;

        padding:
            12px !important;
    }


    /* --------------------------------
       ORDER CREATE
       -------------------------------- */

    .dh-create-main,
    .dh-create-summary {
        padding:
            16px !important;
    }

    .dh-product-add-row {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }

    .dh-combo-card form.d-flex {
        display:
            grid !important;

        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }

    .dh-combo-card form.d-flex
    input.form-control {
        width:
            100%;

        max-width:
            none !important;
    }

    .dh-extra-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }


    /* --------------------------------
       CART
       -------------------------------- */

    .dh-cart-line {
        gap:
            8px;
    }

    .dh-cart-line-main {
        align-items:
            flex-start;
    }

    .dh-cart-line-price {
        font-size:
            .95rem;
    }


    /* --------------------------------
       POS PAYMENT
       -------------------------------- */

    .dh-payment-total-hero {
        padding:
            18px !important;
    }

    .dh-payment-total-hero > strong {
        font-size:
            clamp(
                2rem,
                12vw,
                3rem
            ) !important;
    }

    .dh-payment-card {
        padding:
            16px !important;
    }

    .dh-payment-line {
        display:
            grid !important;

        grid-template-columns:
            minmax(
                0,
                1fr
            );

        gap:
            5px;
    }

    .dh-payment-line > strong {
        text-align:
            left !important;
    }

    .dh-payment-card
    .d-flex.justify-content-between.align-items-start {
        align-items:
            stretch !important;
    }

    .dh-payment-card
    .text-end {
        text-align:
            left !important;
    }

    .dh-payment-balance {
        display:
            grid !important;

        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }

    .dh-cash-change
    .input-group {
        width:
            100%;
    }

    .dh-sensitive-content
    .row > [class*="col-"] {
        width:
            100%;
    }


    /* --------------------------------
       KDS
       -------------------------------- */

    .dh-kds-ticket {
        border-radius:
            16px !important;
    }

    .dh-kds-timebox strong {
        font-size:
            clamp(
                1.35rem,
                8vw,
                1.8rem
            );
    }

    .dh-product-toggle-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }


    /* --------------------------------
       CASH TABLES
       -------------------------------- */

    .dh-main
    .table-responsive
    table {
        min-width:
            560px;
    }
}


/* ============================================================
   VERY NARROW PHONE · <= 420px
   ============================================================ */

@media (max-width: 420px) {

    .dh-channel-selector {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }

    .dh-channel-card {
        display:
            flex !important;

        align-items:
            center;

        justify-content:
            flex-start;

        text-align:
            left;

        gap:
            12px;

        padding:
            12px 14px !important;
    }

    .dh-table-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }

    .dh-table-tile {
        min-height:
            0;
    }

    .dh-operational-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }

    .dh-payment-card {
        padding:
            14px !important;
    }
}

/* END HERNAN_R6_EXPERIENCE_03C2_OPERATIONAL_MOBILE_TOUCH */


/* ============================================================
   HERNAN_R6_EXPERIENCE_03D2_REMAINING_MODULES_MOBILE
   Delivery · Catalog · Inventory · Users · Branding · Fiscal
   ============================================================ */


/* ------------------------------------------------------------
   SHARED SAFETY
   ------------------------------------------------------------ */

.dh-delivery-page,
.dh-inventory,
.dh-category-grid,
.dh-customer-grid,
.dh-delivery-board,
.dh-delivery-kpis,
.dh-inv-alert-grid,
.dh-recipe-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

:is(
    .dh-delivery-page,
    .dh-inventory
) *,
:is(
    .dh-delivery-page,
    .dh-inventory
) *::before,
:is(
    .dh-delivery-page,
    .dh-inventory
) *::after {
    box-sizing: border-box;
}

.dh-delivery-card,
.dh-customer-card,
.dh-address-card,
.dh-category-card,
.dh-recipe-card {
    min-width: 0;
}


/* ------------------------------------------------------------
   INVENTORY TABLES
   ------------------------------------------------------------ */

.dh-inv-table-wrap.table-responsive,
.dh-recipe-table-wrap.table-responsive {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;

    overscroll-behavior-inline:
        contain;

    -webkit-overflow-scrolling:
        touch;
}

.dh-inv-table,
.dh-recipe-table {
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   DARK SURFACES
   ------------------------------------------------------------ */

:root[data-dh-theme="dark"]
:is(
    .dh-delivery-card,
    .dh-customer-card,
    .dh-address-card,
    .dh-category-card,
    .dh-recipe-card,
    .dh-inv-table-wrap,
    .dh-recipe-table-wrap
) {
    border-color:
        var(--dh-ui-border) !important;

    color:
        var(--dh-ui-text);
}


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

@media (max-width: 991.98px) {

    /* --------------------------------
       DELIVERY
       -------------------------------- */

    .dh-delivery-hero,
    .dh-delivery-detail-hero {
        align-items:
            flex-start !important;

        gap:
            16px;
    }

    .dh-delivery-hero-actions {
        display:
            flex;

        flex-wrap:
            wrap;

        gap:
            10px;

        width:
            100%;
    }

    .dh-delivery-kpis {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .dh-delivery-board,
    .dh-customer-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    /* --------------------------------
       INVENTORY
       -------------------------------- */

    .dh-inv-hero {
        gap:
            16px;
    }

    .dh-inv-form-grid,
    .dh-recipe-form {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .dh-recipe-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    /* --------------------------------
       BRANDING
       -------------------------------- */

    .dh-branding-preview-sticky {
        position:
            static !important;

        top:
            auto !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    /* --------------------------------
       DELIVERY
       -------------------------------- */

    .dh-delivery-hero,
    .dh-delivery-detail-hero {
        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            stretch !important;
    }

    .dh-delivery-hero-actions {
        display:
            grid;

        grid-template-columns:
            minmax(0, 1fr);

        gap:
            8px;
    }

    .dh-delivery-hero-actions .btn {
        width:
            100%;

        min-height:
            46px;
    }

    .dh-delivery-kpis {
        gap:
            10px !important;
    }

    .dh-delivery-board,
    .dh-customer-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            12px !important;
    }

    .dh-delivery-card,
    .dh-customer-card {
        width:
            100%;

        max-width:
            100%;
    }

    .dh-delivery-card-top,
    .dh-delivery-card-footer,
    .dh-customer-card-head {
        gap:
            10px;
    }

    .dh-delivery-address,
    .dh-address-card {
        min-width:
            0;
    }

    .dh-delivery-address strong,
    .dh-delivery-address span,
    .dh-address-card strong,
    .dh-address-card span,
    .dh-customer-profile h3 {
        overflow-wrap:
            anywhere;
    }

    .dh-delivery-meta-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .dh-action-form,
    .dh-action-form textarea,
    .dh-action-form select {
        width:
            100%;
    }

    .dh-action-form .btn,
    .dh-delivery-page .btn-lg {
        min-height:
            48px;
    }


    /* --------------------------------
       CATALOG
       -------------------------------- */

    .dh-category-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            12px !important;
    }

    .dh-category-card,
    .dh-product-card {
        width:
            100%;

        max-width:
            100%;
    }

    .dh-category-card-top,
    .dh-category-footer,
    .dh-product-price-row {
        min-width:
            0;

        gap:
            10px;
    }

    .dh-category-content h2,
    .dh-product-body h2,
    .dh-product-description,
    .dh-product-sku {
        overflow-wrap:
            anywhere;
    }

    .dh-catalog-filter-card
    .row > [class*="col-"] {
        min-width:
            0;
    }

    .dh-editor-card-head {
        flex-wrap:
            wrap;

        gap:
            10px;
    }

    .dh-editor-card-head .btn {
        min-height:
            44px;
    }

    .dh-variant-table {
        min-width:
            720px;
    }


    /* --------------------------------
       INVENTORY
       -------------------------------- */

    .dh-inventory {
        overflow-x:
            clip;
    }

    .dh-inv-hero,
    .dh-recipe-card > header {
        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            stretch !important;

        gap:
            12px;
    }

    .dh-inv-form-grid,
    .dh-inv-movement-form,
    .dh-recipe-form {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .dh-inv-form-grid input,
    .dh-inv-form-grid select,
    .dh-inv-form-grid textarea,
    .dh-recipe-form input,
    .dh-recipe-form select {
        width:
            100%;

        max-width:
            none;
    }

    .dh-inv-form-action {
        width:
            100%;
    }

    .dh-inv-form-action .dh-inv-btn,
    .dh-recipe-form .dh-inv-btn {
        width:
            100%;

        min-height:
            46px;
    }

    .dh-inv-table,
    .dh-inv-kardex-table {
        min-width:
            760px;
    }

    .dh-recipe-table {
        min-width:
            660px;
    }

    .dh-recipe-summary {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            10px !important;
    }

    .dh-recipe-product {
        min-width:
            0;
    }

    .dh-recipe-product h2,
    .dh-recipe-product p {
        overflow-wrap:
            anywhere;
    }

    .dh-inv-alert-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .dh-recipe-remove {
        min-width:
            44px;

        min-height:
            44px;
    }


    /* --------------------------------
       USERS / GENERIC ADMIN FORMS
       -------------------------------- */

    .dh-main
    form
    .row > [class*="col-md-"],
    .dh-main
    form
    .row > [class*="col-lg-"] {
        min-width:
            0;
    }

    .dh-main
    .table-responsive
    .btn-sm {
        min-height:
            40px;
    }


    /* --------------------------------
       BRANDING
       -------------------------------- */

    .dh-branding-preview-sticky {
        position:
            static !important;

        top:
            auto !important;
    }

    #brandingPreview {
        min-height:
            0 !important;
    }

    #brandingPreviewLogo {
        max-width:
            100%;
    }


    /* --------------------------------
       FISCAL CENTER
       -------------------------------- */

    .dh-main
    table
    td[style*="min-width:260px"] {
        min-width:
            220px !important;
    }

    .dh-main
    .table-responsive {
        border-radius:
            var(--dh-radius-md);
    }

    .dh-main
    form
    .btn.w-100 {
        min-height:
            46px;
    }
}


/* ============================================================
   SMALL PHONE
   ============================================================ */

@media (max-width: 575.98px) {

    .dh-delivery-kpis,
    .dh-delivery-meta-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .dh-delivery-kpi {
        min-width:
            0;
    }

    .dh-category-footer,
    .dh-delivery-card-footer {
        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            stretch !important;

        gap:
            8px;
    }

    .dh-category-footer .btn,
    .dh-delivery-card-footer .btn {
        width:
            100%;

        min-height:
            44px;
    }

    .dh-inv-table,
    .dh-inv-kardex-table {
        min-width:
            700px;
    }

    .dh-recipe-table {
        min-width:
            620px;
    }

    .dh-main
    .card
    .d-flex.flex-wrap
    .btn {
        min-height:
            44px;
    }
}


/* ============================================================
   VERY NARROW PHONE
   ============================================================ */

@media (max-width: 420px) {

    .dh-delivery-kpi,
    .dh-customer-card,
    .dh-category-card,
    .dh-recipe-card {
        border-radius:
            14px;
    }

    .dh-inv-table,
    .dh-inv-kardex-table {
        min-width:
            660px;
    }

    .dh-recipe-table {
        min-width:
            580px;
    }
}

/* END HERNAN_R6_EXPERIENCE_03D2_REMAINING_MODULES_MOBILE */


/* ============================================================
   HERNAN_R6_EXPERIENCE_04B1_QUICK_STAFF_ACCESS
   ============================================================ */

.dh-quick-login {
    border:
        1px solid
        var(--dh-ui-border);

    border-radius:
        16px;

    background:
        var(--dh-surface);

    overflow:
        hidden;
}

.dh-quick-login > summary {
    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        13px 16px;

    font-weight:
        750;

    color:
        var(--dh-brand-primary);

    cursor:
        pointer;

    list-style:
        none;

    user-select:
        none;

    touch-action:
        manipulation;
}

.dh-quick-login > summary::-webkit-details-marker {
    display:
        none;
}

.dh-quick-login[open] > summary {
    border-bottom:
        1px solid
        var(--dh-ui-border);
}

.dh-quick-login-body {
    padding:
        18px;
}

.dh-quick-login
input[inputmode="numeric"] {
    font-size:
        1.25rem !important;

    font-weight:
        750;

    letter-spacing:
        .22em;

    text-align:
        center;
}

:root[data-dh-theme="dark"]
.dh-quick-login {
    background:
        var(--dh-surface);

    border-color:
        var(--dh-ui-border);
}

@media (max-width: 575.98px) {

    .dh-quick-login > summary {
        min-height:
            54px;
    }

    .dh-quick-login-body {
        padding:
            16px;
    }

    .dh-quick-login .btn {
        min-height:
            48px;
    }
}

/* END HERNAN_R6_EXPERIENCE_04B1_QUICK_STAFF_ACCESS */


/* ============================================================
   HERNAN_R6_EXPERIENCE_04D_QUICK_LOGIN_POPUP
   ============================================================ */


.dh-quick-login-trigger {
    width:
        100%;

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    margin-top:
        18px;

    padding:
        12px 18px;

    border:
        1px solid
        var(--dh-ui-border);

    border-radius:
        14px;

    background:
        var(--dh-surface);

    color:
        var(--dh-brand-primary);

    font: inherit;

    font-weight:
        760;

    cursor:
        pointer;

    box-shadow:
        0 6px 18px
        rgba(
            15,
            23,
            42,
            .05
        );

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;

    touch-action:
        manipulation;
}


.dh-quick-login-trigger:hover {
    transform:
        translateY(-1px);

    border-color:
        color-mix(
            in srgb,
            var(--dh-brand-primary)
            35%,
            var(--dh-ui-border)
        );

    box-shadow:
        0 10px 26px
        rgba(
            15,
            23,
            42,
            .09
        );
}


.dh-quick-login-trigger:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--dh-brand-primary)
            24%,
            transparent
        );

    outline-offset:
        3px;
}


.dh-quick-login-trigger-icon {
    font-size:
        1rem;
}


/* ------------------------------------------------------------
   DIALOG
   ------------------------------------------------------------ */

.dh-quick-login-dialog {
    width:
        min(
            92vw,
            430px
        );

    max-width:
        430px;

    max-height:
        calc(
            100dvh -
            32px
        );

    margin:
        auto;

    padding:
        0;

    border:
        0;

    border-radius:
        22px;

    background:
        transparent;

    color:
        var(--dh-ui-text);

    overflow:
        visible;
}


.dh-quick-login-dialog::backdrop {
    background:
        rgba(
            9,
            15,
            28,
            .58
        );

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


.dh-quick-login-dialog[open] {
    animation:
        dhQuickDialogIn
        .18s ease-out;
}


@keyframes dhQuickDialogIn {

    from {
        opacity:
            0;

        transform:
            translateY(14px)
            scale(.975);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


.dh-quick-login-modal-card {
    width:
        100%;

    max-height:
        calc(
            100dvh -
            32px
        );

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        var(--dh-ui-border);

    border-radius:
        22px;

    background:
        var(--dh-surface);

    box-shadow:
        0 28px 80px
        rgba(
            0,
            0,
            0,
            .25
        );
}


.dh-quick-login-modal-head {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        22px 22px 18px;

    border-bottom:
        1px solid
        var(--dh-ui-border);
}


.dh-quick-login-modal-eyebrow {
    margin-bottom:
        5px;

    color:
        var(--dh-brand-primary);

    font-size:
        .72rem;

    font-weight:
        800;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.dh-quick-login-modal-title {
    margin:
        0;

    color:
        var(--dh-ui-text);

    font-size:
        1.28rem;

    font-weight:
        800;

    line-height:
        1.2;
}


.dh-quick-login-modal-close {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        1px solid
        var(--dh-ui-border);

    border-radius:
        12px;

    background:
        var(--dh-surface-soft);

    color:
        var(--dh-ui-text);

    font-size:
        1.7rem;

    font-weight:
        400;

    line-height:
        1;

    cursor:
        pointer;

    touch-action:
        manipulation;
}


.dh-quick-login-modal-close:hover {
    color:
        var(--dh-brand-primary);

    border-color:
        color-mix(
            in srgb,
            var(--dh-brand-primary)
            35%,
            var(--dh-ui-border)
        );
}


.dh-quick-login-modal-body {
    min-height:
        0;

    overflow-y:
        auto;

    padding:
        22px;

    overscroll-behavior:
        contain;
}


.dh-quick-login-help {
    margin:
        0 0 18px;

    color:
        var(--dh-ui-muted);

    font-size:
        .92rem;
}


.dh-quick-pin-input {
    font-size:
        1.32rem !important;

    font-weight:
        800;

    letter-spacing:
        .24em;

    text-align:
        center;
}


.dh-quick-login-submit {
    min-height:
        50px;
}


.dh-quick-login-security-note {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        16px;

    color:
        var(--dh-ui-muted);

    font-size:
        .78rem;

    text-align:
        center;
}


/* ------------------------------------------------------------
   DARK MODE
   ------------------------------------------------------------ */

:root[data-dh-theme="dark"]
.dh-quick-login-trigger,
:root[data-dh-theme="dark"]
.dh-quick-login-modal-card {
    background:
        var(--dh-surface);

    border-color:
        var(--dh-ui-border);
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 575.98px) {

    .dh-quick-login-trigger {
        min-height:
            54px;

        margin-top:
            16px;
    }

    .dh-quick-login-dialog {
        width:
            calc(
                100vw -
                20px
            );

        max-width:
            none;

        max-height:
            calc(
                100dvh -
                20px
            );
    }

    .dh-quick-login-modal-card {
        max-height:
            calc(
                100dvh -
                20px
            );

        border-radius:
            18px;
    }

    .dh-quick-login-modal-head {
        padding:
            18px 18px 15px;
    }

    .dh-quick-login-modal-body {
        padding:
            18px;
    }

    .dh-quick-login-modal-title {
        font-size:
            1.18rem;
    }
}


@media (prefers-reduced-motion: reduce) {

    .dh-quick-login-dialog[open] {
        animation:
            none;
    }
}

/* END HERNAN_R6_EXPERIENCE_04D_QUICK_LOGIN_POPUP */