@font-face{font-family:'VerdanaCustom';src:url(../verdana/Verdana.ttf) format('truetype');font-weight:400;font-style:normal} @font-face{font-family:'VerdanaCustom-Bold';src:url(../verdana/Verdana-Bold.ttf) format('truetype');font-weight:700;font-style:normal} @font-face{font-family:'VerdanaCustom-Italic';src:url(../verdana/Verdana-Italic.ttf) format('truetype');font-weight:400;font-style:italic} @font-face{font-family:'VerdanaCustom-BoldItalic';src:url(../verdana/Verdana-BoldItalic.ttf) format('truetype');font-weight:700;font-style:italic}header{padding:15px;text-align:center;position:relative;z-index:10;background:var(--accent-bg);border-bottom:1px solid var(--border)}header p{font-size:1.2em;font-family:Arial,sans-serif;margin:10px 0;color:rgb(240,240,240)}nav{padding:10px;text-align:center}nav a,nav a:visited{text-decoration:none;margin:0 15px;font-size:1em;color:rgb(240,240,240)}nav a:hover{text-decoration:underline}.contenedor{display:flex;gap:15px;padding:15px;align-items:flex-start;font-family:Arial,sans-serif}.panel{flex:1;max-width:250px;font-size:13px}.panel h3{margin:10px 0 5px;font-size:13px}.input-group{margin:5px 0}.input-group input,.input-group select{width:230px;box-sizing:border-box;padding:8px;font-size:13px;border:1px solid #ccc;border-radius:4px}input[type="file"]{width:230px;box-sizing:border-box;font-size:13px;border:none;padding:8px 0}.toggle-item{margin:5px 0}.toggle-item input[type="checkbox"]{margin-right:5px}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:5px 0}.toggle-container{margin-top:10px;text-align:left}canvas{border:1px solid rgb(20,20,20);display:block;margin:0 auto;max-width:100%;height:auto}#preview{flex:1;text-align:center}button{padding:5px 10px;font-size:13px;margin-top:8px;background:rgb(90,165,25);color:rgb(240,240,240);border:none;border-radius:6px;cursor:pointer}button:hover{opacity:0.8}button.info-tooltip:hover::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.8);color:#fff;padding:5px 10px;border-radius:5px;white-space:pre-wrap;width:250px;z-index:1000;text-align:center}
.warning-message {
    background-color: rgb(90, 165, 25);
    color: rgb(240, 240, 240);
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}.hidden{display:none}#truckersmpStatus,#empresaLinkStatus{font-size:11px;color:#555;margin-top:5px}.valid{color:green}.invalid{color:red}#colorSlider,#saturationSlider{width:70%;margin-top:5px;vertical-align:middle;height:4px;background:#e0e0e0;border-radius:3px;outline:none;transition:background .3s}#colorSlider::-webkit-slider-thumb,#saturationSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:rgb(90,165,25);border-radius:50%;cursor:pointer;transition:background .3s}#colorSlider::-webkit-slider-thumb:hover,#saturationSlider::-webkit-slider-thumb:hover{background:rgb(70,130,20)}#colorSlider::-moz-range-thumb,#saturationSlider::-moz-range-thumb{width:12px;height:12px;background:rgb(90,165,25);border-radius:50%;cursor:pointer;border:none;transition:background .3s}#colorSlider::-moz-range-thumb:hover,#saturationSlider::-moz-range-thumb:hover{background:rgb(70,130,20)}#colorValue,#saturationValue{display:inline-block;width:15%;text-align:right;font-size:11px;color:#555}footer{margin:8px 0}#infoButton{font-size:12px;padding:3px 8px;margin-right:5px;display:inline-block}#infoButton:hover::after{width:300px;text-align:left;white-space:pre-wrap;}.button-group{display:flex;gap:5px;justify-content:center;align-items:center}.canvas-container{width:100%;text-align:center;margin:10px 0}#backgroundSelect{font-size:14px;padding:10px;width:250px}
.toggle-group-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    border: none;
    padding: 5px;
    border-radius: 5px;
    justify-content: flex-start;
}
.toggle-item label {
    font-size: 13px;
}
.rank-legend-item[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: pre-wrap;
    width: 250px;
    z-index: 1000;
    text-align: center;
}

@media (max-width: 768px) {
    .contenedor {
        flex-direction: column;
        align-items: center;
    }

    .panel, #preview {
        max-width: 100%;
        width: 100%;
    }

    .input-group input,
    .input-group select {
        width: 100%;
        box-sizing: border-box;
    }

    input[type="file"] {
        width: 100%;
    }

    #backgroundSelect {
        width: 100%;
    }
}