/* ============================================= */
/* MAIN.CSS - ARCHIVO PRINCIPAL                */
/* ============================================= */
/* 
  Este es el archivo CSS principal que importa todos los módulos CSS 
  y define variables globales y utilidades para el proyecto.
*/

/* Importación de archivos CSS modulares */
@import url('./base.css');        /* Estilos base/reset */
@import url('./components.css');  /* Componentes reutilizables */
@import url('./header.css');      /* Estilos del encabezado */
@import url('./sections.css');    /* Estilos de secciones */
@import url('./footer.css');      /* Estilos del pie de página */
@import url('./responsive.css');  /* Media queries responsive */

/* Importación de fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');
/* 
  - Oswald: Fuente para títulos (weight 400, 500, 700)
  - Roboto: Fuente para texto normal (weight 300, 400, 500)
*/

/* ============================================= */
/* VARIABLES CSS GLOBALES                       */
/* ============================================= */
/* 
  Define variables CSS reutilizables en todo el proyecto 
  usando el selector :root para alcance global
*/
:root {
    /* Colores principales */
    --primary-color: #FACD00;      /* Amarillo principal de la marca */
    --secondary-color: #0033A0;    /* Azul oscuro complementario */
    --accent-color: #FFFFFF;       /* Color de acento (blanco) */
    --dark-color: #1A1A1A;         /* Color oscuro para texto */
    --light-color: #FFFFFF;        /* Color claro para fondos */
    
    /* Colores secundarios */
    --gray-light: #F5F5F5;         /* Gris muy claro para fondos */
    --gray-medium: #E0E0E0;        /* Gris medio para bordes */
    --gray-dark: #666666;          /* Gris oscuro para texto secundario */
    --gold-light: #FFE77A;         /* Amarillo claro para efectos */
    --gold-dark: #D4AF37;          /* Amarillo oscuro/dorado */
    
    /* Colores de estado */
    --success-color: #28a745;      /* Verde para operaciones exitosas */
    --warning-color: #ffc107;      /* Amarillo para advertencias */
    --error-color: #dc3545;        /* Rojo para errores */
    --info-color: #17a2b8;         /* Azul para información */
    
    /* Tipografía */
    --title-font: 'Oswald', sans-serif;  /* Fuente para títulos */
    --text-font: 'Roboto', sans-serif;   /* Fuente para texto normal */
    
    /* Tamaños de fuente */
    --font-xs: 0.75rem;    /* 12px - Texto muy pequeño */
    --font-sm: 0.875rem;   /* 14px - Texto pequeño */
    --font-base: 1rem;     /* 16px - Tamaño base */
    --font-lg: 1.125rem;   /* 18px - Texto grande */
    --font-xl: 1.25rem;    /* 20px - Texto extra grande */
    --font-2xl: 1.5rem;    /* 24px - Títulos pequeños */
    --font-3xl: 1.875rem;  /* 30px - Títulos medianos */
    --font-4xl: 2.25rem;   /* 36px - Títulos grandes */
    
    /* Espaciado */
    --space-xs: 0.25rem;   /* 4px - Espacio muy pequeño */
    --space-sm: 0.5rem;    /* 8px - Espacio pequeño */
    --space-base: 1rem;    /* 16px - Espacio base */
    --space-lg: 1rem;    /* 16px - Espacio base */
    --space-xl: 2rem;      /* 32px - Espacio extra grande */
    --space-2xl: 3rem;     /* 48px - Espacio xxl */
    --space-3xl: 4rem;     /* 64px - Espacio xxxl */
    --space-4xl: 5rem;     /* 80px - Espacio máximo */
    
    /* Efectos visuales */
    --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);  /* Sombra pequeña */
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);     /* Sombra normal */
    --box-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.12); /* Sombra media */
    --box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); /* Sombra grande */
    --box-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15); /* Sombra hover */
    
    /* Transiciones */
    --transition-fast: all 0.15s ease;  /* Transición rápida */
    --transition: all 0.3s ease;        /* Transición normal */
    --transition-slow: all 0.5s ease;   /* Transición lenta */
    
    /* Border radius */
    --radius-sm: 4px;    /* Radio pequeño */
    --radius: 8px;       /* Radio base */
    --radius-md: 12px;   /* Radio medio */
    --radius-lg: 16px;   /* Radio grande */
    --radius-xl: 24px;   /* Radio extra grande */
    --radius-full: 9999px; /* Radio circular (100%) */
    
    /* Anchos máximos */
    --max-width-xs: 20rem;    /* 320px - Contenedor muy pequeño */
    --max-width-sm: 24rem;    /* 384px - Contenedor pequeño */
    --max-width-md: 28rem;    /* 448px - Contenedor medio */
    --max-width-lg: 32rem;    /* 512px - Contenedor grande */
    --max-width-xl: 36rem;    /* 576px - Contenedor xl */
    --max-width-2xl: 42rem;   /* 672px - Contenedor xxl */
    --max-width-3xl: 48rem;   /* 768px - Contenedor xxxl */
    --max-width-4xl: 56rem;   /* 896px - Contenedor 4xl */
    --max-width-5xl: 64rem;   /* 1024px - Contenedor 5xl */
    --max-width-6xl: 72rem;   /* 1152px - Contenedor 6xl */
    --max-width-7xl: 80rem;   /* 1280px - Contenedor máximo */
    
    /* Layout específico del proyecto */
    --header-height: 80px;            /* Altura del header normal */
    --header-height-extended: 100px;  /* Altura del header con barra de búsqueda */
    --container-max-width: 1200px;    /* Ancho máximo del contenedor principal */
    --container-padding: 20px;        /* Padding lateral del contenedor */
    
    
    /* Z-index layers */
    --z-dropdown: 100;       /* Elementos desplegables */
    --z-sticky: 200;         /* Elementos sticky */
    --z-fixed: 300;          /* Elementos fixed */
    --z-modal-backdrop: 400; /* Fondo de modales */
    --z-modal: 500;          /* Modales */
    --z-popover: 600;        /* Popovers */
    --z-tooltip: 700;        /* Tooltips */
    --z-toast: 800;          /* Notificaciones toast */
}

