/* =========================================================
   EDITOR
   Los recuadros de sección y grupo, y la ficha de cada plato.
   ========================================================= */

.bloque{padding:22px;margin-bottom:18px;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--marfil-alto);box-shadow:var(--sombra);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.bloque__titulo{margin:0 0 16px;font-family:var(--display);font-weight:800;font-size:1.14rem;
  letter-spacing:-.015em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bloque__acciones{margin-left:auto;display:flex;gap:8px}

/* Etiquetita de color que dice si el recuadro es una sección o un grupo */
.etq{font-family:var(--texto);font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 11px;border-radius:100px;color:var(--sobre-acento)}
.etq--seccion{background:var(--grad);box-shadow:var(--glow)}
.etq--grupo{background:linear-gradient(135deg,var(--verde),var(--verde-hondo));color:#04170F}

/* Fila de botones al pie de un recuadro */
.acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

.ficha-item{padding:16px;margin-bottom:12px;border:1px solid var(--linea);border-radius:var(--radio-m);
  background:var(--marfil)}
/* El precio y la fila de botones se ponen en línea, pero en pantallas
   estrechas no caben (precio + Foto/Copiar/▲/▼/Eliminar suman más que el
   ancho del móvil). Sin envolver, esa fila estiraba toda la rejilla y la
   página crecía a lo ancho al abrir un grupo. Con flex-wrap los botones
   bajan a la línea siguiente y el ancho se mantiene igual. */
.ficha-item__cabecera{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;margin-bottom:10px}
.ficha-item__cabecera .campo{width:130px}
.ficha-item__botones{display:flex;gap:4px;margin-left:auto;padding-bottom:2px}

/* Móvil: las tarjetas se ciñen un poco para ganar ancho útil. */
@media(max-width:600px){
  .bloque{padding:16px;border-radius:var(--radio-m)}
  .ficha-item{padding:14px}
  .bloque__acciones{margin-left:0;width:100%}
}