/* ==========================================================================
   ORBIS — HUD: rejilla de zonas persistentes y estilo de los paneles.

   La rejilla se define una sola vez y no cambia al alternar entre VISTA DE
   SISTEMA y VISTA DE CUERPO: solo cambia el contenido del viewport central.
   Por eso los paneles laterales no parpadean en la transición.
   ========================================================================== */

#hud {
  position: fixed;
  inset: 0;
  z-index: var(--z-hud);
  display: grid;
  padding: var(--e-3);
  gap: var(--e-3);

  grid-template-columns: minmax(210px, 268px) minmax(0, 1fr) minmax(220px, 286px);
  /* minmax(0, 1fr) y no 1fr: con 1fr, la altura mínima del contenido de la fila
     central impide que se encoja, y la tira de navegación queda fuera de la
     pantalla en cuanto la ventana baja de 900 px de alto. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "superior superior superior"
    "izquierda viewport derecha"
    "inferior  inferior inferior";

  /* La HUD deja pasar el ratón al lienzo salvo en los propios paneles. */
  pointer-events: none;
}

#hud > *, .panel, .navegacion__pestana { pointer-events: auto; }

/* La barra superior envuelve SIEMPRE. Con los controles de tiempo, escala y
   audio, la fila entera pasa de 1.400 px; sin envolver, empujaba la rejilla más
   allá del ancho de la ventana y recortaba la columna derecha. */
#hud-barra-superior {
  grid-area: superior;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  align-items: flex-start;
  pointer-events: none;
  min-width: 0;
}
#hud-panel-izquierdo  { grid-area: izquierda; display: grid; align-content: start; gap: var(--e-3); min-height: 0; overflow-y: auto; }
#hud-viewport         { grid-area: viewport; display: grid; place-items: center; pointer-events: none; min-height: 0; }
#hud-panel-derecho    { grid-area: derecha; display: grid; align-content: start; gap: var(--e-3); min-height: 0; overflow-y: auto; }
#hud-navegacion-planetaria { grid-area: inferior; }

#hud-proyeccion-orbital {
  position: fixed;
  left: var(--e-3);
  bottom: 132px;
  width: clamp(150px, 14vw, 200px);
  pointer-events: none;
}

/* Contenedor reservado para la fase 6: la vista previa de la cámara con el
   esqueleto de la mano, que sí flota sobre la escena. El panel de entradas
   vive dentro de la columna derecha. */
#hud-estado-entradas {
  position: fixed;
  right: var(--e-3);
  bottom: 132px;
  width: clamp(170px, 15vw, 216px);
  pointer-events: none;
}

#hud-subtitulos {
  position: fixed;
  left: 50%;
  bottom: 142px;
  transform: translateX(-50%);
  width: min(760px, 72vw);
  text-align: center;
  pointer-events: none;
}

/* Barras de desplazamiento discretas dentro de los paneles. */
#hud-panel-derecho::-webkit-scrollbar { width: 6px; }
#hud-panel-derecho::-webkit-scrollbar-thumb { background: var(--panel-borde); }
#hud-panel-derecho { scrollbar-width: thin; scrollbar-color: var(--panel-borde) transparent; }

/* --------------------------------------------------------------------------
   Panel: la pieza visual básica.
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  padding: var(--e-3);
  /* Fondo transparente: los paneles dejan ver la escena entera por debajo.
     El desenfoque de fondo y el filo luminoso se quedan, y son ahora los que
     separan el panel de lo que hay detrás; sin ellos, sobre una textura clara
     el texto se apoyaría directamente en el planeta. */
  background: transparent;
  /* Sin borde: lo único que separa el panel de la escena es el desenfoque de
     fondo y el filo luminoso de arriba. */
  border: none;
  -webkit-backdrop-filter: blur(var(--panel-desenfoque));
  backdrop-filter: blur(var(--panel-desenfoque));
  clip-path: polygon(
    var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)),
    calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte));
  box-shadow: inset 0 0 24px rgba(26, 82, 118, 0.28);
}

/* Filo luminoso superior: el detalle que hace que un rectángulo parezca una
   pieza de interfaz y no un div. */
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--corte);
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cian-brillante), transparent 65%);
  opacity: 0.75;
}

.panel[data-estado="sin-datos"] { opacity: 0.62; }

.panel__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}

.panel__titulo {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cian-acento);
}
.panel__titulo--menor { margin-top: var(--e-2); font-size: 9px; }

.panel__contenido { display: grid; gap: var(--e-2); }

.panel__cifra {
  font-family: var(--fuente-cifras);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

/* Las notas se recortan a tres líneas: el texto completo sigue disponible en
   el atributo title y en la VISTA DE CUERPO. Sin el recorte, la columna
   derecha desborda la pantalla en cuanto un cuerpo tiene mucha bibliografía. */
.panel__nota {
  font-size: var(--t-menor);
  line-height: 1.5;
  color: var(--texto-apagado);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.panel__fuente {
  font-size: 9px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.04em;
  color: var(--texto-apagado);
  opacity: 0.85;
}

.panel__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  align-items: baseline;
  font-size: var(--t-menor);
  color: var(--texto-apagado);
}

/* Un dato ausente se declara, nunca se inventa. */
.sin-datos {
  font-family: var(--fuente-cifras);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  color: var(--texto-apagado);
}
.sin-datos::after { content: "SIN DATOS"; }

/* Elemento decorativo: se etiqueta para no confundirlo con una medida. */
.marca-simulacion {
  flex: none;
  padding: 1px 5px;
  border: 1px solid rgba(232, 160, 32, 0.55);
  font-family: var(--fuente-cifras);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ambar-seleccion);
}

.grafico-vacio {
  display: grid;
  gap: 2px;
  padding: var(--e-3) 0;
  text-align: center;
}
.grafico-vacio__nota {
  font-size: var(--t-menor);
  color: var(--texto-apagado);
}

/* ==========================================================================
   Barra superior
   ========================================================================== */
.barra {
  /* La barra se queda solo con la identidad, así que ya no pelea por el ancho:
     ocupa lo que ocupa su texto y deja el resto del renglón a los controles.
     Antes repartía tres columnas —identidad, título central y tiempos— con una
     base flexible de 860 px, y esa altura era justo la que se estaba comiendo
     la vista de la escena. */
  flex: 0 0 auto;
  min-width: 0;
  display: grid;
  align-content: center;
  padding-right: var(--e-3);
  pointer-events: auto;
}

/* Segunda fila: pestañas de módulo a la izquierda, indicadores a la derecha,
   las dos por debajo del panel de controles. `flex-basis: 100%` es lo que
   fuerza el salto de línea sin necesidad de un contenedor aparte. */
