/* ============================================================================
   Anime Studio — app/css/xp.css
   Área «Experiencia y productividad» (Agente E): cuenta, paleta de comandos,
   editor de atajos, historial, barra de estado ampliada, espacios de trabajo,
   menú radial, barra rápida, gestos, visita guiada, ayuda y novedades.

   Sólo tokens de tokens.css: ni un color literal salvo los de sombra/escrim,
   para que los temas oscuro, claro y de alto contraste funcionen solos.
   ========================================================================== */

/* --- Capa propia de superposiciones --------------------------------------- */
.xp-root {
  position: relative;
  z-index: var(--z-menu);
}

.xp-pop {
  position: fixed;
  z-index: var(--z-menu);
  animation: xp-pop-in 120ms var(--ease-out) both;
}

@keyframes xp-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* --- Avatar ---------------------------------------------------------------- */
.xp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--accent-grad, var(--accent));
  color: var(--accent-fg);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  overflow: hidden;
  user-select: none;
}
.xp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.xp-avatar-sm { width: 22px; height: 22px; font-size: 10px; }
.xp-avatar-lg { width: 40px; height: 40px; font-size: var(--fs-md); }

/* --- Botón de cuenta -------------------------------------------------------- */
#menubar-user.xp-acc-btn { position: relative; }
#menubar-user.is-signed-in { padding: 0; }
#menubar-user .xp-acc-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--warn);
  box-shadow: 0 0 0 2px var(--s-1);
}
#menubar-user.is-expired { color: var(--warn); }
#menubar-user.is-local .icon { opacity: 0.8; }

.xp-acc-menu {
  min-width: 270px;
  padding: var(--sp-3);
}
.xp-acc-head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}
.xp-acc-who { min-width: 0; }
.xp-acc-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xp-acc-meta {
  color: var(--fg-dim);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xp-acc-sync {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  color: var(--fg-mute);
  font-size: var(--fs-xs);
}
.menu-item.xp-danger { color: var(--err); }
.menu-item.xp-danger:hover:not(:disabled) { background: var(--err); color: #fff; }

.xp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--fg-mute);
  flex: 0 0 auto;
}
.xp-dot.is-on { background: var(--ok); }
.xp-dot.is-off { background: var(--err); }
.xp-dot.is-warn { background: var(--warn); }

/* --- Diálogo «modo local» --------------------------------------------------- */
.xp-local-hero {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}
.xp-local-icon { color: var(--accent); flex: 0 0 auto; }
.xp-local-lead { margin: 0; line-height: var(--lh-normal); }
.xp-local-list {
  margin: var(--sp-5) 0 0;
  padding-left: var(--sp-7);
  color: var(--fg-dim);
  line-height: var(--lh-normal);
}
.xp-local-list li + li { margin-top: var(--sp-2); }
.xp-local-status { min-height: 1.4em; margin-top: var(--sp-5); }

/* --- Movimiento reducido ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .xp-pop { animation: none; }
}
:root[data-animations="off"] .xp-pop { animation: none; }

/* --- Paleta de comandos ------------------------------------------------------ */
.xp-pal-backdrop { padding-top: 10vh; }
.xp-pal {
  width: min(680px, calc(100vw - 24px));
  max-height: min(72vh, 640px);
  animation: xp-pop-in 120ms var(--ease-out) both;
}
.xp-pal.no-anim { animation: none; }
.xp-pal-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--bd);
}
.xp-pal-search { color: var(--fg-mute); flex: 0 0 auto; }
.xp-pal-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-5) 0;
  border-bottom: 0;
  font-size: var(--fs-lg);
}
.xp-pal-modes {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bd);
  overflow-x: auto;
  scrollbar-width: none;
}
.xp-pal-mode {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-4);
  border: 1px solid var(--bd);
  border-radius: var(--r-full);
  background: none;
  color: var(--fg-dim);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.xp-pal-mode:hover { background: var(--s-3); color: var(--fg); }
