/* =========================
   producto.php (extraído)
========================= */

.product-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.product-topbar .pill{ margin-bottom:0; }

.topbar-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

.btn-fav{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.btn-fav.is-on{
  border-color: rgba(255,204,51,0.9) !important;
  box-shadow: 0 0 0 1px rgba(255,204,51,0.35);
}

/* =========================
   Layout
========================= */
.product-layout{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(280px,1.6fr);
  gap:18px;
  align-items:flex-start;
}
@media (max-width:880px){
  .product-layout{ grid-template-columns:minmax(0,1fr); }
}

.product-gallery,
.product-main,
.product-sidebar{
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  background: rgba(8,15,36,0.96);
  box-shadow:0 18px 40px rgba(0,0,0,0.8);
}

/* =========================
   Galería
========================= */
.product-gallery{ padding:10px 10px 12px; }

.product-gallery-main{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#000;
}

.product-gallery-main img{
  width:100%;
  max-height:380px;
  object-fit:cover; /* mobile ok */
  display:block;
}

/* En PC: evitar recorte de fotos altas (mostrar completa) */
@media (min-width:881px){
  .product-gallery-main img{
    max-height:520px;
    object-fit:contain; /* NO recorta */
    background:#000;
  }
}

.product-ribbon{
  position:absolute;
  top:10px;
  left:10px;
  padding:4px 9px;
  border-radius:var(--radius-pill);
  background:rgba(0,0,0,0.7);
  border:1px solid rgba(255,255,255,0.35);
  font-size:11px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color: rgba(245,245,245,0.95);
}

.product-ribbon .dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background: var(--accent-secondary);
  box-shadow:0 0 0 3px rgba(79,209,197,0.35);
}

.ribbon-real-amount{
  text-decoration: line-through;
  opacity: .95;
}

.product-gallery-thumbs{
  display:flex;
  gap:6px;
  margin-top:8px;
  overflow-x:auto;
  padding-bottom:2px;
}
.product-thumb{
  appearance:none;
  background:transparent;
  padding:0;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  flex:0 0 64px;
  height:48px;
  opacity:0.7;
  transition: opacity .15s ease, transform .1s ease, border-color .15s ease;
}
.product-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-thumb:hover{ opacity:.95; transform: translateY(-1px); }
.product-thumb.active{ opacity:1; border-color: rgba(255,204,51,0.9); }

/* =========================
   Columna central
========================= */
.product-main{
  padding:14px 14px 12px;
  background: radial-gradient(circle at top left, rgba(248,250,252,0.02), rgba(8,15,36,0.98));
}
.product-main h1{ font-size:22px; margin-bottom:4px; letter-spacing:.01em; }
.product-org{ font-size:12px; color: var(--text-muted); margin-bottom:6px; }

.product-info-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
  font-size:11px;
}
.product-info-pill{
  padding:4px 9px;
  border-radius:var(--radius-pill);
  background: rgba(15,23,42,0.85);
  border:1px solid rgba(148,163,253,0.3);
  color: rgba(226,232,240,0.9);
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.product-price-block{ margin-top:12px; }
.product-price-label{ font-size:11px; color: var(--text-muted); }
.product-price-value{ font-size:22px; font-weight:700; letter-spacing:.02em; }

/* =========================
   Números
========================= */
.numbers-card{
  margin-top:12px;
  padding:10px 11px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02);
  border:1px dashed rgba(255,255,255,0.14);
  font-size:12px;
}

.numbers-list{
  margin-top: 8px;
  display: grid;
  gap: 10px;
}