/* ============================================= */
/* CONFIGURACIONES GLOBALES                    */
/* ============================================= */

/* Scroll suave para navegación por anclas */
html {
    scroll-behavior: smooth;           /* Transición suave al hacer scroll */
    scroll-padding-top: var(--header-height-extended); /* Compensa el header fijo */
}

/* Margen superior para secciones con anclas */
section {
    scroll-margin-top: var(--header-height-extended); /* Compensa el header fijo */
}

/* Espaciado principal para el contenido */
main {
    margin-top: var(--header-height-extended); /* Compensa el header fijo */
}

/* ============================================= */
/* UTILIDADES DE LAYOUT REUTILIZABLES          */
/* ============================================= */

/* Contenedor principal centrado */
.container {
    width: 100%;
    max-width: var(--container-max-width); /* Usa el ancho máximo definido */
    margin: 0 auto;                       /* Centrado horizontal */
    padding: 0 var(--container-padding);  /* Padding lateral */
}

/* Contenedores de ancho específico */
.container-sm { max-width: var(--max-width-3xl); } /* 768px */
.container-md { max-width: var(--max-width-4xl); } /* 896px */
.container-lg { max-width: var(--max-width-5xl); } /* 1024px */
.container-xl { max-width: var(--max-width-6xl); } /* 1152px */

/* Grid layouts reutilizables */
.grid {
    display: grid;
    gap: var(--space-lg); /* Espacio entre elementos */
}

/* Configuraciones de columnas para grid */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }  /* 1 columna */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }  /* 2 columnas */
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }  /* 3 columnas */
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }  /* 4 columnas */
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* Ajuste automático */
.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } /* Relleno automático */

/* Flex layouts reutilizables */
.flex { display: flex; }                     /* Contenedor flex */
.flex-col { flex-direction: column; }        /* Dirección columna */
.flex-wrap { flex-wrap: wrap; }              /* Wrap para elementos flex */
.items-center { align-items: center; }       /* Centrado vertical */
.items-start { align-items: flex-start; }    /* Alineación al inicio */
.items-end { align-items: flex-end; }        /* Alineación al final */
.justify-center { justify-content: center; } /* Centrado horizontal */
.justify-between { justify-content: space-between; } /* Espacio entre elementos */
.justify-around { justify-content: space-around; }   /* Espacio alrededor */
.justify-start { justify-content: flex-start; }      /* Alineación al inicio */
.justify-end { justify-content: flex-end; }          /* Alineación al final */

