/* ═══════════════════════════════════════════════════════════════════════════
   PixelClub — Editor del retrato, en modo MENÚ DE JRPG
   ═══════════════════════════════════════════════════════════════════════════
   Rediseño pedido por Rubén (25/08/2026): «un menú atractivo modo juego JRPG
   pero mezclado con PixelClub».

   El lenguaje es el de los menús clásicos de Dragon Quest / Final Fantasy:

     · VENTANAS con doble borde (marco claro + filo interior) sobre azul noche,
       cada una con su rótulo arriba, como las cajas de ESTADO/EQUIPO.
     · CURSOR ▶ parpadeante en la opción sobre la que estás — el gesto más
       reconocible de todo el género.
     · Los botones son COMANDOS de menú, no botones web.

   Y lo de PixelClub encima: Press Start 2P en los rótulos, el cian y el
   magenta de la casa, sombras duras de píxel y transiciones a saltos
   (`steps()`), nunca suaves.

   Los nombres de clase NO cambian: esto es una piel sobre el mismo editor.
   ═══════════════════════════════════════════════════════════════════════════ */

.editor-avatar {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* ── La ventana JRPG, la pieza que se repite ──────────────────────────────
   Doble borde clásico: marco claro fuera, filo cian dentro, y una sombra dura
   de píxel que la despega del fondo. El rótulo va en `--rotulo`. */
.ea-vista,
.ea-panel {
  position: relative;
  background: linear-gradient(180deg, #12142e 0%, #0d0f24 100%);
  border: 3px solid #dfe6ff;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 2px #0d0f24,
    inset 0 0 0 4px rgba(0, 245, 212, .45),
    7px 7px 0 rgba(0, 0, 0, .55);
  padding: 26px 18px 18px;
}

/* El rótulo de cada ventana, montado sobre el marco como en los JRPG. */
.ea-vista::before,
.ea-panel::before {
  content: var(--rotulo, '');
  position: absolute;
  top: -12px;
  left: 14px;
  font-family: var(--font-pixel, monospace);
  font-size: 9px;
  letter-spacing: .1em;
  color: #0d0f24;
  background: #dfe6ff;
  border: 2px solid #0d0f24;
  padding: 3px 9px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .5);
}
.ea-vista { --rotulo: '\2726  PERSONAJE'; }
.ea-panel { --rotulo: '\2726  PERSONALIZAR'; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.ea-cabecera h1 {
  margin: 8px 0 6px;
  font-family: var(--font-pixel, monospace);
  font-size: clamp(16px, 3vw, 22px);
  color: var(--acento, #00f5d4);
  text-shadow: 0 0 12px rgba(0, 245, 212, .5), 3px 3px 0 rgba(0, 0, 0, .6);
}
.ea-cabecera p { color: var(--texto-secundario, #9a9ab0); margin: 0 0 22px; }
.ea-volver {
  font-family: var(--font-pixel, monospace);
  font-size: 9px;
  color: var(--texto-secundario, #9a9ab0);
  text-decoration: none;
}
.ea-volver:hover { color: var(--acento, #00f5d4); }

.ea-cuerpo { display: grid; grid-template-columns: 330px 1fr; gap: 26px; }

/* ── La ventana del retrato (el "ESTADO" del personaje) ───────────────────── */
.ea-vista { position: sticky; top: 16px; align-self: start; text-align: center; }
.ea-vista svg { image-rendering: pixelated; }

#ea-previa {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(0, 245, 212, .5);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 245, 212, .03) 3px 4px),
    #0a0b1c;
}
#ea-previa svg { display: block; width: 100%; height: auto; }

/* ── Los comandos (Sorpréndeme / GIF / Guardar) ───────────────────────────── */
.ea-acciones { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.ea-acciones button {
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--font-pixel, monospace);
  font-size: 8.5px;
  letter-spacing: .05em;
  color: #dfe6ff;
  background: #171a38;
  border: 2px solid #dfe6ff;
  border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: transform .1s steps(2), box-shadow .1s steps(2);
}
.ea-acciones button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .55);
}
.ea-acciones .principal {
  background: var(--acento, #00f5d4);
  color: #0d0f24;
  border-color: #0d0f24;
  font-weight: 700;
}
.ea-acciones button:disabled { opacity: 0.6; cursor: default; transform: none; }
#ea-estado {
  min-height: 1.4em;
  margin-top: 10px;
  font-family: var(--font-pixel, monospace);
  font-size: var(--pixel-xs);
  color: var(--acento, #00f5d4);
}

/* ── Las pestañas: la barra de comandos del menú ──────────────────────────── */
.ea-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ea-pestanas [role="tab"] {
  position: relative;
  font-family: var(--font-pixel, monospace);
  font-size: var(--pixel-xs);
  letter-spacing: .04em;
  padding: 9px 10px 9px 20px;
  color: var(--texto-secundario, #9a9ab0);
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
/* El cursor ▶ es marcado real con aria-hidden: conserva el gesto JRPG sin
   contaminar el nombre accesible de la pestaña. */
.ea-tab-cursor {
  position: absolute;
  left: 6px;
  color: var(--acento, #00f5d4);
  opacity: 0;
}
.ea-pestanas [role="tab"]:hover { color: #dfe6ff; }
.ea-pestanas [role="tab"]:hover .ea-tab-cursor { opacity: 1; }
.ea-pestanas [aria-selected="true"] {
  color: #dfe6ff;
  border-color: #dfe6ff;
  background: #171a38;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .5);
}
.ea-pestanas [aria-selected="true"] .ea-tab-cursor {
  opacity: 1;
  animation: ea-cursor 1s steps(2) infinite;
}
@keyframes ea-cursor { 50% { opacity: 0; } }

/* ── Las secciones y sus opciones ─────────────────────────────────────────── */
.ea-seccion h3 {
  margin: 14px 0 10px;
  font-family: var(--font-pixel, monospace);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--accent-movies, #f72585);
  text-shadow: 0 0 8px rgba(247, 37, 133, .4);
}
/* La rayita de separador de menú clásica, punteada. */
.ea-seccion h3::after {
  content: '';
  display: block;
  margin-top: 6px;
  border-bottom: 2px dashed rgba(223, 230, 255, .18);
}

.ea-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }

.ea-opcion {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px;
  min-height: 44px;
  border-radius: 6px;
  border: 2px solid rgba(223, 230, 255, .16);
  background: #10122a;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: transform .1s steps(2), border-color .1s steps(2);
}
.ea-opcion:hover { border-color: #dfe6ff; transform: translate(-1px, -1px); }
.ea-opcion svg { width: 64px; height: 64px; border-radius: 4px; image-rendering: pixelated; }
.ea-opcion .ea-nombre { font-size: 11.5px; color: var(--texto-secundario, #9a9ab0); }
.ea-opcion:hover .ea-nombre { color: #dfe6ff; }

/* La elegida: marco cian y su cursor ▶ parpadeando en la esquina. */
.ea-opcion.activa {
  border-color: var(--acento, #00f5d4);
  box-shadow: 0 0 10px rgba(0, 245, 212, .35), 3px 3px 0 rgba(0, 0, 0, .5);
}
.ea-opcion.activa::after {
  content: '\25B6';
  position: absolute;
  top: 4px;
  left: 5px;
  font-size: 9px;
  color: var(--acento, #00f5d4);
  animation: ea-cursor 1s steps(2) infinite;
}

.ea-aviso { text-align: center; padding: 48px 16px; }

.ea-opcion:focus-visible,
.ea-pestanas [role="tab"]:focus-visible,
.ea-acciones button:focus-visible { outline: 2px solid var(--acento, #00f5d4); outline-offset: 2px; }

@media (max-width: 760px) {
  .ea-cuerpo { grid-template-columns: 1fr; }
  /* `position: relative`, NO `static`: en escritorio .ea-vista es `sticky`
     (línea 83), que también sirve de ancla para su `::before` absoluto —
     el rótulo "✦ PERSONAJE" (línea 45). `static` no ancla nada: sin
     ningún ancestro posicionado por medio, el rótulo se sale de la
     ventana y se coloca contra el propio documento, colgando de <main> a
     -12px de su borde, bajo la navbar.

     `top: auto` es la otra mitad del arreglo, no un añadido suelto: la
     regla de escritorio (línea 83) trae `top: 16px` pegado al `sticky`
     para separarla de la navbar al pegarse arriba. `static` ignora ese
     `top` sin más — por eso nadie lo había notado — pero en cuanto se
     pasa a `relative` deja de ignorarse y empuja la ventana entera 16px
     hacia abajo, sin que se haya tocado su tamaño ni su contenido. Sin
     este `top: auto` el rótulo se arregla pero se abre un hueco nuevo
     encima de la ventana. */
  .ea-vista { position: relative; top: auto; }
  #ea-previa { max-width: 240px; margin-inline: auto; }
  .ea-vista svg { width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .editor-avatar * { transition: none !important; animation: none !important; }
  .ea-pestanas [aria-selected="true"] .ea-tab-cursor,
  .ea-opcion.activa::after { animation: none !important; opacity: 1; }
}