/* ─────────────────────────────────────────────────────────────────
   Mercado Farmacéutico — estilos custom globales
   Complementa Tailwind CDN; no reemplaza clases utilitarias.
   ───────────────────────────────────────────────────────────────── */

/* ── Hero slider (Swiper) ────────────────────────────────────────── */
.swiper { width: 100%; }
.swiper-slide img { width: 100%; height: auto; display: block; }

/* ── Logo carousel ───────────────────────────────────────────────── */
.logo-carousel {
  --logo-h:  72px;
  --tile-w: 150px;
  --gap:     16px;
  position: relative;
  overflow: hidden;
}
.logo-carousel::before,
.logo-carousel::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 80px;
  z-index: 2; pointer-events: none;
}
.logo-carousel::before { left:  0; background: linear-gradient(to right, #f8fafc, transparent); }
.logo-carousel::after  { right: 0; background: linear-gradient(to left,  #f8fafc, transparent); }
.logo-carousel .track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: scroll-logos 38s linear infinite;
}
.logo-carousel:hover .track { animation-play-state: paused; }
.logo-carousel .logo {
  flex: 0 0 var(--tile-w);
  height: calc(var(--logo-h) + 16px);
  display: flex; align-items: center; justify-content: center;
  padding: 8px 12px;
}
.logo-carousel .logo img {
  max-height: var(--logo-h);
  max-width: calc(var(--tile-w) - 20px);
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .2s, opacity .2s;
}
.logo-carousel .logo img:hover { filter: none; opacity: 1; }
@keyframes scroll-logos {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .logo-carousel { --logo-h: 56px; --tile-w: 120px; --gap: 12px; }
}

/* ── Loading overlay (module_foot) ──────────────────────────────── */
@keyframes mf-spin { to { transform: rotate(360deg); } }

/* ── Clases legacy de módulos SIA (cajas / boxesss) ─────────────── */
select.cajas, input.cajas, select.boxesss {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.8rem;
  color: #334155;
}
select.cajas:focus, input.cajas:focus { outline: 2px solid #3b82f6; }