.xp-pal-mode.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--fg); }
.xp-pal-prefix {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: var(--fw-bold);
}
.xp-pal-list { padding: var(--sp-2) var(--sp-3); }
.xp-pal-section {
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  color: var(--fg-mute);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.xp-pal-item { min-height: 34px; padding: 4px var(--sp-4); }
.xp-pal-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--s-3);
  color: var(--fg-dim);
}
.cmdp-item.is-sel .xp-pal-ico { background: rgba(0, 0, 0, 0.18); color: #fff; }
.xp-pal-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.xp-pal-main .cmdp-label { font-size: var(--fs-md); }
.xp-pal-main mark {
  background: none;
  color: var(--accent);
  font-weight: var(--fw-bold);
}
.cmdp-item.is-sel .xp-pal-main mark { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.xp-pal-path {
  color: var(--fg-mute);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdp-item.is-sel .xp-pal-path { color: rgba(255, 255, 255, 0.78); }
.xp-pal-on { color: var(--ok); display: inline-flex; flex: 0 0 auto; }
.cmdp-item.is-sel .xp-pal-on { color: #fff; }
.xp-pal-kind {
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--s-3);
  font-size: var(--fs-xs);
}
.cmdp-item.is-sel .xp-pal-kind { background: rgba(0, 0, 0, 0.2); }
.xp-pal-item.is-disabled { opacity: var(--op-disabled); }
.xp-pal-item.is-disabled.is-sel { opacity: 0.7; }
.xp-pal-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--bd);
  background: var(--s-1);
  color: var(--fg-mute);
  font-size: var(--fs-xs);
}
.xp-pal-keys { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp-pal-foot kbd, .xp-kbd {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--bd-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--s-2);
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.xp-pal-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

.panel.xp-flash { box-shadow: 0 0 0 2px var(--accent-ring) inset; transition: box-shadow var(--t-med); }
.xp-local-list { list-style: disc; }

/* --- Editor de atajos -------------------------------------------------------- */
.xp-sc-dialog .dialog-body { display: flex; flex-direction: column; gap: var(--sp-4); }
.xp-sc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}
.xp-sc-search { flex: 1 1 260px; min-width: 200px; }
.xp-sc-keybtn.is-active { background: var(--accent-soft); color: var(--fg); box-shadow: 0 0 0 1px var(--accent) inset; }
.xp-sc-count {
  margin-left: var(--sp-3);
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--s-4);
  color: var(--fg-dim);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.xp-sc-hint { margin: 0; }
.xp-sc-notice { min-height: 1.3em; color: var(--fg-dim); font-size: var(--fs-sm); }
.xp-sc-notice.is-ok { color: var(--ok); }
.xp-sc-notice.is-warn { color: var(--warn); }
.xp-sc-notice.is-err { color: var(--err); }
.xp-sc-list {
  min-height: 0;
  max-height: min(56vh, 560px);
  overflow-y: auto;
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 0 var(--sp-4) var(--sp-4);
}
.xp-sc-group {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: var(--sp-5) 0 var(--sp-3);
  background: var(--s-2);
  color: var(--fg-mute);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.xp-sc-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-sm);
}
.xp-sc-row:hover { background: var(--s-3); }
.xp-sc-row.is-recording { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.xp-sc-row.xp-flash-row { animation: xp-flash-row 1.2s var(--ease) 1; }
@keyframes xp-flash-row {
  0% { background: var(--accent-soft-hover); }
  100% { background: transparent; }
}
.xp-sc-name { display: flex; flex-direction: column; min-width: 0; }
.xp-sc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-sc-id { color: var(--fg-mute); font-family: var(--font-mono); font-size: var(--fs-xs); }
.xp-sc-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.xp-sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 2px;
  border-radius: var(--r-sm);
}
.xp-sc-chip.is-clash .xp-kbd { border-color: var(--err); color: var(--err); background: var(--err-soft); }
.xp-sc-chip.is-reserved .xp-kbd { border-style: dashed; }
.xp-sc-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--fg-mute);
  opacity: 0.55;
}
.xp-sc-row:hover .xp-sc-x, .xp-sc-x:focus-visible { opacity: 1; }
.xp-sc-x:hover { background: var(--err-soft); color: var(--err); }
.xp-sc-none { color: var(--fg-mute); font-size: var(--fs-sm); font-style: italic; }
.xp-sc-btns { display: flex; gap: var(--sp-2); }
.xp-sc-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9px;
  pointer-events: none;
}
.xp-sc-rec {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--accent);
  font-size: var(--fs-sm);
}
.xp-sc-rec .icon { color: var(--err); animation: xp-blink 1s steps(2) infinite; }
@keyframes xp-blink { 50% { opacity: 0.25; } }
.xp-sc-foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 700px) {
  .xp-sc-row { grid-template-columns: 1fr auto; }
  .xp-sc-chips { grid-column: 1 / -1; }
}

