/* ═══════════════════════════════════════════════════════════════════════
   FIX-ICONS.CSS — Solución definitiva para iconos Lucide invisibles
   RichardPantallas v2.0
   
   INSTRUCCIÓN: Colocar en /css/fix-icons.css
   En index.html cargar DESPUÉS de themes.css:
   <link rel="stylesheet" href="css/fix-icons.css">
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. VISIBILIDAD BASE ─────────────────────────────────────────────── */
/* Garantizar que todos los SVGs de Lucide sean visibles */

svg.lucide,
svg[class*="lucide-"] {
    display: inline-block !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    /* Los iconos no deben interceptar clicks — el elemento padre (button/a) es el target */
    pointer-events: none !important;
}


/* ── 2. ANCHOS ───────────────────────────────────────────────────────── */
/* [class~="w-4"] coincide con la PALABRA EXACTA "w-4"
   NO coincide con w-40, w-48, etc. — esto lo hace seguro y preciso */

svg[class~="w-3"]   { width: 0.75rem  !important; }
svg[class~="w-3.5"] { width: 0.875rem !important; }
svg[class~="w-4"]   { width: 1rem     !important; }
svg[class~="w-5"]   { width: 1.25rem  !important; }
svg[class~="w-6"]   { width: 1.5rem   !important; }
svg[class~="w-7"]   { width: 1.75rem  !important; }
svg[class~="w-8"]   { width: 2rem     !important; }
svg[class~="w-9"]   { width: 2.25rem  !important; }
svg[class~="w-10"]  { width: 2.5rem   !important; }
svg[class~="w-12"]  { width: 3rem     !important; }
svg[class~="w-16"]  { width: 4rem     !important; }
svg[class~="w-20"]  { width: 5rem     !important; }
svg[class~="w-24"]  { width: 6rem     !important; }


/* ── 3. ALTOS ────────────────────────────────────────────────────────── */

svg[class~="h-3"]   { height: 0.75rem  !important; }
svg[class~="h-3.5"] { height: 0.875rem !important; }
svg[class~="h-4"]   { height: 1rem     !important; }
svg[class~="h-5"]   { height: 1.25rem  !important; }
svg[class~="h-6"]   { height: 1.5rem   !important; }
svg[class~="h-7"]   { height: 1.75rem  !important; }
svg[class~="h-8"]   { height: 2rem     !important; }
svg[class~="h-9"]   { height: 2.25rem  !important; }
svg[class~="h-10"]  { height: 2.5rem   !important; }
svg[class~="h-12"]  { height: 3rem     !important; }
svg[class~="h-16"]  { height: 4rem     !important; }
svg[class~="h-20"]  { height: 5rem     !important; }
svg[class~="h-24"]  { height: 6rem     !important; }


/* ── 4. FALLBACK TAMAÑO MÍNIMO ───────────────────────────────────────── */
/* Si un SVG no tiene clase de tamaño, que no sea invisible */

svg.lucide {
    min-width: 0.875rem !important;
    min-height: 0.875rem !important;
}


/* ── 5. COLORES ──────────────────────────────────────────────────────── */
/* Garantizar que el stroke se hereda correctamente */

svg.lucide path,
svg.lucide line,
svg.lucide circle,
svg.lucide rect,
svg.lucide polyline,
svg.lucide polygon,
svg.lucide ellipse {
    vector-effect: non-scaling-stroke;
}


/* ── 6. CONTENEDORES FLEX ───────────────────────────────────────────── */
/* Evitar que flex colapse los iconos */

.flex > svg,
.inline-flex > svg,
button > svg,
a > svg,
[class~="flex"] svg,
[class~="inline-flex"] svg {
    flex-shrink: 0 !important;
}


/* ── 7. LIMPIAR REGLAS PROBLEMÁTICAS DE themes.css ─────────────────── */
/* Las reglas .w-X svg y svg.w-X del themes.css mezclaban width y height.
   Estas reglas aquí son más precisas y tienen más prioridad (cascade). */

/* Neutralizar regla genérica problemática del themes.css
   que ponía height=width incorrectamente */
.w-3 svg  { width: unset; height: unset; }
.w-4 svg  { width: unset; height: unset; }
.w-5 svg  { width: unset; height: unset; }
.w-6 svg  { width: unset; height: unset; }
.w-8 svg  { width: unset; height: unset; }