/* ==========================================================================
   ORBIS — Reorganización por tamaño de pantalla.
   La HUD de referencia está pensada para ≥1600 px; por debajo se recompone
   en lugar de encogerse, y en móvil se reduce a lo esencial.
   ========================================================================== */

/* Portátiles y pantallas medianas: paneles laterales más estrechos. */
@media (max-width: 1600px) {
  #hud { grid-template-columns: minmax(180px, 220px) 1fr minmax(190px, 240px); }
}

/* Por debajo de 1280 px el panel derecho pasa a una fila propia: apilar es
   más legible que comprimir cinco gráficos en 190 px. */
@media (max-width: 1280px) {
  #hud {
    grid-template-columns: minmax(170px, 210px) 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "superior  superior"
      "izquierda viewport"
      "derecha   derecha"
      "inferior  inferior";
  }
  #hud-panel-derecho {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    gap: var(--e-3);
    overflow-x: auto;
  }
  #hud-proyeccion-orbital { display: none; }   /* Decorativo: se sacrifica primero. */
}

/* Tabletas: el panel izquierdo se convierte en una tira superior y la barra
   deja de repartirse en tres columnas —sus anchos mínimos sumaban más que la
   pantalla y desbordaban la rejilla entera—. */
@media (max-width: 1024px) {
  #hud {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "superior"
      "izquierda"
      "viewport"
      "derecha"
      "inferior";
  }
  #hud-barra-superior { flex-wrap: wrap; }
  .arco { display: none; }
  #hud-estado-entradas { display: none; }
}

/* Móvil: solo lo imprescindible — escena, perfil del cuerpo y navegación.
   El resto de paneles se retiran; sus datos siguen accesibles al girar el
   dispositivo o en una pantalla mayor. */
