/* Imagen con versículos: vista previa a la izquierda (arriba en el teléfono) y opciones al lado. */
.imagen-abrir { margin-top: 8px; }
#imagen-dialog { width: min(980px, 96vw); max-height: 94vh; padding: 20px 22px; }
#imagen-dialog .imagen-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 22px; align-items: start; }
#imagen-lienzo { width: 100%; height: auto; max-height: 76vh; object-fit: contain; border-radius: 6px; box-shadow: 0 6px 24px color-mix(in srgb, black 18%, transparent); background: transparent; justify-self: center; width: auto; max-width: 100%; }
#imagen-dialog .imagen-opciones { display: grid; gap: 12px; min-width: 0; }
#imagen-dialog .imagen-opciones label { display: grid; gap: 4px; font-size: .9rem; }
#imagen-dialog .imagen-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
#imagen-dialog .imagen-fila > label { flex: 1 1 120px; }
#imagen-dialog .imagen-check { display: flex !important; align-items: center; gap: 8px; }
#imagen-dialog .imagen-check input { width: auto; min-width: 0; margin: 0; flex: 0 0 auto; }
#imagen-dialog textarea { resize: vertical; min-height: 5.5em; font: inherit; }
#imagen-dialog .imagen-ia { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 8px; }
#imagen-dialog .imagen-ia button { justify-self: start; min-height: 40px; }
#imagen-dialog .imagen-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
#imagen-dialog .imagen-acciones button { min-height: 44px; padding: 0 18px; }
@media (max-width: 700px) {
  #imagen-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
  #imagen-dialog .imagen-cuerpo { grid-template-columns: 1fr; gap: 14px; }
  #imagen-lienzo { max-height: 46vh; }
}
#imagen-dialog .imagen-ia-titulo { margin: 0; font-weight: 600; }
#imagen-dialog .imagen-ideas { display: grid; gap: 6px; }
#imagen-dialog .imagen-idea { text-align: left; font: inherit; font-size: .88rem; line-height: 1.4; padding: 8px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); background: color-mix(in srgb, currentColor 4%, transparent); color: inherit; cursor: pointer; }
#imagen-dialog .imagen-idea[aria-pressed="true"] { border-color: var(--accent, #7A3E2E); box-shadow: inset 3px 0 0 var(--accent, #7A3E2E); }
#imagen-dialog #imagen-otras-ideas { justify-self: start; font-size: .85rem; }
#imagen-dialog .imagen-pinturas-bloque { display: grid; gap: 6px; min-width: 0; }
#imagen-dialog .imagen-pinturas { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; }
#imagen-dialog .imagen-pintura { flex: 0 0 auto; width: 56px; height: 84px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: color-mix(in srgb, currentColor 8%, transparent); scroll-snap-align: start; cursor: pointer; }
#imagen-dialog .imagen-pintura img { width: 100%; height: 100%; object-fit: cover; display: block; }
#imagen-dialog .imagen-pintura[aria-pressed="true"] { border-color: var(--accent, #7A3E2E); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #7A3E2E) 35%, transparent); }