/* ──────────────────────────────────────────────────────────────────────────
   Estilos compartidos para imágenes de Quill: overlay de edición (selección,
   redimensionar, alinear) y render del float. Cargado globalmente en base.html
   para que aplique tanto en los editores como en las páginas que muestran el
   contenido (noticias, eventos, clubs, modales de términos…).
   Lógica del overlay en js/quill/quill-image-tools.js.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Overlay de edición (solo en el editor en vivo: .ql-container) ── */
.ql-container .ql-editor img { cursor: pointer; }

.qit-overlay {
  position: absolute; display: none; box-sizing: border-box;
  border: 1.5px solid #ef4444; pointer-events: none; z-index: 5;
}
.qit-handle {
  position: absolute; width: 11px; height: 11px; background: #ef4444;
  border: 1.5px solid #fff; border-radius: 2px; pointer-events: auto;
}
.qit-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.qit-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.qit-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.qit-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.qit-bar {
  position: absolute; top: -2.1rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.1rem; padding: 0.18rem; pointer-events: auto;
  background: var(--bg-dropdown); border: 1px solid var(--border-medium);
  border-radius: 0.4rem; box-shadow: 0 2px 8px rgba(0,0,0,0.25); white-space: nowrap;
}
.qit-align {
  border: none; background: transparent; color: var(--text-secondary);
  font-size: 0.85rem; line-height: 1; padding: 0.2rem 0.35rem; border-radius: 0.3rem; cursor: pointer;
}
.qit-align:hover { background: var(--bg-card-medium); color: var(--text-primary); }
.qit-align.qit-active { background: #ef4444; color: #fff; }

/* ── Render del float (editor, vista previa y página pública) ──
   Se aplica por clase, sin requerir un contenedor concreto, para funcionar en
   cualquier superficie que muestre contenido de Quill.
   `!important` en las propiedades de layout (float/max-width/margin) porque la
   alineación elegida por el autor debe prevalecer sobre la regla genérica de
   imagen de cada página (p. ej. `.news-body.ql-editor img { margin; max-width }`,
   que tiene mayor especificidad y se carga después). */
img.ql-float-left {
  float: left !important; max-width: 50% !important; margin: 0.25rem 1.5rem 1rem 0 !important;
}
img.ql-float-right {
  float: right !important; max-width: 50% !important; margin: 0.25rem 0 1rem 1.5rem !important;
}
img.ql-float-center {
  float: none !important; display: block !important; margin: 1.5rem auto !important;
}

/* ── Video embebido (iframe.ql-video del botón "video" de Quill) ──
   Quill lo inserta sin proporción (default 300×150 → se ve estirado y bajo).
   Lo forzamos a ancho completo con relación 16:9 en cualquier superficie que
   muestre contenido de Quill (editor, vista previa y página pública). */
.ql-editor .ql-video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

/* Limpia los floats dentro del contenedor de contenido (todos llevan .ql-editor) */
.ql-editor::after { content: ""; display: block; clear: both; }

/* En móvil la imagen flotante pasa a ancho completo */
@media (max-width: 639px) {
  img.ql-float-left,
  img.ql-float-right,
  img.ql-float-center {
    float: none !important; max-width: 100% !important; margin: 1.5rem 0 !important;
  }
}