/* En CELU: SIEMPRE 6 columnas */
@media (max-width: 700px){
  .numbers-list{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* En desktop: auto-fit */
@media (min-width: 701px){
  .numbers-list{
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  }
}

.num-pill{
  width: 100%;
  min-width: 40px;
  min-height: 40px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.num-pill:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.26);
  transform: translateY(-1px);
}
.num-pill.selected{
  background: rgba(255,204,51,0.18);
  border-color: rgba(255,204,51,0.8);
  color: var(--accent-soft);
}
.num-pill.num-sold{
  background: rgba(220,38,38,0.16);
  border-style:solid;
  border-color: rgba(248,113,113,0.85);
  color:#fecaca;
  text-decoration: line-through;
  cursor:not-allowed;
}
.num-pill.num-sold:hover{
  transform:none;
  background: rgba(220,38,38,0.18);
}

.numbers-footer{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* Pager centrado y más grande */
.numbers-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 14px;
  margin: 10px 0 12px;
  font-size: 16px;
  color: var(--text-muted);
  width: 100%;
  text-align:center;
}

.numbers-pager button{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.22);
  background: rgba(15,23,42,0.92);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
  cursor:pointer;
}
.numbers-pager button:disabled{ opacity:.4; cursor:default; }

.progress-wrap{ margin-top:14px; font-size:12px; }
.progress-label{
  display:flex;
  justify-content:space-between;
  margin-bottom:4px;
  color: rgba(255,255,255,0.8);
}
.progress-bar{
  width:100%;
  height:7px;
  border-radius:999px;
  background: rgba(15,23,42,0.95);
  border:1px solid rgba(148,163,253,0.35);
  overflow:hidden;
}
.progress-inner{
  height:100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #a3e635, #facc15);
  box-shadow:0 0 18px rgba(56,189,248,0.4);
}

.status-alert{
  margin-top:10px;
  font-size:11px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  color: rgba(226,232,240,0.9);
}
.status-alert span.strong{ font-weight:600; color: var(--accent-soft); }

/* =========================
   Sidebar
========================= */
.product-sidebar{
  padding:14px 13px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.product-sidebar-section{
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin-bottom:6px;
}
.product-sidebar-section:last-child{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}
.sidebar-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color: rgba(148,163,184,0.9);
  margin-bottom:5px;
}
.small-note{
  font-size:11px;
  color: var(--text-muted);
  line-height:1.5;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  font-size:12px;
  margin-top:4px;
}
.summary-tag{
  padding:2px 7px;
  border-radius:999px;
  background: rgba(15,23,42,0.9);
  border:1px solid rgba(148,163,253,0.4);
  font-size:10px;
  color: rgba(226,232,240,0.95);
}
.summary-value{
  font-size:13px;
  font-weight:600;
  color: rgba(248,250,252,0.95);
}

/* =========================
   Pills (estado) - alineado al HTML/PHP
========================= */
.pill.pill-drawn{
  border: 1px solid rgba(34,197,94,0.85);
  background: rgba(34,197,94,0.12);
  color: #bbf7d0;
}
.pill.pill-wait{
  border: 1px solid rgba(250,204,21,0.90);
  background: rgba(250,204,21,0.10);
  color: #fde68a;
}
/* Pausada (rojo) */
.product-topbar .pill.pill-paused{
  background: rgba(127,29,29,0.92);
  border-color: rgba(248,113,113,0.95);
  color:#fee2e2;
  box-shadow:0 0 0 1px rgba(248,113,113,0.45);
}
.product-topbar .pill.pill-paused .pill-dot{
  background:#f97373;
  box-shadow:0 0 0 3px rgba(248,113,113,0.45);
}

/* Dot para estados */
.product-topbar .pill.pill-drawn .pill-dot{
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,0.35);
}
.product-topbar .pill.pill-wait .pill-dot{
  background:#facc15;
  box-shadow:0 0 0 3px rgba(250,204,21,0.30);
}

/* Ícono de la pill */
.pill .pill-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  margin-right:8px;
  font-weight:900;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  font-size:12px;
}

