/* ==========================================================================
   Ficha contextual de lote

   Estructura tomada de la ficha aprobada de Tipuana: columna de tres piezas
   —identidad, contenido scrolleable y cierre comercial—, con el pie fuera del
   scroll. Identidad, paleta, radios y botón son los de Jacarandá.

   La superficie vive dentro de .mp360-app: sigue operativa en fullscreen.
   ========================================================================== */

.mp360-lot-surface {
  --lot-pad: 1.25rem;          /* 20px */
  --lot-gap: 1rem;
  --lot-borde: rgba(21, 21, 21, 0.10);

  --white: #FFFFFF;
  --neutral-950: #151515;
  --neutral-500: #939393;
  --primary-700: #4742A1;
  --primary-800: #332F7B;
  --radius-compact: 6px;
  --radius-control: 8px;
  --radius-container: 12px;
  --radius-control-inner: var(--radius-compact);
  --radius-button: var(--radius-control);
  --no-disponible: #950101;

  position: absolute;
  inset: 0;
  z-index: 40;                 /* sobre el dock (25), bajo la transición (60) */
  display: flex;
  pointer-events: none;        /* el panorama sigue vivo alrededor de la ficha */
  font-family: "Manrope", system-ui, sans-serif;
}

.mp360-lot-surface[hidden] { display: none !important; }

.mp360-lot-surface *,
.mp360-lot-surface *::before,
.mp360-lot-surface *::after { box-sizing: border-box; }

/* CAUSA DE "FINANCIACION ESTA DEMASIADO LEJOS DE LA CUOTA"

   `h4` faltaba en este reset. Los rotulos de alternativa —FINANCIACION y
   PAGO CONTADO— son `h4`, asi que conservaban el margen por defecto del
   navegador (1.33em ≈ 16px). Medido: el hueco entre el rotulo y su cifra era
   de 24px y el hueco ENTRE grupos de 22px. La proximidad no comunicaba nada,
   porque las dos distancias eran practicamente la misma.

   No era una decision de espaciado: era un selector que faltaba. */
.mp360-lot-surface p,
.mp360-lot-surface h2,
.mp360-lot-surface h3,
.mp360-lot-surface h4,
.mp360-lot-surface ul,
.mp360-lot-surface li,
.mp360-lot-surface dl,
.mp360-lot-surface dt,
.mp360-lot-surface dd { margin: 0; }

/* --------------------------------------------------------------------------
   Geometría del panel

   Lateral derecho por defecto. Arranca por debajo de la navbar: a diferencia
   de un modal, la ficha CONVIVE con el recorrido y no puede taparle al usuario
   el logo, el menú ni el CTA de contacto.
   -------------------------------------------------------------------------- */

.mp360-lot-surface[data-modo="lateral"] {
  justify-content: flex-end;
  align-items: flex-start;
  padding: calc(var(--mp360-nav-alto, 117px) + 0.75rem) 1.5rem 1.5rem 1.5rem;
}

.mp360-lot-surface__panel {
  pointer-events: auto;
  width: 25rem;                /* 400px */
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--white);
  color: var(--neutral-950);
  border-radius: var(--radius-container);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

/* La ficha es una columna de tres piezas. El pie NO scrollea: es hermano del
   contenedor, no hijo, así que el CTA queda siempre a la vista sin
   `position: sticky`, sin doble scroll y sin tapar nada. */
