/*
 * ==========================================
 * 🎨 BAZAR ONLINE - MANUAL DE ESTILOS CSS
 * ==========================================
 * 
 * 📚 GUÍA COMPLETA DE APRENDIZAJE CSS
 * 
 * Este archivo CSS controla TODA la apariencia visual de la aplicación.
 * Aquí aprenderás desde conceptos básicos hasta técnicas avanzadas de diseño web.
 * 
 * 🎯 QUE VAS A APRENDER:
 * - Reset CSS y normalización de estilos
 * - Tipografía y espaciado profesional
 * - Layouts responsive con Flexbox y Grid
 * - Efectos visuales con gradientes y sombras
 * - Animaciones y transiciones suaves
 * - Diseño de componentes reutilizables
 * - Buenas prácticas de CSS moderno
 * 
 * 🔗 CONEXIÓN CON HTML:
 * - Selectores de clase (.ejemplo) para grupos de elementos
 * - Selectores de ID (#ejemplo) para elementos únicos
 * - Selectores de etiqueta (div, p, h1) para elementos HTML
 * - Combinadores para relaciones entre elementos
 * 
 * 📖 CÓMO LEER ESTE CÓDIGO:
 * 1. Cada sección tiene un propósito específico explicado
 * 2. Los selectores están documentados con su función
 * 3. Las propiedades importantes tienen explicaciones detalladas
 * 4. Se incluyen ejemplos de uso y mejores prácticas
 * 5. Los valores están justificados con su propósito visual
 */

/* ==========================================
   🌍 ESTILOS GLOBALES Y RESET CSS
   
   📍 PROPÓSITO:
   Esta sección establece las bases visuales de toda la aplicación.
   El "reset" elimina inconsistencias entre navegadores.
   
   💡 CONCEPTO CLAVE - RESET CSS:
   Los navegadores tienen estilos por defecto diferentes.
   Un reset CSS los normaliza para que la página se vea igual en todos lados.
========================================== */

* {
    /* 
    🌟 SELECTOR UNIVERSAL (*):
    
    📍 QUE HACE: Selecciona TODOS los elementos HTML de la página
    📍 CUÁNDO USARLO: Solo para resets globales como este
    ⚠️ CUIDADO: Es potente pero puede afectar el rendimiento si se abusa
    
    💡 ANALOGÍA: Es como establecer una "regla general" para toda la casa
    antes de decorar habitaciones específicas.
    */
    
    margin: 0;
    /*
    📏 MARGIN: 0
    - Elimina el margen exterior automático de TODOS los elementos
    - Los navegadores ponen márgenes por defecto que varían
    - margin: 0 = sin espacio exterior alrededor del elemento
    */
    
    padding: 0;
    /*
    📏 PADDING: 0
    - Elimina el relleno interno automático de TODOS los elementos  
    - padding: 0 = sin espacio interior dentro del elemento
    - Diferencia: margin es espacio exterior, padding es espacio interior
    */
    
    box-sizing: border-box;
    /*
    📦 BOX-SIZING: BORDER-BOX - ¡PROPIEDAD CRUCIAL!
    
    🎯 PROBLEMA QUE RESUELVE:
    Por defecto, si tienes un div de 300px de ancho y le agregás 20px de padding,
    el ancho total se convierte en 340px (300 + 20 + 20).
    
    ✅ SOLUCIÓN CON BORDER-BOX:
    Con border-box, el padding y border se incluyen DENTRO del ancho especificado.
    Un div de 300px sigue siendo 300px, sin importar el padding.
    
    💡 ANALOGÍA: Es como una caja que siempre mantiene su tamaño exterior,
    pero el espacio interior se ajusta según el "acolchado" que le agregues.
    
    📝 EJEMPLO PRÁCTICO:
    .caja {
        width: 100px;
        padding: 10px;
        border: 2px solid black;
        box-sizing: border-box;  ← La caja sigue midiendo 100px total
    }
    Sin border-box sería: 100px + 20px padding + 4px border = 124px total
    */
}

