/* INTERFAZ NUEVA · menús Habilidades y Misiones, y el diálogo (diseno/demo/INTERFAZ-NUEVA.md §13.7).
   Es de HABILIDADES, MISIONES Y DIÁLOGO: aquí van SOLO sus estilos. Todas las clases con prefijo ix- (ix-hab / ix-mis / ix-dl-…); 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 salen de diseno/demo/interfaz-lienzo/MovilHabilidades.html, MovilMisiones.html y MovilDialogo.html (los
   estilos en línea de cada elemento); lo que el lienzo no enseña (la tienda, la entrega con piezas a elegir, la misión a
   medias, la charla, las misiones completadas) está hecho con el mismo kit. */

/* La raíz del lienzo hereda los 16 px del navegador: de ahí salen el tamaño de los botones grandes («Aceptar»: el
   «font: inherit» de los botones gana a los 15 px de .bo) y el espaciado entre letras (0,01 em de 16 px = 0,16 px, que se
   hereda como medida fija). La raíz .ix no fija tamaño de letra (hereda el de la página, que cambia con la ventana): se
   fija aquí, en lo mío, para que mida lo mismo que en el lienzo en cualquier pantalla. */
.ix-hab-lista, .ix-hab-ficha, .ix-mis-lista, .ix-mis-ficha, .ix-dl { font-size: 16px; letter-spacing: .16px; }

