/* css/style.css */
.scalar-compressor-wrapper {
    background-color: #ffffff;
    width: 100%;
    max-width: 600px;
    margin: 2rem auto; /* Centra el contenedor en la página */
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
}

.scalar-compressor-wrapper * {
    box-sizing: border-box;
}

.scalar-compressor-wrapper select:focus, 
.scalar-compressor-wrapper input[type="file"]:focus {
    outline: none;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

.scalar-compressor-wrapper .btn-primary:hover { background-color: #1d4ed8 !important; }
.scalar-compressor-wrapper .btn-success:hover { background-color: #15803d !important; }
.scalar-compressor-wrapper button:active { transform: scale(0.98); }

.scalar-compressor-wrapper .lang-btn { 
    cursor: pointer; 
    color: #4b5563; 
    transition: color 0.2s; 
}
.scalar-compressor-wrapper .lang-btn.active { 
    color: #2563eb !important; 
    text-decoration: underline; 
}

@media (max-width: 480px) {
    .scalar-compressor-wrapper { padding: 1.5rem; }
    .scalar-compressor-wrapper .results-grid { grid-template-columns: 1fr !important; }
}