/* INTERFAZ NUEVA · menú Ajustes y las teclas (diseno/demo/INTERFAZ-NUEVA.md §13).
   Es de AJUSTES Y TECLAS: aquí van SOLO sus estilos. Todas las clases con prefijo ix- (ix-aj-…); 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).
   Las medidas del panel son las de MovilAjustes.html del lienzo: columna de pestañas de 118 px (botones de 32 px, 5 px entre
   ellos), tarjeta con 9 px de margen y filas de 35 px de alto mínimo con 5 px entre ellas. */

/* ---------------------------------------------------------------- el panel: pestañas y la tarjeta con las filas */
.ix-aj-columna { width: 118px; flex: none; min-height: 0; display: flex; flex-direction: column; gap: 9px; }
.ix-aj-pestanas { display: flex; flex-direction: column; gap: 5px; flex: none; }
.ix-aj-pestana.ix-bo.ix-s { position: relative; height: 32px; justify-content: flex-start; padding: 0 12px 3px; font-size: 13px; }
.ix-aj-pestana::before { content: ''; position: absolute; inset: -5px -3px; }      /* la diana del dedo llega hasta la vecina */
/* (el mundo compartido no se para: se dice bajo las pestañas, a la vista con cualquiera de ellas) */
.ix-aj-mundo { flex: none; padding: 0 3px; font-size: 9.5px; line-height: 1.3; color: var(--ix-amarillo); }
.ix-aj-mundo:empty { display: none; }
.ix-aj-tarjeta { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ix-aj-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 9px; overscroll-behavior: contain; }
/* queda más abajo: el final se funde */
.ix-aj-tarjeta.ix-aj-mas > .ix-aj-lista { -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), rgba(0, 0, 0, .2)); mask-image: linear-gradient(#000 calc(100% - 20px), rgba(0, 0, 0, .2)); }
.ix-aj-fila.ix-linea { gap: 10px; min-height: 35px; padding: 3px 9px 3px 11px; border-radius: 11px; }
.ix-aj-textos { flex: 1; min-width: 0; }
.ix-aj-titulo { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-aj-nota { font-size: 9.5px; line-height: 1.2; color: var(--ix-gris); }
.ix-aj-seccion { flex: none; margin: 4px 3px -1px; }
.ix-aj-seccion:first-child { margin-top: 0; }
.ix-aj-entera { flex: none; }
.ix-aj-vacio { margin: auto; font-size: 11px; color: var(--ix-gris); }
.ix-aj-columna button:focus-visible, .ix-aj-lista button:focus-visible { outline: 2px solid var(--ix-amarillo); outline-offset: 2px; }

/* ---------------------------------------------------------------- los controles del kit dentro de una fila: dianas del dedo
   (el dibujo es el del lienzo; lo que recibe el toque crece por arriba y por abajo hasta la fila vecina) */
.ix-aj-fila .ix-sg { overflow: visible; }
.ix-aj-fila .ix-sg button { position: relative; }
.ix-aj-fila .ix-sg button:first-child { border-radius: 8px 0 0 8px; }
.ix-aj-fila .ix-sg button:last-child { border-radius: 0 8px 8px 0; }
.ix-aj-fila .ix-sg button::before { content: ''; position: absolute; inset: -8px 0; }
.ix-aj-fila .ix-sw::before { content: ''; position: absolute; inset: -10px -8px; }
.ix-aj-fila .ix-sw[aria-disabled="true"] { opacity: .55; cursor: default; }
.ix-aj-fila .ix-bo.ix-s { position: relative; }
.ix-aj-fila .ix-bo.ix-s::before { content: ''; position: absolute; inset: -6px -4px; }
/* «Contadores»: pastillas sueltas, cada una se enciende y se apaga sola */
.ix-aj-pastillas { display: flex; gap: 4px; flex: none; }
.ix-aj-pastilla.ix-tag { position: relative; font-size: 11px; padding: 4px 8px 5px; color: var(--ix-gris); pointer-events: auto; }
.ix-aj-pastilla.ix-tag.ix-vd { color: #0f3a08; }
.ix-aj-pastilla::before { content: ''; position: absolute; inset: -9px -2px; }
/* la fila «Cámara»: Arriba | 3D y las pastillas «Seguir» y «Girar» (en 3D se gira siempre: «Girar» queda fija) */
.ix-aj-camara { align-items: center; gap: 6px; }
.ix-aj-pastilla[aria-disabled="true"] { opacity: .6; }

/* ---------------------------------------------------------------- el panel de teclas (PC, pestaña Controles) */
.ix-aj-teclas { display: flex; flex-direction: column; gap: 6px; }
.ix-aj-teclas-cab { position: sticky; top: -9px; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 31px; padding: 3px 7px 3px 11px; border-radius: 11px; border: 2px solid var(--ix-tinta); background: #1c2350; }
.ix-aj-teclas-cab.ix-aj-pide { background: linear-gradient(#5263b8, #36439a); }
.ix-aj-teclas-estado { flex: 1; min-width: 0; font-size: 10px; line-height: 1.25; color: var(--ix-blanco); }
.ix-aj-teclas-acc { display: flex; gap: 6px; flex: none; }
.ix-aj-teclas-cuerpo, .ix-aj-teclas-grupo { display: flex; flex-direction: column; gap: 4px; }
.ix-aj-teclas-cuerpo { gap: 7px; }
.ix-aj-teclas-grupo > .ix-seccion { margin: 0 3px; }
.ix-aj-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.ix-aj-tecla-fila.ix-linea { gap: 6px; min-height: 27px; padding: 2px 6px 2px 9px; border-radius: 9px; min-width: 0; }
.ix-aj-tecla-nombre { flex: 1; min-width: 0; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-aj-tecla-nombre > small { margin-left: 5px; font: 800 9px 'Nunito', sans-serif; color: var(--ix-gris); }
.ix-aj-tecla-codigos { display: flex; gap: 3px; flex: none; }
.ix-aj-teclas .ix-aj-tecla { display: inline-block; min-width: 21px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1.5px solid var(--ix-tinta); background: #fff; color: var(--ix-tinta); box-shadow: 0 1.5px 0 var(--ix-tinta); font-size: 11px; line-height: 17px; text-align: center; white-space: nowrap; }
.ix-aj-teclas button.ix-aj-tecla:hover { background: var(--ix-amarillo); }
.ix-aj-teclas .ix-aj-tecla.ix-aj-tecla-mas { background: #2a3266; color: var(--ix-claro); }
.ix-aj-teclas .ix-aj-tecla.ix-aj-capturando { background: linear-gradient(#fff38a, #ffc21a); color: #3a1c00; animation: ix-aj-late .5s ease-in-out infinite alternate; }
.ix-aj-tecla-nada { font-size: 9px; color: var(--ix-apagado); }
@keyframes ix-aj-late { to { filter: brightness(1.25); } }

/* ---------------------------------------------------------------- «Posición de los botones»: el modo de mover
   (capa «encima», en px del lienzo; solo recibe toques mientras se edita) */
.ix-aj-pos { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
.ix-aj-asas { position: absolute; inset: 0; }
.ix-aj-asa { position: absolute; border: 2px dashed var(--ix-amarillo); border-radius: 14px; background: rgba(255, 225, 74, .13); touch-action: none; cursor: grab; }
.ix-aj-asa.ix-aj-arrastrando { border-style: solid; background: rgba(255, 225, 74, .28); cursor: grabbing; }
.ix-aj-asa-nombre { position: absolute; left: 50%; bottom: calc(100% + 3px); translate: -50% 0; display: none; font-size: 11px; pointer-events: none; }
.ix-aj-asa.ix-aj-arrastrando > .ix-aj-asa-nombre { display: block; }
.ix-aj-pos-barra { display: flex; flex-direction: column; gap: 5px; width: 230px; padding: 9px 11px 11px; z-index: 3000; }
.ix-aj-pos-titulo { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ix-oro); }
.ix-aj-pos-tam { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.ix-aj-pos-tam:empty { display: none; }
.ix-aj-pos-rotulo { flex: 1; font-size: 12px; }
.ix-aj-pos-botones { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
/* mientras se edita se ve todo lo que se puede mover, aunque ahora la regla de «Ocultar botones innecesarios» lo esconda
   (la poción con la vida llena, la Súper sin cargar, lo que aún no se ha desbloqueado) */
.ix.ix-aj-editando .ix-hb[data-ix-colocable] { display: grid !important; }
.ix.ix-aj-editando .ix-pips[data-ix-colocable] { display: flex !important; }