@media (max-width: 480px) {
    #xioleni-color-selector-panel {
        width: 80%;
        max-width: 230px;
        left: 5px;
    }
    
    #xioleni-color-selector-panel div div {
        height: 80px;
    }
    
    #xioleni-color-selector-panel div div span {
        font-size: 14px;
    }
    
    /* Media query para dispositivos móviles - icono más grande */
    #font-select-btn svg {
        width: 32px !important;
        height: 32px !important;
    }
    
    #font-select-btn svg text:nth-child(1) {
        font-size: 24px !important;
        x: 1 !important;
        y: 19 !important;
    }
    
    #font-select-btn svg line {
        x1: 18 !important;
        y1: 4 !important;
        x2: 18 !important;
        y2: 14 !important;
        stroke-width: 2 !important;
    }
    
    #font-select-btn svg text:nth-child(3) {
        font-size: 12px !important;
        x: 1 !important;
        y: 31 !important;
    }
}

/* Tamaño más grande para tablets y PC */
@media (min-width: 481px) {
    #font-select-btn svg {
        width: 32px !important;
        height: 32px !important;
    }
    
    #font-select-btn svg text:nth-child(1) {
        font-size: 20px !important;
    }
    
    #font-select-btn svg text:nth-child(2) {
        font-size: 17px !important;
    }
    
    #font-select-btn svg text:nth-child(3) {
        font-size: 14px !important;
    }
}