/* ============================================================================
 * Marketing — Mi sitio (Fase B, 2026-10-14)
 * Estilos propios del panel del cliente #/mi-sitio: dashboard, configurador,
 * editor, vista de día a día (móvil) y vista previa del sitio.
 * Bloque separado a propósito: no se tocó styles.css para evitar conflictos
 * con el track #/servicios.
 * ========================================================================== */

/* ---------- Dashboard ---------- */
.ms-hero { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ms-status { display:flex; align-items:center; gap:.6rem; margin:.6rem 0; }
.ms-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem; }
.ms-card { display:block; padding:1rem 1.1rem; border:1px solid var(--border,#e2e8f0); border-radius:12px; background:var(--card,#fff); text-decoration:none; color:inherit; }
.ms-card:hover { border-color:#94a3b8; }
.ms-card h3 { margin:0 0 .3rem; font-size:1rem; }
.ms-card p { margin:0; font-size:.85rem; color:var(--muted,#64748b); }
.ms-ico { font-size:1.4rem; }

/* ---------- Configurador: pasos ---------- */
.ms-steps { display:flex; gap:.4rem; margin:1rem 0; flex-wrap:wrap; }
.ms-step { padding:.45rem .8rem; border-radius:999px; border:1px solid var(--border,#e2e8f0); font-size:.85rem; background:#f8fafc; }
.ms-step.active { background:#0f172a; color:#fff; border-color:#0f172a; }
.ms-step.done { background:#dcfce7; border-color:#86efac; }
.ms-tpl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.ms-tpl { border:2px solid var(--border,#e2e8f0); border-radius:12px; padding:1rem; cursor:pointer; background:#fff; }
.ms-tpl.selected { border-color:#0f172a; box-shadow:0 0 0 2px #0f172a22; }
.ms-tpl h3 { margin:.2rem 0 .4rem; }
.ms-tpl .badge { margin-bottom:.4rem; }
.ms-ai-card { border-left:4px solid #8b5cf6; background:#f5f3ff; padding:.9rem 1rem; border-radius:0 12px 12px 0; margin-bottom:1rem; }

/* ---------- Formularios del configurador / editor ---------- */
.ms-field { margin-bottom:.7rem; }
.ms-field > label { display:block; font-weight:600; font-size:.85rem; margin-bottom:.25rem; }
.ms-field input[type=text], .ms-field input[type=url], .ms-field input[type=number],
.ms-field textarea, .ms-field select { width:100%; }
.ms-color-row { display:flex; align-items:center; gap:.6rem; }
.ms-color-row input[type=color] { width:3rem; height:2.2rem; padding:0; border:1px solid var(--border,#e2e8f0); border-radius:8px; background:#fff; }
.ms-sec { border:1px solid var(--border,#e2e8f0); border-radius:12px; padding:.8rem 1rem; margin-bottom:.7rem; background:#fff; }
.ms-sec.off { opacity:.55; }
.ms-sec-head { display:flex; align-items:center; gap:.5rem; }
.ms-sec-head strong { flex:1; }
.ms-sec-body { margin-top:.7rem; border-top:1px dashed var(--border,#e2e8f0); padding-top:.7rem; }
.ms-order-btns button { min-width:2rem; }

/* ---------- Vista previa ---------- */
.ms-preview-shell { border:1px solid var(--border,#e2e8f0); border-radius:12px; overflow:hidden; background:#fff; }
.ms-preview-bar { display:flex; justify-content:space-between; align-items:center; padding:.5rem .9rem; background:#f1f5f9; font-size:.8rem; }
.ms-preview { --p1:#C0392B; --p2:#2C3E50; --pbg:#FFFFFF; --ptx:#1A1A1A; --pr:12px;
  background:var(--pbg); color:var(--ptx); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.ms-pv-hero { background:var(--p1); color:#fff; padding:2.2rem 1.4rem; text-align:center; }
.ms-pv-hero img { max-height:64px; margin-bottom:.6rem; }
.ms-pv-hero h2 { margin:.2rem 0 .4rem; font-size:1.6rem; }
.ms-pv-hero p { margin:0 0 1rem; opacity:.92; }
.ms-pv-cta { display:inline-block; background:#fff; color:var(--p1); font-weight:700; padding:.6rem 1.3rem; border-radius:var(--pr); text-decoration:none; }
.ms-pv-sec { padding:1.6rem 1.4rem; max-width:860px; margin:0 auto; }
.ms-pv-sec h3 { color:var(--p2); margin:0 0 .8rem; }
.ms-pv-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; }
.ms-pv-item { border:1px solid #e2e8f0; border-radius:var(--pr); padding:.7rem; background:#fff; }
.ms-pv-item img { width:100%; height:90px; object-fit:cover; border-radius:calc(var(--pr) - 4px); background:#f1f5f9; }
.ms-pv-item .price { font-weight:700; color:var(--p1); }
.ms-pv-photo { width:100%; height:160px; object-fit:cover; border-radius:var(--pr); background:#f1f5f9; display:block; margin-bottom:.8rem; }
.ms-pv-hours { background:#f8fafc; border-radius:var(--pr); padding:.9rem 1.1rem; }
.ms-pv-quote { border-left:4px solid var(--p1); padding:.4rem .9rem; margin-bottom:.8rem; font-style:italic; background:#fafafa; border-radius:0 var(--pr) var(--pr) 0; }
.ms-pv-wa { display:inline-block; background:#22c55e; color:#fff; font-weight:700; padding:.7rem 1.4rem; border-radius:var(--pr); text-decoration:none; }

/* ---------- Vista de día a día (móvil) ---------- */
.ms-day-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin:.8rem 0; }
.ms-metric { border:1px solid var(--border,#e2e8f0); border-radius:12px; padding:.8rem; background:#fff; }
.ms-metric .num { font-size:1.5rem; font-weight:800; }
.ms-metric .lbl { font-size:.78rem; color:var(--muted,#64748b); }
.ms-qa { display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0; }
.ms-order-detail { background:#f8fafc; border-radius:10px; padding:.7rem .9rem; margin-top:.5rem; }

/* ---------- Bloqueo móvil para lo pesado ---------- */
.ms-desktop-only { text-align:center; padding:2rem 1rem; }
.ms-desktop-only .big-ico { font-size:2.6rem; }

/* ---------- Admin se sirve de sitios.css aparte ---------- */

@media (max-width:760px) {
  .ms-grid { grid-template-columns:1fr 1fr; }
  .ms-preview-shell { margin:0 -.5rem; }
}