@media (max-width: 720px) {
  :root { --corte: 6px; }

  #hud {
    padding: var(--e-2);
    gap: var(--e-2);
    grid-template-columns: 1fr;
    /* El perfil se queda con lo que sobre y se desplaza por dentro. Un mínimo
       fijo aquí empujaba la tira de navegación fuera de la pantalla en un
       teléfono de 320x568 con los objetivos táctiles ya ampliados. */
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "superior"
      "izquierda"
      "inferior";
  }

  #hud-panel-derecho,
  #hud-viewport,
  #hud-proyeccion-orbital,
  #hud-estado-entradas { display: none; }

  /* Aquí no hay celda «viewport». Los avisos se mudan a la del perfil, que
     está anclado abajo y deja libre la franja de arriba.

     Pero esa franja no siempre da de sí: medido a 320x568, la fila mide 233 px
     y el perfil se queda 216, así que sobran 17 px y un aviso necesita 75. Por
     eso, CUANDO HAY UN AVISO —y solo entonces— se abre una fila propia para él
     y el perfil cede lo que haga falta; en cuanto el aviso se va, la fila
     desaparece y el perfil recupera su sitio. Se hace con `:has()` para no
     dejar una fila vacía y su separación consumiendo altura todo el rato, que
     en un teléfono es justo lo que no sobra.

     Sin soporte de `:has()` el aviso se superpone al perfil, que es exactamente
     lo que pasaría sin esta regla: se degrada a lo anterior, no a algo peor. */
  .avisos { grid-area: izquierda; }

  #hud:has(.aviso) {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "superior"
      "avisos"
      "izquierda"
      "inferior";
  }
  #hud:has(.aviso) .avisos { grid-area: avisos; }

  /* El panel galáctico vive dentro de #hud-viewport, que aquí no se dibuja:
     un botón que no puede mostrar nada es peor que ningún botón. */
  .controles__boton--galaxia { display: none; }

  /* La escena tiene que verse. Con el perfil ocupando toda la fila central,
     los paneles opacos tapaban el Sistema Solar de arriba abajo y en un
     teléfono no se veía ni un planeta: la aplicación entera quedaba reducida a
     una ficha de datos. El perfil se limita a poco más de un tercio de la
     altura y se ancla abajo; lo que queda encima es hueco transparente por el
     que se ve el lienzo. */
  #hud-panel-izquierdo {
    overflow-y: auto;
    /* `align-content: start`, no `end`: en un contenedor con desplazamiento,
       alinear el contenido al final empuja lo que sobra por el borde SUPERIOR,
       y ahí no se llega desplazando —el nombre del cuerpo quedaba cortado y era
       imposible verlo—. Quien baja la caja es `align-self`, que coloca el panel
       dentro de su celda sin tocar su contenido. */
    align-content: start;
    align-self: end;
    /* `min(…, 100%)` y no `38vh` a secas: anclado al final de su fila, un alto
       mayor que la fila desborda HACIA ARRIBA y el perfil se dibujaba encima de
       los controles. El 100% es el alto real de la fila, así que en una pantalla
       muy justa el perfil se encoge en vez de invadir. */
    max-height: min(38vh, 100%);
  }
  #hud-subtitulos      { width: 92vw; bottom: 118px; }

  /* Barra superior compacta: marca, estado y controles. El reloj de misión y
     las pestañas de módulo no caben y no son imprescindibles.

     `align-items: stretch` es obligatorio al girar el eje: la barra base usa
     `flex-start`, que en columna alinea en horizontal y dejaba los hijos
     encogidos al ancho de su contenido. */
  #hud-barra-superior {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-2);
  }

  /* ESTE ERA EL FALLO QUE VACIABA LA PANTALLA EN EL MÓVIL.
     `.barra` llevaba `flex: 1 1 640px`, pensado para una barra en fila: 640 px
     de ANCHO base. Al pasar el contenedor a columna, el eje principal es el
     vertical y esos 640 px pasaron a ser una ALTURA: la barra sola ocupaba 640
     de los 667 px de un teléfono. El resultado era que los controles caían
     fuera de la pantalla, el perfil del cuerpo se quedaba en 0 px de alto y de
     la interfaz solo se veía el rótulo ORBIS. Hoy la barra ya no declara base
     flexible —solo lleva la identidad—, así que no podría repetirse; el
     `flex: 0 0 auto` se queda igualmente, porque es lo correcto y porque el
     comentario merece sobrevivir al fallo. */
  .barra {
    flex: 0 0 auto;
    padding: var(--e-2);
  }
  /* Las pestañas de módulo cabían mal en un teléfono y, sobre todo, no servían
     de nada: los paneles de la derecha están ocultos a este ancho, así que
     filtrarlos no filtraba nada. Ese razonamiento valía cuando todos los
     módulos eran filtros de esos paneles.
     
     Ya no. ASISTENTE no filtra nada: es una conversación, y es en el móvil
     donde más sentido tiene —hablarle al teléfono es lo natural, y allí no hay
     ni teclado cómodo ni sitio para las fichas de datos—. Dejarlo inalcanzable
     precisamente ahí era lo peor de los dos mundos.
     
     Así que la tira vuelve, pero SOLO con las dos pestañas que significan algo
     aquí: la escena y el asistente. Sensores, Analítica y Curiosidades filtran
     paneles que no se dibujan, y seguirían sin filtrar nada. */
  .barra__modulos { display: flex; }
  .barra__modulo:not([data-modulo="sistema"]):not([data-modulo="asistente"]) { display: none; }

  /* Con el asistente abierto, la conversación ocupa el sitio del perfil: es la
     única columna de contenido que hay, y una conversación a la que solo se le
     ven tres renglones no es una conversación. */
  body[data-modulo="asistente"] #hud-panel-izquierdo { display: none; }
  body[data-modulo="asistente"] #hud-panel-derecho {
    display: grid;
    /* `grid-auto-flow: column` viene de la regla de 1280 px, donde la columna
       derecha se convierte en una tira horizontal. Aquí solo hay un panel y
       tiene que ocupar el ancho entero. */
    grid-auto-flow: row;
    grid-area: izquierda;
    align-self: end;
    max-height: min(62vh, 100%);
    overflow-x: hidden;
    overflow-y: auto;
  }
  /* El hilo se acota al alto de la pantalla, no a un número fijo: en un
     teléfono en horizontal, 48vh son cuatro renglones. */
  .charla__hilo { max-height: min(34vh, 260px); }

  /* El panel de entradas se cuela debajo de la conversación porque vive en la
     misma columna. Aquí sobra por partida doble: encender la cámara y el
     micrófono ya se hace desde los indicadores de la barra, que están siempre
     a la vista, y el sitio que ocupa se lo quita a la charla. */
  body[data-modulo="asistente"] .panel--entradas { display: none; }
  .barra__marca { font-size: 1.05rem; letter-spacing: 0.22em; }

  /* La fila secundaria se queda solo con los indicadores, pegados al inicio.

     Y `flex: 0 0 auto`, que no es cosmético: es EL MISMO FALLO del recuadro de
     arriba, repetido. `.barra-secundaria` declara `flex: 1 0 100%` para ocupar
     un renglón entero cuando la barra va en fila. Al girar el eje a columna,
     ese 100 % deja de ser el ancho y pasa a ser la ALTURA del contenedor: la
     fila sola pedía toda la altura disponible, no cabía junto a las otras dos y
     el ajuste la mandaba a una SEGUNDA COLUMNA, fuera de la pantalla por la
     derecha. Medido: empezaba en x=320 en una pantalla de 320 px de ancho, o
     sea entera fuera. Los cuatro indicadores existían y no se veía ninguno, y
     desde hoy son además la única forma de encender la cámara y el micrófono en
     un teléfono. */
  .barra-secundaria {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  /* Las cuatro pastillas de estado (cámara, micrófono, red, FPS) en una sola
     fila piden 321 px: más que los 304 disponibles en una pantalla de 320. Sin
     esto la barra se sale por la derecha y la de FPS queda cortada. */
  .barra__indicadores { flex-wrap: wrap; }

  /* Y por debajo de 360 px se aprieta lo justo para que quepan en UN renglón.
     Medido en una pantalla de 320: las cuatro suman 289 px y los tres huecos
     de 8 px las mandaban a un tercer renglón, 24 px de barra por 9 px de
     exceso. Con huecos de 4 px y dos de holgura a cada lado caben en 297 y la
     barra baja de 136 a 112 px. No se recorta ningún rótulo: una pastilla que
     solo enseñara «◉» no diría si es la cámara o el micrófono. */
  @media (max-width: 360px) {
    .barra__indicadores { gap: 4px; }
    .indicador { padding: 2px 4px; }
  }

  .controles { width: 100%; justify-content: space-between; padding: var(--e-2); }
  .controles__valor { min-width: 4em; }

  /* El perfil pasa a dos columnas de fichas: en vertical, doce filas de una
     sola línea obligan a desplazarse demasiado. */
  .perfil__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px var(--e-3);
  }
  .perfil__nombre { font-size: 1.25rem; }

  /* Por debajo de 380 px no hay sitio para dos columnas: la etiqueta y la cifra
     de cada ficha se pisaban («MASA» encima de «1.391.400»). Una columna. */
  @media (max-width: 380px) {
    .perfil__lista { grid-template-columns: 1fr; }

    /* Y los nueve controles, en cuatro filas de 44 px, se comían media pantalla
       y dejaban el perfil en nada. Pasan a una sola fila que se recorre con el
       dedo, como la tira de navegación: se pierde un gesto, no una función.
       Quitar controles habría sido peor —el interruptor de escala real y el de
       subtítulos no están en ningún otro sitio—. */
    .controles {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    .controles::-webkit-scrollbar { display: none; }
    .controles > *, .controles__grupo > * { flex: none; }
  }

  .navegacion__flecha { display: none; }   /* Se desplaza con el dedo. */
  .miniatura { width: 54px; }
  .miniatura__disco { width: 28px; height: 28px; }

  /* En una columna estrecha, la nota de cada chequeo baja bajo su etiqueta
     en lugar de competir por el mismo renglón. */
  .chequeo { grid-template-columns: 1.4em 1fr; }
  .chequeo__nota {
    grid-column: 2;
    margin-top: 1px;
    line-height: 1.4;
    text-align: left;
  }
}

