/**
 * ESTILOS PRINCIPALES
 * AKT VIA MOTOS - www.aktviamotos.com
 * 
 * Archivo principal que importa todo el sistema de diseño
 * Orden de importación optimizado para cascada CSS
 */

/* ============================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ============================================ */
@import url('./base/variables.css');
@import url('./base/reset.css');

/* ============================================
   2. LAYOUT Y ESTRUCTURA
   ============================================ */
@import url('./base/grid.css');

/* ============================================
   3. TIPOGRAFÍA
   ============================================ */
@import url('./base/typography.css');

/* ============================================
   4. ACCESIBILIDAD
   ============================================ */
@import url('./base/accessibility.css');

/* ============================================
   5. COMPONENTES
   ============================================ */
@import url('./componentes/botones-mejorados.css');
@import url('./componentes/imagenes-optimizadas.css');

/* ============================================
   6. OPTIMIZACIONES
   ============================================ */
@import url('./componentes/core-web-vitals-optimization.css');

/* ============================================
   7. PÁGINAS
   ============================================ */
@import url('./paginas/inicio.css');
/* @import url('./paginas/errores.css'); - Solo se carga en páginas de error (404, 500, 403) */

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

/* Contenedor principal */
.main-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.main-content {
  flex: 1;
  width: 100%;
  max-width: 100%;
}

main {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Container moderno con padding responsive */
.container {
  width: 100%;
  max-width: var(--container-xl, 1140px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4, 1rem);
  padding-right: var(--space-4, 1rem);
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .container {
    padding-left: var(--space-6, 1.5rem);
    padding-right: var(--space-6, 1.5rem);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-8, 2rem);
    padding-right: var(--space-8, 2rem);
  }
}

/* Pantallas grandes (PC/Desktop) - Aprovechar más ancho */
@media (min-width: 1280px) {
  .container {
    max-width: 1400px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1520px;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1720px;
  }
}

/* Secciones */
.section {
  padding: var(--spacing-3xl) 0;
}

.section-sm {
  padding: var(--spacing-xl) 0;
}

.section-lg {
  padding: var(--spacing-3xl) 0;
}

@media (min-width: 768px) {
  .section-lg {
    padding: calc(var(--spacing-3xl) * 1.5) 0;
  }
}

/* Espaciado */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

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

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }

/* Padding */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.pt-0 { padding-top: 0; }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }

.pb-0 { padding-bottom: 0; }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* Ancho */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }

.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 768px; }
.max-w-xl { max-width: 1024px; }
.max-w-2xl { max-width: 1280px; }
.max-w-full { max-width: 100%; }

/* Altura */
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }

.min-h-screen { min-height: 100vh; }

/* Visibilidad */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.hidden { display: none; }

/* 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; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* 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; }

/* Opacidad */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

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

/* User Select */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* Pointer Events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* Backgrounds */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-white { background-color: var(--color-white); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-900 { background-color: var(--color-gray-900); }

/* Borders */
.border { border: var(--border-width-thin) solid var(--color-border); }
.border-0 { border: 0; }
.border-t { border-top: var(--border-width-thin) solid var(--color-border); }
.border-b { border-bottom: var(--border-width-thin) solid var(--color-border); }
.border-l { border-left: var(--border-width-thin) solid var(--color-border); }
.border-r { border-right: var(--border-width-thin) solid var(--color-border); }

/* Border Radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-full); }

/* Shadows */
.shadow-none { box-shadow: none; }
.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); }

/* Transiciones */
.transition-none { transition: none; }
.transition-all { transition: var(--transition-all); }
.transition-colors { transition: var(--transition-colors); }
.transition-transform { transition: var(--transition-transform); }
.transition-opacity { transition: var(--transition-opacity); }

/* Transform */
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.scale-125 { transform: scale(1.25); }

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

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Hide/Show en diferentes breakpoints */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
  .show-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .no-print {
    display: none !important;
  }
  
  .page-break-before {
    page-break-before: always;
  }
  
  .page-break-after {
    page-break-after: always;
  }
  
  .page-break-inside-avoid {
    page-break-inside: avoid;
  }
}