/* Utilidades de espaciado (gap) */
.gap-xs { gap: var(--space-xs); }  /* 4px */
.gap-sm { gap: var(--space-sm); }  /* 8px */
.gap-base { gap: var(--space-base); } /* 16px */
.gap-lg { gap: var(--space-lg); }  /* 24px */
.gap-xl { gap: var(--space-xl); }  /* 32px */
.gap-2xl { gap: var(--space-2xl); } /* 48px */

/* Utilidades de padding */
.p-0 { padding: 0; }              /* Sin padding */
.p-sm { padding: var(--space-sm); } /* 8px */
.p-base { padding: var(--space-base); } /* 16px */
.p-lg { padding: var(--space-lg); } /* 24px */
.p-xl { padding: var(--space-xl); } /* 32px */
.p-2xl { padding: var(--space-2xl); } /* 48px */

/* Utilidades de margin */
.m-0 { margin: 0; }               /* Sin margin */
.m-auto { margin: auto; }         /* Margin automático (centrado) */
.mt-base { margin-top: var(--space-base); } /* Margin top 16px */
.mt-lg { margin-top: var(--space-lg); }     /* Margin top 24px */
.mt-xl { margin-top: var(--space-xl); }     /* Margin top 32px */
.mb-base { margin-bottom: var(--space-base); } /* Margin bottom 16px */
.mb-lg { margin-bottom: var(--space-lg); }     /* Margin bottom 24px */
.mb-xl { margin-bottom: var(--space-xl); }     /* Margin bottom 32px */

/* Alineación de texto */
.text-left { text-align: left; }    /* Alinear texto a la izquierda */
.text-center { text-align: center; } /* Centrar texto */
.text-right { text-align: right; }  /* Alinear texto a la derecha */

/* Utilidades de display */
.block { display: block; }         /* Display block */
.inline-block { display: inline-block; } /* Display inline-block */
.hidden { display: none; }         /* Ocultar elemento */

/* Utilidades de overflow */
.overflow-hidden { overflow: hidden; }       /* Ocultar overflow */
.overflow-x-hidden { overflow-x: hidden; }   /* Ocultar overflow horizontal */
.overflow-y-auto { overflow-y: auto; }       /* Scroll vertical automático */

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

/* Utilidades de ancho y alto */
.w-full { width: 100%; }         /* Ancho completo */
.h-full { height: 100%; }        /* Alto completo */
.min-h-screen { min-height: 100vh; } /* Altura mínima de la pantalla */

/* ============================================= */
/* CONFIGURACIÓN PARA PÁGINAS ESPECÍFICAS      */
/* ============================================= */

/* Estilos para páginas con header simple (sin barra de búsqueda) */
body.simple-header main {
    margin-top: var(--header-height); /* Margen superior reducido */
}

body.simple-header section {
    scroll-margin-top: var(--header-height); /* Compensación del header simple */
}

body.simple-header html {
    scroll-padding-top: var(--header-height); /* Compensación del header simple */
}

/* Clase para headers simples */
.main-header.simple {
    height: var(--header-height); /* Altura reducida del header */
}

/* ============================================= */
/* PRINT STYLES                                 */
/* ============================================= */
/* Estilos específicos para impresión */

@media print {
    /* Reset de efectos visuales */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    /* Ocultar elementos no relevantes para impresión */
    .main-header,
    .main-footer,
    .mobile-menu-btn,
    .search-section,
    .category-tabs {
        display: none !important;
    }
    
    /* Reset del margen superior */
    main {
        margin-top: 0 !important;
    }
    
    /* Estilos base para impresión */
    body {
        font-size: 12pt;       /* Tamaño de fuente estándar para impresión */
        line-height: 1.4;       /* Espaciado de línea legible */
    }
}