/**
 * CSS para Iconos - Font Awesome
 * Estilos para asegurar que los iconos se muestren correctamente
 */

/* Estilos para iconos Font Awesome */
.fa, .fas, .far, .fal, .fab, .fad {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    vertical-align: middle;
}

/* Compatibilidad con clases Phosphor - Iconos SVG */
.ph, [class^="ph-"], [class*=" ph-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    min-width: 1em;
    min-height: 1em;
    vertical-align: middle;
    line-height: 1;
}

/* Asegurar que los SVG dentro de iconos tengan el tamaño correcto */
.ph svg, [class^="ph-"] svg, [class*=" ph-"] svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
    fill: currentColor;
}

/* Asegurar que los iconos tengan el tamaño correcto */
i.fa, i.fas, i.far, i.fal, i.fab {
    font-size: inherit;
}

/* Tamaños específicos para diferentes contextos */
.ph.text-2xl, [class^="ph-"].text-2xl, [class*=" ph-"].text-2xl {
    width: 1.5em;
    height: 1.5em;
}

.ph.text-3xl, [class^="ph-"].text-3xl, [class*=" ph-"].text-3xl {
    width: 1.875em;
    height: 1.875em;
}

.ph.text-4xl, [class^="ph-"].text-4xl, [class*=" ph-"].text-4xl {
    width: 2.25em;
    height: 2.25em;
}