/* ===================================================================
   Editor de personalización — mobile first.

   La pantalla es una grilla de filas fijas con el lienzo en el medio:
   la barra de herramientas y la de compra quedan siempre al alcance del
   pulgar, y el lienzo toma lo que sobra sin que la página scrollee.
   Los paneles suben desde abajo (bottom sheet) en celular y se convierten
   en una columna lateral en escritorio.
   =================================================================== */

/* Los paneles se muestran y ocultan con el atributo `hidden`, y varios de
   ellos declaran display:flex/grid: sin esta regla la declaración de display
   le gana a `hidden` y quedarían todos abiertos a la vez. */
[hidden] { display: none !important; }

.ed {
  /* Alto de las dos barras de abajo: lo usa la hoja de paneles para apoyarse
     justo encima, sin taparlas. */
  --ed-bars: calc(52px + 62px + env(safe-area-inset-bottom));

  display: grid;
  grid-template-rows: auto 1fr auto auto;
  height: 100dvh;
  overflow: hidden;
}

/* ---------- Barra superior ---------- */
.ed-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-body);
}
.ed-title { flex: 1; min-width: 0; }
.ed-name-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--c-text);
  font-size: 15px;
  font-weight: 600;
  padding: 0;
}
.ed-name-input:focus { outline: none; }
.ed-saved { display: block; font-size: 11px; color: var(--c-muted); }
.ed-top-actions { display: flex; gap: .25rem; }

.ed-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--c-text);
  flex: none;
}
.ed-icon-btn:active { background: var(--c-surface); }
.ed-icon-btn:disabled { opacity: .3; }
.ed-icon-btn.ed-danger { color: #dc2626; }

/* ---------- Lienzo ---------- */
.ed-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .75rem;
  background: var(--c-surface);
  min-height: 0;
}
/* Vista previa: la foto del producto con el diseño calzado encima. El canvas
   se posiciona en porcentajes de la foto, así que acompaña cualquier tamaño. */
.ed-preview {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-height: 22vh;
}
.ed-product-photo {
  display: block;
  max-height: 22vh;
  width: auto;
  border-radius: var(--radius);
  object-fit: contain;
}
.ed-preview-canvas {
  position: absolute;
  pointer-events: none;
}
.ed-preview-zoom {
  position: absolute;
  right: .3rem;
  bottom: .3rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgb(255 255 255 / .92);
  color: #111;
  box-shadow: 0 2px 8px rgb(0 0 0 / .3);
}

/* Ampliada: la foto se despega del lienzo y se pone al medio de la pantalla.
   El canvas del diseño está posicionado en porcentajes, así que acompaña el
   tamaño nuevo sin tocar una sola medida. Las dos reglas llevan doble clase
   para ganarle al alto de siempre sin depender del orden del archivo. */
.ed-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgb(0 0 0 / .72);
}
.ed-preview.ed-preview-big {
  position: fixed;
  z-index: 56;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 88dvh;
  max-width: 94vw;
}
.ed-preview.ed-preview-big .ed-product-photo {
  max-height: 88dvh;
  max-width: 94vw;
  width: auto;
}
.ed-canvas-wrap {
  /* El canvas se escala por JS al ancho disponible: acá sólo lo encuadramos */
  max-width: 100%;
  box-shadow: 0 6px 24px rgb(0 0 0 / .12);
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}
.ed-hint {
  font-size: 11px;
  color: var(--c-muted);
  text-align: center;
  max-width: 34rem;
}

/* ---------- Barra del objeto seleccionado ---------- */
.ed-object-bar {
  display: flex;
  justify-content: center;
  gap: .25rem;
  padding: .25rem;
  border-top: 1px solid var(--c-border);
  background: var(--c-body);
}

/* ---------- Herramientas ---------- */
.ed-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--c-border);
  background: var(--c-body);
}
.ed-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .5rem 0;
  min-height: 52px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
}
.ed-tool[data-on="1"] { color: var(--c-text); }
.ed-tool[data-on="1"] svg { transform: translateY(-1px); }

/* ---------- Barra de compra ---------- */
.ed-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-border);
  background: var(--c-body);
}
.ed-price { display: flex; flex-direction: column; min-width: 0; }
.ed-price-value { font-size: 18px; font-weight: 700; }
.ed-price-note { font-size: 11px; color: var(--c-muted); }

/* ---------- Paneles ---------- */
.ed-panels { position: fixed; inset: 0; z-index: 40; pointer-events: none; }

/* La hoja se apoya arriba de las dos barras fijas en vez de taparlas: así se
   cambia de herramienta sin tener que cerrarla primero. */
.ed-tools, .ed-bottom { position: relative; z-index: 45; }

.ed-panel {
  position: absolute;
  inset: auto 0 var(--ed-bars, 112px) 0;
  max-height: 58dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-body);
  border-top: 1px solid var(--c-border);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgb(0 0 0 / .18);
  pointer-events: auto;
  animation: ed-rise .22s cubic-bezier(.4, 0, .2, 1);
}
@keyframes ed-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ed-panel { animation: none; } }

