/* ============================================================
   kp-preview.css — Modal del anuncio (#publicPreviewModal)
   Estilo plano y moderno: un solo acento, superficies limpias,
   sin brillos ni degradados. La lógica sigue en index.js.
   ============================================================ */
#publicPreviewModal {
  --pv-accent: #E11D48;
  --pv-ink: #18181B;
  --pv-muted: #71717A;
  --pv-line: #ECECEE;
  --pv-bg: #F6F6F7;
  --pv-card: #FFFFFF;
  background: rgba(9, 9, 11, .62) !important;
  backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
}
body.dark-theme #publicPreviewModal {
  --pv-accent: #FB7185;
  --pv-ink: #F4F4F5;
  --pv-muted: #A1A1AA;
  --pv-line: #27272A;
  --pv-bg: #1F1F23;
  --pv-card: #141416;
}

#publicPreviewModal .modal-content {
  width: min(1040px, calc(100vw - 128px)) !important;
  max-height: calc(100dvh - 40px) !important;
  border-radius: 20px !important;
  background: var(--pv-card) !important; background-image: none !important;
  border: 1px solid var(--pv-line) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28) !important;
  overscroll-behavior: contain;
}

/* ── Cabecera ── */
#publicPreviewModal .premium-preview-header {
  display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 10px !important;
  padding: 12px 64px 12px 16px !important;
  background: var(--pv-card) !important; background-image: none !important;
  border-bottom: 1px solid var(--pv-line) !important; border-radius: 20px 20px 0 0 !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
#publicPreviewModal .premium-heart-btn {
  width: 40px !important; height: 40px !important; flex: 0 0 auto;
  background: var(--pv-bg) !important; border: 0 !important; box-shadow: none !important;
  color: var(--pv-ink) !important; transform: none !important;
}
#publicPreviewModal .premium-heart-icon { color: currentColor !important; width: 20px !important; height: 20px !important; }
#publicPreviewModal .premium-heart-btn.active, #publicPreviewModal .premium-heart-btn.is-favorite,
#publicPreviewModal .premium-heart-btn[aria-pressed="true"] { color: var(--pv-accent) !important; }
#publicPreviewModal #publicPreviewStatus {
  order: 3; flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--pv-muted) !important; font-size: .86rem !important; font-weight: 500 !important;
  text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: auto !important; animation: none !important;
}
#publicPreviewModal #publicPreviewStatus::before, #publicPreviewModal #publicPreviewStatus::after { content: none !important; }
#publicPreviewModal #publicPreviewVerifiedBadge {
  order: 2; flex: 0 0 auto; margin: 0 !important;
  padding: 4px 8px !important; border-radius: 6px !important;
  background: #E8F4FD !important; color: #1D72B8 !important; border: 0 !important; box-shadow: none !important;
  font-size: .72rem !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important;
}
body.dark-theme #publicPreviewModal #publicPreviewVerifiedBadge { background: rgba(29, 155, 240, .15) !important; color: #7CC4F8 !important; }
#publicPreviewModal #publicPreviewVerifiedBadge svg { filter: none !important; }
#publicPreviewModal #publicPreviewVerifiedBadge svg path:first-child { fill: #1D9BF0 !important; }

#publicPreviewModal #publicClosePreviewBtn {
  position: fixed !important; top: 14px !important; right: 14px !important; z-index: 5000 !important;
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: var(--pv-card) !important; color: var(--pv-ink) !important;
  border: 1px solid var(--pv-line) !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
}

/* ── Rejilla ── */
#publicPreviewModal .public-preview-main {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 28px !important; padding: 20px 24px 0 !important;
}
@media (min-width: 900px) {
  #publicPreviewModal .public-preview-right { order: -1; }
}

/* Ver perfil completo */
#publicPreviewModal .kp-preview-profile {
  display: flex !important; align-items: center; gap: 10px;
  margin: 16px 24px 0 !important; padding: 12px 14px !important;
  border-radius: 12px !important; background: var(--pv-bg) !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important; color: var(--pv-ink) !important; text-decoration: none;
}
#publicPreviewModal .kp-preview-profile .kp-pp-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
#publicPreviewModal .kp-preview-profile strong { color: var(--pv-ink) !important; font-size: .92rem !important; }
#publicPreviewModal .kp-preview-profile span { color: var(--pv-muted) !important; font-size: .78rem !important; }
#publicPreviewModal .kp-preview-profile svg { color: var(--pv-muted); }