body {
    /*
    🏗️ ELEMENTO BODY:
    
    📍 QUE CONTROLA: Todo el contenido visible de la página
    📍 IMPORTANCIA: Define la apariencia base que heredan otros elementos
    
    💡 CONCEPTO DE HERENCIA:
    Las propiedades del body se "heredan" a elementos hijos,
    especialmente tipografía y colores.
    */
    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*
    ✍️ FAMILIA DE FUENTES - STACK DE FUENTES:
    
    🎯 COMO FUNCIONA:
    El navegador intenta usar las fuentes en orden de izquierda a derecha.
    Si no encuentra la primera, prueba la segunda, y así sucesivamente.
    
    📋 ANÁLISIS DE CADA FUENTE:
    1. 'Segoe UI': Fuente moderna de Microsoft (Windows 7+)
    2. Tahoma: Fuente alternativa de Microsoft (Windows más antiguos)
    3. Geneva: Fuente equivalente en macOS
    4. Verdana: Fuente web-safe universal
    5. sans-serif: Familia genérica (fuente sin serifa del sistema)
    
    💡 CONCEPTO - FUENTES WEB-SAFE:
    Son fuentes que están disponibles en la mayoría de sistemas operativos.
    Garantizan que el texto se vea bien aunque no se pueda cargar la fuente ideal.
    
    ✨ RESULTADO VISUAL:
    Texto limpio, moderno y legible en cualquier dispositivo.
    */
    
    line-height: 1.6;
    /*
    📏 ALTURA DE LÍNEA:
    
    📍 QUE SIGNIFICA: Espacio vertical entre líneas de texto
    📍 VALOR 1.6: 160% del tamaño de fuente actual
    
    💡 EJEMPLO PRÁCTICO:
    Si el texto es de 16px, line-height: 1.6 = 25.6px de altura total por línea.
    Esto deja ~10px de espacio extra entre líneas para mejor legibilidad.
    
    📚 BUENAS PRÁCTICAS:
    - 1.4-1.6: Ideal para cuerpo de texto
    - 1.2-1.3: Para títulos grandes  
    - 1.6-1.8: Para textos largos (artículos, blogs)
    
    ✨ RESULTADO VISUAL:
    Texto más fácil de leer, especialmente en párrafos largos.
    */
    
    color: #333;
    /*
    🎨 COLOR DE TEXTO:
    
    📍 VALOR #333: Gris muy oscuro (casi negro)
    📍 POR QUE NO NEGRO PURO (#000): El negro puro puede ser muy agresivo
    
    💡 PSICOLOGÍA DEL COLOR:
    #333 es más suave para los ojos que #000, especialmente en pantallas.
    Mejora la experiencia de lectura sin perder contraste.
    
    🔍 CÓDIGO HEXADECIMAL:
    #333 = #333333 (versión corta)
    3 = 51 en decimal, así que es RGB(51, 51, 51)
    */
    
    background: linear-gradient(135deg, #ea66aa 0%, #764ba2 100%);
    /*
    🌈 FONDO DEGRADADO - ¡TÉCNICA AVANZADA!
    
    🎨 ANATOMÍA DEL GRADIENTE:
    - linear-gradient: Tipo de degradado (lineal vs radial)
    - 135deg: Ángulo de dirección (135° = diagonal desde arriba-izquierda)
    - #ea66aa 0%: Color inicial (rosa) en posición 0%
    - #764ba2 100%: Color final (púrpura) en posición 100%
    
    📐 ÁNGULOS DE GRADIENTE:
    - 0deg = de abajo hacia arriba
    - 90deg = de izquierda a derecha  
    - 180deg = de arriba hacia abajo
    - 270deg = de derecha a izquierda
    - 135deg = diagonal perfecta ↗
    
    🎯 PALETA DE COLORES:
    #ea66aa = Rosa vibrante (color primario de marca)
    #764ba2 = Púrpura elegante (color secundario)
    
    ✨ RESULTADO VISUAL:
    Fondo atractivo y moderno que da personalidad a la aplicación
    sin interferir con la legibilidad del contenido.
    */
    
    min-height: 100vh;
    /*
    📏 ALTURA MÍNIMA DE VIEWPORT:
    
    📍 QUE SIGNIFICA:
    - 100vh = 100% de la altura de la ventana del navegador
    - min-height = altura mínima (puede crecer si el contenido es más alto)
    
    🎯 PROBLEMA QUE RESUELVE:
    Sin esto, si el contenido es poco, la página sería más corta que la ventana
    y el fondo degradado no cubriría toda la pantalla.
    
    ✅ RESULTADO:
    El fondo siempre cubre toda la ventana, sin importar la cantidad de contenido.
    Si hay mucho contenido, la página crece normalmente.
    
    💡 UNIDAD VH (Viewport Height):
    1vh = 1% de la altura de la ventana del navegador
    100vh = altura completa de la ventana
    Es responsive: cambia automáticamente si el usuario redimensiona la ventana.
    */
}

.container {
    /*
    📦 CONTENEDOR PRINCIPAL - ¡PATRÓN FUNDAMENTAL!
    
    📍 USO: Se aplica a div con class="container" en el HTML
    🎯 PROPÓSITO: Centrar y limitar el ancho del contenido principal
    
    💡 PATRÓN DE DISEÑO:
    Este es uno de los patrones más comunes en diseño web moderno.
    Casi todas las páginas profesionales usan alguna variación de este contenedor.
    */
    
    max-width: 1200px;
    /*
    📏 ANCHO MÁXIMO:
    
    📍 POR QUE 1200px:
    - Óptimo para lectura (líneas de texto no demasiado largas)
    - Funciona bien en pantallas modernas (1366px+)
    - Deja espacio para navegadores con barras laterales
    
    🎯 COMPORTAMIENTO:
    - En pantallas grandes (>1200px): El contenido mide exactamente 1200px
    - En pantallas pequeñas (<1200px): El contenido usa todo el ancho disponible
    
    💡 RESPONSIVE POR DISEÑO:
    Esta simple regla hace que el diseño sea automáticamente responsive.
    */
    
    margin: 0 auto;
    /*
    🎯 CENTRADO AUTOMÁTICO - ¡TÉCNICA CLÁSICA!
    
    📍 COMO FUNCIONA:
    - margin: 0 auto = margen superior/inferior: 0, izquierdo/derecho: automático
    - El navegador distribuye el espacio horizontal sobrante igualmente a ambos lados
    
    💡 REQUISITO PARA QUE FUNCIONE:
    El elemento debe tener un ancho específico (width o max-width).
    Sin ancho definido, auto no sabe cuánto espacio distribuir.
    
    ✨ RESULTADO VISUAL:
    El contenido siempre aparece centrado horizontalmente en la página.
    */
    
    padding: 0 20px;
    /*
    📱 ESPACIADO LATERAL RESPONSIVE:
    
    📍 SINTAXIS: padding: [arriba/abajo] [izquierda/derecha]
    📍 VALORES: 0 = sin padding vertical, 20px = padding horizontal
    
    🎯 PROPÓSITO:
    Evita que el contenido toque los bordes de la pantalla en dispositivos móviles.
    En pantallas grandes no es necesario (el contenido ya está centrado),
    pero en móviles este padding es crucial para legibilidad.
    
    💡 DISEÑO MOBILE-FIRST:
    Siempre considera cómo se ve tu diseño en pantallas pequeñas.
    Estos 20px de padding pueden ser la diferencia entre una página
    profesional y una que se ve amateur.
    */
}

/* ==========================================
   🔧 CLASES UTILITARIAS
   
   📍 PROPÓSITO:
   Clases auxiliares que resuelven problemas específicos comunes.
   Se pueden aplicar a cualquier elemento HTML para cambios rápidos.
   
   💡 FILOSOFÍA DE UTILIDADES:
   En lugar de crear estilos únicos para cada situación,
   estas clases reutilizables solucionan problemas frecuentes.
   
   🎯 VENTAJAS:
   - Reutilización máxima
   - Menos código repetitivo
   - Cambios rápidos sin crear nuevas clases
   - Mantenimiento más fácil
========================================== */

.hidden {
    /*
    👻 CLASE PARA OCULTAR ELEMENTOS:
    
    📍 USO COMÚN: JavaScript agrega/quita esta clase para mostrar/ocultar elementos
    
    🔧 PROPIEDADES TÉCNICAS:
    - display: none = El elemento desaparece completamente
    - !important = Sobrescribe cualquier otro estilo de display
    
    💡 DIFERENCIAS DE OCULTACIÓN:
    - display: none = Elemento no existe visualmente ni ocupa espacio
    - visibility: hidden = Elemento invisible pero sigue ocupando espacio
    - opacity: 0 = Elemento transparente pero sigue ocupando espacio
    
    🎯 CUÁNDO USAR CADA UNA:
    - display: none → Para mostrar/ocultar secciones completas
    - visibility: hidden → Para mantener el layout pero ocultar temporalmente
    - opacity: 0 → Para efectos de transición/animación
    
    📝 EJEMPLO DE USO EN HTML:
    <div class="auth-section hidden">  ← Sección oculta inicialmente
    JavaScript: elemento.classList.remove('hidden') → Mostrar
    JavaScript: elemento.classList.add('hidden') → Ocultar
    */
    display: none !important;
}

.loading {
    /*
    ⏳ INDICADOR DE CARGA:
    
    📍 APLICACIÓN: Elementos que muestran "Cargando..." mientras se obtienen datos
    🔗 CONEXIÓN HTML: <div class="loading">⏳ Cargando productos...</div>
    
    💡 DISEÑO DE ESTADOS DE CARGA:
    Una buena UX (experiencia de usuario) siempre informa al usuario
    cuando algo está sucediendo en segundo plano.
    */
    
    text-align: center;
    /*
    📝 CENTRADO DE TEXTO:
    - center = Alinea el texto al centro horizontalmente
    - También centra elementos inline como imágenes o íconos
    */
    
    padding: 20px;
    /*
    📦 ESPACIADO INTERIOR:
    - 20px en los 4 lados (arriba, derecha, abajo, izquierda)
    - Da "aire" al contenido para que no se sienta apretado
    */
    
    color: #666;
    /*
    🎨 COLOR GRIS MEDIO:
    - #666 = Gris neutro que indica "información secundaria"
    - No tan importante como el contenido principal (#333)
    - Pero más visible que texto deshabilitado (#999)
    */
    
    font-style: italic;
    /*
    ✍️ TEXTO EN CURSIVA:
    - italic = Inclina el texto hacia la derecha
    - Estilo visual que sugiere "temporal" o "en proceso"
    - Diferencia visualmente el estado de carga del contenido real
    */
}

.error-message {
    /*
    🚨 MENSAJES DE ERROR - ¡COMPONENTE CRÍTICO!
    
    📍 PROPÓSITO: Mostrar errores de forma clara y no amenazante
    🔗 USO: <div class="error-message">❌ No se pudo conectar</div>
    
    🎨 PSICOLOGÍA DEL DISEÑO:
    Los errores deben ser visibles pero no agresivos.
    Un buen mensaje de error informa sin asustar al usuario.
    */
    
    background: #ffe6e6;
    /*
    🎨 FONDO ROSA CLARO:
    - Color muy suave que sugiere "precaución" sin ser alarmante
    - #ffe6e6 = Rosa muy pálido (casi blanco con tinte rosa)
    - Contrasta con el texto rojo pero es suave para los ojos
    */
    
    color: #c53030;
    /*
    🎨 TEXTO ROJO OSCURO:
    - #c53030 = Rojo profesional (no demasiado brillante)
    - Contraste suficiente con el fondo para buena legibilidad
    - Transmite "error" sin ser agresivo visualmente
    */
    
    padding: 15px;
    /*
    📦 ESPACIADO GENEROSO:
    - 15px en todos los lados
    - Hace que el mensaje respire y sea más fácil de leer
    */
    
    border-radius: 8px;
    /*
    🔄 BORDES REDONDEADOS:
    - 8px = Redondez suave y moderna
    - Los bordes redondeados son más amigables que los cuadrados
    - Parte del diseño "Material Design" y estilos modernos
    */
    
    border-left: 4px solid #c53030;
    /*
    📏 BORDE LATERAL DE ACENTO - ¡TÉCNICA DE DISEÑO PROFESIONAL!
    
    🎯 ELEMENTO VISUAL CLAVE:
    - border-left = Solo borde en el lado izquierdo
    - 4px = Grosor suficiente para ser visible sin dominar
    - solid = Línea continua (no punteada o discontinua)
    - Mismo color que el texto (#c53030)
    
    ✨ RESULTADO VISUAL:
    Una línea vertical roja que actúa como "bandera" de error.
    Es un patrón de diseño muy usado en interfaces modernas.
    
    💡 VARIACIONES COMUNES:
    - border-left rojo = Error
    - border-left verde = Éxito  
    - border-left azul = Información
    - border-left naranja = Advertencia
    */
    
    margin: 20px 0;
    /*
    📏 ESPACIADO EXTERIOR:
    - 20px arriba y abajo
    - 0 a los lados (no necesario, ya está dentro de un contenedor)
    - Separa el mensaje de error del contenido circundante
    */
}

/* ==========================================
   🔘 SISTEMA DE BOTONES
   
   📍 FILOSOFÍA DE DISEÑO:
   Los botones son los elementos más importantes de interacción.
   Deben ser atractivos, accesibles y comunicar claramente su función.
   
   🎯 JERARQUÍA VISUAL:
   - .btn = Estilos base compartidos por todos los botones
   - .btn-primary = Botón principal (acción más importante)
   - .btn-success = Botón de éxito (confirmar, completar)
   - .btn-danger = Botón de peligro (eliminar, cancelar)
   - .btn-secondary = Botón secundario (acciones menos importantes)
   
   💡 PRINCIPIO DE CONSISTENCIA:
   Todos los botones comparten el mismo tamaño, espaciado y comportamiento,
   solo cambian los colores según su función.
========================================== */

.btn {
    /*
    🔘 ESTILOS BASE DE BOTONES - ¡CLASE FUNDAMENTAL!
    
    📍 USO: Clase base que se combina con otras (.btn.btn-primary)
    🎯 PROPÓSITO: Definir el comportamiento visual común de todos los botones
    */
    
    display: inline-block;
    /*
    📦 DISPLAY INLINE-BLOCK - ¡CONCEPTO IMPORTANTE!
    
    📍 QUE SIGNIFICA:
    - inline = Se comporta como texto (puede estar en línea con otros elementos)
    - block = Puede tener width, height, margin, padding como elementos de bloque
    
    🎯 VENTAJAS PARA BOTONES:
    - Pueden estar uno al lado del otro naturalmente
    - Pueden tener padding y margin controlado
    - Respetan el text-align de su contenedor padre
    
    💡 DIFERENCIAS:
    - block = Ocupa todo el ancho, uno debajo del otro
    - inline = Solo el ancho del contenido, sin control de dimensiones
    - inline-block = Lo mejor de ambos mundos
    */
    
    padding: 10px 20px;
    /*
    📦 ESPACIADO INTERIOR DEL BOTÓN:
    - 10px arriba/abajo = Altura cómoda para hacer click
    - 20px izquierda/derecha = Espacio para el texto sin apretarse
    
    🖱️ ACCESIBILIDAD:
    Un botón debe ser lo suficientemente grande para hacer click fácilmente,
    especialmente en dispositivos táctiles (mínimo 44px según Apple).
    */
    
    border: none;
    /*
    🚫 SIN BORDE:
    - Elimina el borde por defecto de los elementos <button>
    - Los navegadores ponen bordes 3D feos por defecto
    - Permite control total del diseño visual
    */
    
    border-radius: 5px;
    /*
    🔄 BORDES REDONDEADOS SUTILES:
    - 5px = Redondez suave pero no excesiva
    - Los botones redondeados se sienten más modernos y amigables
    - Valor moderado: no demasiado redondeado ni demasiado cuadrado
    */
    
    font-size: 14px;
    /*
    📝 TAMAÑO DE FUENTE:
    - 14px = Tamaño legible sin ser demasiado grande
    - Estándar para botones en interfaces web
    - Proporcional al resto del texto de la aplicación
    */
    
    font-weight: 500;
    /*
    💪 PESO DE FUENTE MEDIO:
    
    📊 ESCALA DE PESOS:
    - 100-300 = Delgado (thin, light)
    - 400 = Normal (regular)
    - 500 = Medio (medium) ← Nuestro botón
    - 600-700 = Negrita (semibold, bold)
    - 800-900 = Extra negrita (extrabold, black)
    
    🎯 POR QUE 500:
    - Más destacado que texto normal (400)
    - No tan pesado como negrita completa (700)
    - Perfecto equilibrio para botones legibles y atractivos
    */
    
    text-decoration: none;
    /*
    📝 SIN DECORACIÓN DE TEXTO:
    - Elimina subrayados si el botón es un elemento <a>
    - Los enlaces por defecto tienen text-decoration: underline
    - Los botones no deben tener subrayado
    */
    
    cursor: pointer;
    /*
    🖱️ CURSOR DE PUNTERO:
    - Cambia el cursor a una "manita" al pasar sobre el botón
    - Indica visualmente que el elemento es clickeable
    - Mejora la experiencia de usuario (UX)
    
    💡 CURSORES COMUNES:
    - default = Flecha normal
    - pointer = Mano (elementos clickeables)
    - text = Línea vertical (campos de texto)
    - not-allowed = Prohibido (elementos deshabilitados)
    */
    
    transition: all 0.3s ease;
    /*
    ✨ TRANSICIÓN SUAVE - ¡ANIMACIÓN SUTIL!
    
    📍 ANATOMÍA DE LA TRANSICIÓN:
    - all = Anima TODAS las propiedades que cambien
    - 0.3s = Duración de 0.3 segundos
    - ease = Función de temporización (inicia lento, acelera, termina lento)
    
    🎯 QUE ANIMA:
    Cuando el botón cambie (hover, focus), todas las propiedades
    (color, background, transform, etc.) cambiarán gradualmente
    en lugar de inmediatamente.
    
    💡 FUNCIONES DE TEMPORIZACIÓN:
    - linear = Velocidad constante
    - ease = Aceleración natural (más popular)
    - ease-in = Inicia lento
    - ease-out = Termina lento
    - ease-in-out = Inicia y termina lento
    
    ✨ RESULTADO:
    Botones que responden de forma elegante y profesional.
    */
    
    margin: 5px;
    /*
    📏 ESPACIADO EXTERIOR:
    - 5px en todos los lados
    - Evita que los botones se peguen entre sí
    - Permite que múltiples botones respiren cuando están juntos
    */
}

.btn-primary {
    /*
    🔵 BOTÓN PRINCIPAL - ACCIÓN MÁS IMPORTANTE:
    
    📍 CUÁNDO USAR:
    - Botón más importante de un formulario o sección
    - Acción principal que queremos que el usuario tome
    - Solo debería haber uno por pantalla/sección
    
    🎨 COLOR AZUL = CONFIANZA Y ACCIÓN:
    El azul es universalmente asociado con confianza, seguridad
    y profesionalismo. Perfecto para acciones principales.
    */
    
    background: #4299e1;
    /*
    🎨 FONDO AZUL MODERNO:
    - #4299e1 = Azul vibrante pero profesional
    - No demasiado brillante ni demasiado oscuro
    - Inspirado en paletas de Material Design y Bootstrap
    */
    
    color: white;
    /*
    ⚪ TEXTO BLANCO:
    - Contraste máximo con el fondo azul
    - Garantiza legibilidad perfecta
    - Estándar en botones de color sólido
    */
}

.btn-primary:hover {
    /*
    🖱️ ESTADO HOVER - INTERACCIÓN VISUAL:
    
    📍 QUE ES HOVER:
    Se activa cuando el usuario pasa el ratón sobre el botón.
    Es feedback visual inmediato que mejora la experiencia.
    
    🎯 OBJETIVO:
    Confirmar al usuario que el botón es interactivo y
    darle una vista previa del efecto de hacer click.
    */
    
    background: #3182ce;
    /*
    🎨 AZUL MÁS OSCURO:
    - #3182ce = Versión más oscura del azul principal
    - Regla UX: En hover, los colores se oscurecen ligeramente
    - Crea sensación de "profundidad" como si se presionara
    */
    
    transform: translateY(-1px);
    /*
    ✨ EFECTO DE ELEVACIÓN - ¡MICRO-INTERACCIÓN!
    
    🎯 ANATOMÍA DEL TRANSFORM:
    - translateY = Mover en eje Y (vertical)
    - -1px = Hacia arriba (valores negativos suben)
    - Simula que el botón "flota" ligeramente
    
    💡 EFECTO PSICOLÓGICO:
    El cerebro interpreta este movimiento como si el botón
    estuviera elevándose, sugiriendo que es interactivo
    y está "respondiendo" a nuestra presencia.
    
    🎨 MICRO-INTERACCIONES:
    Pequeños detalles que hacen que la interfaz se sienta viva
    y responsive. Son la diferencia entre una web básica y profesional.
    */
}

.btn-secondary {
    /*
    ⚪ BOTÓN SECUNDARIO - ACCIONES MENOS IMPORTANTES:
    
    📍 CUÁNDO USAR:
    - "Cancelar" junto a un botón principal
    - Acciones opcionales o menos frecuentes  
    - Navegación secundaria
    
    🎨 GRIS = NEUTRO, SECUNDARIO:
    No compite visualmente con los botones principales.
    Está ahí cuando se necesita, pero no llama la atención.
    */
    
    background: #718096;
    /*
    ⚪ FONDO GRIS MEDIO:
    - #718096 = Gris que mantiene suficiente contraste
    - No tan suave que se pierda, no tan fuerte que domine
    - Balance perfecto para acciones secundarias
    */
    
    color: white;
    /*
    ⚪ TEXTO BLANCO:
    Contrasta bien con el fondo gris medio
    */
}

.btn-secondary:hover {
    /*
    🖱️ HOVER DEL BOTÓN SECUNDARIO:
    Feedback visual sutil para acciones menos importantes
    */
    
    background: #4a5568;
    /*
    🎨 GRIS MÁS OSCURO:
    Siguiendo el patrón de oscurecimiento en hover
    */
}

.btn-success {
    /*
    ✅ BOTÓN DE ÉXITO - ACCIONES POSITIVAS:
    
    📍 CUÁNDO USAR:
    - "Guardar", "Confirmar", "Enviar"
    - Completar procesos exitosamente
    - Acciones que el usuario debe sentir seguras
    
    🎨 VERDE = ÉXITO, NATURALEZA, POSITIVO:
    El verde universalmente representa éxito, crecimiento
    y acciones seguras. Perfecto para confirmaciones.
    */
    
    background: #48bb78;
    /*
    💚 VERDE MODERNO Y VIBRANTE:
    - #48bb78 = Verde que no es ni muy brillante ni muy apagado
    - Inspirado en interfaces de apps exitosas como WhatsApp
    - Balance perfecto entre visibilidad y elegancia
    */
    
    color: white;
    /*
    ⚪ TEXTO BLANCO:
    Mismo principio que btn-primary: máximo contraste
    */
}

.btn-success:hover {
    /*
    🖱️ HOVER DEL BOTÓN VERDE:
    Mismo principio de interacción que el botón principal
    */
    
    background: #38a169;
    /*
    🎨 VERDE MÁS OSCURO:
    Versión más saturada del verde base para el efecto hover
    */
}

.btn-danger {
    /*
    🚨 BOTÓN PELIGROSO - ACCIONES DESTRUCTIVAS:
    
    📍 CUÁNDO USAR:
    - "Eliminar", "Borrar", "Cancelar"
    - Acciones que no se pueden deshacer
    - Advertir al usuario sobre consecuencias
    
    🎨 ROJO = PELIGRO, STOP, ATENCIÓN:
    Color universalmente asociado con precaución y stop.
    El usuario instintivamente será más cuidadoso.
    
    ⚠️ PRINCIPIO DE DISEÑO:
    Los botones peligrosos deben ser visibles pero no dominantes.
    No queremos que el usuario los presione por accidente.
    */
    
    background: #f56565;
    /*
    🔴 ROJO LLAMATIVO PERO PROFESIONAL:
    - #f56565 = Rojo que transmite urgencia sin ser agresivo
    - Suficientemente visible para acciones importantes
    - No tan intenso como para ser molesto
    */
    
    color: white;
    /*
    ⚪ TEXTO BLANCO:
    Consistencia con el resto del sistema de botones
    */
}

.btn-danger:hover {
    /*
    🖱️ HOVER DEL BOTÓN PELIGROSO:
    El rojo se intensifica para reforzar la sensación de precaución
    */
    
    background: #e53e3e;
    /*
    🎨 ROJO MÁS INTENSO:
    En hover se vuelve más oscuro, reforzando la sensación de peligro
    */
}

.btn-small {
    /*
    🔘 BOTÓN PEQUEÑO - VARIANTE DE TAMAÑO:
    
    📍 CUÁNDO USAR:
    - Espacios reducidos
    - Acciones menores o de edición
    - Interfaces compactas o tablas
    
    ⚖️ PRINCIPIO DE PROPORCIÓN:
    Mantiene el estilo visual pero reduce las dimensiones
    para contextos que requieren más sutileza.
    */
    
    padding: 5px 10px;
    /*
    📦 PADDING REDUCIDO:
    - 5px arriba/abajo (vs 10px del botón normal)
    - 10px izquierda/derecha (vs 20px del botón normal)
    - Mantiene proporción pero ocupa menos espacio
    */
    
    font-size: 12px;
    /*
    📝 TEXTO MÁS PEQUEÑO:
    - 12px vs 14px del botón normal
    - Proporcional al padding reducido
    - Mantiene legibilidad en tamaño compacto
    */
}

.btn-warning {
    /*
    ⚠️ BOTÓN DE ADVERTENCIA - PRECAUCIÓN MEDIA:
    
    📍 CUÁNDO USAR:
    - Acciones que requieren atención pero no son peligrosas
    - "Revisar", "Verificar", "Pendiente"
    - Estados que necesitan acción del usuario
    
    🎨 NARANJA = PRECAUCIÓN, ATENCIÓN:
    Color que está entre el verde (seguro) y el rojo (peligro).
    Llama la atención sin alarmar.
    */
    
    background: #f6ad55;
    /*
    🟡 NARANJA CÁLIDO:
    - #f6ad55 = Naranja que no es ni muy brillante ni muy apagado
    - Color que sugiere "revisar esto" sin urgencia extrema
    - Inspirado en señales de tráfico y alertas de sistemas
    */
    
    color: white;
    /*
    ⚪ TEXTO BLANCO:
    Contraste adecuado con el fondo naranja
    */
}

.btn-warning:hover {
    /*
    🖱️ HOVER DEL BOTÓN DE ADVERTENCIA:
    Se intensifica el color para confirmar la interactividad
    */
    
    background: #ed8936;
    /*
    🎨 NARANJA MÁS OSCURO:
    Siguiendo el patrón de oscurecimiento en hover
    */
    
    transform: translateY(-1px);
    /*
    ✨ ELEVACIÓN CONSISTENTE:
    Todos los botones comparten el mismo comportamiento
    */
    
    box-shadow: 0 4px 8px rgba(237, 137, 54, 0.3);
    /*
    ✨ SOMBRA ESPECIALIZADA - ¡EFECTO AVANZADO!
    
    🎯 ANATOMÍA DE BOX-SHADOW:
    - 0 = Sin desplazamiento horizontal
    - 4px = Desplazamiento vertical (hacia abajo)
    - 8px = Blur radius (difuminado de la sombra)
    - rgba(237, 137, 54, 0.3) = Color naranja semitransparente
    
    💡 RGBA EXPLICADO:
    - R = 237 (Red/Rojo)
    - G = 137 (Green/Verde) 
    - B = 54 (Blue/Azul)
    - A = 0.3 (Alpha/Transparencia - 30% opaco)
    
    🎨 RESULTADO VISUAL:
    Una sombra suave del mismo color que el botón,
    creando un efecto de "resplandor" que refuerza el estado hover.
    
    ✨ TÉCNICA AVANZADA:
    Usar el color del botón en la sombra crea cohesión visual
    y hace que el efecto se sienta más orgánico.
    */
}

.btn-disabled {
    /*
    🚫 BOTÓN DESHABILITADO - ESTADO INACTIVO:
    
    📍 CUÁNDO USAR:
    - Acciones temporalmente no disponibles
    - Formularios incompletos o inválidos
    - Procesos en curso que no permiten interacción
    
    🎨 GRIS = INACTIVO, NO DISPONIBLE:
    Color que universalmente significa "no disponible"
    sin ser confuso o frustrante para el usuario.
    
    ♿ ACCESIBILIDAD CRÍTICA:
    Los elementos deshabilitados deben ser claramente
    reconocibles como tales para todos los usuarios.
    */
    
    background: #a0aec0;
    /*
    ⚪ FONDO GRIS APAGADO:
    - #a0aec0 = Gris que claramente indica "no disponible"
    - Suficientemente diferente de los botones activos
    - No llama la atención innecesariamente
    */
    
    color: #718096;
    /*
    🎨 TEXTO GRIS OSCURO:
    - Color que contrasta con el fondo pero sin destacar
    - Legible pero claramente inactivo
    */
    
    cursor: not-allowed;
    /*
    🚫 CURSOR PROHIBIDO - ¡FEEDBACK INMEDIATO!
    
    🖱️ TIPOS DE CURSOR:
    - pointer = Mano (clickeable)
    - not-allowed = Círculo con línea (prohibido)
    - default = Flecha normal
    - text = Línea vertical (editable)
    
    💡 IMPORTANCIA:
    El cursor es la primera señal visual de que algo no está disponible.
    Evita frustración al usuario al intentar hacer click.
    */
    
    opacity: 0.6;
    /*
    👻 TRANSPARENCIA PARCIAL:
    
    📊 VALORES DE OPACITY:
    - 1.0 = Completamente opaco (normal)
    - 0.6 = 60% opaco (nuestro botón deshabilitado)
    - 0.0 = Completamente transparente (invisible)
    
    🎨 EFECTO VISUAL:
    El botón se ve "fantasmal", como si estuviera ahí
    pero no completamente presente. Refuerza la sensación
    de que está deshabilitado.
    */
}

.btn-disabled:hover {
    /*
    🚫 HOVER SIN EFECTO - CONSISTENCIA DE ESTADO:
    
    📍 PROPÓSITO:
    Un botón deshabilitado NO debe reaccionar al hover.
    Esto refuerza visualmente que no está disponible.
    */
    
    background: #a0aec0;
    /*
    ⚪ MISMO COLOR:
    No cambia en hover, mantiene el estado deshabilitado
    */
    
    transform: none;
    /*
    🚫 SIN ELEVACIÓN:
    No debe "flotar" como los botones activos
    */
    
    box-shadow: none;
    /*
    🚫 SIN SOMBRA:
    No debe tener efectos visuales de interactividad
    */
}

.btn-outline {
    /*
    🔘 BOTÓN CON BORDE - ESTILO ALTERNATIVO:
    
    📍 CUÁNDO USAR:
    - Acciones secundarias que necesitan más presencia que btn-secondary
    - Cuando quieres el color del tema pero sin dominar visualmente
    - Junto a botones sólidos para crear jerarquía
    
    🎨 DISEÑO MINIMALISTA:
    Solo el borde tiene color, el interior es transparente.
    Elegante y moderno, popular en interfaces contemporáneas.
    */
    
    background: transparent;
    /*
    👻 FONDO TRANSPARENTE:
    - transparent = Completamente transparente
    - Permite que se vea el fondo de la página/contenedor
    - Crea un estilo "hueco" muy elegante
    */
    
    color: #4299e1;
    /*
    🎨 TEXTO DEL COLOR PRINCIPAL:
    - Mismo azul que btn-primary
    - Mantiene consistencia de marca/tema
    */
    
    border: 2px solid #4299e1;
    /*
    🔲 BORDE SÓLIDO DEL MISMO COLOR:
    
    🎯 ANATOMÍA DEL BORDER:
    - 2px = Grosor del borde (suficientemente visible)
    - solid = Línea continua (no punteada o discontinua)
    - #4299e1 = Mismo color que el texto
    
    ✨ COHESIÓN VISUAL:
    Texto y borde del mismo color crean unidad visual.
    */
}

.btn-outline:hover {
    /*
    🖱️ HOVER DEL BOTÓN OUTLINE - ¡EFECTO INVERTIDO!
    
    🎯 FILOSOFÍA:
    En hover, el botón outline se "rellena" completamente,
    invirtiendo los colores. Es un efecto muy elegante.
    */
    
    background: #4299e1;
    /*
    🎨 FONDO SE RELLENA:
    El botón "se llena" del color del borde
    */
    
    color: white;
    /*
    ⚪ TEXTO CAMBIA A BLANCO:
    Para contraste con el nuevo fondo azul
    */
}

/* ==========================================
   🏠 ENCABEZADO (HEADER)
   
   📍 PROPÓSITO:
   El header es la primera impresión de la aplicación.
   Debe ser claro, accesible y profesional.
   
   🎯 COMPONENTES TÍPICOS:
   - Logo/Marca de la aplicación
   - Navegación principal
   - Información del usuario (si está logueado)
   - Acciones globales (login/logout)
   
   💡 PRINCIPIOS DE DISEÑO:
   1. Fijo en la parte superior para navegación constante
   2. Contraste alto para buena legibilidad
   3. Equilibrio entre funcionalidad y estética
   4. Responsive para todos los dispositivos
========================================== */

.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    color: #667eea;
    font-size: 24px;
    margin-bottom: 5px;
}