.mp360-lot {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Cabecera — identidad
   -------------------------------------------------------------------------- */

.mp360-lot__head {
  position: relative;
  flex: 0 0 auto;
  padding: var(--lot-pad) var(--lot-pad) 0.875rem;
  border-bottom: 1px solid var(--lot-borde);
}

.mp360-lot__title {
  padding-right: 3rem;         /* deja libre la esquina del botón de cierre */
  font-size: 1.375rem;         /* 22px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.mp360-lot__head-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mp360-lot__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-compact);
  font-size: 0.625rem;         /* 10px, sólo para el badge en versalitas */
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* El color de fondo del badge disponible lo escribe el JS con el color real
   del plan y su tinta calculada por contraste. Acá sólo queda el estado que
   no depende de ningún plan. */
.mp360-lot__badge[data-state="unavailable"] {
  background: rgba(149, 1, 1, 0.10);
  color: var(--no-disponible);
}

.mp360-lot__meta {
  font-size: 0.8125rem;        /* 13px */
  color: rgba(21, 21, 21, 0.66);
  font-variant-numeric: tabular-nums;
}

/* Botón de cierre: ícono real de Nucleo, área táctil propia. */
.mp360-lot__close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 1px solid var(--lot-borde);
  border-radius: var(--radius-control);
  color: var(--neutral-950);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mp360-lot__close:hover { background: rgba(21, 21, 21, 0.06); }

.mp360-lot__close:focus-visible {
  outline: 2px solid var(--primary-700);
  outline-offset: 2px;
}

.mp360-lot__close-icon { width: 1rem; height: 1rem; display: block; }
.mp360-lot__close-icon svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Cuerpo
   -------------------------------------------------------------------------- */

.mp360-lot__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* el scroll no se escapa al documento */
  padding: var(--lot-pad);
  display: flex;
  flex-direction: column;
  gap: var(--lot-gap);
}

/* 12px entre el rotulo de seccion y el primer grupo: sigue siendo un nivel
   por encima, pero ya no compite con la separacion entre alternativas. */
.mp360-lot__block { display: flex; flex-direction: column; gap: 0.75rem; }

/* Rótulo de sección: presente, nunca protagonista. */
.mp360-lot__block-title {
  font-size: 0.6875rem;        /* 11px */
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(21, 21, 21, 0.55);
}

/* Único bloque con superficie propia: marca el momento comercial.

   UNA superficie para las dos alternativas, no una por alternativa: dos cards
   dentro de la card competirían entre sí y con la ficha que las contiene. Lo
   que separa Financiación de Pago contado es el rótulo, el divisor y el salto
   de espacio. */
.mp360-lot__block--plan {
  padding: 1rem;
  border-radius: var(--radius-container);
  background: rgba(21, 21, 21, 0.045);
  gap: 0.875rem;
}

/* --------------------------------------------------------------------------
   Las dos alternativas de compra
   -------------------------------------------------------------------------- */

/* Dos distancias declaradas y perceptiblemente distintas (UI-RESPONSIVE §5):

     6px   rotulo -> su cifra          el rotulo NOMBRA a la cifra: son uno
     12px  cifra  -> datos de apoyo    sigue siendo el mismo grupo
     24px  grupo  -> grupo             + divisor

   Antes las tres eran 24 / 8 / 22: el rotulo estaba tan lejos de su cifra
   como el grupo siguiente. */
.mp360-lot__opcion {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;               /* 6px: el rotulo pertenece a la cifra */
}

.mp360-lot__opcion + .mp360-lot__opcion {
  margin-top: 0.75rem;
  padding-top: 1.5rem;         /* 24px reales entre grupos */
  border-top: 1px solid var(--lot-borde);
}

/* Rótulo de alternativa. Un escalón POR ENCIMA del rótulo de sección
   —"Opciones de compra"—: mismo tamaño de versalita, tinta plena. */
.mp360-lot__opcion-title {
  font-size: 0.75rem;          /* 12px */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-950);
}

.mp360-lot__lead { display: flex; flex-direction: column; gap: 1px; }

.mp360-lot__lead-count {
  font-size: 0.8125rem;
  color: rgba(21, 21, 21, 0.7);
}

