/* Mobile urgent refresh: compact UI, faster panels, visible hamburger menu. */
@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
        letter-spacing: 0 !important;
    }

    body {
        width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        background: #0d0f14 !important;
    }

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

    .particles,
    body::before,
    body::after {
        animation: none !important;
    }

    .header,
    .admin-header,
    .card,
    .content-card,
    .stat-card,
    .producto-card,
    .auth-container {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    a,
    button,
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    button,
    a,
    input,
    select,
    textarea {
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Public header: compact logo + real floating menu. */
    .header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        display: flex !important;
        min-height: 58px !important;
        height: 58px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 62px 6px 12px !important;
        background: #10131a !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,.28) !important;
        overflow: visible !important;
    }

    .header .logo,
    .header .brand {
        width: auto !important;
        max-width: 170px !important;
        height: 46px !important;
        justify-content: center !important;
    }

    .header .logo-img,
    .header .brand img {
        width: auto !important;
        height: 46px !important;
        max-width: 165px !important;
        object-fit: contain !important;
        transform: none !important;
    }

    .mobile-nav-toggle {
        position: fixed !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 2600 !important;
        display: inline-flex !important;
        min-width: 54px !important;
        width: 54px !important;
        min-height: 54px !important;
        height: 54px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px solid rgba(255,177,31,.42) !important;
        border-radius: 50% !important;
        background: #ffac12 !important;
        color: #111 !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.38) !important;
        cursor: pointer !important;
    }

    .mobile-nav-toggle span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
    }

    .mobile-nav-toggle i {
        font-size: 1.25rem !important;
        line-height: 1 !important;
    }

    .mobile-nav-toggle.active {
        background: #f8fafc !important;
        color: #111827 !important;
    }

    .mobile-nav-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2400 !important;
        display: none !important;
        border: 0 !important;
        background: rgba(0,0,0,.55) !important;
    }

    body.mobile-menu-open .mobile-nav-backdrop {
        display: block !important;
    }

    .header .nav-container {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 2500 !important;
        display: block !important;
        width: auto !important;
        max-height: min(70vh, 520px) !important;
        padding: 10px !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 14px !important;
        background: #151922 !important;
        box-shadow: 0 18px 44px rgba(0,0,0,.5) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(10px) !important;
    }

    .header.mobile-menu-open .nav-container {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .header .nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 7px !important;
    }

    .header .search-bar {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        padding: 8px 11px !important;
        border-radius: 9px !important;
        background: #0d1017 !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        color: #fff !important;
    }

    .header .nav a,
    .header .user-name-nav,
    .header .user-saldo-nav {
        display: inline-flex !important;
        min-height: 38px !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 8px 7px !important;
        border: 1px solid rgba(255,255,255,.1) !important;
        border-radius: 9px !important;
        background: #1e232d !important;
        color: #f3f4f6 !important;
        font-size: .84rem !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .header .btn-registro {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        background: #ffac12 !important;
        color: #111 !important;
    }

    /* Public product catalog: dense two-column cards. */
    .productos,
    main.productos,
    .container,
    .wrap,
    .main-content,
    .page-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 12px 10px !important;
    }

    .section-header,
    .categoria-header,
    .top {
        display: flex !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 6px !important;
        margin: 4px 0 10px !important;
    }

    .section-header h2,
    .categoria-titulo,
    h1 {
        font-size: 1.15rem !important;
        line-height: 1.18 !important;
        margin: 0 !important;
    }

    .grid-productos {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .producto-card {
        display: flex !important;
        min-width: 0 !important;
        min-height: 0 !important;
        flex-direction: column !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.09) !important;
        border-radius: 10px !important;
        background: #171b24 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        transform: none !important;
    }

    .producto-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .producto-card .thumb,
    .producto-card > .thumb {
        width: 100% !important;
        height: 76px !important;
        min-height: 76px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background-size: contain !important;
        background-position: center !important;
    }

    .producto-badge,
    .badge-categoria {
        top: 6px !important;
        right: 6px !important;
        max-width: calc(100% - 12px) !important;
        padding: 4px 6px !important;
        border-radius: 999px !important;
        background: rgba(0,0,0,.68) !important;
        color: #ffca55 !important;
        border: 0 !important;
        font-size: .58rem !important;
        line-height: 1.05 !important;
    }

    .producto-card h3 {
        min-height: 2.2em !important;
        margin: 7px 7px 3px !important;
        color: #fff !important;
        font-size: .74rem !important;
        line-height: 1.16 !important;
        font-weight: 900 !important;
        overflow: hidden !important;
    }

    .producto-card p {
        display: -webkit-box !important;
        min-height: 1.15em !important;
        margin: 0 7px 5px !important;
        color: #aeb4c0 !important;
        font-size: .64rem !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
    }

    .producto-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        margin: auto 7px 7px !important;
        align-items: stretch !important;
    }

    .precio {
        color: #fff !important;
        font-size: .92rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        text-shadow: none !important;
    }

    .producto-card button {
        width: 100% !important;
        min-height: 31px !important;
        padding: 6px 7px !important;
        border-radius: 8px !important;
        background: #ffac12 !important;
        color: #111 !important;
        box-shadow: none !important;
        font-size: .74rem !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }

    .hero {
        min-height: auto !important;
        padding: 34px 14px 26px !important;
    }

    .hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.08 !important;
    }

    .hero p {
        font-size: .92rem !important;
        line-height: 1.35 !important;
    }

    /* User pages and cart: compact but readable. */
    .user-dashboard,
    .profile-grid,
    .stats-grid,
    .quick-actions,
    .content-grid,
    .grid,
    .layout,
    .two-col,
    .actions,
    .metodos-grid,
    .cart-layout,
    .checkout-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .welcome-card,
    .content-card,
    .profile-card,
    .stat-card,
    .cart-card,
    .checkout-card,
    .metodo-card,
    .card {
        padding: 11px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    .card-header,
    .card-body {
        padding: 10px !important;
    }

    .table-wrap,
    .admin-table-wrap,
    .card-body,
    .content-card,
    .profile-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table,
    .data-table {
        min-width: 560px !important;
        font-size: .78rem !important;
    }

    th,
    td {
        padding: 7px 6px !important;
    }
}

