/* MP360 · Ayres de Cardales — «Alcance de la información»
 *
 * Dos superficies, mismo contenido: la cinta breve que aparece una vez al
 * entrar y el panel completo del menú. Comportamiento y contrato responsive en
 * assets/js/mp360-alcance.js.
 *
 * Capas dentro de #mp360-root: cinta 38 (sobre el recorrido y el tooltip de
 * lote, por debajo del aviso de sistema 40 y de las superficies 50);
 * panel 50, como el resto de los modales.
 */

/* ================= aviso breve (no modal) ================= */

.mp360-root .mp360-alcance-aviso {
  position: absolute;
  z-index: 38;
  /* Bajo el navbar: el único borde libre (abajo viven disponibilidad,
     selector y plano). El navbar publica su propio alto. */
  top: calc(var(--mp360-navbar-bottom, 72px) + 12px);
  left: 50%;
  width: min(560px, calc(100vw - 32px));
  transform: translateX(-50%) translateY(-8px);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 14px 14px 16px;

  border-radius: var(--radius-modal, 14px);
  /* Vidrio oscuro: hereda el lenguaje del navbar y se lee sobre cualquier
     panorama, claro u oscuro. */
  background: rgba(19, 43, 50, 0.92);
  color: var(--white, #fff);
  box-shadow: 0 10px 30px rgba(10, 28, 33, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.14);

  font-family: var(--mp360-font);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.mp360-root .mp360-alcance-aviso[data-visible] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

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

.mp360-alcance-aviso__titulo {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white, #fff);
}

.mp360-alcance-aviso__linea {
  margin: 0 0 3px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}
.mp360-alcance-aviso__linea:last-child { margin-bottom: 0; }

.mp360-alcance-aviso__cerrar {
  /* El target supera al ícono, como pide DESIGN.md §7. */
  width: 44px;
  height: 44px;
  margin: -8px -6px 0 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.16s linear, background-color 0.16s linear;
}
@media (hover: hover) {
  .mp360-alcance-aviso__cerrar:hover {
    color: var(--white, #fff);
    background: rgba(255, 255, 255, 0.12);
  }
}
.mp360-alcance-aviso__cerrar:focus-visible {
  outline: 2px solid var(--white, #fff);
  outline-offset: 2px;
}

/* Cuenta regresiva: explica por qué se va solo. Se detiene al leer. */
.mp360-alcance-aviso__progreso {
  grid-column: 1 / -1;
  height: 2px;
  margin: 2px -14px -16px;
  border-radius: 0 0 var(--radius-modal, 14px) var(--radius-modal, 14px);
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.mp360-alcance-aviso__progreso-relleno {
  display: block;
  height: 100%;
  transform-origin: left center;
  background: var(--brand-secondary, #5DAEC4);
}
.mp360-alcance-aviso[data-pausado] .mp360-alcance-aviso__progreso-relleno {
  background: rgba(255, 255, 255, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .mp360-root .mp360-alcance-aviso { transition: opacity 0.16s linear; transform: translateX(-50%); }
  .mp360-root .mp360-alcance-aviso[data-visible] { transform: translateX(-50%); }
}

/* Móvil: casi todo el ancho, con gutter; el texto manda sobre el adorno. */
@media (max-width: 599.98px) {
  .mp360-root .mp360-alcance-aviso {
    width: calc(100vw - 24px);
    padding: 12px 12px 14px;
  }
  .mp360-alcance-aviso__linea,
  .mp360-alcance-aviso__titulo { font-size: 0.78125rem; }
  .mp360-alcance-aviso__progreso { margin: 2px -12px -14px; }
}

/* Altura reducida (teléfono horizontal): pegado al navbar, sin aire extra. */
@media (max-height: 520px) {
  .mp360-root .mp360-alcance-aviso {
    top: calc(var(--mp360-navbar-bottom, 56px) + 6px);
    padding: 10px 12px 12px;
  }
  .mp360-alcance-aviso__titulo { margin-bottom: 3px; }
}

/* ================= panel completo (modal) ================= */

.mp360-root .mp360-alcance {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--mp360-vv-top, 0px);
  height: var(--mp360-vv-h, 100%);
  z-index: 50;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: clamp(16px, 4vw, 48px);
  font-family: var(--mp360-font);
}

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

.mp360-alcance__velo {
  position: fixed;
  inset: 0;
  background: rgba(10, 28, 33, 0.6);
  touch-action: none;
}

.mp360-alcance__dialogo {
  position: relative;
  width: min(540px, 100%);
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: clamp(20px, 3.4vw, 32px);
  padding-right: clamp(56px, 7vw, 68px);          /* lugar reservado al cierre */
  border-radius: var(--radius-modal, 14px);
  background: var(--white, #fff);
  color: var(--primary-900, #132B32);
  box-shadow: 0 18px 50px rgba(10, 28, 33, 0.4);
}

.mp360-alcance__titulo {
  margin: 0 0 12px;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  font-weight: 600;
  color: var(--primary-900, #132B32);
}

.mp360-alcance__linea {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--primary-800, #1E3F48);
}
.mp360-alcance__linea:last-child { margin-bottom: 0; }

.mp360-alcance__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
}
@media (hover: hover) {
  .mp360-alcance__cerrar:hover { background: rgba(19, 43, 50, 0.08); }
}
.mp360-alcance__cerrar:focus-visible {
  outline: 2px solid var(--primary-700, #2D5661);
  outline-offset: 2px;
}

/* Móvil vertical: hoja inferior, con la salida a mano. */
@media (max-width: 599.98px) {
  .mp360-root .mp360-alcance {
    place-items: end stretch;
    padding: 0;
  }
  .mp360-alcance__dialogo {
    width: 100%;
    max-height: 86%;
    border-radius: var(--radius-modal, 14px) var(--radius-modal, 14px) 0 0;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    padding-right: 64px;
  }
}

/* ================= acceso desde el navbar =================
   El ítem es terciario: informa sobre la herramienta, no sobre el barrio, y
   compite con los ítems de contenido. En la barra de desktop va como ícono
   (el rótulo completo mide 196 px y empujaba los CTA fuera del viewport entre
   1180 y ~1300). En el menú conserva su nombre completo.
   Se define acá y no en mp360-navbar.css para no tocar el port de Advisora. */

#mp360-navbar .nav_alcance {
  display: grid;
  place-items: center;
  /* Target completo aunque el glifo mida 20 px (DESIGN.md §7). */
  width: 44px;
  height: 44px;
  padding: 0;
  opacity: 0.72;
  transition: opacity 0.16s linear;
}

#mp360-navbar .nav_alcance__icono {
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../icons/nucleo/circle-info.svg") center / contain no-repeat;
  mask: url("../icons/nucleo/circle-info.svg") center / contain no-repeat;
}

@media (hover: hover) {
  #mp360-navbar .nav_alcance:hover { opacity: 1; }
}
#mp360-navbar .nav_alcance:focus-visible { opacity: 1; }