/* ==========================================================================
   Bancada — Editor libre: la ficha de venta y el campo del código
   La tarjeta que ofrece el editor (catálogo, Ambiente, inicio), la ventana
   «Editor libre de muebles» y el diálogo donde se escribe el código.
   Sólo tokens: sale igual de bien en claro y en oscuro.
   Va después de pro.css (el campo del código reusa `.pro-codigo`).
   ========================================================================== */

/* Varios de estos elementos son flex o grid, y a ésos el [hidden] del navegador no los esconde. */
.ef-capturas[hidden], .ef-ficha-cuerpo [hidden] { display: none !important; }

/* ---- La tarjeta del catálogo ----------------------------------------------- */
.ef-ficha__mini {
  display: grid;
  place-items: center;
  color: var(--acc-ink);
}
.ef-ficha__mini svg { color: var(--acc); }
.ef-ficha__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-weight: 640;
  color: var(--acc-ink);
}
.ef-ficha:hover .ef-ficha__cta svg { transform: translateX(3px); }
.ef-ficha__cta svg { transition: transform var(--t) var(--ease-out); }

/* ---- El renglón del diálogo del Ambiente ----------------------------------- */
.ef-ficha-amb { cursor: pointer; }

/* ---- La puerta del inicio ---------------------------------------------------- */
.ef-puerta__ilustracion {
  display: grid;
  place-items: center;
  color: var(--steel);
}
.ef-puerta:hover .ef-puerta__ilustracion { color: var(--steel-hover); }

/* ---- La ventana de la ficha -------------------------------------------------- */
.modal--ef { width: min(680px, 100%); }
.modal--ef-codigo { width: min(480px, 100%); }

.ef-ficha-cuerpo { display: flex; flex-direction: column; gap: var(--s4); }
.ef-intro {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--ink-2);
}

/* Las capturas: sólo aparecen las que existen. */
.ef-capturas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s3);
}
.ef-captura {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.ef-captura img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.ef-captura__pie {
  padding: var(--s2) var(--s3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}

/* Lo que hace el editor. */
.ef-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s3) var(--s5);
}
.ef-lista__item { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; }
.ef-lista__item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ef-lista__tilde {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: var(--r-pill);
  background: var(--acc-soft);
  color: var(--acc-ink);
}
.ef-lista__titulo { font-size: var(--fs-base); font-weight: 640; color: var(--ink); }
.ef-lista__texto { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ink-3); }
.ef-aparte { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--ink-2); }

.ef-comprar { font-weight: 640; }

/* ---- El campo del código ------------------------------------------------------ */
.ef-ingreso { display: flex; flex-direction: column; gap: var(--s4); }
.ef-ingreso__texto { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-base); }
.ef-ingreso__aparte { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-base); }

/* Lugar fijo para el estado: así el diálogo no salta cuando aparece un error. */
.ef-estado { min-height: 46px; margin-top: calc(var(--s2) * -1); }
.ef-error {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--bad-line);
  background: var(--bad-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.ef-error svg { flex: none; margin-top: 1px; color: var(--bad); }

.ef-abriendo { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-3); }
.ef-abriendo .progreso__relleno { width: 38% !important; animation: ef-corre 1.15s var(--ease) infinite; }
@keyframes ef-corre { from { transform: translateX(-100%); } to { transform: translateX(270%); } }

@media (prefers-reduced-motion: reduce) {
  .ef-abriendo .progreso__relleno { animation: none; width: 100% !important; }
  .ef-ficha__cta svg { transition: none; }
}