/* =========================
   Advertencia cuenta pago
========================= */
.mp-warning-wrapper{ margin-top:6px; width:100%; }
.mp-warning-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(148,163,253,0.5);
  background: rgba(15,23,42,0.9);
  color: rgba(226,232,240,0.95);
}
.mp-warning-pill.mp-pill-user{
  border-color: rgba(251,191,36,0.9);
  background: rgba(120,53,15,0.9);
}
.mp-warning-pill.mp-pill-verified{
  border-color: rgba(59,130,246,0.9);
  background: rgba(30,64,175,0.9);
}
.mp-warning-pill.mp-pill-site{
  border-color: rgba(56,189,248,0.8);
  background: rgba(12,74,110,0.9);
}
.mp-warning-text{ font-weight:500; }
.mp-warning-help{
  width:18px;
  height:18px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:11px;
  font-weight:700;
  color:#111827;
  background:#facc15;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.mp-warning-detail{
  margin-top:6px;
  padding:8px 10px;
  border-radius:8px;
  background:#facc15;
  color:#1f2937;
  font-size:11px;
  line-height:1.5;
  display:none;
}

/* =========================
   Autor (sidebar)
========================= */
.product-author-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  margin:0 0 10px;
  border-radius: var(--radius-lg);
  border:1px solid rgba(59,130,246,0.4);
  background: radial-gradient(circle at top left, rgba(37,99,235,0.30), rgba(15,23,42,0.98));
}
.product-author-card.is-link{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.product-author-card.is-link:hover{
  transform: translateY(-1px);
  border-color: rgba(147,197,253,0.75);
  box-shadow: 0 12px 26px rgba(0,0,0,0.35);
}

.author-avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  overflow:hidden;
  border:2px solid rgba(191,219,254,0.9);
  flex-shrink:0;
  background: rgba(15,23,42,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
}
.author-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.author-initials{ font-size:16px; font-weight:600; color:#e5edff; }

.author-info{ display:flex; flex-direction:column; gap:2px; }
.author-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color: rgba(191,219,254,0.9);
}
.author-name{
  font-size:13px;
  font-weight:600;
  color:#e5edff;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.author-link{
  margin-top:3px;
  font-size:11px;
  font-style:italic;
  color: rgba(191,219,254,0.85);
}
.verified-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  background: radial-gradient(circle at top left, #60a5fa, #2563eb);
  color:#f9fafb;
  font-size:10px;
  font-weight:700;
}
.verified-icon{
  width:14px;
  height:14px;
  border-radius:999px;
  background:#1d4ed8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
}

/* ==========================
   OPINION GANADOR (capsula)
========================== */
.winner-opinion{
  margin: 14px 0 10px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.winner-opinion-head{
  display:flex;
  gap:12px;
  align-items:center;
}
.winner-opinion-avatar{
  width:46px;
  height:46px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 46px;
}
.winner-opinion-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.winner-opinion-avatar span{
  font-weight:800;
  font-size:18px;
  color: rgba(255,255,255,.9);
}
.winner-opinion-meta{ flex:1; min-width:0; }
.winner-opinion-title{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(148,163,184,.95);
  margin-bottom: 4px;
}
.winner-opinion-name{
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  display:flex;
  gap:10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.winner-opinion-date{
  font-size: 12px;
  font-weight: 600;
  color: rgba(148,163,184,.95);
}
.winner-opinion-stars{
  margin-top: 4px;
  font-size: 18px;
  line-height: 1;
}
.winner-opinion-stars .is-on{ color: #fbbf24; }
.winner-opinion-stars .is-off{ color: rgba(148,163,184,.55); }
.winner-opinion-text{
  margin-top: 10px;
  font-size: 14px;
  color: rgba(226,232,240,.92);
  font-style: italic;
}

/* ==========================
   LAYOUT DESKTOP: evitar hueco bajo la galería
========================== */
@media (min-width: 900px){
  .product-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 18px;
    align-items: start;
  }

  .product-gallery{
    grid-column: 1;
    grid-row: 1;
  }

  .product-sidebar{
    grid-column: 1;
    grid-row: 2;
  }

  .product-main{
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* Evita el doble-tap zoom en controles (mantiene pinch-zoom) */
.btn, .num-pill, .numbers-pager button, .product-thumb {
  touch-action: manipulation;
}

/* ==========================
   Resultado sorteo (cápsula)
========================== */
.rifa-draw-result{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(15,23,42,0.55);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rifa-draw-result .draw-badge{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.35);
}
.rifa-draw-result .draw-line{
  font-weight: 700;
  color: #e5e7eb;
}
.rifa-draw-result .draw-sep{
  margin: 0 6px;
  color: rgba(148,163,184,0.9);
}
.rifa-draw-result .draw-name{
  font-weight: 800;
}

/* Método de sorteo */
.product-draw-method{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(34,197,94,0.30);
  background: rgba(34,197,94,0.08);
  color: #d1fae5;
  font-size: 13px;
}



/* SI ES MAYOR DE EDAD */
.age-gate{
  margin: 10px 0 10px;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.age-gate-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.age-gate-label{
  font-weight:800;
  color:#e5e7eb;
  font-size:14px;
}

.age-gate-help{
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color:#e5e7eb;
  font-weight:900;
  cursor:pointer;
}

/* =========================
   Age gate (+18) - chips NO/SI
   - sin puntos (radio nativo oculto)
   - el seleccionado queda 100% iluminado
========================= */

.age-gate-opts{
  display:flex;
  gap:12px;
}

.age-opt{
  flex:1;
  position:relative;
  cursor:pointer;
  user-select:none;
}

/* Oculta el radio nativo */
.age-opt input[type="radio"]{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

/* Chip base */
.age-opt span{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:#e5e7eb;
  font-weight:800;
  letter-spacing:.2px;
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}

.age-opt:hover span{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
}

.age-opt input[type="radio"]:checked + span{
  background: rgba(250,204,21,.22);
  border-color: rgba(250,204,21,.95);
  color:#fff;
  box-shadow:
    0 0 0 2px rgba(250,204,21,.18),
    0 12px 34px rgba(250,204,21,.22);
  transform: translateY(-1px);
}

.age-opt input[type="radio"]:focus-visible + span{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(147,197,253,.22),
    0 0 0 1px rgba(147,197,253,.55);
}

.age-gate-detail{
  margin-top:8px;
  font-size:13px;
  color:#94a3b8;
}



.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

.num-pill.num-disabled{
  opacity: .45;
  cursor: not-allowed;
}

.need-login-alert{
  margin-top: 10px;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(248,113,113,.45);
  background: rgba(248,113,113,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.need-login-text{
  color:#fecaca;
  font-weight:800;
}

.num-pill.num-disabled:hover{
  transform:none;
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
}


/* =========================
   Ajustes +18 (unificar con UI y centrar)
========================= */
.age-gate{
  text-align:center;
  padding: 14px 14px 12px;
}

.age-gate-top{
  justify-content:center;
  margin-bottom:10px;
  position:relative;
}

.age-gate-label{
  font-size:15px;
  letter-spacing:.2px;
}

.age-gate-help{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:28px; height:28px;
}

.age-gate-opts{ gap:10px; }

.age-opt span{
  min-height:48px;
  padding:14px 14px;
  font-size:15px;
}

.age-opt input[type="radio"]:checked + span{
  background: rgba(250,204,21,.20);
  border-color: rgba(250,204,21,.95);
  box-shadow:
    0 0 0 3px rgba(250,204,21,.14),
    0 14px 36px rgba(250,204,21,.18);
  transform:none;
}

/* =========================
   Ajustes botón comprar (solo en numbers-footer)
========================= */
.numbers-footer #btnComprar{
  width:100%;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:14px 16px;
  font-weight:900;
}
.numbers-footer #btnComprar .icon{
  font-size:18px;
}

/* =========================
   Ajustes info selección
========================= */
#seleccionInfo{
  margin-top:10px;
  text-align:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:#cbd5e1;
  line-height:1.35;
}

#seleccionInfo strong{ color:#e5e7eb; }

#listaSeleccionados{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:bottom;
}