/* Shared public pages: keep the index-style navigation open, compact, and without hamburger. */
@media (max-width: 768px) {
    body.public-open-nav,
    body.public-open-nav.mobile-menu-open {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.public-open-nav > header.header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        gap: 7px !important;
        padding: 8px 10px 10px !important;
        overflow: visible !important;
        background: rgba(5, 18, 30, .98) !important;
    }

    body.public-open-nav > header.header .mobile-nav-toggle,
    body.public-open-nav > .mobile-nav-backdrop,
    body.public-open-nav .mobile-nav-backdrop {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.public-open-nav > header.header .nav-container,
    body.public-open-nav > header.header:not(.mobile-menu-open) .nav-container,
    body.public-open-nav > header.header.mobile-menu-open .nav-container,
    body.public-open-nav > header.header.mobile-menu-open .nav-container#mobileNavPanel {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        display: block !important;
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        filter: none !important;
    }

    body.public-open-nav > header.header .nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
    }

    body.public-open-nav > header.header .logo {
        position: absolute !important;
        left: 10px !important;
        top: 8px !important;
        z-index: 2 !important;
        display: flex !important;
        width: 38px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.public-open-nav > header.header .logo-img {
        width: 34px !important;
        height: 34px !important;
        max-width: 34px !important;
        object-fit: contain !important;
        transform: none !important;
    }

    body.public-open-nav > header.header .search-bar {
        grid-column: 1 / -1 !important;
        order: -1 !important;
        width: calc(100% - 48px) !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        margin-left: 48px !important;
        padding: 9px 12px !important;
        border-radius: 9px !important;
    }

    body.public-open-nav > header.header .nav a,
    body.public-open-nav > header.header .user-name-nav,
    body.public-open-nav > header.header .user-saldo-nav {
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: auto !important;
        padding: 8px 8px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        background: rgba(16, 34, 48, .82) !important;
        border: 1px solid rgba(93, 255, 208, .08) !important;
        box-shadow: none !important;
        color: #e8edf5 !important;
        font-size: .78rem !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.public-open-nav > header.header .user-name-nav {
        display: none !important;
    }

    body.public-open-nav > header.header .user-saldo-nav {
        color: #ffb028 !important;
        background: rgba(18, 170, 255, .16) !important;
    }

    body.public-open-nav > header.header .btn-registro {
        color: #071016 !important;
        background: linear-gradient(135deg, #12aaff, #0de0c9) !important;
    }

    body.public-open-nav > .container,
    body.public-open-nav > main,
    body.public-open-nav .wrap,
    body.public-open-nav .recarga-section {
        margin-top: 18px !important;
    }
}

/* Mobile experience refresh: one navigation model, readable cards, card tables. */
@media (max-width: 768px) {
    :root {
        --mobile-header-h: 62px;
        --mobile-gap: 12px;
        --mobile-card-bg: #151922;
        --mobile-border: rgba(255, 255, 255, .10);
        --mobile-accent: #ffac12;
    }

    body {
        min-width: 0 !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    }

    body > .header {
        min-height: var(--mobile-header-h) !important;
        height: var(--mobile-header-h) !important;
        padding: 6px 64px 6px 12px !important;
    }

    body > .header .logo,
    body > .header .brand {
        width: auto !important;
        max-width: min(190px, calc(100vw - 92px)) !important;
        height: 48px !important;
        justify-content: flex-start !important;
    }

    body > .header .logo-img,
    body > .header .brand img {
        width: auto !important;
        height: 48px !important;
        max-width: 100% !important;
        transform: none !important;
    }

    body > .header .mobile-nav-toggle {
        position: fixed !important;
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        right: 10px !important;
        bottom: auto !important;
        z-index: 2600 !important;
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        background: var(--mobile-accent) !important;
        color: #111 !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .34) !important;
    }

    body > .header .mobile-nav-toggle span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
    }

    .mobile-nav-backdrop {
        z-index: 2380 !important;
        background: rgba(0, 0, 0, .58) !important;
    }

    body > .header .nav-container {
        position: fixed !important;
        top: calc(var(--mobile-header-h) + 8px + env(safe-area-inset-top, 0px)) !important;
        left: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        z-index: 2500 !important;
        max-height: calc(100dvh - var(--mobile-header-h) - 24px - env(safe-area-inset-top, 0px)) !important;
        padding: 12px !important;
        border-radius: 14px !important;
        background: #121722 !important;
        border: 1px solid var(--mobile-border) !important;
        overflow-y: auto !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-8px) !important;
        transition: opacity .16s ease, transform .16s ease !important;
    }

    body > .header.mobile-menu-open .nav-container {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    body > .header .nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body > .header .search-bar {
        grid-column: 1 / -1 !important;
        min-height: 44px !important;
    }

    body > .header .nav a,
    body > .header .user-name-nav,
    body > .header .user-saldo-nav {
        min-height: 44px !important;
        padding: 10px 8px !important;
        border-radius: 10px !important;
        font-size: .9rem !important;
        line-height: 1.15 !important;
    }

    body > .header .btn-registro,
    body > .header .nav a[href*="logout"],
    body > .header .nav a[href*="login"] {
        grid-column: 1 / -1 !important;
    }

    .productos,
    main.productos,
    .container,
    .wrap,
    .main-content,
    .page-container,
    .recarga-section {
        padding: 14px 12px !important;
    }

    .grid-productos {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .producto-card {
        display: grid !important;
        grid-template-columns: 104px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 12px !important;
        border-radius: 12px !important;
        background: var(--mobile-card-bg) !important;
        border: 1px solid var(--mobile-border) !important;
    }

    .producto-card .thumb,
    .producto-card > .thumb {
        grid-row: span 4 !important;
        width: 104px !important;
        height: 104px !important;
        min-height: 104px !important;
        border-radius: 10px !important;
        background-size: contain !important;
        background-color: #0d1017 !important;
    }

    .producto-card h3,
    .producto-card p,
    .producto-card .seller-name,
    .producto-card .producto-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .producto-card h3 {
        min-height: 0 !important;
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1.22 !important;
    }

    .producto-card p {
        min-height: 0 !important;
        margin: 0 !important;
        font-size: .82rem !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
    }

    .producto-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .precio {
        font-size: 1.25rem !important;
    }

    .producto-card button,
    .btn,
    .hero-btn,
    .btn-recargar,
    button[type="submit"],
    input[type="submit"] {
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        font-size: .92rem !important;
    }

    .producto-badge,
    .badge-categoria {
        top: 8px !important;
        right: 8px !important;
        font-size: .64rem !important;
    }

    .hero {
        height: auto !important;
        min-height: 360px !important;
        padding: 46px 16px 34px !important;
        margin-bottom: 28px !important;
    }

    .hero h1 {
        font-size: 2rem !important;
        line-height: 1.08 !important;
    }

    .hero p {
        font-size: .95rem !important;
    }

    .welcome-card,
    .content-card,
    .profile-card,
    .stat-card,
    .cart-card,
    .checkout-card,
    .metodo-card,
    .card,
    .quick-action,
    .quick-action-card {
        padding: 14px !important;
        border-radius: 12px !important;
        background-color: var(--mobile-card-bg) !important;
    }

    .card-header {
        padding: 12px 0 !important;
        gap: 8px !important;
    }

    .card-body {
        padding: 12px 0 !important;
    }

    .saldo-amount,
    .summary-total,
    .stat-content h3,
    .stat-number,
    .num,
    .stat-card .value {
        font-size: 1.35rem !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere !important;
    }

    .monto-options {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .monto-option {
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
    }

    .upload-area {
        padding: 18px 12px !important;
    }

    .metodo-image-container {
        max-width: min(100%, 320px) !important;
    }

    .cart-modal,
    [style*="position: fixed"][style*="inset: 0"] {
        padding: 12px !important;
    }
}

@media (max-width: 420px) {
    .producto-card {
        grid-template-columns: 88px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .producto-card .thumb,
    .producto-card > .thumb {
        width: 88px !important;
        height: 88px !important;
        min-height: 88px !important;
    }

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

@media (max-width: 768px) {
    .admin-header,
    .seller-header {
        min-height: 58px !important;
        height: auto !important;
        padding: 8px 10px 8px 62px !important;
    }

    .header-title h1 {
        font-size: 1.05rem !important;
    }

    .header-actions .search-bar,
    .admin-header .search-bar,
    .seller-header .search-bar {
        display: none !important;
    }

    .sidebar-toggle {
        top: 8px !important;
        left: 10px !important;
        width: 44px !important;
        height: 44px !important;
        z-index: 3300 !important;
    }

    .admin-sidebar {
        width: min(286px, calc(100vw - 44px)) !important;
        max-width: calc(100vw - 44px) !important;
    }

    .admin-content,
    .seller-content {
        padding: 12px 10px 22px !important;
    }

    .admin-content .stats-grid,
    .seller-content .grid,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .content-grid,
    .grid,
    .layout,
    .two-col,
    .details-grid,
    .filters,
    .filtros-container,
    .formrow,
    .row {
        grid-template-columns: 1fr !important;
    }

    .has-mobile-table {
        overflow: visible !important;
    }

    table.mobile-card-table {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
        font-size: .9rem !important;
    }

    table.mobile-card-table thead {
        display: none !important;
    }

    table.mobile-card-table tbody,
    table.mobile-card-table tr,
    table.mobile-card-table td {
        display: block !important;
        width: 100% !important;
    }

    table.mobile-card-table tr {
        padding: 12px !important;
        border: 1px solid var(--mobile-border) !important;
        border-radius: 12px !important;
        background: var(--mobile-card-bg) !important;
    }

    table.mobile-card-table td {
        min-width: 0 !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
        text-align: left !important;
        white-space: normal !important;
    }

    table.mobile-card-table td:last-child {
        border-bottom: 0 !important;
    }

    table.mobile-card-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #8f98a8;
        font-size: .72rem;
        font-weight: 800;
        line-height: 1.15;
        text-transform: uppercase;
    }

    table.mobile-card-table td[data-label=""]::before {
        display: none;
    }

    .action-buttons,
    .actions,
    .actions-row,
    .review-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .action-buttons .btn,
    .actions .btn,
    .actions-row .btn,
    .review-actions .btn,
    .review-actions button,
    .motivo input {
        width: 100% !important;
    }
}

@media (max-width: 360px) {
    .grid-productos {
        grid-template-columns: 1fr !important;
    }

    .producto-card .thumb,
    .producto-card > .thumb {
        height: 108px !important;
    }
}

/* Admin / seller performance and density. */
@media (max-width: 992px) {
    .admin-sidebar,
    .admin-header,
    .admin-main,
    .seller-main,
    .seller-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (max-width: 768px) {
    .admin-sidebar,
    .admin-sidebar *,
    .admin-main,
    .admin-main *,
    .seller-main,
    .seller-main * {
        animation: none !important;
        transition-duration: 0s !important;
    }

    .sidebar-toggle {
        top: 10px !important;
        left: 10px !important;
        z-index: 3200 !important;
        display: flex !important;
        width: 42px !important;
        height: 42px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: #ffac12 !important;
        color: #111 !important;
        box-shadow: none !important;
    }

    .admin-sidebar {
        z-index: 3100 !important;
        width: min(244px, calc(100vw - 54px)) !important;
        max-width: calc(100vw - 54px) !important;
        padding: 12px 0 !important;
        background: #10131a !important;
        box-shadow: 10px 0 24px rgba(0,0,0,.4) !important;
        transform: translateX(-105%) !important;
    }

    .admin-sidebar.active {
        transform: translateX(0) !important;
    }

    .admin-logo {
        margin-bottom: 8px !important;
        padding: 0 12px !important;
    }

    .admin-logo .logo {
        font-size: 1rem !important;
        line-height: 1.1 !important;
    }

    .admin-logo .subtitle {
        font-size: .68rem !important;
    }

    .menu-section {
        margin-bottom: 8px !important;
        padding: 0 8px !important;
    }

    .menu-section h3 {
        margin-bottom: 5px !important;
        padding-left: 6px !important;
        font-size: .62rem !important;
    }

    .menu-item {
        min-height: 38px !important;
        gap: 8px !important;
        margin-bottom: 4px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        transform: none !important;
    }

    .menu-item i {
        flex-basis: 18px !important;
        width: 18px !important;
        font-size: .95rem !important;
    }

    .menu-item span:not(.menu-badge) {
        font-size: .78rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .menu-badge {
        min-width: 18px !important;
        padding: 2px 6px !important;
        font-size: .62rem !important;
    }

    .admin-main {
        width: 100% !important;
        margin-left: 0 !important;
    }

    body:has(.admin-sidebar) > .container,
    body:has(.admin-sidebar) > .wrap,
    body:has(.admin-sidebar) > .topbar,
    body:has(.admin-sidebar) > .grid,
    body:has(.admin-sidebar) > main.wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 62px 8px 16px !important;
    }

    body:has(.admin-sidebar) > .topbar {
        display: flex !important;
        min-height: 56px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding-left: 60px !important;
        background: #10131a !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    body:has(.admin-sidebar) > .topbar + .grid,
    body:has(.admin-sidebar) > .topbar + .card,
    body:has(.admin-sidebar) > .topbar + form,
    body:has(.admin-sidebar) > .topbar ~ .grid,
    body:has(.admin-sidebar) > .topbar ~ .card {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    .admin-header {
        min-height: 56px !important;
        height: 56px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 8px 8px 60px !important;
        background: #10131a !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    .header-title h1 {
        font-size: 1rem !important;
        line-height: 1.1 !important;
    }

    .header-title p {
        display: none !important;
    }

    .header-actions,
    .user-menu {
        width: auto !important;
        flex: 0 0 auto !important;
        gap: 7px !important;
    }

    .user-info {
        max-width: 120px !important;
    }

    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
        font-size: .9rem !important;
    }

    .user-name {
        font-size: .78rem !important;
    }

    .user-role {
        font-size: .66rem !important;
    }

    .admin-content,
    .seller-content {
        padding: 9px 8px 16px !important;
    }

    body:has(.admin-sidebar) header:not(.admin-header):not(.header) {
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    body:has(.admin-sidebar) header:not(.admin-header):not(.header) h1,
    body:has(.admin-sidebar) .top h1,
    body:has(.admin-sidebar) .topbar h1 {
        font-size: 1rem !important;
        line-height: 1.12 !important;
        margin: 0 !important;
    }

    body:has(.admin-sidebar) header:not(.admin-header):not(.header) p,
    body:has(.admin-sidebar) .top p,
    body:has(.admin-sidebar) .topbar p {
        display: none !important;
    }

    .admin-content .stats-grid,
    .seller-content .grid,
    .stats-grid,
    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .content-grid,
    .grid,
    .layout,
    .two-col,
    .details-grid,
    .filters,
    .filtros-container,
    .formrow,
    .row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .admin-content .card,
    .admin-content .content-card,
    .admin-content .stat-card,
    .seller-content .card,
    .seller-content .stat-card,
    .quick-action-card,
    body:has(.admin-sidebar) > .container .card,
    body:has(.admin-sidebar) > .wrap .card,
    body:has(.admin-sidebar) > .grid .card,
    body:has(.admin-sidebar) > .card {
        padding: 10px !important;
        border-radius: 9px !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body:has(.admin-sidebar) img,
    body:has(.admin-sidebar) video,
    body:has(.admin-sidebar) canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    .stat-icon,
    .icon {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 8px !important;
        font-size: .95rem !important;
    }

    .stat-number,
    .num,
    .stat-card .value {
        font-size: 1rem !important;
        line-height: 1.1 !important;
    }

    .stat-label,
    .muted,
    .stat-card .label {
        font-size: .7rem !important;
        line-height: 1.15 !important;
    }

    .card-header,
    .section-title,
    .topbar,
    .top {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .card-header h3,
    .section-title h2,
    .action h3 {
        font-size: .96rem !important;
    }

    .btn,
    .action-btn,
    .iconbtn,
    button[type="submit"],
    input[type="submit"] {
        min-height: 36px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        font-size: .82rem !important;
        line-height: 1.1 !important;
        box-shadow: none !important;
    }

    input,
    select,
    textarea {
        min-height: 38px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }

    textarea {
        min-height: 82px !important;
    }
}

/* Auth pages: remove heavy look and reduce vertical space. */
@media (max-width: 768px) {
    body:has(.auth-container),
    body:has(#loginForm),
    body:has(#registerForm) {
        display: block !important;
        padding: 58px 10px 18px !important;
        min-height: 100dvh !important;
        background: #0d0f14 !important;
    }

    body:has(.auth-container)::before,
    body:has(.auth-container)::after,
    body:has(#loginForm)::before,
    body:has(#loginForm)::after,
    body:has(#registerForm)::before,
    body:has(#registerForm)::after {
        display: none !important;
    }

    .floating-home {
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
    }

    .home-btn {
        min-height: 36px !important;
        padding: 8px 10px !important;
        border-radius: 9px !important;
        font-size: .78rem !important;
        background: #1b202a !important;
        box-shadow: none !important;
    }

    .auth-container,
    body:has(#registerForm) .auth-container,
    .card {
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        padding: 16px 14px !important;
        border-radius: 12px !important;
        background: #151922 !important;
        box-shadow: none !important;
    }

    .auth-logo {
        margin-bottom: 8px !important;
    }

    .auth-logo .logo-img {
        width: min(108px, 44vw) !important;
    }

    .auth-container h2,
    .logo h1 {
        font-size: 1.25rem !important;
        line-height: 1.12 !important;
        margin-bottom: 6px !important;
    }

    .auth-subtitle,
    .logo p {
        margin-bottom: 12px !important;
        font-size: .78rem !important;
        line-height: 1.25 !important;
    }

    .form-group,
    .input-group {
        margin-bottom: 10px !important;
    }

    .form-group label,
    .input-group label,
    label {
        margin-bottom: 5px !important;
        font-size: .78rem !important;
    }

    .auth-btn,
    .btn,
    button[type="submit"],
    input[type="submit"] {
        min-height: 40px !important;
        padding: 9px 12px !important;
        border-radius: 9px !important;
        font-size: .86rem !important;
    }

    .progress-indicator,
    .password-requirements,
    .whatsapp-info,
    .terms-group {
        margin-bottom: 10px !important;
        padding: 10px !important;
        border-radius: 9px !important;
    }
}

/* Final mobile consolidation: keep every page on one predictable, touch-first system. */
@media (max-width: 768px) {
    :root {
        --m-bg: #0d0f14;
        --m-surface: #151922;
        --m-surface-2: #1b202a;
        --m-border: rgba(255,255,255,.10);
        --m-muted: #9aa3b2;
        --m-text: #f7f8fb;
        --m-accent: #ffac12;
        --m-cyan: #12aaff;
        --m-radius: 12px;
        --m-header: 60px;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: var(--m-bg) !important;
    }

    body {
        min-width: 0 !important;
        color: var(--m-text) !important;
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100% !important;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    td,
    th,
    a,
    span,
    label,
    button {
        overflow-wrap: anywhere !important;
        letter-spacing: 0 !important;
    }

    .header,
    body > .header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2400 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: var(--m-header) !important;
        height: var(--m-header) !important;
        max-height: var(--m-header) !important;
        gap: 10px !important;
        padding: 6px 64px 6px 12px !important;
        overflow: visible !important;
        background: #10131a !important;
        border-bottom: 1px solid rgba(255,172,18,.20) !important;
        box-shadow: 0 5px 18px rgba(0,0,0,.30) !important;
    }

    .header .logo,
    .header .brand,
    body > .header .logo,
    body > .header .brand {
        display: flex !important;
        width: auto !important;
        max-width: calc(100vw - 90px) !important;
        height: 48px !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .header .logo-img,
    .header .brand img,
    body > .header .logo-img,
    body > .header .brand img {
        display: block !important;
        width: auto !important;
        max-width: min(188px, calc(100vw - 96px)) !important;
        height: 48px !important;
        object-fit: contain !important;
        transform: none !important;
    }

    .mobile-nav-toggle,
    body > .header .mobile-nav-toggle {
        position: fixed !important;
        top: calc(7px + env(safe-area-inset-top, 0px)) !important;
        right: 10px !important;
        bottom: auto !important;
        z-index: 2700 !important;
        display: inline-flex !important;
        min-width: 46px !important;
        width: 46px !important;
        min-height: 46px !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255,177,31,.42) !important;
        border-radius: 12px !important;
        background: var(--m-accent) !important;
        color: #111 !important;
        box-shadow: 0 8px 20px rgba(0,0,0,.35) !important;
    }

    .mobile-nav-toggle span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
    }

    .mobile-nav-toggle i {
        font-size: 1.1rem !important;
    }

    .header .nav-container,
    body > .header .nav-container {
        position: fixed !important;
        top: calc(var(--m-header) + 8px + env(safe-area-inset-top, 0px)) !important;
        left: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        z-index: 2600 !important;
        display: block !important;
        width: auto !important;
        max-height: calc(100dvh - var(--m-header) - 22px - env(safe-area-inset-top, 0px)) !important;
        padding: 12px !important;
        border: 1px solid var(--m-border) !important;
        border-radius: 14px !important;
        background: #121722 !important;
        box-shadow: 0 18px 52px rgba(0,0,0,.55) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-8px) !important;
        transition: opacity .16s ease, transform .16s ease !important;
    }

    .header.mobile-menu-open .nav-container,
    body > .header.mobile-menu-open .nav-container {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .header .nav,
    body > .header .nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .header .search-bar,
    body > .header .search-bar {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    .header .nav a,
    .header .user-name-nav,
    .header .user-saldo-nav {
        min-width: 0 !important;
        min-height: 44px !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 9px 8px !important;
        border: 1px solid var(--m-border) !important;
        border-radius: 10px !important;
        background: var(--m-surface-2) !important;
        color: var(--m-text) !important;
        font-size: .88rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .header .btn-registro,
    .header .nav a[href*="login"],
    .header .nav a[href*="logout"],
    .header .nav a[href*="dashboard"] {
        grid-column: 1 / -1 !important;
    }

    .mobile-nav-backdrop {
        z-index: 2500 !important;
        background: rgba(0,0,0,.58) !important;
    }

    .container,
    .wrap,
    .main-content,
    .page-container,
    .productos,
    main.productos,
    .recarga-section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .container:has(.sidebar) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-top: 12px !important;
        padding-top: 0 !important;
    }

    .sidebar {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        padding: 12px !important;
        border-radius: var(--m-radius) !important;
        background: var(--m-surface) !important;
        overflow: hidden !important;
    }

    .sidebar h3 {
        margin-bottom: 10px !important;
        font-size: .95rem !important;
    }

    .sidebar ul {
        display: flex !important;
        gap: 8px !important;
        margin: 0 -12px !important;
        padding: 0 12px 2px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        list-style: none !important;
    }

    .sidebar ul li,
    .sidebar .cat {
        min-width: max-content !important;
        margin: 0 !important;
        padding: 9px 12px !important;
        border-radius: 999px !important;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-border) !important;
        font-size: .84rem !important;
        white-space: nowrap !important;
    }

    .grid-productos {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .producto-card {
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-width: 0 !important;
        padding: 12px !important;
        border-radius: var(--m-radius) !important;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-border) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .producto-card .thumb,
    .producto-card > .thumb {
        grid-row: span 5 !important;
        width: 96px !important;
        height: 96px !important;
        min-height: 96px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        background-color: #0d1017 !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    .producto-card h3 {
        min-height: 0 !important;
        margin: 0 !important;
        font-size: .98rem !important;
        line-height: 1.2 !important;
    }

    .producto-card p {
        display: -webkit-box !important;
        min-height: 0 !important;
        margin: 0 !important;
        color: #b9c0cc !important;
        font-size: .82rem !important;
        line-height: 1.28 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .seller-name {
        margin: 0 !important;
        font-size: .76rem !important;
        line-height: 1.15 !important;
    }

    .producto-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .precio {
        font-size: 1.16rem !important;
        line-height: 1 !important;
    }

    .producto-card button,
    .btn,
    .btn-primary,
    .btn-recargar,
    .hero-btn,
    button[type="submit"],
    input[type="submit"] {
        min-height: 44px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        font-size: .9rem !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    .categoria-header,
    .section-header,
    .top,
    .topbar,
    .toolbar,
    .metaRow,
    .card-header,
    .section-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .categoria-titulo,
    h1 {
        font-size: 1.22rem !important;
        line-height: 1.15 !important;
    }

    .hero {
        min-height: auto !important;
        height: auto !important;
        padding: 38px 14px 30px !important;
        margin-bottom: 18px !important;
    }

    .hero h1 {
        font-size: 1.9rem !important;
        line-height: 1.08 !important;
    }

    .hero p {
        font-size: .95rem !important;
        line-height: 1.35 !important;
    }

    .user-dashboard,
    .profile-grid,
    .stats-grid,
    .quick-actions,
    .content-grid,
    .grid,
    .layout,
    .two-col,
    .details-grid,
    .filters,
    .filtros-container,
    .formrow,
    .row,
    .cart-layout,
    .checkout-layout,
    .metodos-grid,
    .monto-options {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .stats-grid,
    .quick-actions,
    .admin-content .stats-grid,
    .seller-content .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .welcome-card,
    .content-card,
    .profile-card,
    .stat-card,
    .cart-card,
    .checkout-card,
    .metodo-card,
    .card,
    .quick-action,
    .quick-action-card,
    .alert-card,
    .stat {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        border-radius: var(--m-radius) !important;
        background-color: var(--m-surface) !important;
        box-shadow: none !important;
    }

    .welcome-card,
    .saldo-info,
    .stat-card,
    .quick-action-card,
    .alert-card > div {
        align-items: stretch !important;
        text-align: left !important;
    }

    .stat-card,
    .stat {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .stat-icon,
    .icon,
    .quick-action-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        margin: 0 !important;
        border-radius: 9px !important;
        font-size: 1rem !important;
    }

    .stat-content h3,
    .stat-number,
    .num,
    .stat-card .value,
    .saldo-amount,
    .summary-total {
        font-size: 1.16rem !important;
        line-height: 1.12 !important;
    }

    .stat-content p,
    .stat-label,
    .muted,
    .mini {
        font-size: .76rem !important;
        line-height: 1.25 !important;
    }

    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }

    textarea {
        min-height: 100px !important;
    }

    .form-group,
    .input-group {
        min-width: 0 !important;
    }

    .table-wrap,
    .admin-table-wrap,
    .table-responsive,
    .card-body,
    .content-card,
    .profile-card,
    .card {
        max-width: 100% !important;
    }

    .has-mobile-table,
    .table-wrap:has(table),
    .admin-table-wrap:has(table),
    .table-responsive:has(table),
    .card-body:has(table),
    .content-card:has(table),
    .profile-card:has(table),
    .card:has(table) {
        overflow: visible !important;
    }

    table.mobile-card-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
    }

    table.mobile-card-table thead {
        display: none !important;
    }

    table.mobile-card-table tbody,
    table.mobile-card-table tr,
    table.mobile-card-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    table.mobile-card-table tr {
        padding: 12px !important;
        border: 1px solid var(--m-border) !important;
        border-radius: var(--m-radius) !important;
        background: var(--m-surface) !important;
    }

    table.mobile-card-table td {
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.07) !important;
        text-align: left !important;
        white-space: normal !important;
    }

    table.mobile-card-table td:last-child {
        border-bottom: 0 !important;
    }

    table.mobile-card-table td::before {
        content: attr(data-label);
        display: block !important;
        margin-bottom: 4px !important;
        color: var(--m-muted) !important;
        font-size: .7rem !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    table.mobile-card-table td[data-label=""]::before {
        display: none !important;
    }

    .actions,
    .action-buttons,
    .actions-row,
    .review-actions,
    .rowBtns,
    .pager {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        justify-content: stretch !important;
    }

    .actions .btn,
    .action-buttons .btn,
    .actions-row .btn,
    .review-actions .btn,
    .rowBtns .btn,
    .pager .btn,
    .iconbtn,
    .action-btn {
        width: 100% !important;
        min-height: 40px !important;
    }

    .admin-header,
    .seller-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2200 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 56px !important;
        height: 56px !important;
        padding: 8px 8px 8px 60px !important;
        background: #10131a !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    .admin-main,
    .seller-main {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .admin-content,
    .seller-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 8px 18px !important;
    }

    .header-title {
        min-width: 0 !important;
    }

    .header-title h1 {
        font-size: 1rem !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .header-title p,
    .admin-header .search-bar,
    .seller-header .search-bar {
        display: none !important;
    }

    .user-menu {
        gap: 7px !important;
    }

    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
        font-size: .9rem !important;
    }

    .user-info {
        max-width: 112px !important;
    }

    .user-name,
    .user-role {
        font-size: .72rem !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .sidebar-toggle {
        position: fixed !important;
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        left: 10px !important;
        z-index: 3400 !important;
        display: flex !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px solid rgba(255,177,31,.38) !important;
        border-radius: 10px !important;
        background: var(--m-accent) !important;
        color: #111 !important;
        box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
    }

    .admin-sidebar {
        z-index: 3300 !important;
        width: min(286px, calc(100vw - 44px)) !important;
        max-width: calc(100vw - 44px) !important;
        padding: 12px 0 !important;
        border-radius: 0 14px 14px 0 !important;
        background: #10131a !important;
        box-shadow: 12px 0 30px rgba(0,0,0,.48) !important;
        transform: translateX(-105%) !important;
    }

    .admin-sidebar.active {
        transform: translateX(0) !important;
    }

    body.sidebar-open::after {
        content: '' !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 3200 !important;
        background: rgba(0,0,0,.58) !important;
    }

    .admin-sidebar-scroll,
    .admin-menu {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .admin-logo {
        margin-bottom: 8px !important;
        padding: 0 12px !important;
    }

    .admin-logo .logo {
        font-size: 1rem !important;
        line-height: 1.1 !important;
    }

    .admin-logo .subtitle,
    .menu-section h3 {
        font-size: .66rem !important;
    }

    .menu-section {
        margin-bottom: 8px !important;
        padding: 0 8px !important;
    }

    .menu-item {
        min-height: 40px !important;
        gap: 8px !important;
        margin-bottom: 5px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }

    .menu-item i {
        flex: 0 0 18px !important;
        width: 18px !important;
        font-size: .95rem !important;
    }

    .menu-item span:not(.menu-badge) {
        font-size: .8rem !important;
        line-height: 1.12 !important;
        white-space: normal !important;
    }

    .menu-badge {
        min-width: 18px !important;
        padding: 2px 6px !important;
        font-size: .62rem !important;
    }

    .cart-modal,
    .modal,
    .modal-content,
    [role="dialog"] {
        max-width: calc(100vw - 20px) !important;
    }

    [style*="position: fixed"][style*="inset: 0"] {
        padding: 12px !important;
    }
}

@media (max-width: 430px) {
    .stats-grid,
    .quick-actions,
    .admin-content .stats-grid,
    .seller-content .grid {
        grid-template-columns: 1fr !important;
    }

    .producto-card {
        grid-template-columns: 84px minmax(0, 1fr) !important;
    }

    .producto-card .thumb,
    .producto-card > .thumb {
        width: 84px !important;
        height: 84px !important;
        min-height: 84px !important;
    }

    .header .nav,
    body > .header .nav {
        grid-template-columns: 1fr !important;
    }
}

/* Home only: show navigation first, then compact into hamburger while scrolling down. */
@media (max-width: 768px) {
    body.home-scroll-nav:not(.mobile-nav-compact) {
        padding-top: 0 !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header {
        position: sticky !important;
        top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        gap: 8px !important;
        padding: 8px 10px 10px !important;
        overflow: visible !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .logo {
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        justify-content: center !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .logo-img {
        height: 46px !important;
        max-width: 172px !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .mobile-nav-toggle {
        display: none !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav-container {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-height: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 7px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .search-bar {
        order: 20 !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 40px !important;
    }

    body.home-scroll-nav > .header .nav a[href="index.php"] { order: 1 !important; }
    body.home-scroll-nav > .header .nav a[href="productos.php"] { order: 2 !important; }
    body.home-scroll-nav > .header .nav a[href="recargar.php"] { order: 3 !important; }
    body.home-scroll-nav > .header .nav a[href^="carrito.php"] { order: 4 !important; }
    body.home-scroll-nav > .header .user-name-nav { order: 5 !important; }
    body.home-scroll-nav > .header .user-saldo-nav { order: 6 !important; }
    body.home-scroll-nav > .header .nav a[href*="dashboard"] { order: 7 !important; }
    body.home-scroll-nav > .header .nav a[href*="login"] { order: 7 !important; }
    body.home-scroll-nav > .header .nav a[href*="logout"] { order: 8 !important; }
    body.home-scroll-nav > .header .nav .btn-registro { order: 8 !important; }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav a,
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .user-name-nav,
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .user-saldo-nav {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 40px !important;
        padding: 8px 8px !important;
        border-radius: 10px !important;
        font-size: .84rem !important;
        white-space: normal !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav a[href*="login"],
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav a[href*="logout"],
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav a[href*="dashboard"],
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav .btn-registro {
        grid-column: auto !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .mobile-nav-backdrop {
        display: none !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) .mobile-nav-backdrop {
        display: none !important;
    }
}

@media (max-width: 430px) {
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .search-bar {
        width: 100% !important;
    }
}

@media (max-width: 380px) {
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile UX final override: this block intentionally sits last. */
@media (max-width: 768px) {
    input,
    select,
    textarea,
    button {
        font-size: 16px !important;
    }

    input,
    select,
    textarea,
    button,
    .btn,
    .mobile-touch-ready,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
    }

    button,
    .btn,
    .mobile-touch-ready,
    input[type="submit"],
    input[type="button"] {
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.18 !important;
        touch-action: manipulation !important;
    }

    .mobile-actions-ready,
    .actions,
    .actions-row,
    .action-buttons,
    .review-actions,
    .pagination,
    .pager {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100% !important;
    }

    .mobile-actions-ready > *,
    .actions > *,
    .actions-row > *,
    .action-buttons > *,
    .review-actions > *,
    .pagination > *,
    .pager > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-inline-form-ready,
    .actions form,
    .mobile-actions-ready form {
        display: grid !important;
        width: 100% !important;
        margin: 0 !important;
        gap: 8px !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav a,
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .user-name-nav,
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .user-saldo-nav {
        min-height: 44px !important;
    }

    .container:has(.sidebar) .sidebar ul,
    .sidebar ul,
    .sidebar .category-list,
    .categorias-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .container:has(.sidebar) .sidebar ul li,
    .sidebar ul li,
    .sidebar .cat,
    .categorias-list .cat {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        white-space: normal !important;
    }

    body:has(.auth-container) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        align-items: start !important;
    }

    .auth-container {
        max-height: none !important;
        overflow: visible !important;
    }

    .admin-header,
    .seller-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 850 !important;
        min-height: 58px !important;
    }

    .admin-content,
    .seller-content {
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mobile-nav-backdrop,
    .mobile-nav-backdrop.mobile-touch-ready {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.mobile-menu-open .mobile-nav-backdrop,
    body.mobile-menu-open .mobile-nav-backdrop.mobile-touch-ready {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 430px) {
    .container:has(.sidebar) .sidebar ul,
    .sidebar ul,
    .sidebar .category-list,
    .categorias-list {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile UX phase 4: finish line polish for forms, actions and dense panels. */
@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    body {
        overscroll-behavior-y: contain !important;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px !important;
    }

    input,
    select,
    textarea {
        min-height: 44px !important;
        line-height: 1.25 !important;
    }

    textarea {
        min-height: 118px !important;
    }

    button,
    .btn,
    .mobile-touch-ready,
    a[role="button"],
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.18 !important;
        touch-action: manipulation !important;
    }

    .mobile-form-ready {
        max-width: 100% !important;
    }

    .mobile-form-ready > div[style*="display:flex"],
    .mobile-form-ready > div[style*="display: flex"],
    .mobile-form-ready > div[style*="display:grid"],
    .mobile-form-ready > div[style*="display: grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .mobile-inline-form-ready,
    .actions form,
    .mobile-actions-ready form {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 8px !important;
    }

    .mobile-actions-ready,
    .actions,
    .actions-row,
    .action-buttons,
    .review-actions,
    .pagination,
    .pager {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100% !important;
    }

    .mobile-actions-ready > *,
    .actions > *,
    .actions-row > *,
    .action-buttons > *,
    .review-actions > *,
    .pagination > *,
    .pager > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .pagination a,
    .pagination span,
    .pager a,
    .pager span {
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    .mobile-readable-ready,
    .alert,
    .msgBox,
    .whatsapp-info,
    .product-info,
    .password-requirements,
    .terms-group {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        line-height: 1.45 !important;
    }

    .auth-container {
        max-height: none !important;
        overflow: visible !important;
    }

    body:has(.auth-container) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        align-items: start !important;
    }

    body:has(.auth-container) .floating-home {
        position: fixed !important;
    }

    body:has(#registerForm) .auth-container,
    body:has(#loginForm) .auth-container {
        margin-top: 0 !important;
        margin-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .progress-indicator {
        gap: 8px !important;
    }

    .progress-step {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: .85rem !important;
    }

    .terms-checkbox,
    .remember-me {
        min-height: 44px !important;
        align-items: center !important;
    }

    .checkbox-custom {
        min-width: 24px !important;
        width: 24px !important;
        height: 24px !important;
    }

    .toggle-password,
    .password-toggle {
        top: auto !important;
        bottom: 4px !important;
        right: 6px !important;
        transform: none !important;
        z-index: 2 !important;
    }

    .char-count {
        top: auto !important;
        bottom: 14px !important;
        right: 54px !important;
        transform: none !important;
    }

    .admin-header,
    .seller-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 850 !important;
        min-height: 58px !important;
    }

    .admin-header .user-menu,
    .seller-header .user-menu {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .admin-header .user-info,
    .seller-header .user-info {
        min-width: 0 !important;
    }

    .admin-header .user-name,
    .seller-header .user-name,
    .admin-header .user-role,
    .seller-header .user-role {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .admin-content,
    .seller-content,
    .seller-page-wrap {
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .admin-content .card,
    .seller-content .card,
    .seller-page-wrap .card {
        max-width: 100% !important;
    }

    .admin-content .card h2,
    .seller-content .card h2,
    .section-title h2 {
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
    }

    .stat,
    .stock-item {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
    }

    .stat .num,
    .stock-item strong,
    .money {
        overflow-wrap: anywhere !important;
    }

    .hero-balance {
        text-align: left !important;
    }

    .hero-balance .money {
        font-size: clamp(1.45rem, 8vw, 2rem) !important;
        line-height: 1.05 !important;
    }

    .admin-sidebar .menu-item,
    .seller-sidebar .menu-item {
        min-height: 46px !important;
    }

    .admin-sidebar .menu-badge {
        min-width: 26px !important;
        min-height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    table.mobile-card-table td a,
    table.mobile-card-table td button,
    table.mobile-card-table td .btn {
        width: 100% !important;
    }

    .has-mobile-table {
        background: transparent !important;
    }
}

@media (max-width: 430px) {
    .auth-container {
        padding: 14px 12px !important;
    }

    .admin-content,
    .seller-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .stat,
    .stock-item {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }
}

/* Mobile UX phase 3: final tap-size and category ordering fixes. */
@media (max-width: 768px) {
    footer a,
    .footer a,
    .footer-links a,
    .legal-links a,
    .bottom-links a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 10px !important;
        line-height: 1.2 !important;
        touch-action: manipulation !important;
    }

    .footer-links,
    .legal-links,
    .bottom-links {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px 8px !important;
        justify-content: center !important;
    }

    .container:has(.sidebar) .sidebar ul,
    .sidebar ul,
    .sidebar .category-list,
    .categorias-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .container:has(.sidebar) .sidebar ul li,
    .sidebar ul li,
    .sidebar .cat,
    .categorias-list .cat {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        text-align: center !important;
        white-space: normal !important;
    }
}

@media (max-width: 380px) {
    .container:has(.sidebar) .sidebar ul,
    .sidebar ul,
    .sidebar .category-list,
    .categorias-list {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile UX phase 2: internal account, support, admin and seller flows. */
@media (max-width: 768px) {
    .user-dashboard {
        gap: 12px !important;
        padding-bottom: 18px !important;
    }

    .user-dashboard > h1,
    .admin-content h1,
    .seller-content h1,
    .header-title h1 {
        font-size: clamp(1.35rem, 7vw, 1.85rem) !important;
        line-height: 1.08 !important;
        margin-bottom: 6px !important;
    }

    .user-dashboard > p,
    .admin-content > p,
    .seller-content > p,
    .header-title p,
    .welcome-card p,
    .content-card p,
    .profile-card p {
        max-width: 100% !important;
        line-height: 1.45 !important;
    }

    .welcome-card,
    .profile-card,
    .content-card,
    .stat-card,
    .card,
    .empty-state,
    .whatsapp-info,
    .cred-box {
        overflow: hidden !important;
    }

    .welcome-card,
    .profile-card,
    .content-card,
    .stat-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .stat-card {
        min-height: 112px !important;
        align-content: start !important;
    }

    .stat-card h3,
    .stat-card .stat-value,
    .stat-card .number,
    .metric-value {
        font-size: clamp(1.2rem, 6vw, 1.65rem) !important;
        line-height: 1.1 !important;
    }

    .quick-actions {
        gap: 10px !important;
    }

    .quick-action-card,
    .action,
    .card-link {
        min-height: 58px !important;
        display: grid !important;
        align-content: center !important;
        gap: 5px !important;
        border-radius: 12px !important;
    }

    .profile-info-row,
    .info-row,
    .detail-row,
    .summary-row,
    .kv-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding: 11px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    .profile-info-row:last-child,
    .info-row:last-child,
    .detail-row:last-child,
    .summary-row:last-child,
    .kv-row:last-child {
        border-bottom: 0 !important;
    }

    .profile-info-row label,
    .info-row label,
    .detail-row label,
    .summary-row label,
    .kv-row label,
    .label {
        color: #98a3b3 !important;
        font-size: .78rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .profile-info-row span,
    .info-row span,
    .detail-row span,
    .summary-row span,
    .kv-row span,
    .value {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    details.cred-box {
        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 12px !important;
        background: #121722 !important;
    }

    details.cred-box > summary {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }

    details.cred-box > *:not(summary) {
        margin: 0 12px 12px !important;
        overflow-wrap: anywhere !important;
    }

    .empty-state {
        display: grid !important;
        place-items: center !important;
        gap: 8px !important;
        min-height: 132px !important;
        padding: 18px 14px !important;
        text-align: center !important;
        border: 1px dashed rgba(255,255,255,.14) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.035) !important;
    }

    .empty-state i {
        font-size: 1.8rem !important;
        opacity: .85 !important;
    }

    .header-buttons,
    .header-actions,
    .card-actions,
    .form-actions,
    .ticket-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        width: 100% !important;
    }

    .header-buttons a,
    .header-actions a,
    .header-actions button,
    .card-actions a,
    .card-actions button,
    .form-actions a,
    .form-actions button,
    .ticket-actions a,
    .ticket-actions button {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
    }

    .whatsapp-info {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .whatsapp-info i,
    .whatsapp-info .icon {
        margin-top: 2px !important;
    }

    .grid > .left,
    .grid > .right,
    .card.left,
    .card.right,
    .ticket-list,
    .ticket-detail {
        min-width: 0 !important;
        width: 100% !important;
    }

    .new-ticket-form,
    .ticket-form,
    .reply-form {
        display: grid !important;
        gap: 10px !important;
    }

    .new-ticket-form textarea,
    .ticket-form textarea,
    .reply-form textarea,
    textarea[name="mensaje"],
    textarea[name="respuesta"],
    textarea[name="reply"] {
        min-height: 124px !important;
        resize: vertical !important;
    }

    .list,
    .ticket-list,
    .chat-container {
        max-height: none !important;
        overflow: visible !important;
    }

    .item,
    .ticket-item {
        display: grid !important;
        gap: 7px !important;
        padding: 12px !important;
        border-radius: 12px !important;
        min-height: 58px !important;
    }

    .item *,
    .ticket-item *,
    .chat-message *,
    .msg *,
    .msgBox,
    .message-content {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .chat-container {
        display: grid !important;
        gap: 10px !important;
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .chat-message,
    .msg {
        width: min(92%, 100%) !important;
        max-width: 92% !important;
        padding: 11px 12px !important;
        border-radius: 13px !important;
        line-height: 1.45 !important;
    }

    .chat-message.admin,
    .msg.admin,
    .msg.me {
        justify-self: end !important;
    }

    .chat-message.user,
    .chat-message.system,
    .msg.user,
    .msg.system {
        justify-self: start !important;
    }

    .msgBox {
        max-width: 100% !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .admin-content .filtros-container,
    .admin-content .filters,
    .admin-content .toolbar,
    .seller-content .toolbar,
    .seller-content .filters,
    .seller-page-wrap .toolbar,
    .seller-page-wrap .filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    .admin-content .filtros-container > *,
    .admin-content .filters > *,
    .admin-content .toolbar > *,
    .seller-content .toolbar > *,
    .seller-content .filters > *,
    .seller-page-wrap .toolbar > *,
    .seller-page-wrap .filters > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .admin-content form[style*="grid"],
    .seller-content form[style*="grid"],
    .card form[style*="grid"] {
        grid-template-columns: 1fr !important;
    }

    .admin-content .pill,
    .seller-content .pill,
    .pill {
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .proof-img,
    .comprobante-img,
    .admin-content img[src*="uploads"],
    .seller-content img[src*="uploads"] {
        width: 100% !important;
        max-height: 260px !important;
        object-fit: contain !important;
        border-radius: 12px !important;
    }

    .seller-page-wrap {
        display: grid !important;
        gap: 12px !important;
    }

    .seller-page-wrap .hero,
    .seller-page-wrap .hero-card,
    .seller-page-wrap .balance-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .seller-page-wrap .hero,
    .seller-page-wrap .hero-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .seller-page-wrap .hero-actions,
    .seller-page-wrap .balance-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }
}

@media (max-width: 768px) {
    body.home-scroll-nav.mobile-menu-open > .header {
        z-index: 3100 !important;
    }

    body.home-scroll-nav.mobile-menu-open .mobile-nav-backdrop {
        z-index: 2800 !important;
        pointer-events: auto !important;
    }

    body.home-scroll-nav.mobile-nav-compact > .header.mobile-menu-open .nav-container {
        top: calc(60px + 8px + env(safe-area-inset-top, 0px)) !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        z-index: 3200 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 82px - env(safe-area-inset-top, 0px)) !important;
        padding: 10px !important;
        border-radius: 14px !important;
        background: #121722 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        filter: none !important;
    }

    body.home-scroll-nav.mobile-nav-compact > .header.mobile-menu-open .mobile-nav-toggle {
        z-index: 3300 !important;
    }

    body.home-scroll-nav.mobile-nav-compact > .header:not(.mobile-menu-open) .nav-container {
        max-height: 0 !important;
        overflow: hidden !important;
    }

    body.home-scroll-nav.mobile-nav-compact > .header .nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        align-items: stretch !important;
        gap: 8px !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    body.home-scroll-nav.mobile-nav-compact > .header .search-bar {
        order: 20 !important;
        grid-column: 1 / -1 !important;
        min-height: 42px !important;
    }

    body.home-scroll-nav.mobile-nav-compact > .header .nav a,
    body.home-scroll-nav.mobile-nav-compact > .header .user-name-nav,
    body.home-scroll-nav.mobile-nav-compact > .header .user-saldo-nav {
        min-height: 44px !important;
        height: 44px !important;
        width: 100% !important;
        padding: 8px 10px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: #1b202a !important;
        font-size: .9rem !important;
        line-height: 1.1 !important;
        filter: none !important;
        opacity: 1 !important;
    }
}

@media (max-width: 768px) {
    body.home-scroll-nav.mobile-nav-compact.mobile-menu-open > header.header.mobile-menu-open .nav-container#mobileNavPanel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 3200 !important;
        background-color: #121722 !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.home-scroll-nav.mobile-nav-compact.mobile-menu-open > header.header.mobile-menu-open .nav-container#mobileNavPanel .nav,
    body.home-scroll-nav.mobile-nav-compact.mobile-menu-open > header.header.mobile-menu-open .nav-container#mobileNavPanel .nav > * {
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        pointer-events: auto !important;
    }
}

/* Public pages: keep the opened hamburger panel above the dark overlay and fully clickable. */
@media (max-width: 768px) {
    body.mobile-menu-open > header.header {
        z-index: 3100 !important;
    }

    body.mobile-menu-open .mobile-nav-backdrop {
        z-index: 2800 !important;
        pointer-events: auto !important;
    }

    body.mobile-menu-open > header.header .mobile-nav-toggle {
        z-index: 3300 !important;
    }

    body.mobile-menu-open > header.header.mobile-menu-open .nav-container,
    body.mobile-menu-open > header.header.mobile-menu-open .nav-container#mobileNavPanel {
        z-index: 3200 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: #121722 !important;
        background-color: #121722 !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.mobile-menu-open > header.header.mobile-menu-open .nav-container .nav,
    body.mobile-menu-open > header.header.mobile-menu-open .nav-container .nav > * {
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        pointer-events: auto !important;
    }

    body.mobile-menu-open > header.header.mobile-menu-open .nav-container .nav a,
    body.mobile-menu-open > header.header.mobile-menu-open .nav-container .user-name-nav,
    body.mobile-menu-open > header.header.mobile-menu-open .nav-container .user-saldo-nav {
        background-color: #1b202a !important;
    }
}

/* Mobile UX phase 1: larger touch targets, clearer hierarchy, calmer workflows. */
@media (max-width: 768px) {
    .footer a,
    .footer-links a,
    .card-link,
    .section-header a,
    .categoria-header a,
    .category-card a,
    .categoria-card a,
    .cat-card a,
    .quick-action a,
    .quick-action-card a,
    .producto-card a,
    .profile-card a,
    .content-card a:not(.menu-item),
    .auth-links a,
    .links a {
        display: inline-flex !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 9px 12px !important;
        border-radius: 10px !important;
        line-height: 1.15 !important;
        text-decoration: none !important;
    }

    .footer,
    footer {
        margin-top: 28px !important;
        padding: 18px 12px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .footer-content,
    .footer-links {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        text-align: center !important;
    }

    .footer-links a {
        width: 100% !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        background: rgba(255,255,255,.045) !important;
        color: #d7dce5 !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header {
        gap: 7px !important;
        padding-bottom: 8px !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav a,
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .user-name-nav,
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .user-saldo-nav {
        min-height: 44px !important;
        padding: 8px 6px !important;
        font-size: .78rem !important;
        border-radius: 9px !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .search-bar {
        min-height: 38px !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .logo {
        height: 40px !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .logo-img {
        height: 40px !important;
    }

    .section-header,
    .categoria-header,
    .card-header,
    .toolbar,
    .metaRow {
        min-width: 0 !important;
    }

    .section-header h2,
    .categoria-titulo,
    .card-header h3,
    .content-card h3,
    .profile-card h3 {
        overflow-wrap: anywhere !important;
    }

    .category-card,
    .categoria-card,
    .cat-card,
    .metodo-card,
    .cart-card,
    .checkout-card,
    .content-card,
    .profile-card,
    .welcome-card,
    .auth-container {
        border: 1px solid rgba(255,255,255,.10) !important;
    }

    .category-card,
    .categoria-card,
    .cat-card {
        display: grid !important;
        gap: 8px !important;
        padding: 14px !important;
        border-radius: 12px !important;
        background: #151922 !important;
    }

    .category-card p,
    .categoria-card p,
    .cat-card p,
    .action p,
    .quick-action-card p {
        margin: 0 !important;
        color: #b8c0cc !important;
        font-size: .86rem !important;
        line-height: 1.35 !important;
    }

    .producto-card {
        align-items: start !important;
    }

    .producto-card .btn-buy,
    .producto-card button {
        margin-top: 2px !important;
    }

    .producto-card button[disabled],
    button:disabled,
    .btn.disabled {
        opacity: .52 !important;
        cursor: not-allowed !important;
    }

    .cart-layout,
    .checkout-layout,
    .recarga-section,
    .recarga-container,
    .payment-section,
    .upload-area,
    .metodo-card,
    .monto-options {
        max-width: 100% !important;
    }

    .summary-card,
    .cart-summary,
    .checkout-summary,
    .resumen-card {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 900 !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        border-radius: 14px 14px 0 0 !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        background: #111722 !important;
        box-shadow: 0 -12px 30px rgba(0,0,0,.35) !important;
    }

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

    .monto-option,
    .method-option,
    .metodo-card,
    .upload-area {
        min-height: 48px !important;
        touch-action: manipulation !important;
    }

    .upload-area {
        display: grid !important;
        gap: 8px !important;
        place-items: center !important;
        border-style: dashed !important;
    }

    .filters,
    .filtros-container,
    .toolbar form,
    form.filters,
    .search-filter,
    .roleform {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        width: 100% !important;
    }

    .roleform,
    .toolbar {
        align-items: stretch !important;
    }

    .roleform select,
    .roleform button,
    .toolbar input,
    .toolbar select,
    .toolbar button {
        width: 100% !important;
    }

    table.mobile-card-table tr {
        box-shadow: none !important;
    }

    table.mobile-card-table td {
        display: grid !important;
        grid-template-columns: minmax(96px, .38fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    table.mobile-card-table td::before {
        margin: 0 !important;
    }

    table.mobile-card-table td > * {
        min-width: 0 !important;
    }

    .badge,
    .status-badge,
    .menu-badge,
    .producto-badge,
    .badge-categoria {
        white-space: normal !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }

    .pager {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .pager a,
    .pager button,
    .pager span {
        min-height: 40px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .floating-home,
    .home-btn,
    .toggle-password,
    .password-toggle,
    .char-count {
        touch-action: manipulation !important;
    }

    .home-btn,
    a.home-btn,
    .floating-home a {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 12px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .toggle-password,
    .password-toggle {
        display: inline-flex !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    .char-count {
        min-height: 24px !important;
        min-width: 34px !important;
    }
}

@media (max-width: 430px) {
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    table.mobile-card-table td {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
}

@media (max-width: 380px) {
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile UX last-pass override. */
@media (max-width: 768px) {
    input,
    select,
    textarea,
    button {
        font-size: 16px !important;
    }

    input,
    select,
    textarea,
    button,
    .btn,
    .mobile-touch-ready,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
    }

    button,
    .btn,
    .mobile-touch-ready,
    input[type="submit"],
    input[type="button"] {
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.18 !important;
        touch-action: manipulation !important;
    }

    .mobile-actions-ready,
    .actions,
    .actions-row,
    .action-buttons,
    .review-actions,
    .pagination,
    .pager {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100% !important;
    }

    .mobile-actions-ready > *,
    .actions > *,
    .actions-row > *,
    .action-buttons > *,
    .review-actions > *,
    .pagination > *,
    .pager > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-inline-form-ready,
    .actions form,
    .mobile-actions-ready form {
        display: grid !important;
        width: 100% !important;
        margin: 0 !important;
        gap: 8px !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header .nav a,
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .user-name-nav,
    body.home-scroll-nav:not(.mobile-nav-compact) > .header .user-saldo-nav {
        min-height: 44px !important;
    }

    body:has(.auth-container) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        align-items: start !important;
    }

    .auth-container {
        max-height: none !important;
        overflow: visible !important;
    }

    .admin-header,
    .seller-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 850 !important;
        min-height: 58px !important;
    }

    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-menu-open {
        position: static !important;
        width: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        touch-action: auto !important;
    }

    body.mobile-menu-open .mobile-nav-backdrop,
    body.mobile-menu-open .mobile-nav-backdrop.mobile-touch-ready {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.mobile-menu-open:has(header.header.mobile-menu-open) .mobile-nav-backdrop,
    body.mobile-menu-open:has(header.header.mobile-menu-open) .mobile-nav-backdrop.mobile-touch-ready {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Public mobile catalog stability pass: restore page scroll and keep products compact. */
@media (max-width: 768px) {
    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body:not(.sidebar-open) {
        position: static !important;
    }

    body:not(.sidebar-open):not(.modal-open) {
        overflow-y: auto !important;
    }

    body > .header {
        position: sticky !important;
        top: 0 !important;
    }

    body > .header:not(.mobile-menu-open) .nav-container,
    body.home-scroll-nav.mobile-nav-compact > .header:not(.mobile-menu-open) .nav-container {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header:not(.mobile-menu-open) .nav-container {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header:not(.mobile-menu-open) .nav {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
    }

    body.home-scroll-nav:not(.mobile-nav-compact) > .header:not(.mobile-menu-open) .search-bar {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 38px !important;
    }

    body:not(.mobile-menu-open) .mobile-nav-backdrop {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .productos,
    main.productos {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 10px !important;
        overflow: visible !important;
    }

    .productos .section-header,
    .productos .categoria-header,
    .productos .top {
        margin: 4px 0 10px !important;
        gap: 7px !important;
    }

    .grid-productos,
    .productos .grid-productos,
    main.productos .grid-productos {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        gap: 10px !important;
        align-items: stretch !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .grid-productos > .producto-card,
    .productos .producto-card,
    main.productos .producto-card {
        display: flex !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        background: #151922 !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .18) !important;
        overflow: hidden !important;
        transform: none !important;
    }

    .grid-productos > .producto-card:hover,
    .productos .producto-card:hover,
    main.productos .producto-card:hover {
        transform: none !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .18) !important;
    }

    .producto-card .thumb,
    .producto-card > .thumb {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1.45 / 1 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background-size: contain !important;
        background-position: center !important;
        background-color: #0d1017 !important;
    }

    .producto-card h3,
    .producto-card p,
    .producto-card .seller-name,
    .producto-card .producto-footer {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    .producto-card h3 {
        display: -webkit-box !important;
        min-height: 2.25em !important;
        margin-top: 8px !important;
        margin-bottom: 4px !important;
        color: #fff !important;
        font-size: .78rem !important;
        line-height: 1.14 !important;
        font-weight: 900 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .producto-card p {
        display: -webkit-box !important;
        min-height: 2.25em !important;
        margin-top: 0 !important;
        margin-bottom: 7px !important;
        color: #b8c0cc !important;
        font-size: .67rem !important;
        line-height: 1.16 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .producto-card .seller-name {
        display: -webkit-box !important;
        margin-top: 5px !important;
        margin-bottom: 0 !important;
        color: #c7ced9 !important;
        font-size: .64rem !important;
        line-height: 1.12 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
    }

    .producto-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        margin-top: auto !important;
        margin-bottom: 8px !important;
        align-items: stretch !important;
    }

    .precio {
        font-size: .98rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        color: #fff !important;
        text-shadow: none !important;
    }

    .producto-card button,
    .producto-card .btn,
    .producto-card .btn-buy {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 7px 8px !important;
        border-radius: 8px !important;
        font-size: .74rem !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;
        white-space: normal !important;
        box-shadow: none !important;
    }

    .producto-badge,
    .badge-categoria {
        top: 6px !important;
        right: 6px !important;
        max-width: calc(100% - 12px) !important;
        padding: 4px 6px !important;
        font-size: .58rem !important;
        line-height: 1.05 !important;
    }
}

@media (max-width: 360px) {
    .grid-productos,
    .productos .grid-productos,
    main.productos .grid-productos {
        gap: 8px !important;
    }

    .producto-card h3,
    .producto-card p,
    .producto-card .seller-name,
    .producto-card .producto-footer {
        margin-left: 7px !important;
        margin-right: 7px !important;
    }

    .producto-card h3 {
        font-size: .72rem !important;
    }

    .producto-card p,
    .producto-card .seller-name {
        font-size: .62rem !important;
    }

    .producto-card button,
    .producto-card .btn,
    .producto-card .btn-buy {
        min-height: 32px !important;
        padding: 6px !important;
        font-size: .68rem !important;
    }
}

/* Product categories: compact hamburger panel on mobile. */
@media (max-width: 768px) {
    .container:has(> .sidebar) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .container > .sidebar {
        position: sticky !important;
        top: calc(var(--mobile-header-h, 62px) + 8px) !important;
        z-index: 920 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        border-radius: 12px !important;
        background: #121722 !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .28) !important;
        overflow: visible !important;
    }

    .container > .sidebar .category-menu-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .container > .sidebar .category-menu-head h3,
    .container > .sidebar h3 {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: .95rem !important;
        line-height: 1.1 !important;
    }

    .category-menu-toggle {
        display: inline-flex !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 172, 18, .42) !important;
        border-radius: 11px !important;
        background: #ffac12 !important;
        color: #111 !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    .category-menu-toggle span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    .category-menu-toggle i {
        font-size: 1.05rem !important;
        line-height: 1 !important;
    }

    .container > .sidebar > ul,
    .container:has(.sidebar) .sidebar > ul,
    .container > .sidebar .category-list,
    .container > .sidebar .categorias-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: max-height .18s ease, opacity .18s ease, padding .18s ease !important;
    }

    .container > .sidebar.categories-open > ul,
    .container:has(.sidebar.categories-open) .sidebar.categories-open > ul,
    .container > .sidebar.categories-open .category-list,
    .container > .sidebar.categories-open .categorias-list {
        max-height: min(58vh, 430px) !important;
        margin-top: 8px !important;
        padding: 8px 0 0 !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .container > .sidebar > ul li,
    .container > .sidebar .cat {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
        background: #1b202a !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        color: #f3f4f6 !important;
        font-size: .88rem !important;
        line-height: 1.1 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .container > .sidebar > ul li.active,
    .container > .sidebar .cat.active {
        background: linear-gradient(135deg, rgba(18, 170, 255, .20), rgba(255, 172, 18, .13)) !important;
        color: #ffca55 !important;
        border-color: rgba(255, 172, 18, .35) !important;
        border-left: 3px solid #ffac12 !important;
    }

    .container > .sidebar > ul li span,
    .container > .sidebar .cat span {
        margin-left: auto !important;
        color: #aeb4c0 !important;
    }

    body.product-categories-open {
        overflow-y: auto !important;
        position: static !important;
    }
}

@media (min-width: 769px) {
    .category-menu-toggle,
    .home-category-toggle {
        display: none !important;
    }
}

/* Home categories: use the same compact hamburger behavior on mobile. */
@media (max-width: 768px) {
    section.categorias {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px !important;
        padding: 12px 10px !important;
        overflow: visible !important;
    }

    section.categorias .section-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 8px !important;
        border-radius: 12px !important;
        background: #121722 !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .22) !important;
    }

    section.categorias .section-header h2 {
        margin: 0 !important;
        color: #fff !important;
        font-size: 1rem !important;
        line-height: 1.1 !important;
        overflow-wrap: anywhere !important;
    }

    .home-category-toggle {
        display: inline-flex !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 172, 18, .42) !important;
        border-radius: 11px !important;
        background: #ffac12 !important;
        color: #111 !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    .home-category-toggle span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    section.categorias .ver-todo {
        grid-column: 1 / -1 !important;
        min-height: 36px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border-radius: 9px !important;
        background: #1b202a !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        color: #ffca55 !important;
    }

    section.categorias .grid-categorias {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: max-height .18s ease, opacity .18s ease !important;
    }

    section.categorias.categories-open .grid-categorias,
    section.categorias.categories-open #homeCategoryGrid {
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    section.categorias.categories-open .grid-categorias > *,
    section.categorias.categories-open #homeCategoryGrid > * {
        opacity: 1 !important;
        visibility: visible !important;
    }

    section.categorias .categoria-card {
        display: grid !important;
        gap: 8px !important;
        min-height: 0 !important;
        padding: 14px !important;
        border-radius: 12px !important;
        background: #151922 !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    section.categorias .categoria-card h3 {
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
    }

    section.categorias .categoria-card p {
        margin: 0 !important;
        font-size: .82rem !important;
        line-height: 1.3 !important;
    }

    section.categorias .categoria-info {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 2px !important;
    }

    section.categorias .categoria-link {
        width: 100% !important;
    }
}

/* Home final: keep top navigation as buttons and give the carousel more room. */
@media (max-width: 768px) {
    body.home-scroll-nav,
    body.home-scroll-nav.mobile-nav-compact,
    body.home-scroll-nav.mobile-menu-open {
        overflow-y: auto !important;
    }

    body.home-scroll-nav > header.header,
    body.home-scroll-nav.mobile-nav-compact > header.header,
    body.home-scroll-nav.mobile-menu-open > header.header {
        position: sticky !important;
        top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        gap: 7px !important;
        padding: 8px 10px !important;
        overflow: visible !important;
    }

    body.home-scroll-nav > header.header .mobile-nav-toggle,
    body.home-scroll-nav.mobile-nav-compact > header.header .mobile-nav-toggle,
    body.home-scroll-nav > .mobile-nav-backdrop,
    body.home-scroll-nav .mobile-nav-backdrop {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.home-scroll-nav > header.header .nav-container,
    body.home-scroll-nav.mobile-nav-compact > header.header .nav-container,
    body.home-scroll-nav.mobile-nav-compact > header.header:not(.mobile-menu-open) .nav-container,
    body.home-scroll-nav > header.header:not(.mobile-menu-open) .nav-container {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        filter: none !important;
    }

    body.home-scroll-nav > header.header .nav,
    body.home-scroll-nav.mobile-nav-compact > header.header .nav {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
    }

    body.home-scroll-nav > header.header .search-bar,
    body.home-scroll-nav.mobile-nav-compact > header.header .search-bar {
        grid-column: 1 / -1 !important;
        order: 20 !important;
        width: 100% !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 7px 10px !important;
    }

    body.home-scroll-nav > header.header .nav a,
    body.home-scroll-nav > header.header .user-name-nav,
    body.home-scroll-nav > header.header .user-saldo-nav,
    body.home-scroll-nav.mobile-nav-compact > header.header .nav a,
    body.home-scroll-nav.mobile-nav-compact > header.header .user-name-nav,
    body.home-scroll-nav.mobile-nav-compact > header.header .user-saldo-nav {
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: auto !important;
        padding: 7px 6px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9px !important;
        font-size: .76rem !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.home-scroll-nav > header.header .logo,
    body.home-scroll-nav.mobile-nav-compact > header.header .logo {
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        justify-content: center !important;
    }

    body.home-scroll-nav > header.header .logo-img,
    body.home-scroll-nav.mobile-nav-compact > header.header .logo-img {
        height: 40px !important;
        max-width: 170px !important;
        transform: none !important;
    }

    .hero {
        min-height: 430px !important;
        padding: 42px 16px 48px !important;
    }

    .hero-content {
        max-width: min(92vw, 620px) !important;
    }

    .hero h1 {
        margin-bottom: 12px !important;
        font-size: clamp(1.55rem, 8vw, 2rem) !important;
        line-height: 1.08 !important;
    }

    .hero p {
        max-width: 34rem !important;
        margin: 0 auto 18px !important;
        font-size: .86rem !important;
        line-height: 1.35 !important;
    }

    .hero-btn {
        min-height: 36px !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 8px 14px !important;
        border-radius: 9px !important;
        font-size: .78rem !important;
        line-height: 1.05 !important;
        font-weight: 850 !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .28) !important;
    }

    .hero-btn i {
        font-size: .78rem !important;
    }
}

@media (max-width: 380px) {
    body.home-scroll-nav > header.header .nav,
    body.home-scroll-nav.mobile-nav-compact > header.header .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hero-btn {
        padding: 7px 12px !important;
        font-size: .72rem !important;
    }
}

/* Public catalog reference pass: category box and equal product cards. */
@media (max-width: 768px) {
    .container > .sidebar {
        position: static !important;
        width: 100% !important;
        padding: 12px !important;
        border-radius: 16px !important;
        background: radial-gradient(circle at 84% 0%, rgba(93,255,208,.08), transparent 180px), rgba(16,40,56,.72) !important;
        border: 1px solid rgba(93,255,208,.12) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.24), 0 0 0 1px rgba(78,220,213,.05) !important;
    }

    .container > .sidebar .category-menu-head {
        margin-bottom: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .container > .sidebar .category-menu-toggle {
        display: none !important;
    }

    main.productos .categoria-header {
        align-items: flex-start !important;
        gap: 9px !important;
        margin: 14px 0 14px !important;
    }

    main.productos .categoria-heading {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    main.productos .categoria-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
    }

    main.productos .categoria-titulo {
        font-size: clamp(1.85rem, 8vw, 2.1rem) !important;
        line-height: 1.04 !important;
        font-weight: 950 !important;
    }

    main.productos .contador-productos {
        display: inline-flex !important;
        width: auto !important;
        min-height: 28px !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 12px !important;
        border-radius: 999px !important;
        font-size: .75rem !important;
        font-weight: 900 !important;
    }

    .container > .sidebar ul,
    .container > .sidebar.categories-open ul,
    .container:has(> .sidebar) > .sidebar ul,
    .container:has(> .sidebar) > .sidebar .category-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: none !important;
        overflow: visible !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .container > .sidebar ul::-webkit-scrollbar {
        display: none !important;
    }

    .container > .sidebar ul li,
    .container > .sidebar ul li.cat,
    .container:has(> .sidebar) > .sidebar ul li,
    .container:has(> .sidebar) > .sidebar ul li.cat {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 8px 9px !important;
        border-radius: 10px !important;
        background: rgba(9, 30, 44, .55) !important;
        border: 1px solid rgba(93,255,208,.08) !important;
        color: #e8edf5 !important;
        font-size: .72rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        justify-content: flex-start !important;
        text-align: left !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .container > .sidebar ul li.active,
    .container > .sidebar ul li.cat.active {
        background: linear-gradient(135deg, rgba(255, 141, 11, .25), rgba(18, 170, 255, .16)) !important;
        border-color: rgba(255, 168, 18, .55) !important;
        color: #fff !important;
    }

    main.productos .grid-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    main.productos .producto-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 152px auto auto 1fr auto !important;
        gap: 7px !important;
        min-height: 326px !important;
        height: 326px !important;
        padding: 8px !important;
        border-radius: 14px !important;
        background: radial-gradient(circle at 84% 0%, rgba(93,255,208,.09), transparent 120px), linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.04)) !important;
        border: 1px solid rgba(93,255,208,.10) !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.24), 0 0 0 1px rgba(93,255,208,.06) !important;
    }

    main.productos .producto-card > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-width: 0 !important;
    }

    main.productos .producto-card .thumb {
        width: 100% !important;
        height: 152px !important;
        aspect-ratio: auto !important;
        border-radius: 10px !important;
        margin: 0 !important;
        background-size: contain !important;
        background-position: center !important;
    }

    main.productos .producto-meta {
        margin: 0 !important;
        gap: 4px !important;
        font-size: .56rem !important;
        line-height: 1 !important;
        overflow: hidden !important;
        flex-wrap: nowrap !important;
    }

    main.productos .producto-meta span {
        min-width: 0 !important;
        padding: 5px 6px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    main.productos .producto-meta span:nth-of-type(5),
    main.productos .producto-meta .dot:nth-of-type(4) {
        display: none !important;
    }

    main.productos .producto-card h3,
    main.productos .producto-card p,
    main.productos .producto-card .seller-name,
    main.productos .producto-card .producto-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    main.productos .producto-card h3 {
        display: -webkit-box !important;
        min-height: 1.16em !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        font-size: .76rem !important;
        line-height: 1.16 !important;
        -webkit-line-clamp: 2 !important;
    }

    main.productos .producto-card p {
        display: -webkit-box !important;
        min-height: 2.55em !important;
        margin-bottom: 0 !important;
        font-size: .62rem !important;
        line-height: 1.28 !important;
        -webkit-line-clamp: 2 !important;
    }

    main.productos .producto-footer {
        gap: 7px !important;
        margin-bottom: 0 !important;
    }

    main.productos .precio {
        font-size: .98rem !important;
    }

    main.productos .precio small {
        font-size: .56rem !important;
    }

    main.productos .producto-card button,
    main.productos .producto-card .btn-buy {
        min-height: 34px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #2fe7df, #087da4) !important;
        color: #fff !important;
        font-size: .68rem !important;
        font-weight: 950 !important;
        padding: 7px 8px !important;
        box-shadow: 0 8px 18px rgba(15,199,215,.18) !important;
    }

    main.productos .badge-categoria {
        display: none !important;
    }
}

@media (min-width: 769px) {
    main.productos .grid-productos {
        grid-template-columns: repeat(auto-fill, minmax(302px, 1fr)) !important;
        gap: 16px !important;
    }

    main.productos .producto-card {
        height: 610px !important;
    }
}

/* Final override: public pages use the open index-style nav, never hamburger. */
@media (max-width: 768px) {
    html body.public-open-nav,
    html body.public-open-nav.mobile-menu-open {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html body.public-open-nav > header.header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        gap: 7px !important;
        padding: 8px 10px 10px !important;
        overflow: visible !important;
        background: rgba(5, 18, 30, .98) !important;
    }

    html body.public-open-nav > header.header .mobile-nav-toggle,
    html body.public-open-nav > .mobile-nav-backdrop,
    html body.public-open-nav .mobile-nav-backdrop {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html body.public-open-nav > header.header .nav-container,
    html body.public-open-nav > header.header:not(.mobile-menu-open) .nav-container,
    html body.public-open-nav > header.header.mobile-menu-open .nav-container,
    html body.public-open-nav > header.header.mobile-menu-open .nav-container#mobileNavPanel {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        display: block !important;
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        filter: none !important;
    }

    html body.public-open-nav > header.header .nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
    }

    html body.public-open-nav > header.header .logo {
        position: absolute !important;
        left: 10px !important;
        top: 8px !important;
        z-index: 2 !important;
        display: flex !important;
        width: 38px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body.public-open-nav > header.header .logo-img {
        width: 34px !important;
        height: 34px !important;
        max-width: 34px !important;
        object-fit: contain !important;
        transform: none !important;
    }

    html body.public-open-nav > header.header .search-bar {
        grid-column: 1 / -1 !important;
        order: -1 !important;
        width: calc(100% - 48px) !important;
        max-width: none !important;
        min-height: 44px !important;
        height: 44px !important;
        margin-left: 48px !important;
        padding: 9px 12px !important;
        border-radius: 9px !important;
    }

    html body.public-open-nav > header.header .nav a,
    html body.public-open-nav > header.header .user-name-nav,
    html body.public-open-nav > header.header .user-saldo-nav {
        grid-column: auto !important;
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: auto !important;
        padding: 8px 8px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        background: rgba(16, 34, 48, .82) !important;
        border: 1px solid rgba(93, 255, 208, .08) !important;
        box-shadow: none !important;
        color: #e8edf5 !important;
        font-size: .78rem !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html body.public-open-nav > header.header .user-name-nav {
        display: none !important;
    }

    html body.public-open-nav > header.header .user-saldo-nav {
        color: #ffb028 !important;
        background: rgba(18, 170, 255, .16) !important;
    }

    html body.public-open-nav > header.header .btn-registro {
        color: #071016 !important;
        background: linear-gradient(135deg, #12aaff, #0de0c9) !important;
    }

html body.public-open-nav > .container,
    html body.public-open-nav > main,
    html body.public-open-nav .wrap,
    html body.public-open-nav .recarga-section {
        margin-top: 14px !important;
    }
}

/* Admin mobile polish: denser, calmer panels for phone use. */
@media (max-width: 768px) {
    body:has(.admin-sidebar:not(.seller-sidebar)) {
        min-width: 0 !important;
        background: #0d0f14 !important;
        color: #e8edf5 !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)):has(> .admin-main),
    body:has(.admin-sidebar:not(.seller-sidebar)):has(> main.wrap) {
        padding: 0 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)):not(:has(> .admin-main)):not(:has(> main.wrap)):not(:has(> .container)) {
        padding: 68px 10px 18px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) > .admin-main,
    body:has(.admin-sidebar:not(.seller-sidebar)) > main.wrap,
    body:has(.admin-sidebar:not(.seller-sidebar)) > .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 68px 10px 18px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) > .topbar,
    body:has(.admin-sidebar:not(.seller-sidebar)) > .grid,
    body:has(.admin-sidebar:not(.seller-sidebar)) > .card,
    body:has(.admin-sidebar:not(.seller-sidebar)) > .alert {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .sidebar-toggle {
        top: 10px !important;
        left: 10px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 11px !important;
        background: rgba(8, 18, 28, .96) !important;
        border: 1px solid rgba(93, 255, 208, .12) !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.32) !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .admin-sidebar {
        width: min(276px, calc(100vw - 38px)) !important;
        max-width: calc(100vw - 38px) !important;
        padding: 14px 0 12px !important;
        background: rgba(5, 18, 30, .98) !important;
        border-right-color: rgba(93, 255, 208, .09) !important;
        border-radius: 0 12px 12px 0 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .admin-logo {
        margin-bottom: 8px !important;
        padding: 0 14px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .admin-logo .logo {
        font-size: 1.08rem !important;
        line-height: 1.1 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .admin-logo .subtitle {
        font-size: .72rem !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .menu-section {
        margin-bottom: 8px !important;
        padding: 0 8px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .menu-section h3 {
        margin-bottom: 5px !important;
        padding-left: 8px !important;
        font-size: .65rem !important;
        letter-spacing: .6px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .menu-item {
        min-height: 38px !important;
        gap: 9px !important;
        margin-bottom: 4px !important;
        padding: 9px 10px !important;
        border-radius: 9px !important;
        font-size: .84rem !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .menu-item i {
        flex-basis: 20px !important;
        width: 20px !important;
        font-size: .96rem !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .menu-badge {
        min-width: 18px !important;
        padding: 2px 6px !important;
        font-size: .66rem !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .admin-header {
        min-height: 58px !important;
        padding: 9px 10px 9px 58px !important;
        gap: 6px !important;
        background: rgba(5, 18, 30, .96) !important;
        border-bottom-color: rgba(93, 255, 208, .08) !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .header-title h1,
    body:has(.admin-sidebar:not(.seller-sidebar)) h1 {
        font-size: 1.18rem !important;
        line-height: 1.18 !important;
        letter-spacing: 0 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .header-title p,
    body:has(.admin-sidebar:not(.seller-sidebar)) .title p,
    body:has(.admin-sidebar:not(.seller-sidebar)) .top p,
    body:has(.admin-sidebar:not(.seller-sidebar)) .muted {
        font-size: .78rem !important;
        line-height: 1.3 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .header-actions {
        display: none !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .admin-content {
        padding: 10px 0 0 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .top,
    body:has(.admin-sidebar:not(.seller-sidebar)) .topbar,
    body:has(.admin-sidebar:not(.seller-sidebar)) .header-top,
    body:has(.admin-sidebar:not(.seller-sidebar)) .section-title,
    body:has(.admin-sidebar:not(.seller-sidebar)) .toolbar,
    body:has(.admin-sidebar:not(.seller-sidebar)) .card-header {
        align-items: stretch !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .stats-grid,
    body:has(.admin-sidebar:not(.seller-sidebar)) .stats,
    body:has(.admin-sidebar:not(.seller-sidebar)) .grid,
    body:has(.admin-sidebar:not(.seller-sidebar)) .content-grid,
    body:has(.admin-sidebar:not(.seller-sidebar)) .quick-actions,
    body:has(.admin-sidebar:not(.seller-sidebar)) .details-grid,
    body:has(.admin-sidebar:not(.seller-sidebar)) .filters,
    body:has(.admin-sidebar:not(.seller-sidebar)) .filtros-container,
    body:has(.admin-sidebar:not(.seller-sidebar)) .row {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .stats-grid,
    body:has(.admin-sidebar:not(.seller-sidebar)) .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .content-card,
    body:has(.admin-sidebar:not(.seller-sidebar)) .card,
    body:has(.admin-sidebar:not(.seller-sidebar)) .stat-card,
    body:has(.admin-sidebar:not(.seller-sidebar)) .quick-action-card {
        min-width: 0 !important;
        padding: 11px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, .045) !important;
        border-color: rgba(255, 255, 255, .075) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .card-header,
    body:has(.admin-sidebar:not(.seller-sidebar)) .card-body {
        padding: 11px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .stat-card,
    body:has(.admin-sidebar:not(.seller-sidebar)) .stat {
        display: flex !important;
        align-items: center !important;
        text-align: left !important;
        gap: 9px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .stat-header {
        margin-bottom: 0 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .stat-icon,
    body:has(.admin-sidebar:not(.seller-sidebar)) .quick-action-icon,
    body:has(.admin-sidebar:not(.seller-sidebar)) .icon,
    body:has(.admin-sidebar:not(.seller-sidebar)) .user-avatar-sm {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 9px !important;
        font-size: .9rem !important;
        margin: 0 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .stat-content h3,
    body:has(.admin-sidebar:not(.seller-sidebar)) .stat-card .number,
    body:has(.admin-sidebar:not(.seller-sidebar)) .stat .v,
    body:has(.admin-sidebar:not(.seller-sidebar)) .num {
        font-size: 1.18rem !important;
        line-height: 1.12 !important;
        margin: 0 !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) h2,
    body:has(.admin-sidebar:not(.seller-sidebar)) .card-header h3,
    body:has(.admin-sidebar:not(.seller-sidebar)) .quick-action-card h3 {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .quick-action-card {
        text-align: left !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .quick-action-card p,
    body:has(.admin-sidebar:not(.seller-sidebar)) .stat-content p,
    body:has(.admin-sidebar:not(.seller-sidebar)) .stat-card .label {
        font-size: .75rem !important;
        line-height: 1.25 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .alert,
    body:has(.admin-sidebar:not(.seller-sidebar)) .alert-success,
    body:has(.admin-sidebar:not(.seller-sidebar)) .alert-error,
    body:has(.admin-sidebar:not(.seller-sidebar)) .ok-alert,
    body:has(.admin-sidebar:not(.seller-sidebar)) .err-alert {
        padding: 10px !important;
        border-radius: 10px !important;
        margin-bottom: 9px !important;
        font-size: .82rem !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) label {
        margin: 8px 0 4px !important;
        font-size: .78rem !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) input,
    body:has(.admin-sidebar:not(.seller-sidebar)) select,
    body:has(.admin-sidebar:not(.seller-sidebar)) textarea {
        min-height: 39px !important;
        padding: 8px 10px !important;
        border-radius: 9px !important;
        font-size: 16px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) textarea {
        min-height: 82px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .btn,
    body:has(.admin-sidebar:not(.seller-sidebar)) .action-btn,
    body:has(.admin-sidebar:not(.seller-sidebar)) button[type="submit"],
    body:has(.admin-sidebar:not(.seller-sidebar)) input[type="submit"] {
        min-height: 38px !important;
        padding: 8px 10px !important;
        border-radius: 9px !important;
        font-size: .82rem !important;
        line-height: 1.12 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .action-btn,
    body:has(.admin-sidebar:not(.seller-sidebar)) .iconbtn {
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .action-buttons,
    body:has(.admin-sidebar:not(.seller-sidebar)) .actions-row,
    body:has(.admin-sidebar:not(.seller-sidebar)) .review-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .table-wrap,
    body:has(.admin-sidebar:not(.seller-sidebar)) .admin-table-wrap,
    body:has(.admin-sidebar:not(.seller-sidebar)) .card:has(table),
    body:has(.admin-sidebar:not(.seller-sidebar)) .content-card:has(table),
    body:has(.admin-sidebar:not(.seller-sidebar)) div[style*="overflow:auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 9px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table,
    body:has(.admin-sidebar:not(.seller-sidebar)) .data-table {
        min-width: 560px !important;
        font-size: .78rem !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) th,
    body:has(.admin-sidebar:not(.seller-sidebar)) td {
        padding: 8px 7px !important;
        line-height: 1.25 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) th {
        font-size: .68rem !important;
        letter-spacing: .2px !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .badge,
    body:has(.admin-sidebar:not(.seller-sidebar)) .status-badge,
    body:has(.admin-sidebar:not(.seller-sidebar)) .pill,
    body:has(.admin-sidebar:not(.seller-sidebar)) .stat-change {
        padding: 4px 7px !important;
        border-radius: 999px !important;
        font-size: .68rem !important;
        line-height: 1.1 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .stat-card .stat-change {
        display: none !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) img.thumb,
    body:has(.admin-sidebar:not(.seller-sidebar)) .voucher-thumb {
        width: 46px !important;
        height: 46px !important;
        border-radius: 9px !important;
    }
}

@media (max-width: 380px) {
    body:has(.admin-sidebar:not(.seller-sidebar)) .stats-grid,
    body:has(.admin-sidebar:not(.seller-sidebar)) .quick-actions {
        grid-template-columns: 1fr !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) > .admin-main,
    body:has(.admin-sidebar:not(.seller-sidebar)) > main.wrap,
    body:has(.admin-sidebar:not(.seller-sidebar)) > .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Admin mobile repair: visible menu icon and centered card tables. */
@media (max-width: 768px) {
    body:has(.admin-sidebar:not(.seller-sidebar)) .sidebar-toggle {
        position: fixed !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        color: #dff7ff !important;
        line-height: 1 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .sidebar-toggle i {
        display: none !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .sidebar-toggle::before {
        content: "☰" !important;
        display: block !important;
        font-family: Arial, sans-serif !important;
        font-size: 1.2rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        transform: translateY(-1px) !important;
    }

    body.sidebar-open:has(.admin-sidebar:not(.seller-sidebar)) .sidebar-toggle::before,
    body:has(.admin-sidebar:not(.seller-sidebar)) .sidebar-toggle[aria-expanded="true"]::before {
        content: "×" !important;
        font-size: 1.45rem !important;
        transform: translateY(-2px) !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) .table-wrap,
    body:has(.admin-sidebar:not(.seller-sidebar)) .admin-table-wrap,
    body:has(.admin-sidebar:not(.seller-sidebar)) .table-responsive,
    body:has(.admin-sidebar:not(.seller-sidebar)) .has-mobile-table,
    body:has(.admin-sidebar:not(.seller-sidebar)) .card:has(table),
    body:has(.admin-sidebar:not(.seller-sidebar)) .content-card:has(table),
    body:has(.admin-sidebar:not(.seller-sidebar)) .card-body:has(table),
    body:has(.admin-sidebar:not(.seller-sidebar)) div[style*="overflow:auto"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table,
    body:has(.admin-sidebar:not(.seller-sidebar)) .data-table.mobile-card-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 9px !important;
        font-size: .82rem !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table thead {
        display: none !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table tbody,
    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table tr,
    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table tr {
        margin: 0 0 9px !important;
        padding: 11px !important;
        border: 1px solid rgba(255,255,255,.075) !important;
        border-radius: 10px !important;
        background: rgba(16, 20, 30, .72) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table td {
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.065) !important;
        text-align: left !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table td:last-child {
        border-bottom: 0 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table td::before {
        content: attr(data-label) !important;
        display: block !important;
        margin: 0 0 4px !important;
        color: rgba(232, 237, 245, .58) !important;
        font-size: .66rem !important;
        font-weight: 900 !important;
        letter-spacing: .25px !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table td[data-label=""]::before {
        display: none !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table td > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table .action-buttons,
    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table .mobile-actions-ready {
        display: flex !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
        justify-content: flex-start !important;
    }

    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table .action-buttons > *,
    body:has(.admin-sidebar:not(.seller-sidebar)) table.mobile-card-table .mobile-actions-ready > * {
        width: auto !important;
        min-width: 34px !important;
    }
}