/* Siempre transparente, con o sin animación */
.modal-backdrop {
  background-color: transparent !important;
}
.modal-backdrop.fade {
  background-color: transparent !important;
}
.modal-backdrop.show {
  background-color: transparent !important;
}


/* ----- Modal base ----- */
.custom-modal .modal-content {
  background: rgba(226, 226, 226, 0.85);
  backdrop-filter: blur(4px);
}
.custom-close { 
  filter: invert(0); 
}

/* ----- Layout columnas ----- */
.detalle-col-left { 
  position: relative;
  margin-top: 0;
  margin-bottom: 12.5px;
}
.detalle-col-right { 
  position: relative; 
  margin-top: 12.5px;
  margin-bottom: 12.5px;
}

.fecha-arrow-detalle {
  position: absolute;
  top: 2rem;
  left: -1.0rem;              /* mueve el label hacia la izquierda */
  background-color: #105ea2;  /* mismo azul de tu theme */
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem; 
  clip-path: polygon(
    0 0,       /* top-left */
    80% 0,     /* top-right inicial */
    100% 50%,  /* punta de flecha */
    80% 100%,  /* bottom-right inicial */
    0 100%     /* bottom-left */
  );
  z-index: 2; 
}

/* ----- Barra de título ----- */
.detalle-title-bar {
  background: #105ea2;
  color: #fff;
}

/* ----- Subtítulo ----- */
.detalle-subtitle {
  font-weight: 700;
  text-align: center;
}

/* ----- Texto del cuerpo (estilo de mockup) ----- */
.detalle-text { 
  font-weight: 600;
  line-height: 1.65;
}
.detalle-text p { 
  color: #105ea2;
  margin-bottom: .9rem; 
}

/* “Cuerpo:” destacado como en el mockup */
.detalle-text strong, .detalle-text b {
  font-weight: 800;
}

/* ----- Botones “Ver Video / Ver Noticia” ----- */
#modalDetalleLinks .btn {
  background-color: #0d4672; /* azul */
  color: #fff;
  border: none;
  border-radius: 8px; 
  padding: 0.3rem 0.8rem;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 75%; /* ocupa la mitad del contenedor */
  margin: 0 auto; /* centrado */
}

#modalDetalleLinks .btn:hover {
  background-color: #105ea2; /* azul más oscuro en hover */
}

#modalDetalleLinks .btn::after {
  content: "›";
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 1.8rem;
  line-height: 1;
}

/* ----- Imagen ----- */
.detalle-img-container img {
  object-fit: cover;
  max-height: 340px;
  width: 50%;
  
}
/* ----- Firma ----- */
.detalle-signature {
  font-family: "Pacifico", "Comic Sans MS", cursive;
  font-size: 1.3rem;
  color: #0d6efd;
}

/* ----- Espaciados responsivos para parecerse al mockup ----- */

@media (max-width: 991.98px) {
  .custom-modal .modal-body { 
    padding: 1rem; 
  }
  .detalle-col-left {
    display: flex;
    flex-direction: column;
    align-items: center; /* centra imagen y botones */
    width: 100%;
    padding-bottom: 20px;
  }
  .detalle-img-container {
    width: 100%;
  }
  #modalDetalleLinks {
    width: 100%;
  }
  #modalDetalleLinks .btn {
    width: 100%; /* botones full-width en móvil */
  }

  .fecha-arrow-detalle {
  position: absolute;
  top: 2rem;
  left: -14.0rem;              /* mueve el label hacia la izquierda */
  background-color: #105ea2;  /* mismo azul de tu theme */
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem; 
  clip-path: polygon(
    0 0,       /* top-left */
    80% 0,     /* top-right inicial */
    100% 50%,  /* punta de flecha */
    80% 100%,  /* bottom-right inicial */
    0 100%     /* bottom-left */
  );
  z-index: 2; 
}
}

@media (max-width: 575px) {
  .fecha-arrow-detalle {
    display: none;
  }
}