/* ==========================================================================
   Objetivos táctiles
   La HUD es densa a propósito y con ratón esa densidad es una virtud: el
   puntero tiene precisión de píxel. El dedo no. Se consulta el tipo de puntero,
   no el ancho de la ventana, porque son cosas distintas —hay tabletas de 1280
   px que solo se tocan y portátiles de 1024 con ratón— y ampliar por ancho
   estropearía la densidad justo donde no hace falta.

   44x44 px es el mínimo de la WCAG 2.1 (2.5.5). Se consigue con `min-height` y
   relleno, sin tocar el tamaño de letra: la interfaz sigue igual de compacta a
   la vista, solo se agranda la zona sensible.
   ========================================================================== */
/* Mínimo con ratón: 24x24 px, el umbral AA de la WCAG 2.2 (2.5.8). Son
   aumentos de dos o tres píxeles que no alteran la densidad de la HUD, pero
   sacan de debajo del umbral a las pestañas de módulo, los botones de icono y
   las dos aspas de cerrar. */
.barra__modulo { min-height: 24px; }
.controles__boton { min-height: 24px; min-width: 24px; }
.controles__interruptor { min-height: 24px; }
.controles__interruptor input { width: 16px; height: 16px; }
.controles__volumen { height: 24px; }
.navegacion__cerrar { width: 24px; height: 24px; }