/* ================================================================ Habilidades */
.ix-hab-lista { width: 316px; flex: none; display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.ix-fila.ix-hab-fila { width: 100%; height: 47px; padding: 0 8px 0 5px; }
.ix-af.ix-hab-ico { width: 37px; height: 37px; }
.ix-af.ix-hab-bloq { filter: grayscale(1) brightness(.6); }
.ix-hab-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ix-hab-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.ix-hab-cerrada .ix-hab-nombre { color: var(--ix-gris); }
/* (una línea; si no cabe —un rasgo de «no-muerto» o de «minotauro» con su «se desbloquea al nivel 5», o con el «¡Nueva!» al lado— pasa a dos, que en la fila de 47 px caben) */
.ix-hab-resumen { font-size: 9.5px; color: var(--ix-gris); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ix-hab-ficha { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.ix-hab-cab { display: flex; align-items: center; gap: 10px; flex: none; }
.ix-af.ix-hab-grande { width: 58px; height: 58px; border-width: 3px; border-radius: 13px; box-shadow: 0 3px 0 var(--ix-tinta); }
.ix-hab-cab-txt { min-width: 0; flex: 1; }
.ix-hab-titulo { font-size: 19px; }
.ix-hab-sub { font-size: 10.5px; color: var(--ix-claro); }
.ix-hab-cerrada-nota { display: flex; align-items: center; gap: 6px; flex: none; align-self: flex-start; }
.ix-hab-desc { font-size: 11.5px; line-height: 1.35; color: var(--ix-blanco); flex: none; }
.ix-hab-datos { display: flex; gap: 6px; flex: none; }
.ix-hab-dato { flex: 1 1 0; min-width: 0; padding: 5px 8px 6px; }
.ix-hab-dato > .ix-n { font-size: 9px; color: var(--ix-gris); white-space: nowrap; }
.ix-hab-dato > b { display: block; font-weight: 400; font-size: 13px; white-space: nowrap; }
.ix-hab-dato > b.ix-hab-largo { font-size: 10.5px; line-height: 1.15; white-space: normal; padding-top: 2px; }
.ix-hab-efecto { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ix-blanco); flex: none; }
.ix-hab-efecto-glifo { display: block; flex: none; width: 22px; height: 22px; }
.ix-hab-efecto-nombre { color: #ff8a70; }
.ix-hab-efecto-nombre.ix-hab-propio { color: var(--ix-verde); }
.ix-hab-detalles { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.ix-hab-det { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; font-size: 10.5px; border-bottom: 1px solid rgba(255, 255, 255, .08); padding-bottom: 2px; }
.ix-hab-detalles.ix-hab-detalles-uno { grid-template-columns: 1fr; }
.ix-hab-det > .ix-n { color: var(--ix-gris); font-size: 10px; white-space: nowrap; }
.ix-hab-det > b { font-weight: 400; font-size: 11.5px; text-align: right; min-width: 0; }
.ix-hab-ayuda { font-size: 10px; line-height: 1.3; color: var(--ix-gris); flex: none; }
.ix-hab-pie { margin-top: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.ix-hab-pie-rotulo { font-size: 12px; }
.ix-hab-tecla { font-size: 10px; color: var(--ix-gris); white-space: nowrap; }
.ix-bo.ix-hab-mover { margin-left: auto; position: relative; }
.ix-bo.ix-hab-apagado { filter: grayscale(.85) brightness(.8); }
.ix-hab-vacia { align-items: center; justify-content: center; font-size: 11.5px; color: var(--ix-gris); }
/* el selector «1 2 3»: el del kit, con la diana del dedo alargada hacia arriba y hacia abajo (44 px) */
.ix-sg.ix-hab-sel { overflow: visible; }
.ix-sg.ix-hab-sel > button { position: relative; }
.ix-sg.ix-hab-sel > button:first-child { border-radius: 8px 0 0 8px; }
.ix-sg.ix-hab-sel > button:last-child { border-radius: 0 8px 8px 0; }
.ix-sg.ix-hab-sel > button::before, .ix-bo.ix-hab-mover::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }

/* ================================================================ Misiones */
.ix-mis-lista { width: 300px; flex: none; display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.ix-mis-seccion { flex: none; font-size: 10px; color: var(--ix-rosa); letter-spacing: .06em; margin-top: 2px; text-transform: uppercase; }
.ix-fila.ix-mis-fila { width: 100%; height: 44px; padding: 0 9px 0 6px; }
.ix-mis-fila.ix-mis-hecha { opacity: .72; }
.ix-mis-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ix-mis-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.ix-mis-quien { font-size: 9.5px; color: var(--ix-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-mis-ficha { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.ix-mis-cab { flex: none; min-width: 0; }
.ix-mis-titulo-fila { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ix-mis-titulo { font-size: 19px; color: var(--ix-amarillo); overflow: hidden; text-overflow: ellipsis; }
.ix-mis-sub { font-size: 10.5px; color: var(--ix-claro); }
.ix-mis-texto { flex: 0 1 auto; min-height: 30px; font-size: 11.5px; line-height: 1.35; color: var(--ix-blanco); }
.ix-mis-texto > p { margin: 0; }
.ix-mis-texto > p + p { margin-top: 5px; }
.ix-mis-objetivos { flex: none; padding: 7px 10px 9px; display: flex; flex-direction: column; gap: 7px; }
.ix-mis-obj { display: flex; flex-direction: column; gap: 5px; }
.ix-mis-obj-cab { display: flex; gap: 8px; font-size: 12.5px; }
.ix-mis-obj-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-mis-obj-n { margin-left: auto; flex: none; color: var(--ix-amarillo); }
.ix-mis-obj-hecho .ix-mis-obj-n { color: var(--ix-verde); }
.ix-mis-donde { font-size: 9.5px; color: var(--ix-gris); }
.ix-mis-volver { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ix-verde); }
.ix-mis-recompensas { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ix-mis-rotulo { font-size: 10px; color: var(--ix-rosa); letter-spacing: .06em; }
.ix-mis-pie { margin-top: auto; flex: none; display: flex; align-items: center; gap: 8px; min-height: 28px; }
.ix-mis-seguir-t { font-size: 12px; cursor: pointer; }
.ix-mis-nota { font-size: 10px; color: var(--ix-gris); min-width: 0; }
.ix-mis-pie-der { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.ix-mis-pie .ix-bo, .ix-mis-pie .ix-sw { position: relative; }
.ix-mis-pie .ix-bo::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.ix-mis-pie .ix-sw::before { content: ''; position: absolute; left: -6px; right: -6px; top: -12px; bottom: -12px; }
.ix-bo.ix-mis-apagado { filter: grayscale(.85) brightness(.8); }
.ix-mis-vacia { align-items: center; justify-content: center; text-align: center; }
.ix-mis-vacia .ix-mis-texto { flex: none; color: var(--ix-gris); }

/* ================================================================ recompensas (las comparten Misiones y el diálogo) */
.ix-tag.ix-dl-chip { display: flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 9px 4px 5px; }
.ix-dl-ico { display: block; flex: none; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--ix-tinta); background: center / cover no-repeat; }
.ix-dl-rotulo { font-size: 10px; color: var(--ix-rosa); letter-spacing: .06em; white-space: nowrap; }

/* ================================================================ el diálogo (capa «dialogo»: px del lienzo de móvil) */
.ix-dl { position: absolute; inset: 0; display: none; }
.ix-dl.ix-on { display: block; }
.ix-dl-velo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(6, 8, 24, 0) 20%, rgba(6, 8, 24, .55) 100%); }
.ix-pc .ix-dl-velo { background: linear-gradient(180deg, rgba(6, 8, 24, 0) 30%, rgba(6, 8, 24, .55) 100%); }
.ix-dl.ix-on > .ix-dl-velo { animation: ix-dl-velo .2s ease both; }
.ix-dl-caja { position: absolute; left: 50%; bottom: calc(12px + var(--ix-sb)); width: min(580px, 100% - 40px); translate: -50% 0; min-height: 202px; max-height: calc(100% - 44px - var(--ix-sb));
  border: 3px solid var(--ix-tinta); border-radius: 20px; background: linear-gradient(180deg, #2f3a72 0%, #20285a 45%, #181d44 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), 0 5px 0 var(--ix-tinta), 0 14px 30px rgba(0, 0, 0, .5);
  padding: 11px 16px 12px; display: flex; flex-direction: column; gap: 7px; }
.ix-dl.ix-on > .ix-dl-caja { animation: ix-dl-entra .18s ease-out both; }
@keyframes ix-dl-entra { from { opacity: 0; translate: -50% 12px; } }
@keyframes ix-dl-velo { from { opacity: 0; } }
.ix-dl-caja.ix-dl-paginas { cursor: pointer; }
.ix-dl-caja[data-modo="charla"] { min-height: 132px; }
/* el retrato redondo, montado sobre la esquina de la caja (en el lienzo: 14 px a la izquierda y 26 px por encima) */
.ix-dl-retrato { position: absolute; left: -17px; top: -29px; width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--ix-tinta); overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 4px 0 var(--ix-tinta); background: radial-gradient(circle at 50% 30%, #ffd9a6, #d98a4e 62%, #8c4a26); pointer-events: none; }
.ix-dl-retrato.ix-dl-retrato-tienda { background: radial-gradient(circle at 50% 30%, #ffe89a, #e0a030 60%, #9a5a10); }
.ix-dl-retrato::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
.ix-dl-retrato > img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.ix-dl-retrato-letra { grid-area: 1 / 1; font-size: 34px; }
.ix-dl-cabeza { flex: none; display: flex; flex-direction: column; gap: 7px; padding-left: 66px; min-height: 45px; }
.ix-dl-cab { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ix-dl-nombre { font-size: 16px; color: var(--ix-amarillo); }
.ix-dl-titulo { font-size: 10.5px; color: var(--ix-claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ix-dl-pagina { margin-left: auto; flex: none; font-size: 10.5px; color: var(--ix-gris); white-space: nowrap; }
.ix-dl-mision { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ix-dl-mision-titulo { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
/* el texto: todas las páginas en la misma celda (la caja mide lo de la más larga y no salta al pasar de una a otra) */
.ix-dl-texto { flex: none; display: grid; font-size: 12px; line-height: 1.38; color: var(--ix-blanco); }
.ix-dl-texto > p { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.ix-dl-texto > p.ix-on { visibility: visible; animation: ix-dl-pagina .2s ease both; }
@keyframes ix-dl-pagina { from { opacity: 0; translate: 8px 0; } }
.ix-dl-objetivos { flex: none; padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.ix-dl-obj { display: flex; flex-direction: column; gap: 4px; }
.ix-dl-obj-cab { display: flex; gap: 8px; font-size: 12px; }
.ix-dl-obj-n { margin-left: auto; flex: none; color: var(--ix-amarillo); }
.ix-dl-obj-hecho .ix-dl-obj-n { color: var(--ix-verde); }
.ix-dl-recompensas, .ix-dl-elige { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* (flex-wrap: nowrap: en una columna que envuelve, la línea mide lo que su contenido y las dos cartas se salían del
   diálogo por la derecha: 80 px en móvil y 118 en PC con las de «La madre del nido») */
.ix-dl-elige.ix-dl-elige-cartas { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; min-width: 0; }
.ix-dl-cartas { display: flex; gap: 6px; min-width: 0; }
.ix-fila.ix-dl-carta { flex: 1 1 0; min-width: 0; min-height: 47px; padding: 3px 8px 4px 5px; }
.ix-af.ix-dl-carta-ico, .ix-af.ix-dl-art-ico { width: 37px; height: 37px; }
.ix-dl-carta-txt, .ix-dl-art-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ix-dl-carta-nombre, .ix-dl-art-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.ix-dl-carta-suma, .ix-dl-art-desc { font-size: 9.5px; color: var(--ix-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* la tienda */
/* (la descripción de un artículo —las bolsas dicen cuántos huecos dan— puede ir en dos líneas: la fila mide 49 px) */
.ix-dl-art-desc, .ix-dl-carta-suma { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; }
.ix-dl-tienda { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
.ix-dl-articulo { flex: none; display: flex; align-items: center; gap: 8px; height: 49px; padding: 0 8px 0 5px; }
.ix-dl-llevas { flex: none; font-size: 10px; color: var(--ix-claro); white-space: nowrap; }
.ix-bo.ix-dl-comprar { position: relative; min-width: 58px; }
.ix-bo.ix-dl-comprar::before { content: ''; position: absolute; left: -4px; right: -4px; top: -10px; bottom: -10px; }
.ix-bo.ix-dl-no { filter: grayscale(.85) brightness(.8); }
.ix-dl-oro { display: flex; align-items: center; gap: 4px; flex: none; height: 24px; padding: 0 10px 1px 4px; }
.ix-dl-oro > .ix-t { font-size: 12px; }
/* el pie: la ayuda a la izquierda y los botones a la derecha */
.ix-dl-pie { margin-top: auto; flex: none; display: flex; align-items: center; gap: 8px; }
.ix-dl-ayuda { font-size: 10px; color: var(--ix-gris); min-width: 0; }
.ix-dl-botones { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; }
.ix-dl-botones > .ix-bo { position: relative; font-size: 16px; }
.ix-dl-botones > .ix-bo::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.ix-bo.ix-dl-si { padding: 0 26px 3px; }
/* (un texto con trazo que se corta con puntos suspensivos: 2 px de aire a los lados para que el recorte no se coma el trazo) */
.ix-hab-nombre, .ix-mis-nombre, .ix-mis-titulo, .ix-dl-carta-nombre, .ix-dl-art-nombre, .ix-dl-mision-titulo { padding: 0 2px; margin: 0 -2px; }