/* ============================================================
   Nube Multimedia por concierto — galería de fotos + videos.
   Estética Concert Hall: serif display, petrol/coral/marfil,
   sombras newspaper-print. Usa las variables del tema Resonum.
   ============================================================ */

/* ---------- Cuota ---------- */
.cm-cuota { font-family: var(--rs-fuente-display); }
.cm-cuota-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.cm-cuota-titulo {
  font-weight: 600; font-size: 1.05rem; color: var(--rs-petrol-900);
  letter-spacing: -.01em;
}
.cm-cuota-detalle { color: var(--rs-tinta-500); font-size: .9rem; font-style: italic; }
.cm-cuota-pct {
  font-family: var(--rs-fuente-mono); font-weight: 700; font-size: 1.25rem;
  color: var(--rs-petrol-800);
}
.cm-cuota-barra {
  height: 12px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--rs-petrol-700) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rs-petrol-700) 22%, transparent);
}
.cm-cuota-barra-relleno {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--rs-petrol-800), var(--rs-petrol-600));
  transition: width .4s ease;
}
.cm-cuota-barra-relleno--alerta {
  background: linear-gradient(90deg, var(--rs-coral-600), var(--rs-coral-500));
}
.cm-cuota-nota { margin-top: .6rem; color: var(--rs-tinta-500); font-size: .82rem; }

/* ---------- Flyer ---------- */
.cm-flyer { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.cm-flyer-thumb {
  display: block; flex-shrink: 0; max-width: 150px;
  border: 1.5px solid var(--rs-petrol-800); border-radius: var(--rs-radio-sm);
  overflow: hidden; box-shadow: var(--rs-sombra-baja); cursor: zoom-in;
}
.cm-flyer-thumb img { display: block; width: 100%; height: auto; }
.cm-flyer-texto { flex: 1; min-width: 220px; font-family: var(--rs-fuente-display); }
.cm-flyer-texto p { margin: 0 0 .75rem; color: var(--rs-tinta-700); }

/* ---------- Subir fotos ---------- */
.cm-subir { margin-bottom: 1.5rem; }
.cm-subir-zona {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; padding: 1.75rem 1rem; text-align: center; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--rs-petrol-700) 38%, transparent);
  border-radius: var(--rs-radio-md);
  background: color-mix(in srgb, var(--rs-marfil-200) 45%, transparent);
  transition: border-color .2s ease, background .2s ease;
}
.cm-subir-zona:hover,
.cm-subir-zona--drag {
  border-color: var(--rs-coral-500);
  background: color-mix(in srgb, var(--rs-coral-500) 8%, transparent);
}
.cm-subir-icono { font-size: 1.8rem; }
.cm-subir-texto {
  font-family: var(--rs-fuente-display); font-weight: 600;
  color: var(--rs-petrol-900);
}
.cm-subir-ayuda { font-size: .78rem; color: var(--rs-tinta-500); font-style: italic; }
.cm-subir-acciones {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: .85rem;
}
.cm-subir-elegidas {
  font-family: var(--rs-fuente-mono); font-size: .8rem; color: var(--rs-coral-600);
  font-weight: 700;
}

/* ---------- Barra de progreso ---------- */
.cm-progreso { margin-top: 1rem; }
.cm-progreso-barra {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--rs-petrol-700) 14%, transparent);
}
.cm-progreso-relleno {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--rs-coral-600), var(--rs-coral-500));
  transition: width .15s linear;
}
.cm-progreso-texto {
  margin-top: .4rem; font-family: var(--rs-fuente-mono); font-size: .78rem;
  color: var(--rs-tinta-700);
}

