/* microcharlas-fna.css
   Fixes for SharePoint 2013 page mixing Bootstrap 3 CSS + Bootstrap 5 JS
   - Fast manual-only transitions
   - Indicators: 3 dots visible + clickable
   - Modal visibility + z-index
*/

/* ===== FIX VISIBILIDAD MODALES (compat BS3/4 CSS + BS5 JS) ===== */
.modal.fade { opacity: 0; }
.modal.fade.show,
.modal.fade.in { opacity: 1 !important; } /* show (BS5) + in (BS3/4) */

/* stacking correcto */
.modal { z-index: 1055 !important; }
.modal-backdrop { z-index: 1050 !important; }

/* por si algún CSS dejó el modal “invisible” */
.modal.show { visibility: visible !important; display: flex !important; justify-content: center; align-items: center; }

/* ===== Layout del carrusel ===== */
.item.active { display: block; }

.center-carousel {
  display: flex;
  justify-content: center;
  margin: 10px;
}

/* ===== Transición rápida (BS3 usa left, BS5 usa transform) ===== */
#myCarousel .carousel-inner > .item,
#myCarousel .carousel-inner > .item.active,
#myCarousel .carousel-inner > .item.next,
#myCarousel .carousel-inner > .item.prev{
  -webkit-transition: left .6s ease-in-out !important;
  transition: left .6s ease-in-out !important; /* BS3 */
}
#myCarousel .carousel-item{
  -webkit-transition: -webkit-transform .6s ease-in-out !important;
  transition: transform .6s ease-in-out !important; /* BS5 */
}

/* Ajustes que ya venías usando */
#myCarousel .carousel-inner .active.left,
#myCarousel .carousel-inner .active.right{ left: 0% !important; }
#myCarousel .carousel-inner .next{ left: 80% !important; }
#myCarousel .carousel-inner .prev{ left: -80% !important; }

/*Botón descarga*/
.modal-header a {
    margin: 0 15px 0px 15px !important;
}

/* Controles */
.carousel-control{
  color: #286090;
  background: none !important;
  border: none;
}
.carousel-control:hover{
  color: #286090;
  background: none;
  border: none;
}
.carousel-control:focus{ color: #3883c4; }

.carousel-inner,
.carousel-inner .item{
  background: none !important;
  border: none !important;
}

.item {
  padding: 0 0 8px 0 !important;
}

/* ===== Indicadores (3 círculos) ===== */
#myCarousel ol.carousel-indicators,
.ExternalClass #myCarousel ol.carousel-indicators{
  bottom: -18px !important;
  list-style: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;

  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  pointer-events: auto !important; /* ✅ clickeables */
}

#myCarousel ol.carousel-indicators > li,
.ExternalClass #myCarousel ol.carousel-indicators > li{
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;

  border-radius: 999px !important;
  background: transparent !important;
  border: 2px solid #002e83 !important;
  opacity: 1 !important;

  text-indent: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important; /* ✅ */
}

#myCarousel ol.carousel-indicators > li.active,
#myCarousel ol.carousel-indicators > li[aria-current="true"]{
  background: #002e83 !important;
  border-color: #002e83 !important;
}

/* Quita artefactos del HTML (button + br) sin tocar markup */
#myCarousel ol.carousel-indicators > li > button{ display: none !important; }
#myCarousel ol.carousel-indicators br{ display: none !important; }

/* ===== Cards / grid ===== */
.contenedor-imagenes{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.contenedor-imagenes .col-md-4{
  display: flex;
  justify-content: center;
  width: 230px;
  height: 280px;
  margin: 15px 0;
}

.img-style{
  cursor: pointer;
  width: 100%;
  height: 100%;
  border-radius: 35px 10px;
}

.size-container{ width: 800px; }

/* Lista */
.ms-rtestate-field ol > li{ padding: 5px; }
.ms-rtestate-field ol > li:before{
  display: none;
  content: counter(list) ".";
  position: absolute;
  left: -2.5em;
  width: 2em;
  text-align: right;
  color: #002E83;
  font-family: 'DIN2014-DemiBold', sans-serif;
  font-size: 22px;
}

/* =====================================================================
   FIX MODALES: Ajustar alto/ancho para que SIEMPRE se vea el botón de descarga
   - Mantiene el header visible (sticky)
   - Evita que la imagen "se salga" del viewport
   ===================================================================== */

/* Aplica tanto si existe .ExternalClass como si no */
.ExternalClass .modal[id^="myModal"], .modal[id^="myModal"]{
  overflow-y: auto !important;
  padding: 0 !important;
}

/* Modal ancho y centrado, pero sin salirse de pantalla */
.ExternalClass .modal[id^="myModal"] .modal-dialog,
.modal[id^="myModal"] .modal-dialog{
  max-width: 95vw !important;
  margin: 10px auto !important;
}

/* Contenedor con altura máxima del viewport y scroll interno */
.ExternalClass .modal[id^="myModal"] .modal-content,
.modal[id^="myModal"] .modal-content{
  max-height: calc(100vh - 20px) !important;
  overflow: hidden !important;
}

/* Header siempre visible para el icono/botón de descarga */
.ExternalClass .modal[id^="myModal"] .modal-header,
.modal[id^="myModal"] .modal-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 1067 !important; /* por encima de controles */
  background: #fff !important;
  height: auto !important;      /* anula height:50px inline si estorba */
  min-height: 50px !important;  /* conserva el alto mínimo */
  padding: 8px 12px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* El body scrollable para contenido grande */
.ExternalClass .modal[id^="myModal"] .modal-body,
.modal[id^="myModal"] .modal-body{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 !important;
  max-height: calc(100vh - 90px) !important; /* deja visible el header */
}

/* Imágenes dentro del modal: ajustan a pantalla sin ocultar el header */
.ExternalClass .modal[id^="myModal"] img.responsive,
.modal[id^="myModal"] img.responsive{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 110px) !important; /* header + márgenes */
  object-fit: contain;
}

/* En pantallas grandes, permite un poco más de ancho */
@media (min-width: 992px){
  .ExternalClass .modal[id^="myModal"] .modal-dialog,
  .modal[id^="myModal"] .modal-dialog{
    max-width: 56% !important;
  }
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 100% !important;
        margin: 30px auto;
    }
}