/* MP360 · Jacarandá — superficies inferiores del recorrido
 *   izquierda : panel de disponibilidad y valores de referencia
 *   centro    : selector de panoramas
 *   derecha   : reservado para el plano (no se construye en esta tanda)
 *
 * Son tres superficies independientes sobre una misma línea base. No hay
 * franja continua ni footer: el panorama sigue a la vista entre ellas.
 *
 * Motion portado de WEB1-CGMWTAUGUST2025-LISTO/terrene:
 *   src/components/HowWeWork/HowWeWork.css -> control compacto que expande su
 *     etiqueta (4rem -> 8rem, overflow oculto, label desde translateX(-20px),
 *     índice desplazado, transición 0.3s). Es el valor del propio componente
 *     fuente, no un `ease` elegido por defecto.
 *   src/components/Nav/Nav.jsx             -> revelación por máscara de líneas
 *     con SplitText y stagger.
 */

.mp360-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;

  display: grid;
  /* las columnas laterales son simétricas: el selector queda ópticamente
     centrado aunque el panel de la izquierda cambie de alto o de ancho */
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;

  padding: 0 1.5rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.5rem, env(safe-area-inset-right, 0px));

  /* la capa no puede robarle el arrastre al panorama */
  pointer-events: none;
  font-family: "Manrope", sans-serif;
}

.mp360-dock > * { pointer-events: auto; }

/* Reset local. Sin esto el ancho declarado excluye padding y borde, y cada
   <p> arrastra el margen por defecto del navegador: eran ~80px de aire
   invisible dentro del panel. El aire debe ser declarado, no heredado. */
.mp360-dock *,
.mp360-dock *::before,
.mp360-dock *::after,
.mp360-backhome *,
.mp360-backhome *::before,
.mp360-backhome *::after { box-sizing: border-box; }

.mp360-dock p,
.mp360-dock ul,
.mp360-dock li,
.mp360-dock h1,
.mp360-dock h2,
.mp360-dock h3 { margin: 0; padding: 0; }

.mp360-dock ul { list-style: none; }

/* Columna explícita para cada superficie: si una se oculta, las otras NO se
   recolocan. Sin esto, ocultar el panel movía el selector fuera del centro. */
.mp360-dock__left { grid-column: 1; justify-self: start; }
.mp360-dock__center { grid-column: 2; justify-self: center; }
/* Reservado para el plano. Sin contenido y sin puntero hasta que llegue el KMZ. */
.mp360-dock__right { grid-column: 3; justify-self: end; pointer-events: none; }

/* El dock ENTERO cuando está oculto.

   Faltaba, y no era inocuo: `.mp360-dock` declara `display: grid`, que gana
   sobre el `display: none` que el atributo `hidden` aporta por hoja de usuario.
   El dock seguía maquetando —con la leyenda y el plano dentro— y, con z-index
   25 contra el 20 de la entrada, se dibujaba encima del hero durante la
   precarga. `Viewer.reveal()` es quien decide cuándo aparece; hasta entonces no
   debe existir en pantalla.

   Es la misma regla que ya tenían #mp360-nav, #mp360-intro, .mp360-legend,
   .mp360-lot-surface y .mp360-surface. */
.mp360-dock[hidden] { display: none !important; }

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

/* ==========================================================================
   Tokens comunes de las superficies
   ========================================================================== */

.mp360-dock,
.mp360-backhome {
  --white: #FFFFFF;
  --neutral-950: #151515;
  --neutral-900: #232323;
  --neutral-800: #393939;
  --neutral-500: #939393;
  --neutral-400: #B6B6B6;
  --neutral-300: #D4D4D4;
  --neutral-200: #E8E8E8;

  --primary-50: #F3F4FF;
  --primary-700: #4742A1;
  --primary-800: #332F7B;
  --primary-950: #15123C;

  --radius-compact: 6px;
  --radius-control: 8px;
  --radius-container: 12px;
  --radius-micro-surface: var(--radius-compact);
  --radius-button: var(--radius-control);
  /* contorno anidado del CTA: el bloque del ícono vive dentro del control */
  --radius-control-inner: var(--radius-compact);

  --superficie: rgba(21, 21, 21, 0.92);
  --borde: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   Disponibilidad

   El panel oscuro que vivía acá fue retirado. Su reemplazo es el componente
   portado de Tipuana: assets/css/mp360-legend.css.
   ========================================================================== */

/* ==========================================================================
   Selector de panoramas — control compacto (receta HowWeWork del ZIP)
   ========================================================================== */

.mp360-panos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.mp360-panos__bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radius-container);
}

/* Segmento compacto. Rectángulo redondeado del sistema: nunca círculo. */
.mp360-panos__seg {
  position: relative;
  height: 2.25rem;
  min-width: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--radius-control);
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  /* HowWeWork.css: transition: all 0.3s ease (valor del componente fuente) */
  transition: all 0.3s ease;
}

.mp360-panos__seg:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

.mp360-panos__seg:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.mp360-panos__seg:disabled { opacity: 0.35; cursor: default; }

.mp360-panos__seg-icon { width: 16px; height: 16px; }
.mp360-panos__seg-icon svg { display: block; width: 100%; height: 100%; }

