/* ==========================================================================
   MAIN.CSS — Reglas globales compartidas por todas las páginas.
   Las dependencias (variables, reset, tema, tipografía, componentes globales)
   ahora se cargan via <link> en cada HTML — NO con @import — para evitar
   la carga serial bloqueante.

   Orden recomendado en cada HTML:
     1. variables.css   2. tema.css    3. reset.css   4. tipografia.css
     5. topbar.css      6. sidebar.css 7. footer.css  8. botones.css
     9. user-dropdown.css   10. main.css   11. CSS específicos de la página
   ========================================================================== */

/* ==========================================================================
   CONTENEDORES DE PÁGINA — margen lateral en mobile para todas las páginas
   ========================================================================== */
.checkout-main,
.cursos-layout,
.estado-compra {
  width: calc(100% - 2rem);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* El footer dentro de .app empuja hacia abajo gracias al flex */
.app > footer {
  margin-top: auto;
}

@media (min-width: 640px) {
  .checkout-main,
  .cursos-layout,
  .estado-compra {
    width: calc(100% - 4rem);
  }
}

@media (min-width: 1024px) {
  .checkout-main,
  .cursos-layout,
  .estado-compra {
    width: calc(100% - 6rem);
  }
}