/* =====================================================
   MAIN CSS - JG MODA
   Archivo principal que importa todos los estilos
   ===================================================== */
/* =======================================================
   1. CORE - Base del sistema
   -------------------------------------------------------
   Define las reglas fundamentales del diseño: reset,
   grillas, tipografía, utilidades y variables globales.
   ======================================================= */
@import url('/assets/css/core/reset.css');
@import url('/assets/css/core/grid.css');
@import url('/assets/css/core/typography.css');
@import url('/assets/css/core/utilities.css');
@import url('/assets/css/core/variables.css');

/* =======================================================
   2. LAYOUT - Estructura general del sitio
   -------------------------------------------------------
   Define la disposición global: contenedores, cabecera,
   barra de navegación, pie de página y sidebar.
   ======================================================= */
@import url('/assets/css/layout/container.css');
@import url('/assets/css/layout/navbar.css');
@import url('/assets/css/layout/footer.css');
@import url('/assets/css/layout/sidebar.css');
@import url('/assets/css/layout/header.css');


/* =======================================================
   3. COMPONENTS - Elementos reutilizables
   -------------------------------------------------------
   Componentes UI individuales que se repiten en distintas
   vistas (botones, tarjetas, formularios, alertas, etc.).
   ======================================================= */
@import url('/assets/css/components/alert.css');
@import url('/assets/css/components/badge.css');
@import url('/assets/css/components/breadcrumbs.css');
@import url('/assets/css/components/button.css');
@import url('/assets/css/components/card.css');
@import url('/assets/css/components/cart-item.css');
@import url('/assets/css/components/category-card.css');
@import url('/assets/css/components/footer.css');
@import url('/assets/css/components/form.css');
@import url('/assets/css/components/hero-banner.css');
@import url('/assets/css/components/modal.css');
@import url('/assets/css/components/navbar.css');
@import url('/assets/css/components/pagination.css');
@import url('/assets/css/components/product-card.css');
@import url('/assets/css/components/rating.css');
@import url('/assets/css/components/search-bar.css');


/* =======================================================
   4. PAGES - Estilos por sección o vista
   -------------------------------------------------------
   Cada página principal del sitio tiene su propia hoja:
   Home, Tienda, Detalle de producto, Carrito, etc.
   ======================================================= */
@import url('/assets/css/pages/home.css');
@import url('/assets/css/pages/shop.css');
@import url('/assets/css/pages/product-detail.css');
@import url('/assets/css/pages/cart.css');
@import url('/assets/css/pages/checkout.css');
@import url('/assets/css/pages/account.css');
@import url('/assets/css/pages/login.css');
@import url('/assets/css/pages/errors.css');
@import url('/assets/css/pages/wishlist.css');
@import url('/assets/css/pages/register.css');


/* =======================================================
   5. THEMES - Personalizaciones y modos visuales
   -------------------------------------------------------
   Colores alternativos, modo oscuro, estilos especiales.
   ======================================================= */
@import url('/assets/css/themes/dark.css');


/* =======================================================
   6. CUSTOM GLOBALS - Reglas globales personalizadas
   -------------------------------------------------------
   Aquí puedes incluir pequeños ajustes visuales globales
   o importar un archivo custom.css adicional.
   ======================================================= */
/* @import url('/assets/css/custom.css'); */

/* =====================================================
   UTILIDADES GLOBALES
   ===================================================== */

/* === CONTENEDOR === */
.container {
    width: 100%;
    max-width: var(--max-width-xl);
    margin: 0 auto;
    padding: 0 20px;
}

/* === HELPERS === */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-100 {
    opacity: 1;
}

/* === SPACING === */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-xs); }
.pt-2 { padding-top: var(--spacing-sm); }
.pt-3 { padding-top: var(--spacing-md); }
.pt-4 { padding-top: var(--spacing-lg); }
.pt-5 { padding-top: var(--spacing-xl); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-xs); }
.pb-2 { padding-bottom: var(--spacing-sm); }
.pb-3 { padding-bottom: var(--spacing-md); }
.pb-4 { padding-bottom: var(--spacing-lg); }
.pb-5 { padding-bottom: var(--spacing-xl); }

/* === DISPLAY === */
.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

/* === FLEX UTILITIES === */
.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

/* === GAP === */
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }
.gap-5 { gap: var(--spacing-xl); }

/* === WIDTH === */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

/* === BORDER RADIUS === */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* === SHADOW === */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* === CURSOR === */
.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

/* === OVERFLOW === */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-scroll {
    overflow: scroll;
}

/* === POSITION === */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* === RESPONSIVE UTILITIES === */
@media (min-width: 640px) {
    .sm\:hidden {
        display: none;
    }
    
    .sm\:block {
        display: block;
    }
}

@media (min-width: 768px) {
    .md\:hidden {
        display: none;
    }
    
    .md\:block {
        display: block;
    }
}

@media (min-width: 1024px) {
    .lg\:hidden {
        display: none;
    }
    
    .lg\:block {
        display: block;
    }
}