.nav-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: #cbd5e1;
  transition: background .15s, color .15s;
}
.nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.chip-inc { display:inline-block; font-size:0.68rem; line-height:1; padding:0.3rem 0.5rem; border-radius:999px; background:#f5f5f5; color:#171717; border:1px solid #e5e5e5; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nav-btn:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav-btn.active { background: #ffffff; color: #0a0a0a; font-weight: 600; }
.nav-btn.preview-ext { width: 14px; height: 14px; opacity: .55; }
.preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  color: #78350f;
  font-size: 0.875rem;
  font-weight: 600;
  border-bottom: 1px solid #d97706;
  flex-shrink: 0;
}
.preview-banner button {
  background: rgba(255,255,255,.85);
  color: #78350f;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.preview-banner button:hover { background: #fff; }

.badge { display:inline-block; padding:.15rem .55rem; border-radius:9999px; font-size:.72rem; font-weight:600; }
.badge-pendiente { background:#fef3c7; color:#92400e; }
.badge-confirmada { background:#dbeafe; color:#1e40af; }
.badge-pagada { background:#dcfce7; color:#166534; }
.badge-cancelada { background:#fee2e2; color:#991b1b; }

.card { background:#fff; border-radius:1rem; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.btn { padding:.5rem 1rem; border-radius:.5rem; font-weight:600; font-size:.9rem; transition:.15s; }
.btn-primary { background:#171717; color:#fff; }
.btn-primary:hover { background:#000000; }
.btn-ghost { background:#f1f5f9; color:#334155; }

/* Imperial Noir — botón sync VDV (solo admin) */
.btn-sync-imperial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: #000000;
  color: #D4AF37;
  border: 1px solid #D4AF37;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: box-shadow .25s, border-color .25s, color .2s;
  cursor: pointer;
}
.btn-sync-imperial:hover:not(:disabled) {
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.35), inset 0 0 12px rgba(212, 175, 55, 0.08);
  border-color: #E8C84A;
  color: #E8C84A;
}
.btn-sync-imperial:disabled { opacity: 0.65; cursor: wait; }
.sync-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(212, 175, 55, 0.25);
  border-top-color: #D4AF37;
  border-radius: 50%;
  animation: sync-spin 0.7s linear infinite;
}
@keyframes sync-spin { to { transform: rotate(360deg); } }
.sync-meta { font-size: 0.8rem; color: #64748b; margin-top: 0.5rem; }
.sync-bot-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.sync-bot-dot.online { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }
.sync-bot-dot.offline { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
.sync-vdv-panel {
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  color: #f5f5f5;
}
.sync-vdv-panel h2 { color: #D4AF37; font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.sync-vdv-panel p { color: #a3a3a3; font-size: 0.8rem; }
.btn-ghost:hover { background:#e2e8f0; }
.input { width:100%; border:1px solid #cbd5e1; border-radius:.5rem; padding:.5rem .75rem; outline:none; }
.input:focus { box-shadow:0 0 0 2px #d4d4d4; border-color:#404040; }
table.tbl { width:100%; border-collapse:collapse; }
table.tbl th { text-align:left; font-size:.8125rem; text-transform:uppercase; letter-spacing:.04em; color:#334155; font-weight:700; padding:.65rem .75rem; border-bottom:1px solid #cbd5e1; }
table.tbl td { padding:.7rem .75rem; border-bottom:1px solid #f1f5f9; font-size:.9rem; color:#1e293b; }
table.tbl tr:hover td { background:#f8fafc; }

/* Portada del catalogo: formato horizontal 16:9 (tipo YouTube), cubre todo el encabezado */
.portada-catalogo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
  overflow: hidden;
}
.portada-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.portada-imagen {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.portada-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border: 0;
  pointer-events: none;
}
.portada-vacia {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.portada-thumb {
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #0a0a0a;
  position: relative;
  cursor: pointer;
}
.portada-thumb .portada-media { border-radius: 6px; }
.portada-prev-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #0a0a0a;
  position: relative;
}
.portada-prev-wrap .portada-media { border-radius: 0.5rem; }

/* --- Layout catalogo (tienda + panel): filtros y tarjetas en paralelo, ancho maximo --- */
.page-shell {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(0.65rem, 1.2vw, 1.1rem) clamp(0.65rem, 1.5vw, 1.25rem);
  color: #1e293b;
  line-height: 1.5;
}
.page-shell .text-slate-400 { color: #475569; }
.page-shell .text-slate-500 { color: #334155; }
.page-shell label,
.page-shell .text-xs.font-medium,
.page-shell label.text-xs {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}
.page-shell .text-xs { font-size: 0.8125rem; line-height: 1.45; }
.page-shell .text-sm { font-size: 0.9rem; line-height: 1.45; }
.page-shell .input { color: #0f172a; }
.page-shell .input::placeholder { color: #64748b; }
.page-shell .btn-ghost { color: #334155; font-weight: 600; }

.catalogo-shell {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: clamp(0.65rem, 1.5vw, 1.25rem);
  padding-right: clamp(0.65rem, 1.5vw, 1.25rem);
}

/* Filtros a la izquierda | paquetes a la derecha (misma fila en desktop) */
.catalogo-layout {
  display: grid;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .catalogo-layout {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 1.25rem;
  }
}

/* Filtros: pegados al borde izquierdo del area util, con scroll interno */
.filtros-panel {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  padding: 1rem 1rem;
}
@media (min-width: 1024px) {
  .filtros-panel {
    position: sticky;
    top: 0.75rem;
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }
  .filtros-panel::-webkit-scrollbar { width: 6px; }
  .filtros-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
}
#preview-banner:not(.hidden) ~ #page .filtros-panel {
  top: 3rem;
  max-height: calc(100vh - 3.75rem);
}
.filtros-panel .filtros-body { display: flex; flex-direction: column; gap: 0.85rem; }

/* 3 paquetes por fila en desktop; portada 16:9 aprovecha el ancho extra */
.catalogo-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}
@media (min-width: 640px) {
  .catalogo-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }
}
@media (min-width: 1080px) {
  .catalogo-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

/* Portada embed: cubrir todo el ancho y alto sin bandas */
.portada-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.portada-embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 100%;
  min-width: 100%;
  min-height: 177.78%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}