/* =====================================================================
   editor-nuevo.css · el editor de personalización propio.

   Ojo: `editor.css` es el del editor viejo (FPD) y sigue en uso. Este es
   aparte a propósito, para que los dos convivan hasta que se apague aquel.

   Pantalla propia: sin cabecera ni pie de la tienda. En escritorio el
   recorrido es un acordeón a la derecha; en móvil, una hoja inferior.
   ===================================================================== */

/* La página del editor NO se amplía: el pellizco es para el diseño, no para la
   pantalla. `maximum-scale` del viewport lo pasa por alto iOS desde hace años,
   así que el freno de verdad son estas tres cosas: `pan-x pan-y` deja el
   desplazamiento pero quita el pellizco y el doble toque para ampliar,
   `text-size-adjust` impide que el sistema recrezca la letra al girar, y los
   eventos `gesture*` de Safari se cortan en el JS de la página. */
.ed-body {
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* Rejilla de dos columnas: el lienzo ocupa la izquierda entera, y a la derecha
   la barra del producto encima del panel. Con grid las tres piezas se colocan
   sin superponerse y sin reservar huecos a mano. */
.ed {
  position: fixed; inset: 0; z-index: 60;
  display: grid;
  grid-template-columns: 1fr min(34%, 340px);
  grid-template-rows: auto 1fr;
  background: #fff;
  font-family: var(--mc-font-body, system-ui, sans-serif);
}

/* ---------- lienzo ----------
   Blanco, y el gris se lo queda el menú: el fondo del lienzo era el más oscuro
   de los dos y la funda quedaba metida en un pozo. Ahora el claro está donde se
   diseña y el gris donde se elige, con las tarjetas y los campos en blanco
   encima. */
.ed__lienzo {
  grid-column: 1; grid-row: 1 / -1;
  min-width: 0; min-height: 0; position: relative;
  display: grid; place-items: center; padding: 1rem;
  background: #fff;
  /* Red de seguridad: si el canvas se pasara de su hueco no debe asomar sobre
     el menú, o se tragaría los toques. */
  overflow: hidden;
}
.ed__lienzo canvas { max-width: 100%; touch-action: none; }

/* Entrada: la funda llega acercada y se posa en su sitio. De paso tapa el rato
   en que las capas —fondo, molde, mockup— van cayendo una a una, que sin esto
   se veía montarse a trozos. La quita el JS cuando el producto ya está puesto;
   si algo fallara, un temporizador la retira igual. */
.ed__lienzo .canvas-container {
  transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .5s ease-out;
}
.ed__lienzo.is-entrando .canvas-container {
  transform: scale(1.6); opacity: 0; pointer-events: none;
}

/* Los botones que flotan sobre el lienzo van en gris, no en blanco: ahora que
   el fondo también es blanco, un botón blanco solo se veía por su sombra. */
.ed__salir {
  position: absolute; top: .8rem; left: .8rem; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: #f2f2f5; border: 1px solid rgba(22,22,26,.1); color: #16161a;
  display: grid; place-items: center; cursor: pointer; font-size: 1rem;
}
.ed__salir:hover { background: #16161a; color: #fff; }


/* aviso de modelo agotado: se ve desde el primer momento, no al pagar */
.ed__agotado {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 4; max-width: min(88%, 340px);
  display: flex; flex-direction: column; gap: .25rem; text-align: center;
  background: #dc2626; color: #fff; padding: .8rem 1.1rem; border-radius: 12px;
  box-shadow: 0 6px 20px rgba(220,38,38,.35);
}
.ed__agotado[hidden] { display: none; }
.ed__agotado b { font-size: .95rem; }
.ed__agotado span { font-size: .8rem; opacity: .92; line-height: 1.35; }

/* deshacer y rehacer */
.ed__historial {
  position: absolute; top: .8rem; right: .8rem; z-index: 3; display: flex; gap: .4rem;
}
.ed-hbtn {
  width: 34px; height: 34px; border-radius: 50%;
  background: #f2f2f5; border: 1px solid rgba(22,22,26,.1); color: #16161a;
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.ed-hbtn:hover:not(:disabled) { background: #16161a; color: #fff; }
.ed-hbtn:disabled { opacity: .35; cursor: default; }


/* ---------- capas: un tramo más del menú ----------
   Estuvo flotando sobre el lienzo y tapaba el diseño justo cuando se querían
   reordenar las piezas. Ahora vive en el panel, con los demás. */
.ed-capas__ayuda { margin: 0 0 .5rem; font-size: .74rem; color: #76767f; }
.ed-capas__lista { list-style: none; margin: 0; padding: 0; }
.ed-capas__vacio { font-size: .78rem; color: #76767f; padding: .2rem 0 .4rem; }

.ed-capa {
  display: flex; align-items: center; gap: .25rem;
  border: 1px solid rgba(22,22,26,.1); border-radius: 9px;
  margin-bottom: .3rem; padding: .2rem .25rem .2rem .1rem; background: #fff;
}
/* La seleccionada se marca con el borde: en gris se confundiría con el panel */
.ed-capa.is-on { border-color: #16161a; }
.ed-capa__n {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem;
  background: none; border: none; padding: .35rem .4rem; cursor: pointer;
  font: inherit; font-size: .78rem; color: inherit; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-capa__n i { color: #76767f; flex: none; }
.ed-capa.is-on .ed-capa__n { font-weight: 650; }
.ed-capa__f {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid rgba(22,22,26,.12); background: #fff; color: #16161a;
  cursor: pointer; font-size: .72rem; line-height: 1; padding: 0;
}
.ed-capa__f:hover:not(:disabled) { background: #16161a; color: #fff; }
.ed-capa__f:disabled { opacity: .25; cursor: default; }

/* ---------- columna derecha ----------
   El gris de la casa, un punto más claro que el que tenía el lienzo: sobre él
   las tarjetas, los campos y los botones —todos blancos— se leen como piezas
   sueltas y no como un bloque. */
.ed__lado {
  grid-column: 2; grid-row: 2;
  display: flex; flex-direction: column; min-height: 0;
  background: #f5f5f7; border-left: 1px solid rgba(22,22,26,.1);
  overflow: hidden;
}

.ed__barra {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; gap: .6rem; min-width: 0;
  background: #16161a; color: #f7f7f8; padding: .65rem .7rem;
  border-left: 1px solid rgba(22,22,26,.1);
}
.ed__nom { flex: 1; min-width: 0; font-size: .8rem; line-height: 1.25; }
.ed__nom b { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed__nom span { display: block; opacity: .72; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed__anadir {
  flex: none; background: #d5f200; color: #16161a; border: none;
  font-weight: 700; font-size: .8rem; padding: .55rem .9rem; border-radius: 99px; cursor: pointer;
}
.ed__anadir:disabled { opacity: .45; cursor: not-allowed; }

.ed__pasos { flex: 1; overflow-y: auto; min-height: 0; }

/* ---------- un tramo del recorrido ---------- */
.ed-tramo { border-bottom: 1px solid rgba(22,22,26,.1); }
.ed-tramo[hidden] { display: none; }
.ed-tramo__h {
  width: 100%; min-width: 0; display: flex; align-items: center; gap: .6rem;
  padding: .85rem .9rem; background: none; border: none; cursor: pointer;
  text-align: left; color: inherit; font: inherit;
}
/* Un velo, no un color: sobre el gris del panel, otro gris del mismo palo no se
   distinguiría. */
.ed-tramo__h:hover { background: rgba(22,22,26,.05); }
.ed-tramo__h:focus-visible { outline: 2px solid #d5f200; outline-offset: -2px; }
.ed-tramo__n { font-family: var(--mc-font-display, inherit); font-weight: 700; font-size: .9rem; color: #9a9aa4; min-width: 1.6em; }
.ed-tramo__t { flex: 1; min-width: 0; font-weight: 650; font-size: .95rem; }
.ed-tramo__s { font-size: .78rem; color: #76767f; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.ed-tramo.is-on .ed-tramo__h { background: rgba(22,22,26,.05); }
.ed-tramo.is-on .ed-tramo__n { color: #16161a; }
.ed-tramo__c { display: none; padding: 0 .9rem 1rem; }
.ed-tramo.is-on .ed-tramo__c { display: block; }

.ed-cargando, .ed-error { font-size: .82rem; color: #76767f; margin: .3rem 0; }
.ed-error { color: #dc2626; }

/* 01 · estuches: UNA fila que se desplaza de lado, nunca parte en dos.
   El ancho sale de una división con decimales a propósito: así entran tres y
   *asoma* la cuarta, que es lo que dice que hay más y se puede seguir. Si
   cupieran justas parecería que se acabó ahí. */
.ed-lineas { display: flex; gap: .5rem; }
.ed-linea {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  border: 1px solid rgba(22,22,26,.12); border-radius: 10px; padding: .4rem .3rem .5rem;
  background: #fff; cursor: pointer; font: inherit; color: inherit;
}
/* El ancho va con doble clase a propósito: `.ed-tira > *` deja los hijos en
   `flex: 0 0 auto` y, al ir después en la hoja, ganaba el empate y las tarjetas
   se quedaban del tamaño de su texto — 50 px.
   En píxeles y no en porcentaje: dentro de un contenedor que se desplaza, el
   100 % no se resuelve contra el ancho visible. Con 96 entran tres y asoma la
   cuarta, que es lo que dice que hay más. */
.ed-lineas.ed-tira > .ed-linea { flex: 0 0 96px; }
.ed-linea:hover { border-color: #16161a; }
.ed-linea.is-on { border-color: #16161a; box-shadow: inset 0 0 0 1px #16161a; }
.ed-linea__img { width: 100%; aspect-ratio: 1; border-radius: 7px; background: #e8e8ec center/cover no-repeat; }
.ed-linea__cod { font-size: .72rem; font-weight: 700; font-family: ui-monospace, monospace; }
.ed-linea__precio { font-size: .68rem; color: #76767f; }

/* Tiras de opciones: se desplazan en horizontal y NUNCA parten en dos filas.
   Con dos filas el menú crece hacia abajo y en móvil se come el lienzo. */
/* `overflow-x` va en !important porque es lo que sostiene todo esto: si otra
   regla lo pone en `visible`, la tira desborda su caja, el panel entero se
   vuelve arrastrable y al mover los stickers se van las categorías con ellos.
   Ya pasó una vez. `min-width: 0` evita que la tira ensanche a su padre. */
.ed-tira {
  display: flex; gap: .35rem; padding-bottom: .3rem;
  overflow-x: auto !important; overflow-y: hidden;
  min-width: 0; max-width: 100%;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.ed-tira::-webkit-scrollbar { height: 4px; }
.ed-tira::-webkit-scrollbar-thumb { background: rgba(22,22,26,.2); border-radius: 99px; }
.ed-tira > * { flex: 0 0 auto; scroll-snap-align: start; }

/* Las tiras cuya selección se marca con un anillo POR FUERA de la pieza —el
   estuche y el color— necesitan sitio para él. `overflow-y: hidden` recorta en
   la caja de relleno, así que sin relleno el anillo se quedaba sin su parte de
   arriba, y sin desplazar la tira, el de la primera pieza sin la de la
   izquierda. El margen negativo devuelve la tira a su sitio para que siga
   alineada con el resto del tramo, y el `max-width` se ensancha otro tanto o la
   tira acabaría estrecha y descentrada.
   4 px es lo que más sobresale (el color: 2 de trazo y 2 de separación); .35rem
   deja algo de aire por encima de eso. */
.ed-lineas.ed-tira,
.ed-colores.ed-tira {
  padding: .35rem; margin: -.35rem;
  max-width: calc(100% + .7rem);
}

/* 02 · teléfonos: marca y modelo en desplegables */
.ed-dos { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.ed-chip {
  font-size: .76rem; padding: .3rem .65rem; border-radius: 99px;
  border: 1px solid rgba(22,22,26,.12); background: #fff; cursor: pointer;
  font-family: inherit; color: inherit; white-space: nowrap;
}
.ed-chip.is-on { background: #16161a; color: #fff; border-color: #16161a; }
.ed-modelo__pocos { font-size: .72rem; color: #dc2626; margin: .45rem 0 0; }
/* El mismo hueco sirve para avisar de que falta elegir modelo, y eso no es una
   alarma: en gris, como el resto de las notas. */
.ed-modelo__pocos.is-nota { color: #76767f; }

/* 03 · colores */
.ed-colores { display: flex; flex-wrap: wrap; gap: .55rem; }
.ed-color {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(22,22,26,.2); padding: 0;
}
.ed-color.is-on { outline: 2px solid #16161a; outline-offset: 2px; }
.ed-color.is-agotado { opacity: .35; cursor: not-allowed; }

/* Cualquier otro color: el selector del sistema, con la rueda del móvil */
.ed-color--libre {
  padding: 0; background: none; overflow: hidden;
  border: 2px dashed rgba(22,22,26,.3);
}
.ed-color--libre::-webkit-color-swatch-wrapper { padding: 2px; }
.ed-color--libre::-webkit-color-swatch { border: none; border-radius: 50%; }
.ed-color--libre::-moz-color-swatch { border: none; border-radius: 50%; }
.ed-color--libre:hover { border-color: #16161a; }

/* 04 · tu foto */
/* El botón, el aviso y las fotos ya subidas. En columna aquí; en el móvil la
   misma caja los pone en fila (más abajo, en la consulta de medios). */
.ed-carrete { display: flex; flex-direction: column; gap: .5rem; }
/* El aviso va arriba del todo y sólo ocupa sitio cuando dice algo: si no, un
   párrafo vacío deja un hueco y el botón baja al empezar a subir la foto. */
.ed-carrete > .ed-aviso { margin: 0; }
.ed-carrete > .ed-aviso:empty { display: none; }
/* `position: relative` para que el campo de archivo escondido dentro cuelgue de
   la propia pastilla y no de la pantalla entera. */
.ed-subir {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  border: 1.5px dashed rgba(22,22,26,.22); border-radius: 12px;
  padding: 1.1rem .7rem; text-align: center; cursor: pointer; background: #fff;
}
.ed-subir:hover, .ed-subir.is-sobre { border-color: #16161a; background: #f7f7f8; }
/* Mientras sube: se ve que algo está pasando, que en el móvil una foto de
   varios MB tarda y en silencio parece que no funciona. */
.ed-subir.is-subiendo { border-color: #16161a; opacity: .55; pointer-events: none; }
.ed-nota--carga { color: #16161a; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.ed-nota--carga::before {
  content: ""; width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid rgba(22,22,26,.2); border-top-color: #16161a;
  animation: ed-gira .7s linear infinite;
}
@keyframes ed-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ed-nota--carga::before { animation: none; } }
.ed-subir__tx { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ed-subir__i { font-size: 1.5rem; color: #76767f; line-height: 1; margin-bottom: .15rem; }
.ed-subir:hover .ed-subir__i, .ed-subir.is-sobre .ed-subir__i { color: #16161a; }
.ed-subir__t { font-weight: 650; font-size: .88rem; }
.ed-subir__s { font-size: .76rem; color: #76767f; }
.ed-nota { font-size: .76rem; color: #76767f; margin: .5rem 0 .3rem; }

/* El campo de archivo: invisible pero PRESENTE. Con `display: none` Safari en
   el iPhone no abre el selector al tocar su etiqueta. */
.ed-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
}

/* Cuando algo falla al subir, el porqué a un toque: en un móvil no hay consola
   donde mirarlo, y sin esto el error se queda en «no se pudo» y nada más. */
.ed-detalle {
  border: none; background: none; padding: 0; font: inherit; font-size: .74rem;
  color: inherit; text-decoration: underline; cursor: pointer;
}
/* Las fotos ya subidas, también en una fila que se desplaza */
.ed-minis { display: flex; gap: .35rem; }
.ed-mini {
  aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(22,22,26,.12);
  background: #e8e8ec center/cover no-repeat; cursor: pointer; padding: 0;
}
.ed-mini:hover { border-color: #16161a; }
.ed-minis.ed-tira > .ed-mini { flex: 0 0 66px; }

/* 05 · stickers y texto */
.ed-btn-bloque {
  width: 100%; border: 1px solid rgba(22,22,26,.12); border-radius: 10px;
  background: #fff; padding: .6rem; font: inherit; font-weight: 650; font-size: .85rem;
  cursor: pointer; color: inherit; margin-bottom: .6rem;
}
.ed-btn-bloque:hover { background: #16161a; color: #fff; border-color: #16161a; }

/* escribir el texto aquí mismo, sin ventanas del navegador */
.ed-escribir { display: flex; gap: .4rem; margin-bottom: .7rem; }
.ed-campo {
  flex: 1; min-width: 0; border: 1px solid rgba(22,22,26,.14); border-radius: 9px;
  padding: .5rem .6rem; font: inherit; font-size: .85rem; background: #fff; color: inherit;
}
.ed-campo:focus { outline: 2px solid #d5f200; outline-offset: -1px; border-color: #16161a; }
.ed-btn-add {
  flex: none; border: none; border-radius: 9px; background: #16161a; color: #fff;
  padding: .5rem .85rem; font: inherit; font-weight: 650; font-size: .82rem; cursor: pointer;
}
.ed-btn-add:hover { background: #000; }

.ed-textoctrl { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .8rem; }
.ed-textoctrl[hidden] { display: none; }
.ed-sel {
  width: 100%; border: 1px solid rgba(22,22,26,.12); border-radius: 9px;
  padding: .45rem .55rem; font: inherit; font-size: .82rem; background: #fff; color: inherit;
}
.ed-ctrl { display: flex; align-items: center; gap: .55rem; font-size: .76rem; color: #76767f; }
.ed-ctrl > span:first-child { min-width: 4em; }
.ed-rango { flex: 1; accent-color: #16161a; }

/* Stickers: UNA fila que se desplaza de lado, igual que los estuches. */
.ed-stk { display: flex; gap: .35rem; }
.ed-stk__i {
  aspect-ratio: 1; border-radius: 7px; border: 1px solid rgba(22,22,26,.1);
  background: #fff center/78% no-repeat; cursor: pointer; padding: 0;
}
.ed-stk__i:hover { border-color: #16161a; background-size: 88%; }
/* Doble clase para ganarle a `.ed-tira > *`, que si no los deja del tamaño de
   su contenido. Con 62 px entran cinco y asoma el sexto. */
.ed-stk.ed-tira > .ed-stk__i { flex: 0 0 62px; }

/* ---------- navegación entre tramos (solo se ve en móvil) ---------- */
.ed-nav, .ed__asa { display: none; }

/* ---------- móvil: la columna se vuelve hoja inferior ----------

   La pantalla se reparte en tres franjas apiladas, sin nada flotando sobre
   nada: barra arriba, lienzo en medio (se encoge si hace falta) y hoja abajo.
   La barra estuvo en `fixed` y tapaba lo de debajo; ahora va en el flujo y no
   hay que reservarle hueco a mano.                                          */
@media (max-width: 860px) {
  /* Una sola columna y tres franjas: barra, lienzo y hoja.
     La hoja mide LO QUE PIDA SU TRAMO, con 42dvh de tope: los tramos cortos
     —color, teléfono— dejan la funda casi entera a la vista, y los largos se
     quedan en el tope y se desplazan por dentro. El lienzo cambia de alto con
     ella; el observador de `.ed__lienzo` reajusta el canvas en el momento.

     El alto lo mide el JS y lo deja en `--ed-hoja`, en píxeles, porque hace
     falta poder ANIMARLO: `fit-content()` y `height: auto` no se interpolan, y
     sin transición la funda pega un brinco cada vez que se cambia de tramo. El
     42dvh de reserva es por si el JS aún no ha medido. */
  .ed {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  /* 1 · barra del producto */
  .ed__barra {
    grid-column: 1; grid-row: 1;
    border-left: none; padding: .5rem .6rem;
    padding-top: max(.5rem, env(safe-area-inset-top));
  }

  /* 2 · lienzo: cede sitio a la hoja pero nunca desaparece */
  .ed__lienzo {
    grid-column: 1; grid-row: 2;
    min-height: 30dvh; padding: .5rem .6rem;
  }

  /* 3 · hoja: del alto de su tramo, con el tope de arriba. Lo que sobre se
     desplaza dentro. La fila de la rejilla es `auto`, así que sigue a esta
     caja: al animarse su alto, el hueco del lienzo cambia con ella. */
  .ed__lado {
    grid-column: 1; grid-row: 3;
    width: 100%; height: var(--ed-hoja, 42dvh); max-height: 42dvh; min-height: 0;
    border-left: none; border-top: 1px solid rgba(22,22,26,.1);
    border-radius: 18px 18px 0 0; box-shadow: 0 -2px 16px rgba(22,22,26,.14);
  }
  /* La transición se enciende DESPUÉS de la primera medida: si no, la hoja
     entraba deslizándose desde el 42dvh de reserva nada más abrir el editor. */
  .ed.is-animado .ed__lado { transition: height .26s cubic-bezier(.4, 0, .2, 1); }

  /* Plegada: solo asoman el asa y la cabecera, para ver la funda entera. El
     alto lo recalcula el JS —con los tramos ocultos sale asa + cabecera— así
     que también se pliega y despliega con la misma animación. */
  .ed.is-plegado .ed__pasos { display: none; }

  .ed__salir { top: .5rem; bottom: auto; }
  .ed__historial { top: .5rem; right: .6rem; }

  /* El asa de plegar. Era la tira de pestañas; ahora que no está, la hoja
     necesitaba algo que dijera que se puede bajar. `flex: none` impide que se
     aplaste cuando el contenido de abajo crece. */
  .ed__asa {
    flex: none; display: block; width: 100%; padding: .5rem 0 .3rem;
    background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .ed__asa span {
    display: block; width: 42px; height: 4px; margin: 0 auto; border-radius: 99px;
    background: rgba(22,22,26,.18);
  }
  .ed.is-plegado .ed__asa span { background: rgba(22,22,26,.34); }

  /* cabecera con ‹ tramo › — con alto propio, por lo mismo. Tocar el título
     pliega y despliega; las flechas cambian de tramo. */
  .ed-nav {
    flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .35rem .7rem .5rem; border-bottom: 1px solid rgba(22,22,26,.08);
  }
  .ed.is-plegado .ed-nav { border-bottom: none; }
  .ed-nav__t {
    flex: 1; min-width: 0; text-align: center; font-weight: 650; font-size: .85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  }
  .ed-nav__f {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(22,22,26,.12);
    background: #fff; color: #16161a; font-size: 1rem; line-height: 1; cursor: pointer;
  }
  .ed-nav__f:disabled { opacity: .3; cursor: default; }

  /* en móvil manda la navegación: las cabeceras del acordeón sobran */
  .ed-tramo__h { display: none; }
  .ed-tramo__c { display: none; padding: .7rem .8rem 1rem; }
  .ed-tramo.is-on .ed-tramo__c { display: block; }
  .ed-tramo { border-bottom: none; }

  /* El desplazamiento lo lleva SOLO el contenedor de los tramos, y únicamente
     cuando el tramo llega al tope de la hoja. Nada de cajas con scroll dentro
     de otra con scroll. */
  .ed__pasos {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    /* Nunca en horizontal: si el panel entero se pudiera arrastrar de lado, al
       mover una tira se irían con ella las pestañas y las categorías. Cada tira
       se desplaza sola, dentro de su caja. */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  /* La caja de subir foto se comía un tercio de la hoja para decir dos frases.
     Se queda en una pastilla del tamaño de las miniaturas: dos de ancho —una
     sola no da para el texto— por una de alto. Mismo 66px que
     `.ed-minis.ed-tira > .ed-mini`, así que las dos cosas casan a la vista. */
  .ed-subir {
    width: calc(2 * 66px + .35rem); min-height: 66px;
    justify-content: center; gap: .1rem; padding: .4rem .3rem;
  }
  .ed-subir__i { font-size: 1.25rem; margin-bottom: 0; }
  .ed-subir__t { font-size: .78rem; line-height: 1.15; }
  /* La segunda frase no cabe en la pastilla, y el icono de cámara junto al
     carrete ya dicen a qué va. */
  .ed-subir__s { display: none; }

  /* El botón queda a la izquierda y las fotos ya subidas se desplazan a su
     derecha: así el botón no se va nunca de la vista, por muchas que haya. El
     aviso ocupa línea entera, y como va primero se queda arriba. */
  .ed-carrete { flex-flow: row wrap; align-items: flex-start; gap: .35rem; }
  .ed-carrete > .ed-aviso { flex: 1 0 100%; }
  .ed-carrete > .ed-subir { flex: none; }
  .ed-carrete > .ed-minis { flex: 1 1 0; min-width: 0; }

  /* 01 · estuches: la tarjeta se queda en la miniatura y su letra, sin caja.
     El recuadro con borde alrededor de cada una pesaba mucho para lo que dice
     y obligaba a hacerlas grandes. Así entran cuatro y asoma la quinta. */
  .ed-lineas { gap: .55rem; }
  .ed-lineas.ed-tira > .ed-linea { flex: 0 0 76px; }
  .ed-linea {
    border: none; background: none; padding: 0; gap: .3rem;
  }
  /* La foto entera dentro del cuadro, no recortada a él: son fotos de producto
     y con `cover` se quedaban sin los bordes de la funda, que es justo lo que
     distingue una línea de otra. Nada de atajo `background`: la dirección de la
     imagen la pone el JS en el propio elemento y el atajo la borraría. */
  .ed-linea__img {
    border-radius: 20px; background-color: #fff;
    background-size: 78%; background-position: center; background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(22,22,26,.07);
  }
  .ed-linea:hover .ed-linea__img { box-shadow: inset 0 0 0 1px rgba(22,22,26,.2); }
  /* Seleccionada: el anillo va sobre la miniatura, no sobre la tarjeta */
  .ed-linea.is-on { border-color: transparent; box-shadow: none; }
  .ed-linea.is-on .ed-linea__img { box-shadow: 0 0 0 2px #16161a; }
  .ed-linea__cod { font-size: .68rem; letter-spacing: .01em; }
  .ed-linea__precio { font-size: .66rem; }

  /* Nada por debajo de 16px en lo que se pueda escribir: con menos, iOS amplía
     la página al poner el cursor y deja el editor descuadrado. */
  .ed-campo, .ed-sel { font-size: 16px; }

  /* objetivos táctiles más grandes */
  .ed-color { width: 34px; height: 34px; }
  .ed-chip { padding-block: .38rem; }
  .ed-capa__f { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Mientras se arrastra una tira con el ratón: cursor de agarre y sin selección
   de texto, que si no se pinta de azul todo lo que pasa por debajo. */
.ed-tira { cursor: grab; }
.ed-tira.is-arrastrando { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.ed-tira.is-arrastrando * { pointer-events: none; }