/* =========================================================
   AS APP · 03 · RESPONSIVE GLOBAL

   Único propietario de:
   - breakpoints
   - anchuras máximas
   - ajustes de paddings
   - reajustes de columnas
   - escalado estructural

   NO controla:
   - colores
   - tipografía
   - campana
   - reproductor
   - navegación
   - temas
   - lógica JS
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.as-app,
.as-videos-shell,
.as-account-shell,
.as-subpage,
.as-notif-page,
.as-pref-page{
  width:100%;
  box-sizing:border-box;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:520px){

  .as-app-shell{
    width:100%;
    max-width:var(--as-app-mobile-width);
  }

  .as-app,
  .as-videos-shell,
  .as-account-shell,
  .as-subpage,
  .as-notif-page,
  .as-pref-page{
    padding-left:max(var(--as-space-4),env(safe-area-inset-left));
    padding-right:max(var(--as-space-4),env(safe-area-inset-right));
  }

  .as-responsive-grid-2,
  .as-responsive-grid-3,
  .as-responsive-grid-4{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width:521px) and (max-width:900px){

  .as-app-shell{
    width:min(100%,760px);
  }

  .as-responsive-grid-3,
  .as-responsive-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   ESCRITORIO
   ========================================================= */

@media (min-width:901px){

  .as-app-shell{
    width:min(100%,var(--as-app-desktop-width));
  }

  .as-responsive-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .as-responsive-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .as-responsive-grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}


/* =========================================================
   SAFE AREAS
   ========================================================= */

.as-safe-bottom{
  padding-bottom:max(
    var(--as-space-4),
    env(safe-area-inset-bottom)
  );
}

.as-safe-top{
  padding-top:max(
    var(--as-space-4),
    env(safe-area-inset-top)
  );
}


/* =========================================================
   UTILIDADES RESPONSIVE
   ========================================================= */

@media (max-width:520px){
  .as-hide-mobile{
    display:none!important;
  }
}

@media (min-width:521px){
  .as-show-mobile-only{
    display:none!important;
  }
}