/* =========================================================
   MiApp Shared UI + Place Templates + Themes (FINAL LIGHT)
   - Template (layout):  data-template="service|food|store"
   - Theme (colores):    data-theme="midnight|slate|sand"
   - NO toca el body global: TODO vive en .placeRoot
========================================================= */

/* ===== MiApp Shared UI ===== */

/* Badge de plan */
.plan-badge{
  position:absolute;
  top:12px;
  right:12px;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#fff;
  background:rgba(120,120,120,.75);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 35px rgba(0,0,0,.18);
  user-select:none;
}

/* Variantes */
.plan-free{ background:rgba(120,120,120,.75); }
.plan-pro{
  background:linear-gradient(135deg, rgba(122,162,255,.95), rgba(80,255,210,.75));
}
.plan-gold{
  background:linear-gradient(135deg, rgba(212,175,55,.95), rgba(246,226,122,.85));
  color:#111;
}

/* Para que se pueda usar dentro de cards/covers */
.has-badge{ position:relative; }

/* ====== MIAPP Place Analytics ====== */
#place-analytics .aCard{
  min-width:130px;
  flex:1 1 140px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#ffffff;
}
#place-analytics .aNum{
  font-size:22px;
  font-weight:800;
  line-height:1.1;
  color:#18212f;
}
#place-analytics .aLbl{
  font-size:12px;
  color:#667085;
  margin-top:4px;
}
/* ====== /MIAPP Place Analytics ====== */


/* =========================
   PLACE TEMPLATES (base)
========================= */

.tpl{
  color:#18212f;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.tpl .title{
  font-weight:900;
  letter-spacing:-.02em;
  color:#18212f;
}
.tpl .meta{
  color:#667085;
  white-space:pre-line;
  font-size:13px;
  margin-top:8px;
}
.tpl .chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.tpl .chip{
  padding:6px 10px;
  border-radius:999px;
  background:#f3f6fb;
  border:1px solid #dbe3ef;
  font-size:12px;
  color:#344054;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #dbe3ef;
  background:#ffffff;
  color:#18212f;
  text-decoration:none;
  cursor:pointer;
  font-weight:800;
}
.btn:hover{ background:#eef4fb; }
.btn.disabled, a.disabled{ opacity:.45; pointer-events:none; }
.btn-ghost{ background:transparent; }
.btn-wa{
  background:#e8f7ee;
  border-color:#8ad5ae;
  color:#137c4d;
}
.btn-mini{
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
}

.cover{
  border-radius:18px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#f3f6fb;
}
.cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.section{
  margin:18px 0;
  padding:14px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(16,24,40,.08);
}
.h{
  font-weight:900;
  margin-bottom:10px;
  color:#18212f;
}
.p{
  color:#475467;
  white-space:pre-line;
  line-height:1.45;
}

.gallery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.thumb{
  border-radius:14px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  cursor:pointer;
}
.thumb img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
}

.products{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.prod{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid #e5e7eb;
  background:#ffffff;
}
.prodTitle{
  font-weight:900;
  color:#18212f;
}
.prodPrice{
  color:#667085;
  margin-top:6px;
  font-size:13px;
}

/* Lightbox */
.lb{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.75);
  z-index:9999;
  padding:18px;
}
.lb.open{ display:flex; }
.lbInner{
  position:relative;
  max-width:980px;
  width:100%;
}
.lbClose{
  position:absolute;
  top:-10px;
  right:-10px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:26px;
  cursor:pointer;
}
#lbImg{
  width:100%;
  max-height:78vh;
  object-fit:contain;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:#fff;
}

/* Template: SERVICE */
.tpl-service .top{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  max-width:1080px;
  margin:0 auto;
  padding:18px;
}
.tpl-service .cover{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#f3f6fb;
  min-height:320px;
}
.tpl-service .cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tpl-service .coverShade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(24,33,47,.12));
}
.tpl-service .head{ padding:10px 4px; }
.tpl-service .actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

