/* ---------------------------------------------------------------------------
 * Accesos rápidos y accesibilidad.
 *
 * Dos cosas que van juntas: los atajos existen para llegar en un gesto, y de
 * nada sirve el gesto corto si la persona no puede darlo con el teclado o no
 * ve dónde está parada.
 * ------------------------------------------------------------------------- */

/* ── Enlace de salto ────────────────────────────────────────────────────── */

/* Primer elemento tabulable de la página. Invisible hasta que recibe el foco:
   quien navega con teclado no tiene por qué recorrer veinte enlaces del menú
   en cada pantalla para llegar al contenido. */
.saltar{
  position:fixed; top:-100px; left:12px; z-index:9999;
  padding:11px 18px;
  background:var(--gi-navy); color:#fff;
  border-radius:0 0 var(--r) var(--r);
  font-size:14px; font-weight:600; text-decoration:none;
  transition:top .16s var(--ease-salida);
}
.saltar:focus{top:0}

/* ── Foco visible ───────────────────────────────────────────────────────── */

/* El anillo va con `outline` y no con `box-shadow` para que sobreviva al modo
   de alto contraste de Windows, donde las sombras se descartan. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible{
  outline:3px solid var(--gi-blue);
  outline-offset:2px;
  border-radius:4px;
}

/* Sobre el azul oscuro del menú el anillo azul no se ve: allí va en blanco. */
.nav a:focus-visible{outline-color:#fff; outline-offset:-2px}

/* ── Barra de atajos ────────────────────────────────────────────────────── */

.atajos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:9px;
}

.atajo{
  display:flex; align-items:center; gap:10px;
  /* 46px de alto: por debajo de 44 el dedo falla y hay que apuntar. */
  min-height:46px; padding:10px 13px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink);
  text-decoration:none;
  transition:border-color .16s var(--ease-suave), background .16s var(--ease-suave), transform .16s var(--ease-salida);
}
.atajo:hover{border-color:var(--gi-blue); background:var(--gi-blue-soft); transform:translateY(-1px)}
.atajo:active{transform:none}
.atajo-ic{
  flex:none; width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:6px; background:var(--line-2); color:var(--gi-navy);
  font-size:14px;
}
.atajo-tx{font-size:13px; font-weight:600; line-height:1.3}

/* ── Editor de atajos ───────────────────────────────────────────────────── */

.grupos-atajos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:14px;
}
.grupo-atajos{
  border:1px solid var(--line); border-radius:var(--r);
  padding:9px 12px 12px; margin:0;
}
.grupo-atajos legend{
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); padding:0 5px; font-weight:600;
}

.opcion-atajo{
  display:flex; align-items:center; gap:9px;
  min-height:38px; padding:4px 2px;
  font-size:13px; cursor:pointer;
  border-radius:5px;
}
.opcion-atajo:hover{background:var(--line-2)}
.opcion-atajo input{width:17px; height:17px; flex:none; cursor:pointer; accent-color:var(--gi-blue)}
/* Una casilla deshabilitada por llegar al tope tiene que verse deshabilitada,
   o la persona pulsa tres veces creyendo que la aplicación no responde. */
.opcion-atajo:has(input:disabled){opacity:.4; cursor:not-allowed}
.opcion-atajo:has(input:disabled):hover{background:none}
.opcion-atajo:has(input:focus-visible){outline:3px solid var(--gi-blue); outline-offset:1px}

@media (max-width:720px){
  .atajos{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .grupos-atajos{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .atajo,.saltar{transition:none}
  .atajo:hover{transform:none}
}