/* ============================================================
   REPLIKA — AVATAR STUDIO (in-shell)
   El creador vive dentro del área de contenido; el sidebar y el
   topbar de la plataforma permanecen visibles. Prefijo .avs-.
   Solo tokens de tokens.css · dark-first + light · móvil OK.
   ============================================================ */

/* La vista Avatar está topada a 760px para la biblioteca; cuando el creador o
   el editor están activos soltamos ese tope para trabajar edge-to-edge dentro
   del área de contenido (el shell ya aporta su propio marco lateral). */
.avatar-view:has(> #avCreator:not([hidden])),
.avatar-view:has(> #avEditor:not([hidden])) {
  max-width: none;
  padding-bottom: 0;
}

/* Contenedor del creador (hijo de #avatarView) — WORKSPACE: llena el ancho y
   el alto del área de contenido y hace scroll INTERNO por paso. */
.avs-creator {
  --avs-gut: clamp(12px, 1.6vw, 26px);   /* respiro lateral del contenido */
  /* Aire por debajo del paso: es donde vive el chat flotante de la esquina. */
  --avs-reserve: 66px;
  width: 100%;
  max-width: none;
  height: calc(100dvh - var(--topbar-h) - var(--avs-reserve));
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.avs-creator[hidden] { display: none; }

/* Sube hasta la barra superior cancelando el padding de .content, igual que
   hace #avLib con el banner. Asi la barra de pasos ABRE la seccion —pegada al
   topbar, como en el Cover Art— en vez de flotar 65px mas abajo.
   Va por #avCreator y no por la clase porque el editor (#avEditor) comparte
   .avs-creator y NO es un flujo por pasos, sino una ficha centrada. */
#avCreator { margin-top: calc(-1 * var(--content-pad-t, 40px)); }
/* el editor conserva el aire de siempre bajo la tarjeta */
#avEditor { --avs-reserve: 130px; }

/* La vista Avatar llega centrada verticalmente (.is-centered). Con el creador
   abierto eso repartia el sobrante arriba y abajo y despegaba la barra del
   topbar: aqui el contenido arranca arriba y el sobrante queda abajo. */
.content:has(#avCreator:not([hidden])) { justify-content: flex-start; }

/* ---- La BARRA: volver · pasos · guardado, en una sola linea ----
   Rejilla de 1fr auto 1fr para que los pasos queden centrados de verdad, sin
   depender de lo que midan el boton de volver o el indicador de guardado. */
.avs-creator-head {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: 0;
  border-bottom: 1px solid var(--border-subtle);
}
/* La franja va A SANGRE: rompe el padding lateral de .content y lo devuelve
   como padding propio, de modo que el fondo y la linea llegan a los dos bordes
   del area de contenido pero el contenido sigue alineado con el resto. Es el
   mismo montaje que `.cover-view > .cvw`. (Solo en el creador: la ficha del
   editor usa esta misma clase pero es una tarjeta centrada de 980px.) */
#avCreator > .avs-creator-head {
  margin-inline: calc(-1 * var(--content-pad-x, 36px));
  padding-inline: var(--content-pad-x, 36px);
  background: var(--bg-subtle);
}
/* Volver y Guardado se centran en el alto de la barra; las pestanas se apoyan
   en la linea de abajo, que es donde tiene que estar su subrayado. */
.avs-creator-head > .avs-back { justify-self: start; }
.avs-creator-head > .avs-save { justify-self: end; }
/* Mas bajo que el .avs-back general (36px): en una barra de 44 dejaba 4px por
   arriba y por abajo y se leia pegado a las lineas divisorias. Con 28 quedan 8. */
.avs-creator-head > .avs-back { height: 28px; padding: 0 var(--space-3) 0 var(--space-2); }
.avs-creator-head > .avs-back svg { width: 14px; height: 14px; }
.avs-creator-spacer { display: none; }

.avs-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4) 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-snug);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft);
}
.avs-back:hover { background: var(--surface-hover); border-color: var(--border); color: var(--text); }
.avs-back svg { width: 16px; height: 16px; }

.avs-save {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-faint);
}
.avs-save-dot {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--text-faint);
  transition: background var(--dur-fast) var(--ease-out-soft);
}
.avs-save.is-saved .avs-save-dot { background: var(--success); }
.avs-save.is-saving .avs-save-dot { background: var(--warning); }

/* ---- Layout: barra de pasos ARRIBA + etapa debajo ----
   Mismo montaje que el Cover Art Creator: la barra abre la seccion y el
   contenido ocupa todo el ancho. Antes era un riel vertical de 176px a la
   izquierda que se comia ancho en todos los pasos. */
.avs-creator-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---- Barra de progreso (HORIZONTAL · pestanas, como en Cover Art) ---- */
.avs-progress {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 4px;
  width: auto;
  padding: 0;
  margin-bottom: 0;
  /* la linea inferior la pone la barra (.avs-creator-head), no cada pieza */
  /* si no caben, se desplazan en horizontal sin barra a la vista */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.avs-progress::-webkit-scrollbar { display: none; }
/* cada paso = ítem de menú */
.avs-step {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  width: auto;
  padding: 8px 13px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  /* -1px para que el subrayado del activo se apoye en la linea de la barra */
  margin-bottom: -1px;
  border-radius: 0;
  background: transparent;
  cursor: default;
  text-align: left;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out-soft);
}
/* paso ACTUAL = pestana subrayada (la tarjeta rellena era del riel vertical) */
.avs-step.is-current {
  background: transparent;
  border-bottom-color: var(--text);
}
/* pasos aún bloqueados (no alcanzables ni actuales) se ven apagados */
.avs-step:not(.is-current):not(.is-done) { opacity: .5; }
/* conectores fuera en este diseño */
.avs-step-sep { display: none; }
.avs-step-num { display: none; }
.avs-step-dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-faint);
  transition: background var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-cine);
}
.avs-step-dot svg { width: 13px; height: 13px; }
.avs-step-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.avs-step.is-reachable:hover .avs-step-dot { border-color: var(--border-strong); color: var(--text-secondary); }
.avs-step.is-reachable:hover .avs-step-label { color: var(--text-secondary); }

/* paso actual (clase directa en el dot) */
.avs-step-dot.dot-current {
  border-color: var(--accent-bg);
  background: var(--accent-bg);
  color: var(--accent-fg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-bg) 16%, transparent);
}
.avs-step.is-current .avs-step-label { color: var(--text); font-weight: 600; }

/* paso completado — check verde (clase directa en el dot) */
.avs-step-dot.dot-done {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}
.avs-step.is-done .avs-step-label { color: var(--text-secondary); }

/* conector VERTICAL: línea bajo el centro del dot (dot 34 → centro 17) */
.avs-step-sep {
  flex: none;
  width: 2px; height: 20px;
  margin: 4px 0 4px 16px;
  border-radius: 2px;
  background: var(--border);
  transition: background var(--dur-base) var(--ease-out-soft);
}
.avs-step-sep.is-active { background: var(--success); }

/* ---- Etapa (contenido del paso actual) — llena y hace scroll interno ----
   Sin centrado vertical: el paso se ancla arriba y llena el alto; su barra de
   acción queda pegada al borde inferior. Sin padding lateral: los gutters viven
   en el contenido de cada paso para que la barra pueda ir full-bleed. */
.avs-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;           /* PRINCIPIO: nunca hay scroll — cada paso cabe */
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0 0;
}
/* Sin animación de entrada por paso: el contenido aparece sin salto ni parpadeo. */
/* Todo paso llena el ancho del workspace; los gutters laterales van aquí para
   que las barras de acción puedan sangrar hasta el borde. En móvil el flujo es
   natural (ver media query final). */