.barra-secundaria {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-3);
  pointer-events: auto;
}
.barra-secundaria .barra__modulos { margin-top: 0; }

.barra__marca {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.3em;
  line-height: 1;
  color: var(--cian-brillante);
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}
.barra__version {
  font-family: var(--fuente-titulos);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-apagado);
}

.barra__modulos { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-2); }
.barra__modulo {
  padding: 3px 8px;
  border: 1px solid transparent;
  font-family: var(--fuente-titulos);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-apagado);
  transition: color var(--dur-corta) var(--curva), border-color var(--dur-corta) var(--curva);
}
.barra__modulo:hover:not(:disabled) { color: var(--texto); border-color: var(--panel-borde); }
.barra__modulo[aria-pressed="true"] {
  color: var(--cian-brillante);
  border-color: var(--panel-borde-vivo);
}
.barra__modulo:disabled { opacity: 0.4; cursor: not-allowed; }

.barra__centro { text-align: center; }
.barra__subtitulo {
  font-size: var(--t-menor);
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
}

.barra__tiempos {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px var(--e-2);
  align-items: baseline;
}
.barra__rotulo {
  font-family: var(--fuente-titulos);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-apagado);
  text-align: right;
}
.barra__reloj, .barra__fecha { font-size: var(--t-menor); }

/* `align-items: center` porque los dos interruptores son más altos que los dos
   testigos: sin centrar, la fila quedaba escalonada. */
.barra__indicadores { display: flex; align-items: center; gap: var(--e-2); }
.indicador {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--panel-borde);
  font-family: var(--fuente-cifras);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--texto-apagado);
}
.indicador__etiqueta { text-transform: uppercase; }

/* --------------------------------------------------------------------------
   El indicador que además es interruptor: cámara y micrófono.

   Se distingue a propósito del que solo se lee. La caja deja de ser el <li> y
   pasa a ser el botón, que es quien recibe el foco, el estado y el puntero; el
   <li> conserva el color del borde y se lo pasa por herencia, de modo que las
   reglas de `data-estado` siguen tiñendo los dos por igual.
   -------------------------------------------------------------------------- */
.indicador:has(> .indicador__accion) {
  padding: 0;
  border-width: 0;
}

.indicador__accion {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  /* MISMO TAMAÑO que las pastillas de red y FPS: 2px 6px, sin alto mínimo.
     Los cuatro indicadores son una fila y tienen que leerse como una fila; con
     dos de 44 px y dos de 16, la barra parecía dos cosas pegadas.

     Lo que se pulsa no encoge con ellos: el objetivo táctil lo pone el
     `::after` de abajo, invisible y más alto que la pastilla. La WCAG 2.5.8
     mide el ÁREA QUE RESPONDE, no lo que se ve pintado. */
  padding: 2px 6px;

  background: none;
  border: 1px solid;
  border-color: inherit;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: background-color var(--dur-corta) var(--curva), border-color var(--dur-corta) var(--curva);
}

.indicador__accion:hover {
  background: rgba(79, 195, 247, 0.12);
  border-color: var(--panel-borde-vivo);
}

.indicador__accion:focus-visible {
  outline: 2px solid var(--cian-brillante);
  outline-offset: 2px;
}

/* El área que responde al dedo, más alta que la pastilla y sin pintar nada.
   24 px es el mínimo del criterio 2.5.8 de la WCAG 2.2, que mide el objetivo,
   no el dibujo. Se agranda solo en vertical y solo lo justo: estirarlo más
   robaría toques a la escena, que empieza justo debajo de esta fila. */
.indicador__accion::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 24px;
  transform: translateY(-50%);
}

/* Encendido: el borde se refuerza. El color ya lo pone `data-estado`, pero el
   color por sí solo no puede ser lo único que distinga dos estados. */
.indicador__accion[aria-pressed="true"] { border-width: 2px; }

/* Y el símbolo va en el color de acento SIEMPRE, encendido o apagado. Con las
   cuatro pastillas del mismo tamaño, la altura ya no dice cuál se pulsa; esto
   sí, y no depende solo del color porque los dos que se pulsan son además los
   únicos que llevan símbolo Y son botones de verdad para el teclado. */
.indicador__accion .indicador__simbolo { color: var(--cian-brillante); }

@media (pointer: coarse) {
  /* 32 px con el dedo. Por debajo de 720 px estos dos botones son la ÚNICA
     forma de encender la cámara y el micrófono —el panel de entradas y la
     ventana de invitación no se dibujan—, así que el objetivo crece por encima
     del mínimo; pero no hasta 44, porque son 14 px de banda invisible a cada
     lado y por debajo está el lienzo. */
  .indicador__accion::after { height: 32px; }
}
.indicador[data-estado="activo"]   { color: var(--verde-estado); border-color: rgba(58, 170, 53, 0.55); }
.indicador[data-estado="aviso"]    { color: var(--ambar-seleccion); border-color: rgba(232, 160, 32, 0.55); }
.indicador[data-estado="alerta"]   { color: var(--rojo-alerta); border-color: rgba(255, 82, 82, 0.6); }

/* Controles de escena, a la derecha de la barra */
.controles {
  /* Que ocupe lo que ocupan sus botones y se pegue a la derecha: estirado de
     lado a lado dejaba un panel medio vacío que era justo lo contrario de
     ganar sitio. `margin-left: auto` lo empuja al fondo del renglón. */
  flex: 0 1 auto;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
}
.controles__grupo { display: flex; align-items: center; gap: 4px; }
.controles__boton {
  padding: 4px 10px;
  border: 1px solid var(--panel-borde);
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  transition: color var(--dur-corta) var(--curva), border-color var(--dur-corta) var(--curva);
}
.controles__boton:hover { color: var(--cian-brillante); border-color: var(--panel-borde-vivo); }
.controles__boton--icono { padding: 4px 7px; font-size: 9px; }
.controles__valor { min-width: 5.5em; font-size: var(--t-micro); text-align: center; }
.controles__interruptor {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  cursor: pointer;
}
.controles__interruptor input { accent-color: var(--cian-brillante); }

/* ==========================================================================
   Panel izquierdo — Perfil del cuerpo
   ========================================================================== */
.perfil__nombre {
  margin-top: var(--e-1);
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: var(--texto);
}
.perfil__tipo {
  font-family: var(--fuente-titulos);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambar-seleccion);
}

