/* ==========================================================================
   El Camino DT — El menú del botón derecho
   --------------------------------------------------------------------------
   Cero tokens nuevos. Es la superficie del diálogo —panel sobre línea fuerte—
   con las medidas de la fila de estado: 24px de alto útil, icono apagado a la
   izquierda y texto en 13px.

   SIN SOMBRA, a diferencia del diálogo. La única sombra del sistema existe
   porque un modal tapa la pantalla entera y tiene que despegarse del plano;
   este menú mide 200px y se apoya sobre lo que estabas mirando, así que le
   alcanza con un borde en Línea Fuerte, que es un paso más claro que
   cualquier borde de la pantalla que hay debajo.
   ========================================================================== */

.menu {
  position: fixed;
  /* Por encima del chrome pegajoso (20), que es lo más alto del sistema. */
  z-index: var(--z-flotante);
  display: grid;
  /* `minmax(0, 1fr)` y no la columna automática: una fila del menú lleva el
     texto de la acción a la izquierda y su pista a la derecha —«Cambiar el
     número · Ahora lleva el 2»— y las dos juntas piden más que el ancho máximo
     del menú. Con la columna midiéndose por su contenido, las filas se salían y
     el menú aparecía con una BARRA DE DESPLAZAMIENTO HORIZONTAL abajo, que en
     un menú de cinco renglones no es un control, es un defecto. Con la columna
     acotada a cero, `.menu__texto` hace lo que ya sabía hacer: recortarse. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  min-width: 200px;
  /* Y un poco más de ancho antes de recortar nada: el menú de un futbolista
     lleva su nombre entero —«Ver la ficha de Lucas Ruiz»— y a 280 empezaba a
     comerse el apellido con una pista al lado que sí entraba. */
  max-width: 340px;
  max-height: calc(var(--alto-ventana) - 2 * var(--sp-4));
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-panel);
}

.menu__item {
  display: flex;
  align-items: center;
  /* Sin esto la fila se niega a bajar de su contenido —es el `min-width: auto`
     de todo elemento flexible— y la columna acotada de arriba no sirve de
     nada: el que tiene que ceder es el texto de la acción. */
  min-width: 0;
  gap: var(--sp-4);
  min-height: 26px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

/* CON EL DEDO, 44. La lista de los mínimos táctiles vive en `app.css` —«EL
   DEDO»— y ahí están los ochenta controles del juego; éste es la excepción que
   tiene que estar acá, porque `menu.css` se carga después de `app.css` y la
   regla base de arriba declara `min-height`: a igual especificidad ganaría la
   de este archivo, y el renglón de allá sería una regla muerta que se lee como
   si funcionara. Se corrigió después de escribirlo así y medir 30 px igual.

   POR QUÉ IMPORTA MÁS ACÁ QUE EN UNA TABLA. En una lista, errarle a un renglón
   por dos píxeles abre la ficha del futbolista de al lado y se vuelve; acá
   EJECUTA. Los renglones de este menú venden, mandan a la reserva, sacan del
   banco y cambian el número de la camiseta, y ninguno pregunta después. Un
   menú es la superficie donde el error de puntería es más caro del juego, y
   era la única que había quedado en 30.

   Y LA MISMA VARA QUE EL RESTO: `pointer: coarse` más el ancho, que es la
   pareja con la que `app.css` reparte los 44. Con qué se toca decide el
   mínimo; el ancho está para que una tableta apaisada, que muestra el juego en
   su forma de escritorio, no pierda densidad. */
@media (pointer: coarse) and (max-width: 860px) {
  .menu__item { min-height: 44px; }
}

.menu__item .i { color: var(--icon-quiet); }

/* El hueco de un ítem sin icono. Mide lo que mide un `.i--sm` para que el texto
   quede en la misma columna que el de los ítems que sí lo llevan. */
.menu__hueco { width: 13px; flex: none; }

/* El foco se dibuja como el hover y no sólo con el anillo: en un menú abierto
   con el teclado, el ítem enfocado ES la selección. */
.menu__item:hover,
.menu__item:focus {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.menu__item:hover .i,
.menu__item:focus .i { color: inherit; }

/* Una acción que no se puede hacer se muestra apagada con su motivo al lado,
   igual que la tabla del plantel muestra el veto: esconderla dejaría al DT
   buscando una acción que él cree que existe. */
.menu__item[disabled] {
  color: var(--text-disabled);
  cursor: default;
  background: none;
}

.menu__item[disabled] .i { color: var(--text-disabled); }

.menu__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__pista {
  margin-left: auto;
  padding-left: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  /* Y cede antes de empujar. La pista la escribe el dato —el motivo por el que
     algo no se puede, que puede ser una frase entera— y sin esto no se recorta
     ninguna de las dos: el `max-width` del menú corta la pista contra el borde
     con `overflow: hidden`, o sea en silencio y sin puntos suspensivos. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El pie. Aparece sólo en el menú que no tenía ninguna acción que ofrecer —el
   mapa— y dice cómo llegar al menú del navegador. No es un ítem: no se enfoca,
   no se pulsa y no entra en el recorrido del teclado, así que se dibuja como lo
   que es, la letra chica de abajo, separada por la misma línea que separa los
   grupos. */
.menu__pie {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--line-hairline);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.menu__sep {
  height: 1px;
  margin: var(--sp-2) 0;
  border: 0;
  background: var(--line-hairline);
}

/* Aparece fundiéndose y no creciendo: el menú ya sale del punto que tocaste,
   que es toda la relación de causa que necesita. Esa decisión sigue en pie —el
   desplegable SÍ crece desde su botón porque su botón está en un sitio fijo de
   la pantalla y el menú nace bajo el puntero—; lo que faltaba era irse. */
.menu { animation: menu-aparece var(--dur-fast) var(--ease); }

@keyframes menu-aparece { from { opacity: 0; } }

/* Y SE VA, que hasta el 1/9/2026 no hacía: `menu.js` llamaba a `.remove()` y el
   menú desaparecía entre dos fotogramas después de haber llegado fundiéndose.
   Es la Regla de la Mitad que Falta —ver `movimiento.css`, punto 4— en el
   hermano del desplegable, y se resuelve igual: el guion pone la marca, espera
   lo que dura esto y recién ahí lo saca del DOM.

   Deja de recibir clics en el mismo instante en que empieza a irse. Importa más
   acá que en el desplegable: los ítems de este menú venden a un futbolista y lo
   mandan a la reserva, y un menú que ya se está yendo no puede aceptar el
   segundo clic de un doble clic apurado. */
.menu[data-yendose] {
  animation: menu-se-va var(--dur-fast) var(--ease-salida) forwards;
  pointer-events: none;
}

@keyframes menu-se-va { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .menu { animation: none; }
  /* La salida no se apaga, se acorta: la regla global de `app.css` la deja en
     1ms, y su `forwards` es lo que mantiene al menú invisible hasta que el
     guion lo saca. Con `none` se quedaría a la vista los 140ms de la espera. */
  .menu[data-yendose] { animation-duration: 1ms; }
}