.avs-stage > * {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--avs-gut);
}
@media (min-width: 641px) {
  /* En escritorio cada paso ocupa TODO el alto disponible y ancla su barra. */
  .avs-stage > * {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* La barra de acción queda pegada al borde inferior aunque el paso tenga que
     scrollear: sticky bottom con el fondo del app para taparlo. */
  .avs-foot {
    position: sticky;
    bottom: 0;
    background: var(--bg);
  }
}
.avs-h1 {
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0;
}
.avs-typechip {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-snug);
  color: var(--text-secondary);
  padding: 6px var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--surface);
}
.avs-note {
  margin: var(--space-5) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-snug);
  color: var(--text-faint);
}

/* ---- Botón primario (Continuar) ---- */
.avs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 42px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--fs-body-s);
  font-weight: 550;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-cine);
}
.avs-btn--primary { background: var(--accent-bg); color: var(--accent-fg); }
.avs-btn--primary:hover:not(:disabled) { opacity: .85; transform: translateY(-1px); }
/* botón VERDE (igual que los marcadores/checks) */
.avs-btn--success { background: var(--success); color: #04140c; font-weight: 650; }
.avs-btn--success:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.avs-btn--primary:disabled { opacity: .4; cursor: not-allowed; }

/* ---- PASO: Fotos ---- */
.avs-fotos { width: 100%; }
.avs-name {
  width: 100%; height: 44px; padding: 0 var(--space-4);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-body);
}
.avs-name:focus { outline: none; border-color: var(--border-strong); }
.avs-name::placeholder { color: var(--text-faint); }
.avs-hint {
  margin: var(--space-3) 0 var(--space-5);
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: var(--tracking-snug); color: var(--text-faint);
}
.avs-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.avs-slot { position: relative; display: flex; flex-direction: column; gap: var(--space-2); cursor: pointer; }
.avs-slot-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.avs-slot-media {
  /* 4:5. Se probo 9:16 y empaqueta mal: con ocho ranuras y dos filas la foto
     no puede pasar de la mitad del alto, y al ser tan estrecha salia diminuta.
     En 4:5 cabe lo mismo con casi el doble de superficie. */
  position: relative; aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out-soft),
              background var(--dur-fast) var(--ease-out-soft);
}
.avs-slot:hover .avs-slot-media { border-color: var(--border-strong); background: var(--surface-hover); }
.avs-slot.has .avs-slot-media { border-style: solid; }
.avs-slot.err .avs-slot-media { border-style: solid; border-color: var(--error); }
/* la foto se centra automáticamente en la ranura (cover + centro) */
.avs-slot-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---- Foto de EJEMPLO en la ranura vacía ----
   Muestra el encuadre que se espera. Va atenuada y con etiqueta para que no
   se confunda con una foto ya cargada; al pasar el ratón sube un poco. */
.avs-slot-ref {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Los archivos ya vienen montados a 3:4 (la foto 9:16 completa sobre su
     propio fondo extendido), así que llenan la ranura sin bandas ni recorte. */
  object-fit: cover; object-position: center;
  opacity: 0.38;
  transition: opacity var(--dur-fast) var(--ease-out-soft);
  pointer-events: none;
}
.avs-slot:hover .avs-slot-ref { opacity: 0.62; }
.avs-slot.is-drop .avs-slot-ref { opacity: 0.18; }
.avs-ref-tag {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em;
  color: var(--text-muted);
  pointer-events: none;
}
/* con ejemplo detrás, el "+" necesita fondo propio para leerse */
.avs-slot.has-ref .avs-add {
  z-index: 2;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* feedback al arrastrar una imagen encima */
.avs-slot.is-drop .avs-slot-media { border-style: solid; border-color: var(--accent-bg); background: color-mix(in srgb, var(--accent-bg) 12%, var(--surface)); }
.avs-slot.is-drop .avs-guide, .avs-slot.is-drop .avs-add { opacity: .3; }

/* Silueta-guía (cómo debe verse la foto) — ocupa toda la ranura */
.avs-guide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--text-muted);
  opacity: .5;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out-soft);
}
.avs-guide svg {
  width: 50%; height: 50%;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.avs-guide--flip { transform: scaleX(-1); }
.avs-slot:hover .avs-guide { opacity: .72; }
/* Chip "+" para señalar que se puede añadir */
.avs-add {
  position: absolute; bottom: 6px; right: 6px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}
.avs-add svg { width: 13px; height: 13px; stroke-width: 2; }
.avs-slot:hover .avs-add { color: var(--text); border-color: var(--border); }
.avs-slot-err { color: var(--error) !important; }
.avs-slot-x {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; display: grid; place-items: center;
  border: none; border-radius: var(--radius-full);
  background: var(--scrim); color: #fff; cursor: pointer;
}
.avs-slot-x svg { width: 13px; height: 13px; }
.avs-lowres {
  position: absolute; left: 6px; bottom: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em;
  padding: 2px 6px; border-radius: var(--radius-full);
  background: var(--warning); color: #1a1a1a;
}
.avs-slot-label { font-size: var(--fs-caption); color: var(--text-muted); }
/* Barra de acción anclada al borde inferior del workspace: sangra hasta los
   bordes del paso y se separa con una línea, como el footer de un editor. */
.avs-foot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-4) calc(var(--avs-gut) * -1) 0;
  padding: var(--space-3) var(--avs-gut) var(--space-2);
}
.avs-foot--center { justify-content: center; }
.avs-count { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-faint); }
.avs-foot-hint { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--tracking-snug); color: var(--text-muted); }

/* Fotos llena el panel SIN scroll (desktop): la cuadrícula 4×2 se ajusta a la
   altura disponible y las ranuras se encogen para caber. */
