/**
 * ============================================
 * RESET.CSS
 * ============================================
 * 
 * Archivo de reset y estilos base del proyecto.
 * Normaliza estilos entre navegadores y establece bases consistentes.
 * 
 * @author: [Tu nombre]
 * @version: 1.0.0
 * @fecha: Noviembre 2024
 * 
 * CONTENIDO:
 * 1. Reset básico
 * 2. Box-sizing universal
 * 3. Configuración HTML
 * 4. Estilos base de Body
 * 5. Tipografía base
 * 6. Links
 * 7. Listas
 * 8. Imágenes y media
 * 9. Formularios
 * 10. Accesibilidad
 * 
 * ============================================
 */

/* ==========================================
   1. RESET BÁSICO
   ========================================== 
   Elimina márgenes y padding por defecto
   de todos los elementos
*/
*, 
*::before, 
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* Incluye border y padding en el width */
}

/* ==========================================
   2. BOX-SIZING UNIVERSAL
   ========================================== 
   Asegura que border-box se aplique a todo
*/
html {
    box-sizing: border-box;
}

*, 
*:before, 
*:after {
    box-sizing: inherit;
}

/* ==========================================
   3. CONFIGURACIÓN HTML
   ========================================== 
   Establece el tamaño de fuente base y
   comportamiento de scroll
*/
html {
    font-size: 16px;                    /* 1rem = 16px */
    scroll-behavior: smooth;            /* Scroll suave al navegar */
    -webkit-font-smoothing: antialiased; /* Mejora renderizado en Mac */
    -moz-osx-font-smoothing: grayscale;  /* Mejora renderizado en Firefox Mac */
    text-rendering: optimizeLegibility;  /* Mejora legibilidad */
}

/* ==========================================
   4. ESTILOS BASE DE BODY
   ========================================== 
   Configuración principal del documento
*/
body {
    font-family: var(--font-primary);   /* Fuente principal (Inter) */
    font-size: var(--font-size-base);   /* Tamaño base 16px */
    font-weight: var(--font-weight-regular); /* Peso normal */
    line-height: var(--line-height-normal);  /* Interlineado 1.6 */
    color: var(--color-text-primary);   /* Color de texto principal */
    background-color: var(--color-white); /* Fondo blanco */
    overflow-x: hidden;                 /* Previene scroll horizontal */
    min-height: 100vh;                  /* Altura mínima de viewport */
}

/* ==========================================
   5. TIPOGRAFÍA BASE
   ========================================== 
   Estilos para headings y párrafos
*/

/* Headings (H1 - H6) */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);   /* Playfair Display */
    font-weight: var(--font-weight-bold); /* Peso bold */
    line-height: var(--line-height-tight); /* Interlineado ajustado */
    color: var(--color-text-primary);   /* Color principal */
    margin-bottom: var(--spacing-md);   /* Margen inferior */
}

/* Tamaños específicos de headings */
h1 { 
    font-size: var(--font-size-5xl);    /* 48px */
}

h2 { 
    font-size: var(--font-size-4xl);    /* 36px */
}

h3 { 
    font-size: var(--font-size-3xl);    /* 30px */
}

h4 { 
    font-size: var(--font-size-2xl);    /* 24px */
}

h5 { 
    font-size: var(--font-size-xl);     /* 20px */
}

h6 { 
    font-size: var(--font-size-lg);     /* 18px */
}

/* Párrafos */
p {
    margin-bottom: var(--spacing-sm);   /* Espacio entre párrafos */
    line-height: var(--line-height-relaxed); /* Interlineado cómodo */
}

/* Énfasis de texto */
strong, 
b {
    font-weight: var(--font-weight-bold);
}

em, 
i {
    font-style: italic;
}

small {
    font-size: var(--font-size-sm);
}

/* ==========================================
   6. LINKS
   ========================================== 
   Estilos base para enlaces
*/
a {
    color: var(--color-primary);        /* Color del branding */
    text-decoration: none;              /* Sin subrayado por defecto */
    transition: color var(--transition-fast); /* Transición suave */
}

