@import url("modules/variables.css");
@import url("modules/themes.css");

@import url("modules/base.css");
@import url("modules/layout.css");

@import url("modules/topbar.css");
@import url("modules/bottom-nav.css");

@import url("modules/feed.css");
@import url("modules/comentarios.css");
@import url("modules/chat.css");
@import url("modules/perfil.css");
@import url("modules/perfil-galerias.css");
@import url("modules/perfil-seguidores.css");
@import url("modules/perfil-responsive.css");
@import url("modules/forms.css");
@import url("modules/market.css");
@import url("modules/search.css");
@import url("modules/modal_compartir.css");

@import url("modules/modal.css");


/* =========================================================
IRIS CSS ARCHITECTURE MAP
=========================

ESTADO ACTUAL DEL PROYECTO
Última actualización: Mayo 2026

========================================================= */

/* =========================================================
ORDEN DE CARGA
==============

1. variables.css

2. themes.css

3. layout.css

4. base.css

5. topbar.css

6. bottom-nav.css

7. feed.css

8. comentarios.css

9. chat.css

10. perfil.css

11. forms.css

12. market.css

13. search.css

14. modal.css

========================================================= */

/* =========================================================
VARIABLES.CSS
=============

CONTIENE:

* :root
* variables globales
* colores principales
* tamaños globales
* breakpoints
* compatibilidad entre módulos

VARIABLES IMPORTANTES:

--iris-max-width
--accent
--accent-hover
--color-texto
--color-fondo
--color-card

========================================================= */

/* =========================================================
THEMES.CSS
==========

CONTIENE:

* body.tema-*
* gradientes
* fondos globales
* colores por tema
* personalización visual usuario

OBJETIVO:

Cambiar completamente la identidad visual
sin tocar los componentes.

========================================================= */

/* =========================================================
LAYOUT.CSS
==========

CONTIENE:

* contenedor principal
* ancho máximo
* responsive global
* spacing general
* estructura desktop
* estructura móvil

UTILIZAN ESTE SISTEMA:

* feed
* perfiles
* marketplace
* buscador
* chats

========================================================= */

/* =========================================================
BASE.CSS
========

CONTIENE:

* reset
* body
* html
* enlaces
* botones globales
* tarjetas reutilizables
* imágenes globales
* componentes compartidos

COMPONENTES:

* btn-principal
* btn-secundario
* cards globales
* previews
* elementos comunes

NO DEBE CONTENER:

✘ perfil completo
✘ marketplace
✘ chat
✘ comentarios
✘ topbar
✘ bottom-nav

========================================================= */

/* =========================================================
TOPBAR.CSS
==========

CONTIENE:

* logo
* buscador superior
* botón publicar
* login/logout
* accesos rápidos
* responsive header

========================================================= */

/* =========================================================
BOTTOM-NAV.CSS
==============

CONTIENE:

* navegación inferior
* iconos
* badges
* estados activos
* avatar perfil

OBJETIVO:

Experiencia tipo aplicación móvil

========================================================= */

/* =========================================================
FEED.CSS
========

CONTIENE:

* publicaciones
* multimedia
* imágenes
* videos
* carrusel
* likes
* guardados
* acciones publicación
* responsive feed

PENDIENTE:

* mejorar ancho desktop
* optimizar tarjetas publicación
* mejorar separación visual

========================================================= */

/* =========================================================
COMENTARIOS.CSS
===============

CONTIENE:

* comentarios
* respuestas
* edición comentarios
* árbol comentarios
* formularios comentarios

PENDIENTE:

* sistema reply mejorado
* imágenes en comentarios
* videos en comentarios

========================================================= */

/* =========================================================
CHAT.CSS
========

CONTIENE:

* lista conversaciones
* mensajes
* multimedia
* burbujas
* input chat
* responsive chat

PENDIENTE:

* imágenes
* videos
* optimización móvil

========================================================= */

/* =========================================================
PERFIL.CSS
==========

CONTIENE:

PERFIL PROPIO:

* perfil.html
* portada
* foto perfil
* estadísticas
* galerías
* publicaciones
* guardados

PERFIL PÚBLICO:

* usuario.html
* seguidores
* seguidos
* WhatsApp
* privacidad perfil

COMPONENTES:

* perfil-stats
* galeria-card
* seguidores-lista
* seguidor-card
* bio-perfil

PENDIENTE:

* modernizar header desktop
* mejorar distribución usuario.html
* publicaciones más anchas
* integración perfil ↔ tienda

========================================================= */

/* =========================================================
FORMS.CSS
=========

CONTIENE:

* login
* registro
* crear publicación
* editar publicación
* inputs
* textarea
* select
* previews multimedia

========================================================= */

/* =========================================================
MARKET.CSS
==========

CONTIENE:

* tienda.html
* detalle_producto.html
* carrito.html

TIENDAS:

* cards productos
* grid productos
* stock
* WhatsApp
* seguidores tienda
* mensajes tienda

RESPONSIVE:

* móvil
* tablet
* desktop

PENDIENTE:

* modernizar header tienda
* mejorar perfil vendedor
* integración perfil ↔ tienda

========================================================= */

/* =========================================================
SEARCH.CSS
==========

CONTIENE:

* buscador global
* usuarios
* publicaciones
* tiendas
* resultados

PENDIENTE:

* limpiar estructura vieja
* mejorar responsive

========================================================= */

/* =========================================================
MODAL.CSS
=========

CONTIENE:

* visor imágenes
* visor videos
* fullscreen
* navegación multimedia

========================================================= */

/* =========================================================
FUTUROS MÓDULOS
===============

PENDIENTES:

* notifications.css
* admin.css
* groups.css
* animations.css
* desktop-layout.css

========================================================= */

/* =========================================================
FUNCIONES PENDIENTES IRIS
=========================

RED SOCIAL

* seguidores avanzados
* feed personalizado
* grupos públicos
* grupos privados
* multimedia comentarios
* multimedia mensajes

MODERACIÓN

* panel administración
* denuncias
* revisión publicaciones
* revisión perfiles
* sanciones

PRIVACIDAD

* perfiles privados avanzados
* configuraciones visibilidad

========================================================= */

/* =========================================================
ESTRUCTURA ACTUAL
=================

static/css/

├── style.css

└── modules/

```
   ├── variables.css
   ├── themes.css
   ├── layout.css
   ├── base.css
   ├── topbar.css
   ├── bottom-nav.css
   ├── feed.css
   ├── comentarios.css
   ├── chat.css
   ├── perfil.css
   ├── forms.css
   ├── market.css
   ├── search.css
   └── modal.css
```

========================================================= */

/* =========================================================
PRÓXIMA FRAGMENTACIÓN RECOMENDADA
=================================

NO HACER TODAVÍA.

CUANDO PERFIL Y TIENDA ESTÉN ESTABLES:

perfil.css
├── perfil.css
├── galerias.css
└── seguidores.css

market.css
├── market.css
├── tienda.css
└── carrito.css

========================================================= */