/* Template: FOOD */
.tpl-food .hero{ position:relative; }
.tpl-food .heroImg{
  position:relative;
  height:360px;
  overflow:hidden;
  border-bottom:1px solid #e5e7eb;
}
.tpl-food .heroImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tpl-food .heroGrad{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(24,33,47,.20));
}
.tpl-food .heroCard{
  max-width:980px;
  margin:-90px auto 0;
  padding:16px 18px;
  border-radius:22px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  box-shadow:0 18px 55px rgba(16,24,40,.10);
}
.tpl-food .kicker{
  color:#667085;
  font-weight:900;
  margin-bottom:4px;
}
.tpl-food .actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.tpl-food .grid2{
  max-width:980px;
  margin:16px auto 0;
  padding:0 18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.tpl-food .card{
  border-radius:22px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  padding:16px;
}
.tpl-food .footerActions{
  max-width:980px;
  margin:14px auto 28px;
  padding:0 18px;
}

/* Template: STORE */
.tpl-store .storeTop{
  max-width:1080px;
  margin:0 auto;
  padding:18px;
  display:grid;
  grid-template-columns:360px 1fr;
  gap:18px;
}
.tpl-store .thumbBig{
  border-radius:22px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#f3f6fb;
  height:360px;
}
.tpl-store .thumbBig img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tpl-store .actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

/* Responsive */
@media (max-width:900px){
  .tpl-service .top{ grid-template-columns:1fr; }
  .tpl-store .storeTop{ grid-template-columns:1fr; }
  .tpl-store .thumbBig{ height:280px; }
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .products{ grid-template-columns:1fr; }
  .tpl-food .grid2{ grid-template-columns:1fr; }
}

/* ====== MY PLACES / ADMIN UI ====== */
.mpShell{
  display:grid;
  grid-template-columns:320px minmax(520px, 1fr) 420px;
  gap:14px;
  padding:14px;
  min-height:100vh;
  box-sizing:border-box;
}

.mpLeft,.mpCenter,.mpRight{ min-width:0; }

.mpBrand{ padding:10px 10px 6px; }
.mpLogo{
  font-weight:950;
  color:#18212f;
  letter-spacing:-.02em;
}
.mpSub{
  color:#667085;
  font-size:12px;
}

.mpCard{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px;
  color:#18212f;
  box-shadow:0 10px 30px rgba(16,24,40,.08);
}

.mpCardTitle{
  font-weight:900;
  margin-bottom:10px;
  color:#18212f;
}

.mpBtn{
  appearance:none;
  border:1px solid #dbe3ef;
  background:#ffffff;
  color:#18212f;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:850;
}
.mpBtn:hover{ background:#eef4fb; }
.mpBtnPrimary{
  background:#eaf2ff;
  border-color:#bfdbfe;
  color:#1d4ed8;
}
.mpSearch input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #dbe3ef;
  background:#ffffff;
  color:#18212f;
  outline:none;
}

.mpList{
  margin-top:10px;
  display:grid;
  gap:10px;
}
.mpItem{
  padding:12px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  cursor:pointer;
}
.mpItem:hover{ background:#f8fbff; }
.mpItem.active{ outline:2px solid rgba(37,99,235,.20); }

.mpTopBar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.mpH1{
  font-size:18px;
  font-weight:950;
  color:#18212f;
}
.mpHint{
  color:#667085;
  font-size:12px;
  margin-top:2px;
}
.mpTopActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.mpGrid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.mpSpan2{ grid-column:1 / -1; }

.mpField label{
  display:block;
  font-size:12px;
  color:#667085;
  margin-bottom:6px;
}
.mpField input,
.mpField select,
.mpField textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #dbe3ef;
  background:#ffffff;
  color:#18212f;
  outline:none;
  box-sizing:border-box;
}

.mpRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.mpRowBetween{
  justify-content:space-between;
  align-items:center;
  width:100%;
}
.mpSmall{
  color:#667085;
  font-size:12px;
}

.mpPreviewBox{
  border-radius:14px;
  overflow:hidden;
  border:1px solid #dbe3ef;
  background:#ffffff;
  height:520px;
}
.mpPreviewBox iframe{
  width:100%;
  height:100%;
  border:0;
}

.mpAnalytics{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
#place-analytics .aCard{
  flex:1 1 120px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#ffffff;
}
#place-analytics .aNum{
  font-size:20px;
  font-weight:900;
}
#place-analytics .aLbl{
  font-size:12px;
  color:#667085;
  margin-top:4px;
}

.mpSticky{
  position:sticky;
  bottom:12px;
}

/* MODALS */
.mpModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:9999;
}
.mpModal.open{ display:flex; }
.mpModalCard{
  width:min(720px, 96vw);
  border-radius:18px;
  border:1px solid #dbe3ef;
  background:#ffffff;
  padding:14px;
  color:#18212f;
}
.mpModalHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.mpModalTitle{ font-weight:950; }
.mpX{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #dbe3ef;
  background:#ffffff;
  color:#18212f;
  font-size:22px;
  cursor:pointer;
}
.mpModalFoot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}

