/* Reset Box Sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Ocultar barra de rrolagem para o painel de config, mantendo a função do React */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Base custom forms tools */
input[type="number"], 
select {
    outline: none;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

input[type="number"]:focus, 
select:focus {
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Animação de borda pulsante para limite excedido */
@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 0 2px #ef4444, 0 10px 40px rgba(239, 68, 68, 0.2); }
  50%       { box-shadow: 0 0 0 4px #ef4444, 0 10px 40px rgba(239, 68, 68, 0.45); }
}

.exceed-pulse {
  animation: pulse-border 1.6s ease-in-out infinite;
}

/* Estilos gerais para utilitários SVG e renders */
#preview-container {
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #fafafa;
}