/* La cifra más fuerte de toda la ficha. */
.mp360-lot__lead-amount {
  font-size: 2.125rem;         /* 34px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

/* El contado tiene cifra propia y jerarquía propia, un escalón por debajo de
   la cuota: es la otra alternativa, no el mismo dato. */
.mp360-lot__lead-amount--cash { font-size: 1.75rem; }   /* 28px */

/* El precio de lista es la referencia contra la que se lee el contado. */
.mp360-lot__cash-ref {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.mp360-lot__cash-ref-label { color: rgba(21, 21, 21, 0.6); }

.mp360-lot__cash-ref-amount {
  color: rgba(21, 21, 21, 0.6);
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
}

.mp360-lot__consult { font-size: 1.0625rem; font-weight: 600; }

/* Cifras de apoyo, en lista simple. No tarjetas. */
.mp360-lot__figures {
  margin-top: 0.375rem;        /* con el gap del grupo da los 12px declarados */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp360-lot__figure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}

.mp360-lot__figure dt { color: rgba(21, 21, 21, 0.64); }
.mp360-lot__figure dd { font-weight: 600; font-variant-numeric: tabular-nums; }

.mp360-lot__foot {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: rgba(21, 21, 21, 0.52);
}

.mp360-lot__unavailable {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(21, 21, 21, 0.78);
}

/* --------------------------------------------------------------------------
   Pie — cierre comercial
   -------------------------------------------------------------------------- */

/* Una sola pieza: el CTA. La línea de contexto que lo acompañaba se retiró
   por redundante, así que el pie ya no necesita separar dos elementos. */
.mp360-lot__footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: var(--lot-pad);
  background: var(--white);
  border-top: 1px solid var(--lot-borde);
}

/* El CTA es el componente aprobado, en su variante primaria y de ancho
   completo (assets/css/mp360-cta.css). Acá NO se redefine forma, color,
   radio, ícono, expansión ni motion: sólo lo que le corresponde al anfitrión.

   La escala es la del botón de referencia —"Proyectá tu cuota"—: 2.5rem de
   bloque y 1.25rem de glifo, 44.8px de alto. Con la escala base del componente
   (3rem / 53px) el CTA de la ficha se veía más grande que el principal. */
.mp360-lot__footer .btn {
  --btn-circle: 2.5rem;
  --btn-icon: 1.25rem;
  /* El control y su bloque nacen en `scale(0)` porque en la barra y en la
     entrada los revela una timeline de GSAP. Acá entran con el panel, así que
     el anfitrión los deja en su tamaño natural. */
  transform: none;
}

.mp360-lot__footer .btn .circle { transform: none; }

/* El ícono no se desplaza en hover: mismo criterio que la barra. */
.mp360-lot__footer .btn:hover .icon,
.mp360-lot__footer .btn:focus-visible .icon { transform: none; }

/* --------------------------------------------------------------------------
   Responsive

   El minimapa comparte la esquina con la ficha lateral. Se retira mientras la
   ficha está abierta en vez de quedar asomando por debajo.
   -------------------------------------------------------------------------- */

.mp360-dock__right.mp360-oculto-por-ficha { display: none; }

/* Tablet: la navbar es más baja y el aire lateral se reduce. */
@media (max-width: 1130px) {
  .mp360-lot-surface[data-modo="lateral"] { padding-left: 1rem; padding-right: 1rem; }
  .mp360-lot-surface__panel { width: 23rem; }
}

/* Hoja inferior: ancho completo, esquinas superiores redondeadas. */
.mp360-lot-surface[data-modo="hoja"] {
  justify-content: stretch;
  align-items: flex-end;
  padding: 0;
}

.mp360-lot-surface[data-modo="hoja"] .mp360-lot-surface__panel {
  width: 100%;
  /* dvh y no vh: con la barra del navegador a la vista, vh se pasa de largo. */
  max-height: min(86dvh, 100%);
  border-radius: var(--radius-container) var(--radius-container) 0 0;
}

@media (max-width: 640px) {
  .mp360-lot-surface { --lot-pad: 1rem; }
  /* El safe area va en el pie, que es lo último de la columna: el contenido
     scrolleable no necesita reserva porque el pie va debajo, no encima. */
  .mp360-lot__footer {
    padding-bottom: max(var(--lot-pad), calc(env(safe-area-inset-bottom) + 0.5rem));
  }
  .mp360-lot__title { font-size: 1.25rem; }
  .mp360-lot__lead-amount { font-size: 1.875rem; }
}

/* Móvil apaisado: quedan ~390px de alto. La ficha vuelve a lateral —una hoja
   dejaría el contenido sin alto útil— y cabecera y pie se compactan para que
   el área de contenido siga siendo un área de contenido. El CTA conserva su
   superficie táctil. */
@media (max-height: 480px) and (orientation: landscape) {
  .mp360-lot-surface[data-modo="lateral"] {
    padding: calc(var(--mp360-nav-alto-corto, 64px) + 0.5rem) 0.75rem 0.75rem;
  }
  .mp360-lot-surface__panel { width: 21rem; }
  .mp360-lot-surface { --lot-pad: 0.875rem; }
  .mp360-lot__head { padding-bottom: 0.625rem; }
  .mp360-lot__title { font-size: 1.125rem; padding-right: 2.75rem; }
  .mp360-lot__close { width: 2rem; height: 2rem; top: 0.625rem; right: 0.625rem; }
  .mp360-lot__lead-amount { font-size: 1.6875rem; }
  .mp360-lot__block--plan { padding: 0.75rem; }
  .mp360-lot__footer { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
}

/* Puntero grueso: el área táctil sube al mínimo de DESIGN.md §7. */
@media (pointer: coarse) {
  .mp360-lot__close { width: 2.75rem; height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-lot__close { transition: none !important; }
}