/* Unificado: estilos extraídos de los HTML */
/* Tailwind utilities stay con CDN; aquí van reglas adicionales y ajustes menores */

/* Range slider styling (configurador.html) */
input[type=range] {
  -webkit-appearance: none;
  background: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #135bec;
  cursor: pointer;
  margin-top: -6px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #282e39;
  border-radius: 2px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #3b4250;
}

/* Scrollbar helpers (varios archivos) */
.no-scrollbar::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar,
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.no-scrollbar, .hide-scrollbar, .scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Material Symbols adjustments (proporcionado en proceso.html) */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Small shared utilities kept external */
.hide-scrollbar { -webkit-overflow-scrolling: touch; }

/* Social icons in footer */
.footer-socials { display: flex; gap: 12px; align-items: center; justify-content: center; }
.footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: transparent; transition: background 180ms ease, transform 160ms ease, color 180ms ease; color: #cbd5e1; }
.footer-socials a svg { width: 20px; height: 20px; }
.footer-socials a:hover { background: rgba(255,255,255,0.06); color: #ffffff; transform: translateY(-2px); }

/* Slightly larger clickable area on small screens */
@media (max-width: 768px) {
  .footer-socials a { width: 52px; height: 52px; border-radius: 10px; }
}

/* High-contrast variant for dark backgrounds */
@media (prefers-contrast: more) {
  .footer-socials a { color: #fff; }
}