@media (pointer: coarse) {
  .controles__boton,
  .barra__modulo,
  .entradas__boton {
    min-height: 44px;
    padding-inline: var(--e-3);
  }
  .controles__boton--icono { min-width: 44px; padding-inline: var(--e-2); }

  /* La casilla y su texto forman un solo objetivo: tocar la palabra «Órbitas»
     debe funcionar igual que tocar el cuadrito. */
  .controles__interruptor { min-height: 44px; }
  .controles__interruptor input { width: 20px; height: 20px; }

  .miniatura { min-height: 44px; }
  .navegacion__flecha, .navegacion__cerrar { min-width: 44px; min-height: 44px; }
  .galaxia__cerrar { width: 44px; height: 44px; }

  /* El deslizador de volumen es el objetivo más difícil de todos: hay que
     acertar en el pulgar, no solo en el control. */
  .controles__volumen { height: 44px; }
}

/* Nada de la HUD puede empujar la rejilla más allá de la ventana. Es la red de
   seguridad que evita que un panel con una cifra larga desborde la pantalla. */
#hud, #hud > * { min-width: 0; }
.panel { max-width: 100%; }

/* ==========================================================================
   El panel galáctico nunca debe salirse por abajo
   Mide 420 px de lado más cabecera y cifras; en cuanto el viewport central
   baja de unos 800 px de alto, las tres cifras citadas y su fuente quedaban
   por debajo del borde inferior, sin ningún contenedor con desplazamiento por
   el que llegar a ellas. Se limita al alto disponible y lo que se encoge es la
   espiral, que es lo decorativo, no los datos.
   ========================================================================== */
.galaxia { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.galaxia__svg { max-height: min(46vh, 420px); }

/* Por debajo de 1280 px la fila central de la rejilla se queda casi sin altura
   —el perfil y la fila de paneles se llevan el espacio—, y el panel galáctico
   quedaba reducido a una franja de 26 px con todo su contenido dentro. Ahí deja
   de ser un elemento de la rejilla y pasa a ser una capa centrada: como se abre
   a propósito con el botón «Galaxia» y se cierra con su aspa, taparlo todo un
   momento es lo correcto. Se queda por debajo de la ayuda (30) y del comparador
   (31), que sí deben poder abrirse encima.

   Por debajo de 720 px no hace falta ninguna excepción: #hud-viewport es
   `display: none` y eso oculta al panel aunque esté posicionado, que es
   justo lo que se quiere. */
@media (max-width: 1280px) {
  .galaxia {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(92vw, 560px);
    max-height: 82vh;
    transform: translate(-50%, -50%);
    z-index: 25;
  }
  .galaxia[data-oculto="si"] {
    transform: translate(-50%, -50%) translateX(14%) scale(0.96);
  }
}

/* Pantallas muy bajas (portátiles 768 px de alto en horizontal). */
@media (max-height: 720px) {
  #hud-proyeccion-orbital { display: none; }
}

/* Impresión: la interfaz no está pensada para papel. */
@media print {
  #lienzo, #hud, #arranque { display: none !important; }
}

/* Las anotaciones de superficie llevan nombres largos («División de Cassini»)
   que en vertical se salen de la pantalla. Se les permite partir en dos líneas
   y se limita su ancho; el anillo en el que se colocan ya es proporcional al
   lado menor de la ventana. */
@media (max-width: 720px) {
  .anotacion {
    max-width: 40vw;
    white-space: normal;
    line-height: 1.3;
    letter-spacing: 0.08em;
  }
  .anotaciones__aviso { bottom: 148px; font-size: 9px; }
}

/* Los subtítulos deben caber y leerse también en vertical. */
@media (max-width: 720px) {
  #hud-subtitulos { width: 94vw; bottom: 126px; }
  .subtitulo { padding: var(--e-2); }
  .subtitulo__texto { font-size: 0.875rem; }
  .controles__volumen { width: 48px; }
}

/* ==========================================================================
   MENÚ INFERIOR FIJO (solo pantallas estrechas)

   Cinco destinos, que es el tope de Material Design para una barra inferior.
   No es arbitrario: con seis, los rótulos dejan de caber en un teléfono de
   320 px y los objetivos táctiles bajan de 44. Cada uno lleva icono Y rótulo,
   porque solo con iconos media pantalla adivina mal para qué sirven.
   ========================================================================== */
@media (max-width: 1024px) {
  .menu-inferior {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-hud) + 5);

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;

    background: rgba(5, 11, 24, 0.92);
    -webkit-backdrop-filter: blur(var(--panel-desenfoque));
    backdrop-filter: blur(var(--panel-desenfoque));
    border-top: 1px solid var(--panel-borde);

    /* El área segura NO es opcional. En un iPhone la franja de abajo la ocupa
       el indicador de inicio, y lo que quede pegado al borde se ve pero no se
       puede pulsar. En un navegador sin muescas, `env()` vale 0 y no estorba. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    pointer-events: auto;
  }

  .menu-inferior__destino {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    /* 44 px de alto útil, sin contar el área segura. */
    min-height: 44px;
    padding: 6px 2px;

    background: none;
    border: 0;
    border-top: 2px solid transparent;
    color: var(--texto-apagado);
    cursor: pointer;
    transition: color var(--dur-corta) var(--curva), border-color var(--dur-corta) var(--curva);
  }

  .menu-inferior__simbolo { font-size: 1.1rem; line-height: 1; }

  .menu-inferior__rotulo {
    font-family: var(--fuente-titulos);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Un rótulo partido en dos líneas descuadra la fila entera. */
    white-space: nowrap;
  }

  /* El destino activo se marca con color Y con una barra arriba: el color por
     sí solo no puede ser lo único que distinga un estado. */
  .menu-inferior__destino[aria-current="page"] {
    color: var(--cian-brillante);
    border-top-color: var(--cian-brillante);
  }
  .menu-inferior__destino:focus-visible {
    outline: 2px solid var(--cian-brillante);
    outline-offset: -3px;
  }

  /* La rejilla deja sitio abajo para que la barra no tape nada. Se suma el
     área segura por el mismo motivo que arriba. */
  #hud { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  #hud-subtitulos { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); }

  /* Con la barra abajo, las pestañas de módulo de la barra superior sobran:
     llevan a los mismos sitios y ocupan alto arriba. */
  .barra__modulos { display: none; }
}