.perfil__lista {
  display: grid;
  gap: 1px;
  margin-top: var(--e-3);
}
.perfil__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-2);
  align-items: baseline;
  padding: 3px 4px;
  border-bottom: 1px solid rgba(79, 195, 247, 0.12);
}
.perfil__fila:hover { background: rgba(79, 195, 247, 0.07); }
.perfil__fila[data-estado="sin-datos"] { opacity: 0.7; }
.perfil__etiqueta {
  font-family: var(--fuente-titulos);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-apagado);
}
.perfil__valor { font-size: var(--t-menor); text-align: right; }
.perfil__unidad {
  margin-left: 0.35em;
  font-size: 9px;
  color: var(--texto-apagado);
}
.perfil__fuente {
  margin-top: var(--e-2);
  font-size: 9px;
  line-height: 1.5;
  color: var(--texto-apagado);
}

/* ==========================================================================
   Gráficos
   ========================================================================== */
.barras { display: grid; gap: 3px; }
.barras__fila {
  display: grid;
  grid-template-columns: 3.2em 1fr 4.2em;
  gap: var(--e-2);
  align-items: center;
}
.barras__etiqueta {
  font-family: var(--fuente-cifras);
  font-size: var(--t-micro);
  color: var(--texto-tenue);
}
.barras__pista { height: 7px; background: rgba(79, 195, 247, 0.14); }
.barras__relleno {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--azul-primario), var(--cian-brillante));
  transition: width var(--dur-media) var(--curva);
}
.barras__valor { font-size: var(--t-micro); text-align: right; }

.traza, .onda { width: 100%; height: auto; }
.traza__eje, .onda__eje { stroke: rgba(79, 195, 247, 0.22); stroke-width: 1; }
.traza__linea {
  fill: none;
  stroke: var(--cian-acento);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.onda__linea {
  fill: none;
  stroke: var(--cian-brillante);
  stroke-width: 1.3;
}

.estado-linea {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-menor);
}
.estado-pastilla {
  padding: 1px 7px;
  border: 1px solid currentColor;
  font-family: var(--fuente-titulos);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.estado-pastilla[data-estado="activa"]   { color: var(--verde-estado); }
.estado-pastilla[data-estado="residual"] { color: var(--ambar-seleccion); }
.estado-pastilla[data-estado="inactiva"] { color: var(--texto-apagado); }
.estado-pastilla[data-estado="sin-superficie"] { color: var(--texto-apagado); }

.dial { display: grid; justify-items: center; gap: 2px; }
.dial__svg { width: 92px; height: 92px; }
.dial__pista { fill: none; stroke: rgba(79, 195, 247, 0.18); stroke-width: 6; stroke-linecap: butt; }
.dial__valor {
  fill: none;
  stroke: var(--cian-brillante);
  stroke-width: 6;
  stroke-linecap: butt;
  transition: stroke-dasharray var(--dur-media) var(--curva);
}
.dial__pie { display: grid; justify-items: center; margin-top: -34px; }
.dial__cifra { font-size: var(--t-base); }
.dial__unidad, .dial__etiqueta {
  font-family: var(--fuente-titulos);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-apagado);
}
.dial__etiqueta { margin-top: 26px; }

.asignacion { display: grid; gap: 3px; }
.asignacion__fila {
  display: grid;
  grid-template-columns: 5em 1fr 5.4em;
  gap: var(--e-2);
  align-items: center;
}
.asignacion__etiqueta {
  font-family: var(--fuente-titulos);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-apagado);
}
.asignacion__pista { height: 5px; background: rgba(232, 160, 32, 0.16); }
.asignacion__relleno { display: block; height: 100%; background: var(--ambar-seleccion); }
.asignacion__valor { font-size: 9px; text-align: right; }


/* Mapa orbital */
.mapa__svg { width: 100%; height: auto; max-height: 160px; }
.mapa__orbita { fill: none; stroke: rgba(79, 195, 247, 0.3); stroke-width: 0.7; }
.mapa__central { fill: currentColor; opacity: 0.92; }
.mapa__satelite { fill: var(--cian-brillante); cursor: pointer; }
.mapa__satelite:hover, .mapa__satelite:focus-visible { fill: var(--ambar-seleccion); r: 5; }

/* ==========================================================================
   Pestañas de módulo: filtran la columna derecha
   SISTEMA no esconde nada —es el estado inicial y el que lo devuelve todo—.
   Los otros dos ocultan los paneles que no declaran pertenecer al módulo
   elegido. `data-modulos` lo pone cada panel al construirse, en PanelesDerecha.
   ========================================================================== */
body[data-modulo="sensores"]  .panel--derecha:not([data-modulos~="sensores"]),
body[data-modulo="analitica"] .panel--derecha:not([data-modulos~="analitica"]),
body[data-modulo="curiosidades"] .panel--derecha:not([data-modulos~="curiosidades"]),
body[data-modulo="asistente"] .panel--derecha:not([data-modulos~="asistente"]) {
  display: none;
}

/* Curiosidades es el único panel que NO sale en SISTEMA. Los otros cinco
   son fichas del cuerpo que se leen juntas; este es una conversación, y
   colgarlo debajo de las fichas lo habría dejado siempre fuera de la vista y
   además habría cambiado la columna de arranque, que estaba bien como estaba. */
body[data-modulo="sistema"] .panel--curiosidades,
body[data-modulo="sistema"] .panel--charla { display: none; }

/* --------------------------------------------------------------------------
   Panel de curiosidades
   -------------------------------------------------------------------------- */
.curiosidades__bloque { display: grid; gap: var(--e-2); margin-top: var(--e-3); }
.curiosidades__bloque:first-of-type { margin-top: var(--e-2); }

.curiosidades__nombre,
.curiosidades__ultimo {
  margin: 0;
  font-family: var(--fuente-datos);
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--texto);
}

.curiosidades__rotulo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cian-acento);
}

.curiosidades__sujeto { color: var(--ambar-seleccion); font-weight: 600; }

.curiosidades__ultimo { color: var(--texto-tenue); font-style: italic; }

.curiosidades__pie {
  margin: 0;
  font-family: var(--fuente-datos);
  font-size: var(--t-menor);
  line-height: 1.4;
  color: var(--texto-apagado);
}

/* Un enlace de texto y no un botón con caja: es una acción secundaria y no
   compite con las diecinueve preguntas, que son lo que se ha venido a hacer. */
.curiosidades__enlace {
  justify-self: start;
  min-height: 24px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--panel-borde);
  color: var(--cian-acento);
  font-family: var(--fuente-datos);
  font-size: var(--t-menor);
  cursor: pointer;
}
.curiosidades__enlace:hover,
.curiosidades__enlace:focus-visible { color: var(--cian-brillante); border-bottom-color: var(--panel-borde-vivo); }

