/* MP360 · Ayres de Cardales — Disponibilidad de lotes (abajo a la izquierda)
 *
 * Reutiliza el botón primario (mp360-boton.css): intercambio de icono en
 * hover/foco, escala .975, textos dobles. Acá solo viven los estados del
 * toggle, su escala propia y la composición.
 *
 *   activo (aria-pressed=true):  Disponibles → --claro (blanco, texto/icono primario) + badge-check
 *                                No disponibles → --primario (#2D5661, texto/icono blanco) + circle-xmark
 *   inactivo (aria-pressed=false): superficie translúcida oscura + borde
 *                                discontinuo + icono circle-dashed (estado
 *                                distinguible sin depender del color).
 *
 * Composición (tanda 3). El JS elige la primera variante que entra, en orden:
 *   fila + "Lotes …" → fila + rótulo corto → columna + "Lotes …" → columna + corto
 * (atributos data-disposicion / data-rotulo). "Entra" = los dos ítems en una
 * línea dentro del max-width del grupo, que excluye el centro (selector) o, en
 * portrait angosto, la reserva del plano. Sin JS, la fila envuelve sola.
 *
 * También declara el CARRIL INFERIOR compartido con mp360-selector.css
 * (variables en .mp360-root). Capa: z-index 33 (debajo de volver 34 y navbar
 * 35; arriba del tooltip 30).
 */

/* ---------------- carril inferior compartido ---------------- */
.mp360-root {
  --mp360-inf-borde: 24px;
  --mp360-inf-gap: 24px;                               /* aire entre grupos */
  --mp360-inf-abajo: max(var(--mp360-inf-borde), env(safe-area-inset-bottom, 0px));
  --mp360-inf-izq: max(var(--mp360-inf-borde), var(--mp360-navbar-left, 0px), env(safe-area-inset-left, 0px));
  --mp360-inf-der: max(var(--mp360-inf-borde), env(safe-area-inset-right, 0px));
  /* Reserva del futuro plano interactivo (abajo a la derecha). */
  --mp360-plano-reserva: clamp(11.5rem, 13vw, 16rem);
  /* Selector: botón · padding de la superficie · separación · icono. */
  --mp360-sel-boton: 48px;
  --mp360-sel-pad: 4px;
  --mp360-sel-gap: 4px;
  --mp360-sel-icono: 20px;
  --mp360-sel-ancho: calc(2 * var(--mp360-sel-boton) + var(--mp360-sel-gap) + 2 * var(--mp360-sel-pad));
  --mp360-sel-alto: calc(var(--mp360-sel-boton) + 2 * var(--mp360-sel-pad));   /* = alto de los toggles */
  --mp360-disp-aire: 12px;                             /* aire interno del grupo */
}

/* Mobile y alturas reducidas: borde menor, controles compactos (≥44 px). El
   plano futuro pasa a un control compacto: reserva de un botón. */
@media (max-width: 599.98px), (max-height: 500px) {
  .mp360-root {
    --mp360-inf-borde: 16px;
    --mp360-inf-gap: 16px;
    --mp360-plano-reserva: 3.5rem;
    --mp360-sel-boton: 44px;
    --mp360-sel-pad: 2px;
    --mp360-sel-gap: 2px;
    --mp360-sel-icono: 18px;
    --mp360-disp-aire: 8px;
  }
}
@media (max-width: 899.98px) and (orientation: portrait) {
  .mp360-root { --mp360-plano-reserva: 3.5rem; }
}

/* ---------------- grupo ---------------- */
#mp360-disponibilidad {
  position: absolute;
  z-index: 33;
  left: var(--mp360-inf-izq);
  bottom: var(--mp360-inf-abajo);
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  gap: var(--mp360-disp-aire);
  box-sizing: border-box;
  width: max-content;
  /* nunca invade el centro: mitad del viewport − borde − aire − medio selector */
  max-width: calc(50% - var(--mp360-inf-izq) - var(--mp360-inf-gap) - var(--mp360-sel-ancho) / 2);
  pointer-events: none;
  transition: opacity 0.3s var(--mp360-ease-out), translate 0.3s var(--mp360-ease-out), visibility 0s linear 0s;
}
#mp360-disponibilidad[hidden] { display: none !important; }
#mp360-disponibilidad[data-disposicion="columna"] { flex-flow: column nowrap; }

