/* Editor de charms de ASTÉRIA.
   Mismos tokens que index.html: no define colores propios, los hereda. */

/* En el paso del editor la pantalla es el taller: el titulo se encoge para que
   la funda y la bandeja de charms quepan juntas, sin scroll entre una y otra. */
/* .pick2 es grid: el atributo hidden por si solo no lo oculta. */
.pick2[hidden]{display:none}

.fstep.ed-modo .fstep-head{margin-bottom:16px}
.fstep.ed-modo .fstep-head h2{font-size:clamp(1.5rem,3vw,1.9rem)}
.fstep.ed-modo .fstep-head p{display:none}
.fstep.ed-modo .turnstile-wrap{margin:14px 0 0}

/* minmax(0,1fr): sin esto la tira de 60 charms estira la columna del grid a
   varios miles de px y la funda se va fuera de la pantalla. */
.ed{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.ed-bandeja,.ed-tira,.ed-cats{min-width:0}

/* ---------- lienzo ---------- */
/* Sin touch-action aqui: el lienzo ocupa casi toda la pantalla del telefono y
   con "none" el dedo no podia hacer scroll para llegar a la bandeja de charms.
   El bloqueo vive solo en cada pieza, que es lo que si se arrastra. */
.ed-stage{position:relative;display:grid;place-items:center;min-height:0;padding:4px 0}
/* La funda se dimensiona por altura: la bandeja de charms tiene que caber en la
   misma pantalla, sin hacer scroll para ir por una pieza y volver. */
/* La proporcion la pone el editor segun el modelo; aqui solo el tamano. */
/* Sin filter en la caja: la foto ya trae su sombra, y un drop-shadow sobre una
   imagen grande que se desplaza es otro candidato al parpadeo negro en movil. */
.ed-case{position:relative;height:min(38vh,340px);height:min(38dvh,340px);width:auto;aspect-ratio:.54/1;
  -webkit-user-select:none;user-select:none}
.ed-case svg,.ed-case .ed-foto{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}

/* Zona donde sí se pueden poner charms. La cámara queda fuera a propósito:
   un charm ahí taparía el lente y en el taller no se pega. */
/* La caja de charms cubre toda la funda por dentro; lo que la camara ocupa se
   descuenta en el editor segun el modelo, no recortando la caja. Antes empezaba
   debajo de la camara y la franja de al lado quedaba dibujada pero inservible. */
/* Casi al ras de la funda: antes quedaba un margen de 6% que, sumado al tope
   del arrastre, dejaba sin usar como un 11% de cada lado. Si cambian estos
   valores hay que cambiar AREA en editor.js. */
.ed-area{position:absolute;left:4%;top:2.5%;width:92%;height:95%}

/* Cada pieza se mide por el lado que trae anotado el taller: --w cuando la
   medida es de ancho o diametro, --h cuando es de largo. El otro lado sale de
   la proporcion de la foto, sin deformarla. */
.ed-charm{position:absolute;transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  cursor:grab;touch-action:none;transition:filter .2s}
/* El lado que trae medida del taller manda; el otro sale de la proporcion de la
   foto. La clase la pone el editor: antes esto dependia de leer el atributo
   style, y al girar la pieza cambiaba de tamano. */
/* aspect-ratio y no width:auto: un elemento absoluto con width:auto se encoge
   segun el espacio que le queda al lado, asi que la pieza cambiaba de tamano
   al moverla a la orilla (medido: 26px al centro, 13px al 90%). */
.ed-charm.ed-ancho{width:var(--w,13%);height:auto;aspect-ratio:var(--ar,1)}
.ed-charm.ed-alto{height:var(--h,18%);width:auto;aspect-ratio:var(--ar,1)}
.ed-charm svg,.ed-charm img{display:block;object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(5,4,3,.35));pointer-events:none}
.ed-charm svg,.ed-charm img{width:100%;height:100%}
/* La foto del charm no se deforma: el lado que trae medida del taller manda y
   el otro sale de la proporcion de la imagen. */
.ed-charm img{object-fit:contain}
/* Voltear (espejo): solo la pieza, no los botones */
.ed-charm.volteado>img,.ed-charm.volteado>svg{transform:scaleX(-1)}
.ed-tool.voltear{font-size:15px}
.ed-charm.dragging{cursor:grabbing;z-index:20}
/* La pieza se asienta, no rebota: cae y frena, como algo que se pega. */
.ed-charm.entra{animation:edPop .34s cubic-bezier(.16,1,.3,1)}
@keyframes edPop{from{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.72)}
  to{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)}}

.ed-charm::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px dashed transparent;transition:border-color .2s}
.ed-charm.sel::after{border-color:var(--ink)}
.ed-charm:focus-visible{outline:none}
.ed-charm:focus-visible::after{border-color:var(--maroon);border-style:solid}

/* controles del charm seleccionado */
.ed-tool{position:absolute;width:28px;height:28px;border-radius:50%;border:1px solid var(--ink);background:var(--paper);
  display:grid;place-items:center;cursor:pointer;padding:0;line-height:1;font-size:.85rem;color:var(--ink);z-index:22}
