/* ==========================================================================
   Disponibilidad y filtros — una sola tarjeta

   No hay panel aparte: los planes se ven y se eligen acá mismo. Una columna,
   16px de padding exterior, grupos separados por aire y un eje izquierdo común
   para checks, colores y textos.

   Manrope, superficie clara, violeta primario para selección, radios del
   design system de Jacarandá.
   ========================================================================== */

.mp360-legend {
  --lg-pad: 1rem;               /* 16px exteriores */
  --lg-fila: 34px;              /* alto de fila con mouse */
  --lg-eje: 1.75rem;            /* check (18px) + su separación: el eje común */
  --lg-borde: rgba(21, 21, 21, 0.12);
  --lg-apagado: rgba(21, 21, 21, 0.62);
  --lg-dur: 260ms;
  --lg-dur-in: 320ms;
  --lg-ease: var(--mp360-ease-ui, cubic-bezier(0.65, 0, 0.076, 1));

  width: 17.5rem;               /* 280px */
  max-width: 100%;
  padding: var(--lg-pad);
  display: flex;
  flex-direction: column;
  background: var(--white, #FFFFFF);
  color: var(--neutral-950, #151515);
  border-radius: var(--radius-container, 12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
  font-family: "Manrope", system-ui, sans-serif;
  /* La tarjeta no puede taparlo todo: con la lista abierta topa acá y, si
     hiciera falta, el único scroll interno lo lleva la lista. */
  max-height: calc(100% - 1rem);
  overflow: hidden;
}

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

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

.mp360-legend p { margin: 0; }

/* ---- 0. titulo persistente ----
   Dice QUE es la tarjeta antes que cualquier estado. Se ve igual con los
   planes abiertos y contraidos. Comparte el eje izquierdo con el resto:
   mismo padding lateral que las filas interactivas. */
/* Selector compuesto a proposito, igual que `p.mp360-legend__state`: la
   tarjeta vive dentro de `#mp360-dock`, y `mp360-viewer.css` declara
   `.mp360-dock h2 { margin: 0 }`. Con la clase sola (0,1,0) esa regla (0,1,1)
   ganaba y el margen quedaba en cero: el titulo y la primera fila se leian
   como un solo renglon. */
.mp360-legend h2.mp360-legend__title {
  /* 12px: el titulo NOMBRA a la tarjeta, el contenido empieza despues. Es el
     unico margen que se toca: el resto de la tarjeta conserva su escala. */
  margin: 0 0 0.75rem;
  padding: 0 0.375rem;
  font-size: 0.9375rem;      /* 15px: por encima de las filas de 13px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--neutral-950, #151515);
}

/* ---- 1. bloque de estado ----
   Leyenda de color y, debajo, el filtro de estado. Sin título visible: la
   tarjeta se explica con la leyenda y las filas, y el nombre accesible vive
   en el aria-label. Las dos filas comparten el eje izquierdo, que lo fija el
   mismo padding lateral que usan las filas de plan. */

/* Selector compuesto a propósito: el reset `.mp360-legend p { margin: 0 }`
   tiene más especificidad que una clase sola y le comía el margen. */
.mp360-legend p.mp360-legend__state {
  display: flex;
  align-items: center;
  gap: 0.625rem;                /* mismo gap que las filas: eje compartido */
  margin: 0;
  /* NO es un control: no le corresponde el objetivo tactil de 44px. Cuando
     `--lg-fila` era 44 en punteros gruesos, esta linea de texto se llevaba 20px
     de alto que en movil vertical no sobran. El eje horizontal lo sigue
     fijando el mismo padding lateral que las filas interactivas. */
  min-height: 1.625rem;         /* 26px: la linea de 13px con su aire */
  /* El mismo padding lateral que las filas interactivas: así el punto rojo y
     el checkbox de abajo arrancan exactamente en la misma x. */
  padding: 0 0.375rem;
  /* Las filas interactivas llevan un borde transparente de 1px para el estado
     seleccionado. Sin él acá, esta fila arrancaba 1px a la izquierda de las
     otras y el eje no cerraba. */
  border: 1px solid transparent;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--lg-apagado);
}

/* El punto ocupa el ancho del checkbox para que los textos de las dos filas
   del bloque de estado también queden alineados entre sí. */
.mp360-legend__state .mp360-legend__swatch {
  width: 18px;
  height: 12px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  position: relative;
}

.mp360-legend__state .mp360-legend__swatch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mp360-band, transparent);
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.32);
  transform: translate(-50%, -50%);
}