/* Cada destino enseña una cosa. Es lo que hace que la barra ORDENE en lugar de
   ser cinco atajos: en un teléfono solo cabe una cosa a la vez, así que elegir
   dónde estás y elegir qué miras son la misma decisión. */
@media (max-width: 1024px) {
  /* SISTEMA —y por tanto el arranque, que empieza aquí— enseña LA ESCENA.
     Nada más.

     Antes se abría con el perfil del cuerpo y la tira de navegación ya
     desplegados, y entre los dos se comían la mitad inferior de la pantalla:
     de un Sistema Solar en tres dimensiones se veía una franja. Y no hacía
     falta que estuvieran: para eso están DATOS y CUERPOS en la barra de abajo,
     a un toque. Una barra de navegación que promete cinco sitios y además
     enseña dos de ellos de entrada no está ordenando nada.

     GALAXIA, por lo mismo: fuera todo lo que tape el disco. */
  body[data-seccion="sistema"] #hud-panel-izquierdo,
  body[data-seccion="sistema"] #hud-navegacion-planetaria,
  body[data-seccion="galaxia"] #hud-panel-izquierdo,
  body[data-seccion="galaxia"] #hud-navegacion-planetaria { display: none; }

  /* CUERPOS: la tira de navegación manda; el perfil se aparta. */
  body[data-seccion="cuerpos"] #hud-panel-izquierdo { display: none; }

  /* DATOS: la ficha del cuerpo a pantalla casi completa, en vez del 38 % que
     le toca cuando comparte sitio con la escena. */
  body[data-seccion="datos"] #hud-panel-izquierdo { max-height: 100%; }
  body[data-seccion="datos"] #hud-navegacion-planetaria { display: none; }
}

