/* Master plan interactivo · Desarrollo Nativo
   Colores de marca: crema #F4EDE1 · noche #17201B · bosque #2E4B3C · vino #862B3A · salvia #A9B49C */
.mp {
  --mp-crema: #F4EDE1; --mp-noche: #17201B; --mp-bosque: #2E4B3C; --mp-vino: #862B3A; --mp-salvia: #A9B49C;
  --mp-gris: #8E8E86; --mp-papel: #FBF8F2; --mp-linea: rgba(23, 32, 27, .12);
  font-family: Manrope, system-ui, sans-serif; color: var(--mp-noche);
  display: grid; gap: 14px;
}
.mp * { box-sizing: border-box; }

/* Filtros */
.mp-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px 18px; align-items: end;
  background: var(--mp-papel); border: 1px solid var(--mp-linea); border-radius: 16px; padding: 14px 16px; }
.mp-filtro label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #17201bb3; margin-bottom: 4px; }
.mp-filtro b { color: var(--mp-bosque); font-weight: 700; }
.mp-filtro input[type=range] { width: 100%; accent-color: var(--mp-bosque); }
.mp-contador { text-align: right; font-size: 13px; color: #17201bb3; display: flex; flex-direction: column; align-items: flex-end; }
.mp-contador strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 26px; line-height: 1; color: var(--mp-bosque); }
.mp-limpiar { background: none; border: 0; padding: 0; margin-top: 4px; font: inherit; font-size: 12.5px; color: var(--mp-vino); text-decoration: underline; cursor: pointer; }

/* Cuerpo: plano + ficha */
.mp-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: stretch; }
.mp-plano { position: relative; overflow: hidden; border-radius: 16px; background: #F7F3EB; border: 1px solid var(--mp-linea);
  height: clamp(340px, 62vh, 640px); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mp-plano.arrastrando { cursor: grabbing; }
.mp-lienzo { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.mp-lienzo img { display: block; pointer-events: none; -webkit-user-drag: none;
  filter: grayscale(1) contrast(.8) brightness(1.15); opacity: .45; }
.mp-lienzo svg { position: absolute; inset: 0; overflow: visible; }

.mp-lote { stroke: var(--mp-crema); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill-opacity .15s, fill .15s; }
.mp-lote.disponible { fill: var(--mp-bosque); fill-opacity: .82; cursor: pointer; }
.mp-lote.disponible:hover, .mp-lote.disponible:focus-visible { fill-opacity: .95; outline: none; }
.mp-lote.reservada { fill: var(--mp-salvia); fill-opacity: .85; cursor: pointer; }
.mp-lote.vendida, .mp-lote.no_ofrecida { fill: #DCD6C9; fill-opacity: .96; }
.mp-lote.no_ofrecida { fill: #CFCAC0; }
.mp-lote.fuera { fill-opacity: .22; }
.mp-lote.sel { stroke: var(--mp-vino); stroke-width: 3.5; fill-opacity: .95; }
.mp-etq { font-family: Manrope, system-ui, sans-serif; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.mp-etq.disponible { fill: var(--mp-crema); }
.mp-etq.reservada { fill: var(--mp-noche); }
.mp-etq.vendida, .mp-etq.no_ofrecida { fill: #17201b59; font-weight: 600; }

.mp-zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; }
.mp-zoom button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--mp-linea); background: #fffffff0;
  color: var(--mp-noche); font: 700 18px/1 Manrope, system-ui, sans-serif; cursor: pointer; box-shadow: 0 1px 3px #0001; }
.mp-ayuda { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: #17201b99; background: #ffffffd9;
  padding: 4px 8px; border-radius: 8px; pointer-events: none; }

.mp-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: #17201bb3; }
.mp-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.mp-leyenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid #17201b1f; }

/* Ficha */
.mp-ficha { background: var(--mp-papel); border: 1px solid var(--mp-linea); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.mp-ficha .mp-k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mp-vino); font-weight: 700; }
.mp-ficha h4 { font-family: Fraunces, Georgia, serif; font-size: 34px; line-height: 1; margin: 0; color: var(--mp-bosque); }
.mp-ficha h4 small { font-family: Manrope, system-ui, sans-serif; font-size: 13px; color: #17201b99; font-weight: 600; margin-left: 6px; }
.mp-fila { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--mp-linea); font-size: 14px; }
.mp-fila span { color: #17201bb3; }
.mp-fila b { text-align: right; }
.mp-fila b small { display: block; font-weight: 500; color: #17201b99; font-size: 12px; }
.mp-accion { display: block; text-align: center; border-radius: 999px; padding: 12px 16px; font: 700 15px Manrope, system-ui, sans-serif;
  text-decoration: none; cursor: pointer; border: 0; }
.mp-accion.prim { background: var(--mp-bosque); color: var(--mp-crema); }
.mp-accion.wa { background: transparent; color: var(--mp-bosque); box-shadow: inset 0 0 0 1.5px var(--mp-bosque); }
.mp-nota { font-size: 12px; color: #17201b8c; margin: 2px 0 0; }
.mp-vacia p { margin: 0; color: #17201bb3; font-size: 14px; }
.mp-cerrar { display: none; }

/* Celular: filtros apilados y ficha como hoja inferior */
@media (max-width: 820px) {
  .mp-filtros { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; }
  .mp-filtro label { margin-bottom: 0; }
  .mp-contador { grid-row: 1; text-align: left; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .mp-contador strong { display: inline; font-size: 24px; }
  .mp-limpiar { margin: 0 0 0 auto; }
  .mp-cuerpo { grid-template-columns: 1fr; }
  .mp-plano { height: auto; aspect-ratio: 4 / 3; max-height: 62vh; }
  .mp-ficha.mp-vacia { display: none; }
  .mp-ficha:not(.mp-vacia) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; border-radius: 20px 20px 0 0;
    max-height: 78vh; overflow: auto; box-shadow: 0 -10px 30px #17201b33; padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
    animation: mp-sube .22s ease-out; }
  .mp-cerrar { display: block; position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: var(--mp-noche); color: var(--mp-crema); font-size: 20px; cursor: pointer; }
}
@keyframes mp-sube { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mp-ficha { animation: none !important; } .mp-lote { transition: none; } }

/* Blindaje contra estilos globales de la página que lo contiene (img/svg al 100 %, mínimos de ancho, etc.) */
.mp .mp-lienzo img { max-width: none !important; width: auto; height: auto; }
.mp .mp-lienzo svg { width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; }
.mpm-body.mp-solo { grid-template-columns: 1fr; padding: 16px; }
.mpm-body.mp-solo .mpm-plan { overflow: visible; background: transparent; }
.mpm-box:has(.mp-solo) .mpm-leg { display: none; }
.mpm-body.mp-solo .mpm-plan::after { content: none !important; display: none !important; }