/* ============================================================
 * StarkTrade 5.0K - style-responsive.css
 * Media queries para tablet y móvil.
 * Extraído de style-layout.css para cumplir la Regla de Oro (<300 l).
 * ============================================================ */

/* ─── Responsive: tablet/movil ──────────────────────────────── */
@media (max-width: 768px) {
    /* Liberar scroll vertical (overflow:hidden global lo bloquea) */
    body { overflow: auto; }

    /* App pasa de "header / sidebar+content" a flujo vertical (sidebar ahora es fija abajo) */
    #app {
        grid-template-areas:
            "header"
            "content";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 14px;
        height: auto;
    }
    .logo { font-size: 1rem; letter-spacing: 1.5px; }
    .stats {
        width: 100%;
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .stat-item { flex-shrink: 0; }
    .stat-item .value { font-size: 0.78rem; }

    /* BARRA DE NAVEGACIÓN INFERIOR (Glassmorphism) */
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70px;
        background: rgba(15, 15, 20, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0;
        z-index: 10000;
        flex-direction: row;
        overflow: hidden;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    }

    .sidebar-header { display: none !important; }
    /* Bottom-nav móvil: el strip de pares no cabe en 70px → se oculta */
    .sidebar .pair-cards-strip { display: none !important; }

    .sidebar nav {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .sidebar nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5px 0;
        gap: 5px;
        height: 100%;
        border-left: none !important;
        border-bottom: 3px solid transparent;
        transition: all 0.2s ease;
    }

    .sidebar nav a .nav-icon {
        width: 22px;
        height: 22px;
        margin: 0;
    }

    .sidebar nav a .nav-text {
        display: block !important;
        opacity: 1 !important;
        font-size: 0.55rem !important;
        letter-spacing: 1px;
        font-weight: 700;
    }

    .sidebar nav a.active {
        background: rgba(0, 255, 65, 0.05);
        border-bottom-color: var(--accent-neon);
        color: var(--accent-neon);
    }

    /* Content: padding extra abajo para que la barra no tape el contenido */
    .content { 
        padding: 12px 12px 90px 12px; 
        overflow-y: auto; 
    }

    /* Grid a 1 columna y se cancela el span 2 de las cards anchas */
    .grid { grid-template-columns: 1fr; gap: 14px; }
    .card.wide { grid-column: auto; }
    .card { padding: 12px; }
}

@media (max-width: 480px) {
    .logo { font-size: 0.9rem; }
    .stat-item .label { font-size: 0.55rem; }
    .stat-item .value { font-size: 0.72rem; }
    .stats { gap: 10px; }
    h3 { font-size: 0.72rem; }
}