/* ═══════════════════════════════════════════════════════════════
   MAIN.CSS
   Proyecto: Muy Frío o Muy Caliente v2.1
   
   Este archivo importa todos los módulos CSS en el orden correcto.
   Incluir solo este archivo en el HTML.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Base: variables, reset, fondos */
@import url('./base.css');

/* 2. Animaciones: keyframes y clases de animación */
@import url('./animations.css');

/* 3. Componentes: botones, cards, modals, inputs */
@import url('./components.css');

/* 4. Wordle: estilos específicos del modo Wordle Caliente */
@import url('./wordle.css');

/* ═══════════════════════════════════════════════════════════════
   NOTAS DE ARQUITECTURA CSS
   ═══════════════════════════════════════════════════════════════
   
   Estructura de archivos:
   
   styles/
   ├── main.css        ← Punto de entrada (importa todo)
   ├── base.css        ← Variables CSS, fondos, scrollbar
   ├── animations.css  ← Todos los @keyframes y animaciones
   ├── components.css  ← Botones, inputs, cards, modals, badges
   └── wordle.css      ← Estilos específicos modo Wordle
   
   Convenciones:
   
   1. Variables CSS definidas en :root (base.css)
   2. Clases utilitarias prefijadas según función:
      - .temp-*     → colores de temperatura
      - .btn-*      → variantes de botones
      - .badge-*    → variantes de badges
      - .wordle-*   → componentes Wordle
   
   3. Animaciones nombradas descriptivamente:
      - pulse, float, shake, flip, slideIn, etc.
   
   4. Media queries al final de cada sección relevante
   
   ═══════════════════════════════════════════════════════════════ */