/* Responsive */
@media (max-width:1100px){
  .mpShell{ grid-template-columns:320px 1fr; }
  .mpRight{ display:none; }
}
@media (max-width:820px){
  .mpShell{ grid-template-columns:1fr; }
  .mpLeft{ order:1; }
  .mpCenter{ order:2; }
}

/* =========================================================
   PLACE THEMES (MiApp)
   - SOLO afecta a .placeRoot
   - Template: data-template="service|food|store"
   - Theme:    data-theme="midnight|slate|sand"
========================================================= */

.placeRoot{
  --bg1:#f8fafc;
  --bg2:#eef4fb;

  --card:#ffffff;
  --stroke:#e5e7eb;

  --text:#18212f;
  --muted:#667085;

  --accent:#2563eb;
  --shadow:0 10px 30px rgba(16,24,40,.08);

  min-height:100vh;
  color:var(--text);

  background:
    radial-gradient(1000px 420px at 10% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(59,130,246,.06), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Cards/paneles dentro del template */
.placeRoot .card,
.placeRoot .panel,
.placeRoot .box,
.placeRoot .tile,
.placeRoot .placeCard{
  background:var(--card);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}

/* Botón principal */
.placeRoot .btnPrimary{
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ===== templates (layout) ===== */
.placeRoot[data-template="service"]{
  --bg1:#f8fafc;
  --bg2:#eef4fb;
  --accent:#2563eb;
}
.placeRoot[data-template="food"]{
  --bg1:#fffaf5;
  --bg2:#fff1e8;
  --accent:#ea580c;
}
.placeRoot[data-template="store"]{
  --bg1:#f8fafc;
  --bg2:#eef6f2;
  --accent:#16a34a;
}

/* ===== themes (DB / URL) ===== */
.placeRoot[data-theme="midnight"]{
  --bg1:#f8fafc;
  --bg2:#eef4fb;
  --card:#ffffff;
  --stroke:#dbe3ef;
  --text:#18212f;
  --muted:#667085;
  --accent:#2563eb;

  background:
    radial-gradient(1000px 420px at 10% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(59,130,246,.06), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.placeRoot[data-theme="slate"]{
  --bg1:#f7f8fb;
  --bg2:#eef2f7;
  --card:#ffffff;
  --stroke:#dde3ea;
  --text:#1b2430;
  --muted:#667085;
  --accent:#2563eb;

  background:
    radial-gradient(1000px 420px at 10% -10%, rgba(71,85,105,.06), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(59,130,246,.05), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.placeRoot[data-theme="sand"]{
  --bg1:#fffaf3;
  --bg2:#f6efe4;
  --card:#fffdf9;
  --stroke:#eadfce;
  --text:#3b2b20;
  --muted:#7b6856;
  --accent:#c6841a;

  background:
    radial-gradient(1000px 420px at 10% -10%, rgba(198,132,26,.08), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(251,191,36,.05), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

#btnAddressOk{
  box-shadow:0 10px 30px rgba(37,99,235,.15);
}
#btnAddressOk:active{
  transform:scale(.98);
}

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.page{
  width:100%;
  max-width:var(--pageMax);
  margin:0 auto;
  padding:14px 12px 24px;
  overflow-x:hidden;
}

.shell{
  width:100%;
  min-width:0;
}

.hero{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:start;
}

.mediaCol,
.infoCol,
.coverWrap,
.metaCard,
.descCard,
.actions,
.title{
  min-width:0;
  width:100%;
}

.coverWrap{
  aspect-ratio:4/3;
}

.coverWrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.title{
  font-size:34px;
  line-height:1.05;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.badge{
  max-width:100%;
}

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.actionBtn{
  min-width:0;
  width:100%;
  padding:13px 12px;
  font-size:16px;
}

.metaText,
.descText{
  word-break:break-word;
  overflow-wrap:anywhere;
}

.gallery{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.gItem{
  width:100%;
}

@media (max-width:640px){
  .hero,
  .section{
    padding:14px;
    border-radius:18px;
  }

  .title{
    font-size:30px;
  }

  .sectionTitle{
    font-size:24px;
  }

  .actions{
    grid-template-columns:1fr;
  }
}