:root {
    --fw-shell-header-height: 72px;
    --fw-shell-sidebar-width: 280px;
    --fw-shell-content-gutter: 28px;
    --fw-mobile-nav-height: 62px;
    --fw-shell-scrim: rgba(15, 23, 42, .42);
}

html,
body {
    min-height: 100%;
    overflow-x: hidden !important;
}

body {
    background: var(--fw-page-bg, #f7f9fc);
}

.fw-shell-main {
    min-height: 100vh;
    overflow: visible !important;
}

.fw-shell-scrim {
    position: fixed;
    inset: 0;
    display: block;
    background: var(--fw-shell-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 2030;
}

.fw-shell-scrim.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.pc-header {
    z-index: 2041 !important;
}

.pc-sidebar {
    z-index: 2035 !important;
}

.mobile-bottom-nav {
    z-index: 2045 !important;
}

.pc-sidebar .navbar-content {
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pc-header .header-wrapper {
    min-width: 0;
}

.pc-header .pc-head-link,
.pc-header .pc-h-item {
    flex-shrink: 0;
}

.pc-header .pc-head-link.logo,
.pc-header .header-logo,
.pc-header .pc-brand {
    min-width: 0;
    max-width: 42vw;
}

.pc-header img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 1200px) {
    .pc-header {
        left: var(--fw-shell-sidebar-width) !important;
    }

    .pc-sidebar {
        width: var(--fw-shell-sidebar-width) !important;
    }

    .pc-container {
        margin-left: var(--fw-shell-sidebar-width) !important;
    }

    .mobile-bottom-nav {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    :root {
        --fw-shell-header-height: 64px;
    }

    .pc-header {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        height: var(--fw-shell-header-height) !important;
    }

    .pc-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: calc(var(--fw-shell-sidebar-width) * -1) !important;
        width: var(--fw-shell-sidebar-width) !important;
        transition: left .22s ease;
    }

    .pc-sidebar.mob-sidebar-active {
        left: 0 !important;
    }

    .pc-container {
        margin: 0 !important;
        padding-top: var(--fw-shell-header-height) !important;
    }

    .mobile-bottom-nav {
        display: none !important;
    }

    .pc-container .pc-content {
        padding-right: 24px !important;
        padding-left: 24px !important;
    }

    /* Tablets use the same compact cards as mobile; the desktop table needs
       more than an iPad viewport and otherwise creates clipped content. */
    .users-index #usersDesktopView {
        display: none !important;
    }

    .users-index #usersMobileCards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    :root {
        --fw-shell-header-height: 56px;
        --fw-mobile-nav-height: 60px;
    }

    .pc-header {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        height: var(--fw-shell-header-height) !important;
        min-height: var(--fw-shell-header-height) !important;
    }

    .pc-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: calc(var(--fw-shell-sidebar-width) * -1) !important;
        width: min(var(--fw-shell-sidebar-width), 88vw) !important;
        transition: left .22s ease;
    }

    .pc-sidebar .navbar-content {
        max-height: 100dvh;
    }

    .pc-sidebar.mob-sidebar-active {
        left: 0 !important;
    }

    .fw-shell-main {
        padding-bottom: calc(var(--fw-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
    }

    .mobile-page-scroll {
        display: block !important;
        height: auto !important;
        min-height: 100dvh;
        overflow: visible !important;
        -webkit-overflow-scrolling: auto !important;
        padding-bottom: 0 !important;
        touch-action: pan-y;
    }

    .pc-container {
        min-height: auto !important;
        margin: 0 !important;
        padding-top: var(--fw-shell-header-height) !important;
        padding-bottom: 0 !important;
    }

    .pc-container .pc-content {
        padding-bottom: 24px !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(var(--fw-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
        min-height: calc(var(--fw-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
        max-height: none !important;
        padding: 4px 6px env(safe-area-inset-bottom) !important;
        border: 0 !important;
        border-top: 1px solid var(--fw-border, #e6ebf2) !important;
        border-radius: 0 !important;
        background: color-mix(in srgb, var(--fw-surface, #fff) 94%, transparent) !important;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .1) !important;
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        min-height: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
    }

    body.fw-sidebar-open .mobile-bottom-nav {
        pointer-events: none;
        opacity: .35;
    }
}

/* Final shell guard: the legacy template defines a positioned, viewport-sized
   container for desktop. On touch devices that creates a nested scroll context
   and Safari can no longer scroll the document reliably. Keep one native page
   scroller and let the drawer be the only fixed layer. */
@media (max-width: 1199.98px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: static !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    html body .fw-shell-main,
    html body .mobile-page-scroll,
    html body .pc-container,
    html body .pc-container .pc-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body .pc-container {
        top: 0 !important;
        min-height: 0 !important;
        padding-top: var(--fw-shell-header-height) !important;
    }

    html body .pc-container .pc-content {
        padding-bottom: 24px !important;
    }

    html body .pc-sidebar {
        left: 0 !important;
        visibility: hidden !important;
        transform: translate3d(-100%, 0, 0) !important;
        transition: transform .22s ease, visibility 0s linear .22s !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html body .pc-sidebar.mob-sidebar-active {
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
        transition-delay: 0s !important;
    }

    html body .pc-sidebar .navbar-wrapper {
        height: 100% !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html body .pc-sidebar .navbar-content {
        height: 100% !important;
        max-height: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 575.98px) {
    .pc-container .pc-content {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .users-index #usersMobileCards {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fw-shell-scrim,
    .pc-sidebar {
        transition: none !important;
    }
}

[data-pc-theme='dark'] body,
[data-pc-theme='dark'] {
    --fw-page-bg: #131920;
    --fw-shell-scrim: rgba(0, 0, 0, .58);
}

[data-pc-theme='dark'] .pc-header {
    background: var(--fw-surface, #1b232d) !important;
    border-color: var(--fw-border, #303f50) !important;
}

[data-pc-theme='dark'] .mobile-bottom-nav {
    border-color: var(--fw-border, #303f50) !important;
}

@media (max-width: 767.98px) {
    .internal-cfdi-account-table {
        min-width: 0 !important;
    }

    .internal-cfdi-account-table th,
    .internal-cfdi-account-table td {
        white-space: normal !important;
        word-break: break-word;
    }
}