/* ==========================================================================
   BINNDER — MOBILE ADAPTIVE STYLESHEET
   Diseño tipo app para celular (≤ 768px) y ajustes de tablet (769–1024px).
   El escritorio (index.css) NO se modifica: todo lo de celular vive dentro
   de @media (max-width: 768px), y los elementos que crea mobile-app.js
   llevan la clase .mob-only, oculta fuera de móvil.
   ========================================================================== */

/* ── Variables extra para móvil ─────────────────────────────────────────── */
:root {
    --mob-nav-h:   68px;
    --mob-nav-gap: 10px;
    --mob-top-h:   58px;
    --safe-bot:    env(safe-area-inset-bottom, 0px);
    --safe-top:    env(safe-area-inset-top, 0px);
    --mob-sheet-bg: linear-gradient(180deg, #0e1730 0%, #081024 100%);
    --mob-line:    rgba(255, 255, 255, 0.08);
}

/* Transición al cambiar de vista sin recargar (index.js → _animateViewEnter).
   Solo se anima la entrada y sin "fill-mode" final, para que al terminar no
   quede ningún transform que afecte a elementos position: fixed. */
.view-section.view-enter { animation: viewFadeIn .28s var(--ease-smooth) backwards; }
@keyframes viewFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 768px) {
    .view-section.view-enter-forward { animation: viewSlideFwd .38s var(--ease-smooth) backwards; }
    .view-section.view-enter-back    { animation: viewSlideBack .38s var(--ease-smooth) backwards; }
    @keyframes viewSlideFwd  { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
    @keyframes viewSlideBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
    .view-section.view-enter,
    .view-section.view-enter-forward,
    .view-section.view-enter-back { animation: none; }
}

/* Barra inferior y elementos de la capa móvil: ocultos en escritorio */
.mobile-bottom-nav { display: none; }
@media (min-width: 769px) {
    .mob-only { display: none !important; }
}

/* ==========================================================================
   CELULAR — max-width: 768px
   ========================================================================== */
@media (max-width: 768px) {

    /* ── Base ────────────────────────────────────────────────────────────── */
    html { -webkit-text-size-adjust: 100%; }
    body {
        padding-bottom: calc(var(--mob-nav-h) + var(--mob-nav-gap) + var(--safe-bot) + 18px);
        overflow-x: hidden;
        -webkit-tap-highlight-color: transparent;
    }
    /* No se usa overflow:hidden en body: en Safari obliga a recalcular toda
       la página (cientos de cartas) y congela la pantalla. El fondo no se
       desplaza porque las capas de las hojas absorben el toque. */
    .mob-sheet-overlay, .mob-quick-backdrop, .modal-overlay { touch-action: none; overscroll-behavior: contain; }
    .modal-card, .mob-sheet-body, .notif-panel-list { touch-action: pan-y; }

    /* Sin desenfoques en móvil: el backdrop-filter de pantalla completa sobre
       una página larga es lo que congelaba Safari al abrir perfil y hojas */
    *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .modal-overlay { background: rgba(2, 4, 11, 0.9); }

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

    /* 16px evita que iOS haga zoom al enfocar un campo */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="search"],
    input[type="url"], input:not([type]), select, textarea {
        font-size: 16px !important;
    }

    .btn, .mobile-tab, .filter-chip, .folder-card, .tcg-card-item,
    .mob-list-row, .mob-tile, .mob-quick-item { -webkit-tap-highlight-color: transparent; }

    .btn:active, .mob-list-row:active, .mob-tile:active, .mob-quick-item:active,
    .filter-chip:active, .mob-icon-btn:active { transform: scale(0.97); }

    /* Tablas anchas: scroll horizontal dentro de su contenedor */
    table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── BARRA SUPERIOR ──────────────────────────────────────────────────── */
    /* Sin backdrop-filter ni transform en la barra: así el panel de
       notificaciones (position: fixed) puede ocupar toda la pantalla.
       El efecto "glass" se dibuja en un pseudo-elemento. */
    .navbar {
        height: calc(var(--mob-top-h) + var(--safe-top));
        padding: var(--safe-top) 16px 0;
        position: sticky;
        top: 0;
        z-index: 400;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid transparent;
        animation: none;
        opacity: 1;
        transform: none;
        transition: border-color .3s ease;
    }
    .navbar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(3, 6, 17, 0.97);
        transition: background .3s ease;
    }
    .navbar.mob-scrolled { border-bottom-color: var(--mob-line); }
    .navbar.mob-scrolled::before { background: #030611; }

    .nav-logo { gap: 0.6rem; }
    .nav-logo-text { font-size: 1.1rem; letter-spacing: 2.5px; }
    .nav-links,
    .btn-nav-sell,
    #user-session-widget { display: none !important; }

    .nav-actions { gap: 8px; }
    .btn-notif-bell {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--mob-line);
    }
    .notif-badge {
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        font-size: 0.62rem;
        border: 2px solid var(--bg-dark);
    }

    /* ── BARRA INFERIOR FLOTANTE ─────────────────────────────────────────── */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(var(--mob-nav-gap) + var(--safe-bot));
        height: var(--mob-nav-h);
        padding: 0 4px;
        border-radius: 24px;
        background: rgba(10, 16, 36, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
        z-index: 900;
        align-items: center;
        justify-content: space-around;
        animation: mobNavIn .55s var(--ease-spring) both;
    }
    .mobile-bottom-nav.hidden,
    body.public-collection-mode .mobile-bottom-nav { display: none; }

    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1;
        height: 100%;
        position: relative;
        text-decoration: none;
        color: var(--text-muted);
        font-family: var(--font-b);
        font-size: 0.66rem;
        font-weight: 600;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        user-select: none;
        transition: color .25s var(--ease-smooth), transform .15s ease;
    }
    .mobile-tab svg { transition: transform .35s var(--ease-spring); flex-shrink: 0; }
    .mobile-tab.active { color: #fff; }
    .mobile-tab.active svg { transform: translateY(-1px) scale(1.06); }
    .mobile-tab.active::before {
        content: "";
        position: absolute;
        top: 7px;
        width: 22px;
        height: 3px;
        border-radius: 2px;
        background: var(--secondary);
        box-shadow: 0 0 12px var(--secondary);
        animation: mobTabIndicator .45s var(--ease-spring) both;
    }
    .mobile-tab:not(.mobile-tab-center) > span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Botón central "+" */
    .mobile-tab-center > span { display: none; }
    .mobile-upload-btn {
        width: 54px;
        height: 54px;
        border-radius: 18px;
        background: linear-gradient(135deg, #1a7dff, #0052d9);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 26px var(--primary-glow), 0 0 0 4px rgba(3, 6, 17, 0.92);
        transform: translateY(-16px);
        transition: transform .35s var(--ease-spring), background .3s ease, box-shadow .3s ease;
    }
    .mobile-upload-btn svg { transition: transform .35s var(--ease-spring); }
    .mobile-tab-center:active .mobile-upload-btn { transform: translateY(-14px) scale(0.94); }
    .mobile-bottom-nav.quick-open .mobile-upload-btn {
        background: linear-gradient(135deg, #334166, #1a2240);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(3, 6, 17, 0.92);
    }
    .mobile-bottom-nav.quick-open .mobile-upload-btn svg { transform: rotate(135deg); }

    /* Avatar de la pestaña Cuenta */
    .mob-avatar-wrap {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border: none;
        transition: box-shadow .25s ease;
    }
    .mobile-tab.active .mob-avatar-wrap,
    #mob-tab-profile:active .mob-avatar-wrap { box-shadow: 0 0 0 2px var(--bg-dark), 0 0 0 3.5px var(--secondary); }

    /* ── MENÚ DE ACCIONES RÁPIDAS ("+") ──────────────────────────────────── */
    .mob-quick {
        position: fixed;
        inset: 0;
        z-index: 880;
        pointer-events: none;
    }
    .mob-quick.open { pointer-events: auto; }
    .mob-quick-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(1, 3, 10, 0.72);
        opacity: 0;
        transition: opacity .3s ease;
    }
    .mob-quick.open .mob-quick-backdrop { opacity: 1; }
    .mob-quick-list {
        position: absolute;
        left: 50%;
        bottom: calc(var(--mob-nav-h) + var(--mob-nav-gap) + var(--safe-bot) + 26px);
        transform: translateX(-50%);
        width: min(340px, calc(100vw - 40px));
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .mob-quick-item {
        display: flex;
        align-items: center;
        gap: 13px;
        width: 100%;
        padding: 12px 14px;
        border-radius: 18px;
        border: 1px solid var(--mob-line);
        background: rgba(14, 24, 50, 0.96);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        color: var(--text-light);
        text-align: left;
        font-family: var(--font-b);
        cursor: pointer;
        opacity: 0;
        transform: translateY(18px) scale(0.96);
        transition: opacity .25s ease, transform .4s var(--ease-spring);
    }
    .mob-quick.open .mob-quick-item {
        opacity: 1;
        transform: none;
        transition-delay: var(--d, 0ms);
    }
    .mob-quick-ico {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border-radius: 13px;
        display: grid;
        place-items: center;
        font-size: 1.25rem;
        background: color-mix(in srgb, var(--c) 18%, transparent);
        border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
    }
    .mob-quick-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .mob-quick-text b { font-family: var(--font-h); font-size: 0.98rem; font-weight: 700; }
    .mob-quick-text small { font-size: 0.76rem; color: var(--text-muted); }
    .mob-quick-chev { margin-left: auto; color: var(--text-muted); display: flex; }

    /* ── HOJAS INFERIORES (capa móvil) ───────────────────────────────────── */
    .mob-sheet-overlay {
        position: fixed;
        inset: 0;
        z-index: 9000;
        background: rgba(1, 3, 10, 0.72);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }
    .mob-sheet-overlay.open { opacity: 1; pointer-events: auto; }
    .mob-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9001;
        max-height: 88dvh;
        display: flex;
        flex-direction: column;
        background: var(--mob-sheet-bg);
        border-radius: 28px 28px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
        padding: 10px 0 0;
        transform: translateY(105%);
        transition: transform .45s var(--ease-spring);
        will-change: transform;
    }
    .mob-sheet.open { transform: translateY(0); }
    .mob-sheet.dragging { transition: none; }
    .mob-sheet-grab {
        width: 40px;
        height: 5px;
        flex-shrink: 0;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.25);
        margin: 0 auto 12px;
    }
    .mob-sheet-body {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 18px calc(22px + var(--safe-bot));
    }
    .mob-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
    }
    .mob-sheet-title {
        font-family: var(--font-h);
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--white);
        line-height: 1.2;
    }
    .mob-muted { color: var(--text-muted); font-size: 0.82rem; }
    .mob-price { font-family: var(--font-h); font-weight: 800; color: var(--secondary); margin-top: 4px; }
    .mob-link {
        background: none;
        border: none;
        color: var(--secondary);
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        padding: 6px 2px;
    }
    .mob-cta {
        width: 100%;
        height: 50px;
        margin-top: 18px;
        border: none;
        border-radius: 15px;
        background: linear-gradient(135deg, #0a72ff, #0057e0);
        box-shadow: 0 10px 26px var(--primary-glow);
        color: #fff;
        font-family: var(--font-h);
        font-weight: 700;
        font-size: 1rem;
        cursor: pointer;
    }
    .mob-icon-btn {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--mob-line);
        color: var(--text-light);
        cursor: pointer;
        transition: transform .15s ease;
    }
    .mob-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        padding: 3px 8px;
        border-radius: 7px;
        color: var(--text-light);
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--mob-line);
        white-space: nowrap;
    }
    .mob-chip.cyan  { color: var(--secondary); background: rgba(0, 212, 255, .1);  border-color: rgba(0, 212, 255, .3); }
    .mob-chip.blue  { color: #60a5fa;          background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .3); }
    .mob-chip.amber { color: #fbbf24;          background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); }
    .mob-badge {
        position: absolute;
        top: 6px;
        right: 8px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #ef4444;
        color: #fff;
        font-size: 0.62rem;
        font-weight: 800;
        display: grid;
        place-items: center;
        border: 2px solid #0e1730;
    }
    .mob-badge.hidden { display: none; }

    /* Listas de opciones */
    .mob-list {
        display: flex;
        flex-direction: column;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid var(--mob-line);
        background: rgba(255, 255, 255, 0.03);
    }
    .mob-list-row {
        display: flex;
        align-items: center;
        gap: 13px;
        width: 100%;
        padding: 12px 14px;
        border: none;
        border-bottom: 1px solid var(--mob-line);
        background: none;
        color: var(--text-light);
        font-family: var(--font-b);
        font-size: 0.93rem;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        transition: background .2s ease, transform .15s ease;
    }
    .mob-list-row:last-child { border-bottom: none; }
    .mob-list-row:active { background: rgba(255, 255, 255, 0.05); }
    .mob-list-row.danger { color: #f87171; }
    .mob-list-ico {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border-radius: 11px;
        display: grid;
        place-items: center;
        font-size: 1rem;
    }
    .mob-list-label { flex: 1; min-width: 0; }
    .mob-list-chev { color: var(--text-muted); display: flex; }

    /* Selector segmentado */
    .mob-seg {
        display: flex;
        gap: 4px;
        padding: 4px;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--mob-line);
        margin: 0 0 1.1rem;
    }
    .mob-seg button {
        flex: 1;
        height: 38px;
        border: none;
        border-radius: 11px;
        background: transparent;
        color: var(--text-muted);
        font-family: var(--font-h);
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
        transition: background .3s var(--ease-smooth), color .2s ease, box-shadow .3s ease;
    }
    .mob-seg button.on {
        color: #fff;
        background: linear-gradient(135deg, #0a72ff, #0057e0);
        box-shadow: 0 6px 16px var(--primary-glow);
    }

    /* ── HOJA DE CUENTA ──────────────────────────────────────────────────── */
    .mob-account-head { display: flex; align-items: center; gap: 13px; }
    .mob-account-avatar {
        width: 58px;
        height: 58px;
        flex-shrink: 0;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-family: var(--font-h);
        font-size: 1.3rem;
        font-weight: 800;
        color: #fff;
        box-shadow: 0 0 0 3px #0e1730, 0 0 0 5px rgba(0, 102, 255, 0.6);
    }
    .mob-account-avatar.avatar { width: 58px; height: 58px; font-size: 1.3rem; }
    .mob-account-id { flex: 1; min-width: 0; }
    .mob-account-name { font-family: var(--font-h); font-weight: 800; font-size: 1.25rem; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mob-account-mail { font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mob-account-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
    .mob-account-tiles {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin: 16px 0;
    }
    .mob-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 2px 10px;
        border-radius: 16px;
        border: 1px solid var(--mob-line);
        background: rgba(13, 22, 48, 0.72);
        color: var(--text-light);
        font-family: var(--font-b);
        font-size: 0.7rem;
        font-weight: 600;
        cursor: pointer;
        animation: mobPopIn .45s var(--ease-spring) both;
        animation-delay: var(--d, 0ms);
    }
    .mob-tile-ico { font-size: 1.35rem; line-height: 1; }
    .mob-logout {
        width: 100%;
        height: 48px;
        margin-top: 12px;
        border-radius: 15px;
        border: 1px solid rgba(239, 68, 68, 0.28);
        background: rgba(239, 68, 68, 0.06);
        color: #f87171;
        font-family: var(--font-h);
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
    }

    /* ── HOJA DE ACCIONES DE CARTA ───────────────────────────────────────── */
    .mob-card-sheet-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
    .mob-card-sheet-img {
        width: 64px;
        aspect-ratio: 63 / 88;
        flex-shrink: 0;
        border-radius: 8px;
        overflow: hidden;
        display: grid;
        place-items: center;
        font-size: 1.6rem;
        background: rgba(255, 255, 255, 0.04);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }
    .mob-card-sheet-img img { width: 100%; height: 100%; object-fit: cover; }

    /* ── SPLASH ──────────────────────────────────────────────────────────── */
    .btn-skip-splash { top: calc(var(--safe-top) + 16px); right: 16px; }

    /* ── INICIO ──────────────────────────────────────────────────────────── */
    .hero-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 1.1rem 1rem 1.5rem;
        gap: 0;
        text-align: left;
        max-width: 100%;
        overflow: hidden;
    }
    /* El texto y el mazo se intercalan: mensaje → mazo → botones */
    .hero-content { display: contents; }
    .hero-badge {
        order: 1;
        align-self: flex-start;
        display: inline-block;
        font-size: 0.72rem;
        line-height: 1.5;
        margin-bottom: 0.9rem;
        padding: 0.35rem 0.8rem;
    }
    .hero-badge .badge-dot { display: inline-block; vertical-align: middle; margin-right: 0.35rem; }
    .hero-title {
        order: 2;
        font-size: 2.05rem;
        line-height: 1.06;
        letter-spacing: -0.02em;
        margin-bottom: 0.6rem;
    }
    .hero-title br { display: none; }
    .hero-desc {
        order: 3;
        font-size: 0.9rem;
        line-height: 1.55;
        max-width: none;
        margin-bottom: 0.25rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hero-cards-side {
        order: 4;
        width: 100%;
        margin: 0 0 0.75rem;
    }
    .deck-container {
        width: 360px;
        height: 400px;
        zoom: 0.5;
        margin: 0 auto;
        touch-action: pan-y;
    }
    .interactive-card { width: 200px; height: 290px; }
    .deck-nav { margin-top: 0.25rem; }
    .deck-btn { display: none; }
    .hero-cta {
        order: 5;
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        width: 100%;
        gap: 0.6rem;
        margin-bottom: 1rem;
    }
    .hero-cta .btn {
        width: 100%;
        justify-content: center;
        padding: 0.95rem 0.75rem;
        font-size: 0.95rem;
        border-radius: 15px;
        white-space: nowrap;
    }
    .hero-stats { order: 6; justify-content: center; gap: 1rem; }

    /* Pilares: carrusel horizontal con "peek" */
    .pillars-section { padding: 0 0 0.5rem; }
    .pillars-grid {
        display: flex;
        grid-template-columns: none;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0.25rem 1rem 0.75rem;
        scrollbar-width: none;
    }
    .pillars-grid::-webkit-scrollbar { display: none; }
    .pillar-card {
        flex: 0 0 82%;
        scroll-snap-align: center;
        padding: 1.3rem 1.2rem;
        background: rgba(15, 25, 55, 0.75);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .trades-cta { flex-direction: column; text-align: center; gap: 1rem; padding: 1.5rem 1.25rem; }
    .market-section { padding: 0 1.25rem; grid-template-columns: 1fr; }

    .games-section { padding: 1.25rem 1rem 1.5rem; }
    .games-header { text-align: left; }
    .games-header h2 { font-size: 1.3rem; }
    .games-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .game-chip { padding: 0.85rem 0.75rem; border-radius: 14px; font-size: 0.82rem; }

    /* ── MARKETPLACE ─────────────────────────────────────────────────────── */
    /* El encabezado se "aplana" (display: contents) para que el buscador
       pueda quedarse fijo mientras se recorre toda la cuadrícula */
    .marketplace-hero { display: contents; }
    .marketplace-title { font-size: 1.85rem !important; margin: 1rem 1rem 0.2rem !important; text-align: left; }
    .marketplace-desc { font-size: 0.86rem !important; margin: 0 1rem 1rem !important; text-align: left; }
    #marketplace-address-required { margin: 0 1rem 1.5rem !important; }
    #marketplace-location-indicator {
        display: flex !important;
        width: auto;
        justify-content: space-between;
        font-size: 0.78rem !important;
        margin: 0 1rem 0.85rem !important;
    }
    #marketplace-location-indicator.hidden { display: none !important; }

    /* Buscador fijo bajo la barra superior al hacer scroll */
    .search-bar-container {
        position: sticky !important;
        top: calc(var(--mob-top-h) + var(--safe-top));
        z-index: 50;
        width: auto !important;
        max-width: none !important;
        margin: 0 0 0.5rem !important;
        padding: 0.5rem 1rem;
        background: linear-gradient(180deg, #030611 78%, rgba(3, 6, 17, 0));
    }
    #marketplace-search-input { background: #0c1324 !important; }
    .search-bar-container.hidden { display: none; }
    .mob-has-filter-btn { display: flex; gap: 8px; align-items: center; }
    .mob-has-filter-btn .search-input-wrapper { flex: 1; min-width: 0; }
    #marketplace-search-input { padding: 0.8rem 1rem 0.8rem 2.7rem !important; border-radius: 15px !important; }
    .mob-filter-btn {
        position: relative;
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        border-radius: 15px;
        border: 1px solid var(--primary);
        background: var(--primary);
        color: #fff;
        box-shadow: 0 8px 20px var(--primary-glow);
        cursor: pointer;
    }
    .mob-filter-btn .mob-badge { top: -6px; right: -6px; background: var(--secondary); color: #02040c; border-color: var(--bg-dark); }

    .filter-chips-container {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        justify-content: flex-start !important;
        margin: 0 0 1rem !important;
        padding: 0 1rem 0.25rem !important;
        gap: 0.5rem !important;
        scrollbar-width: none;
    }
    .filter-chips-container::-webkit-scrollbar { display: none; }
    .filter-chip {
        flex-shrink: 0;
        display: inline-flex !important;
        align-items: center;
        gap: 0.4rem;
        white-space: nowrap;
        padding: 0.5rem 1rem !important;
        font-size: 0.82rem !important;
        transition: background .25s ease, transform .15s ease, box-shadow .25s ease !important;
    }
    .filter-chip.active { box-shadow: 0 6px 18px var(--primary-glow); }

    /* Filtros avanzados: dentro de la hoja inferior */
    .marketplace-advanced-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        margin: 0;
    }
    .marketplace-advanced-filters.hidden { display: none !important; }
    #marketplace-hero > .marketplace-advanced-filters,
    .marketplace-hero > .marketplace-advanced-filters { display: none !important; }
    .mob-filters .mkt-filter { min-width: 0; }
    .mob-filters .mkt-filter select { width: 100%; max-width: none; min-height: 46px; border-radius: 13px; }
    .mob-filters .mkt-filter-reset { display: none !important; }

    .marketplace-grid-section { padding: 0 1rem 2rem !important; }

    /* ── TARJETAS DE CARTA (cuadrícula de 2 columnas) ───────────────────── */
    .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
    .tcg-card-item {
        padding: 0.5rem;
        border-radius: 18px;
        gap: 0.45rem;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(13, 22, 48, 0.72);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    }
    .tcg-card-item:hover { transform: none; }
    /* Las cartas fuera de pantalla no se dibujan (ahorra memoria y CPU) */
    .cards-grid > .tcg-card-item { content-visibility: auto; contain-intrinsic-size: auto 320px; }
    #collection-cards-grid > .tcg-card-item,
    #public-collection-cards-grid > .tcg-card-item { contain-intrinsic-size: auto 200px; }
    .tcg-card-item:active { transform: scale(0.975); }
    .tcg-card-img-container {
        height: auto;
        aspect-ratio: 63 / 88;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.02);
    }
    .tcg-card-img { object-fit: cover; }
    .tcg-card-item:hover .tcg-card-img { transform: none; }
    .tcg-card-badge { font-size: 0.55rem !important; padding: 0.15rem 0.4rem !important; }
    .tcg-card-info { padding: 0 0.15rem; gap: 0.05rem; }
    .tcg-card-info h4 { font-size: 0.85rem; }
    .tcg-card-expansion { font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tcg-card-other-city-alert { font-size: 0.62rem !important; padding: 0.25rem 0.4rem !important; }
    .tcg-card-footer { padding: 0.45rem 0.15rem 0; gap: 0.25rem; }
    .tcg-card-price { font-size: 1rem; }
    .tcg-card-meta, .tcg-qty-badge { font-size: 0.66rem !important; }
    .tcg-card-owner { font-size: 0.7rem; }
    .tcg-market-badge { font-size: 0.62rem; }
    .tcg-card-buy-btn {
        font-size: 0.8rem !important;
        padding: 0.55rem 0.4rem !important;
        border-radius: 11px !important;
        margin-top: 0.15rem !important;
    }

    /* Entrada escalonada */
    .mob-card-in { animation: mobCardIn .5s var(--ease-smooth) both; animation-delay: var(--mob-delay, 0ms); }
    .mob-lift { animation: mobLift .38s var(--ease-spring); }

    /* ── COLECCIÓN ───────────────────────────────────────────────────────── */
    .collection-dashboard { padding: 0 1rem 2rem !important; margin: 0.75rem auto !important; }
    .collection-header {
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
    .collection-title { font-size: 1.8rem !important; padding-right: 48px; }
    .collection-subtitle { font-size: 0.82rem !important; }
    .mob-coll-share { position: absolute; top: 2px; right: 0; }

    /* Acciones del encabezado: tarjeta de valor + botones compactos */
    #view-collection .collection-header > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem !important;
        width: 100%;
    }
    .collection-total-chip {
        grid-column: 1 / -1;
        position: relative;
        overflow: hidden;
        width: 100%;
        align-items: flex-start;
        padding: 1rem 1.1rem;
        border-radius: 20px;
        border: none;
        background: linear-gradient(135deg, #0a5cff, #062a8a 60%, #0a1640);
        box-shadow: 0 14px 32px rgba(0, 102, 255, 0.32);
    }
    .collection-total-chip::after {
        content: "";
        position: absolute;
        right: -30px;
        top: -30px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(0, 212, 255, 0.25);
        filter: blur(12px);
        pointer-events: none;
    }
    .collection-total-chip .total-chip-label { color: rgba(255, 255, 255, 0.8); font-size: 0.7rem; letter-spacing: 0.1em; }
    .collection-total-chip .total-chip-amount {
        color: #fff;
        font-size: 1.85rem;
        font-weight: 900;
        animation: mobCountIn .6s var(--ease-spring) both;
    }
    #view-collection .collection-header .btn { padding: 0.75rem 0.5rem !important; font-size: 0.85rem !important; justify-content: center; }

    /* Carpetas → selector segmentado */
    .folders-container {
        flex-direction: row !important;
        gap: 4px !important;
        padding: 4px;
        margin-bottom: 1rem !important;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--mob-line);
    }
    .folder-card {
        flex: 1;
        min-width: 0;
        padding: 0.6rem 0.5rem;
        border-radius: 12px;
        border: none;
        background: transparent;
        gap: 0.4rem;
        justify-content: center;
        box-shadow: none;
        transition: background .3s var(--ease-smooth), box-shadow .3s ease;
    }
    .folder-card:hover { transform: none; background: transparent; }
    .folder-card.active {
        background: linear-gradient(135deg, #0a72ff, #0057e0);
        box-shadow: 0 6px 16px var(--primary-glow);
    }
    .folder-tab { font-size: 1.1rem; }
    .folder-card:hover .folder-tab { transform: none; }
    .folder-content { min-width: 0; }
    .folder-content h3 { font-size: 0.86rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
    .folder-card.active .folder-content h3 { color: #fff; }
    .folder-stats { font-size: 0.66rem; white-space: nowrap; }
    .folder-card.active .folder-stats { color: rgba(255, 255, 255, 0.8); }
    .folder-value, .folder-hint, .btn-share-folder { display: none !important; }

    .active-folder-view { padding: 0 !important; border-radius: 0 !important; background: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; }
    .active-folder-header { margin-bottom: 0.75rem !important; }
    .active-folder-header > div { flex-wrap: wrap; gap: 0.6rem !important; align-items: center !important; }
    #active-folder-title { font-size: 1.15rem !important; }
    #active-folder-desc { font-size: 0.78rem !important; }
    #btn-refresh-all-prices { font-size: 0.75rem !important; padding: 0.45rem 0.75rem !important; border-radius: 10px !important; }

    .tcg-search-input-wrapper { border-radius: 14px; }

    /* Filtros por juego: tarjetas compactas en scroll horizontal */
    .tcg-filter-row {
        display: flex;
        gap: 0.5rem;
        margin: 0 -1rem 0.9rem;
        padding: 0.25rem 1rem;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tcg-filter-row::-webkit-scrollbar { display: none; }
    .tcg-filter-card { flex-shrink: 0; width: 88px; height: 112px; padding: 0.6rem 0.5rem; border-radius: 14px; }
    .tfc-icon    { font-size: 1.35rem; margin: 0.2rem 0; }
    .tfc-name    { font-size: 0.76rem; }
    .tfc-subname { font-size: 0.52rem; }

    /* Cuadrícula tipo binder de 3 columnas (colección propia y pública) */
    #collection-cards-grid,
    #public-collection-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
    }
    #collection-cards-grid .tcg-card-item,
    #public-collection-cards-grid .tcg-card-item {
        padding: 0;
        gap: 0.3rem;
        border: none;
        background: none;
        box-shadow: none;
        overflow: visible;
    }
    #collection-cards-grid .tcg-card-img-container,
    #public-collection-cards-grid .tcg-card-img-container {
        border-radius: 9px;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
    }
    #collection-cards-grid .tcg-card-badge,
    #public-collection-cards-grid .tcg-card-badge { display: none; }
    #collection-cards-grid .tcg-card-lang-badge,
    #public-collection-cards-grid .tcg-card-lang-badge { transform: scale(0.8); transform-origin: top right; }
    #collection-cards-grid .tcg-foil-badge,
    #public-collection-cards-grid .tcg-foil-badge { font-size: 0.55rem; padding: 0.1rem 0.35rem; }
    #collection-cards-grid .tcg-card-info h4,
    #public-collection-cards-grid .tcg-card-info h4 { font-size: 0.72rem; font-weight: 600; }
    #collection-cards-grid .tcg-card-expansion,
    #public-collection-cards-grid .tcg-card-expansion { display: none; }
    #collection-cards-grid .tcg-card-footer,
    #public-collection-cards-grid .tcg-card-footer {
        border: none;
        padding: 0 0.15rem;
        gap: 0.15rem;
        margin: 0;
    }
    #collection-cards-grid .tcg-card-footer > span:not(.tcg-card-price):not(.tcg-market-badge),
    #public-collection-cards-grid .tcg-card-footer > span:not(.tcg-card-price):not(.tcg-market-badge) { display: none !important; }
    #collection-cards-grid .tcg-card-price,
    #public-collection-cards-grid .tcg-card-price { font-size: 0.8rem; }
    #collection-cards-grid .tcg-market-badge,
    #public-collection-cards-grid .tcg-market-badge { font-size: 0.55rem; padding: 0.1rem 0.3rem; }
    #collection-cards-grid .tcg-market-badge .tcg-price-age,
    #public-collection-cards-grid .tcg-market-badge .tcg-price-age { display: none; }
    /* Las acciones se abren tocando la carta (hoja de acciones) */
    #collection-cards-grid .tcg-card-item > div:last-child:has(.tcg-card-edit-btn) { display: none !important; }

    /* ── COLECCIÓN PÚBLICA ───────────────────────────────────────────────── */
    #view-public-collection > div { padding: 0 1rem 2rem !important; margin: 0.75rem auto !important; }
    #public-collection-header { gap: 0.75rem !important; margin-bottom: 1rem !important; flex-wrap: wrap; }
    #public-collection-username { font-size: 1.45rem !important; }
    body.public-collection-mode { padding-bottom: calc(1rem + var(--safe-bot)); }

    /* ── COLECCIÓN BLOQUEADA / VACÍA ─────────────────────────────────────── */
    .collection-locked { margin: 2rem 1rem !important; padding: 2rem 1.4rem !important; }
    .empty-state-container { padding: 2rem 1rem !important; }
    .glass-panel { padding: 1.25rem; border-radius: 18px; }

    /* ==================================================================
       MODALES → HOJAS INFERIORES / PANTALLA COMPLETA
       ================================================================== */
    .modal-overlay { align-items: flex-end; }
    .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 28px 28px 0 0 !important;
        max-height: 92dvh !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.75rem 1.15rem calc(1.25rem + var(--safe-bot)) !important;
        background: var(--mob-sheet-bg) !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        transform: translateY(100%) !important;
        transition: transform .45s var(--ease-spring) !important;
    }
    .modal-overlay.active .modal-card { transform: translateY(0) !important; }
    .modal-card::before {
        content: "";
        display: block;
        width: 40px;
        height: 5px;
        background: rgba(255, 255, 255, 0.22);
        border-radius: 3px;
        margin: 0 auto 1rem;
        flex-shrink: 0;
    }
    .modal-title { font-size: 1.3rem !important; padding-right: 44px; }
    .modal-subtitle { font-size: 0.84rem !important; }
    .modal-close {
        width: 38px;
        height: 38px;
        top: 14px;
        right: 14px;
        border-radius: 12px;
    }
    .modal-form .form-group { margin-bottom: 0.85rem; }
    .modal-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .modal-tabs::-webkit-scrollbar { display: none; }
    .modal-tabs .modal-tab { flex-shrink: 0; white-space: nowrap; padding: 0.55rem 0.85rem; }
    .profile-actions-row { flex-wrap: wrap; gap: 0.5rem; }

    /* Pantallas completas (estilo app) */
    #upload-modal .modal-card,
    #card-detail-modal .modal-card,
    #purchase-modal .modal-card,
    #chat-modal .modal-card.chat-modal-card,
    #orders-modal .modal-card,
    #sales-modal .modal-card,
    #bulk-import-modal .modal-card,
    #profile-modal .modal-card,
    #admin-modal .modal-card {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border-top: none !important;
        padding-top: calc(var(--safe-top) + 1rem) !important;
    }
    #upload-modal .modal-card::before,
    #card-detail-modal .modal-card::before,
    #purchase-modal .modal-card::before,
    #chat-modal .modal-card::before,
    #orders-modal .modal-card::before,
    #sales-modal .modal-card::before,
    #bulk-import-modal .modal-card::before,
    #profile-modal .modal-card::before,
    #admin-modal .modal-card::before { display: none; }
    #upload-modal .modal-close, #card-detail-modal .modal-close, #purchase-modal .modal-close,
    #orders-modal .modal-close, #sales-modal .modal-close, #bulk-import-modal .modal-close,
    #profile-modal .modal-close, #admin-modal .modal-close, #chat-modal .modal-close {
        top: calc(var(--safe-top) + 12px);
    }
    /* Entrada lateral para pantallas completas de navegación */
    #orders-modal .modal-card, #sales-modal .modal-card, #profile-modal .modal-card, #admin-modal .modal-card,
    #chat-modal .modal-card.chat-modal-card {
        transform: translateX(100%) !important;
        transition: transform .42s var(--ease-smooth) !important;
    }
    #orders-modal.active .modal-card, #sales-modal.active .modal-card, #profile-modal.active .modal-card,
    #admin-modal.active .modal-card, #chat-modal.active .modal-card.chat-modal-card { transform: none !important; }

    /* ── SUBIR CARTA (paso 1: buscar) ─────────────────────────────────────── */
    .mob-steps { display: flex; gap: 6px; margin: 0.25rem 0 1rem; }
    #mob-detail-steps { margin-right: 52px; }
    .mob-step { flex: 1; }
    .mob-step i {
        display: block;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.1);
        overflow: hidden;
        position: relative;
    }
    .mob-step.done i::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, var(--primary), var(--secondary));
        animation: mobStepFill .6s var(--ease-smooth) both;
    }
    .mob-step span { display: block; font-size: 0.68rem; font-weight: 600; margin-top: 6px; color: var(--text-muted); }
    .mob-step.done span { color: #fff; }

    #upload-modal .modal-card {
        overflow-y: auto !important;
        display: block !important;
        padding: calc(var(--safe-top) + 1rem) 1rem calc(1rem + var(--safe-bot)) !important;
    }
    #upload-modal #form-upload-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.1rem !important;
        overflow: visible !important;
        max-height: none !important;
    }
    #upload-modal .upload-left-col,
    #upload-modal .tcg-search-section { overflow: visible !important; max-height: none !important; }
    #upload-modal .tcg-game-toggle-group {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.5rem;
        scrollbar-width: none;
    }
    #upload-modal .tcg-game-toggle-group::-webkit-scrollbar { display: none; }
    #upload-modal .tcg-game-toggle-btn { flex-shrink: 0; }
    #upload-modal .tcg-search-results {
        max-height: none !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }
    #upload-modal .tcg-result-card { animation: mobCardIn .4s var(--ease-smooth) both; }
    #upload-modal.search-only .mob-steps + * { margin-top: 0; }

    /* ── SUBIR CARTA (paso 2: detalles) ───────────────────────────────────── */
    #card-detail-modal .modal-card {
        padding: calc(var(--safe-top) + 1rem) 1rem 0 !important;
        display: flex !important;
        flex-direction: column;
    }
    .card-detail-card { max-width: 100% !important; }
    .card-detail-body { flex-direction: column; align-items: center; gap: 1rem; margin-top: 0; }
    .card-detail-image-wrap {
        width: 170px;
        min-width: 170px;
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 102, 255, 0.25);
        animation: mobFloatIn .6s var(--ease-spring) both;
    }
    .card-detail-img-placeholder { font-size: 3.5rem; }
    .card-detail-info { width: 100%; gap: 1rem; }
    .card-detail-name { font-size: 1.4rem; text-align: center; }
    .card-detail-rows { gap: 0.85rem; }
    .card-detail-label { font-size: 0.72rem; }
    .card-detail-value { font-size: 1rem; }
    .card-detail-price-val { font-size: 1.2rem; }
    .card-detail-number-input { padding: 0.75rem 1rem; border-radius: 13px; }
    #btn-add-from-detail {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 0.5rem -1rem 0 !important;
        width: calc(100% + 2rem) !important;
        border-radius: 0 !important;
        padding: 1.05rem 1rem calc(1.05rem + var(--safe-bot)) !important;
        box-shadow: 0 -10px 30px rgba(3, 6, 17, 0.8) !important;
    }

    .mob-price-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
    .mob-price-chips.hidden { display: none; }
    .mob-price-chips button {
        height: 32px;
        padding: 0 12px;
        border-radius: 16px;
        border: 1px solid var(--mob-line);
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-light);
        font-family: var(--font-h);
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        transition: background .2s ease, border-color .2s ease;
    }
    .mob-price-chips button.on { background: var(--primary); border-color: var(--primary); }
    .mob-offer-chips { justify-content: center; margin: 12px 0 4px; }

    /* ── FICHA DE COMPRA ("Claim") ────────────────────────────────────────── */
    #purchase-modal .modal-card { padding: calc(var(--safe-top) + 1rem) 1.1rem calc(1rem + var(--safe-bot)) !important; }
    .purchase-card-summary { flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; }
    .purchase-card-img {
        width: 180px !important;
        height: auto !important;
        aspect-ratio: 63 / 88;
        font-size: 3rem;
        border-radius: 12px !important;
        box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), 0 0 50px rgba(0, 102, 255, 0.25);
        animation: mobFloatIn .6s var(--ease-spring) both;
        transform: perspective(700px) rotateY(-6deg) rotateX(3deg);
    }
    .purchase-card-img img { width: 100%; height: 100%; object-fit: cover; }
    .purchase-card-details { align-items: center; width: 100%; }
    .purchase-card-name { font-size: 1.35rem !important; }
    .purchase-seller-row { justify-content: center; }
    .purchase-actions {
        position: sticky;
        bottom: calc(-1rem - var(--safe-bot));
        z-index: 5;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
        margin: 1rem -1.1rem 0;
        padding: 0.85rem 1.1rem calc(0.85rem + var(--safe-bot));
        background: rgba(8, 16, 36, 0.96);
        border-top: 1px solid var(--mob-line);
    }
    .purchase-actions .btn { justify-content: center; padding: 0.9rem 0.5rem; }
    .btn-contact-seller { width: 100%; margin-top: 0.85rem; padding: 0.85rem; border-radius: 14px; }
    /* "Hacer una oferta" se mueve a la barra inferior (en lugar de Cancelar) */
    .purchase-actions:has(.btn-contact-seller) #btn-purchase-cancel { display: none; }
    .purchase-actions .btn-contact-seller {
        order: -1;
        margin: 0;
        padding: 0.9rem 0.5rem;
        border-radius: 14px;
        font-size: 0.92rem;
        white-space: nowrap;
    }

    /* Oferta */
    .offer-modal-card { max-width: 100% !important; }
    .offer-input-wrapper { justify-content: center; }
    .offer-amount-input { font-size: 2.2rem !important; text-align: center; }

    /* ── CHAT ─────────────────────────────────────────────────────────────── */
    #chat-modal .modal-card.chat-modal-card {
        padding: var(--safe-top) 0 var(--safe-bot) !important;
        display: flex;
        flex-direction: column;
    }
    #chat-inbox-view { padding: 1rem 1rem 0; overflow-y: auto; flex: 1; min-height: 0; }
    .chat-inbox-card { border-radius: 16px; padding: 0.75rem; }
    #chat-conversation-view:not(.hidden) { display: flex; flex-direction: column; flex: 1; min-height: 0; height: auto; max-height: none; }
    .chat-conv-header {
        padding: 0.6rem 1rem;
        border-bottom: 1px solid var(--mob-line);
        background: rgba(3, 6, 17, 0.7);
    }
    .chat-messages-container { flex: 1; min-height: 0; padding: 0.75rem 1rem; }
    .chat-bubble { max-width: 80%; animation: mobPopIn .3s var(--ease-spring) both; }
    .chat-bubble.mine .chat-bubble-text { border-bottom-right-radius: 6px; }
    .chat-bubble.theirs .chat-bubble-text { border-bottom-left-radius: 6px; }
    .chat-seller-actions {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        scrollbar-width: none;
    }
    .chat-seller-actions::-webkit-scrollbar { display: none; }
    .chat-seller-action-btn {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 0.78rem !important;
        padding: 0.5rem 0.85rem !important;
        border-radius: 16px !important;
    }
    .chat-input-area { padding: 0.6rem 1rem calc(0.6rem + var(--safe-bot)); gap: 0.5rem; }
    .chat-message-input {
        border-radius: 22px !important;
        min-height: 46px;
        max-height: 120px;
        padding: 0.7rem 1rem !important;
        line-height: 1.35;
    }
    .chat-message-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-send-btn { width: 46px; height: 46px; border-radius: 50% !important; flex-shrink: 0; padding: 0 !important; justify-content: center; }

    /* ── MIS COMPRAS / MIS VENTAS ─────────────────────────────────────────── */
    #orders-modal .modal-tabs,
    #sales-modal .modal-tabs {
        display: flex;
        gap: 4px;
        padding: 4px;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--mob-line);
    }
    #orders-modal .modal-tab,
    #sales-modal .modal-tab {
        flex: 1;
        border: none !important;
        border-radius: 11px;
        justify-content: center;
        transition: background .3s var(--ease-smooth), color .2s ease;
    }
    #orders-modal .modal-tab::after,
    #sales-modal .modal-tab::after { display: none !important; }
    #orders-modal .modal-tab.active,
    #sales-modal .modal-tab.active {
        color: #fff;
        background: linear-gradient(135deg, #0a72ff, #0057e0);
        box-shadow: 0 6px 16px var(--primary-glow);
    }
    .order-item { border-radius: 18px; }
    .order-item-footer { flex-wrap: wrap; gap: 0.5rem; }

    /* ── NOTIFICACIONES A PANTALLA COMPLETA ───────────────────────────────── */
    .notif-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: none;
        right: auto;
        top: 0;
        border-radius: 0;
        border: none;
        z-index: 9500;
        display: flex;
        flex-direction: column;
        background: var(--bg-dark);
        padding-top: var(--safe-top);
        transform: translateX(100%);
        opacity: 1;
        transition: transform .4s var(--ease-smooth);
    }
    .notif-panel.active { transform: none; }
    /* El panel vive dentro de la barra superior: al abrirlo, la barra pasa
       por encima de la navegación inferior */
    .navbar:has(.notif-panel.active) { z-index: 9500; }
    .notif-panel-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--mob-line);
    }
    .notif-panel-title { flex: 1; font-size: 1.1rem; text-align: center; }
    .notif-panel-list { flex: 1; max-height: none; overflow-y: auto; padding: 0.5rem 0.75rem calc(1rem + var(--safe-bot)); }
    .notif-item { border-radius: 14px; padding: 0.85rem 0.75rem; }

    /* ── PERFIL EN PESTAÑAS ───────────────────────────────────────────────── */
    #profile-modal .modal-card[data-mob-tab="perfil"]  .bank-account-section,
    #profile-modal .modal-card[data-mob-tab="pagos"]   .mob-prof-perfil,
    #profile-modal .modal-card[data-mob-tab="pagos"]   .mob-prof-precios,
    #profile-modal .modal-card[data-mob-tab="precios"] .mob-prof-perfil,
    #profile-modal .modal-card[data-mob-tab="precios"] .mob-prof-pagos { display: none !important; }
    #profile-modal .bank-account-section { margin-top: 0; animation: mobFadeUp .35s var(--ease-smooth) both; }
    #profile-modal .mob-prof-perfil { animation: mobFadeUp .35s var(--ease-smooth) both; }
    #profile-address-badge { position: static !important; display: inline-block; margin-top: 0.4rem; transform: none !important; }
    .avatar-picker-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 0.5rem !important; }

    /* ── ACCESO (login / registro): Google primero ───────────────────────── */
    #auth-modal .modal-card { display: flex; flex-direction: column; }
    #auth-modal .modal-card > * { order: 5; }
    #auth-modal .modal-card::before { order: 0; }
    #auth-modal .modal-card > div:first-of-type { order: 1; }
    #auth-modal .auth-tabs { order: 2; }
    #auth-modal #btn-google-signin { order: 3; min-height: 50px; border-radius: 15px; }
    #auth-modal #google-error-msg { order: 3; }
    #auth-modal .auth-divider { order: 4; }
    #auth-modal #form-login, #auth-modal #form-register { order: 5; }
    #auth-modal .modal-card > p:last-child { order: 6; }
    #auth-modal .modal-close { order: 0; }
    #auth-modal form .btn-primary { min-height: 50px; border-radius: 15px; }

    /* ── CARRITO ──────────────────────────────────────────────────────────── */
    .cart-drawer {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        background: #0a1024 !important;
        border-left: none !important;
        padding-top: var(--safe-top);
        padding-bottom: calc(1.5rem + var(--safe-bot));
    }

    /* ── TOASTS ───────────────────────────────────────────────────────────── */
    .binnder-toast {
        right: 12px !important;
        left: 12px !important;
        max-width: none !important;
        width: calc(100vw - 24px) !important;
        font-size: 0.85rem !important;
        padding: 0.8rem 1rem !important;
        border-radius: 14px !important;
    }

    /* ── ZOOM DE CARTA ────────────────────────────────────────────────────── */
    .card-zoom-overlay img { max-width: 88vw; max-height: 72vh; animation: mobFloatIn .45s var(--ease-spring) both; }

    /* ── MODALES PEQUEÑOS ─────────────────────────────────────────────────── */
    #delete-confirm-modal .modal-card { text-align: center; }
    .admin-modal-card,
    #share-collection-modal .modal-card { max-width: 100% !important; }

    /* ==================================================================
       PANEL TIENDA
       ================================================================== */
    #view-store-panel .collection-dashboard,
    #view-store-panel > div { padding-left: 1rem !important; padding-right: 1rem !important; }

    #store-panel-tabs {
        position: sticky;
        top: calc(var(--mob-top-h) + var(--safe-top));
        z-index: 40;
        margin: 0 -1rem 1rem !important;
        padding: 0.5rem 1rem !important;
        gap: 0.5rem !important;
        border: none !important;
        background: linear-gradient(180deg, #030611 78%, rgba(3, 6, 17, 0));
    }
    #store-panel-tabs .modal-tab {
        border-radius: 17px !important;
        border: 1px solid var(--mob-line) !important;
        background: rgba(255, 255, 255, 0.04);
        font-family: var(--font-h);
        font-weight: 600;
        font-size: 0.82rem;
        padding: 0.5rem 0.9rem !important;
    }
    #store-panel-tabs .modal-tab.active {
        background: var(--primary);
        border-color: var(--primary) !important;
        color: #fff;
        box-shadow: 0 6px 18px var(--primary-glow);
    }
    #store-panel-tabs .modal-tab.hidden { display: none; }
    /* Solo opacidad: un transform aquí rompería el carrito fijo del POS */
    .store-panel-tab-content { animation: mobFadeIn .35s var(--ease-smooth) both; }

    .store-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem !important; }
    .store-stat-card { padding: 0.9rem !important; border-radius: 17px !important; }
    .store-stat-value { font-size: 1.35rem !important; }
    .store-stat-label { font-size: 0.68rem !important; }
    .store-chart { overflow-x: auto; }

    /* Barras de búsqueda/filtros de las pestañas: una sola columna */
    #store-tab-historial > div:first-child,
    #store-tab-catalogo > div:first-child,
    #store-tab-empleados > div:first-child,
    #pos-accounts-view > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6rem !important;
    }
    #store-tab-catalogo > div:first-child > div { flex-wrap: wrap; gap: 0.5rem !important; }
    #store-tab-catalogo > div:first-child .btn { flex: 1 1 auto; justify-content: center; }

    .pos-accounts-grid,
    .pos-product-grid,
    .catalog-folder-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
    }

    /* Barra de acciones masivas del catálogo: flotante abajo */
    .catalog-bulk-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .catalog-bulk-bar.active,
    .catalog-bulk-bar.visible,
    .catalog-bulk-bar.show {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(var(--mob-nav-h) + var(--mob-nav-gap) + var(--safe-bot) + 12px);
        z-index: 950;
        border-radius: 20px;
        background: rgba(14, 24, 50, 0.97);
        border: 1px solid rgba(0, 102, 255, 0.5);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 102, 255, 0.25);
        padding: 0.75rem;
        animation: mobSlideUp .4s var(--ease-spring) both;
    }
    .catalog-bulk-bar .btn { flex: 1 1 calc(50% - 0.5rem); justify-content: center; font-size: 0.78rem !important; padding: 0.55rem 0.4rem !important; }

    /* Punto de venta: catálogo arriba, carrito colapsable abajo */
    .pos-detail-layout { display: block !important; }
    .pos-product-col { padding-bottom: 96px; }
    .pos-cart-col {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        max-height: 82dvh;
        overflow-y: auto;
        margin: 0 !important;
        padding: 0 1rem calc(1rem + var(--safe-bot)) !important;
        border-radius: 26px 26px 0 0 !important;
        background: var(--mob-sheet-bg) !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.6) !important;
        transition: max-height .4s var(--ease-smooth);
    }
    .pos-cart-col:not(.mob-expanded) > :not(.mob-pos-toggle):not(#btn-pos-checkout) { display: none !important; }
    .pos-cart-col:not(.mob-expanded) {
        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 0.75rem;
    }
    .pos-cart-col:not(.mob-expanded) #btn-pos-checkout { margin: 0 !important; padding: 0.85rem 1.25rem !important; }
    .mob-pos-toggle {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        min-width: 0;
        padding: 18px 0 8px;
        background: none;
        border: none;
        color: var(--text-light);
        text-align: left;
        cursor: pointer;
    }
    .mob-pos-toggle .mob-sheet-grab { position: absolute; top: 6px; left: 50%; margin: 0; transform: translateX(-50%); }
    .pos-cart-col:not(.mob-expanded) .mob-pos-toggle .mob-sheet-grab { display: none; }
    .pos-cart-col:not(.mob-expanded) .mob-pos-toggle { padding-top: 12px; }
    .mob-pos-summary { display: flex; flex-direction: column; flex: 1; min-width: 0; }
    .mob-pos-summary small { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mob-pos-summary b { font-family: var(--font-h); font-size: 1.3rem; font-weight: 800; color: var(--secondary); white-space: nowrap; }
    .mob-pos-hint { font-size: 0.75rem; font-weight: 600; color: var(--secondary); white-space: nowrap; }
    .pos-cart-col:not(.mob-expanded) .mob-pos-hint { display: none; }
    .pos-cart-col.mob-expanded .mob-pos-toggle { position: sticky; top: 0; z-index: 2; background: #0e1730; }
    #view-store-panel:has(#pos-account-detail:not(.hidden)) ~ * .mobile-bottom-nav,
    body:has(#pos-account-detail:not(.hidden)) .mobile-bottom-nav { display: none; }
    body:has(#pos-account-detail:not(.hidden)) { padding-bottom: 0; }
    #pos-account-detail.hidden .pos-cart-col { display: none !important; }

    /* ==================================================================
       ANIMACIONES
       ================================================================== */
    @keyframes mobNavIn        { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes mobTabIndicator { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
    @keyframes mobPopIn        { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes mobCardIn       { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes mobFadeIn       { from { opacity: 0; } to { opacity: 1; } }
    @keyframes mobFadeUp       { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes mobSlideUp      { from { transform: translateY(120%); } to { transform: none; } }
    @keyframes mobFloatIn      { from { transform: translateY(30px) scale(0.9); opacity: 0; } to { opacity: 1; } }
    @keyframes mobCountIn      { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes mobStepFill     { from { transform: translateX(-100%); } to { transform: none; } }
    @keyframes mobLift         { 0% { transform: none; } 45% { transform: translateY(-6px) scale(1.06); } 100% { transform: none; } }

} /* fin @media 768px */

/* Movimiento reducido: sin animaciones decorativas */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav, .mob-card-in, .mob-tile, .chat-bubble, .mob-lift,
    .card-detail-image-wrap, .purchase-card-img, .collection-total-chip .total-chip-amount { animation: none !important; }
    .mob-sheet, .mob-quick-item, .modal-card { transition-duration: .01ms !important; }
}

/* ==========================================================================
   PANTALLAS MUY PEQUEÑAS (iPhone SE, < 390px)
   ========================================================================== */
@media (max-width: 389px) {
    .hero-title { font-size: 1.75rem; }
    .hero-cta .btn { font-size: 0.8rem; padding: 0.85rem 0.4rem; }
    .hero-cta .btn .btn-arrow { display: none; }
    .hero-badge { font-size: 0.66rem; }
    .cards-grid { gap: 0.55rem; }
    #collection-cards-grid, #public-collection-cards-grid { gap: 0.45rem; }
    .mobile-tab { font-size: 0.6rem; }
    .mobile-upload-btn { width: 50px; height: 50px; }
    .mob-account-tiles { gap: 6px; }
    .mob-tile { font-size: 0.64rem; }
    .game-chip { font-size: 0.75rem; padding: 0.75rem 0.6rem; }
}

/* Pantallas bajas (iPhone SE, 8): mazo más pequeño para que los botones
   principales se vean sin hacer scroll */
@media (max-width: 768px) and (max-height: 720px) {
    .deck-container { zoom: 0.4; }
    .hero-title { margin-bottom: 0.4rem; }
    .hero-badge { margin-bottom: 0.6rem; }
    .deck-nav { margin-top: 0; }
}

/* ==========================================================================
   TABLET (769px – 1024px)
   Mantiene la navegación de escritorio, pero más compacta
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

    .navbar { padding: 0.9rem 1.5rem; gap: 1rem; }

    .nav-links { gap: 1.25rem; }
    .nav-links a { font-size: 0.88rem; white-space: nowrap; }

    .nav-actions { gap: 0.6rem; }

    .btn-nav-sell,
    .btn-login-nav {
        white-space: nowrap;
        padding: 0.5rem 0.95rem;
        font-size: 0.82rem;
    }

    /* Hero centrado debajo del mazo */
    .hero-section { padding: 2.5rem 2rem; gap: 2rem; }
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-cta { justify-content: center; }

    .pillars-section,
    .games-section { padding-left: 2rem; padding-right: 2rem; }

    /* Modales con márgenes cómodos */
    .modal-card { max-width: calc(100vw - 3rem) !important; }
    .modal-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .modal-tabs .modal-tab { flex-shrink: 0; white-space: nowrap; }
}

/* ==========================================================================
   TÁCTIL — sin efectos hover "pegados" tras tocar
   ========================================================================== */
@media (hover: none) {
    .tcg-card-item:hover,
    .game-chip:hover,
    .pillar-card:hover,
    .folder-card:hover,
    .btn-nav-sell:hover {
        transform: none;
    }
}