/* --- Panel de historial ------------------------------------------------------ */
.xp-hist { display: flex; flex-direction: column; min-height: 0; }
.xp-hist-list {
  max-height: 260px;
  overflow-y: auto;
  padding: var(--sp-2);
  outline: none;
}
.xp-hist-dialog .xp-hist-list { max-height: 60vh; }
.xp-hist-row {
  display: grid;
  grid-template-columns: 22px 18px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 26px;
  padding: 2px var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.xp-hist-row:hover { background: var(--s-3); }
.xp-hist-row:focus-visible { outline: var(--focus-w) solid var(--accent-ring); outline-offset: -2px; }
.xp-hist-row.is-current { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.xp-hist-row.is-future { color: var(--fg-mute); }
.xp-hist-row.is-future .xp-hist-label { text-decoration: line-through; text-decoration-color: var(--bd-strong); }
.xp-hist-n { color: var(--fg-mute); font-size: var(--fs-xs); text-align: right; }
.xp-hist-ico { display: inline-flex; color: var(--fg-dim); }
.xp-hist-row.is-current .xp-hist-ico { color: var(--accent); }
.xp-hist-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-hist-size { color: var(--fg-mute); font-size: var(--fs-xs); }
.xp-hist-empty { padding: var(--sp-4) var(--sp-5); color: var(--fg-mute); font-size: var(--fs-sm); }
.xp-hist-empty[hidden] { display: none; }
.xp-hist-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--bd);
  color: var(--fg-mute);
  font-size: var(--fs-xs);
}

/* --- Barra de estado ampliada -------------------------------------------------- */
#statusbar .xp-st-net,
#statusbar .xp-st-hist {
  height: calc(var(--statusbar-h) - 4px);
  min-height: 0;
  padding: 0 var(--sp-3);
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--fg-dim);
}
#statusbar .xp-st-hist .icon { width: 12px; height: 12px; }
#statusbar .xp-st-click { cursor: pointer; border-radius: var(--r-sm); }
#statusbar .xp-st-click:hover { background: var(--s-3); color: var(--fg); }
#statusbar .xp-st-click:focus-visible { outline: var(--focus-w) solid var(--accent-ring); outline-offset: -1px; }
#status-save.is-error { color: var(--err); }

/* --- Bandas de aviso (sin conexión / conflicto) -------------------------------- */
.xp-banner {
  position: fixed;
  top: calc(var(--menubar-h) + 6px);
  left: 50%;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: min(720px, calc(100vw - 24px));
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  transform: translateX(-50%);
  border: 1px solid var(--bd-strong);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--s-2);
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm);
}
.xp-banner[hidden] { display: none; }
.xp-banner.is-offline { border-left-color: var(--err); }
.xp-banner > .icon { color: var(--warn); flex: 0 0 auto; }
.xp-banner.is-offline > .icon { color: var(--err); }
.xp-banner-msg { flex: 1 1 auto; line-height: 1.4; }