@media (min-width: 641px) {
  /* El nombre y su nota abren el paso CENTRADOS sobre la cuadricula: la rejilla
     ya va centrada y el bloque de arriba pegado a la izquierda partia el eje. */
  .avs-fotos .avs-name { flex: none; max-width: 520px; margin-inline: auto; }
  .avs-fotos .avs-hint { flex: none; margin: var(--space-2) 0 var(--space-4); text-align: center; }
  /* La grilla 4×2 llena el alto disponible SIN scroll; cada imagen mantiene
     proporción 3:4 (cara/cuerpo completos) centrada en su celda. */
  .avs-fotos-body { flex: 1 1 auto; min-height: 0; display: flex; }
  /* Celdas 1fr que llenan el alto; la imagen 3:4 se centra en su celda. Con el
     riel lateral el área es casi 3:4 por celda, así que quedan juntas. */
  .avs-fotos .avs-slots {
    flex: 1 1 auto; min-height: 0; width: 100%;
    /* Columnas iguales, pero el BLOQUE se topa en ancho. La foto saca su ancho
       del alto (9:16), asi que en columnas 1fr sueltas se quedaba centrada en
       medio de 115px de aire. Con `auto` tampoco valia: ahi la columna la
       ensanchaba la etiqueta, no la foto. El tope ata el ancho al alto que
       queda: dos filas de 9:16, cuatro columnas. */
    /* Dos filas de cuatro. minmax(0,·) y no 1fr a secas: con 1fr la columna
       nunca baja de su contenido minimo, y la etiqueta larga ("Detalles
       (tatuajes, cabello)") la ensanchaba un 30% mas que las demas.

       El tope de ancho es lo que quita el aire muerto: la foto saca su alto
       del ancho, asi que sin el la columna se repartia el sitio a partes
       iguales y la foto se quedaba centrada en medio de 115px de vacio. El
       calculo ata el ancho al alto disponible: dos filas en 4:5. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-content: center;
    /* Alto que le toca a cada foto: lo que queda de pantalla repartido entre
       las dos filas. El 326 es TODO lo que no son las fotos, sumado a mano:
       barra de pasos 60 + padding de la etapa 16 + nombre y nota 89 + hueco
       entre filas 24 + dos etiquetas con su hueco 58 + barra de accion 78. Si
       se cambia cualquiera de esos espaciados hay que ajustarlo aqui: si se
       queda corto, la foto pide mas alto del que hay y la etiqueta se sale de
       su celda. El 0.8 es la proporcion 4:5 (ancho = alto x 0.8). */
    --avs-foto-h: calc((100dvh - var(--topbar-h) - var(--avs-reserve, 66px) - 326px) / 2);
    max-width: min(100%, calc(var(--avs-foto-h) * 0.8 * 4 + var(--space-4) * 3));
    margin-inline: auto;
    /* Mas aire ENTRE FILAS que entre columnas: la etiqueta de la fila de arriba
       caia casi encima de la foto de la de abajo. En horizontal no hace falta,
       ahi no hay texto que se toque. */
    gap: var(--space-5) var(--space-4);
  }
  /* Animal trae SEIS referencias: en cuatro columnas quedaban 4+2, con dos
     huecos vacios a la derecha de la segunda fila. En tres columnas son dos
     filas llenas. El tope de ancho baja a tres columnas para que las fotos
     sigan atadas al alto disponible y no se estiren. */
  .avs-fotos .avs-slots[data-n="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: min(100%, calc(var(--avs-foto-h) * 0.8 * 3 + var(--space-4) * 2));
  }
  .avs-fotos .avs-slot { min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  /* La foto la manda el ANCHO (que ya viene topado por la rejilla) y el alto
     sale del 4:5. Al reves —alto flexible y ancho derivado— el max-width de
     la columna recortaba la proporcion. */
  .avs-fotos .avs-slot-media { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .avs-fotos .avs-slot-label { flex: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* El tope de ancho vale para TODAS las medidas. Antes se anulaba por debajo
     de 1500px dando por hecho que ahi la rejilla no daba de si; no era cierto:
     a 1440x820 las columnas se repartian todo el ancho, la foto pedia 316px de
     alto donde habia 184 y el paso acababa con 131px de scroll y las etiquetas
     una encima de otra. El `min(100%, ·)` deja que mande el ancho cuando es el
     ancho el que aprieta, y el alto cuando aprieta el alto. */

  /* La barra del paso va CENTRADA (contador + boton juntos en el eje) y con
     aire por encima, que antes la etiqueta de la ultima fila la rozaba. El
     padding de esquiva del chat flotante se anula: centrado no hay choque, y
     mantenerlo desplazaba el par 37px a la izquierda del eje real. */
  .avs-fotos .avs-foot {
    margin-top: var(--space-4);
    justify-content: center;
    gap: var(--space-5);
    padding-inline: var(--avs-gut);
  }

  /* El chat flotante ocupa la esquina inferior derecha (boton de 54px). La
     barra de accion le deja ese sitio libre: subirla sola no bastaba porque
     el choque era en horizontal, no en vertical. */
  .avs-foot { padding-right: calc(var(--avs-gut) + 74px); }

  /* Mejora (revisión) en dos columnas: comparador grande a la izquierda,
     panel de controles (suavizado + vistas) a la derecha. Llena el ancho. */
  .avs-mejora > .avs-h1 { font-size: var(--fs-h2); flex: none; }
  .avs-mejora > .avs-sub { flex: none; }
  .avs-mejora-body {
    flex: 1 1 auto; min-height: 0; margin-top: var(--space-4);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: var(--space-6); align-items: stretch;
  }
  .avs-mejora-main {
    min-height: 0; display: flex; justify-content: center;
    padding: var(--space-4);
    background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  }
  .avs-cmp-host { flex: 1 1 auto; min-height: 0; margin: 0; }
  .avs-cmp-host .avs-cmp { height: 100%; width: auto; max-width: 100%; }
  .avs-mejora-side { min-height: 0; display: flex; flex-direction: column; gap: var(--space-5); }
  /* Continuar a todo el ancho de la columna, debajo de las referencias */
  .avs-mejora-side > .avs-cmp-next { flex: none; width: 100%; }
  .avs-mejora .avs-foot { margin-top: var(--space-3); }
  /* Procesamiento: la grilla de miniaturas se ancla arriba */
  .avs-mejora > .avs-enh-grid { flex: none; }

  /* Identidad: TODO cabe sin scroll. Cabecera + base fijas arriba, luego una
     fila que llena el alto: tarjeta (izq) | panel de rasgos en columnas (der).
     Los rasgos se reparten en columnas para verse completos sin scroll. */
  .avs-id-head { flex: none; margin-bottom: var(--space-2); }
  .avs-id-head .avs-h1 { font-size: var(--fs-h2); }
  .avs-id-head .avs-sub { display: none; }        /* el subtítulo ya está en la barra inferior */
  .avs-id-grid { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  /* La tarjeta se estira al alto de la fila y no puede crecer mas. Si aun con
     la foto en su minimo el contenido no cabe (pantallas bajas, ~820px), se
     desplaza POR DENTRO en vez de derramarse por debajo del borde. */
  .avs-idcard { position: static; min-height: 0; gap: var(--space-3); overflow-y: auto; scrollbar-width: thin; }
  /* Foto del avatar CUADRADA (1:1), centrada; la cara queda centrada (cover).
     `flex: 0 1 auto` en vez de `none` porque la tarjeta se estira al alto de la
     fila y su contenido no siempre cabe: con la foto rigida el sobrante salia
     por abajo y el boton de Restablecer se plantaba sobre el borde de la
     tarjeta. Ahora lo que falta se lo come la foto (que recorta con `cover`, no
     se deforma) y todo queda dentro de su margen. */
  .avs-idcard .avs-idphoto { flex: 0 1 auto; min-height: 120px; aspect-ratio: 1 / 1; width: 100%; max-width: 200px; margin-inline: auto; }
  .avs-idcard .avs-idphoto img { width: 100%; height: 100%; object-fit: cover; object-position: center; aspect-ratio: auto; }
  .avs-idctrls { flex: none; }
  /* botones de IA apilados a ancho completo → "Analizar con IA" en una línea */
  .avs-idcard .avs-ai-acts { flex-direction: column; }
  .avs-idcard .avs-ai-btn, .avs-idcard .avs-ai-reset { width: 100%; white-space: nowrap; }
  .avs-idtraits { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .avs-idtraits-head { flex: none; margin-bottom: var(--space-3); }
  .avs-idtraits-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .avs-ttabs { flex: none; margin-bottom: var(--space-3); }
  /* Rasgos como FORMULARIO limpio: cada grupo es una fila (etiqueta a la
     izquierda, opciones a la derecha), separadas por una línea. */
  .avs-tpanel {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .avs-tpanel .avs-ofield {
    display: grid; grid-template-columns: minmax(96px, 132px) 1fr;
    align-items: start; column-gap: var(--space-5); margin: 0;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .avs-tpanel .avs-ofield:first-child { padding-top: 0; }
  .avs-tpanel .avs-ofield:last-child { padding-bottom: 0; border-bottom: none; }
  .avs-tpanel .avs-ofield-l { margin: 0; padding-top: 8px; }
  .avs-tpanel > .avs-bfields { display: contents; }   /* los campos van directo a la grilla */
  .avs-identity > .avs-foot { margin-top: 0; }

  /* Sheets: las láminas caben sin scroll, centradas en el alto disponible */
  .avs-sheets-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; }
  .avs-sheets-body > .avs-sheet-grid { width: 100%; margin-top: 0; }
  /* El padding de esquiva del chat flotante se anula: con el boton centrado no
     hay choque, y mantenerlo lo desplazaba 37px a la izquierda del eje. */
  .avs-sheets .avs-foot { margin-top: var(--space-3); padding-inline: var(--avs-gut); }

  /* Listo: tarjeta final centrada en un panel que llena el alto */
  .avs-listo-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .avs-listo .avs-foot { margin-top: var(--space-3); }
}

/* ---- PASO: Mejora (Fase 3) ---- */
.avs-mejora { width: 100%; display: flex; flex-direction: column; }
.avs-sub { margin: var(--space-3) 0 0; font-size: var(--fs-body); color: var(--text-muted); max-width: 60ch; }

/* Procesamiento por imagen */
.avs-enh-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3);
  width: 100%; margin-top: var(--space-5); align-content: start;
}
/* ---- Procesamiento CENTRADO ----
   El :has acota estas reglas a la pantalla de progreso: la de revision usa la
   misma clase .avs-mejora pero es un comparador a dos columnas, y ahi centrar
   no aplica.
   La rejilla era `auto-fill` con columnas 1fr: creaba tantas columnas como
   cupieran (diez en pantalla ancha) y las cinco o seis fotos se quedaban
   apelotonadas a la izquierda con el resto de columnas vacias. Con `auto-fit`
   y columnas de ancho fijo las pistas sobrantes se colapsan y el bloque se
   centra de verdad. */
.avs-mejora:has(> .avs-enh-grid) {
  justify-content: center;        /* y tambien en vertical: no hay barra de accion */
  text-align: center;
}
.avs-mejora:has(> .avs-enh-grid) > .avs-sub { margin-inline: auto; }
/* Flex y no grid: con grid la ULTIMA fila no se centra —queda alineada a la
   izquierda dentro del juego de columnas—, y con ocho referencias en una
   pantalla de 1440 se parten en 6+2, con esas dos colgando a un lado. En flex
   cada fila se centra por su cuenta.
   Celdas de 208 (un 30% mas que las 160 de partida). Con ocho referencias no
   caben en una fila —el area mide 1482px— y pasan a dos filas de 6+2; en flex
   cada fila se centra por su cuenta, asi que se ve deliberado y no descuadrado. */
.avs-mejora > .avs-enh-grid {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-content: center;
  margin-inline: auto;
}
.avs-mejora > .avs-enh-grid > .avs-enh-cell { flex: 0 0 208px; max-width: 208px; }
.avs-enh-cell { display: flex; flex-direction: column; gap: var(--space-2); }
.avs-enh-thumb { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.avs-enh-chip {
  align-self: center; font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: var(--tracking-snug); padding: 3px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); color: var(--text-muted);
}
.avs-enh-chip.is-wait { color: var(--text-faint); }
.avs-enh-chip.is-proc { color: var(--warning); border-color: var(--warning); }
.avs-enh-chip.is-check { color: var(--text-secondary); border-color: var(--border-strong); }
.avs-enh-chip.is-done { color: var(--success); border-color: var(--success); }

/* Suavizado de piel — dos opciones visuales (apiladas en el panel lateral) */
.avs-smooth { width: 100%; text-align: left; }
.avs-smooth-q { margin: 0 0 var(--space-3); font-size: var(--fs-body-s); font-weight: 550; color: var(--text); }
.avs-smooth-opts { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.avs-smooth-opt {
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-3); padding: var(--space-4);
  text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out-soft), background var(--dur-fast) var(--ease-out-soft);
}
.avs-smooth-opt:hover { border-color: var(--border); background: var(--surface-hover); }
.avs-smooth-opt.is-sel { border-color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }
.avs-smooth-ic {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--radius-md); background: var(--bg-subtle);
  border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.avs-smooth-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.avs-smooth-opt.is-sel .avs-smooth-ic { background: var(--accent-bg); color: var(--accent-fg); border-color: transparent; }
.avs-smooth-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.avs-smooth-t { font-size: var(--fs-body-s); font-weight: 600; color: var(--text); }
.avs-smooth-d { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.4; }

/* Comparador Original | Mejorada */
.avs-cmp-host { width: 100%; display: flex; justify-content: center; margin-top: var(--space-5); }
.avs-cmp {
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle);
  touch-action: none; cursor: ew-resize; user-select: none;
}
.avs-cmp img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; user-select: none; -webkit-user-drag: none; -webkit-user-select: none;
}
.avs-cmp-top-img { clip-path: inset(0 var(--clip, 50%) 0 0); }
.avs-cmp-div { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.avs-cmp-handle {
  position: absolute; top: 50%; left: 50%; width: 34px; height: 34px;
  transform: translate(-50%, -50%); border-radius: var(--radius-full);
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.avs-cmp-handle::before, .avs-cmp-handle::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-block: 4px solid transparent;
}
.avs-cmp-handle::before { left: 8px; border-right: 5px solid #333; transform: translateY(-50%); }
.avs-cmp-handle::after { right: 8px; border-left: 5px solid #333; transform: translateY(-50%); }
.avs-cmp-lbl {
  position: absolute; top: 10px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-full); background: rgba(0,0,0,.55); color: #fff; pointer-events: none;
}
.avs-cmp-lbl--l { left: 10px; }
.avs-cmp-lbl--r { right: 10px; }

/* Selector de miniaturas */
.avs-cmp-picker { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2); }
.avs-side-l { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.avs-cmp-thumb { width: 52px; height: 52px; padding: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-subtle); background: none; cursor: pointer; opacity: .6; transition: opacity var(--dur-fast), border-color var(--dur-fast); }
.avs-cmp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.avs-cmp-thumb:hover { opacity: .85; }
.avs-cmp-thumb.is-sel { opacity: 1; border-color: var(--text); }

/* ---- PASO: Identidad (Fase 4) — formulario ---- */
.avs-form { width: 100%; }
.avs-form .avs-sub { margin-bottom: var(--space-5); }
.avs-qblock { margin-bottom: var(--space-5); }
.avs-qlabel { font-size: var(--fs-body-s); font-weight: 550; color: var(--text); margin: 0 0 var(--space-3); }
.avs-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.avs-pill {
  padding: 8px var(--space-4); border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); background: transparent;
  color: var(--text-secondary); font-size: var(--fs-body-s); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft);
}
.avs-pill:hover { background: var(--surface-hover); border-color: var(--border); color: var(--text); }
.avs-pill.is-sel { background: var(--accent-bg); color: var(--accent-fg); border-color: transparent; }

