/**
 * RGA — responsive / fluido por viewport
 * Evita scroll horizontal y adapta barras, grids y tablas al móvil.
 */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100vw;
}

/* Contenedores: que puedan encoger dentro de flex/grid */
.max-w-7xl,
.max-w-rga,
main,
.rga-curso-detalle,
.rga-page,
#app-content {
  min-width: 0;
  max-width: 100%;
}

img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Tablas en diapositivas / HTML rico: scroll interno, no rompen la página */
.diapositiva-contenido,
.diapositiva-pasos,
.rga-editor-content,
.ep-rich-html {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.diapositiva-contenido table,
.diapositiva-pasos table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Barra de acciones masivas del curso */
#barraAccionesBulk {
  min-width: 0 !important;
  width: min(420px, calc(100vw - 1.25rem));
  max-width: calc(100vw - 1.25rem);
  left: 50%;
  right: auto;
  transform: translate(-50%, 0);
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
#barraAccionesBulk.translate-y-full {
  transform: translate(-50%, 110%);
}

/* Filas de recursos: permitir wrap */
.rga-curso-detalle .flex.items-center.gap-3,
.rga-curso-detalle .flex.items-start.gap-3 {
  min-width: 0;
}
.rga-curso-detalle .truncate {
  min-width: 0;
}

@media (max-width: 767px) {
  .max-w-7xl {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  #barraAccionesBulk {
    width: calc(100vw - 1rem);
    gap: 0.35rem;
  }
  #barraAccionesBulk .h-6.w-px {
    display: none;
  }
  #barraAccionesBulk button {
    font-size: 0.7rem;
    padding: 0.35rem 0.55rem;
  }

  /* Modales: no salirse del viewport */
  .fixed .absolute.top-1\/2.left-1\/2,
  .fixed [class*="max-w-"] {
    max-width: min(100%, calc(100vw - 1.25rem)) !important;
  }

  /* Orbes decorativos: no empujar layout */
  .rga-bg-glow,
  .rga-bg-orb {
    max-width: 70vw !important;
    max-height: 70vw !important;
  }
}

@media (max-width: 480px) {
  .rga-hero-btn {
    width: 100%;
    justify-content: center;
  }
}