/* --- Barra rápida ---------------------------------------------------------------- */
.xp-qb {
  position: fixed;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--s-2) 92%, transparent);
  box-shadow: var(--sh-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.xp-qb[hidden] { display: none; }
.xp-qb.is-vertical { flex-direction: column; border-radius: calc(var(--r-lg) + 6px); }
.xp-qb.is-vertical .xp-qb-items { flex-direction: column; }
.xp-qb-items { display: flex; gap: 2px; }
.xp-qb-btn,
.xp-qb-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(36px, var(--ctrl-h-cur));
  height: max(36px, var(--ctrl-h-cur));
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--fg-dim);
}
.xp-qb-btn:hover:not(:disabled) { background: var(--s-4); color: var(--fg); }
.xp-qb-btn.is-on { background: var(--accent); color: var(--accent-fg); }
.xp-qb-btn:disabled { opacity: var(--op-disabled); }
.xp-qb-btn:focus-visible, .xp-qb-grip:focus-visible { outline: var(--focus-w) solid var(--accent-ring); outline-offset: 1px; }
.xp-qb-grip { width: 22px; cursor: grab; color: var(--fg-mute); }
.xp-qb.is-dragging .xp-qb-grip { cursor: grabbing; }
.xp-qb.is-vertical .xp-qb-grip { width: max(36px, var(--ctrl-h-cur)); height: 22px; }
@media (pointer: coarse) {
  .xp-qb-btn { width: var(--touch-min); height: var(--touch-min); }
}

/* --- Configuración de la barra rápida y selector de comandos ---------------------- */
.xp-qbc-list { margin: var(--sp-4) 0 0; padding: 0; list-style: none; max-height: 52vh; overflow-y: auto; }
.xp-qbc-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}
.xp-qbc-row:hover { background: var(--s-3); }
.xp-qbc-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-pick-dialog .dialog-body { display: flex; flex-direction: column; gap: var(--sp-4); }
.xp-pick-list { max-height: 50vh; overflow-y: auto; }

/* --- Menú radial ------------------------------------------------------------------ */
.xp-radial {
  position: fixed;
  z-index: var(--z-menu);
  width: 0;
  height: 0;
  animation: xp-rad-in 140ms var(--ease-out) both;
}
.xp-radial.no-anim { animation: none; }
@keyframes xp-rad-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: none; }
}
.xp-rad-ring {
  position: absolute;
  left: -122px;
  top: -122px;
  width: 244px;
  height: 244px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--s-2) 70%, transparent) 0 30%, color-mix(in srgb, var(--s-1) 88%, transparent) 31% 100%);
  border: 1px solid var(--bd-strong);
  box-shadow: var(--sh-3);
  pointer-events: none;
}
.xp-rad-slot {
  position: absolute;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd-strong);
  border-radius: 50%;
  background: var(--s-3);
  color: var(--fg);
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast), background var(--t-fast);
}
.xp-rad-slot .icon { width: 22px; height: 22px; }
.xp-rad-slot:hover:not(:disabled),
.xp-rad-slot.is-sel,
.xp-rad-slot:focus-visible {
  background: var(--accent);
  color: var(--accent-fg);
  transform: scale(1.12);
  outline: none;
}
.xp-rad-slot.is-on { box-shadow: 0 0 0 2px var(--accent) inset; }
.xp-rad-slot.is-off { opacity: 0.5; }
.xp-rad-slot.is-empty { opacity: 0.35; border-style: dashed; }
.xp-rad-num {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: var(--r-full);
  background: var(--s-1);
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 15px;
}
.xp-rad-center {
  position: absolute;
  left: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--s-4);
  color: var(--fg-dim);
}
.xp-rad-center:hover { background: var(--err-soft); color: var(--err); }
.xp-rad-label {
  position: absolute;
  left: -110px;
  top: 128px;
  width: 220px;
  text-align: center;
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.xp-radc-ring {
  position: relative;
  width: 300px;
  height: 300px;
  margin: var(--sp-6) auto var(--sp-5);
}
.xp-radc-ring > .xp-rad-ring { left: 0; top: 0; width: 300px; height: 300px; }
.xp-radc-name {
  position: absolute;
  top: 52px;
  left: 50%;
  width: 92px;
  transform: translateX(-50%);
  color: var(--fg-dim);
  font-size: var(--fs-xs);
  text-align: center;
  line-height: 1.2;
  pointer-events: none;
}
.xp-check { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); }

