/* Aviso de migración (modulos89.js). Bienvenida: panel de vidrio a la derecha del reloj (tarjeta compacta si la pantalla es angosta). Menú: titular grande arriba de los mosaicos, mosaico «Tu migración» y su ventana.
   Del reloj (240 px) al escritorio, en claro y oscuro. */

.aviso89 { box-sizing: border-box; min-width: 0; }
.aviso89 p, .aviso89 h2, .aviso89 h3 { margin: 0; overflow-wrap: anywhere; }
.aviso89 ul { list-style: none; margin: 0; padding: 0; }
.aviso89 li { display: flex; gap: 10px; align-items: center; line-height: 1.25; }
.aviso89 li svg { width: 20px; height: 20px; flex: none; }

/* ---------------- pantalla de bienvenida ---------------- */
/* angosta o baja: tarjeta compacta debajo de la fecha (título, una línea y el llamado) */
#protector .aviso89-protector { width: min(520px, 100%); margin: clamp(10px, 2.4vh, 22px) auto 0; padding: 12px 18px; border-radius: 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); color: #fff; text-align: center; cursor: default; }
#protector .aviso89-protector .av-chip { display: none; }
#protector .aviso89-protector h3 { font-size: 1.1rem; font-weight: 650; line-height: 1.2; }
#protector .aviso89-protector p { margin-top: 2px; font-size: .9rem; opacity: .85; line-height: 1.35; }
#protector .aviso89-protector ul { display: none; }
#protector .aviso89-protector strong { display: block; margin-top: 6px; font-size: 1rem; color: #fde3b0; }
/* celular alto: además se ven los cuatro puntos */
@media (max-width: 760px) and (min-height: 761px) {
  #protector .aviso89-protector ul { display: grid; gap: 7px; width: fit-content; margin: 10px auto 2px; text-align: left; font-size: .88rem; }
  #protector .aviso89-protector li svg { color: #8fe3d0; }
}
@media (max-height: 660px), (max-width: 330px) { #protector .aviso89-protector p { display: none; } #protector .aviso89-protector strong { margin-top: 3px; } }
@media (max-height: 330px) { #protector .aviso89-protector { display: none; } }
/* ancha: panel de vidrio a la derecha, donde sobra espacio, y la columna del reloj queda como antes */
@media (min-width: 1100px) and (min-height: 600px) {
  #protector .aviso89-protector { position: absolute; right: clamp(24px, 4vw, 64px); top: 50%; transform: translateY(-50%); width: min(340px, 26vw); margin: 0; padding: 24px 24px 22px; border-radius: 24px; backdrop-filter: blur(12px); text-align: left; background: rgba(255,255,255,.10); }
  #protector .aviso89-protector .av-chip { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 14px; background: linear-gradient(145deg, #5ec8e8, #3a6fe0); box-shadow: 0 8px 24px rgba(58,111,224,.45); }
  #protector .aviso89-protector .av-chip svg { width: 28px; height: 28px; color: #fff; }
  #protector .aviso89-protector h3 { font-size: 1.4rem; line-height: 1.15; }
  #protector .aviso89-protector p { display: block; margin: 6px 0 14px; font-size: .95rem; }
  #protector .aviso89-protector ul { display: grid; gap: 10px; margin-bottom: 16px; font-size: .95rem; }
  #protector .aviso89-protector li svg { color: #8fe3d0; }
  #protector .aviso89-protector strong { margin-top: 0; font-size: 1.05rem; }
}

/* ---------------- menú: titular grande ---------------- */
.menu-mosaicos .aviso89-menu { grid-column: 1 / -1; position: relative; padding: 0 56px clamp(8px, 2.4vh, 28px) clamp(4px, 2vw, 28px); color: var(--tinta); text-align: left; }
.aviso89-menu h2 { margin-bottom: 10px; max-width: 22ch; font-size: clamp(1.9rem, 3.2vw, 3rem); font-weight: 300; line-height: 1.08; letter-spacing: -.01em; }
.aviso89-menu p { margin-bottom: 14px; max-width: 62ch; font-size: 1.02rem; line-height: 1.5; color: var(--tinta-suave, inherit); }
.aviso89-menu ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 14px; font-size: .92rem; }
.aviso89-menu li svg { color: color-mix(in srgb, var(--tinta) 35%, #2a9fd0); }
.aviso89-menu .av-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.aviso89-menu strong { font-size: 1.05rem; color: var(--ambar, #eeb052); }
.aviso89-menu .av-mas { min-height: 40px; padding: 0 16px; border: 1px solid var(--regla); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .92rem; cursor: pointer; }
.aviso89-menu .av-mas:hover, .aviso89-menu .av-mas:focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); }
.aviso89-menu .aviso89-x { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--tinta-suave, inherit); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.aviso89-menu .aviso89-x:hover, .aviso89-menu .aviso89-x:focus-visible { background: color-mix(in srgb, currentColor 14%, transparent); }
@media (max-width: 480px) { .menu-mosaicos .aviso89-menu { padding-right: 44px; } .aviso89-menu h2 { font-size: 1.6rem; } .aviso89-menu p { font-size: .95rem; } }

/* ---------------- menú: el mosaico «Tu migración» ---------------- */
.menu-mosaicos .mos-migracion .mos-ico { background: linear-gradient(145deg, #5ec8e8, #3a6fe0); --c: #3a6fe0; color: #fff; position: relative; overflow: visible; }
.mos-migracion .mos-nov { position: absolute; top: -9px; right: -12px; padding: 3px 9px; border-radius: 999px; background: #f0b45a; color: #2b1d05; font: 700 .72rem/1.2 system-ui, sans-serif; box-shadow: 0 4px 12px rgba(0,0,0,.35); }

/* ---------------- su ventana ---------------- */
.mig89 { display: flex; flex-direction: column; max-height: calc(100svh - 64px); min-height: 0; }
.mig89-logo { flex: none; text-align: center; margin-bottom: 12px; }
.mig89-logo .marca-v { display: block; width: clamp(120px, 38%, 190px); height: auto; margin: 0 auto; }
.mig89-logo .m-flor { fill: var(--marca-jade, #568576); } .mig89-logo .m-nombre { fill: var(--tinta); } .mig89-logo .m-sub { fill: var(--tinta-suave); }
.mig89-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; text-align: left; }
.mig89-cuerpo h3 { margin: 0 0 10px; text-align: center; }
.mig89-cuerpo p { margin: 0 0 10px; line-height: 1.5; }
.mig89 .modal-salida-botones { flex: none; margin-top: 8px; }
@media (max-height: 420px) { .mig89-logo { display: none; } }