/* El segmento central lleva el nombre de la vista y su índice. */
.mp360-panos__current {
  flex: 0 0 auto;
  padding: 0 0.75rem;
  gap: 0.5rem;
  max-width: min(26rem, 46vw);
}

.mp360-panos__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.mp360-panos__index {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--neutral-400);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.mp360-panos__caret {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform 0.3s var(--mp360-ease-ui);
}
.mp360-panos__caret svg { display: block; width: 100%; height: 100%; }
.mp360-panos__current[aria-expanded="true"] .mp360-panos__caret { transform: rotate(180deg); }

/* --- lista desplegable --- */

.mp360-panos__list {
  width: min(26rem, 80vw);
  max-height: min(22rem, 42vh);
  overflow-y: auto;
  padding: 0.375rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radius-container);
  list-style: none;
}

.mp360-panos__opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: none;
  border: none;
  border-radius: var(--radius-micro-surface);
  color: var(--neutral-300);
  font-family: "Manrope", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mp360-panos__opt:hover { background: rgba(255, 255, 255, 0.07); color: var(--white); }
.mp360-panos__opt[aria-current="true"] { background: var(--primary-700); color: var(--white); }
.mp360-panos__opt:focus-visible { outline: 2px solid var(--white); outline-offset: 1px; }

.mp360-panos__opt-n {
  font-size: 0.6875rem;
  color: var(--neutral-400);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  min-width: 1.25rem;
}
.mp360-panos__opt[aria-current="true"] .mp360-panos__opt-n { color: var(--primary-50); }

/* máscara de líneas de SplitText (Nav.css del ZIP) */
.mp360-dock .split-line { overflow: hidden; will-change: transform; }

/* ==========================================================================
   Volver a lotes — navegación contextual del recorrido
   Usa el MISMO componente de CTA (mp360-cta.css): misma estructura, mismo
   tamaño, mismo motion. Lo único que no lleva es el bloque de color junto al
   ícono: el control es todo negro y la capa que barre en hover es un velo
   claro apenas perceptible, para que el gesto siga leyéndose.
   ========================================================================== */

.mp360-backhome {
  position: fixed;
  left: max(1.5rem, env(safe-area-inset-left, 0px));
  top: calc(var(--mp360-nav-h, 104px) + 1rem);
  z-index: 25;
  font-family: "Manrope", sans-serif;
}

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

/* Misma escala de contexto que los CTA de la barra: los tres miden igual. */
.mp360-backhome .btn {
  --btn-circle: 2.5rem;
  --btn-icon: 1.25rem;
  background: var(--neutral-950);
}

/* Sin bloque de color. La capa existe —es lo que sostiene la geometría y el
   motion— pero en reposo es invisible sobre el negro. */
.mp360-backhome .btn .circle { background: transparent; }

/* Sin bloque visible, el hueco que el componente reserva para él deja la
   flecha aislada del rótulo. Acá la flecha es un ícono de encabezado: se
   acerca al borde y el rótulo la sigue con el aire normal. La capa animada
   no se toca, así que el motion y el alto siguen siendo los del componente. */
.mp360-backhome .btn .icon {
  left: 0.75rem;
  color: var(--white);
}

.mp360-backhome .btn .button-text {
  margin-left: calc(0.75rem + var(--btn-icon) + 0.625rem);
  color: var(--white);
}

/* En hover la capa barre desde el ícono con un velo claro: mismo recorrido y
   mismo easing del componente, sin cambiar el color del control. */
.mp360-backhome .btn:hover .circle,
.mp360-backhome .btn:focus-visible .circle { background: rgba(255, 255, 255, 0.14); }

/* La flecha NO se desplaza. En el componente principal el ícono se corre
   0.75rem porque sale del bloque hacia el rótulo; acá no hay bloque del que
   salir y ese recorrido lo llevaría a chocar con el texto. Se queda quieta. */
.mp360-backhome .btn:hover .icon,
.mp360-backhome .btn:focus-visible .icon { transform: none; }

.mp360-backhome .btn:hover .button-text,
.mp360-backhome .btn:focus-visible .button-text { color: var(--white); }

/* ==========================================================================
   Alturas reducidas y anchos chicos: evitar desbordes evidentes.
   El ajuste fino por breakpoint corresponde a la tanda de responsive.
   ========================================================================== */

@media (max-width: 900px) {
  /* 16px entre el panel y el selector: son dos superficies distintas del mismo
     carril y tienen que leerse como tales. Con 8px se tocaban. */
  .mp360-dock { grid-template-columns: 1fr; justify-items: center; gap: 1rem; }
  /* Los hijos declaran su columna para el layout de tres. Con una sola hay
     que devolverlos a la columna 1: si no, `grid-column: 2` y `3` crean
     columnas implícitas y el panel queda aplastado. */
  .mp360-dock__left,
  .mp360-dock__center { grid-column: 1; }
  .mp360-dock__left { justify-self: stretch; }
  .mp360-dock__right { display: none; }
}

@media (max-height: 780px) {
  .mp360-panos__list { max-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-panos__seg,
  .mp360-panos__caret,
  .mp360-panos__opt,
}