/* =========================================================
   /public_html/css/modal.css
   Modal de anuncio LuxaryModels
   ========================================================= */

body.lm-modal-open{
  overflow:hidden;
}

/* ===== Contenedor global modal ===== */
.lm-modal[hidden]{
  display:none !important;
}

.lm-modal{
  position:fixed;
  inset:0;
  z-index:99999;
}

.lm-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.lm-modal-dialog{
  position:relative;
  width:min(1180px, calc(100vw - 24px));
  height:min(94vh, 940px);
  margin:3vh auto;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
  animation:lmModalIn .18s ease-out;
}

@keyframes lmModalIn{
  from{
    opacity:0;
    transform:translateY(10px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.lm-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:60;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:rgba(17,24,39,.92);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

.lm-modal-close:hover{
  background:#111827;
}

.lm-modal-body{
  height:100%;
  overflow:auto;
  background:#fff;
}

.lm-modal-body::-webkit-scrollbar{
  width:10px;
}

.lm-modal-body::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:999px;
}

.lm-modal-body::-webkit-scrollbar-track{
  background:transparent;
}

.lm-modal-error,
.lm-modal-loading{
  padding:40px 20px;
  text-align:center;
  color:#111827;
  font-size:15px;
}

/* ===== Perfil dentro del modal ===== */
.lm-modal-profile{
  background:#fff;
  color:#111827;
  padding:18px 14px 20px;
}

.lm-modal-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(320px, .9fr);
  gap:20px;
  align-items:start;
  max-width:1100px;
  margin:0 auto;
}

.lm-modal-main,
.lm-modal-side{
  min-width:0;
}

/* mismo orden que perfil real en desktop */
.lm-modal-main{
  order:1;
}

.lm-modal-side{
  order:2;
}

/* ===== Breadcrumbs ===== */
.lm-breadcrumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 10px;
}

.lm-breadcrumbs a,
.lm-breadcrumbs span{
  font-size:12px;
  color:#6b7280;
}

/* ===== Media ===== */
.lm-media-card{
  background:transparent;
  border-radius:14px;
  overflow:hidden;
  max-width:400px;
  margin:0 auto;
}

.lm-media-hero{
  position:relative;
  aspect-ratio:4/5;
  background:#000;
  max-width:400px;
}

.lm-media-hero img,
.lm-media-hero video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.lm-play-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  background:rgba(0,0,0,.45);
  color:#fff;
  cursor:pointer;
}

.lm-play-btn .icon{
  width:28px;
  height:28px;
  display:block;
  filter:brightness(0) invert(1);
}

/* ===== Botones acciones ===== */
.lm-action-row{
  display:flex;
  gap:10px;
  margin:10px auto 0;
  max-width:400px;
  flex-wrap:wrap;
}

.lm-action-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px;
  border-radius:12px;
  border:1px solid #cbd5e1;
  background:#fff;
  cursor:pointer;
  text-decoration:none;
}

.lm-action-btn .icon{
  width:22px;
  height:22px;
  display:block;
}

.lm-track-tel{ border-color:#0ea5e9; }
.lm-action-wa{ border-color:#25D366; }
.lm-action-tg{ border-color:#38bdf8; }
.lm-share-btn{ border-color:#6b7280; }

/* ===== Stats ===== */
.lm-stats{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:12px;
}

.lm-stats-head{
  grid-column:1 / -1;
  font-size:16px;
  font-weight:800;
  margin:0 0 6px;
}

.lm-stat-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px;
  text-align:center;
}

.lm-stat-box .num{
  font-size:18px;
  font-weight:900;
  color:#111827;
}

.lm-stat-box .lbl{
  font-size:12px;
  color:#475569;
}

/* ===== Tarjeta principal ===== */
.lm-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
}

.lm-title{
  font-size:22px;
  line-height:1.25;
  margin:8px 0 6px;
}

/* ===== Chips ===== */
.lm-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0;
}

.lm-chip{
  background:#DEF2FC;
  border:0;
  color:#0b3b52;
  padding:6px 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:400;
  text-decoration:none;
}

.lm-chip-verified{
  background:#1646a3;
  color:#fff;
  font-weight:700;
}

.lm-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
}

.lm-badge.ok{
  background:#14b85a;
  color:#fff;
  font-weight:800;
  box-shadow:0 0 0 1px rgba(0,0,0,.04) inset;
}

.lm-badge.no{
  background:#f3f4f6;
  color:#334155;
}

/* ===== Pago seguro ===== */
.lm-pay-box{
  margin:14px 0 10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.lm-pay-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:0 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  color:#fff;
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  border:1px solid #1e40af;
  box-shadow:0 10px 24px rgba(37,99,235,.22);
}

.lm-pay-btn .icon{
  width:16px;
  height:16px;
  display:block;
  filter:brightness(0) invert(1);
}

.lm-pay-note{
  font-size:12px;
  color:#6b7280;
  line-height:1.35;
}

/* ===== Secciones ===== */
.lm-section{
  margin-top:12px;
}