/* chips (obligatorio = acento · variable = gris · prohibido = error) */
.avs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.avs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: var(--radius-full); border: 1px solid var(--border); font-size: var(--fs-caption); }
.avs-chip--must { border-color: var(--text-secondary); color: var(--text); }
.avs-chip--var { border-color: var(--border); color: var(--text-muted); }
.avs-chip--forbid { border-color: var(--error); color: var(--error); }
.avs-chip-x { display: grid; place-items: center; width: 18px; height: 18px; border: none; background: transparent; color: inherit; cursor: pointer; opacity: .7; }
.avs-chip-x:hover { opacity: 1; }
.avs-chip-x svg { width: 11px; height: 11px; stroke-width: 2.2; }
.avs-chip-input {
  flex: 1; min-width: 140px; height: 34px; padding: 0 var(--space-3);
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body-s);
}
.avs-chip-input:focus { outline: none; border-color: var(--border-strong); }
.avs-chip-input::placeholder { color: var(--text-faint); }

/* análisis (creando la biblia) */
.avs-analyzing { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--space-8); }
.avs-spinner {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  border: 2px solid var(--border); border-top-color: var(--text);
  margin-bottom: var(--space-4);
}
@media (prefers-reduced-motion: no-preference) {
  .avs-spinner { animation: avsSpin .8s linear infinite; }
  @keyframes avsSpin { to { transform: rotate(360deg); } }
}

/* Biblia — ficha de personaje */
.avs-bible { width: 100%; }
.avs-bible .avs-sub { margin-bottom: var(--space-5); }
.avs-bible-cols { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-5); align-items: start; }
.avs-bible-preview { position: sticky; top: 0; text-align: center; }
.avs-bible-preview img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.avs-bible-name { margin: var(--space-3) 0 2px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-snug); color: var(--text); }
.avs-bible-meta { margin: 0; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }
.avs-bible-secs { display: flex; flex-direction: column; gap: var(--space-2); }
.avs-sec-text { width: 100%; min-height: 52px; padding: var(--space-3); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-sans); font-size: var(--fs-body-s); resize: vertical; }
.avs-sec-text:focus { outline: none; border-color: var(--border-strong); }

