/* versionGate — modal de "hay versión nueva" (plan 2026-09-10-front-version-gate). Lo pinta js/shared/versionGate.js a mano sobre . Todo el color sale de los tokens semánticos --atlas-*, así que el modal sigue al tema sin tocar nada: gris claro en la app y oscuro dentro de .theme-technification. Nada de CSS inline (plan 2026-07-15-design-tokens-unification). Escala tomada de atlasEntityPicker.css / wizards.css para que no cante al lado del resto: radios lg/xl (10-12px), sombra 2, cuerpo en .875rem y superficies grises con borde de 1px en vez de blanco puro flotando sobre la sombra. */ .avg-overlay { position: fixed; inset: 0; z-index: var(--atlas-z-max); display: flex; align-items: center; justify-content: center; padding: var(--atlas-space-4); background: var(--atlas-overlay); } .avg-box { width: 100%; max-width: 440px; max-height: calc(100vh - var(--atlas-space-8)); overflow-y: auto; padding: var(--atlas-space-6); border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-xl); background: var(--atlas-surface-muted); box-shadow: var(--atlas-shadow-2); text-align: center; } .avg-title { margin: 0; font-family: var(--atlas-font-display); font-size: 1.125rem; font-weight: 600; color: var(--atlas-text); } .avg-subtitle { margin: var(--atlas-space-1) 0 0; font-size: .875rem; color: var(--atlas-text-muted); } /* Aviso de release obligatoria. Solo se pinta cuando required=true. Gris con borde, no el azul de --atlas-sev-info-bg: esto es una nota de contexto, no una alerta, y el color fuerte lo reserva la app para severidades de verdad. */ .avg-notice { display: flex; gap: var(--atlas-space-3); align-items: flex-start; margin-top: var(--atlas-space-5); padding: var(--atlas-space-3) var(--atlas-space-4); border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-lg); background: var(--atlas-surface-sunken); color: var(--atlas-text-secondary); font-size: .875rem; text-align: left; } .avg-notice-icon { flex: 0 0 auto; font-size: 1rem; line-height: 1.4; color: var(--atlas-text-muted); } /* El cuerpo va en la superficie clara sobre el gris de la caja: la jerarquía se lee por el contraste entre las dos, no por una sombra más. */ .avg-body { margin-top: var(--atlas-space-4); padding: var(--atlas-space-4) var(--atlas-space-5); border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-lg); background: var(--atlas-surface); text-align: left; } .avg-label { margin: 0 0 var(--atlas-space-2); font-family: var(--atlas-font-mono); font-size: .6875rem; color: var(--atlas-text-faint); } .avg-headline { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--atlas-text-secondary); } .avg-items-title { margin: var(--atlas-space-4) 0 var(--atlas-space-2); padding-top: var(--atlas-space-3); border-top: 1px solid var(--atlas-border); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--atlas-text-faint); } .avg-items { margin: 0; padding: 0; list-style: none; } .avg-item { display: flex; align-items: center; gap: var(--atlas-space-3); padding: var(--atlas-space-2) 0; font-size: .875rem; color: var(--atlas-text-secondary); } /* La marca de verificación va en CSS y no en el HTML: es decoración, y así no la lee el lector de pantalla ni se cuela en el texto al copiar. En gris: son las líneas de un changelog, no estados OK que haya que celebrar en verde. */ .avg-item::before { content: '\2713'; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--atlas-radius-full); background: var(--atlas-surface-sunken); box-shadow: inset 0 0 0 1px var(--atlas-border-strong); font-size: .625rem; color: var(--atlas-text-muted); } .avg-actions { display: flex; gap: var(--atlas-space-2); margin-top: var(--atlas-space-5); } .avg-btn { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: var(--atlas-space-2); min-height: 40px; padding: 0 var(--atlas-space-4); border: 1px solid transparent; border-radius: var(--atlas-radius-lg); font-family: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; } .avg-btn:focus-visible { outline: 2px solid var(--atlas-border-focus); outline-offset: 2px; } .avg-btn-primary { background: var(--atlas-color-primary); color: var(--atlas-text-on-primary); } .avg-btn-primary:hover { background: var(--atlas-color-primary-hover); } .avg-btn-ghost { border-color: var(--atlas-border-strong); background: var(--atlas-surface); color: var(--atlas-text-secondary); } .avg-btn-ghost:hover { background: var(--atlas-surface-sunken); color: var(--atlas-text); }