/* ═══════════════════════════════════════════════════════════════════════════
   El globo que anuncia un apartado nuevo, anclado a su ítem del menú.
   Lo dibuja `Frontend/componentes/aviso-novedad.js`.

   ⚠ Comparte el LENGUAJE del globo del recorrido guiado (`tour.css`) a propósito —misma
     caja, mismo borde de acento, mismos botones— pero no sus clases: son dos componentes
     con vidas distintas, y compartir selectores haría que tocar uno moviera el otro.
   ═══════════════════════════════════════════════════════════════════════════ */

.mxnov {
  position: fixed;
  /* Por debajo del overlay de carga (9999) NO: el componente ya espera a que la pantalla
     esté lista, así que cuando aparece no hay overlay. Va por encima del menú y de las
     tarjetas, que es lo único que puede tener al lado. */
  z-index: 10040;
  width: min(330px, calc(100vw - 24px));
  background: var(--navy-2);
  border: 1px solid var(--blue);
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
  padding: 13px 15px 11px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  animation: mxnovEntra .22s ease-out both;
}

/* La flecha que APUNTA al ítem. Son dos triángulos superpuestos —el de atrás del color del
   borde, el de adelante del fondo— porque un `border` no puede seguir la diagonal de un
   triángulo hecho con bordes. Su `top` lo escribe el JavaScript: sigue al ítem. */
.mxnov-flecha {
  position: absolute;
  left: -9px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 9px solid var(--blue);
  margin-top: -8px;
}
.mxnov-flecha::after {
  content: '';
  position: absolute;
  left: 1px; top: -7px;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 8px solid var(--navy-2);
}

.mxnov-etq {
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  /* El acento va en la LETRA, con fondo neutro: un tinte del propio acento debajo de su
     propio texto es el patrón de bajo contraste que este proyecto ya corrigió en cuatro
     lugares, y en tema claro deja el texto por debajo de 4,5:1. */
  color: var(--blue-light-txt, var(--blue-light));
  font-weight: 700;
  margin-bottom: 3px;
}
.mxnov-tit { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.mxnov-txt { color: var(--text-2); }
.mxnov-txt b { color: var(--text); }

.mxnov-pie { display: flex; align-items: center; gap: 8px; margin-top: 13px; }

.mxnov-btn {
  padding: 5px 12px; font-size: 12px; font-family: var(--font);
  color: var(--text); background: var(--navy-3);
  border: 1px solid var(--border-2); border-radius: 6px; cursor: pointer;
}
/* ⚠ `:hover` no exime al deshabilitado por su cuenta — acá ningún botón se deshabilita,
   pero se escribe con la guarda igual para que copiar este bloque no reintroduzca el
   defecto que el usuario ya reportó en el botón de carga. */
.mxnov-btn:hover:not(:disabled) { background: var(--navy-4); border-color: var(--blue); }
.mxnov-pri {
  color: var(--blue-light-txt, var(--blue-light));
  border-color: var(--blue);
}

@keyframes mxnovEntra {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ⚠ La salida NO se hace con `animation: none` bajo movimiento reducido: el bloque global
   de `styles-extra.css` anula la DURACIÓN, así que la animación corre completa y termina
   donde tiene que terminar. Acá solo se declara el estado final. */
.mxnov-out { opacity: 0; transition: opacity .18s ease-in; }

/* La etiqueta «beta» del título del apartado vive en `estilos/proyeccion.css`, con el
   apartado que la lleva: es parte de esa pantalla, no de este componente. */