/* Pantalla única de identidad — workspace de paneles */
.avs-identity { width: 100%; }
.avs-id-head { margin-bottom: var(--space-5); }
.avs-id-head .avs-sub { margin: var(--space-2) 0 0; }

/* Base: fidelidad + estilo dentro de una banda (dos mitades balanceadas) */
.avs-id-base {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  padding: var(--space-5); margin-bottom: var(--space-5);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.avs-id-base .avs-qblock { margin-bottom: 0; }
.avs-id-base > .avs-qblock:nth-child(2) { border-left: 1px solid var(--border-subtle); padding-left: var(--space-6); }

/* Ficha: tarjeta de avatar + panel de rasgos */
.avs-id-grid { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: var(--space-5); align-items: stretch; }
.avs-idtraits { display: flex; flex-direction: column; min-height: 0; }
/* el título + conteo van FUERA; el borde/fondo viven en el panel interno */
.avs-idtraits-panel {
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.avs-idcard {
  position: sticky; top: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.avs-idcard-info { text-align: center; }
.avs-idcard-name { margin: 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-snug); color: var(--text); }
.avs-idcard-meta { margin: 2px 0 0; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }

/* Rasgos */
.avs-idtraits-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); padding: 0 2px; }
.avs-idtraits-h { font-size: var(--fs-body-s); font-weight: 600; color: var(--text); letter-spacing: var(--tracking-snug); }
.avs-idtraits-count { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }

/* Foto con escaneo IA (barrido verde que recorre la foto) */
.avs-idphoto { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.avs-idphoto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 0; border-radius: 0; }
.avs-idphoto.is-scanning::after {
  content: ""; position: absolute; left: 0; right: 0; top: -45%; height: 45%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--success) 45%, transparent), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .avs-idphoto.is-scanning::after { animation: avsScan 1.2s ease-in-out infinite; }
  @keyframes avsScan { 0% { top: -45%; } 100% { top: 100%; } }
}

/* Botones Analizar con IA / Restablecer (apilados dentro de la tarjeta) */
.avs-ai-acts { display: flex; flex-direction: column; gap: var(--space-2); }
.avs-ai-btn { width: 100%; }
.avs-ai-btn svg { width: 16px; height: 16px; }
.avs-ai-reset { width: 100%; }
.avs-ai-spin { width: 14px; height: 14px; border-radius: var(--radius-full); border: 2px solid rgba(0,0,0,.25); border-top-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .avs-ai-spin { animation: avsSpin .8s linear infinite; }
}

/* Pestañas de SECCIONES — barra con subrayado (se ven distintas de los pills de
   opciones: son navegación entre secciones, no opciones). */
.avs-ttabs {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.avs-ttab {
  position: relative;
  padding: 0 0 10px; border: none; background: none; border-radius: 0;
  color: var(--text-muted); font-size: var(--fs-body-s); font-weight: 500;
  letter-spacing: var(--tracking-snug); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.avs-ttab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent; border-radius: 2px 2px 0 0;
  transition: background var(--dur-fast) var(--ease-out-soft);
}
.avs-ttab:hover { color: var(--text-secondary); }
.avs-ttab.is-sel { color: var(--text); font-weight: 600; }
.avs-ttab.is-sel::after { background: var(--text); }
.avs-tpanel .avs-ofield { margin-bottom: 0; }
.avs-tpanel .avs-ofield-l { margin-bottom: 8px; }
.avs-tpanel .avs-opills { gap: 8px; }
.avs-tpanel .avs-opill { padding: 6px 12px; font-size: var(--fs-caption); }

/* Controles fidelidad/estilo dentro de la tarjeta — botones grandes en cuadrícula
   (más fáciles de ver y marcar que los pills chiquitos). */
.avs-idctrls { display: flex; flex-direction: column; gap: var(--space-3); }
.avs-idctrls .avs-qblock { margin-bottom: 0; }
.avs-idctrls .avs-qlabel { margin-bottom: 6px; font-size: var(--fs-body-s); font-weight: 600; }
.avs-idctrls .avs-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.avs-idctrls .avs-pill {
  padding: 7px 8px; font-size: var(--fs-caption);
  text-align: center; justify-content: center; border-radius: var(--radius-md);
  border-color: var(--border);
}
.avs-idctrls .avs-pill.is-sel { border-color: transparent; font-weight: 600; }

/* Ficha — campos como opciones seleccionables (estilo creador de personaje) */
.avs-ofield { margin-bottom: var(--space-4); }
.avs-ofield:last-child { margin-bottom: 0; }
.avs-ofield-l {
  margin: 0 0 var(--space-2); font-family: var(--font-mono);
  font-size: var(--fs-overline); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-muted);
}
.avs-opills { display: flex; flex-wrap: wrap; gap: 6px; }
.avs-opill {
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); background: var(--surface);
  color: var(--text-secondary); font-size: var(--fs-caption); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-cine);
}
.avs-opill:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }
.avs-opill.is-sel { background: var(--accent-bg); color: var(--accent-fg); border-color: transparent; font-weight: 550; }

/* Biblia — campos descriptivos (label + valor) */
.avs-bfields { display: flex; flex-direction: column; gap: var(--space-2); }
.avs-bfield { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: var(--space-3); }
.avs-bfield-l { font-size: var(--fs-body-s); color: var(--text-muted); }
.avs-bfield-i {
  width: 100%; height: 36px; padding: 0 var(--space-3);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body-s);
}
.avs-bfield-i:focus { outline: none; border-color: var(--border-strong); }
.avs-bfield-i::placeholder { color: var(--text-faint); }
select.avs-bfield-sel {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.avs-bfield-sel:focus { border-color: var(--border-strong); }
select.avs-bfield-sel option { background: var(--surface); color: var(--text); }
.avs-ed-bsec { margin-bottom: var(--space-4); }
.avs-ed-bsec:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .avs-bfield { grid-template-columns: 1fr; gap: 4px; }
}

/* botón secundario con borde */
.avs-btn--ghost2 { background: transparent; color: var(--text-secondary); border-color: var(--border-subtle); }
.avs-btn--ghost2:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border); }

/* ---- PASO: Sheets (Fase 5) ---- */
.avs-sheets { width: 100%; display: flex; flex-direction: column; }
/* Titular y subtitulo del paso, centrados sobre las hojas. El titular no
   arranca pegado al borde de la etapa: baja para que respire sobre las
   laminas, que es lo que de verdad manda en esta pantalla. */
.avs-sheets > .avs-h1, .avs-sheets > .avs-sub { text-align: center; }
.avs-sheets > .avs-h1 { margin-top: clamp(8px, 4vh, 44px); }
.avs-sheets > .avs-sub { margin-inline: auto; }

/* Continuar, mas grande: es la accion que cierra el paso y competia en tamano
   con los dos "Regenerar", que son secundarios. */
.avs-sheets .avs-foot .avs-btn--primary {
  height: 52px; padding-inline: var(--space-7); font-size: var(--fs-body);
}

/* Regenerar se leia como una etiqueta mas —mismo peso gris que el pie de la
   lamina— y no parecia pulsable. Fondo propio y borde marcado. */
.avs-sheet-val .avs-mini-btn {
  padding: 7px 16px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              background var(--dur-fast) var(--ease-out-soft);
}
.avs-sheet-val .avs-mini-btn:hover {
  background: var(--surface-hover); border-color: var(--border-strong); color: var(--text);
}
.avs-sheets-body { width: 100%; }
/* auto-fit: las láminas se expanden a lo ancho (sin columnas vacías) */
.avs-sheet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); width: 100%; margin-top: var(--space-5); align-content: center; justify-items: center; }
/* Una sola hoja (Animal): una columna topada y CENTRADA. `justify-items` ya
   estaba, pero eso centra la tarjeta dentro de su columna; lo que se quedaba a
   la izquierda era la columna dentro de la rejilla. */