/* Título y datos */
#publicPreviewModal .public-preview-joined-title {
  font-family: inherit !important; font-size: clamp(1.2rem, 2.4vw, 1.55rem) !important;
  line-height: 1.3 !important; letter-spacing: -.01em;
  color: var(--pv-ink) !important; -webkit-text-fill-color: currentColor !important;
  background: none !important; font-weight: 700 !important; text-shadow: none !important;
}
#publicPreviewModal .public-preview-meta-line { gap: 6px !important; flex-wrap: wrap; margin-top: 8px; }
#publicPreviewModal .public-preview-meta-pill, #publicPreviewModal .public-preview-pill {
  border-radius: 8px !important; padding: 5px 10px !important;
  background: var(--pv-bg) !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important;
  color: var(--pv-ink) !important; font-weight: 500 !important; font-size: .8rem !important;
}
#publicPreviewModal .public-preview-description {
  margin-top: 16px !important; padding: 0 !important; background: none !important; border: 0 !important;
  color: var(--pv-ink) !important; line-height: 1.65 !important; font-size: .95rem !important;
}
#publicPreviewModal .public-preview-description div { color: var(--pv-muted) !important; font-weight: 500 !important; font-size: .85rem; }

/* Secciones: separadas por línea, sin cajas */
#publicPreviewModal .public-preview-section {
  margin-top: 18px !important; padding: 16px 0 0 !important;
  border: 0 !important; border-top: 1px solid var(--pv-line) !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
}
#publicPreviewModal .public-preview-details { margin: 0 !important; }
#publicPreviewModal .public-preview-section h4 {
  margin: 0 0 10px !important; color: var(--pv-muted) !important;
  font-size: .76rem !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .06em;
}
#publicPreviewModal .public-preview-section h4::before { content: none !important; }
#publicPreviewModal .public-preview-rates li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 !important; border-bottom: 1px solid var(--pv-line) !important; color: var(--pv-ink) !important;
}
#publicPreviewModal .public-preview-rates li:last-child { border-bottom: 0 !important; }
#publicPreviewModal .public-preview-rates strong { color: var(--pv-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
#publicPreviewModal .payment-methods-wrap > div:first-child { color: var(--pv-muted) !important; font-weight: 600 !important; }
#publicPreviewModal .schedule-section > div { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: var(--pv-ink) !important; }
#publicPreviewModal .schedule-section span[title] { box-shadow: none !important; }
#publicPreviewModal .schedule-section strong { color: var(--pv-ink) !important; }
#publicPreviewModal #triggerReportAdBtn {
  background: transparent !important; background-image: none !important; color: var(--pv-muted) !important;
  border: 1px solid var(--pv-line) !important; box-shadow: none !important;
  border-radius: 10px !important; font-size: .84rem !important;
}
#publicPreviewModal .recommendations-section h4 { color: var(--pv-muted) !important; }
#publicPreviewModal .rec-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; }
#publicPreviewModal .rec-card { border-radius: 12px !important; background: var(--pv-bg) !important; border: 0 !important; box-shadow: none !important; }
#publicPreviewModal .rec-card p { color: var(--pv-ink) !important; }

/* ── Fotos ── */
#publicPreviewModal .public-preview-right-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#publicPreviewModal .public-preview-photos-label { color: var(--pv-muted) !important; font-size: .76rem !important; font-weight: 600 !important; letter-spacing: .06em; background: none !important; -webkit-text-fill-color: currentColor !important; }
#publicPreviewModal .public-preview-code-row {
  background: var(--pv-bg) !important; border: 0 !important; box-shadow: none !important;
  color: var(--pv-muted) !important; border-radius: 8px !important; padding: 4px 8px !important;
}
#publicPreviewModal .public-preview-code-row strong { color: var(--pv-ink) !important; }
#publicPreviewModal .public-preview-photos-list { gap: 10px !important; margin-top: 0 !important; }
#publicPreviewModal .public-preview-main-frame {
  border-radius: 14px !important; overflow: hidden !important; box-shadow: none !important; border: 0 !important;
}
#publicPreviewModal .public-preview-photos-list .public-preview-main-frame { aspect-ratio: 3 / 4; height: auto !important; background: var(--pv-bg) !important; }
#publicPreviewModal .public-preview-photos-list .preview-photo { width: 100% !important; height: 100% !important; object-fit: cover !important; cursor: zoom-in; }
#publicPreviewModal .kp-pv-count {
  position: absolute; z-index: 3; padding: 4px 9px; border-radius: 999px;
  background: rgba(9, 9, 11, .6); color: #fff; font-size: .74rem; font-weight: 600; pointer-events: none;
}