.ed-tool:hover{background:var(--ink);color:var(--paper)}
.ed-tool:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.ed-tool.quitar{border-color:var(--maroon);color:var(--maroon)}
.ed-tool.quitar:hover{background:var(--maroon);color:#fff}
.ed-tool.girar{cursor:grab}
.ed-tool.girar.dragging{cursor:grabbing}

/* Mismo motivo que en las tarjetas: nada de rectangulo gris al tocar. */
.ed-charm,.ed-tool,.ed-btn,.ed-cat,.ed-pieza{-webkit-tap-highlight-color:transparent}

/* ---------- barra de acciones ---------- */
.ed-acciones{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.ed-btn{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;
  padding:9px 16px;border:1px solid var(--line);background:none;color:var(--char);cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.ed-btn:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.ed-btn:disabled{opacity:.4;cursor:not-allowed}
.ed-btn:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.ed-btn.principal{border-color:var(--ink);color:var(--ink)}
.ed-btn.principal:hover{background:var(--ink);color:var(--paper)}

/* ---------- bandeja de charms ---------- */
.ed-bandeja{border-top:1px solid var(--line);padding-top:14px}
.ed-cats{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
.ed-cats::-webkit-scrollbar{display:none}
.ed-cat{flex:0 0 auto;background:none;border:none;padding:4px 0;cursor:pointer;position:relative;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--taupe);transition:color .2s}
.ed-cat::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--maroon);
  transform:scaleX(0);transform-origin:left center;transition:transform .25s}
.ed-cat:hover{color:var(--char)}
.ed-cat[aria-pressed="true"]{color:var(--ink)}
.ed-cat[aria-pressed="true"]::after{transform:scaleX(1)}
.ed-cat:focus-visible{outline:2px solid var(--maroon);outline-offset:3px}

.ed-tira{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px;scroll-snap-type:x proximity}
.ed-tira::-webkit-scrollbar{height:3px}
.ed-tira::-webkit-scrollbar-thumb{background:var(--line)}
.ed-pieza{flex:0 0 auto;width:74px;scroll-snap-align:start;border:1px solid var(--line);background:var(--paper);
  padding:8px 6px 6px;cursor:pointer;text-align:center;transition:border-color .2s,transform .2s,background .2s}
.ed-pieza:hover{border-color:var(--ink);transform:translateY(-2px)}
.ed-pieza:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.ed-pieza svg,.ed-pieza img{width:38px;height:38px;margin:0 auto;display:block;object-fit:contain}
.ed-pieza .nb{display:block;font-size:.66rem;color:var(--taupe);margin-top:6px;line-height:1.25;font-weight:300}
.ed-pieza .n-en-uso{display:block;font-family:var(--font-label);font-size:.62rem;letter-spacing:.1em;color:var(--maroon);min-height:.9em}
.ed-pieza[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- resumen ---------- */
.ed-resumen{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 16px;
  border-top:1px dashed var(--line);margin-top:14px;padding-top:14px}
.ed-resumen .lbl{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--taupe)}
.ed-resumen .val{font-family:var(--font-display);font-size:1.6rem;line-height:1;font-variant-numeric:lining-nums;text-align:right}
.ed-resumen .val.sin{font-family:var(--font-label);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--maroon)}
.ed-resumen{position:relative}
.ed-resumen .val{transition:opacity .25s;display:inline-block;transform-origin:right center}
.ed-resumen .val.late{animation:edLate .5s cubic-bezier(.22,1,.36,1)}
.ed-resumen .val.cambia{animation:edFade .35s ease}
.ed-dif{position:absolute;right:0;top:-6px;font-family:var(--font-label);font-size:.78rem;letter-spacing:.08em;padding:3px 9px;border-radius:999px;
  pointer-events:none;animation:edFlota 1.15s cubic-bezier(.22,1,.36,1) forwards}
.ed-dif.mas{background:#2f6b3a;color:#fff}
.ed-dif.menos{background:var(--maroon,#922939);color:#fff}
@keyframes edLate{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes edFade{from{opacity:.3}to{opacity:1}}
@keyframes edFlota{0%{opacity:0;transform:translateY(8px)}18%{opacity:1;transform:translateY(0)}70%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
@media (prefers-reduced-motion:reduce){.ed-dif{display:none}}
.ed-resumen.cotizando .val{opacity:.45}
.ed-resumen .nota{grid-column:1/-1;font-size:.78rem;color:var(--taupe);font-weight:300}

.ed-ayuda{text-align:center;font-size:.8rem;color:var(--taupe);font-weight:300;margin-top:-4px}
.ed-aviso{text-align:center;font-size:.74rem;color:var(--maroon);font-weight:300;margin-top:8px}

@media(max-width:900px){
  .ed-case{height:min(34vh,280px);height:min(34dvh,280px)}
  .ed-pieza{width:66px}
  .ed-pieza svg,.ed-pieza img{width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){
  .ed-charm.entra{animation:none}
  .ed-btn,.ed-pieza,.ed-cat::after{transition:none}
}