/* ---------- Galería de fotos ---------- */
.cm-galeria {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.cm-item {
  position: relative; margin: 0; border-radius: var(--rs-radio-sm); overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--rs-petrol-700) 22%, transparent);
  box-shadow: var(--rs-sombra-baja); background: var(--rs-marfil-50);
  aspect-ratio: 1 / 1;
}
.cm-item--portada { border-color: var(--rs-coral-500); box-shadow: var(--rs-sombra-coral, var(--rs-sombra-alta)); }
.cm-item-img { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.cm-item-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-item-portada-badge {
  position: absolute; top: .4rem; left: .4rem; z-index: 2;
  padding: .2rem .5rem; border-radius: 999px;
  background: var(--rs-coral-500); color: var(--rs-marfil-50);
  font-family: var(--rs-fuente-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; box-shadow: var(--rs-sombra-baja);
}
.cm-item-acciones {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: flex-end; gap: .25rem; padding: .35rem;
  background: linear-gradient(0deg, color-mix(in srgb, var(--rs-petrol-900) 70%, transparent), transparent);
  opacity: 0; transition: opacity .2s ease;
}
.cm-item:hover .cm-item-acciones,
.cm-item:focus-within .cm-item-acciones { opacity: 1; }
.cm-item-acciones form { margin: 0; }

/* ---------- Videos ---------- */
.cm-video-form { margin-bottom: 1.5rem; }
.cm-video-form-fila { display: flex; gap: .6rem; flex-wrap: wrap; }
.cm-video-form-fila .form-input { flex: 1; min-width: 240px; }
.cm-video-ayuda { margin: .55rem 0 0; font-size: .82rem; color: var(--rs-tinta-500); font-style: italic; }

.cm-videos {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cm-video {
  display: flex; flex-direction: column;
  border: 1.5px solid color-mix(in srgb, var(--rs-petrol-700) 22%, transparent);
  border-radius: var(--rs-radio-md); overflow: hidden;
  box-shadow: var(--rs-sombra-baja); background: var(--rs-marfil-50);
  position: relative;
}
.cm-video-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--rs-petrol-900); overflow: hidden; cursor: pointer;
}
.cm-video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-video-sinminiatura {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 2.5rem;
}
.cm-video-play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: color-mix(in srgb, var(--rs-coral-500) 92%, transparent);
  color: var(--rs-marfil-50); font-size: 1.3rem; padding-left: .2rem;
  box-shadow: var(--rs-sombra-alta); transition: transform .2s ease;
}
.cm-video-thumb:hover .cm-video-play { transform: scale(1.1); }
.cm-video-info { padding: .65rem .8rem; padding-right: 2.5rem; }
.cm-video-titulo {
  font-family: var(--rs-fuente-display); font-weight: 600; font-size: .95rem;
  color: var(--rs-petrol-900); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cm-video-proveedor {
  font-family: var(--rs-fuente-mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rs-coral-600); font-weight: 700; margin-top: .25rem;
}
/* El borrar va sobre el thumbnail oscuro: chip circular oscuro con ícono marfil
   para que se vea (antes era fantasma con ícono oscuro = invisible). */
.cm-video > .form-eliminar { position: absolute; top: .45rem; right: .45rem; z-index: 3; margin: 0; }
.cm-video > .form-eliminar .fl-boton {
  background: var(--rs-marfil-50) !important;
  color: var(--rs-coral-600) !important;
  border: 1.5px solid var(--rs-coral-500) !important;
  border-radius: 50%;
  box-shadow: var(--rs-sombra-baja);
}
.cm-video > .form-eliminar .fl-boton:hover {
  background: var(--rs-coral-500) !important;
  color: var(--rs-marfil-50) !important;
}

/* ---------- Modal de obra: que NO se corte (alto > pantalla) ----------
   El modal de obra tiene muchos campos y supera el alto de la ventana.
   Hacemos que la capa de fondo (full-screen) sea la que scrollee y se
   alinee arriba, dejando que el modal crezca natural. Así se llega a todo
   el contenido (de "Orden" arriba hasta "Guardar" abajo). !important para
   ganarle a las reglas base de Flora. */
.fl-modal-fondo[data-fl-modal="modal-obra"] {
  align-items: flex-start !important;
  overflow-y: auto !important;
  padding: clamp(4.5rem, 9vh, 8rem) 1rem 3rem !important;
}
.fl-modal-fondo[data-fl-modal="modal-obra"] .fl-modal {
  max-height: none !important;
  margin: 0 auto;
}
.fl-modal-fondo[data-fl-modal="modal-obra"] .fl-modal-cuerpo {
  overflow: visible !important;
  justify-content: flex-start !important;
}

/* ---------- Solistas dinámicos (modal de obra) ---------- */
.cm-solista-fila {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap;
  padding: .5rem .6rem; border-radius: var(--rs-radio-sm);
  border: 1px solid color-mix(in srgb, var(--rs-petrol-700) 16%, transparent);
  background: color-mix(in srgb, var(--rs-marfil-200) 35%, transparent);
}
.cm-solista-fila .form-select { flex: 1 1 180px; min-width: 0; }
.cm-solista-fila .cm-solista-cuerda { flex: 0 1 170px; min-width: 0; padding-right: 2rem; }
.cm-oculto { display: none !important; }

/* En celular: apilar coreuta y cuerda a lo ancho, la ✕ al costado. */
@media (max-width: 560px) {
  .cm-solista-fila .form-select,
  .cm-solista-fila .cm-solista-cuerda { flex: 1 1 100%; }
  .cm-solista-quitar { margin-left: auto; }
}
.cm-solista-quitar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--rs-radio-sm);
  cursor: pointer; font-size: .9rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid color-mix(in srgb, var(--rs-coral-600) 45%, transparent);
  background: color-mix(in srgb, var(--rs-coral-500) 10%, transparent);
  color: var(--rs-coral-600); font-weight: 700;
}
.cm-solista-quitar:hover { background: var(--rs-coral-500); color: var(--rs-marfil-50); }

