/* ==========================================================
   SPOTTER - responsive.css
   Mobile-first: por defecto navegación inferior + una columna.
   A partir de 1024px: sidebar fija + navegación inferior oculta.
   ========================================================== */

/* Tablet: dos columnas en grillas de tarjetas */
@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .app-main {
        padding: 24px 24px 90px 24px;
    }
}

/* Escritorio: sidebar visible, bottom-nav oculto, más columnas */
@media (min-width: 1024px) {
    .sidebar {
        display: flex;
    }

    .bottom-nav {
        display: none;
    }

    .app-main {
        padding: 32px 40px;
        max-width: 1200px;
    }

    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .card-grid--wide {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1280px) {
    .app-main {
        max-width: 1320px;
    }
}