.ed-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .5rem .5rem 1rem;
  border-bottom: 1px solid var(--c-border);
}
.ed-panel-head h2 {
  font-family: var(--font-heading), system-ui, sans-serif;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--c-heading);
}
.ed-panel-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ed-row { display: flex; align-items: center; gap: .75rem; }
.ed-row .label { margin: 0; flex: none; width: 5.5rem; }
.ed-row-split { display: flex; justify-content: space-between; gap: .5rem; }
.ed-range { flex: 1; accent-color: var(--c-button); height: 44px; }

.ed-mini {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 40px;
  padding: 0 .6rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
}
.ed-mini[data-on="1"] { border-color: var(--c-button); background: var(--c-surface); }
.ed-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Tipografías: una lista con la muestra escrita en su propia fuente */
.ed-font-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-height: 11rem;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: .4rem;
}
.ed-font-group {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-muted);
  padding: .4rem .4rem .1rem;
}
.ed-font {
  text-align: left;
  padding: .55rem .6rem;
  border-radius: var(--radius);
  font-size: 17px;
  min-height: 44px;
}
.ed-font[data-on="1"] { background: var(--c-surface); box-shadow: inset 0 0 0 1.5px var(--c-button); }

/* Los textos del diseño, listados en el panel donde se editan */
.ed-text-list { display: flex; flex-direction: column; gap: .35rem; }
.ed-text-item {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding-left: .6rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  min-height: 48px;
}
.ed-text-item[data-on="1"] { border-color: var(--c-button); background: var(--c-surface); }
.ed-text-pick {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 15px;
  padding: .5rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fila del objeto seleccionado dentro de un panel */
.ed-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-left: .75rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--c-muted);
}

/* Buscador de figuras */
.ed-search { position: relative; }
.ed-search svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--c-muted); }
.ed-search .field { padding-left: 2.2rem; }

.ed-cats { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.ed-chip {
  flex: none;
  padding: .45rem .8rem;
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  font-size: 13px;
  min-height: 40px;
}
.ed-chip[data-on="1"] { background: var(--c-button); color: var(--c-button-text); border-color: var(--c-button); }

.ed-assets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  max-height: 40dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ed-asset {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: .5rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
}
.ed-asset:active { border-color: var(--c-button); }
.ed-asset img { max-width: 100%; max-height: 100%; }
.ed-empty, .ed-loading { font-size: 13px; color: var(--c-muted); text-align: center; padding: 1rem 0; }

/* Capas */
.ed-layers { display: flex; flex-direction: column; gap: .35rem; }
.ed-layer {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  min-height: 52px;
}
.ed-layer[data-on="1"] { border-color: var(--c-button); background: var(--c-surface); }
.ed-layer-name { flex: 1; min-width: 0; text-align: left; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-layer-thumb { width: 34px; height: 34px; display: grid; place-items: center; background: var(--c-surface); border-radius: 6px; flex: none; }
.ed-layer-thumb img { max-width: 80%; max-height: 80%; }
/* Tres botones más el nombre no entran en un teléfono angosto con el ancho
   de siempre; lo justo para el dedo sigue siendo el alto. */
.ed-layer .ed-icon-btn { width: 38px; }

/* Capa de espera */
.ed-busy {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / .45);
}
.ed-busy-box {
  background: var(--c-body);
  border-radius: var(--radius);
  padding: 1.4rem 1.8rem;
  font-size: 14px;
  font-weight: 600;
}

/* ===================================================================
   Escritorio: el panel deja de ser una hoja y pasa a columna fija a la
   derecha, con el lienzo al lado. No cambia nada del comportamiento.
   =================================================================== */
@media (min-width: 900px) {
  .ed {
    grid-template-columns: 1fr 380px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "top    panels"
      "stage  panels"
      "bottom panels";
  }
  .ed-top { grid-area: top; }
  .ed-stage { grid-area: stage; }
  .ed-bottom { grid-area: bottom; }

  /* Acá la barra del objeto flota sobre el lienzo en vez de ocupar una fila:
     si compartiera celda con la barra de compra, se pisarían. */
  .ed-object-bar {
    grid-area: stage;
    align-self: end;
    justify-self: center;
    margin-bottom: .75rem;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgb(0 0 0 / .12);
  }

  .ed-panels {
    grid-area: panels;
    position: relative;
    inset: auto;
    /* En el celular la hoja flota por encima de todo (z-index 40). Acá es una
       columna más de la grilla, y ese z-index heredado le pasaba por encima a
       las solapas: estaban dibujadas, pero tapadas por el fondo del panel.
       Resultado: en escritorio no se podía entrar a Figuras ni a Capas. */
    z-index: auto;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--c-border);
    background: var(--c-body);
    pointer-events: auto;
    overflow: hidden;
  }
  .ed-panel {
    position: static;
    inset: auto;
    max-height: none;
    flex: 1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
  .ed-panel-head [data-close-panel] { display: none; }

  /* Las herramientas pasan a ser solapas arriba de la columna */
  .ed-tools {
    grid-area: panels;
    align-self: start;
    position: relative;
    z-index: 1;
    border-left: 1px solid var(--c-border);
  }
  .ed-panels { padding-top: 52px; }

  .ed-assets { grid-template-columns: repeat(4, 1fr); max-height: none; }
  .ed-product-photo, .ed-preview { max-height: 26vh; }
}