/* ---------- Lightbox ---------- */
.cm-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  /* Fondo semitransparente: el player NO tapa toda la pantalla; se sigue viendo
     Resonum detrás (no da sensación de "me fui a otro lado"). */
  background: color-mix(in srgb, var(--rs-petrol-900) 46%, transparent);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.cm-lightbox[hidden] { display: none; }
/* Marco = caja del player, del tamaño del video. La X se ancla a SU esquina. */
.cm-lightbox-marco {
  position: relative; width: 100%; max-width: min(820px, 100%);
  display: flex; align-items: center; justify-content: center;
}
.cm-lightbox-contenido {
  width: 100%; max-height: 85vh;
  display: flex; align-items: center; justify-content: center;
}
.cm-lightbox-contenido img {
  max-width: 100%; max-height: 85vh; width: auto; height: auto;
  border-radius: var(--rs-radio-md); box-shadow: var(--rs-sombra-alta);
}
.cm-lightbox-contenido .cm-lightbox-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--rs-radio-md); overflow: hidden; box-shadow: var(--rs-sombra-alta);
  background: #000;
}
.cm-lightbox-contenido .cm-lightbox-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* La ✕ se ancla a la esquina del VIEWPORT (no al marco, cuyo ancho cambia con la
   imagen), así nunca queda recortada ni "flotando" lejos de una foto angosta. */
/* Botones del lightbox: usan SVG (viewBox simétrico) en vez de glifos de texto,
   que en la fuente serif quedaban descentrados. El flex centra el SVG perfecto. */
.cm-lightbox-cerrar {
  position: absolute; top: 1rem; right: 1rem; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--rs-marfil-50) 45%, transparent);
  background: color-mix(in srgb, var(--rs-petrol-900) 80%, transparent);
  color: var(--rs-marfil-50);
  transition: background .15s ease;
}
.cm-lightbox-cerrar:hover { background: var(--rs-coral-500); }
.cm-lightbox-cerrar svg { display: block; width: 20px; height: 20px; }

/* ---------- Flechas de navegación + contador del lightbox ---------- */
.cm-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--rs-marfil-50) 45%, transparent);
  background: color-mix(in srgb, var(--rs-petrol-900) 80%, transparent);
  color: var(--rs-marfil-50);
  transition: background .15s ease, transform .15s ease;
}
.cm-lightbox-nav svg { display: block; width: 26px; height: 26px; }
.cm-lightbox-nav:hover { background: var(--rs-coral-500); }
.cm-lightbox-nav:active { transform: translateY(-50%) scale(.92); }
.cm-lightbox-nav--prev { left: .85rem; }
.cm-lightbox-nav--next { right: .85rem; }
.cm-lightbox-nav[hidden] { display: none; }

.cm-lightbox-contador {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 5;
  padding: .3rem .85rem; border-radius: 999px;
  background: color-mix(in srgb, var(--rs-petrol-900) 80%, transparent);
  color: var(--rs-marfil-50); font-family: var(--rs-fuente-mono);
  font-size: .78rem; letter-spacing: .05em;
}
.cm-lightbox-contador[hidden] { display: none; }

@media (max-width: 560px) {
  .cm-lightbox-nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .cm-lightbox-nav--prev { left: .4rem; }
  .cm-lightbox-nav--next { right: .4rem; }
  .cm-lightbox-cerrar { top: .6rem; right: .6rem; }
}