/* ═══════════════════════════════════════════════════════════════
   speedyrect-ui-v71.css — SpeedyRectCore v7.1 · Release
   Ferretería Falero · Sismo Digital Pro · Setiembre 2026

   POSICIONAMIENTO FINAL DEL STACK FLOTANTE:
     bottom 18px → WhatsApp
     bottom 86px → Falero TV (rojo, play)
     bottom 152px → Ir arriba (azul #2563eb, flecha amarilla #fbbf24)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --sr-fab-right: 16px;
  --sr-fab-wa-bottom: 18px;
  --sr-fab-tv-bottom: 86px;
  --sr-fab-top-bottom: 152px;
}

/* ── 1. WhatsApp FAB ──────────────────────────────────────────── */
.whatsapp-fab {
  right: var(--sr-fab-right) !important;
  bottom: var(--sr-fab-wa-bottom) !important;
  width: 56px !important; height: 56px !important;
  z-index: 900 !important;
  background: #25d366 !important;
}
.whatsapp-fab i { font-size: 1.75rem !important; color: #fff !important; }

/* ── 2. Botón flotante rojo "Falero TV" ─────────────────────── */
#sr-tv-fab {
  position: fixed;
  right: var(--sr-fab-right);
  bottom: var(--sr-fab-tv-bottom);
  z-index: 901;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 9px 11px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 8px 22px rgba(239, 68, 68, .45);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#sr-tv-fab .sr-tv-fab-label { white-space: nowrap; }
#sr-tv-fab:hover { transform: translateY(-2px) scale(1.04); }
#sr-tv-fab:active { transform: scale(.98); }
#sr-tv-fab .sr-tv-fab-play {
  display: grid; place-items: center;
  width: 25px; height: 25px; border-radius: 50%;
  background: rgba(255, 255, 255, .24);
  font-size: .7rem;
}
#sr-tv-fab.sr-tv-fab-activo {
  background: linear-gradient(135deg, #991b1b, #7f1d1d);
  box-shadow: 0 6px 16px rgba(127, 29, 29, .5);
}
@keyframes sr-pulso-tv {
  0%, 100% { box-shadow: 0 8px 22px rgba(239, 68, 68, .45); }
  50%      { box-shadow: 0 8px 32px rgba(239, 68, 68, .85); }
}
#sr-tv-fab:not(.sr-tv-fab-activo) { animation: sr-pulso-tv 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #sr-tv-fab:not(.sr-tv-fab-activo) { animation: none; }
}

/* ── 3. "Ir arriba": azul con flecha amarilla ────────────────── */
.sr-btn-arriba {
  position: fixed;
  right: var(--sr-fab-right);
  left: auto;
  bottom: var(--sr-fab-top-bottom);
  z-index: 902;
  width: 46px; height: 46px;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: #2563eb;
  color: #fbbf24;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .42);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.sr-btn-arriba i { color: #fbbf24 !important; }
.sr-btn-arriba.sr-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sr-btn-arriba:hover { background: #1d4ed8; }

/* ── 4. Panel TV: por encima del stack ───────────────────────── */
#sr-tv-flotante {
  bottom: 216px !important;
  right: var(--sr-fab-right) !important;
  z-index: 950 !important;
}
@media (max-height: 620px) { #sr-tv-flotante { bottom: auto !important; top: 64px !important; } }

/* ── 5. Barra verde WhatsApp dentro de la sección contacto ───── */
.sr-wa-canal { text-decoration: none; max-width: 460px; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) { .sr-wa-canal { margin-left: 0; } }
.sr-btn-tv-canal {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer; font-family: inherit;
  font-weight: 800; color: #fff;
  padding: 12px 20px; border-radius: 12px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 8px 20px rgba(239, 68, 68, .38);
  transition: transform .15s ease;
}
.sr-btn-tv-canal:hover { transform: translateY(-2px) scale(1.03); }

/* ── 6. Botones PDF SIEMPRE en ROJO ──────────────────────────── */
button.generate-pdf-btn,
a.generate-pdf-btn,
.sr-pdf-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  padding: 12px 20px !important;
  box-shadow: 0 6px 16px rgba(239, 68, 68, .35) !important;
  transition: transform .15s ease, box-shadow .2s ease !important;
}
button.generate-pdf-btn:hover,
.sr-pdf-btn:hover { transform: translateY(-2px); }

/* ── 7. Swiper: ocultar flechas prev/next por defecto (eran la flecha suelta que se veía) ─ */
.swiper-button-next, .swiper-button-prev { display: none !important; }

/* ── 8. Móvil ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  --sr-fab-tv-bottom: 82px;
  --sr-fab-top-bottom: 144px;
  #sr-tv-fab { font-size: .74rem; padding: 8px 12px 8px 9px; gap: 6px; }
  #sr-tv-fab .sr-tv-fab-play { width: 21px; height: 21px; font-size: .62rem; }
  .whatsapp-fab { width: 52px !important; height: 52px !important; }
  .sr-btn-arriba { width: 42px; height: 42px; font-size: .95rem; }
  #sr-tv-flotante { bottom: 200px !important; }
}
@media (max-width: 320px) { #sr-tv-fab { display: none; } }