.curiosidades__preguntas { display: flex; flex-wrap: wrap; gap: var(--e-1) 6px; }

.curiosidades__pregunta {
  min-height: 24px;
  padding: 3px 8px;
  background: rgba(79, 195, 247, 0.07);
  border: 1px solid var(--panel-borde);
  color: var(--texto);
  font-family: var(--fuente-datos);
  font-size: var(--t-menor);
  cursor: pointer;
  transition: background-color var(--dur-corta) var(--curva), border-color var(--dur-corta) var(--curva);
}
.curiosidades__pregunta:hover,
.curiosidades__pregunta:focus-visible {
  background: rgba(0, 229, 255, 0.16);
  border-color: var(--panel-borde-vivo);
}

@media (pointer: coarse) {
  .curiosidades__pregunta, .curiosidades__enlace { min-height: 44px; }
  .curiosidades__pregunta { padding: 3px var(--e-2); }
}

/* ==========================================================================
   Panel galáctico (viewport central de la VISTA DE SISTEMA)
   ========================================================================== */
.galaxia {
  width: min(100%, 640px);
  transition: opacity var(--dur-transicion-vista) var(--curva),
              transform var(--dur-transicion-vista) var(--curva),
              clip-path var(--dur-transicion-vista) var(--curva);
}
/* Retirada por barrido, sin destruir el panel. */
.galaxia[data-oculto="si"] {
  opacity: 0;
  transform: translateX(14%) scale(0.96);
  pointer-events: none;
  clip-path: inset(0 0 0 100%);
}

/* Aspa para cerrarlo antes de que se retire solo. */
.galaxia__cerrar {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font-family: var(--fuente-titulos);
  font-size: var(--t-base);
  line-height: 1;
  color: var(--texto-apagado);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-corta) var(--curva);
}
.galaxia__cerrar:hover,
.galaxia__cerrar:focus-visible { color: var(--cian-brillante); }
.galaxia__svg { width: 100%; height: auto; }
.galaxia__disco { fill: rgba(26, 82, 118, 0.10); stroke: rgba(79, 195, 247, 0.16); stroke-width: 0.6; }
.galaxia__brazo { fill: none; stroke: rgba(127, 178, 255, 0.5); stroke-width: 5; stroke-linecap: round; opacity: 0.45; }
.galaxia__polvo { fill: #cfe6ff; }
.galaxia__bulbo { fill: rgba(255, 217, 160, 0.55); }
.galaxia__halo-sol { fill: rgba(0, 229, 255, 0.14); }
.galaxia__sol { fill: var(--cian-brillante); }
.galaxia__guia { stroke: var(--cian-brillante); stroke-width: 0.8; opacity: 0.75; }
.galaxia__etiqueta {
  fill: var(--cian-brillante);
  font-family: var(--fuente-titulos);
  font-size: 11px;
  letter-spacing: 0.16em;
}
/* ==========================================================================
   Estrella fugaz
   El trazo es decoración y lleva su marca; los datos que salen al pulsarla son
   reales. El botón es del tamaño mínimo táctil aunque el trazo se vea fino:
   la zona sensible y lo que se dibuja no tienen por qué coincidir.
   ========================================================================== */
.fugaz {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 23;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  transform: translate(var(--desde-x), var(--desde-y));
  animation: fugaz-cruzar var(--dur-fugaz, 2200ms) var(--curva) forwards;
}
.fugaz[data-quieta="si"] {
  transform: translate(var(--desde-x), var(--desde-y));
  animation: fugaz-asomar 400ms var(--curva) forwards;
}

.fugaz__trazo {
  display: block;
  width: 90px;
  height: 2px;
  border-radius: 2px;
  transform: rotate(var(--giro, 20deg));
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(207, 230, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.95) 92%,
    rgba(255, 255, 255, 1) 100%
  );
  box-shadow: 0 0 10px rgba(207, 230, 255, 0.65);
  pointer-events: none;
}

.fugaz__marca {
  position: absolute;
  top: 100%;
  margin-top: 2px;
  font-family: var(--fuente-titulos);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--ambar-seleccion);
  opacity: 0.75;
  white-space: nowrap;
  pointer-events: none;
}

.fugaz:hover .fugaz__trazo,
.fugaz:focus-visible .fugaz__trazo {
  height: 3px;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
}

@keyframes fugaz-cruzar {
  0%   { transform: translate(var(--desde-x), var(--desde-y)); opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 1; }
  /* Se queda donde acaba y se apaga despacio: durante ese rato todavía se
     puede pulsar, para que atraparla no sea una prueba de reflejos. */
  100% { transform: translate(var(--hasta-x), var(--hasta-y)); opacity: 0.22; }
}

@keyframes fugaz-asomar {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   Respuesta a una pregunta
   ========================================================================== */
.respuesta {
  position: fixed;
  left: 50%;
  bottom: 190px;
  transform: translateX(-50%);
  z-index: 22;
  width: min(92vw, 560px);
  display: grid;
  gap: var(--e-2);
}
.respuesta__valor {
  font-size: 1.5rem;
  color: var(--cian-brillante);
}
.respuesta__valor[data-sin-dato="si"] {
  font-size: var(--t-base);
  color: var(--ambar-seleccion);
  letter-spacing: 0.18em;
}
.respuesta__texto { font-size: var(--t-base); line-height: 1.6; color: var(--texto); }

@media (max-width: 720px) {
  .respuesta { bottom: 150px; width: 94vw; }
  .respuesta__valor { font-size: 1.15rem; }
}

/* ==========================================================================
   Bienvenida: el saludo del asistente y la pregunta por el nombre
   ========================================================================== */
.bienvenida__velo {
  position: fixed;
  inset: 0;
  z-index: 40;                      /* Sobre la HUD, bajo la ayuda y el comparador. */
  display: grid;
  place-items: center;
  padding: var(--e-4);
  background: rgba(5, 11, 24, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity var(--dur-media) var(--curva);
}
.bienvenida__velo[data-saliendo="si"] { opacity: 0; pointer-events: none; }

.bienvenida {
  width: min(100%, 480px);
  max-height: 100%;
  overflow-y: auto;
  display: grid;
  gap: var(--e-2);
  padding: var(--e-5);
}
.bienvenida__marca {
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.42em;
  color: var(--cian-acento);
}
.bienvenida__titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--texto);
}
.bienvenida__texto { font-size: var(--t-base); line-height: 1.6; color: var(--texto-tenue); }
.bienvenida__pregunta {
  margin-top: var(--e-2);
  font-size: var(--t-base);
  color: var(--cian-brillante);
}
.bienvenida__etiqueta {
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-apagado);
}
.bienvenida__campo {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--e-3);
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--texto);
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid var(--panel-borde);
}
.bienvenida__campo:focus-visible {
  outline: none;
  border-color: var(--cian-brillante);
  background: rgba(0, 229, 255, 0.09);
}
.bienvenida__campo[aria-invalid="true"] { border-color: var(--rojo-alerta); }
.bienvenida__error { font-size: var(--t-menor); color: var(--rojo-alerta); }
.bienvenida__aviso { font-size: var(--t-menor); line-height: 1.5; color: var(--texto-apagado); }
.bienvenida__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.bienvenida__principal {
  color: var(--cian-brillante);
  border-color: var(--cian-brillante);
}
.bienvenida .controles__boton { min-height: 40px; padding-inline: var(--e-4); }

