/* Ajustes que o Tailwind CDN não cobre bem: slider, rolagem suave, impressão. */

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

/* Slider (input range) com trilho preenchido via --progresso */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--color-marca, #EA580C) var(--progresso, 50%), #e7e5e4 var(--progresso, 50%));
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 4px solid var(--color-marca, #EA580C);
  box-shadow: 0 4px 14px rgb(234 88 12 / .35);
  transition: transform .15s;
}
.slider::-webkit-slider-thumb:active { transform: scale(1.15); }
.slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 4px solid var(--color-marca, #EA580C);
  box-shadow: 0 4px 14px rgb(234 88 12 / .35);
}
.slider:focus-visible { box-shadow: 0 0 0 4px rgb(234 88 12 / .25); }

/* Números que mudam sem "pular" de largura */
.tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Faixas com rolagem horizontal sem barra visível (chips de categoria, destaques) */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Destaque rápido no grupo obrigatório que faltou escolher */
@keyframes cz-tremer { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }
.tremer { animation: cz-tremer .25s ease-in-out 2; }

/* ---------- Formulários do painel (Etapa 7) ----------
   Em @layer components: as classes do Tailwind (w-32, mt-0…) continuam podendo sobrescrever. */
@layer components {
.campo {
  display: block; width: 100%; margin-top: .25rem; border: 0; border-radius: .75rem; background: #fff;
  padding: .55rem .75rem; font-size: .95rem; color: #1c1917; outline: none; box-shadow: 0 0 0 1px #d6d3d1;
  transition: box-shadow .15s;
}
.campo:focus { box-shadow: 0 0 0 2px var(--color-marca, #EA580C); }
.campo:disabled { background: #f5f5f4; color: #78716c; }
.campo.invalido { box-shadow: 0 0 0 2px #dc2626; }
select.campo { padding-right: 2rem; }
.rotulo { display: block; font-size: .875rem; font-weight: 500; color: #44403c; }
.ajuda { margin-top: .25rem; font-size: .75rem; color: #78716c; }
.erro-campo { margin-top: .25rem; font-size: .75rem; font-weight: 500; color: #dc2626; }

/* Interruptor (checkbox estilizado): <input type="checkbox" class="interruptor"> */
.interruptor {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 2.75rem; height: 1.5rem;
  border-radius: 999px; background: #d6d3d1; cursor: pointer; transition: background .15s;
}
.interruptor::after {
  content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .15s;
}
.interruptor:checked { background: #059669; }
.interruptor:checked::after { transform: translateX(1.25rem); }
.interruptor:focus-visible { outline: 2px solid var(--color-marca, #EA580C); outline-offset: 2px; }
.interruptor:disabled { opacity: .5; cursor: not-allowed; }

/* Alça de arrastar */
.alca { cursor: grab; touch-action: none; user-select: none; }
.alca:active { cursor: grabbing; }
.arrastando { opacity: .4; }
}