/* INTERFAZ NUEVA · HUD de móvil (opción D) (diseno/demo/INTERFAZ-NUEVA.md §13).
   Es de HUD DE MÓVIL: aquí van SOLO sus estilos. Todas las clases con prefijo ix- (ix-m-…); medidas en px del lienzo, como en
   css/interfaz.css (el kit, de BASE: no se toca; lo que falte en él se pide en el informe).
   Pantallas del lienzo: Main.html (explorando), MovilCombate.html (en combate) y MovilTodo.html (interruptor apagado): las
   posiciones y las medidas son las de sus style. Las piezas, en client/js/demo/interfaz/hud/movil/ (una por fichero). */

/* ---------------------------------------------------------------- lo que se oculta se funde EN SU SITIO (nada se recoloca) */
.ix-m-f { transition: opacity .18s ease, visibility 0s linear 0s; }
.ix-m-f.ix-m-fuera { opacity: 0 !important; visibility: hidden; pointer-events: none !important; transition: opacity .18s ease, visibility 0s linear .18s; }

/* ---------------------------------------------------------------- retrato con el anillo de PX y el nivel (10, 8) */
.ix-m-retrato-caja { position: relative; width: 54px; height: 54px; }
.ix-movil .ix-m-retrato { display: block; width: 54px; height: 54px; border-radius: 50%; border: 2.5px solid var(--ix-tinta); padding: 3.5px; pointer-events: auto; touch-action: manipulation;
  background: conic-gradient(#e9c2ff 0, #a35cff calc(var(--ix-m-px, 0) * 100%), rgba(10, 12, 32, .85) calc(var(--ix-m-px, 0) * 100%));
  box-shadow: 0 3px 0 var(--ix-tinta), 0 5px 8px rgba(0, 0, 0, .3); transition: transform .08s; }
.ix-movil .ix-m-retrato.pulsado { transform: scale(.94); }
.ix-m-retrato-nv { position: absolute; left: 33px; top: 33px; pointer-events: none; }
/* la cara de un retrato redondo: tu busto, el de un PNJ, la cabeza de un bicho (pintado) o la inicial de otro jugador */
.ix-m-cara { position: relative; display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ix-tinta); overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #f1ead9, #c2b79f 60%, #7d7361); }
.ix-m-inicial { position: relative; font-size: 19px; line-height: 1; }

/* ---------------------------------------------------------------- tu vida y tu recurso (72, 13) y tus estados */
.ix-m-vida { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ix-m-barras { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* el rastro del golpe: detrás del relleno, llega un momento después */
.ix-m-barra-vida > s { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; background: linear-gradient(180deg, #fff, #ffe7a8); opacity: .85; transition: transform .45s ease-in .25s; }
.ix-m-barra-vida.ix-m-baja > i { --f1: #ffd08a; --f2: #ff9a2e; --f3: #e0600c; }
.ix-m-barra-vida.ix-m-critica > i { --f1: #ffa98f; --f2: #ff4f38; --f3: #d0231a; animation: ix-m-late .6s ease-in-out infinite alternate; }
@keyframes ix-m-late { to { filter: brightness(1.5); } }
/* estados: icono con sus segundos o sus acumulaciones (como el del marco del objetivo del lienzo) */
.ix-m-estados { display: flex; align-items: center; gap: 8px; }
.ix-m-estados:empty { display: none; }
.ix-m-estado { position: relative; display: block; flex: none; }
.ix-m-estado-n { position: absolute; right: -4px; bottom: -5px; font-size: 9px; line-height: 1.2; }
.ix-m-estado-n:empty { display: none; }
.ix-m-vida .ix-m-malo > .ix-m-estado-n { color: var(--ix-rojo); }

/* ---------------------------------------------------------------- misiones seguidas (12, 70) */
.ix-m-misiones { display: flex; gap: 6px; }
.ix-movil .ix-m-mis { position: relative; height: 28px; padding: 0 10px 1px 5px; display: flex; align-items: center; gap: 6px; pointer-events: auto; touch-action: manipulation; transition: opacity .18s; }
.ix-m-mis::before, .ix-m-mis-mas::before { content: ''; position: absolute; inset: -9px -3px; }      /* la diana del dedo: 44 px de alto */
.ix-m-mis.pulsado, .ix-m-mis-mas.pulsado { filter: brightness(1.25); }
.ix-m-mis-txt { font-size: 12px; max-width: 196px; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; margin: 0 -2px; }
.ix-m-mis-cnt { font-size: 12px; color: var(--ix-amarillo); }
.ix-m-mis.ix-m-completa .ix-m-mis-txt { color: var(--ix-amarillo); }
.ix-movil .ix-m-mis.ix-m-apagada { opacity: .85; }
.ix-movil .ix-m-mis-mas { position: relative; height: 28px; padding: 0 9px 1px; font-size: 12px; color: var(--ix-claro); pointer-events: auto; touch-action: manipulation; }

/* ---------------------------------------------------------------- marco del objetivo (cápsula de 252, arriba en el centro) */
/* (252 px, como en el lienzo, que enseña un solo estado; con dos o tres —veneno, lento y sangrado a la vez— crece hasta
   312 sobre su mismo centro en vez de dejar el nombre en «Escorpión …») */
.ix-m-objetivo { width: max-content; min-width: 252px; max-width: 312px; padding: 4px 12px 5px 5px; display: flex; align-items: center; gap: 8px; }
.ix-m-obj-cara { width: 36px; height: 36px; background: radial-gradient(circle at 50% 30%, #ffe89a, #e0a030 60%, #9a5a10); }
.ix-m-obj-cara .ix-m-inicial { font-size: 17px; }
.ix-m-obj-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ix-m-obj-cab { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ix-m-obj-nombre { font-size: 13px; color: var(--ix-rojo); min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; margin: 0 -2px; }
.ix-m-obj-elite { flex: none; font-size: 10px; color: var(--ix-oro); }
.ix-m-obj-titulo { font-size: 9.5px; line-height: 1.25; color: var(--ix-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-m-obj-estados { flex: none; gap: 10px; }
.ix-m-obj-estados .ix-m-estado-n { right: -5px; bottom: -6px; font-size: 10px; }
/* lo que el lienzo no enseña, con el criterio de la interfaz clásica */
.ix-m-objetivo.ix-m-elite { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 3px 0 rgba(10, 10, 28, .9), 0 0 0 2px #ffcc2e; }
.ix-m-objetivo.ix-m-elite .ix-nv { background: linear-gradient(#fff4a0, #ffc21a 50%, #d07a00); }
.ix-m-objetivo.ix-m-pnj .ix-m-obj-nombre { color: var(--ix-verde); }
.ix-m-objetivo.ix-m-pnj .ix-m-obj-cara { background: radial-gradient(circle at 50% 30%, #f1ead9, #c2b79f 60%, #7d7361); }
.ix-m-objetivo.ix-m-jugador .ix-m-obj-nombre { color: var(--ix-azul); }
.ix-m-objetivo.ix-m-jugador .ix-bar { --f1: #b8ecff; --f2: #45b6ff; --f3: #1f7fe8; }
.ix-m-objetivo.ix-m-jugador .ix-nv { background: linear-gradient(#b0e6ff, #3f9dff 50%, #1c4fa8); }
.ix-m-objetivo.ix-m-ajeno .ix-m-obj-nombre, .ix-m-objetivo.ix-m-caido .ix-m-obj-nombre { color: #c9cedc; }
.ix-m-objetivo.ix-m-ajeno .ix-bar, .ix-m-objetivo.ix-m-caido .ix-bar { --f1: #eef0f6; --f2: #aab2c9; --f3: #6d7594; }
.ix-m-objetivo.ix-m-ajeno .ix-nv, .ix-m-objetivo.ix-m-ajeno .ix-m-obj-cara, .ix-m-objetivo.ix-m-caido .ix-nv, .ix-m-objetivo.ix-m-caido .ix-m-obj-cara { filter: grayscale(1); }

/* ---------------------------------------------------------------- botón de chat (641, 10) y botón de menú (693, 10) */
.ix-m-chat-boton { width: 46px; height: 46px; }
.ix-movil .ix-hb.ix-m-on { --h1: #fff38a; --h2: #ffd81f; --h3: #ffb800; --h4: #d98200; }
.ix-movil .ix-hb.ix-m-sinred > .ix-gi { filter: grayscale(.9) brightness(.75); }

/* ---------------------------------------------------------------- minimapa (748, 10), hora y lugar (los contadores se fueron: el piloto de estado, css/interfaz.css) */
.ix-m-mm-caja { position: relative; width: 84px; height: 84px; }
.ix-m-mm { position: relative; width: 84px; height: 84px; border-radius: 20px; border: 3px solid var(--ix-tinta); overflow: hidden; background: #7a2e2e; touch-action: manipulation;
  box-shadow: 0 3px 0 var(--ix-tinta), 0 6px 10px rgba(0, 0, 0, .35); }
.ix-m-mm.pulsado { filter: brightness(1.15); }
.ix-m-mm-lienzo { display: block; width: 100%; height: 100%; }
.ix-m-mm-brillo { position: absolute; inset: 0; border-radius: 17px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); pointer-events: none; }
.ix-m-mm-hora { position: absolute; left: 45px; top: 63px; font-size: 10px; pointer-events: none; }
.ix-m-lugar { padding: 1px 10px 3px; font-size: 10.5px; color: var(--ix-rosa); }
.ix-m-lugar.ix-m-refugio { color: #fff; }

/* ---------------------------------------------------------------- botonera: cada botón en su caja, que no se mueve */
/* (lo de arriba —retrato, chat, menú y minimapa— va por encima de la botonera: aunque un botón agrandado o movido por
   el jugador llegue hasta ahí, el menú se sigue viendo y tocando entero) */
.ix-movil [data-ix-pieza="m-retrato"], .ix-movil [data-ix-pieza="m-chat-boton"], .ix-movil [data-ix-pieza="m-menu"], .ix-movil [data-ix-pieza="m-minimapa"] { z-index: 4; }
/* (la zona segura de abajo —el indicador del iPhone, 21 px— solo cuenta en lo que pase de 20 px: el lienzo ya deja 26 px
   o más bajo los botones, y subirlos todos metía el rasgo debajo del nombre del lugar) */
.ix-m-botonera { position: absolute; inset: 0; pointer-events: none; --ix-sb: max(0px, calc(var(--sa-b, 0px) / var(--ix-k, 1) - 20px)); }
.ix-m-b { display: grid; place-items: center; pointer-events: none; transition: visibility 0s linear 0s; }
.ix-m-b > .ix-hb, .ix-m-b > .ix-m-super, .ix-m-b > .ix-m-accion { transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), opacity .16s ease, width .18s ease, height .18s ease; }
/* oculto: lo de dentro se encoge y se funde sobre su mismo centro */
.ix-m-b.ix-m-fuera { visibility: hidden; transition: visibility 0s linear .16s; }
.ix-m-b.ix-m-fuera > * { opacity: 0 !important; transform: scale(.5); pointer-events: none !important; }
/* recogida (fuera de combate): 40 px en vez de 60 (el rasgo, 32 en vez de 48), apagada, en su mismo centro; se sigue
   pudiendo tocar en todo su hueco */
.ix-m-b.ix-m-recogido > .ix-hb { width: 40px !important; height: 40px !important; opacity: .62; }
.ix-m-b.ix-m-recogido > .ix-hb::before { content: ''; position: absolute; inset: -13px; border-radius: 50%; }
.ix-m-b.ix-m-recogido[data-ix-m="racial"] > .ix-hb { width: 32px !important; height: 32px !important; }
.ix-m-b.ix-m-recogido[data-ix-m="racial"] > .ix-hb::before { inset: -11px; }
.ix-m-b.ix-m-recogido .ix-cd > .ix-t { font-size: 15px !important; }
.ix-m-b.ix-m-recogido[data-ix-m="racial"] .ix-cd > .ix-t { font-size: 12px !important; }
.ix-m-b.ix-m-recogido .ix-hb-candado > .ix-gi { scale: .68; }
/* munición del ataque: centrada debajo de él (el ataque mide 90 px: 12 px a la derecha de su borde y 8 por debajo) */
.ix-m-pips { position: absolute; left: 12px; top: 98px; }
/* la carrera automática (a la izquierda del ataque, en la fila de abajo): se toca y se pone o se quita. Lista, tenue como
   el joystick en reposo; puesta, azul y con las flechas latiendo; el anillo es la espera del sprint (control/sprint.js) */
.ix-m-b[data-ix-m="sprint"]::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; opacity: 0; transition: opacity .15s;
  background: conic-gradient(#ffc93a calc(var(--ix-m-espera, 0) * 100%), rgba(10, 12, 32, .5) 0); }
.ix-m-b[data-ix-m="sprint"]:has(> [data-estado="espera"])::before { opacity: 1; }
.ix-movil .ix-m-sprint { opacity: .6; touch-action: none; }
.ix-movil .ix-m-sprint > svg { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); pointer-events: none; }
.ix-movil .ix-m-sprint[data-estado="espera"], .ix-movil .ix-m-sprint[data-sprint="1"] { opacity: .85; }
.ix-movil .ix-m-sprint[data-estado="fijo"] { opacity: 1; }
/* (las flechas laten solo cuando de verdad ESPRINTA: en combate o en el agua la carrera automática sigue puesta —azul— pero
   el personaje anda a su paso, y antes parecía que corría) */
.ix-m-sprint[data-sprint="1"] .ix-m-sp-f { animation: ix-m-corre .7s linear infinite; }
.ix-m-sprint .ix-m-sp-f:last-child { animation-delay: -.35s; }
@keyframes ix-m-corre { 0% { opacity: .35; } 50% { opacity: 1; } 100% { opacity: .35; } }
.ix-m-editando .ix-m-sprint { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ix-m-sprint .ix-m-sp-f { animation: none !important; } }
/* sin munición o sin recurso: el dibujo, apagado */
.ix-movil .ix-hb.ix-m-sin > .ix-af { filter: grayscale(.7) brightness(.7); }
/* habilidad recién desbloqueada y aún sin usar */
.ix-movil .ix-hb.ix-m-nueva::after, .ix-m-super.ix-m-nueva::after { content: '¡NUEVA!'; position: absolute; z-index: 5; top: -13px; left: 50%; translate: -50% 0; rotate: -5deg; font-size: 10px; line-height: 1; padding: 2px 6px 3px; border-radius: 8px;
  border: 2px solid var(--ix-tinta); background: linear-gradient(#fff38a, #ffb800); color: #fff; -webkit-text-stroke: .18em var(--ix-tinta); paint-order: stroke fill; white-space: nowrap; pointer-events: none; animation: ix-m-nueva 1s ease-in-out infinite alternate; }
/* (la Súper lleva arriba su rótulo y debajo la carrera automática: su «¡NUEVA!» va a su izquierda) */
.ix-m-super.ix-m-nueva::after { top: 50%; left: 0; translate: -62% -50%; rotate: -8deg; }
@keyframes ix-m-nueva { to { scale: 1.12; } }
/* poción: el halo verde cuando te falta vida y ya puedes beberla */
.ix-movil .ix-hb.ix-m-halo { box-shadow: inset 0 -4px 0 var(--h4), inset 0 3px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--ix-tinta), 0 0 0 4px rgba(125, 255, 90, .65), 0 0 14px 5px rgba(125, 255, 90, .45); }
/* salto: gris si ahora no se puede (sin bloquear: decide la lógica); en el aire, su anillo */
.ix-movil .ix-hb.ix-m-nopuede > .ix-gi { filter: grayscale(1) brightness(.8); opacity: .7; }
.ix-movil .ix-hb.ix-m-enaire { box-shadow: inset 0 -4px 0 var(--h4), inset 0 3px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--ix-tinta), 0 0 0 3px rgba(141, 255, 216, .45); }
/* la Súper (72 px): el anillo es su carga; lista, dorado a rayas con su resplandor */
.ix-movil .ix-m-super { position: relative; display: block; width: 72px; height: 72px; flex: none; border-radius: 50%; border: 3px solid var(--ix-tinta); padding: 6px; pointer-events: auto; touch-action: none;
  background: conic-gradient(#ffe14a 0, #ffb400 calc(var(--ix-m-carga, 0) * 100%), rgba(10, 12, 32, .82) calc(var(--ix-m-carga, 0) * 100%));
  box-shadow: 0 3px 0 var(--ix-tinta), 0 5px 8px rgba(0, 0, 0, .3); }
.ix-movil .ix-m-super.ix-m-lista { background: conic-gradient(#fff38a, #ffc21a, #fff38a, #ffc21a, #fff38a); box-shadow: 0 3px 0 var(--ix-tinta), 0 0 0 5px rgba(255, 214, 40, .4), 0 0 18px 6px rgba(255, 200, 30, .6); }
.ix-movil .ix-m-super.ix-bloqueado { background: rgba(10, 12, 32, .82); }
.ix-m-super-dentro { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--ix-tinta); pointer-events: none; }
.ix-m-super:not(.ix-m-lista) .ix-af { filter: grayscale(.9) brightness(.6); }
.ix-m-super.ix-bloqueado .ix-af { filter: grayscale(1) brightness(.45); }
.ix-m-super:not(.ix-bloqueado) > .ix-hb-candado, .ix-m-super:not(.ix-bloqueado) > .ix-etb, .ix-m-super.ix-bloqueado > .ix-et { display: none; }
.ix-m-super.pulsado { transform: scale(.93); }
.ix-movil .ix-m-super.apuntando { box-shadow: 0 3px 0 var(--ix-tinta), 0 0 0 5px rgba(255, 255, 255, .5); }
.ix-movil .ix-m-super.cancelar { box-shadow: 0 3px 0 var(--ix-tinta), 0 0 0 5px rgba(255, 60, 40, .75); }
/* el contextual (Hablar, Comprar, Recoger): una píldora amarilla, a la izquierda de la Súper */
.ix-movil .ix-m-accion { position: relative; height: 40px; border-radius: 20px; padding: 0 16px 3px 8px; gap: 6px; touch-action: none; }
.ix-m-accion::before { content: ''; position: absolute; inset: -5px -4px; border-radius: 26px; }      /* la diana del dedo */
.ix-m-acc-ico { display: block; flex: none; width: 26px; height: 26px; }
.ix-m-acc-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.ix-m-acc-t { font-size: 15px; }
.ix-m-acc-n { max-width: 124px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; font-size: 9px; line-height: 1.1; color: #5a2c00; -webkit-text-stroke: 0; text-shadow: none; }

/* ---------------------------------------------------------------- «Posición de los botones»: el modo de edición */
.ix-m-editando .ix-m-b { pointer-events: auto; touch-action: none; cursor: grab; border-radius: 50%; outline: 2px dashed rgba(255, 225, 74, .95); outline-offset: 3px; }
.ix-m-editando .ix-m-b[data-ix-m="accion"] { border-radius: 22px; }
.ix-m-editando .ix-m-b > * { pointer-events: none !important; }
.ix-m-editando .ix-m-b.ix-m-arrastra { z-index: 5; cursor: grabbing; outline-style: solid; outline-color: #fff; }
/* su tarjeta, arriba en el centro (entre tu vida y los botones de arriba): título y «Hecho»; tamaño y «Restablecer» */
.ix-m-edita { display: flex; flex-direction: column; gap: 5px; width: 292px; padding: 6px 8px 7px 10px; border-radius: 14px; white-space: nowrap; pointer-events: auto; z-index: 30; }
.ix-m-edita-fila { display: flex; align-items: center; gap: 8px; }
.ix-m-edita-titulo { flex: 1; font-size: 13px; }
.ix-m-edita-rotulo { flex: none; font-size: 10.5px; color: var(--ix-claro); }
.ix-m-edita-fila > .ix-des { flex: 1; }
/* (mientras se colocan los botones, el marco del objetivo no se ve: la tarjeta va en su sitio) */
.ix-m-editando .ix-m-objetivo { visibility: hidden !important; }

/* ---------------------------------------------------------------- chat: la caja abierta (arriba: el teclado tapa la mitad de abajo) */
.ix-m-chat { position: absolute; z-index: 20; left: calc(232px + var(--ix-sl)); right: calc(209px + var(--ix-sr)); top: calc(8px + var(--ix-st) + var(--ix-vivo));
  display: flex; flex-direction: column; gap: 5px; padding: 6px; border-radius: 14px; pointer-events: auto; animation: ix-m-entra .2s ease both; }
@keyframes ix-m-entra { from { opacity: 0; translate: 0 -8px; } }
.ix-m-chat-fila { display: flex; align-items: center; gap: 5px; }
.ix-m-campo { flex: 1; min-width: 0; height: 34px; margin: 0; padding: 0 10px; border: 2.5px solid var(--ix-tinta); border-radius: 10px; font: 800 14px 'Nunito', sans-serif; color: #1d2447;
  background: linear-gradient(#fff, #e8eefc); box-shadow: inset 0 3px 3px rgba(0, 0, 0, .12); outline: none; pointer-events: auto; user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.ix-m-campo:focus { box-shadow: inset 0 3px 3px rgba(0, 0, 0, .12), 0 0 0 3px var(--ix-amarillo); }
.ix-m-campo::placeholder { color: #8a92b0; }
.ix-m-chat-fila > .ix-bo { height: 34px; }
.ix-m-chat-aviso { padding: 0 4px; font: 800 10.5px/1.2 'Nunito', sans-serif; color: #ffb3a8; }
.ix-m-chat-aviso:empty { display: none; }
/* (pestañas y gestos, en una fila; si no caben —con muesca a los lados la caja es más estrecha— los gestos bajan a otra) */
.ix-m-chat-medio { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 8px; }
.ix-m-chat-tabs { margin-top: 6px; }
.ix-m-chat-tabs > button { padding: 6px 11px 7px; }
.ix-m-chat-tabs > button[data-prueba="pestana-grupo"].ix-on { background: linear-gradient(#b6ff8a, #3bb81c); color: #0f3a08; }
/* gestos: saludar, reír, bailar, victoria */
.ix-m-gestos { display: flex; gap: 10px; margin-left: auto; padding-right: 2px; }
.ix-m-gesto { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 44px; }
.ix-m-gesto > .ix-t { font-size: 9px; }
.ix-m-gesto > .ix-hb { --h1: #fff6c0; --h2: #ffd21f; --h3: #e0a000; --h4: #b86a00; touch-action: manipulation; }
.ix-m-gesto > .ix-hb::before { content: ''; position: absolute; inset: -6px -6px -15px; }               /* la diana del dedo */
.ix-m-historial { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-height: min(86px, var(--ix-m-libre, 86px)); padding-right: 2px; }
/* una línea del chat (en la caja y en el registro plegado) */
.ix-m-linea { flex: none; max-width: 100%; padding: 1px 8px 2px 6px; border-radius: 9px; background: rgba(8, 12, 34, .45); font: 800 10.5px/1.3 'Nunito', sans-serif; color: #fff; overflow-wrap: anywhere; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.ix-m-quien { font: 400 11px 'Lilita One', sans-serif; -webkit-text-stroke: .16em var(--ix-tinta); paint-order: stroke fill; text-shadow: none; }
.ix-m-tu { font-size: .85em; color: var(--ix-amarillo); }
.ix-m-linea.ix-m-propia { box-shadow: inset 3px 0 0 var(--ix-amarillo); }
.ix-m-linea.ix-m-sis { color: #dfe4f2; }
.ix-m-linea.ix-m-grupo { box-shadow: inset 3px 0 0 #5ee02c; }
.ix-m-linea.ix-m-grupo .ix-m-txt { color: #d4ffc4; }
.ix-m-linea[data-tipo="malo"] { color: #ffb3a8; }
.ix-m-linea[data-tipo="mundo"] { color: var(--ix-amarillo); }
.ix-m-marca-grupo { font: 400 10px 'Lilita One', sans-serif; color: var(--ix-verde); }
.ix-m-hora { margin-right: 5px; font: 800 8.5px 'Nunito', sans-serif; color: #9aa2bd; text-shadow: none; }
.ix-m-linea.ix-m-vacia { color: var(--ix-gris); background: none; }
/* el registro plegado: las 2 últimas líneas, abajo; se apaga solo */
.ix-movil .ix-zona-sobre-botones { left: calc(50% - 112px); }      /* (a la izquierda del botón contextual, que va junto a la Súper) */
.ix-m-registro { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 250px; pointer-events: none; transition: opacity .25s; }
.ix-m-registro:empty { display: none; }
.ix-m-registro.ix-m-apagado { opacity: 0; transition: opacity 1.6s; }
.ix-m-registro > .ix-m-linea { background: rgba(8, 12, 34, .72); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------- vecinos (INTERFAZ-NUEVA.md §5.8): lo que otros equipos cuelgan de #ui, fuera de .ix
   · El botón de la CÁMARA ya no va en el HUD (Iván, 2026-10-01: css/demo.css lo esconde en las dos interfaces): la vista,
     «Seguir» y «Girar» se eligen en Ajustes; los gestos y las teclas siguen igual. Aquí no hay nada que colocarle.
   · El botón de la CARRERA AUTOMÁTICA ya es una pieza de la botonera (hud/movil/botonera.js, con el kit): principal.js monta
     control/sprint.js sin botón (boton: false) y le da el control a la interfaz (I.srv.sprint). Por si alguien lo montara
     con el suyo, css/interfaz.css §vecinos lo esconde. */