/*
 * Hoja principal de la tienda. Solo define el orden de las capas y carga los demás archivos: el
 * orden de las capas decide qué estilo gana (no la especificidad), así una regla de "pages" le
 * gana a una de "components" aunque su selector sea más simple, y "utilities" le gana a todo.
 *
 * Reglas: colores, medidas y sombras solo con var(--…) de settings/tokens.css; nombres BEM;
 * cortes de pantalla 1100 · 820 · 520 px. Cada archivo declara su propia capa con @layer.
 * Font Awesome lo carga el layout con <link> (fuera de capas): solo da íconos, no choca con nada.
 * Los íconos de línea fina (Lucide, helper icono_tienda()) usan components/icon/icon.css.
 * Swiper se importa aquí dentro de la capa "integrations": así las páginas pueden ajustar sus
 * carruseles (ancho de las miniaturas, ocultar en celular…). Fuera de capas le ganaba a todo.
 *
 * PENDIENTE (antes de publicar): cada @import es una descarga en cadena. Para producción conviene
 * unir todos los archivos en uno solo respetando este orden.
 */
@layer reset, settings, base, layout, components, integrations, pages, utilities;

@import url("settings/tokens.css");

@import url("base/reset.css");
@import url("base/fonts.css");
@import url("base/elements.css");

@import url("layout/container/container.css");
@import url("layout/header/header.css");
@import url("layout/footer/footer.css");

@import url("components/icon/icon.css");
@import url("components/button/button.css");
@import url("components/form-field/form-field.css");
@import url("components/password-field/password-field.css");
@import url("components/notice/notice.css");
@import url("components/breadcrumb/breadcrumb.css");
@import url("components/page-header/page-header.css");
@import url("components/panel/panel.css");
@import url("components/status-pill/status-pill.css");
@import url("components/product-card/product-card.css");
@import url("components/quantity-stepper/quantity-stepper.css");
@import url("components/empty-state/empty-state.css");
@import url("components/pagination/pagination.css");
@import url("components/detail-list/detail-list.css");
@import url("components/pay-accounts/pay-accounts.css");
@import url("components/account-header/account-header.css");
@import url("components/account-menu/account-menu.css");
@import url("components/order-detail/order-detail.css");
@import url("components/purchase-summary/purchase-summary.css");
@import url("components/confirm-dialog/confirm-dialog.css");
@import url("components/modal/modal.css");
@import url("components/chatbot/chatbot.css");
@import url("components/robot-averiado/robot-averiado.css");
@import url("components/estante-almacen/estante-almacen.css");

@import url("integrations/fontawesome.css");
@import url("../vendor/swiper/swiper-bundle.min.css") layer(integrations);
@import url("integrations/swiper.css");

@import url("pages/home.css");
@import url("pages/productos.css");
@import url("pages/producto.css");
@import url("pages/carrito.css");
@import url("pages/pedido.css");
@import url("pages/acceso.css");
@import url("pages/cuenta.css");
@import url("pages/cuenta-pedido.css");
@import url("pages/cotizacion.css");
@import url("pages/informativas.css");
@import url("pages/legales.css");
@import url("pages/no-encontrada.css");

@import url("utilities/accessibility.css");