/* Fix específico para iconos grandes del IconPicker */

/* IMPORTANTE: Forzar tamaño de iconos Lucide en el modal */
.fi-modal-content .fi-icon-picker-icon,
.fi-modal-content .fi-icon-picker-icon svg,
.fi-modal-content button[type="button"] svg,
[x-data*="iconPicker"] svg,
.fi-icon-picker-item svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    max-width: 1.5rem !important;
    max-height: 1.5rem !important;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
}

/* Contenedor del icono en el grid */
.fi-icon-picker-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Icono en el preview del input (más pequeño) */
.fi-icon-picker-preview,
.fi-icon-picker-preview svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
}

.fi-icon-picker-preview {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Botones del grid de iconos */
.fi-icon-picker-item {
    padding: 0.75rem !important;
    width: auto !important;
    height: auto !important;
}

/* Específico para iconos Lucide */
.fi-modal-content svg.lucide,
.fi-icon-picker-icon svg.lucide,
button[type="button"] svg.lucide {
    width: 1.5rem !important;
    height: 1.5rem !important;
    stroke-width: 2 !important;
}

/* Preview de Lucide */
.fi-icon-picker-preview svg.lucide {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Asegurar que el contenedor del modal no afecte el tamaño */
.fi-modal-content {
    overflow-y: auto !important;
}

/* Grid de iconos con espaciado correcto */
.fi-modal-content .grid {
    gap: 0.75rem !important;
}

/* Hover effect */
.fi-icon-picker-item:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Resetear cualquier estilo de Lucide que pueda estar interfiriendo */
svg[class*="lucide"] {
    width: inherit !important;
    height: inherit !important;
}