@media (pointer: coarse) {
  .bienvenida .controles__boton { min-height: 44px; }
}

/* Invitación a encender el micrófono y la cámara. */
.invitacion {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid rgba(79, 195, 247, 0.2);
}
.invitacion__mensaje {
  font-size: var(--t-menor);
  line-height: 1.5;
  color: var(--texto-tenue);
}
.invitacion__mensaje strong { color: var(--cian-brillante); font-weight: 500; }
.invitacion__botones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.invitacion__boton {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 32px;
  padding: 0 var(--e-3);
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid var(--panel-borde);
  cursor: pointer;
  transition: color var(--dur-corta) var(--curva),
              border-color var(--dur-corta) var(--curva),
              background var(--dur-corta) var(--curva);
}
.invitacion__boton:hover,
.invitacion__boton:focus-visible {
  color: var(--cian-brillante);
  border-color: var(--cian-brillante);
  background: rgba(0, 229, 255, 0.12);
}
/* Encendida de verdad: verde, el mismo que usan los indicadores de la barra. */
.invitacion__boton[aria-pressed="true"] {
  color: var(--verde-estado);
  border-color: rgba(58, 170, 53, 0.55);
  background: rgba(58, 170, 53, 0.10);
}
.invitacion__simbolo { font-size: 10px; }

@media (pointer: coarse) {
  .invitacion__boton { min-height: 44px; }
}

.galaxia__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-3);
  margin-top: var(--e-2);
  padding-top: var(--e-2);
  border-top: 1px solid rgba(79, 195, 247, 0.2);
}
.galaxia__dato { display: grid; gap: 2px; }
.galaxia__valor { font-size: var(--t-base); }
.galaxia__nota { font-size: 9px; line-height: 1.45; color: var(--texto-apagado); }

/* ==========================================================================
   Proyección orbital
   ========================================================================== */
.proyeccion { display: grid; gap: 2px; }
.proyeccion__svg { width: 100%; height: auto; }
.proyeccion__anillo { fill: none; stroke: rgba(79, 195, 247, 0.22); stroke-width: 0.6; }
.proyeccion__anillo--activo { stroke: var(--cian-brillante); stroke-width: 1.1; }
.proyeccion__destacado { fill: none; stroke: rgba(232, 160, 32, 0.4); stroke-width: 0.8; stroke-dasharray: 3 4; }
.proyeccion__sol { fill: var(--ambar-seleccion); }
.proyeccion__marcador { fill: var(--ambar-seleccion); }
.proyeccion__borde { fill: none; stroke: rgba(79, 195, 247, 0.16); stroke-width: 0.7; }
.proyeccion__arco { fill: none; stroke: var(--cian-acento); stroke-width: 1.2; opacity: 0.55; }
.proyeccion__reticula { transform-origin: center; animation: orbis-girar 42s linear infinite; }
.proyeccion__pie {
  display: flex;
  gap: var(--e-2);
  align-items: center;
  font-size: 9px;
  color: var(--texto-apagado);
}

/* ==========================================================================
   Estado de las entradas
   ========================================================================== */
.panel--entradas { display: grid; gap: var(--e-2); }
.entradas__vista { position: relative; aspect-ratio: 4 / 3; background: #04070d; }
.entradas__video, .entradas__esqueleto { position: absolute; inset: 0; width: 100%; height: 100%; }

/* La vista previa va REFLEJADA, y faltaba: la cámara frontal entrega la imagen
   sin invertir, así que levantar la mano derecha la sacaba por el lado
   izquierdo del recuadro. Todo lo demás ya daba por hecho el espejo —el
   esqueleto se dibuja con `1 - x`, el cursor gestual también, y el giro de la
   escena invierte el desplazamiento— de modo que el esqueleto naranja aparecía
   en el lado contrario a la mano que lo generaba.

   Se refleja el VÍDEO y no el lienzo: el lienzo ya viene reflejado desde el
   código, y darle la vuelta otra vez lo dejaría al revés. */
.entradas__video { transform: scaleX(-1); }
.entradas__boton {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--panel-borde);
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.entradas__boton:hover { color: var(--cian-brillante); border-color: var(--panel-borde-vivo); }
.entradas__boton[aria-pressed="true"] { color: var(--verde-estado); border-color: rgba(58, 170, 53, 0.6); }
.entradas__aviso { font-size: 9px; line-height: 1.5; color: var(--texto-apagado); }
.entradas__aviso strong { color: var(--texto-tenue); }
.entradas__comando {
  font-family: var(--fuente-cifras);
  font-size: var(--t-micro);
  color: var(--cian-acento);
}

/* ==========================================================================
   Navegación planetaria
   ========================================================================== */
.navegacion { display: grid; gap: var(--e-2); }
.navegacion__cabecera { display: flex; align-items: center; justify-content: space-between; }
.navegacion__cerrar {
  width: 22px; height: 22px;
  border: 1px solid var(--panel-borde);
  font-size: var(--t-base);
  line-height: 1;
  color: var(--texto-tenue);
}
.navegacion__cerrar:hover { color: var(--rojo-alerta); border-color: rgba(255, 82, 82, 0.6); }

.navegacion__cuerpo { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-2); align-items: center; }
.navegacion__flecha {
  width: 26px; height: 54px;
  border: 1px solid var(--panel-borde);
  font-size: var(--t-mayor);
  color: var(--texto-tenue);
}
.navegacion__flecha:hover { color: var(--cian-brillante); border-color: var(--panel-borde-vivo); }

