/**
 * GRUPO VÍA MOTOS - Estilos Principales
 * 
 * Archivo principal que importa todos los estilos del sistema
 * Orden de importación optimizado para cascada CSS
 * 
 * @version 1.0
 * @date Diciembre 2024
 */

/* ============================================
   1. ESTILOS BASE
   ============================================ */

/* Variables CSS - Debe cargarse primero */
@import url('./base/variables.css');

/* Reset y normalización */
@import url('./base/reset.css');

/* Tipografía */
@import url('./base/typography.css');

/* Sistema de Grid */
@import url('./base/grid.css');

/* Accesibilidad */
@import url('./base/accessibility.css');

/* ============================================
   2. COMPONENTES (Por implementar en Etapa 2)
   ============================================ */

/* Navegación */
/* @import url('./componentes/navbar.css'); */
/* @import url('./componentes/footer.css'); */

/* Botones */
/* @import url('./componentes/botones-mejorados.css'); */

/* Cards y contenedores */
/* @import url('./componentes/moto-card-global.css'); */
/* @import url('./componentes/categorias.css'); */
/* @import url('./componentes/financieras-grid.css'); */

/* Interactivos */
/* @import url('./componentes/carousel.css'); */
/* @import url('./componentes/ubicacion.css'); */

/* Optimizaciones */
/* @import url('./componentes/core-web-vitals-optimization.css'); */
/* @import url('./componentes/imagenes-optimizadas.css'); */

/* ============================================
   3. UTILIDADES
   ============================================ */

/* Utilidades de espaciado adicionales */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* Utilidades de ancho */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-screen { width: 100vw; }

.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 384px; }
.max-w-md { max-width: 448px; }
.max-w-lg { max-width: 512px; }
.max-w-xl { max-width: 576px; }
.max-w-2xl { max-width: 672px; }
.max-w-3xl { max-width: 768px; }
.max-w-4xl { max-width: 896px; }
.max-w-5xl { max-width: 1024px; }
.max-w-6xl { max-width: 1152px; }
.max-w-7xl { max-width: 1280px; }
.max-w-full { max-width: 100%; }

/* Utilidades de altura */
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* Utilidades de posición */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Utilidades de overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Utilidades de opacidad */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Utilidades de cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-default { cursor: default; }

/* Utilidades de user-select */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* Utilidades de pointer-events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ============================================
   4. BACKGROUNDS
   ============================================ */

.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }

.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-200 { background-color: var(--color-gray-200); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-900 { background-color: var(--color-gray-900); }

/* ============================================
   5. BORDERS
   ============================================ */

.border { border: 1px solid var(--color-gray-300); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--color-gray-300); }
.border-b { border-bottom: 1px solid var(--color-gray-300); }
.border-l { border-left: 1px solid var(--color-gray-300); }
.border-r { border-right: 1px solid var(--color-gray-300); }

.border-primary { border-color: var(--color-primary); }
.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }

.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-2xl { border-radius: var(--border-radius-2xl); }
.rounded-full { border-radius: var(--border-radius-full); }

/* ============================================
   6. SHADOWS
   ============================================ */

.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }

/* ============================================
   7. TRANSITIONS
   ============================================ */

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.duration-150 { transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

/* ============================================
   8. TRANSFORMS
   ============================================ */

.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* ============================================
   9. Z-INDEX
   ============================================ */

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* ============================================
   10. OBJECT FIT (para imágenes)
   ============================================ */

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

.object-center { object-position: center; }
.object-top { object-position: top; }
.object-bottom { object-position: bottom; }

/* ============================================
   11. ASPECT RATIO
   ============================================ */

.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

/* ============================================
   12. RESPONSIVE UTILITIES
   ============================================ */

@media (min-width: 768px) {
    .md\:w-1\/2 { width: 50%; }
    .md\:w-1\/3 { width: 33.333333%; }
    .md\:w-2\/3 { width: 66.666667%; }
    .md\:w-1\/4 { width: 25%; }
    .md\:w-3\/4 { width: 75%; }
}

@media (min-width: 1024px) {
    .lg\:w-1\/2 { width: 50%; }
    .lg\:w-1\/3 { width: 33.333333%; }
    .lg\:w-2\/3 { width: 66.666667%; }
    .lg\:w-1\/4 { width: 25%; }
    .lg\:w-3\/4 { width: 75%; }
}

/* ============================================
   FIN DEL ARCHIVO PRINCIPAL
   ============================================ */