.avs-sheet-grid:has(.avs-sheet-card:only-child) {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}
.avs-sheet-card { width: 100%; }
.avs-sheet-card { display: flex; flex-direction: column; gap: var(--space-2); }
.avs-sheet-frame {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden;
}
/* Mientras genera, el marco hace de lienzo del loader: el blanco de la lamina
   todavia no existe y sobre el no se leeria. */
.avs-sheet-frame.is-loading { background: var(--bg-subtle); }
.avs-sheet-img { width: 100%; height: 100%; object-fit: cover; }
.avs-sheet-cap { margin: 0; font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--tracking-snug); color: var(--text-secondary); }
/* lámina ampliable → lightbox */
.avs-sheet-frame--zoom { cursor: zoom-in; }
.avs-sheet-zoom {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--radius-full); background: var(--scrim); color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out-soft);
}
.avs-sheet-frame--zoom:hover .avs-sheet-zoom { opacity: 1; }
.avs-sheet-zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.avs-sheet-val { display: flex; justify-content: center; margin-top: var(--space-2); }
.avs-mini-btn {
  font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--tracking-snug);
  padding: 4px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); background: transparent; color: var(--text-muted); cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.avs-mini-btn:hover { color: var(--text); border-color: var(--border); }

/* ---- PASO: Listo (pantalla final) — panel que llena, tarjeta centrada ---- */
.avs-listo { width: 100%; display: flex; flex-direction: column; text-align: center; position: relative; }
.avs-listo-body { width: 100%; text-align: center; }
.avs-final-card {
  display: flex; gap: var(--space-6); align-items: stretch; text-align: left;
  margin: var(--space-6) auto 0; padding: var(--space-6);
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  width: 100%; max-width: 660px;
}
.avs-final-img { width: 230px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md); flex: none; align-self: center; }
.avs-final-info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.avs-final-name { margin: 0 0 2px; font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking-snug); color: var(--text); }
.avs-final-meta { margin: 0 0 var(--space-4); font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }

/* Specs (label / valor) en fila limpia */
.avs-final-specs {
  display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
}
.avs-final-spec { display: flex; flex-direction: column; gap: 3px; }
.avs-final-spec-l { font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); }
.avs-final-spec-v { font-size: var(--fs-body-s); font-weight: 600; color: var(--text); }

.avs-final-thumbs-l { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); }
.avs-final-thumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.avs-final-thumb {
  padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  overflow: hidden; background: none; cursor: pointer; line-height: 0;
  transition: border-color var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-cine);
}
.avs-final-thumb:hover { border-color: var(--text); transform: translateY(-2px); }
.avs-final-thumb img { display: block; width: 88px; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---- Cierre dinámico: la ficha se "sella" (destello) y sube al crear ---- */
@media (prefers-reduced-motion: no-preference) {
  /* entrada con pop de la ficha final */
  .avs-listo:not(.is-finishing) .avs-final-card { animation: avsCardIn var(--dur-slow) var(--ease-out-cine) both; }
  @keyframes avsCardIn {
    from { transform: translateY(16px) scale(.96); }
    to   { transform: none; }
  }
  /* salida al confirmar — SIN pasar por negro: sella, hace un lift sutil y se
     mantiene opaca; la biblioteca aparece con un corte limpio. */
  .avs-listo.is-finishing { animation: avsListoOut .58s var(--ease-out-cine) forwards; }
  @keyframes avsListoOut {
    0%   { transform: none; }
    32%  { transform: scale(1.02); }
    100% { transform: scale(1.05) translateY(-10px); }
  }
  .avs-listo.is-finishing .avs-final-card { animation: avsCardSeal .64s var(--ease-out-cine) forwards; }
  @keyframes avsCardSeal {
    0%   { box-shadow: 0 0 0 0 transparent; border-color: var(--border-subtle); }
    32%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 60%, transparent); border-color: var(--success); }
    100% { box-shadow: 0 10px 44px -6px color-mix(in srgb, var(--success) 34%, transparent); border-color: color-mix(in srgb, var(--success) 40%, var(--border-subtle)); }
  }
}

/* ---- Avatares editables (creados aquí) ---- */
.av-circle[data-av-id^="avsx"] { cursor: pointer; }
.av-circle[data-av-id^="avsx"] .av-circle-thumb {
  transition: border-color var(--dur-fast) var(--ease-out-soft);
}
.av-circle[data-av-id^="avsx"]:hover .av-circle-thumb { border-color: var(--text); }

/* ---- Editor de identidad (panel de gestión) ---- */
/* ============================================================
   FICHA DEL AVATAR (editor de una identidad ya creada)
   Rail fijo con la identidad + panel con pestañas. La ficha ocupa
   exactamente el área de contenido: lo único que hace scroll es el
   cuerpo del panel, nunca la página.
   ============================================================ */
/* La ficha es una TARJETA contenida y centrada, no un lienzo a pantalla
   completa: se lee de un vistazo y no obliga a recorrer la pantalla con la
   vista. La cabecera de arriba comparte su ancho para que todo quede alineado. */
#avEditor {
  min-height: calc(100dvh - var(--topbar-h) - 104px);
  display: flex; flex-direction: column; justify-content: center;
}
#avEditor[hidden] { display: none; }

#avEditor > .avs-creator-head,
.avs-prof {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
}
.avs-prof {
  display: grid;
  grid-template-columns: minmax(180px, 210px) minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
  align-items: stretch;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, .75);
}

/* ---- Rail: quién es este avatar ---- */
.avs-prof-rail {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: var(--space-4);
  padding-right: var(--space-4);
  border-right: 1px solid var(--border-subtle);
}
/* en el rail la identidad va en vertical, no en fila */
.avs-prof-rail .avs-ed-top {
  flex-direction: column; align-items: flex-start;
  gap: var(--space-3); margin-bottom: 0;
}
.avs-prof-rail .avs-ed-thumb { width: 96px; height: 96px; }
.avs-prof-rail .avs-ed-meta { width: 100%; }

.avs-prof-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.avs-prof-stat {
  padding: 4px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  white-space: nowrap;
}
.avs-prof-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }

/* ---- Panel con pestañas ---- */
.avs-prof-panel {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.avs-prof-tabs {
  flex: none;
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-4);
  /* La fila se desplaza en horizontal solo si las pestañas no caben. El
     overflow-y explícito es obligatorio: con solo overflow-x el navegador
     calcula el vertical como auto y RESERVA una barra con flechas en la
     esquina de la ficha, aunque no haya nada que desplazar. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.avs-prof-tabs::-webkit-scrollbar { display: none; }
.avs-prof-tab {
  flex: none;
  padding: 8px 14px 10px;
  border: 0; background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  font-family: inherit; font-size: var(--fs-body-s); font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft);
}
.avs-prof-tab:hover { color: var(--text-secondary); }
.avs-prof-tab.is-active { color: var(--text); border-bottom-color: var(--text); }

/* Alto FIJO: la ficha mide lo mismo en las cuatro pestañas, así no da saltos
   al cambiar de una a otra. El valor cubre la pestaña más alta (Vistas, 435px
   con su lámina 16:9), de modo que ninguna necesita desplazarse.
   El overflow se queda en auto, no en hidden: si algún día un tipo de avatar
   trae más secciones, es preferible que se pueda desplazar a que se recorte. */
.avs-prof-body {
  flex: none;
  height: 440px;
  overflow-y: auto; overflow-x: hidden;
  padding-right: var(--space-2);
}

/* ---- Ficha de rasgos: una tarjeta por sección, un valor por fila ----
   No se pintan las opciones, solo lo elegido; se cambian desde el menú que
   abre cada valor. Así la Biblia entera cabe donde antes cabía una sección. */
.avs-spec {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: var(--space-3);
  align-content: start;
}
.avs-spec-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  /* un punto por debajo de la tarjeta que las contiene, para que se separen */
  background: var(--bg-subtle);
  padding: var(--space-3) var(--space-3) 8px;
}
.avs-spec-h {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.avs-spec-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 7px 0;
  border-top: 1px solid color-mix(in srgb, var(--border-subtle) 60%, transparent);
}
.avs-spec-row:first-of-type { border-top: 0; }
.avs-spec-k {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avs-spec-v {
  flex: none; max-width: 58%;
  padding: 3px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text);
  font-family: inherit; font-size: var(--fs-caption);
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out-soft),
              background var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft);
}
.avs-spec-v:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.avs-spec-v.is-empty { color: var(--text-muted); border-style: dashed; background: transparent; }