/* ── Barra de contacto ── */
#publicPreviewModal .modal-sticky-contact-bar {
  display: flex !important; gap: 8px !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  background: var(--pv-card) !important; background-image: none !important;
  backdrop-filter: none !important; border-top: 1px solid var(--pv-line) !important; box-shadow: none !important;
}
#publicPreviewModal .sticky-contact-btn {
  flex: 1 1 0 !important; min-width: 0 !important; height: 48px !important;
  border-radius: 12px !important; gap: 7px !important; border: 0 !important;
  font-weight: 600 !important; font-size: .9rem !important; white-space: nowrap;
  box-shadow: none !important; background-image: none !important; transform: none !important;
}
#publicPreviewModal .sticky-contact-btn svg { width: 18px !important; height: 18px !important; flex: 0 0 auto; }
#publicPreviewModal .sticky-contact-btn.btn-phone { background: var(--pv-bg) !important; color: var(--pv-ink) !important; }
#publicPreviewModal .sticky-contact-btn.btn-telegram { background: var(--pv-bg) !important; color: #229ED9 !important; }
#publicPreviewModal .sticky-contact-btn.btn-whatsapp { background: #16A34A !important; color: #fff !important; flex-grow: 1.4 !important; }

/* Flechas anterior / siguiente */
#publicPreviewModal #prevAdBtn, #publicPreviewModal #nextAdBtn {
  width: 44px !important; height: 44px !important;
  background: var(--pv-card) !important; border: 1px solid var(--pv-line) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; color: var(--pv-ink) !important;
}

/* ── Tablet ── */
@media (max-width: 899px) {
  #publicPreviewModal .modal-content { width: min(720px, calc(100vw - 112px)) !important; }
  #publicPreviewModal .public-preview-main { grid-template-columns: 1fr !important; }
  #publicPreviewModal .public-preview-right { order: -1; position: relative; }
  #publicPreviewModal .public-preview-left, #publicPreviewModal .public-preview-right { padding-bottom: 0 !important; }
  #publicPreviewModal .public-preview-left { padding-bottom: 96px !important; }
  #publicPreviewModal .public-preview-photos-list {
    flex-direction: row !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  #publicPreviewModal .public-preview-photos-list::-webkit-scrollbar { display: none; }
  #publicPreviewModal .public-preview-photos-list .public-preview-main-frame { flex: 0 0 min(80%, 420px); scroll-snap-align: start; }
}

/* ── Móvil: pantalla completa, fotos de borde a borde ── */
@media (max-width: 640px) {
  #publicPreviewModal { padding: 0 !important; }
  #publicPreviewModal .modal-content {
    width: 100vw !important; max-height: 100dvh !important; height: 100dvh !important;
    border-radius: 0 !important; border: 0 !important;
  }
  #publicPreviewModal .premium-preview-header { border-radius: 0 !important; padding: 10px 62px 10px 12px !important; }
  #publicPreviewModal #publicClosePreviewBtn { top: 10px !important; right: 12px !important; }
  #publicPreviewModal .kp-preview-profile { margin: 12px 12px 0 !important; }
  #publicPreviewModal .public-preview-main { padding: 12px 0 0 !important; gap: 16px !important; }
  #publicPreviewModal .public-preview-left { padding: 0 16px 100px !important; }
  #publicPreviewModal .public-preview-right-top { padding: 0 16px; margin-bottom: 8px; }
  #publicPreviewModal .public-preview-photos-list { padding: 0 !important; gap: 0 !important; scroll-snap-type: x mandatory; }
  #publicPreviewModal .public-preview-photos-list .public-preview-main-frame {
    flex: 0 0 100%; border-radius: 0 !important; aspect-ratio: 4 / 5; scroll-snap-align: center;
  }
  #publicPreviewModal .videos-section { margin: 12px 16px 0 !important; }
  /* Las flechas entre anuncios tapaban el título: en móvil se ocultan */
  #publicPreviewModal #prevAdBtn, #publicPreviewModal #nextAdBtn { display: none !important; }
  #publicPreviewModal .modal-sticky-contact-bar {
    position: fixed !important; left: 0; right: 0; bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  #publicPreviewModal .sticky-contact-btn { font-size: .84rem !important; height: 48px !important; padding: 0 6px !important; }
}
@media (max-width: 360px) {
  #publicPreviewModal .sticky-contact-btn:not(.btn-whatsapp) { font-size: 0 !important; }
  #publicPreviewModal .sticky-contact-btn svg { width: 20px !important; height: 20px !important; }
}

/* Saludo en su propia línea para que no choque con el botón cerrar */
#publicPreviewModal .premium-preview-header { flex-wrap: wrap !important; row-gap: 6px !important; }
#publicPreviewModal #publicPreviewStatus { flex: 1 0 100% !important; white-space: normal; padding-left: 2px !important; }