.lm-section h2{
  font-size:16px;
  margin:0 0 8px;
}

.lm-section p{
  margin:0 0 10px;
  line-height:1.6;
  color:#111827;
}

.lm-note{
  margin-top:8px;
  background:#fff;
  color:#ea1d5e;
  display:inline-block;
  padding:6px 10px;
  border-radius:8px;
  font-weight:500;
}

/* ===== Salidas ===== */
.lm-link-list a{
  display:inline-block;
  margin:0 6px 6px 0;
  padding:6px 12px;
  border-radius:999px;
  background:#eef2f7;
  color:#0f172a;
  border:1px solid #e5e7eb;
  text-decoration:none;
}

/* ===== Galería ===== */
.lm-gallery{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.lm-gallery img{
  width:100%;
  max-width:400px;
  margin:0 auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #e5e7eb;
  display:block;
  cursor:zoom-in;
}

/* ===== Ratings ===== */
.lm-ratings-head{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.lm-pill{
  display:grid;
  place-items:center;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  min-width:88px;
  background:#fff;
}

.lm-ratings-head .lm-pill:first-child{
  background:#ea1d5e;
  border-color:#ea1d5e;
  color:#fff;
}

.lm-ratings-head .lm-pill:not(:first-child){
  background:#14b85a;
  border-color:#14b85a;
  color:#fff;
}

.lm-pill-num{
  font-size:20px;
  font-weight:900;
  line-height:1;
}

.lm-pill-lbl{
  font-size:12px;
  opacity:.95;
}

.lm-ratings-list{
  display:grid;
  gap:14px;
}

.lm-rate-item{
  position:relative;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  overflow:hidden;
}

.lm-rate-date{
  font-size:12px;
  color:#475569;
  margin-bottom:6px;
}

.lm-rate-comment{
  margin:0;
  font-size:14px;
  color:#111827;
}

.lm-rate-source{
  font-size:12px;
  color:#475569;
  margin-top:6px;
}

.lm-rate-source a{
  color:inherit;
  text-decoration:underline dotted;
}

.lm-rate-scores{
  position:absolute;
  right:12px;
  top:12px;
  display:flex;
  gap:6px;
}

.lm-score{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:30px;
  padding:0 8px;
  background:#14b85a;
  color:#fff;
  border:1px solid #14b85a;
  border-radius:6px;
  font-weight:800;
  font-size:14px;
}

/* ===== Recomendados ===== */
.lm-rec-grid{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(3,1fr);
}

.lm-rec-grid a{
  display:block;
  position:relative;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}

.lm-rec-grid a::before{
  content:"";
  display:block;
  padding-top:150%;
}

.lm-rec-grid a img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== Botones finales ===== */
.lm-center{
  text-align:center;
}

.lm-more-btn{
  display:inline-block;
  padding:9px 13px;
  border-radius:9px;
  background:#f3f4f6;
  color:#111827;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  border:1px solid #e5e7eb;
}

.lm-report-btn{
  display:inline-block;
  background:#fee2e2;
  color:#7f1d1d;
  border:1px solid #fecaca;
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  text-decoration:none;
}

/* ===== Responsive ===== */
@media (min-width: 992px){
  .lm-gallery{
    grid-template-columns:repeat(2,1fr);
  }

  .lm-rec-grid a:nth-child(n+4){
    display:none;
  }
}

@media (max-width: 991.98px){
  .lm-modal-dialog{
    width:min(100vw - 12px, 1000px);
    height:min(97vh, 1000px);
    margin:6px auto;
    border-radius:16px;
  }

  .lm-modal-profile{
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  }

  .lm-modal-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .lm-modal-main{
    order:1;
  }

  .lm-modal-side{
    order:0;
  }

  .lm-media-card,
  .lm-media-hero{
    max-width:100%;
  }

  .lm-gallery{
    grid-template-columns:1fr;
  }

  /* barra inferior mobile como el perfil real */
  .lm-action-row{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:55;
    max-width:none;
    margin:0;
    padding:10px;
    gap:10px;
    background:rgba(255,255,255,.96);
    border-top:1px solid #e5e7eb;
    box-shadow:0 -6px 18px rgba(0,0,0,.06);
  }

  .lm-action-btn{
    min-height:48px;
    border-radius:12px;
  }

  .lm-stats{
    margin-bottom:8px;
  }
}

@media (max-width: 640px){
  .lm-modal-dialog{
    width:100vw;
    height:100vh;
    margin:0;
    border-radius:0;
  }

  .lm-modal-close{
    top:10px;
    right:10px;
    width:40px;
    height:40px;
  }

  .lm-modal-profile{
    padding:12px 8px calc(env(safe-area-inset-bottom, 0px) + 92px);
  }

  .lm-action-row{
    gap:8px;
    padding:10px 8px calc(env(safe-area-inset-bottom, 0px) + 10px);
  }

  .lm-action-btn{
    min-width:0;
  }

  .lm-rec-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .lm-rate-scores{
    position:static;
    margin-top:8px;
  }

  .lm-pay-btn{
    width:100%;
  }
}