/* Cartel de versión nueva (app/ui/actualizar.js): tarjeta flotante encima de la barra de
   navegación, con el filete RGB de marca arriba, la G y el botón blanco de acción. */
/* z-index por encima del panel del coach (#coachHost 150, #coachSheetHost 300): con 60 quedaba
   debajo, se veían los botones del panel encima y el toque en "Actualizar" no llegaba. */
.upd { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-b) + var(--nav-h) + 12px); z-index: 350;
  display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.upd-card { pointer-events: auto; position: relative; overflow: hidden; width: 100%; max-width: 516px;
  display: flex; align-items: center; gap: var(--space-10);
  background: rgba(11,13,17,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gize-border); border-radius: 18px; padding: var(--space-12) var(--space-10) var(--space-12) var(--space-12);
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;
  animation: upd-in .38s var(--ease-drawer) both; }
.upd-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--gize-rgb-line); }
.upd-logo { flex: none; width: 42px; height: 42px; border-radius: var(--r-card); display: grid; place-items: center;
  background: #000; border: 1px solid var(--gize-border); box-shadow: 0 0 16px color-mix(in srgb, var(--gize-blue) 22%, transparent); }
.upd-logo img { width: 28px; height: 28px; display: block; }
.upd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.upd-title { font-size: var(--text-emphasis); font-weight: 700; color: var(--gize-text); display: flex; align-items: center; gap: var(--space-6); white-space: nowrap; }
.upd-sub { font-size: var(--text-meta); color: var(--gize-text-2); line-height: 1.35; display: flex; align-items: center; gap: var(--space-6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upd-forzada .upd-sub { white-space: normal; display: block; }
.upd-ver { font: 700 10.5px var(--gize-font-data); letter-spacing: .02em; color: var(--gize-blue);
  background: color-mix(in srgb, var(--gize-blue) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gize-blue) 30%, transparent);
  padding: 2px 6px; border-radius: var(--gize-radius-pill); }
.upd-go { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6);
  background: #fff; color: #000; font: 700 var(--text-body) var(--gize-font); text-decoration: none;
  padding: 10px 16px; border-radius: var(--gize-radius-pill); transition: transform .12s ease; }
.upd-go:active { transform: scale(.96); }
.upd-go svg { width: 18px; height: 18px; }
.upd-later { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: none; border: none; color: var(--gize-text-2); padding: 0; }
.upd-later svg { width: 16px; height: 16px; }
.upd-later:active { background: rgba(255,255,255,.06); }
/* Común: logo, texto y cruz arriba; el botón a lo ancho abajo (entra en pantallas de 320 px). */
.upd-row { display: grid; grid-template-columns: auto 1fr auto; row-gap: var(--space-12); padding: var(--space-14); }
.upd-row .upd-go { grid-column: 1 / -1; padding: 12px 16px; }
.upd-row .upd-later { align-self: start; margin: -4px -4px 0 0; }
.upd-out .upd-card { animation: upd-out .2s ease forwards; }

/* Obligatoria: tapa toda la app, tarjeta al centro con la G grande y el botón con anillo RGB
   (es la única acción posible). */
.upd-forzada { inset: 0; z-index: 10002; align-items: center; padding: 24px; pointer-events: auto;
  background: rgba(0,0,0,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: upd-fade .3s ease both; }
.upd-forzada .upd-card { flex-direction: column; text-align: center; gap: var(--space-10); max-width: 360px;
  padding: 30px 22px 22px; border-radius: var(--gize-radius); background: var(--gize-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
.upd-forzada .upd-logo { width: 64px; height: 64px; border-radius: 18px; margin-bottom: var(--space-4); }
.upd-forzada .upd-logo img { width: 42px; height: 42px; }
.upd-forzada .upd-title { font-size: 20px; justify-content: center; }
.upd-forzada .upd-sub { font-size: var(--text-body); margin: 0 0 var(--space-8); }
.upd-forzada .upd-go { width: 100%; padding: 15px 24px; font-size: 16px; }

@keyframes upd-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes upd-out { to { opacity: 0; transform: translateY(12px); } }
@keyframes upd-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .upd-card, .upd-forzada, .upd-out .upd-card { animation: none; } }