.navegacion__tira {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-borde) transparent;
  padding-bottom: 4px;
}
.navegacion__tira::-webkit-scrollbar { height: 5px; }
.navegacion__tira::-webkit-scrollbar-thumb { background: var(--panel-borde); }
.navegacion__elemento { flex: none; }

.miniatura {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 62px;
  padding: 4px 2px;
  border: 1px solid transparent;
  transition: border-color var(--dur-corta) var(--curva), background var(--dur-corta) var(--curva);
}
.miniatura:hover { border-color: var(--panel-borde); background: rgba(79, 195, 247, 0.08); }
.miniatura--activa {
  border-color: var(--ambar-seleccion);
  background: rgba(232, 160, 32, 0.12);
}
.miniatura__disco {
  width: 34px; height: 34px;
  border-radius: 50%;
  background-size: 200% 100%;
  background-position: 30% 50%;
  box-shadow: inset -6px -4px 10px rgba(0, 0, 0, 0.65);
}
.miniatura__nombre {
  font-family: var(--fuente-titulos);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-align: center;
  line-height: 1.25;
}
.miniatura--activa .miniatura__nombre { color: var(--ambar-seleccion); }
.miniatura__marca {
  position: absolute;
  top: 2px; right: 2px;
  font-family: var(--fuente-cifras);
  font-size: 7px;
  letter-spacing: 0.06em;
  color: var(--ambar-seleccion);
  opacity: 0.8;
}

.navegacion__pestana {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 4px 16px;
  background: var(--panel-fondo);
  border: 1px solid var(--panel-borde);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(var(--panel-desenfoque));
  backdrop-filter: blur(var(--panel-desenfoque));
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* ==========================================================================
   Estados de vista
   ========================================================================== */
/* En VISTA DE CUERPO el viewport central se libera para que se vea la escena. */
body[data-vista="cuerpo"] #hud-viewport { pointer-events: none; }

/* ==========================================================================
   VISTA DE CUERPO — retícula, anotaciones y arco de datos
   ========================================================================== */

/* Retícula: SVG a tamaño de ventana, por encima del lienzo y por debajo de los
   paneles. No recibe el ratón. */
.reticula {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.reticula__anillo {
  fill: none;
  stroke: rgba(79, 195, 247, 0.34);
  stroke-width: 1;
}
.reticula__anillo[data-indice="1"] {
  stroke: rgba(79, 195, 247, 0.18);
  stroke-dasharray: 2 9;
}
.reticula__aro {
  fill: none;
  stroke: rgba(0, 229, 255, 0.42);
  stroke-width: 1.2;
}
.reticula__marcador { fill: var(--ambar-seleccion); }

/* Anotaciones ancladas a coordenadas reales de la superficie */
.anotaciones__lineas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.anotacion__guia {
  fill: none;
  stroke: rgba(214, 238, 248, 0.55);
  stroke-width: 1;
}

.anotaciones {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.anotacion {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 7px;
  background: rgba(5, 11, 24, 0.7);
  border: 1px solid rgba(79, 195, 247, 0.4);
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto);
  white-space: nowrap;
  transition: opacity var(--dur-corta) var(--curva);
}
.anotacion[data-oculta="si"] { opacity: 0; }
.anotacion[data-lado="izquierda"] { flex-direction: row-reverse; }
.anotacion__punto {
  width: 5px;
  height: 5px;
  background: var(--cian-brillante);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.8);
}

/* Arco de datos, a la izquierda del cuerpo */
/* El arco se sitúa a la derecha del panel de perfil, no sobre él: la columna
   izquierda mide hasta 268 px y el arco hasta 330, así que solaparlos dejaría
   dos textos superpuestos e ilegibles. */
.arco {
  position: fixed;
  left: clamp(296px, 19vw, 340px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: clamp(240px, 22vw, 330px);
  max-height: 66vh;
  overflow: hidden;
  pointer-events: none;
  transition: opacity var(--dur-transicion-vista) var(--curva),
              transform var(--dur-transicion-vista) var(--curva);
}
.arco[data-oculto="si"] {
  opacity: 0;
  transform: translateY(-50%) translateX(-28px);
}
.arco__cuerpo { display: grid; gap: 1px; }
.arco__linea {
  /* El desplazamiento por línea es lo que dibuja la curva del arco. */
  transform: translateX(var(--desplazamiento, 0));
  font-family: var(--fuente-cifras);
  font-size: var(--t-micro);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--texto-tenue);
  white-space: pre;
  text-shadow: 0 0 8px rgba(5, 11, 24, 0.95);
}
.arco__linea[data-tipo="titulo"] {
  color: var(--cian-brillante);
  letter-spacing: 0.14em;
}
.arco__linea[data-completa="si"] { color: var(--texto-tenue); }

/* En VISTA DE SISTEMA el arco no estorba */
body[data-vista="sistema"] .arco { pointer-events: none; }

@media (max-width: 1280px) {
  .arco { display: none; }   /* Sin sitio: el perfil izquierdo ya da los datos. */
}

/* Aviso de anotaciones en la cara oculta */
.anotaciones__aviso {
  position: fixed;
  left: 50%;
  bottom: 176px;
  transform: translateX(-50%);
  z-index: 3;
  padding: 3px 10px;
  background: rgba(5, 11, 24, 0.72);
  border: 1px solid rgba(232, 160, 32, 0.45);
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar-seleccion);
  pointer-events: none;
}

/* ==========================================================================
   Subtítulos de la narración
   ========================================================================== */
.subtitulo {
  display: inline-block;
  padding: var(--e-2) var(--e-4);
  background: rgba(5, 11, 24, 0.86);
  border: 1px solid var(--panel-borde);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.subtitulo__texto {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto);
  text-wrap: balance;
}

/* Controles de audio en la barra */
.controles__grupo--audio { gap: var(--e-2); }
.controles__volumen {
  width: 64px;
  accent-color: var(--cian-brillante);
}

/* ==========================================================================
   Cursor holográfico de los gestos
   ========================================================================== */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  width: 44px;
  height: 44px;
  pointer-events: none;
  will-change: transform;
}
.cursor__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cursor__pista { fill: none; stroke: rgba(79, 195, 247, 0.22); stroke-width: 2.5; }
.cursor__aro {
  fill: none;
  stroke: var(--ambar-seleccion);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 90ms linear;
}
.cursor__punto {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--cian-brillante);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.9);
}
.cursor[data-gesto="puno"] .cursor__punto { background: var(--rojo-alerta); box-shadow: 0 0 10px rgba(255, 82, 82, 0.9); }
.cursor[data-gesto="pellizco"] .cursor__punto,
.cursor[data-gesto="pellizco-doble"] .cursor__punto { background: var(--ambar-seleccion); }
.cursor__accion {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar-seleccion);
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(5, 11, 24, 0.95);
}
.cursor__gesto {
  position: fixed;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  z-index: 6;
  padding: 3px 12px;
  background: rgba(5, 11, 24, 0.72);
  border: 1px solid var(--panel-borde);
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cian-acento);
  pointer-events: none;
}

