/* =========================================================
   IMÁGENES
   Miniatura de la foto guardada, ventana emergente y marco
   de encuadre.
   Las proporciones deben coincidir con las de la carta
   (estilos.css del repositorio del cliente):
     sección -> 5/2 (franja ancha)
     plato   -> 1/1 (cuadrado)
   ========================================================= */

.miniatura{margin-top:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.miniatura__marco{width:180px;aspect-ratio:5/2;border-radius:var(--radio-s);overflow:hidden;
  border:1px solid var(--linea);background:var(--velo);flex-shrink:0}
.miniatura--cuadrada .miniatura__marco{width:76px;aspect-ratio:1/1}
.miniatura__img{width:100%;height:100%;object-fit:cover;display:block}
.miniatura__datos{font-size:.75rem;color:var(--tinta-suave);line-height:1.4}
.miniatura__datos b{color:var(--tinta);font-weight:700}

/* ---------- Ventana emergente (la usan la foto y la actualización) ---------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(9,12,24,.5);-webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);overflow-y:auto}
.modal__caja{width:100%;max-width:620px;max-height:92vh;overflow-y:auto;padding:26px;
  border:1px solid var(--linea-fuerte);border-radius:var(--radio);background:var(--marfil-alto);
  box-shadow:var(--sombra-alta);-webkit-backdrop-filter:blur(30px) saturate(1.4);
  backdrop-filter:blur(30px) saturate(1.4)}
.modal__titulo{margin:0 0 5px;font-family:var(--display);font-weight:800;font-size:1.2rem;
  letter-spacing:-.01em}
.modal__pista{margin:0 0 18px;font-size:.8rem;color:var(--tinta-suave);line-height:1.5}
.modal__acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.modal__acc .btn--principal{margin-left:auto}

/* ---------- Marco de encuadre ---------- */
.recorte{margin-top:14px}
.recorte__lienzo{width:100%;aspect-ratio:5/2;display:block;border-radius:var(--radio-s);
  border:1px solid var(--linea);background:var(--velo);
  cursor:grab;touch-action:none}
.recorte__lienzo:active{cursor:grabbing}
.recorte__zoom{display:flex;align-items:center;gap:10px;margin-top:12px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.recorte__zoom input[type=range]{flex:1;padding:0;accent-color:var(--acento-1)}
.recorte__nota{margin:10px 0 0;font-size:.73rem;color:var(--tinta-suave);line-height:1.45}