/* --- Gestos y accesibilidad -------------------------------------------------------- */
.xp-ge-row,
.xp-a11y-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--bd);
}
.xp-ge-text, .xp-a11y-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xp-ge-label, .xp-a11y-label { font-weight: var(--fw-medium); }
.xp-ge-row .select { min-width: 190px; }
.xp-ge-row .input { width: 6ch; }
.xp-a11y-row input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }
.xp-a11y-scale .slider { width: 160px; }
.xp-a11y-out { min-width: 5ch; text-align: right; color: var(--fg-dim); }

:root[data-xp-focus="strong"] :focus-visible {
  outline: 3px solid var(--accent-ring) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px var(--accent-soft-hover) !important;
}

/* --- Botón de la línea de tiempo recogida ------------------------------------------- */
.xp-tl-toggle .icon { transition: transform var(--t-fast); }
.xp-tl-toggle.is-collapsed .icon { transform: rotate(180deg); }

/* --- Bienvenida y visita guiada ----------------------------------------------------- */
.xp-welcome {
  right: 20px;
  bottom: calc(var(--statusbar-h) + 16px);
  width: min(360px, calc(100vw - 32px));
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-lg);
  background: var(--s-2);
  box-shadow: var(--sh-3);
}
.xp-welcome-head { display: flex; align-items: center; gap: var(--sp-4); }
.xp-welcome-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--accent-grad, var(--accent));
  color: var(--accent-fg);
}
.xp-welcome-title { flex: 1 1 auto; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.xp-welcome-body { margin: var(--sp-4) 0 var(--sp-5); color: var(--fg-dim); line-height: var(--lh-normal); }
.xp-welcome-actions { display: flex; justify-content: flex-end; gap: var(--sp-4); }

.xp-tour { position: fixed; inset: 0; z-index: calc(var(--z-dialog) + 10); }
.xp-tour.is-blank { background: rgba(3, 6, 10, 0.6); }
.xp-tour-hole {
  position: fixed;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 9999px rgba(3, 6, 10, 0.62), 0 0 0 2px var(--accent) inset;
  transition: left var(--t-med), top var(--t-med), width var(--t-med), height var(--t-med);
  pointer-events: none;
}
.xp-tour.no-anim .xp-tour-hole { transition: none; }
.xp-tour-card {
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-lg);
  background: var(--s-2);
  box-shadow: var(--sh-3);
}
.xp-tour-step { color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.xp-tour-title { margin: var(--sp-3) 0 var(--sp-3); font-size: var(--fs-lg); }
.xp-tour-body { margin: 0; color: var(--fg-dim); line-height: var(--lh-normal); }
.xp-tour-kbd { margin: var(--sp-4) 0 0; color: var(--fg-mute); font-family: var(--font-mono); font-size: var(--fs-sm); }
.xp-tour-kbd[hidden] { display: none; }
.xp-tour-foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.xp-tour-dots { display: flex; gap: 4px; }
.xp-tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--s-hi); }
.xp-tour-dots span.is-on { background: var(--accent); }

/* --- Ayuda ------------------------------------------------------------------------- */
.xp-help-dialog .dialog-body { display: flex; flex-direction: column; gap: var(--sp-5); }
.xp-help-top { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.xp-help-top .input-search { flex: 1 1 240px; }
.xp-help-body { max-height: 58vh; overflow-y: auto; padding-right: var(--sp-3); }
.xp-help-cat {
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--fg-mute);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.xp-help-cat:first-child { margin-top: 0; }
.xp-tip {
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  background: var(--s-1);
}
.xp-tip-head { display: flex; align-items: center; gap: var(--sp-4); justify-content: space-between; }
.xp-tip-title { margin: 0; font-size: var(--fs-md); }
.xp-tip-body { margin: var(--sp-3) 0 0; color: var(--fg-dim); line-height: var(--lh-normal); }
.xp-tip-try { margin-top: var(--sp-3); }
.xp-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--sp-7); margin-bottom: var(--sp-5); }
.xp-keys-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--bd); }
.xp-keys-val { color: var(--fg-dim); text-align: right; }
@media (max-width: 700px) { .xp-keys { grid-template-columns: 1fr; } }