.logo p {
    color: #666;
    font-size: 14px;
    font-style: italic;
}

.auth-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

.auth-nav .user-name {
    color: #4a5568;
    font-weight: 500;
}
.highlight-text {
    margin-top: 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #333;
    background: #f1f5ff;
    padding: 0.8rem 1rem;
    border-left: 4px solid #007bff;
    border-radius: 8px;
}

.tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.badge {
    background: #e9f1ff;
    color: #004a98;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    border: 1px solid #c9ddff;
}


/* ==========================================
   CONTENIDO PRINCIPAL
========================================== */

.main {
    padding: 20px 0;
}

/* ==========================================
   SECCIONES
========================================== */

section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.section-header h2 {
    color: #2d3748;
    font-size: 24px;
}

/* ==========================================
   INFORMACIÓN GENERAL
========================================== */

.info-card {
    text-align: center;
}

.info-card h2 {
    color: #667eea;
    margin-bottom: 15px;
}

.info-card p {
    margin-bottom: 10px;
    color: #4a5568;
}

.api-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 20px;
    background: #f7fafc;
    margin-top: 15px;
}

.status-indicator {
    font-size: 16px;
}

/* ==========================================
   AUTENTICACIÓN
========================================== */

.auth-container {
    max-width: 400px;
    margin: 0 auto;
}