/* menú de opciones de un rasgo */
.avs-omenu {
  position: fixed; z-index: 6200;
  min-width: 170px; max-height: 300px; overflow-y: auto;
  padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .55);
}
.avs-omenu-i {
  padding: 7px 10px;
  border: 0; border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit; font-size: var(--fs-body-s);
  text-align: left; cursor: pointer;
}
.avs-omenu-i:hover { background: var(--surface-hover); color: var(--text); }
.avs-omenu-i.is-sel { color: var(--text); font-weight: 550; }
.avs-omenu-i--clear { color: var(--text-muted); border-top: 1px solid var(--border-subtle); border-radius: 0; margin-top: 3px; padding-top: 9px; }

/* Referencias: dos filas que llenan el alto del panel. La foto la manda el
   ALTO de su fila (width:auto + aspect-ratio), no el ancho de la columna: así
   crece hasta donde da el espacio en vez de dejar medio panel vacío. El número
   de columnas lo fija el JS según cuántas referencias tenga el tipo. */
.avs-prof-slots {
  height: 100%;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--space-3);
}
.avs-prof-slots .avs-slot { min-height: 0; gap: 6px; }
.avs-prof-slots .avs-slot-media {
  flex: 1 1 auto; min-height: 0;
  width: auto; max-width: 100%;
  margin-inline: auto;
}
.avs-prof-slots .avs-slot-label {
  flex: none; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .avs-prof {
    height: auto; min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .avs-prof-rail {
    padding-right: 0; padding-bottom: var(--space-4);
    border-right: 0; border-bottom: 1px solid var(--border-subtle);
  }
  .avs-prof-rail .avs-ed-top { flex-direction: row; align-items: center; }
  .avs-prof-rail .avs-ed-thumb { width: 84px; height: 84px; }
  .avs-prof-acts { margin-top: 0; }
  /* en teléfono la ficha crece con su contenido y quien se desplaza es la
     página: fijar aquí los 440px del escritorio recortaría o descuadraría */
  .avs-prof-body { height: auto; overflow: visible; padding-right: 0; }
  .avs-prof-slots { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

.avs-editor { width: 100%; }
.avs-editor-body { width: 100%; }
.avs-ed-top { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-5); }
.avs-ed-img { width: 92px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); flex: none; }

/* Miniatura del avatar: se ve tal cual sale en la biblioteca y se puede
   reencuadrar o cambiar desde el lápiz de la esquina. */
.avs-ed-thumb {
  position: relative; flex: none;
  width: 92px; height: 92px;
  border-radius: var(--radius-md);
  overflow: visible;
}
.avs-ed-thumb img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center top;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}
.avs-ed-thumb-edit {
  position: absolute; right: -6px; bottom: -6px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft);
}
.avs-ed-thumb-edit:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.avs-ed-thumb-edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* menú corto del lápiz */
.avs-thmenu {
  position: fixed; z-index: 6200;
  min-width: 190px; padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .55);
}
.avs-thmenu-item {
  text-align: left; padding: 8px 10px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary);
  font-family: inherit; font-size: var(--fs-caption);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft);
}
.avs-thmenu-item:hover { background: var(--surface-hover); color: var(--text); }
.avs-ed-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.avs-ed-meta .avs-name { height: 40px; }
.avs-editor .avs-qblock { margin-bottom: var(--space-4); }
.avs-editor .avs-qblock:last-child { margin-bottom: 0; }
.avs-ed-regen { display: flex; justify-content: flex-start; margin-top: var(--space-4); }
.avs-mini-btn--danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 45%, transparent); }
.avs-mini-btn--danger:hover { color: var(--error); border-color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }

/* ---- PASO: placeholder (reservado) ---- */
.avs-soon {
  padding-top: var(--space-6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}

/* (sin animación de apertura del creador → nada salta) */

/* ---- Lightbox: ver una lámina en grande con botón cerrar ---- */
.avs-lightbox {
  position: fixed; inset: 0; z-index: 6000;
  display: grid; place-items: center;
  padding: clamp(24px, 5vw, 72px);
  background: color-mix(in srgb, var(--bg) 76%, #000);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.avs-lightbox-inner { max-width: 100%; max-height: 100%; display: flex; }
.avs-lightbox-img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
  box-shadow: 0 24px 70px -10px rgba(0,0,0,.6);
}
.avs-lightbox-close {
  position: absolute; top: clamp(16px, 3vw, 30px); right: clamp(16px, 3vw, 30px);
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast) var(--ease-out-soft);
}
.avs-lightbox-close:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.avs-lightbox-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .avs-lightbox { animation: avsLbIn .18s var(--ease-out-soft); }
  @keyframes avsLbIn { from { opacity: 0; } to { opacity: 1; } }
  .avs-lightbox.is-closing { animation: avsLbOut .16s var(--ease-out-soft) forwards; }
  @keyframes avsLbOut { to { opacity: 0; } }
  .avs-lightbox-inner { animation: avsLbImg .22s var(--ease-out-cine); }
  @keyframes avsLbImg { from { transform: scale(.96); } to { transform: none; } }
}

/* Aviso de límite de plan (usa la base .avs-lightbox) */
.avs-notice-box {
  max-width: 400px; width: 100%;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  text-align: center; box-shadow: 0 24px 60px -12px rgba(0,0,0,.5);
}
.avs-notice-h { margin: 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-snug); color: var(--text); }
.avs-notice-p { margin: 0; font-size: var(--fs-body-s); color: var(--text-secondary); line-height: 1.5; }
.avs-notice-box .avs-btn { align-self: center; margin-top: var(--space-2); min-width: 150px; }

/* ============================================================
   MÓVIL (≤640) — una sola columna
   ============================================================ */