/* --- ¿Qué hay de nuevo? ---------------------------------------------------------- */
.xp-news-dialog .dialog-body { display: flex; flex-direction: column; gap: var(--sp-5); }
.xp-news-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.xp-news-head .input-search { width: min(280px, 100%); }
.xp-news-wrap { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-6); min-height: 0; }
.xp-news-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; align-self: start; }
.xp-news-link {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--fg-dim);
  text-align: left;
  font-size: var(--fs-sm);
}
.xp-news-link:hover { background: var(--s-3); color: var(--fg); }
.xp-news-n { color: var(--fg-mute); font-variant-numeric: tabular-nums; }
.xp-news-content { max-height: 62vh; overflow-y: auto; padding-right: var(--sp-3); }
.xp-news-intro { margin: 0 0 var(--sp-5); color: var(--fg-dim); line-height: var(--lh-normal); }
.xp-news-sec { margin-bottom: var(--sp-7); }
.xp-news-title { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-4); font-size: var(--fs-lg); }
.xp-news-title .icon { color: var(--accent); }
.xp-news-group { margin: var(--sp-5) 0 var(--sp-3); color: var(--fg-dim); font-size: var(--fs-md); }
.xp-news-list { margin: 0; padding-left: var(--sp-7); list-style: disc; line-height: var(--lh-normal); }
.xp-news-list li + li { margin-top: var(--sp-3); }
.xp-news-list code, .xp-news-intro code { padding: 0 4px; border-radius: var(--r-sm); background: var(--s-3); font-family: var(--font-mono); font-size: 0.92em; }
@media (max-width: 760px) { .xp-news-wrap { grid-template-columns: 1fr; } .xp-news-nav { display: none; } }
.xp-news-notice {
  left: 16px;
  bottom: calc(var(--statusbar-h) + 16px);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: min(460px, calc(100vw - 32px));
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-lg);
  background: var(--s-2);
  box-shadow: var(--sh-3);
}
.xp-news-star { color: var(--warn); flex: 0 0 auto; }
.xp-news-notice-text { display: flex; flex-direction: column; flex: 1 1 auto; font-size: var(--fs-sm); }
.xp-news-notice-text span { color: var(--fg-dim); }

/* --- Espacios de trabajo ------------------------------------------------------------ */
.xp-ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-5); }
.xp-ws-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  background: var(--s-1);
}
.xp-ws-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.xp-ws-thumb { width: 100%; height: auto; border-radius: var(--r-sm); background: var(--s-0); }
.xp-ws-thumb .b-bar { fill: var(--s-4); }
.xp-ws-thumb .b-tool { fill: var(--s-hi); }
.xp-ws-thumb .b-dock { fill: var(--s-3); }
.xp-ws-thumb .b-panel { fill: var(--s-hi); }
.xp-ws-thumb .b-canvas { fill: var(--fg-dim); opacity: 0.85; }
.xp-ws-thumb .b-tl { fill: var(--accent); opacity: 0.55; }
.xp-ws-thumb .b-qb { fill: var(--accent); }
.xp-ws-name { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-weight: var(--fw-semibold); }
.xp-ws-desc { margin: 0; color: var(--fg-dim); font-size: var(--fs-sm); line-height: 1.4; flex: 1 1 auto; }
.xp-ws-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; }

/* --- Informe de memoria --------------------------------------------------------- */
.xp-mem-table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; }
.xp-mem-table td { padding: var(--sp-3) 0; border-bottom: 1px solid var(--bd); }
.xp-mem-val { text-align: right; color: var(--fg-dim); }