.auth-form {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.auth-form h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #2d3748;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #4a5568;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e0;
    border-radius: 5px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.auth-toggle {
    text-align: center;
    margin-top: 15px;
    color: #666;
}

.auth-toggle a {
    color: #4299e1;
    text-decoration: none;
}

.auth-toggle a:hover {
    text-decoration: underline;
}

/* ==========================================
   PRODUCTOS
========================================== */

.category-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-filter select {
    padding: 8px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 5px;
    font-size: 14px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.product-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.product-image {
    width: 100%;
    height: 200px;
    background: #f7fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #cbd5e0;
    overflow: hidden;
    position: relative;
}

/* Estilos para imágenes de productos */
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-img {
    transform: scale(1.05);
}

/* Efecto para imágenes placeholder */
.placeholder-image {
    filter: opacity(0.8);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Loading state para imágenes */
.product-img[src=""] {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img[src=""]:before {
    content: "📷";
    font-size: 40px;
    color: #ccc;
}

.product-content {
    padding: 15px;
}

.product-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 5px;
}

.product-category {
    font-size: 12px;
    color: #667eea;
    background: #edf2f7;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 10px;
}

.product-price {
    font-size: 18px;
    font-weight: 700;
    color: #48bb78;
    margin-bottom: 10px;
}

.product-stock {
    font-size: 12px;
    color: #666;
    margin-bottom: 15px;
}

.product-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantity-input {
    width: 60px;
    padding: 5px;
    border: 1px solid #cbd5e0;
    border-radius: 3px;
    text-align: center;
}

/* ==========================================
   CARRITO
========================================== */

.cart-items {
    margin-bottom: 20px;
}

.empty-cart {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
}

.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 10px;
    background: white;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 5px;
}

.cart-item-details {
    font-size: 14px;
    color: #666;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-summary {
    border-top: 2px solid #e2e8f0;
    padding-top: 20px;
    text-align: center;
}

.cart-total {
    font-size: 20px;
    margin-bottom: 15px;
    color: #2d3748;
}

/* ==========================================
   PEDIDOS
========================================== */

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.order-item:hover {
    border-color: #4299e1;
    transform: translateY(-1px);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.order-id {
    font-weight: 600;
    color: #2d3748;
}

.order-status {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.order-status.pendiente {
    background: #fed7af;
    color: #c05621;
}

.order-status.pagado {
    background: #c6f6d5;
    color: #22543d;
}

.order-status.enviado {
    background: #bee3f8;
    color: #2a4365;
}

.order-date {
    color: #666;
    font-size: 14px;
}

.order-products {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.order-product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
}

.order-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    text-align: right;
    font-weight: 600;
    color: #48bb78;
}

/* ==========================================
   INFORMACIÓN DE USUARIO - PERFIL CON FOTO
========================================== */

.user-card {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.profile-avatar {
    flex-shrink: 0;
}

.profile-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ea66aa;
    box-shadow: 0 4px 20px rgba(234, 102, 170, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-image:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(234, 102, 170, 0.5);
}

.profile-info {
    flex: 1;
    min-width: 250px;
}

.profile-info h3 {
    margin-bottom: 20px;
    color: #2d3748;
    font-size: 1.5em;
    font-weight: 600;
}

#userDetails {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
    border-radius: 15px;
    margin: 0;
    border: 1px solid rgba(234, 102, 170, 0.1);
}

.user-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.user-detail:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: #4a5568;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.detail-value {
    font-weight: 500;
    color: #2d3748;
    background: rgba(234, 102, 170, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9em;
}

.profile-actions {
    margin-top: 25px;
    text-align: center;
}

.profile-actions .btn {
    min-width: 180px;
    padding: 12px 25px;
    font-size: 1em;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.profile-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive para móviles */
@media (max-width: 600px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .profile-image {
        width: 100px;
        height: 100px;
    }
    
    .user-detail {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .detail-value {
        align-self: flex-end;
    }
}

/* ==========================================
   PIE DE PÁGINA
========================================== */

.footer {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 0;
    text-align: center;
    color: #666;
}

.footer p {
    margin-bottom: 5px;
    font-size: 14px;
}

/* ==========================================
   MODAL
========================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    overflow: hidden;
}

.modal-header {
    background: #667eea;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h4 {
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 15px 20px;
    text-align: center;
    border-top: 1px solid #e2e8f0;
}

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

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    .header .container {
        flex-direction: column;
        gap: 15px;
    }

    .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }

    .cart-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .order-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .category-filter {
        flex-direction: column;
        align-items: stretch;
    }

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

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 95%;
        margin: 20px;
    }

    section {
        padding: 20px 15px;
    }

    .logo h1 {
        font-size: 20px;
    }
}