@media (max-width: 640px) {
  /* en teléfono el flujo es natural (scroll de página), sin cap de altura */
  .avs-creator { height: auto; }
  /* Y sin subir hasta el topbar: aqui .content reserva 56px para el chip de
     proyecto activo, asi que el margen negativo (que cancela --content-pad-t,
     14px) no cuadraba con el padding real y metia la barra bajo el chip. */
  #avCreator { margin-top: 0; }
  /* Ni a sangre: en esta medida la vista no arranca en el borde interior de
     .content, asi que el margen negativo la sacaba 16px por la derecha. La
     barra se queda con el ancho normal de la seccion. */
  #avCreator > .avs-creator-head { margin-inline: 0; padding-inline: 0; background: none; }
  /* la barra ya es horizontal en todas las medidas; aqui solo se aprieta */
  .avs-stage { overflow: visible; display: block; justify-content: normal; padding: var(--space-4) 0; }
  .avs-step { padding: 8px 9px 10px; }
  .avs-step-label { display: none; }              /* solo iconos… */
  .avs-step.is-current .avs-step-label { display: block; }  /* …salvo el actual */
  .avs-stage { padding-top: var(--space-6); }
  .avs-h1 { font-size: var(--fs-h2); }
  .avs-slots { grid-template-columns: repeat(2, 1fr); }
  .avs-enh-grid { grid-template-columns: repeat(2, 1fr); }
  .avs-bible-cols { grid-template-columns: 1fr; }
  .avs-bible-preview { position: static; max-width: 220px; margin-inline: auto; }
  .avs-id-base { grid-template-columns: 1fr; gap: var(--space-4); }
  .avs-id-base > .avs-qblock:nth-child(2) { border-left: 0; padding-left: 0; }
  .avs-id-grid { grid-template-columns: 1fr; }
  .avs-idcard { position: static; max-width: 320px; margin-inline: auto; }
  .avs-mejora-body { grid-template-columns: 1fr; gap: var(--space-5); }
  .avs-mejora-side { overflow: visible; }
  .avs-sheet-grid { grid-template-columns: 1fr; }
  .avs-final-card { flex-direction: column; text-align: center; }
  .avs-final-info { text-align: center; }
  .avs-final-thumbs { justify-content: center; }
  .avs-foot { flex-direction: column-reverse; align-items: stretch; }
  .avs-btn { width: 100%; }
}

/* ============================================================
   TÁCTIL — misma query OR que la Fase 1 móvil de app.css:
   sin hover, los reveals deben estar siempre visibles y los
   targets pequeños necesitan área de toque extra (invisible).
   ============================================================ */
@media (hover: none), (max-width: 640px) {
  /* lupa de las láminas: visible siempre (el tap lo captura el frame) */
  .avs-sheet-zoom { opacity: 1; }
  /* la X de los chips mide 18px — área de toque ampliada sin visual */
  .avs-chip-x { position: relative; }
  .avs-chip-x::before { content: ""; position: absolute; inset: -8px; }
}

/* ============================================================
   RECORTE AL SUBIR — cuadro con el encuadre 4:5 de la ranura.
   Se arrastra para mover y hay control de acercamiento.
   ============================================================ */
.avs-crop {
  position: fixed; inset: 0; z-index: 6100;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--bg) 78%, #000);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.avs-crop-box {
  width: min(460px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px -10px rgba(0, 0, 0, .6);
}
.avs-crop-head { display: flex; flex-direction: column; gap: 2px; }
.avs-crop-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); }
.avs-crop-sub {
  margin: 0; font-family: var(--font-mono);
  font-size: var(--fs-overline); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-muted);
}
.avs-crop-stage { display: grid; place-items: center; min-height: 0; }
/* el marco ES el recorte final: mismo 4:5 que la ranura */
.avs-crop-frame {
  position: relative;
  width: min(300px, 100%); aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-subtle);
  box-shadow: 0 0 0 1px var(--border-subtle);
}
.avs-crop-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.avs-crop-canvas:active { cursor: grabbing; }
/* Acercamiento: lupa − · raíl fino · lupa + (mismo lenguaje que .iv-zoom) */
.avs-crop-tools {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 2px;
  color: var(--text-faint);
}
.avs-crop-zic {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-soft),
              background var(--dur-fast) var(--ease-out-soft);
}
.avs-crop-zic:hover { color: var(--text); background: var(--surface-hover); }
.avs-crop-zic svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.avs-crop-zic--big svg { width: 16px; height: 16px; }

.avs-crop-zoom {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 16px;
  background: transparent;
  cursor: pointer;
}
.avs-crop-zoom::-webkit-slider-runnable-track {
  height: 3px; border-radius: var(--radius-full); background: var(--border);
}
.avs-crop-zoom::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -5px;
  border-radius: var(--radius-full);
  background: var(--text); border: none;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.avs-crop-zoom:hover::-webkit-slider-thumb { transform: scale(1.15); }
.avs-crop-zoom:active::-webkit-slider-thumb { transform: scale(1.25); }
.avs-crop-zoom::-moz-range-track { height: 3px; border-radius: var(--radius-full); background: var(--border); }
.avs-crop-zoom::-moz-range-progress { height: 3px; border-radius: var(--radius-full); background: var(--text-faint); }
.avs-crop-zoom::-moz-range-thumb {
  width: 13px; height: 13px; border: none;
  border-radius: var(--radius-full); background: var(--text);
}
.avs-crop-zoom:focus-visible { outline: none; }
.avs-crop-zoom:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 26%, transparent);
}
.avs-crop-acts { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }

@media (max-width: 640px) {
  .avs-crop-box { width: 100%; }
  .avs-crop-acts .avs-btn, .avs-crop-acts .avs-mini-btn { flex: 1; text-align: center; }
}

/* ============================================================
   AGREGAR MI AVATAR (boton de la biblioteca + dialogo)
   ============================================================ */
.av-listhead-r { display: inline-flex; align-items: center; gap: 10px; }
.av-import-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 13px 0 10px;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.76rem; font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.av-import-btn:hover { border-color: var(--border-strong); background: var(--surface-2, var(--surface)); }
.av-import-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.avs-import-box {
  position: relative;
  width: min(860px, 100%); max-height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.avs-import-head { padding-right: 40px; }
.avs-import-h { margin: 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-snug); color: var(--text); }
.avs-import-p { margin: 6px 0 0; font-size: var(--fs-body-s); color: var(--text-secondary); line-height: 1.55; max-width: 620px; }
.avs-import-x {
  position: absolute; top: 18px; right: 18px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: none; border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer;
}
.avs-import-x:hover { background: var(--bg); color: var(--text); }
.avs-import-x svg { width: 16px; height: 16px; }

.avs-import-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); }
.avs-import-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.avs-import-lab { margin: 0; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

.avs-import-drop {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg); color: var(--text-muted);
  cursor: pointer; padding: 16px; text-align: center;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.avs-import-drop:hover, .avs-import-drop.is-over { border-color: var(--text); color: var(--text); }
.avs-import-drop.has-img { border-style: solid; border-color: var(--border-subtle); padding: 0; }
.avs-import-drop img { width: 100%; height: 100%; object-fit: contain; display: block; }
.avs-import-drop--sheet { min-height: 320px; flex: 1; }
.avs-import-drop--sheet.has-img { background: #000; }
.avs-import-drop--thumb { width: 112px; height: 112px; flex: none; border-radius: 50%; padding: 0; }
.avs-import-drop--thumb img { object-fit: cover; }
.avs-import-ic { display: inline-flex; }
.avs-import-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.avs-import-dt { font-size: var(--fs-caption); max-width: 220px; line-height: 1.5; }
.avs-import-change {
  position: absolute; right: 10px; bottom: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0,0,0,.65); color: #fff; font-size: 0.7rem;
}
.avs-import-err { margin: 0; font-size: var(--fs-caption); color: var(--error); }

.avs-import-thumbrow { display: flex; align-items: center; gap: 16px; }
.avs-import-thumbacts { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.avs-import-hint { margin: 0; font-size: var(--fs-caption); color: var(--text-faint); }
.avs-import-field { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.avs-import-input {
  height: 42px; padding: 0 14px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 16px;   /* 16px: iOS no hace zoom al enfocar */
}
.avs-import-input:focus { outline: none; border-color: var(--text); }
.avs-import-types { display: flex; flex-wrap: wrap; gap: 6px; }
.avs-import-type {
  height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary);
  font-family: inherit; font-size: 0.78rem; cursor: pointer;
}
.avs-import-type:hover { color: var(--text); border-color: var(--border-strong); }
.avs-import-type.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }

.avs-import-foot { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 720px) {
  .avs-import-box { padding: var(--space-5); }
  .avs-import-body { grid-template-columns: 1fr; }
  .avs-import-drop--sheet { min-height: 220px; }
  .avs-import-foot .avs-btn { flex: 1; }
  .av-listhead { flex-wrap: wrap; }
}