.menu-contextual {
  position: fixed;
  z-index: 10000;
  width: min(17.5rem, calc(100vw - 1rem));
  overflow: hidden;
  padding: 0.38rem;
  border: 0;
  border-radius: 12px;
  background: var(--superficie);
  box-shadow:
    inset 0 6px 14px rgba(4, 5, 8, 0.92),
    inset 0 -3px 9px rgba(247, 244, 235, 0.035),
    0 22px 52px -18px rgba(0, 0, 0, 0.94);
  color: var(--texto);
  isolation: isolate;
}

.menu-contextual .menu-contextual__opcion {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.15rem;
  padding: 0.45rem 0.62rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: 500 0.76rem/1.2 var(--tipografia-display);
  text-align: left;
  cursor: pointer;
  isolation: isolate;
}

.menu-contextual__interruptor {
  display: flex;
  width: 2rem;
  height: 1.05rem;
  align-items: center;
  margin-left: auto;
  padding: 0.12rem;
  border-radius: 999px;
  background: rgba(216, 213, 205, 0.18);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.72);
}

.menu-contextual__interruptor b {
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  background: var(--texto);
  transform: translateX(0);
  transition: transform 150ms var(--salida-expo), background 150ms ease-out;
}

.menu-contextual__opcion[aria-checked="true"] .menu-contextual__interruptor {
  background: rgba(92, 215, 239, 0.34);
}

.menu-contextual__opcion[aria-checked="true"] .menu-contextual__interruptor b {
  background: #dcfaff;
  transform: translateX(0.94rem);
}

.menu-contextual button > svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.menu-contextual button > kbd { margin-left: auto; }

.menu-contextual .menu-contextual__opcion:hover,
.menu-contextual .menu-contextual__opcion:focus-visible {
  outline: 0;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .menu-contextual .menu-contextual__opcion:hover,
  .menu-contextual .menu-contextual__opcion:focus-visible {
    transform: translateY(-3px) scale(1.006);
  }

  .menu-contextual .menu-contextual__opcion:hover::before,
  .menu-contextual .menu-contextual__opcion:focus-visible::before {
    box-shadow:
      0 24px 30px -20px rgba(4, 5, 8, 0.98),
      0 13px 20px -18px rgba(0, 0, 0, 0.94);
  }
}

.menu-contextual button:disabled {
  color: rgba(247, 244, 235, 0.34);
  cursor: default;
}

.menu-contextual kbd,
.atajos-dialogo kbd {
  border: 1px solid rgba(247, 244, 235, 0.14);
  border-radius: 5px;
  background: rgba(247, 244, 235, 0.055);
  color: var(--texto-secundario);
  font: 500 0.63rem/1 var(--tipografia-mono, monospace);
}

.menu-contextual kbd {
  padding: 0.2rem 0.32rem;
}

.menu-contextual__separador {
  height: 1px;
  margin: 0.3rem 0.42rem;
  background: rgba(247, 244, 235, 0.1);
}

.atajos-dialogo-fondo {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(7, 8, 12, 0.7);
}

.atajos-dialogo {
  width: min(46rem, 100%);
  max-height: min(46rem, calc(100dvh - 2rem));
  overflow: auto;
  padding: 1.2rem;
  border: 1px solid rgba(247, 244, 235, 0.14);
  border-radius: 16px;
  background: #181a23;
  box-shadow: 0 26px 70px -28px rgba(0, 0, 0, 0.95);
  color: var(--texto);
}

.atajos-dialogo header,
.atajos-dialogo dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.atajos-dialogo header {
  margin-bottom: 1rem;
}

.atajos-dialogo h2,
.atajos-dialogo dl,
.atajos-dialogo dt,
.atajos-dialogo dd {
  margin: 0;
}

.atajos-dialogo h2 {
  font: 620 1.05rem/1.2 var(--tipografia-display);
}

.atajos-dialogo header button {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 244, 235, 0.07);
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

.atajos-dialogo dl {
  display: grid;
  gap: 0.2rem;
}

.atajos-dialogo dl > div {
  min-height: 2.7rem;
  border-top: 1px solid rgba(247, 244, 235, 0.08);
}

