/* 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}
.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}

/* ---------- mesa de trabajo ----------
   La funda descansa sobre un pano, como en la mesa del taller; la bandeja de
   charms queda a un lado, al alcance. */
.ed-mesa{display:grid;gap:14px;justify-items:center;background:radial-gradient(120% 90% at 50% 30%,#fbf9f5 0%,var(--paper-2) 78%);
  border:1px solid var(--line);border-radius:22px;padding:22px 18px 18px}
.ed-lado{display:grid;gap:16px;align-content:start;min-width:0}

/* ---------- barra de acciones ---------- */
.ed-acciones{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.ed-btn{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;
  padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.55);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);background:#fff}
.ed-btn:disabled{opacity:.35;cursor:not-allowed}
.ed-btn:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.ed-btn.principal{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.ed-btn.principal:hover:not(:disabled){background:#2a2522;color:var(--paper)}

/* ---------- bandeja de charms ---------- */
.ed-bandeja{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px 14px 12px}
.ed-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px 14px;padding:0 14px}
.ed-cats::-webkit-scrollbar{display:none}
.ed-cat{flex:0 0 auto;background:none;border:1px solid transparent;border-radius:999px;padding:7px 12px;cursor:pointer;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;color:var(--taupe);transition:color .2s,background .2s,border-color .2s}
.ed-cat:hover{color:var(--ink);border-color:var(--line)}
.ed-cat[aria-pressed="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.ed-cat:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}

/* Cada charm descansa en su platito, como en el mostrador. */
.ed-tira{display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 8px;scroll-snap-type:x proximity}
.ed-tira::-webkit-scrollbar{height:3px}
.ed-tira::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ed-pieza{position:relative;flex:0 0 auto;width:78px;scroll-snap-align:start;border:0;border-radius:16px;background:none;
  padding:6px 4px 8px;cursor:pointer;text-align:center;transition:background .2s}
.ed-pieza::before{content:"";display:block;width:58px;height:58px;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fff 0%,var(--paper) 62%,var(--paper-2) 100%);box-shadow:inset 0 -2px 4px rgba(5,4,3,.06),0 1px 2px rgba(5,4,3,.08);
  transition:box-shadow .25s,background .25s}
.ed-pieza svg,.ed-pieza img{position:absolute;left:50%;top:13px;translate:-50% 0;width:40px;height:40px;object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(5,4,3,.22));transition:scale .3s cubic-bezier(.16,1,.3,1),rotate .3s cubic-bezier(.16,1,.3,1)}
.ed-pieza:hover::before{box-shadow:inset 0 -2px 4px rgba(5,4,3,.06),0 6px 14px -6px rgba(5,4,3,.35)}
.ed-pieza:hover svg,.ed-pieza:hover img{scale:1.12;rotate:-6deg}
.ed-pieza:active svg,.ed-pieza:active img{scale:.9}
.ed-pieza:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.ed-pieza .nb{display:block;font-size:.66rem;color:var(--char);margin-top:7px;line-height:1.25;font-weight:400;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Cuantos van puestos: un sello sobre el platito */
.ed-pieza .n-en-uso{position:absolute;top:2px;right:6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--maroon);color:#fff;
  font-family:var(--font-label);font-size:.6rem;letter-spacing:.04em;line-height:20px;box-shadow:0 2px 6px -2px rgba(146,41,57,.6)}
.ed-pieza .n-en-uso:empty{display:none}
.ed-pieza:has(.n-en-uso:not(:empty))::before{box-shadow:inset 0 0 0 1.5px var(--maroon),0 6px 14px -8px rgba(146,41,57,.5)}
.ed-pieza[disabled]{opacity:.35;cursor:not-allowed}

/* ---------- resumen: ticket ---------- */
.ed-resumen{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 16px;
  background:var(--ink);color:var(--paper);border-radius:22px;padding:18px 20px 16px;margin:0}
.ed-resumen .lbl{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:rgba(242,239,233,.7)}
.ed-resumen .val{font-family:var(--font-display);font-size:2rem;line-height:1;font-variant-numeric:lining-nums;text-align:right;color:var(--paper)}
.ed-resumen .val.sin{font-family:var(--font-label);font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:#f0c7cd}
.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:rgba(242,239,233,.72);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}

/* Computadora: funda a la izquierda (se queda a la vista al bajar), bandeja a la derecha */
@media(min-width:861px){
  .ed{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
  .ed-mesa{position:sticky;top:12px;padding:28px 22px 22px}
  .ed-case{height:min(52vh,460px);height:min(52dvh,460px)}
  .ed-tira{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;gap:2px}
  .ed-bandeja{max-height:min(56vh,520px);overflow:auto;scrollbar-width:thin}
  .ed-cats{position:sticky;top:-16px;background:#fff;z-index:2;margin-top:-16px;padding-top:16px;padding-bottom:10px;margin-bottom:6px}
  .ed-pieza{width:auto}
}
@media(max-width:860px){
  .ed-case{height:min(36vh,300px);height:min(36dvh,300px)}
  .ed-mesa{border-radius:18px;padding:16px 12px 14px}
  .ed-bandeja{border-radius:18px}
  .ed-pieza{width:72px}
  .ed-btn{padding:9px 11px;letter-spacing:.08em;font-size:.62rem}
}
@media(prefers-reduced-motion:reduce){
  .ed-charm.entra{animation:none}
  .ed-btn,.ed-pieza,.ed-pieza img,.ed-pieza svg{transition:none}
}