.mp360-legend__swatch {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--mp360-band, transparent);
  /* Contorno interno: varios planes son muy claros sobre blanco. */
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.32);
}

/* ---- controles: mismo alto, mismo eje ---- */

.mp360-legend__switch,
.mp360-legend__plan {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: var(--lg-fila);
  padding: 0 0.375rem;
  /* Sin margen negativo: sacaba la fila fuera del padding de la tarjeta y,
     con su `overflow: hidden`, el borde y el fondo del seleccionado quedaban
     recortados por la izquierda. */
  border: 1px solid transparent;
  border-radius: var(--radius-control, 8px);
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Segunda fila del bloque de estado: 8px por debajo de la leyenda. */
.mp360-legend__switch { margin-top: 0.5rem; }

.mp360-legend__switch:hover,
.mp360-legend__plan:hover { background: rgba(21, 21, 21, 0.055); }

.mp360-legend__switch:active,
.mp360-legend__plan:active { background: rgba(21, 21, 21, 0.09); }

.mp360-legend__switch:focus-visible,
.mp360-legend__plan:focus-visible,
.mp360-legend__toggle:focus-visible,
.mp360-legend__clear:focus-visible {
  outline: 2px solid var(--primary-700, #4742A1);
  outline-offset: 1px;
}

/* Seleccionado: check, borde violeta y fondo violeta muy suave. El color
   comercial sigue identificando el plan; la selección nunca se comunica
   sólo con color. */
.mp360-legend__switch.is-on,
.mp360-legend__plan.is-on {
  border-color: var(--primary-700, #4742A1);
  background: rgba(71, 66, 161, 0.08);
}

/* Caja del checkbox: medidas fijas, borde dentro de la caja y centrado por
   grid. El grosor del borde no cambia al seleccionar, así que la caja no se
   mueve entre estados. Sin `overflow` propio: nada recorta el tilde. */
.mp360-legend__check {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(21, 21, 21, 0.35);
  border-radius: 5px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* El tilde se ancla al CENTRO de su caja y desde ahí rota y escala. El
   `translate(-50%, -50%)` va primero y `transform-origin: center` conserva el
   punto de anclaje, así que escalar no lo corre: su centro coincide con el de
   la caja en los dos estados. Sin left/top en píxeles ni márgenes negativos,
   que era lo que lo dejaba desplazado hacia arriba. */
.mp360-legend__tick {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--white, #FFFFFF);
  border-bottom: 2px solid var(--white, #FFFFFF);
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.6);
  opacity: 0;
  transition: opacity 0.18s var(--mp360-ease-ui), transform 0.18s var(--mp360-ease-ui);
}

.mp360-legend__switch.is-on .mp360-legend__check,
.mp360-legend__plan.is-on .mp360-legend__check {
  background: var(--primary-700, #4742A1);
  border-color: var(--primary-700, #4742A1);
}

.mp360-legend__switch.is-on .mp360-legend__tick,
.mp360-legend__plan.is-on .mp360-legend__tick {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.mp360-legend__switch-label { font-size: 0.8125rem; font-weight: 600; }

/* ---- 4. mostrar / ocultar valores — última acción de la tarjeta ----
   Va después de la lista: al cerrarse sube con el contenido y no deja hueco. */

.mp360-legend__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--lg-fila);
  margin-top: 0.875rem;        /* 14px entre la última fila y la acción */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-700, #4742A1);
  text-align: left;
  border-radius: var(--radius-compact, 6px);
}

.mp360-legend__toggle-label { flex: 1 1 auto; min-width: 0; }

/* Contador discreto: sólo cuando la lista está cerrada y hay filtros. */
.mp360-legend__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary-700, #4742A1);
  color: var(--white, #FFFFFF);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mp360-legend__badge[hidden] { display: none; }

.mp360-legend__chev {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--lg-dur) var(--lg-ease);
}

.mp360-legend__toggle.is-open .mp360-legend__chev {
  transform: rotate(-135deg);
  transition-duration: var(--lg-dur-in);
}

/* ---- 5. lista de planes ---- */

.mp360-legend__values {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;             /* recorta mientras el alto se contrae */
  transition: height var(--lg-dur) var(--lg-ease);
}

.mp360-legend__values.is-open {
  transition-duration: var(--lg-dur-in);
  overflow-y: auto;             /* el único scroll interno, si hace falta */
  overscroll-behavior: contain;
}

.mp360-legend__values[hidden] { display: none; }

.mp360-legend__values-inner {
  opacity: 1;
  transition: opacity var(--lg-dur) var(--lg-ease);
}

.mp360-legend__values:not(.is-open) .mp360-legend__values-inner { opacity: 0; }

/* La lista es ahora DOS grupos: la grilla de cuotas y, debajo, el contado. */
.mp360-legend__plans {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Rotulo del grupo financiado. Dice una sola vez el plazo que antes se
   repetia en las siete opciones. */
.mp360-legend__grupo {
  font-size: 0.6875rem;         /* 11px */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(21, 21, 21, 0.56);
}

/* Las cuotas se comparan entre si: dos columnas exactamente iguales, con el
   check, el color y el importe en los mismos ejes. */
.mp360-legend__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}

/* El contado no compite con las cuotas: ancho completo, debajo, separado por
   un divisor suave. Es otra forma de comprar, no una cuota mas. */
.mp360-legend__plan--ancho {
  width: 100%;
  margin-top: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px solid rgba(21, 21, 21, 0.10);
  border-radius: 0;
}

/* El importe del contado cierra la fila a la derecha; el rotulo se queda con
   el espacio que sobra. */
.mp360-legend__monto {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 16px entre el bloque de estado y la primera fila de plan. Va en el bloque
   desplegable para que se contraiga junto con él y no deje hueco al cerrar. */
.mp360-legend__values { margin-top: 1rem; }

/* El importe arranca siempre en la misma posición: el eje lo fijan el check
   y el swatch, que son de ancho fijo. */
.mp360-legend__v {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- 6. limpiar ---- */

.mp360-legend__clear {
  align-self: flex-start;
  min-height: var(--lg-fila);
  margin-top: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-700, #4742A1);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: var(--radius-compact, 6px);
}
.mp360-legend__clear[hidden] { display: none; }

/* `.mp360-visually-hidden` se mudo a mp360.css: es una utilidad compartida,
   no una pieza del panel de lotes. La usan el panel y el proyector. */

/* ==========================================================================
   Responsive — es el mismo componente en todos los viewports.
   No hay una segunda interfaz en móvil: sólo se ajustan medidas.
   ========================================================================== */

@media (max-width: 1023px) {
  .mp360-legend { width: 16.5rem; }
}

/* --------------------------------------------------------------------------
   Movil y tablet: la lista de planes pasa a DOS COLUMNAS

   Medido a 390x844 con la composicion de una columna: la tarjeta ocupaba
   264x575, el 68% del alto util, y arrancaba a 92px del borde inferior de la
   barra. El recorrido —que es la tarea principal— se quedaba con una franja.

   El alto lo manda la lista: 8 planes x 44px de objetivo tactil + separaciones
   = 373px de los 575. Reducir padding y gaps recorta decenas de pixeles; lo
   que cambia el orden de magnitud es repartir esas 8 filas en dos columnas.

   El texto NO se recorta ni se achica: pasa a dos renglones dentro de su fila
   ("60 cuotas de" / "$247.000"). Medido: el rotulo completo mide 140px en una
   linea y 70px en la mas ancha de las dos. La columna disponible a 390px son
   119px de texto, asi que entra con holgura y conserva los 13px.

   La tarjeta toma el ancho de su carril —el dock ya la estira por debajo de
   900px— con un tope de 26rem para que en tablet no se convierta en una franja.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* --------------------------------------------------------------------
     DOS FILAS, y las MISMAS en los dos estados

       fila 1   Lotes             | Mostrar/Ocultar planes   nombre + accion
       fila 2   ● No disponible   | ☐ Solo disponibles       estado + filtro
       fila 3   la lista de planes (solo expandida)

     Antes las areas eran `"titulo estado" / "filtro toggle"`: el estado caia
     en el eje del titulo y el filtro en el del disclosure, cruzados. Por eso
     `No disponible` se leia como si tuviera la misma funcion que
     `Mostrar planes`. Ahora cada columna tiene un solo papel —izquierda
     informa, derecha actua— y el disclosure NO se mueve al expandir, porque
     las areas no cambian entre estados.
     -------------------------------------------------------------------- */
  .mp360-legend {
    align-self: flex-start;
    width: min(100%, 26rem);
    --lg-pad: 0.75rem;

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "titulo toggle"
      "estado filtro"
      "planes planes";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.75rem;            /* 12px entre las dos filas de cabecera */
  }

  .mp360-legend h2.mp360-legend__title { grid-area: titulo; margin: 0; }

  .mp360-legend p.mp360-legend__state {
    grid-area: estado;
    justify-self: start;
    gap: 0.5rem;                 /* 8px entre el punto y su texto */
  }

  .mp360-legend__switch {
    grid-area: filtro;
    margin-top: 0;
    width: auto;
    justify-self: end;
  }

  .mp360-legend__toggle {
    grid-area: toggle;
    margin-top: 0;
    width: auto;
    justify-self: end;
    gap: 0.5rem;                 /* la flecha no se separa de su rotulo */
  }

  /* `align-self: stretch` es lo que ata la lista a su fila. La tarjeta declara
     `align-items: center` para centrar el titulo y el estado dentro de filas
     de 44px, y eso le daba a la lista `align-self: center`: se dimensionaba
     por su CONTENIDO y crecia fuera de la fila, con lo que el `max-height` de
     la tarjeta la recortaba en vez de hacerla scrollear. */
  .mp360-legend__values { grid-area: planes; min-height: 0; align-self: stretch; }

  /* --------------------------------------------------------------------
     La tarjeta no pasa del alto util

     A 320x568 la lista abierta pedia 599px en un viewport de 568 y la tarjeta
     se salia 115px por ARRIBA: `max-height: calc(100% - 1rem)` no ataba nada
     porque el 100% se resolvia contra una caja sin alto definido.

     Los 12rem que se descuentan son medidos, no elegidos: la barra de anuncio
     mas el navbar ocupan ~96px arriba y el selector de panoramas mas su aire
     ~94 abajo. El alto de referencia es el UTIL —`--mp360-vv-h`, el del visual
     viewport— no el de layout.

     Cuando el contenido no entra, el unico que scrollea es la lista. La
     cabecera —nombre, estado, filtro y disclosure— nunca se va de la vista.
     -------------------------------------------------------------------- */
  .mp360-legend {
    max-height: calc(var(--mp360-vv-h, 100dvh) - 12rem);
    grid-template-rows: auto auto minmax(0, 1fr);
  }


  /* La lista ya no arrastra el margen de escritorio: la separacion de la
     cabecera la da el `row-gap` de la tarjeta, y asi no queda un hueco doble
     entre la cabecera y los planes. */
  .mp360-legend__values { margin-top: 0.25rem; }
}

/* Por debajo de 360px las dos columnas de la segunda fila dejan de respirar:
   `● No disponible` pide 118px y `☐ Solo disponibles` 150, y con la
   separacion no entran en los 272 utiles. Se apilan, en ese orden, y la
   cabecera —nombre y accion— se mantiene intacta. No se comprime ningun
   texto ni se reduce ningun objetivo tactil. */
@media (max-width: 359.98px) {
  .mp360-legend {
    grid-template-areas:
      "titulo toggle"
      "estado estado"
      "filtro filtro"
      "planes planes";
    /* CUATRO filas acá, no tres: la fila que puede encogerse es la ultima, la
       de la lista. Heredando las tres de arriba, `minmax(0, 1fr)` le tocaba al
       filtro y la lista seguia creciendo hasta salirse de la tarjeta. */
    grid-template-rows: auto auto auto minmax(0, 1fr);
    row-gap: 0.625rem;
  }
  .mp360-legend__switch { justify-self: start; }
  .mp360-legend__grid { grid-template-columns: 1fr; }
}

/* Puntero grueso: el objetivo táctil sube al mínimo de DESIGN.md §7 sin
   agrandar la tipografía ni el resto de la tarjeta. */
@media (pointer: coarse) {
  .mp360-legend { --lg-fila: 44px; }
}

/* --------------------------------------------------------------------------
   Apaisado corto: estado y filtro comparten renglon

   El alto es el recurso en disputa. La leyenda de color y "Solo disponibles"
   son el MISMO grupo —que significa el color y como filtrar por el— asi que
   pasan a una sola linea en vez de dos filas apiladas. Medido a 740x360: la
   tarjeta compacta baja de 160px a 126px, del 44% al 35% del alto util.

   Los planes siguen a un toque en "Mostrar planes", que conserva su fila y su
   objetivo tactil completo.
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 480px) {
  .mp360-legend {
    display: grid;
    grid-template-columns: auto 1fr;
    /* La fila de los planes es la unica elastica: se queda con lo que sobra y
       scrollea. Sin `minmax(0, 1fr)` la fila se dimensiona por su contenido, la
       tarjeta desborda su propio `max-height` y su `overflow: hidden` recortaba
       la lista a media fila dejando "Ocultar planes" fuera de alcance. Eso es
       exactamente lo que UI-RESPONSIVE §8 prohibe: overflow que convierte el
       desborde en contenido inaccesible. */
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "titulo titulo"
      "estado filtro"
      "planes planes"
      "toggle toggle";
    align-items: center;
    column-gap: 0.75rem;
  }

  .mp360-legend__title { grid-area: titulo; margin-bottom: 0.25rem; }
  .mp360-legend p.mp360-legend__state { grid-area: estado; }
  .mp360-legend__switch { grid-area: filtro; margin-top: 0; width: auto; }

  .mp360-legend__values {
    grid-area: planes;
    align-self: stretch;
    /* El alto en pixeles que escribe el disclosure no puede pasarse de la
       fila: se topa aca y a partir de ahi scrollea. */
    max-height: 100%;
    min-height: 0;
  }
  .mp360-legend__values.is-open { overflow-y: auto; }

  .mp360-legend__toggle { grid-area: toggle; margin-top: 0.5rem; }
}

/* Alturas reducidas —móvil apaisado— la tarjeta se compacta y la lista se
   queda con el único scroll interno. */
@media (max-height: 560px) {
  /* El tope tiene que contar la navbar: `100%` resuelve contra el dock, que
     está anclado abajo y no sabe cuánto ocupa la barra. Sin esto la tarjeta se
     salía por arriba del viewport en apaisado. La lista absorbe lo que queda
     y es la única que scrollea. */
  .mp360-legend {
    --lg-pad: 0.75rem;
    /* 9.5rem = navbar (~64px) + el aire inferior del dock + un margen. Con
       7.5rem la tarjeta llegaba a meterse 19px por debajo de la barra. */
    max-height: calc(100dvh - 10rem);
  }
  .mp360-legend__values { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-legend__values,
  .mp360-legend__values-inner,
  .mp360-legend__chev,
  .mp360-legend__check,
  .mp360-legend__tick,
  .mp360-legend__switch,
  .mp360-legend__plan { transition: none !important; }
}