.atajos-dialogo dt {
  color: var(--texto-secundario);
  font-size: 0.78rem;
}

.atajos-dialogo dd {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}

.atajos-dialogo dd kbd {
  padding: 0.3rem 0.38rem;
}

.atajos-dialogo__barra,
.atajos-editor > div {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.atajos-dialogo__barra { margin-bottom: 0.8rem; }

.atajos-dialogo__barra button,
.atajos-editor button,
.atajos-lista button {
  min-height: 2rem;
  padding: 0.38rem 0.58rem;
  border: 1px solid rgba(247, 244, 235, 0.1);
  border-radius: 7px;
  background: rgba(247, 244, 235, 0.055);
  color: var(--texto-secundario);
  font: 500 0.7rem/1 var(--tipografia-display);
}

.atajos-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.7fr);
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  padding: 0.85rem;
  border: 1px solid rgba(247, 244, 235, 0.12);
  border-radius: 10px;
  background: rgba(247, 244, 235, 0.035);
}

.atajos-editor label { display: grid; gap: 0.3rem; color: var(--texto-suave); font-size: 0.66rem; }
.atajos-editor input,
.atajos-editor select { width: 100%; min-height: 2.35rem; border: 1px solid rgba(247, 244, 235, 0.13); border-radius: 7px; padding: 0.45rem 0.55rem; background: #11131a; color: var(--texto); font: inherit; }
.atajos-editor > p { grid-column: 1 / -1; margin: 0; color: #ff8b9d; font-size: 0.72rem; }
.atajos-editor > div { grid-column: 1 / -1; }

.atajos-lista { display: grid; max-height: 24rem; overflow: auto; }
.atajos-lista > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, auto) auto auto; align-items: center; gap: 0.45rem; min-height: 3.15rem; border-top: 1px solid rgba(247, 244, 235, 0.08); }
.atajos-lista > div > span { display: grid; gap: 0.15rem; }
.atajos-lista strong { color: var(--texto-secundario); font-size: 0.76rem; }
.atajos-lista small { color: var(--texto-suave); font-size: 0.62rem; text-transform: capitalize; }
.atajos-lista kbd { justify-self: end; padding: 0.35rem 0.45rem; }

.navegacion-movil-flotante { display: none; }

@media (max-width: 780px), (hover: none) and (pointer: coarse) {
  .navegacion-movil-flotante {
    position: fixed;
    top: 50%;
    left: max(0.7rem, env(safe-area-inset-left));
    z-index: 2147483400;
    display: grid;
    grid-template-columns: repeat(2, 3rem);
    gap: 0.42rem;
    padding: 0.52rem;
    border-radius: 18px;
    background: var(--superficie);
    box-shadow: 0 28px 48px -28px rgba(0, 0, 0, 0.98);
    transform: translateY(-50%);
    animation: entrar-navegacion-movil 160ms ease-out both;
  }

  .navegacion-movil-flotante button {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--texto);
  }

  .navegacion-movil-flotante svg { width: 1.25rem; height: 1.25rem; }

  .menu-contextual button {
    min-height: 44px;
    font-size: 0.82rem;
  }

  .atajos-editor { grid-template-columns: 1fr; }
  .atajos-lista > div { grid-template-columns: minmax(0, 1fr) auto; padding: 0.45rem 0; }
  .atajos-lista > div > kbd { grid-column: 2; grid-row: 1; }
  .atajos-lista > div > button { min-height: 2.4rem; }

  .atajos-dialogo--movil {
    width: min(30rem, calc(100vw - 1.25rem));
    max-height: calc(100dvh - 1.25rem);
    padding: 1rem;
  }

  .controles-moviles-lista label {
    display: grid;
    gap: 0.7rem;
  }

  .controles-moviles-lista label > span {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 0.65rem;
  }

  .controles-moviles-lista select {
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    border: 0;
    border-radius: 999px;
    background: rgba(247, 244, 235, 0.07);
    color: var(--texto);
  }
}

@keyframes entrar-navegacion-movil {
  from { opacity: 0; transform: translate(-0.8rem, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); }
}