/* Estado de la carga del detector de manos y testigo de cámara encendida */
.entradas__estado {
  font-size: 9px;
  line-height: 1.45;
  color: var(--cian-acento);
}
.entradas__estado[data-tipo="error"] { color: var(--rojo-alerta); }
/* Aviso: algo opcional no ha salido —el modelo de rostro, por ejemplo— pero lo
   principal sigue funcionando. No es un error y no debe leerse como tal. */
.entradas__estado[data-tipo="aviso"] { color: var(--ambar-seleccion); }

/* Testigo rojo mientras la cámara está encendida: nunca puede estar grabando
   sin que se vea. */
.entradas__testigo {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rojo-alerta);
  box-shadow: 0 0 8px rgba(255, 82, 82, 0.9);
  animation: orbis-testigo 1.6s ease-in-out infinite;
}

/* ==========================================================================
   Ayuda y sugerencias de voz
   ========================================================================== */
.ayuda {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  width: min(560px, 92vw);
  max-height: 76vh;
  overflow-y: auto;
  padding: var(--e-4);
}
.ayuda__lista { display: grid; gap: 3px; margin-top: var(--e-2); }
.ayuda__fila {
  display: grid;
  grid-template-columns: minmax(0, 15em) 1fr;
  gap: var(--e-3);
  padding: 3px 0;
  border-bottom: 1px solid rgba(79, 195, 247, 0.12);
}
.ayuda__ejemplo {
  font-family: var(--fuente-cifras);
  font-size: var(--t-menor);
  color: var(--cian-brillante);
}
.ayuda__descripcion { font-size: var(--t-menor); color: var(--texto-tenue); }

.sugerencias {
  position: fixed;
  left: 50%;
  bottom: 200px;
  transform: translateX(-50%);
  z-index: 20;
  width: min(420px, 88vw);
  padding: var(--e-3);
}
.sugerencias__oido { display: grid; gap: 2px; }
.sugerencias__texto { font-family: var(--fuente-cifras); font-size: var(--t-base); color: var(--texto); }
.sugerencias__lista { display: grid; gap: 2px; margin-top: var(--e-1); }
.sugerencias__lista li {
  font-family: var(--fuente-cifras);
  font-size: var(--t-menor);
  color: var(--cian-acento);
}

/* ==========================================================================
   Comparador de dos cuerpos
   ========================================================================== */
.comparador {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 31;
  width: min(620px, 94vw);
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--e-4);
}
.comparador__cabeceras,
.comparador__siluetas,
.comparador__fila {
  display: grid;
  grid-template-columns: 1fr 8.5em 1fr;
  gap: var(--e-3);
  align-items: center;
}
.comparador__fila { grid-template-columns: 1fr 8.5em 1fr 4.5em; }
.comparador__cabeceras { margin-bottom: var(--e-2); }
.comparador__nombre {
  font-family: var(--fuente-titulos);
  font-size: var(--t-mayor);
  letter-spacing: 0.08em;
  color: var(--texto);
  text-align: center;
}
.comparador__vs {
  font-family: var(--fuente-titulos);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-apagado);
  text-align: center;
}
.comparador__siluetas { margin-bottom: var(--e-3); }
/* El contenedor mide 96 px fijos y el disco un porcentaje de ese ancho: así la
   proporción entre los dos cuerpos se conserva. Limitando la altura en vez del
   ancho, el mayor salía como una elipse en lugar de un círculo. */
.comparador__silueta {
  display: flex;
  justify-content: center;
  width: 96px;
  margin: 0 auto;
}
.comparador__disco {
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset -8px -5px 14px rgba(0, 0, 0, 0.6);
}
.comparador__lista { display: grid; gap: 2px; }
.comparador__fila {
  padding: 3px 0;
  border-bottom: 1px solid rgba(79, 195, 247, 0.12);
  font-size: var(--t-menor);
}
.comparador__fila > .panel__cifra:first-child { text-align: right; }
.comparador__etiqueta {
  font-family: var(--fuente-titulos);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-apagado);
  text-align: center;
}
.comparador__razon {
  font-family: var(--fuente-cifras);
  font-size: var(--t-micro);
  color: var(--ambar-seleccion);
  text-align: right;
}
.comparador__razon--vacia { color: var(--texto-apagado); }

/* --------------------------------------------------------------------------
   Avisos: mensajes breves sobre la escena.

   Viven en la esquina superior del viewport central, que es la única franja
   que no ocupa ningún panel: debajo de la barra, encima de la tira de
   navegación y entre las dos columnas de datos. Se colocan dentro de
   #hud-viewport en lugar de con una posición fija y un número mágico, así la
   rejilla sigue mandando y en las disposiciones estrechas bajan solas.

   Son transitorios y estrechos a propósito. Lo que se ha venido a ver es el
   Sistema Solar; un aviso que tapa media pantalla se acuerda de sí mismo y se
   olvida de para qué está.
   -------------------------------------------------------------------------- */
.avisos {
  /* Ocupan la celda del viewport central sin ser hijos suyos: por debajo de
     720 px esa zona se oculta, y un aviso dentro de ella se habría ocultado
     con ella. Ahí abajo la celda pasa a ser la del perfil, que está anclado
     abajo y deja libre la franja de arriba. */
  grid-area: viewport;
  align-self: start;
  justify-self: center;
  display: grid;
  gap: var(--e-2);
  width: min(30rem, 100%);
}

/* Más específico que `#hud > *`, que pone pointer-events en auto: el hueco
   entre avisos —y el que queda cuando no hay ninguno— tiene que dejar pasar el
   ratón al lienzo. Cada aviso lo vuelve a activar para sí mismo. */
#hud > .avisos { pointer-events: none; }