/* ==========================================================================
   HOJA DE COMANDOS TRAS UNA HAMBURGUESA (solo pantallas estrechas)

   QUÉ PROBLEMA RESUELVE
   ─────────────────────
   Los once mandos de escena —vista general, galaxia, las tres teclas de
   tiempo, órbitas, escala real, silencio, volumen, repetir y ayuda— ocupaban
   cuatro renglones en lo alto de un teléfono: cerca de 200 px de los 667 que
   hay, gastados antes de que empezara la escena. Por debajo de 380 px la fila
   se convertía además en una tira que se recorre con el dedo SIN NINGUNA SEÑAL
   de que se pudiera recorrer: los últimos mandos estaban ahí y no había cómo
   saberlo. Recogidos tras un botón ocupan 44 px y se abren enteros.

   QUÉ SE QUEDA FUERA, A PROPÓSITO
   ───────────────────────────────
   Los cuatro indicadores —cámara, micrófono, red y FPS— siguen a la vista. Dos
   son estado y no mandos, y los otros dos son la única forma de encender la
   cámara y el micrófono en un teléfono: esconder que la cámara está encendida
   es justo lo que nunca hay que esconder.

   SOLO POR DEBAJO DE 1024 px
   ──────────────────────────
   Por encima no hay ni botón ni hoja: los controles siguen en su renglón, tal
   cual estaban. `body[data-comandos]` existe igual, pero ninguna regla de
   escritorio lo mira, así que no significa nada allí.
   ========================================================================== */

/* En escritorio el botón ni se dibuja. */
.barra__comandos { display: none; }

@media (max-width: 1024px) {
  /* La hoja se ancla al bloque entero de la barra superior, no a la fila de
     identidad: así cae por debajo de los indicadores en vez de encima. */
  #hud-barra-superior { position: relative; }

  /* La fila de identidad pasa a dos columnas y el botón se queda a la derecha,
     a la altura de las dos líneas de texto. Las tres posiciones van explícitas
     porque el flujo automático colocaría la versión al lado de la marca. */
  .barra { grid-template-columns: minmax(0, 1fr) auto; }
  .barra__marca   { grid-area: 1 / 1; }
  .barra__version { grid-area: 2 / 1; }

  .barra__comandos {
    grid-area: 1 / 2 / 3 / 3;
    justify-self: end;
    align-self: center;

    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44 px: el objetivo táctil mínimo del criterio 2.5.5. */
    min-height: 44px;
    min-width: 44px;
    padding: 0 var(--e-2);

    background: none;
    border: 1px solid var(--panel-borde);
    color: var(--texto);
    cursor: pointer;
    transition: color var(--dur-corta) var(--curva), border-color var(--dur-corta) var(--curva);
  }
  .barra__comandos-icono  { font-size: 1.1rem; line-height: 1; }
  .barra__comandos-rotulo {
    font-family: var(--fuente-titulos);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .barra__comandos[aria-expanded="true"] {
    color: var(--cian-brillante);
    border-color: var(--panel-borde-vivo);
  }
  .barra__comandos:focus-visible {
    outline: 2px solid var(--cian-brillante);
    outline-offset: 2px;
  }

  /* Cerrada, la hoja no se dibuja: sus mandos salen del orden de tabulación
     solos, sin tener que repartir `tabindex` por once elementos. */
  .controles { display: none; }

  body[data-comandos="abierto"] .controles {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: calc(var(--z-hud) + 4);

    /* Los mandos vuelven a envolverse y a leerse de izquierda a derecha. Esto
       deshace de paso la tira horizontal de ≤380 px, que aquí ya no hace falta:
       en la hoja cabe todo sin recorrer nada. */
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--e-2) var(--e-3);
    margin: 0;
    overflow-x: visible;

    /* Por si la pantalla es muy baja —un teléfono en horizontal—: la hoja se
       desplaza en vertical en lugar de salirse por abajo. */
    max-height: 60vh;
    overflow-y: auto;

    padding: var(--e-3);
    /* Fondo opaco, al contrario que el resto de paneles: esto se dibuja ENCIMA
       de la escena, y sobre la superficie clara de un planeta el texto de los
       mandos no se leía. Es el mismo fondo que la barra de abajo. */
    background: rgba(5, 11, 24, 0.94);
    border: 1px solid var(--panel-borde);
    pointer-events: auto;
  }
  /* La tira de ≤380 px declara `flex: none` en cada mando para no encogerlos.
     Dentro de la hoja estorba: el deslizador de volumen se quedaba en su ancho
     mínimo. */
  body[data-comandos="abierto"] .controles > *,
  body[data-comandos="abierto"] .controles__grupo > * { flex: 0 1 auto; }

  /* Sin animación de entrada, y no por descuido: una hoja que aparece con una
     transición de opacidad se queda invisible cuando el compositor va lento
     —ya pasó con los avisos— y lo que se abre tiene que verse SIEMPRE. */
}