a:hover,
a:focus {
    color: var(--color-primary-dark);   /* Color más oscuro al hover */
    text-decoration: underline;         /* Subrayado al hover */
}

/* Elimina el outline por defecto pero mantiene accesibilidad */
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================
   7. LISTAS
   ========================================== 
   Elimina estilos por defecto de listas
*/
ul, 
ol {
    list-style: none;                   /* Sin viñetas/números */
}

/* Para listas que SÍ necesitan estilos (en contenido) */
.content ul {
    list-style: disc;
    padding-left: var(--spacing-lg);
}

.content ol {
    list-style: decimal;
    padding-left: var(--spacing-lg);
}

/* ==========================================
   8. IMÁGENES Y MEDIA
   ========================================== 
   Comportamiento responsive de media
*/
img, 
picture, 
video, 
canvas, 
svg {
    display: block;                     /* Elimina espacio debajo */
    max-width: 100%;                    /* No excede contenedor */
    height: auto;                       /* Mantiene proporción */
}

/* SVG como iconos inline */
svg {
    fill: currentColor;                 /* Hereda color del texto */
}

/* ==========================================
   9. FORMULARIOS
   ========================================== 
   Normaliza estilos de formularios
*/

/* Inputs, textareas, selects */
input, 
textarea, 
select, 
button {
    font-family: inherit;               /* Hereda fuente del body */
    font-size: inherit;                 /* Hereda tamaño de fuente */
    line-height: inherit;               /* Hereda interlineado */
    color: inherit;                     /* Hereda color */
}

/* Botones */
button {
    background: none;                   /* Sin fondo por defecto */
    border: none;                       /* Sin borde por defecto */
    cursor: pointer;                    /* Cursor pointer */
    padding: 0;                         /* Sin padding */
}

/* Elimina estilos de iOS en inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Elimina flechas de number input */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* ==========================================
   10. ACCESIBILIDAD
   ========================================== 
   Mejoras de accesibilidad
*/

/* Skip link para navegación por teclado */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: var(--z-tooltip);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* Screen reader only - Esconde visualmente pero accesible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible para navegación por teclado */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Elimina outline solo cuando se usa mouse */
:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================
   11. UTILIDADES GENERALES
   ========================================== 
   Clases de utilidad básicas
*/

/* Contenedor responsive */
.container {
    width: 100%;
    max-width: var(--container-max-width); /* 1200px */
    margin: 0 auto;                     /* Centrado */
    padding: 0 var(--container-padding); /* Padding lateral */
}

/* Contenedor full-width */
.container-fluid {
    width: 100%;
    padding: 0 var(--container-padding);
}

/* Alineación de texto */
.text-center { 
    text-align: center; 
}

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

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

/* ==========================================
   12. PREFERS REDUCED MOTION
   ========================================== 
   Respeta preferencias de accesibilidad
*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   13. PRINT STYLES
   ========================================== 
   Optimización para impresión
*/
@media print {
    /* Oculta elementos innecesarios en impresión */
    header,
    footer,
    nav,
    .no-print {
        display: none !important;
    }
    
    /* Optimiza texto para impresión */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    /* Evita quiebres de página innecesarios */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    /* Muestra URLs de links */
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/**
 * ============================================
 * NOTAS IMPORTANTES
 * ============================================
 * 
 * 1. Este archivo debe cargarse ANTES que otros CSS
 * 2. No modifiques este archivo a menos que sea necesario
 * 3. Para estilos específicos, usa components.css o layout.css
 * 4. Las variables CSS están en variables.css
 * 
 * ORDEN DE CARGA RECOMENDADO:
 * 1. variables.css
 * 2. reset.css (este archivo)
 * 3. components.css
 * 4. layout.css
 * 5. responsive.css
 * 6. animations.css
 * 
 * ============================================
 */