.aviso {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-3);

  background: var(--panel-fondo);
  backdrop-filter: blur(var(--panel-desenfoque));
  border: 1px solid var(--panel-borde);
  /* La franja de color va a la izquierda y no es lo único que distingue un
     tono de otro: el texto ya dice qué pasa. El color acompaña, no informa. */
  border-left-width: 3px;
  border-left-color: var(--cian-acento);
  clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte));

  pointer-events: auto;
  /* Se anima el desplazamiento y NO la opacidad, a propósito.
     Una animación de opacidad que arranque en 0 deja el aviso invisible hasta
     que el compositor entrega el primer fotograma, y en una máquina cargada
     eso puede tardar. Medido en este mismo proyecto con render por software:
     830 ms por fotograma, con la animación clavada en el 0 %. Justo el aviso
     que más importa —el del audio bloqueado— es el que aparece cuando algo va
     mal, que es cuando la máquina suele ir peor. Legible desde el primer
     fotograma; lo único que se anima es de dónde entra. */
  animation: aviso-entra var(--dur-media) var(--curva);
}

.aviso[data-tono="aviso"]  { border-left-color: var(--ambar-seleccion); }
.aviso[data-tono="alerta"] { border-left-color: var(--rojo-alerta); }

.aviso__texto {
  margin: 0;
  font-family: var(--fuente-datos);
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--texto);
}

.aviso__cerrar {
  display: grid;
  place-items: center;
  /* 24 px es el mínimo de la WCAG 2.2 para puntero fino; más abajo sube a 44
     cuando el puntero es grueso. */
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  color: var(--texto-tenue);
  font-size: var(--t-menor);
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-corta) var(--curva), border-color var(--dur-corta) var(--curva);
}

.aviso__cerrar:hover,
.aviso__cerrar:focus-visible {
  color: var(--texto);
  border-color: var(--panel-borde);
}

@media (pointer: coarse) {
  .aviso__cerrar { min-width: 44px; min-height: 44px; }
}

@keyframes aviso-entra {
  from { transform: translateY(-6px); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin desplazamiento: aparece donde va a quedarse. */
  .aviso { animation: none; }
}

/* --------------------------------------------------------------------------
   Panel de conversación: el asistente con el que se habla.

   Se distingue de las fichas de datos a propósito. Aquellas son una lectura
   —etiqueta y cifra, densas, para repasar de un vistazo—; esto es un diálogo, y
   un diálogo pide renglones anchos, aire entre turnos y saber de un golpe quién
   dijo qué. Por eso los turnos se alinean a lados distintos: es la convención
   que todo el mundo ya conoce y no hay que explicarla.
   -------------------------------------------------------------------------- */
.charla__hilo {
  display: grid;
  gap: var(--e-2);
  /* Alto acotado y desplazamiento propio: sin esto, una conversación larga
     empujaría el campo de escritura fuera de la columna y habría que buscarlo
     desplazando el panel entero. */
  max-height: min(48vh, 420px);
  overflow-y: auto;
  margin: var(--e-2) 0;
  padding-right: var(--e-1);
  scrollbar-width: thin;
  scrollbar-color: var(--panel-borde) transparent;
}

.charla__turno {
  max-width: 92%;
  padding: var(--e-2);
  border: 1px solid var(--panel-borde);
  border-left-width: 3px;
}

.charla__turno[data-rol="usuario"] {
  justify-self: end;
  border-left-color: var(--ambar-seleccion);
}
.charla__turno[data-rol="asistente"] {
  justify-self: start;
  border-left-color: var(--cian-acento);
}
/* Mientras se espera. No es un turno de nadie: no lleva color de lado. */
.charla__turno[data-rol="esperando"] {
  justify-self: start;
  border-left-color: var(--texto-apagado);
  opacity: 0.7;
}

.charla__texto {
  margin: 0;
  font-family: var(--fuente-datos);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--texto);
}

.charla__fuente {
  margin: var(--e-1) 0 0;
  font-family: var(--fuente-datos);
  font-size: var(--t-menor);
  line-height: 1.35;
  color: var(--texto-apagado);
}

/* Envuelve. La columna derecha mide 286 px como mucho, y el campo más los dos
   botones en una sola línea piden bastante más: sin envolver, el panel se salía
   por el borde derecho de la pantalla y el botón de preguntar quedaba fuera. */
.charla__entrada { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: stretch; }

.charla__campo {
  flex: 1 1 100%;
  min-width: 0;
  min-height: 32px;
  padding: var(--e-1) var(--e-2);
  background: rgba(5, 11, 24, 0.6);
  border: 1px solid var(--panel-borde);
  color: var(--texto);
  font-family: var(--fuente-datos);
  font-size: var(--t-base);
}
.charla__campo::placeholder { color: var(--texto-apagado); }
.charla__campo:focus-visible { outline: 2px solid var(--cian-brillante); outline-offset: 1px; }
.charla__campo:disabled { opacity: 0.5; }

.charla__enviar,
.charla__dictar {
  min-height: 32px;
  padding: var(--e-1) var(--e-2);
  background: rgba(79, 195, 247, 0.1);
  border: 1px solid var(--panel-borde);
  color: var(--texto);
  font-family: var(--fuente-titulos);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-corta) var(--curva), border-color var(--dur-corta) var(--curva);
}
.charla__dictar { flex: 0 0 auto; min-width: 32px; }
.charla__enviar { flex: 1 1 auto; }
.charla__enviar:hover, .charla__dictar:hover,
.charla__enviar:focus-visible, .charla__dictar:focus-visible {
  background: rgba(0, 229, 255, 0.16);
  border-color: var(--panel-borde-vivo);
}
.charla__enviar:disabled { opacity: 0.5; cursor: not-allowed; }

/* Escuchando: el borde se refuerza además del color, porque el color por sí
   solo no puede ser lo único que distinga dos estados. */
.charla__dictar[aria-pressed="true"] {
  border-width: 2px;
  border-color: var(--verde-estado);
  color: var(--verde-estado);
}

.charla__aviso {
  margin: 0 0 var(--e-2);
  font-family: var(--fuente-datos);
  font-size: var(--t-menor);
  line-height: 1.4;
  color: var(--texto-tenue);
}
.charla__aviso[data-tono="aviso"]  { color: var(--ambar-seleccion); }
.charla__aviso[data-tono="alerta"] { color: var(--rojo-alerta); }

.charla__pie {
  margin: var(--e-2) 0 0;
  font-family: var(--fuente-datos);
  font-size: var(--t-menor);
  line-height: 1.4;
  color: var(--texto-apagado);
}

@media (pointer: coarse) {
  .charla__campo, .charla__enviar, .charla__dictar { min-height: 44px; }
  .charla__dictar { min-width: 44px; }
}

/* ==========================================================================
   Menú inferior fijo.

   Nace oculto: solo se dibuja por debajo de 1024 px, y esa regla vive en
   responsive.css. En un escritorio la HUD enseña todo a la vez y esta barra
   solo le quitaría alto.
   ========================================================================== */
.menu-inferior { display: none; }