/* Menú del navbar o panel POI abiertos: fuera de vista e inert (JS). */
#mp360-disponibilidad[data-cubierto="true"] {
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity 0.2s linear, translate 0.2s linear, visibility 0s linear 0.2s;
}

.mp360-disp__item { display: flex; }

/* ---------------- toggle ---------------- */
.mp360-disp__toggle {
  --mp360-boton-pad: 1.375rem;
  --mp360-boton-gap: 0.625rem;
  --mp360-boton-icono-tam: 1.25rem;
  flex: 1 1 auto;
  min-height: var(--mp360-sel-alto);
  font-size: 1.0625rem;
  letter-spacing: var(--mp360-ui-tracking);
  pointer-events: auto;
  /* borde presente en ambos estados: el cambio no desplaza el layout */
  border: 1.5px solid transparent;
  box-shadow: 0 6px 24px rgba(10, 28, 33, 0.35);      /* --primary-950 */
  transition: transform 0.3s, background-color 0.25s ease-out, border-color 0.25s ease-out, color 0.25s ease-out, box-shadow 0.25s ease-out;
}
.mp360-disp__toggle[data-mp360-disponibilidad="available"] { --mp360-boton-icono: url("../icons/nucleo/badge-check.svg"); }
.mp360-disp__toggle[data-mp360-disponibilidad="unavailable"] { --mp360-boton-icono: url("../icons/nucleo/circle-xmark.svg"); }

/* inactivo: categoría oculta en el recorrido */
.mp360-disp__toggle[aria-pressed="false"] {
  --mp360-boton-fondo: rgba(10, 28, 33, 0.62);
  --mp360-boton-texto: var(--white);
  --mp360-boton-foco: var(--white);
  --mp360-boton-icono: url("../icons/nucleo/circle-dashed.svg");
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 16px rgba(10, 28, 33, 0.25);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
.mp360-disp__toggle[aria-pressed="false"] .mp360-boton__sombra-arriba,
.mp360-disp__toggle[aria-pressed="false"] .mp360-boton__sombra-abajo { background-image: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mp360-disp__toggle[aria-pressed="false"] { --mp360-boton-fondo: rgba(10, 28, 33, 0.82); }
}

@media (max-width: 599.98px), (max-height: 500px) {
  .mp360-disp__toggle {
    --mp360-boton-pad: 0.875rem;
    --mp360-boton-gap: 0.5rem;
    --mp360-boton-icono-tam: 1.125rem;
    font-size: 0.9375rem;
  }
}

/* ---------------- rótulos ---------------- */
.mp360-disp__corto { display: none; }
#mp360-disponibilidad[data-rotulo="corto"] .mp360-disp__largo { display: none; }
#mp360-disponibilidad[data-rotulo="corto"] .mp360-disp__corto { display: inline; }

/* ---------------- composición apilada (portrait angosto) ----------------
   Fila inferior: selector (centro) + reserva compacta del plano (derecha); el
   selector de flechas es angosto y ambos entran. La disponibilidad pasa a una
   fila encima, a la izquierda, con todo el ancho útil. */
@media (max-width: 899.98px) and (orientation: portrait) {
  #mp360-disponibilidad {
    left: 50%;
    bottom: calc(var(--mp360-inf-abajo) + var(--mp360-sel-alto) + 12px);
    justify-content: center;
    flex-wrap: nowrap;
    max-width: calc(100% - var(--mp360-inf-izq) - var(--mp360-inf-der));
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #mp360-disponibilidad,
  #mp360-disponibilidad[data-cubierto="true"],
  .mp360-disp__toggle { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}