/* Un panel movido conserva su espacio lógico: el lienzo no se encoge ni salta de columna. */
.pfe-panel.is-floating {
  position: relative;
  z-index: 20;
  max-height: calc(100dvh - 12px);
  overflow: auto;
  box-shadow: 0 24px 70px #0008;
}

.pfe-panel.is-floating .pfe-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pfe-panel.is-floating .pfe-tools button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Al flotar, las herramientas mantienen todas sus opciones pero ocupan menos espacio. */
.pfe-panel.is-floating {
  width: min(360px, calc(100vw - 12px)) !important;
  max-height: min(540px, calc(100dvh - 20px));
  border-radius: 14px;
  scrollbar-gutter: stable;
}

.pfe-panel.is-floating > summary {
  min-height: 44px;
  padding: 0 10px;
  font-size: .9rem;
}

.pfe-panel.is-floating .pfe-panel-body {
  gap: 7px;
  padding: 9px;
}

.pfe-panel.is-floating .pfe-field {
  gap: 2px;
  font-size: .74rem;
}

.pfe-panel.is-floating button {
  min-height: 33px;
  padding: 5px 7px;
  font-size: .78rem;
}

.pfe-panel.is-floating .pfe-field input[type=color] {
  height: 30px;
}

.pfe-panel.is-floating .pfe-library {
  max-height: 190px;
}

/* Densidad compacta permanente: se conservan todas las funciones, no el tamaño excesivo. */
.pfe-panel {
  max-height: min(560px, calc(100dvh - 24px));
  overflow: auto;
  scrollbar-gutter: stable;
}

.pfe-panel > summary {
  min-height: 43px !important;
  padding: 0 10px !important;
  font-size: .88rem !important;
}

.pfe-panel-body {
  gap: 7px !important;
  padding: 9px !important;
}

.pfe-panel .pfe-field {
  gap: 2px !important;
  font-size: .74rem !important;
}

.pfe-panel button {
  min-height: 32px !important;
  padding: 5px 7px !important;
  font-size: .76rem !important;
  line-height: 1.15;
}

.pfe-panel .pfe-field input[type=color] {
  height: 30px !important;
}

.pfe-panel .pfe-library {
  max-height: 170px !important;
}

.pfe-panel .pfe-categories button {
  min-height: 27px !important;
  font-size: .66rem !important;
}

.pfe-panel .pfe-actions {
  gap: 5px;
}

/* La bandera, no un rectángulo blanco, es la protagonista en la vista ampliada. */
.pfe-lightbox-card {
  width: min(1240px, 100%) !important;
}

.pfe-lightbox-card canvas {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: calc(100dvh - 290px) !important;
  background: transparent !important;
}

.pfe-global-save {
  position: fixed;
  right: 82px;
  bottom: 18px;
  z-index: 8500;
  min-height: 48px !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 30px #0008;
}

.album-sector-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.album-sector-nav button {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text);
  font-weight: 900;
}

.album-sector-nav button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #142033;
}

.pfe-choice-actions { display:grid; gap:10px; margin:20px 0 6px; }
.pfe-champion-library { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; max-height:46vh; overflow:auto; margin:16px 0; }
.pfe-champion-card { display:grid; gap:6px; min-width:0; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--surface2); color:var(--text); text-align:left; }
.pfe-champion-card img { width:100%; aspect-ratio:3/2; object-fit:contain; background:#fff; border-radius:7px; }
.pfe-champion-card b,.pfe-champion-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pfe-champion-card small { color:var(--muted); }
.hub-card.creator { background:linear-gradient(135deg,#7750be,#1f748b); }

/* Todas las miniaturas muestran primero su PNG real; el movimiento no depende
   de abrir un contexto WebGL por cada tarjeta. */
.pfe-card-flag { overflow:hidden; border-radius:10px; aspect-ratio:3/2; background:#fff; }
.pfe-card-flag img { display:block; width:100%; height:100%; object-fit:contain; transform-origin:left center; animation:pfe-thumb-wave 2.8s ease-in-out infinite; }
.pfe-card { display:grid; gap:8px; }
.pfe-card-open { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; }
.pfe-card-open h3 { margin:10px 0 4px; }
.pfe-card-open p,.pfe-card-open small { color:var(--muted); }
.pfe-delete { width:100%; min-height:34px; border:1px solid #d85b5b88; border-radius:9px; background:#7e263133; color:#ffd9d9; font-weight:800; }
.pfe-delete:hover { background:#9b303f66; }
@keyframes pfe-thumb-wave { 0%,100% { transform:perspective(700px) rotateY(0deg) skewY(0deg); filter:brightness(1); } 50% { transform:perspective(700px) rotateY(-3.2deg) skewY(.5deg); filter:brightness(1.05); } }
:root[data-motion="reduced"] .pfe-card-flag img { animation:none; }

@media(max-width:700px) {
  .pfe-global-save { right:74px; bottom:12px; min-height:44px !important; padding:9px 13px !important; }
  .pfe-champion-library { grid-template-columns:1fr; }
}